/* wiki_style_a.css - the main stylesheet, lifted out of index.html at v848.
 *
 * It was one 411 KB inline <style> block sitting in the head, which meant it
 * was re-downloaded on every visit (index.html is served must-revalidate and
 * has to be) and, worse, that every internal link on the site sat 525 KB deep
 * in the document. Search Console had /weapons as "Discovered, currently not
 * indexed" with no crawl and no referring page detected.
 *
 * _headers matches /wiki_style_*.css and serves this 30 days immutable, so it
 * is fetched once per build. The <link> in index.html sits exactly where this
 * block used to, so the cascade order against the 29 remaining inline blocks
 * is unchanged. Bump its ?v= with the build, same as the .js sidecars.
 */

:root {
  /* v755 Knight Shift: Gotham at night. Colder and deeper than the old
     navy, so the bat-signal yellow above has something to burn against. */
  --bg: #06080e;
  --bg-2: #0b0e17;
  --bg-3: #121724;
  --bg-card: #161b2a;
  --line: var(--w07);
  --line-2: var(--w13);
  --text: #eef0f8;
  --text-dim: #b6bcd2;
  --text-mute: #8a92b0;
  --text-fade: #7d84a3;
  --accent: #ff8c1a;
  /* v923: the accent as bare channels, so a tint, a border or a glow can be
     written rgba(var(--accent-rgb), .18) and follow the theme instead of being
     frozen to one update's color. 426 values across this sheet were hardcoded
     to the Knight Shift gold, which is why tabs, buttons and panels still read
     Batman yellow a whole update later. Keep this in step with --accent. */
  --accent-rgb: 255,140,26;
  --accent-2: #ff6a00;
  --accent-cool: #8cff5a;
  --good: #7be58a;
  --bad: #ff6868;
  --rare-c: #b9c2d6;
  --rare-u: #6ce58a;
  --rare-r: #5db5ff;
  --rare-e: #c87dff;
  /* Legendary and Mythic. These are the game's own rarity colours and
     they stay gold whatever the site theme is. They were the same hex as
     the old Knight Shift accent by coincidence, so a find and replace on
     #ffd429 during the Brick or Treat makeover would have turned every
     Legendary item on the site orange. */
  --rare-l: #ffd429;
  --rare-m: #ffd429;
  --shadow-1: 0 2px 8px rgba(0,0,0,.35);
  --shadow-2: 0 8px 28px rgba(0,0,0,.45);
  --radius: 14px;
  --radius-sm: 10px;
  /* v703: the amber does two jobs. As text it has to darken on a light
     ground to stay readable, as a button fill it must not, or every amber
     button turns brown. --accent moves with the theme, --accent-fill does
     not. */
  --accent-fill: #ff8c1a;
  --accent-ink: #151515;
  /* The builder's 3D backdrop stays dark in both themes. A white void behind
     a LEGO build washes the pieces out and the game never shows you one. */
  --canvas-bg: #0a0d15;
  /* v758b: Gotham behind the footer. Declared here so the light theme can
     drop it; a dark photograph under a light footer is a grey murk. */
  --footer-art: url("knightshift/footer_strip.webp?v=758");
  --footer-floor: rgba(6,8,14,.72);
  /* v706: one duration for a control answering a touch, one for a panel
     opening. Everything that used to pick its own number now reads these. */
  --t-fast: .14s;
  --t-slow: .26s;
  --topnav-bg: linear-gradient(180deg,#080c1a,#0a0f1f);
  --field: rgba(0,0,0,.35);
  --field-2: rgba(0,0,0,.4);
  --field-3: rgba(0,0,0,.5);
  /* v703: text that sits on a tinted button or pill. On the dark theme these
     are pale, which is right on a dark tint and wrong on a light one, so they
     move with the theme like everything else. */
  --ink-good: #c5f5d2;
  --ink-good-2: #6ce58a;
  --ink-cool: #cfe5ff;
  --ink-warm: #f5e1a6;
  --ink-bad: #ff8a8a;
  --supporter: #ff9ec8;
  --supporter-2: #ffb6d4;
  /* Subtle surface lifts. On the dark theme these are white at low alpha, on
     the light theme the same idea inverted. Every hairline and every faint
     panel fill reads from these, which is what lets one block of values flip
     the whole site. */
  --w02: rgba(255,255,255,.02);
  --w03: rgba(255,255,255,.03);
  --w04: rgba(255,255,255,.04);
  --w05: rgba(255,255,255,.05);
  --w06: rgba(255,255,255,.06);
  --w07: rgba(255,255,255,.07);
  --w08: rgba(255,255,255,.08);
  --w09: rgba(255,255,255,.09);
  --w10: rgba(255,255,255,.1);
  --w11: rgba(255,255,255,.11);
  --w12: rgba(255,255,255,.12);
  --w13: rgba(255,255,255,.13);
  --w14: rgba(255,255,255,.14);
  --w15: rgba(255,255,255,.15);
  --w16: rgba(255,255,255,.16);
  --w18: rgba(255,255,255,.18);
  --w20: rgba(255,255,255,.2);

  /* v703 generated: every dark surface fill that was written as an rgba
     instead of a token. The dark values are byte for byte what the rules
     held before, so the dark theme did not move. The light values place
     each surface at the same point in the light theme's own range, so the
     panels keep the order they stack in. */
  --sf1: rgba(10,12,18,.65);
  --sf2: rgba(10,12,18,.78);
  --sf3: rgba(20,26,46,.95);
  --sf4: rgba(14,20,40,.95);
  --sf5: rgba(40,30,12,.95);
  --sf6: rgba(36,42,58,.85);
  --sf7: rgba(20,24,38,.95);
  --sf8: rgba(24,28,40,.7);
  --sf9: rgba(20,24,38,.7);
  --sf10: rgba(24,28,40,.5);
  --sf11: rgba(24,28,40,.4);
  --sf12: rgba(14,16,28,.98);
  --sf13: rgba(10,12,18,.2);
  --sf14: rgba(10,12,18,.85);
  --sf15: rgba(10,12,18,0);
  --sf16: rgba(10,12,18,.92);
  --sf17: rgba(10,12,18,.0);
  --sf18: rgba(10,12,18,.95);
  --sf19: rgba(28,32,48,.85);
  --sf20: rgba(20,24,38,.85);
  --sf21: rgba(20,24,38,.92);
  --sf22: rgba(16,18,28,.6);
  --sf23: rgba(28,32,48,.6);
  --sf24: rgba(28,32,48,.35);
  --sf25: rgba(20,24,38,.96);
  --sf26: rgba(20,24,38,.5);
  --sf27: rgba(24,28,40,.95);
  --sf28: rgba(10,12,18,.97);
  --sf29: rgba(10,12,18,.98);
  --sf30: rgba(24,28,40,.65);
  --sf31: rgba(24,28,40,.55);
  --sf32: rgba(20,24,36,.85);
  --sf33: rgba(36,42,58,.7);
  --sf34: rgba(15,18,28,.86);
  --sf35: rgba(36,42,58,.6);
  --sf36: rgba(36,42,58,.3);
  --sf37: rgba(15,18,28,.78);
  --sf38: rgba(15,18,28,.82);
  --sf39: rgba(10,12,18,.88);
  --sf40: rgba(15,18,28,.75);
  --sf41: rgba(36,42,58,.4);
  --sf42: rgba(36,42,58,.55);
  --sf43: rgba(20,24,38,.6);
  --sf44: rgba(30,36,54,.85);
  --sf45: rgba(8,11,22,.5);
  --sf46: rgba(20,24,38,.55);
  --sf47: rgba(28,34,52,.65);
  --sf48: rgba(80,20,20,.32);
  --sf49: rgba(95,25,25,.4);
  --sf50: rgba(40,46,64,.95);
  --sf51: rgba(60,68,90,.95);
  --sf52: rgba(120,30,30,.5);
  --sf53: rgba(150,40,40,.65);
  --sf54: rgba(16,18,28,.55);
  --sf55: rgba(28,32,46,.98);
  --sf56: rgba(20,24,38,.98);
  --sf57: rgba(20,24,38,.88);
  --sf58: rgba(16,18,28,.7);
  --sf59: rgba(10,12,18,.8);
  --sf60: rgba(20,24,38,.65);
  --sf61: rgba(20,24,38,.45);
  --sf62: rgba(24,28,40,.6);
  --sf63: rgba(20,24,38,.8);
  --sf64: rgba(28,32,48,.95);
  --sf65: rgba(36,42,58,.5);
  --sf66: rgba(20,24,38,.86);
  --sf67: rgba(40,46,62,.86);
  --sf68: rgba(20,24,38,1);
  --sf69: rgba(16,18,28,.98);
  --sf70: rgba(36,42,58,.92);
  --sf71: rgba(16,18,28,.65);
  --sf72: rgba(20,24,38,.75);
  --sf73: rgba(20,24,38,.70);
  --sf74: rgba(8,10,14,0.72);
  --sf75: rgba(28,32,48,.97);
  --sf76: rgba(20,24,38,.97);
  --sf77: rgba(14,18,30,.98);
  --sf78: rgba(14,16,28,.97);
  --sf79: rgba(14,16,28,.6);
  --sf80: rgba(8,10,18,.92);
  --sf81: rgba(28,32,48,.98);
  --sf82: rgba(28,32,48,.9);
  --sf83: rgba(20,24,38,.9);
  --sf84: rgba(8,10,18,.55);
  --sf85: rgba(255,0,51,.45);
  --sf86: rgba(255,0,51,.10);
  --sf87: rgba(8,10,18,.72);
  --sf88: rgba(8,10,18,.85);
  --sf89: rgba(8,10,18,.6);
  --sf90: rgba(28,32,48,.65);
  --sf91: rgba(28,32,48,.7);
  --sf92: rgba(18,22,32,.55);
  --sf93: rgba(14,18,30,.97);
  --sf94: rgba(6,9,18,.78);
  --sf95: rgba(18,22,32,.85);
  --sf96: rgba(24,28,40,.72);
  --sf97: rgba(12,14,22,.85);
  --sf98: rgba(48,28,30,.55);
  --sf99: rgba(32,18,20,.5);
  --sf100: rgba(32,18,20,.55);
  --sf101: rgba(28,32,48,.55);
  --sf102: rgba(18,22,32,.5);
  --sf103: rgba(10,12,18,.96);
  --sf104: rgba(6,10,18,.82);
  --sf105: rgba(10,14,26,.94);
  --sf106: rgba(6,10,18,.82);
  --sf107: rgba(15,18,28,.92);
  --sf108: rgba(8,10,18,.75);
  --sf109: rgba(36,42,58,.45);
}

/* ===== LIGHT THEME =========================================================
   Not an inversion. The dark theme is navy biased, so this one is too, which
   keeps it reading as the same site. Only the token values change, so any
   rule that already reads from a token comes across for free. Dark stays the
   default: a visitor who never touches the toggle sees exactly what they saw
   yesterday. */
:root { color-scheme: dark; }
.lf-skip { position: absolute; left: -9999px; top: 8px; z-index: 100130; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.lf-skip:focus { left: 8px; }
main:focus { outline: none; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] {
  --bg: #edeff5;
  --bg-2: #ffffff;
  --bg-3: #e1e6ef;
  --bg-card: #ffffff;
  --line: rgba(20,26,38,.11);
  --line-2: rgba(20,26,38,.18);
  --text: #171b26;
  --text-dim: #454c60;
  --text-mute: #676e84;
  --text-fade: #6f7689;
  --accent: #a33f00;
  --accent-rgb: 163,63,0;
  --accent-2: #8f3d00;
  --accent-cool: #1d6b2a;
  --good: #2c7a42;
  --bad: #c0392b;
  --rare-c: #6b7488;
  --rare-u: #2c7a42;
  --rare-r: #2f6bb0;
  --rare-e: #7a3fb0;
  --rare-l: #8a6200;
  --rare-m: #8a6200;
  --shadow-1: 0 1px 3px rgba(20,26,38,.09);
  --shadow-2: 0 8px 26px rgba(20,26,38,.13);
  --topnav-bg: linear-gradient(180deg,#ffffff,#f4f6fb);
  --footer-art: none;
  --footer-floor: transparent;
  --field: rgba(20,26,38,.045);
  --field-2: rgba(20,26,38,.06);
  --field-3: rgba(20,26,38,.085);
  --ink-good: #1d6b36;
  --ink-good-2: #1d6b36;
  --ink-cool: #1a5c99;
  --ink-warm: #7a5600;
  --ink-bad: #a8291c;
  --supporter: #ac2f68;
  --supporter-2: #8d2453;
  --w02: rgba(20,26,38,.034);
  --w03: rgba(20,26,38,.051);
  --w04: rgba(20,26,38,.068);
  --w05: rgba(20,26,38,.085);
  --w06: rgba(20,26,38,.102);
  --w07: rgba(20,26,38,.119);
  --w08: rgba(20,26,38,.136);
  --w09: rgba(20,26,38,.153);
  --w10: rgba(20,26,38,.17);
  --w11: rgba(20,26,38,.187);
  --w12: rgba(20,26,38,.204);
  --w13: rgba(20,26,38,.221);
  --w14: rgba(20,26,38,.238);
  --w15: rgba(20,26,38,.255);
  --w16: rgba(20,26,38,.272);
  --w18: rgba(20,26,38,.306);
  --w20: rgba(20,26,38,.32);
  --sf1: rgba(251,252,253,.65);
  --sf2: rgba(251,252,253,.78);
  --sf3: rgba(246,248,251,.95);
  --sf4: rgba(248,249,252,.95);
  --sf5: rgba(244,247,250,.95);
  --sf6: rgba(240,244,248,.85);
  --sf7: rgba(246,248,251,.95);
  --sf8: rgba(245,247,250,.7);
  --sf9: rgba(246,248,251,.7);
  --sf10: rgba(245,247,250,.5);
  --sf11: rgba(245,247,250,.4);
  --sf12: rgba(249,250,252,.98);
  --sf13: rgba(251,252,253,.2);
  --sf14: rgba(251,252,253,.85);
  --sf15: rgba(251,252,253,0);
  --sf16: rgba(251,252,253,.92);
  --sf17: rgba(251,252,253,.0);
  --sf18: rgba(251,252,253,.95);
  --sf19: rgba(244,246,250,.85);
  --sf20: rgba(246,248,251,.85);
  --sf21: rgba(246,248,251,.92);
  --sf22: rgba(249,250,252,.6);
  --sf23: rgba(244,246,250,.6);
  --sf24: rgba(244,246,250,.35);
  --sf25: rgba(246,248,251,.96);
  --sf26: rgba(246,248,251,.5);
  --sf27: rgba(245,247,250,.95);
  --sf28: rgba(251,252,253,.97);
  --sf29: rgba(251,252,253,.98);
  --sf30: rgba(245,247,250,.65);
  --sf31: rgba(245,247,250,.55);
  --sf32: rgba(247,248,251,.85);
  --sf33: rgba(240,244,248,.7);
  --sf34: rgba(249,250,252,.86);
  --sf35: rgba(240,244,248,.6);
  --sf36: rgba(240,244,248,.3);
  --sf37: rgba(249,250,252,.78);
  --sf38: rgba(249,250,252,.82);
  --sf39: rgba(251,252,253,.88);
  --sf40: rgba(249,250,252,.75);
  --sf41: rgba(240,244,248,.4);
  --sf42: rgba(240,244,248,.55);
  --sf43: rgba(246,248,251,.6);
  --sf44: rgba(242,245,249,.85);
  --sf45: rgba(251,252,253,.5);
  --sf46: rgba(246,248,251,.55);
  --sf47: rgba(243,246,249,.65);
  --sf48: rgba(243,246,249,.32);
  --sf49: rgba(241,244,248,.4);
  --sf50: rgba(239,242,247,.95);
  --sf51: rgba(231,236,243,.95);
  --sf52: rgba(238,242,247,.5);
  --sf53: rgba(233,238,244,.65);
  --sf54: rgba(249,250,252,.55);
  --sf55: rgba(244,246,250,.98);
  --sf56: rgba(246,248,251,.98);
  --sf57: rgba(246,248,251,.88);
  --sf58: rgba(249,250,252,.7);
  --sf59: rgba(251,252,253,.8);
  --sf60: rgba(246,248,251,.65);
  --sf61: rgba(246,248,251,.45);
  --sf62: rgba(245,247,250,.6);
  --sf63: rgba(246,248,251,.8);
  --sf64: rgba(244,246,250,.95);
  --sf65: rgba(240,244,248,.5);
  --sf66: rgba(246,248,251,.86);
  --sf67: rgba(239,242,247,.86);
  --sf68: rgba(246,248,251,1);
  --sf69: rgba(249,250,252,.98);
  --sf70: rgba(240,244,248,.92);
  --sf71: rgba(249,250,252,.65);
  --sf72: rgba(246,248,251,.75);
  --sf73: rgba(246,248,251,.70);
  --sf74: rgba(252,252,253,0.72);
  --sf75: rgba(244,246,250,.97);
  --sf76: rgba(246,248,251,.97);
  --sf77: rgba(249,250,252,.98);
  --sf78: rgba(249,250,252,.97);
  --sf79: rgba(249,250,252,.6);
  --sf80: rgba(251,252,253,.92);
  --sf81: rgba(244,246,250,.98);
  --sf82: rgba(244,246,250,.9);
  --sf83: rgba(246,248,251,.9);
  --sf84: rgba(251,252,253,.55);
  --sf85: rgba(235,239,245,.45);
  --sf86: rgba(235,239,245,.10);
  --sf87: rgba(251,252,253,.72);
  --sf88: rgba(251,252,253,.85);
  --sf89: rgba(251,252,253,.6);
  --sf90: rgba(244,246,250,.65);
  --sf91: rgba(244,246,250,.7);
  --sf92: rgba(247,249,251,.55);
  --sf93: rgba(249,250,252,.97);
  --sf94: rgba(252,253,253,.78);
  --sf95: rgba(247,249,251,.85);
  --sf96: rgba(245,247,250,.72);
  --sf97: rgba(250,251,253,.85);
  --sf98: rgba(244,246,249,.55);
  --sf99: rgba(248,249,251,.5);
  --sf100: rgba(248,249,251,.55);
  --sf101: rgba(244,246,250,.55);
  --sf102: rgba(247,249,251,.5);
  --sf103: rgba(251,252,253,.96);
  --sf104: rgba(252,252,253,.82);
  --sf105: rgba(250,251,253,.94);
  --sf106: rgba(252,252,253,.82);
  --sf107: rgba(249,250,252,.92);
  --sf108: rgba(251,252,253,.75);
  --sf109: rgba(240,244,248,.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ===== Theme switch ===== */
.theme-switch {
  display: inline-flex; gap: 2px; margin-top: 8px; padding: 2px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--w04);
}
.theme-opt {
  appearance: none; border: 0; background: transparent; color: var(--text-mute);
  font: 700 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.theme-opt:hover { color: var(--text); }
.theme-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-opt[aria-pressed="true"] {
  background: var(--accent-fill); color: var(--accent-ink);
}
/* v711: the same switch as a single pill in the top bar. It carries the
   language pill's class so it inherits that widget's look, but that CSS is
   injected by wiki_i18n.js, so these few lines stand in if i18n is slow or
   fails to load and keep the button from ever rendering as bare text. */
.lf-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.lf-theme-toggle:hover { border-color: var(--accent); color: var(--text); }
.lf-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ===== Light theme, reaching into the widgets this file does not own =====
   The top nav, the language switcher and the floating build calculator are
   built by their own scripts with their own hardcoded dark fills. They are
   corrected here rather than left as dark rectangles in the middle of a light
   page. Everything below is scoped to the light theme, so the dark theme is
   byte for byte what it was. */
:root[data-theme="light"] .lf-lang-menu,
:root[data-theme="light"] .lf-lang-list,
:root[data-theme="light"] .calc-panel {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .lf-tn-btn,
:root[data-theme="light"] .lf-lang-btn,
:root[data-theme="light"] .lf-lang-cur,
:root[data-theme="light"] .lf-tn-menu a,
:root[data-theme="light"] .calc-label {
  color: var(--text) !important;
}
:root[data-theme="light"] .lf-lang-btn,
:root[data-theme="light"] .lf-tn-btn:hover {
  background: var(--w05) !important;
}
:root[data-theme="light"] .lf-tn-supporter-btn,
:root[data-theme="light"] .nav a.member-link,
:root[data-theme="light"] .memb-hero-eyebrow,
:root[data-theme="light"] .memb-card-supporter .memb-card-price {
  color: var(--supporter) !important;
}
/* Piece icons are drawn for a dark backdrop, the way the game shows them, so
   the tile behind them stays dark in both themes. */
:root[data-theme="light"] .bv-part-thumb { background: #161b2a; }

/* v792: the light theme's worst measured failures. Every rule here is a
   literal dark theme colour that the token block could not reach: the
   sidebar's hard coded gradient (2.2:1 for every nav link at 881 to 1299px),
   the calendar and rarity chips, the elemental tags and notes, the forum role
   and filter pills. They now read from tokens or from a darkened accent. */
:root[data-theme="light"] .sidebar { background: var(--bg-2); }
:root[data-theme="light"] .cal-event.featured { color: var(--accent); }
:root[data-theme="light"] .rarity-pill.r-event { color: #0f6b60; border-color: rgba(15,107,96,.45); background: rgba(45,212,191,.16); }
:root[data-theme="light"] .elem-tag-fire { color: #9a3d12; }
:root[data-theme="light"] .elem-tag-ice { color: #145c86; }
:root[data-theme="light"] .elem-tag-earth { color: #2f6b1f; }
:root[data-theme="light"] .elem-tag-lightning { color: #7a5c00; }
:root[data-theme="light"] .section-note-elemental { color: #5b4300; }
:root[data-theme="light"] .section-note-elemental strong { color: #3f2f00; }
:root[data-theme="light"] .ftm-role.role-owner { color: var(--accent); }
:root[data-theme="light"] .forum-filter.ff-updates { color: #0f6b60; }
:root[data-theme="light"] #forum-role-pill .frp-role-not-signed-in { color: #a3323c; }
:root[data-theme="light"] .featured-event-tag,
:root[data-theme="light"] .ks-home-eyebrow { color: var(--accent); }
:root[data-theme="light"] .lf-trivia-streak, :root[data-theme="light"] .hs-lbl, :root[data-theme="light"] .dc-foot { color: var(--text-mute); }

/* A visitor who has asked their system to reduce motion has asked for a
   reason. Transitions collapse to instant rather than being merely quicker. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0.01ms; --t-slow: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Collaboration: shared worlds and shared building ===== */
.lf-collab-back {
  /* Above every ordinary modal on the site, which run up to 99999, but below
     the shared tooltip and the mention dropdown, which deliberately sit at the
     top of the stack. A panel the user just opened should not appear
     underneath the keyboard shortcuts overlay. */
  position: fixed; inset: 0; z-index: 100001; display: flex;
  align-items: center; justify-content: center;
  background: rgba(6,9,18,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lf-collab-card {
  width: calc(100% - 36px); margin: 18px; background: var(--bg-card);
  border: 1px solid var(--line-2); border-radius: 13px;
  box-shadow: var(--shadow-2); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  max-height: 84vh; display: flex; flex-direction: column;
}
.lf-collab-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
}
.lf-collab-head h3 {
  margin: 0; flex: 1; font-size: 16px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--accent);
}
.lf-collab-x {
  background: transparent; border: 0; color: var(--text-mute);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color var(--t-fast) ease;
}
.lf-collab-x:hover { color: var(--text); }
.lf-collab-body { padding: 16px 18px 18px; overflow-y: auto; }
.lf-collab-lede { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin: 0 0 14px; }
.lf-collab-fine { font-size: 11.5px; line-height: 1.5; color: var(--text-fade); margin: 10px 0 0; }
.lf-collab-loading { font-size: 13px; color: var(--text-mute); padding: 10px 0; }
.lf-collab-sec { margin-bottom: 18px; }
.lf-collab-sec:last-child { margin-bottom: 0; }
.lf-collab-sec-t {
  font-size: 10.5px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px;
}
.lf-collab-empty { font-size: 12.5px; color: var(--text-fade); margin: 0; }
.lf-collab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lf-collab-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  background: var(--w04);
}
.lf-collab-row > div:first-child { flex: 1 1 190px; min-width: 0; }
.lf-collab-row b { font-size: 13.5px; }
.lf-collab-sub { font-size: 11.5px; color: var(--text-fade); margin-top: 3px; line-height: 1.4; }
.lf-collab-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.lf-collab-btns .btn { font-size: 11.5px; padding: 5px 10px; }
.lf-collab-danger { color: var(--ink-bad) !important; }
.lf-collab-or {
  text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-fade); margin: 0 0 10px;
}
.lf-collab-joinrow { display: flex; gap: 8px; }
.lf-collab-joinrow input {
  flex: 1; background: var(--field); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 9px 12px; color: var(--text);
  font: 800 15px 'JetBrains Mono','Consolas',monospace; letter-spacing: .18em;
  text-transform: uppercase; text-align: center;
}
.lf-collab-joinrow input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lf-collab-code-big {
  font: 800 30px 'JetBrains Mono','Consolas',monospace; letter-spacing: .22em;
  text-align: center; color: var(--accent); background: var(--w05);
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 16px 10px; margin: 0 0 14px;
}

/* the strip along the top of the canvas while a session is running */
#bv-collab-bar {
  position: absolute; top: 12px; right: 12px; z-index: 30;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: min(560px, calc(100% - 24px));
  background: var(--sf1, rgba(20,24,38,.95));
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 7px 10px; box-shadow: var(--shadow-1);
  font-family: 'Inter', system-ui, sans-serif;
}
.bv-collab-code {
  font: 800 13px 'JetBrains Mono','Consolas',monospace; letter-spacing: .16em;
  color: var(--accent);
}
.bv-collab-people { display: flex; gap: 8px; flex-wrap: wrap; }
.bv-collab-who {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
}
.bv-collab-who.away { opacity: .45; }
.bv-collab-who i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bv-collab-mini {
  background: var(--w06); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.bv-collab-mini:hover { background: var(--w12); color: var(--text); }
@media (max-width: 700px) {
  #bv-collab-bar { top: auto; bottom: 12px; right: 12px; left: 12px; max-width: none; }
}

/* ===== Custom slim scrollbar to replace Windows default ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.45) rgba(0,0,0,.0);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.55) 0%, rgba(255,138,61,.55) 100%);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.85) 0%, rgba(255,138,61,.85) 100%);
  background-clip: content-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.35) rgba(0,0,0,.0);
}
.sidebar::-webkit-scrollbar { width: 6px; }
body {
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 100vh;
}
/* Subtle LEGO Fortnite header image as a fixed page backdrop. z-index is
   negative so it can NEVER sit on top of page content, no matter what
   stacking-context surprises happen elsewhere. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("knightshift/hero.webp?v=755") center/cover no-repeat fixed;
  opacity: 0.13;
  z-index: -2;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, var(--sf1) 0%, var(--sf2) 100%),
    radial-gradient(760px 460px at 16% -10%, rgba(var(--accent-rgb),.085) 0%, transparent 62%),
    radial-gradient(1100px 620px at 78% -14%, rgba(86,182,240,.045) 0%, transparent 66%);
  z-index: -1;
  pointer-events: none;
}
.app { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: 'Poppins','Inter',sans-serif; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.8rem; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }
h4 { font-size: .9rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
p { margin: 0 0 .8em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
code { background: var(--bg-3); padding: 1px 6px; border-radius: 4px; font-size: .9em; }

/* ========== layout ========== */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--t-slow) ease;
}
/* Defensive: at desktop widths, force grid layout regardless of any other
   media query or stale collapsed state. The mobile rule still flips this
   inside @media (max-width: 880px), (hover: none) and (pointer: coarse). */
@media (min-width: 881px) {
  .app, .app.sidebar-collapsed { display: grid !important; }
  .app { grid-template-columns: 260px 1fr !important; }
  .app.sidebar-collapsed { grid-template-columns: 0 1fr !important; }
}
.app.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}
.app.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}
.sidebar-toggle {
  position: fixed; top: 14px; left: 248px;
  z-index: 200;
  width: 28px; height: 56px;
  background: linear-gradient(180deg, var(--sf3), var(--sf4));
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 2px 2px 8px rgba(0,0,0,.5);
  transition: left var(--t-slow) ease, transform var(--t-fast) ease;
}
.sidebar-toggle:hover { background: var(--sf5); }

/* ============ Membership / Supporter ============ */
.nav a.member-link { color: var(--supporter); }
.nav a.member-link:hover { color: var(--supporter-2); background: rgba(255,158,200,.08); }
.memb-hero {
  max-width: 920px;
  margin: 0 auto 28px;
}
.memb-hero-card {
  background: linear-gradient(135deg, rgba(255,158,200,.08) 0%, rgba(var(--accent-rgb),.06) 100%);
  border: 1px solid rgba(255,158,200,.25);
  border-radius: 14px;
  padding: 28px 32px;
}
.memb-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--supporter); text-transform: uppercase; margin-bottom: 8px;
}
.memb-hero-card h2 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 32px; line-height: 1.1;
  color: var(--text); margin: 0 0 14px;
  letter-spacing: .01em;
}
.memb-hero-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; margin: 0 0 12px; }
.memb-hero-card p:last-child { margin: 0; }

.memb-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto 32px;
}
@media (max-width: 760px) { .memb-compare { grid-template-columns: 1fr; } }
.memb-card {
  background: var(--sf8);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 24px 20px;
  position: relative;
  display: flex; flex-direction: column;
}
.memb-card-supporter {
  border-color: rgba(255,158,200,.45);
  background: linear-gradient(180deg, rgba(255,158,200,.08), var(--sf9));
  box-shadow: 0 12px 36px rgba(255,158,200,.08);
}
.memb-card-ribbon {
  position: absolute; top: -10px; right: 18px;
  background: linear-gradient(90deg, #ff8fbf, #ffb14a);
  color: #1a1110; font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,158,200,.35);
}
.memb-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.memb-card-tier {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 16px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text);
}
.memb-card-price {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 28px;
  color: var(--accent);
}
.memb-card-supporter .memb-card-price { color: var(--supporter); }
.memb-card-price span {
  font-weight: 600; font-size: 13px;
  color: var(--text-dim); margin-left: 2px;
}
.memb-card-list {
  list-style: none; padding: 0; margin: 0 0 18px;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.memb-card-list li {
  font-size: 13.5px; color: var(--text); line-height: 1.45;
  padding-left: 4px;
}
.memb-card-cta {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(90deg, #ff8fbf, #ffb14a);
  border: 0;
  color: #1a1110;
  font-weight: 800; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,158,200,.25);
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.memb-card-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,158,200,.35); }
.memb-card-cta-disabled {
  text-align: center; padding: 12px 18px;
  background: rgba(108,229,138,.12);
  color: var(--ink-good-2); border: 1px solid rgba(108,229,138,.35);
  font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 8px;
}
.memb-card-cta-secondary {
  padding: 9px 16px;
  background: rgba(var(--accent-rgb),.18);
  border: 1px solid rgba(var(--accent-rgb),.55);
  color: var(--accent);
  font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
}
.memb-card-cta-secondary:hover { background: rgba(var(--accent-rgb),.32); }
.memb-card-fineprint {
  text-align: center;
  font-size: 11px; color: var(--text-fade);
  margin-top: 10px;
}

.memb-already {
  max-width: 920px;
  margin: 0 auto 28px;
  padding: 22px 28px;
  background: var(--sf10);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.memb-already h3 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 20px;
  color: var(--text); margin: 0 0 6px;
  letter-spacing: .03em;
}
.memb-already p { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; }
.memb-already-row {
  display: flex; gap: 10px; align-items: center;
}
.memb-already-row input {
  flex: 1; max-width: 320px;
  padding: 9px 12px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13.5px; font-family: inherit;
}
.memb-already-row input:focus { outline: none; border-color: var(--accent); }
.memb-already-msg { margin-top: 10px; font-size: 12px; color: var(--text-dim); min-height: 16px; }
.memb-already-msg.success { color: var(--ink-good-2); }
.memb-already-msg.error { color: #ff9a9a; }

.memb-faq {
  max-width: 920px;
  margin: 0 auto 32px;
}
.memb-faq h3 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 22px;
  color: var(--accent); margin: 0 0 12px;
  letter-spacing: .04em; text-transform: uppercase;
}
.memb-faq details {
  background: var(--sf11);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.memb-faq summary {
  cursor: pointer;
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  list-style: none;
}
.memb-faq summary::-webkit-details-marker { display: none; }
.memb-faq summary::after { content: ' ▾'; color: var(--accent); font-weight: 800; }
.memb-faq details[open] summary::after { content: ' ▴'; }
.memb-faq details p {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.55; margin: 10px 0 0;
}

/* Supporter badge near the account widget */

.sidebar-toggle .sb-arrow { display: inline-block; transition: transform var(--t-slow) ease; }
.app.sidebar-collapsed .sidebar-toggle { left: 0; }
.app.sidebar-collapsed .sidebar-toggle .sb-arrow { transform: rotate(180deg); }
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  background: linear-gradient(180deg, #0c1224 0%, #0e1428 100%);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 18px 12px;
  transition: transform var(--t-slow) ease;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.brand-mark {
  width: 42px; height: 42px; border-radius: 9px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #c91a1a 0%, #6b0000 100%);
  display: block; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.35), 0 6px 16px rgba(0,0,0,.5);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-title { font-family: 'Barlow Condensed','Poppins',sans-serif; font-weight: 900; font-size: 18px; line-height: 1.05; letter-spacing: 0.02em; color: var(--accent); text-transform: uppercase; }
.brand-sub { font-size: 11px; color: var(--text-fade); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.brand-badge {
  display: inline-block; margin-top: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--accent-rgb),.12); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.search-wrap { position: relative; margin-bottom: 14px; }
.search {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 13.5px;
  margin-bottom: 0;
}
.search:focus { outline: none; border-color: var(--accent); }
.search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--sf12);
  border: 1px solid var(--accent);
  border-radius: 10px;
  max-height: 360px; overflow-y: auto;
  z-index: 9000;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.search-result {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--w05);
  color: var(--text); padding: 9px 12px; cursor: pointer;
  font-family: inherit;
}
.search-result:hover { background: rgba(var(--accent-rgb),.08); }
.search-result:last-child { border-bottom: 0; }
.search-result .sr-name { font-size: 13px; font-weight: 700; color: var(--text); }
.search-result .sr-page { font-size: 10.5px; color: var(--text-mute); margin-top: 2px; letter-spacing: .03em; }
.search-result-empty { padding: 14px; color: var(--text-mute); font-size: 12.5px; text-align: center; }
@keyframes searchFlash {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.0), 0 0 0 6px rgba(var(--accent-rgb),.0); }
  20%  { box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.55), 0 0 24px 6px rgba(var(--accent-rgb),.4); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.0), 0 0 0 6px rgba(var(--accent-rgb),.0); }
}
.search-flash { animation: searchFlash 1.6s ease-out; border-radius: 12px; }

.nav-group { margin-bottom: 14px; }
.nav-group-title {
  font-size: 10.5px; color: var(--text-mute); letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px 6px;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.nav a:hover { background: var(--bg-3); color: var(--text); }
.nav a.active { background: linear-gradient(90deg, rgba(255,171,31,.16), rgba(255,138,61,.04)); color: var(--accent); }
.nav .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); }
.nav a.active .pip { background: var(--accent-fill); box-shadow: 0 0 12px var(--accent); }

/* v113: Limited Time nav anchor for the Free Star Wars Rewards page.
   v191: recolored from red to a Star Wars saber blue per request. The
   pulse-glow dot still makes it stand out from the muted-grey entries. */
.nav a.nav-limited-event {
  color: #6bb4ff;
  font-weight: 700;
  letter-spacing: .01em;
}
.nav a.nav-limited-event:hover {
  background: rgba(107,180,255,.10);
  color: #9bcdff;
}
.nav a.nav-limited-event.active {
  background: linear-gradient(90deg, rgba(107,180,255,.22), rgba(107,180,255,.04));
  color: #9bcdff;
}
.nav a.nav-limited-event .pip {
  background: #3a8bff;
  box-shadow: 0 0 10px rgba(58,139,255,.85);
  animation: nav-limited-event-pulse 1.6s ease-in-out infinite;
}
.nav a.nav-limited-event.active .pip {
  background: #3a8bff;
  box-shadow: 0 0 14px #6bb4ff;
}
@keyframes nav-limited-event-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,56,56,.55); transform: scale(1); }
  50%      { box-shadow: 0 0 16px rgba(255,84,84,1);  transform: scale(1.25); }
}

main {
  padding: 28px 28px 70px;
  width: 100%;
  display: block !important;
  /* Force flex/grid alignments OFF, defensive against any inherited rule
     that would push content toward the bottom of the cell. */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
}
/* HARD OVERRIDE: only the ACTIVE page section needs to start at the top.
   Inactive sections must remain display:none (set by the base .page rule)
   so all 25 pages don't all render simultaneously. */
main > section.page.active {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative;
  top: 0 !important;
}
.page {
  display: none;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.page.active { display: block; animation: fade .35s ease; }
.page > * { margin-left: auto; margin-right: auto; }
.page h1, .page h2, .page p, .page .subtitle, .page .callout {
  text-align: center;
}
.page table.data, .page .upd-detail, .page .upd-list-item { text-align: left; }
/* v763: Dom wants the site's centred style throughout, so v758c is reversed.
   The lists move to the middle rather than the headings moving to the edge. */
.page .ks-home h2, .page .ks-home p { text-align: center; }
.page .micro li, .page .upd-section li, .page .biome-meta span,
.page .data-card p, .page .pass-body p, .page .creator-body p,
.page .home-card p, .page .tile-name, .page .tile-sub,
.page .nav a, .page td, .page th, .page caption { text-align: left; }
.page-head { justify-content: center; text-align: center; }
.page-head > div { text-align: center; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin: 0 auto 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  max-width: 760px;
}
.page-head h1 { margin: 0 0 4px; text-align: center; }
.page-head .subtitle { color: var(--text-dim); font-size: 13px; text-align: center; }

/* ========== home ========== */
.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 auto 22px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #1f2547 0%, #2e1a3e 100%);
  min-height: 220px;
  display: grid; align-items: center; justify-items: center;
  padding: 32px 28px;
  text-align: center;
  max-width: 880px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("Update%20Promo%20Images/Odyssey.webp") center/cover no-repeat;
  opacity: 0.45; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sf13) 0%, var(--sf14) 100%);
  z-index: 1;
}
.hero > * { position: relative; z-index: 2; }
.hero h1 { font-size: 2rem; max-width: 640px; font-family: 'Barlow Condensed','Poppins',sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; text-align: center; }
.hero p { color: var(--text); max-width: 540px; font-size: 14px; text-shadow: 0 2px 6px rgba(0,0,0,.6); text-align: center; }
.hero .cta { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-fill) 0%, var(--accent-2) 100%);
  color: #1a1207; font-weight: 600; font-size: 14px;
  border: none; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }


.home-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast);
  text-align: center;
}
.home-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.home-card .ico { font-size: 20px; margin-bottom: 6px; }
.home-card h3 { font-size: 1rem; margin-bottom: 5px; text-align: center; }
.home-card p { color: var(--text-dim); font-size: 12.5px; margin: 0; text-align: center; }

/* ===== Large Game-Mode hero cards (side-by-side) ===== */
.modes-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto 36px;
}
/* If a third+ card exists, span all columns and center it (matching column width) */
.modes-hero-grid > .mode-hero:nth-child(n+3) {
  grid-column: 1 / -1;
  max-width: calc((100% - 22px) / 2);
  justify-self: center;
}
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .modes-hero-grid { grid-template-columns: 1fr; }
  .modes-hero-grid > .mode-hero:nth-child(n+3) { max-width: 100%; }
}
.mode-hero {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
  min-height: 420px;
  display: flex; flex-direction: column;
}
.mode-hero:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--accent);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px var(--accent);
}
.mode-hero-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.mode-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) ease, filter var(--t-slow) ease;
  filter: brightness(.85);
}
.mode-hero:hover .mode-hero-img img {
  transform: scale(1.06);
  filter: brightness(1);
}
.mode-hero-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sf15) 38%, var(--sf16) 100%);
  pointer-events: none;
}
.mode-hero-eyebrow {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(var(--accent-rgb),.92);
  color: #1a1f30;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 2;
}
.mode-hero-title {
  position: absolute;
  bottom: 14px; left: 22px; right: 22px;
  z-index: 2;
}
.mode-hero-title h2 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: .02em;
  line-height: 1;
  margin: 0 0 4px;
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.mode-hero-title .tag {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mode-hero-body {
  padding: 18px 22px 22px;
  flex: 1;
}
.mode-hero-body p {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.mode-hero-stats {
  display: flex; gap: 16px;
  font-size: 11.5px;
  color: var(--text-mute);
  flex-wrap: wrap;
}
.mode-hero-stats span {
  background: rgba(var(--accent-rgb),.08);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.mode-hero-stats strong { color: var(--accent); font-weight: 700; }
.mode-hero-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em;
  background: rgba(var(--accent-rgb),.08);
}

/* ========== updates list (v3-style click-to-expand) ========== */
.upd-year-label {
  font-size: 11px; color: var(--text-fade); letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding: 14px 0 8px; margin: 18px 0 12px;
  font-weight: 800;
}
.upd-list-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; margin: 0 auto 6px;
  cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
  max-width: 760px;
}
.upd-list-item:hover {
  border-color: rgba(var(--accent-rgb),.4);
  background: rgba(var(--accent-rgb),.04);
  transform: translateX(2px);
}
.upd-list-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
  .upd-list-left > div { min-width: 0; flex: 1; overflow: hidden; }
.upd-ver {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  background: rgba(var(--accent-rgb),.12); color: var(--accent);
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  flex-shrink: 0;
}
.upd-list-name { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
/* v815: was one line with an ellipsis, which cut the two longest update
   subtitles mid word ("Missed bundles r...", "Death St..."). Two wrapped
   lines fit every subtitle currently on the page and degrade the same way
   if one ever gets longer still. */
.upd-list-sub  {
  font-size: 12.5px; color: var(--text-mute);
  line-height: 1.35; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pill-green  { background: rgba(108,229,138,.14); color: var(--rare-u); }
.pill-blue   { background: rgba(93,181,255,.14); color: var(--rare-r); }
.pill-purple { background: rgba(200,125,255,.14); color: var(--rare-e); }
.pill-red    { background: rgba(255,104,104,.14); color: var(--bad); }
.pill-gold   { background: rgba(255,212,41,.16); color: var(--accent); }
.pill-teal   { background: rgba(86,182,240,.14); color: var(--accent-cool); }
.pill-grey   { background: var(--w06); color: var(--text-mute); }
.upd-list-arrow { color: var(--text-fade); font-size: 18px; padding-left: 10px; }
/* Mobile: let the sub text wrap (instead of being clipped by the pill on
   the right side of each card) and let the pill move to its own line so it
   never overlaps the title text. */
@media (max-width: 600px) {
  .upd-list-item { padding: 12px 14px; }
  .upd-list-sub  { white-space: normal; line-height: 1.35; }
  .upd-list-arrow { display: none; }
  .upd-list-item > div:last-child {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
  }
}

.upd-detail {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; margin: 14px auto 0; overflow: hidden;
  max-width: 880px;
}
.upd-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; cursor: pointer;
  margin: 14px 0 18px;
}
.upd-back:hover { border-color: var(--accent); color: var(--accent); }
.upd-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0;
}
.upd-nav-row .upd-back { margin: 14px 0 18px; }
.upd-next { font-weight: 600; }
.upd-next:hover { background: rgba(var(--accent-rgb),.06); }
.upd-hero {
  position: relative; height: 200px; overflow: hidden;
  background: linear-gradient(135deg, #1f2547 0%, #2e1a3e 100%);
}
.upd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Inline feature image inside an update detail (e.g. official news-feed
   marketing post). Sits flush in the prose with a rounded frame +
   subtle accent border so it reads as official supplied art. */
.upd-feature-img {
  margin: 14px auto;
  max-width: 760px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.28);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  background: var(--canvas-bg);
}
.upd-feature-img img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .upd-feature-img { margin: 12px -8px; border-radius: 8px; max-width: none; }
}
.upd-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sf17) 30%, var(--sf18) 100%);
  display: flex; align-items: flex-end; padding: 26px 28px;
}
.upd-hero-overlay h2 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 1.6rem; text-transform: uppercase;
  letter-spacing: .01em; margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  text-align: left;
}
.upd-content { padding: 18px 24px 24px; }
.upd-meta-row {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line);
}
.upd-meta-row .v { color: var(--accent); font-weight: 800; font-size: 13px; letter-spacing: .04em; }
.upd-meta-row .d { color: var(--text-mute); font-size: 13px; }
.upd-summary { color: var(--text-dim); font-size: 14.5px; max-width: 920px; margin-bottom: 18px; }
.upd-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.upd-section {
  background: linear-gradient(180deg, var(--sf19) 0%, var(--sf20) 100%);
  border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.upd-section:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb),.32);
  box-shadow: 0 14px 36px rgba(0,0,0,.42);
}
/* Image stage: blurred copy of the same image as backdrop, sharp image in front, no cropping. */
.upd-section-img-wrap {
  position: relative; width: 100%; height: 210px; overflow: hidden;
  background: linear-gradient(135deg, #1c2042 0%, #2a1838 100%);
  border-bottom: 1px solid var(--w05);
}
.upd-section-img-bg {
  position: absolute; inset: -10%;
  background-size: cover; background-position: center;
  filter: blur(32px) saturate(1.15) brightness(.55);
  opacity: .85;
  transition: transform .6s ease, opacity .6s ease;
}
.upd-section:hover .upd-section-img-bg { transform: scale(1.04); opacity: 1; }
.upd-section-img-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.45) 100%);
  z-index: 2;
}
.upd-section-img-wrap > img {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain;
  padding: 14px 18px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
  transition: transform var(--t-slow) ease;
}
.upd-section:hover .upd-section-img-wrap > img { transform: scale(1.02); }
/* Fallback for any image that hasn't been wrapped yet by the JS polish */
.upd-section > img { display: block; width: 100%; height: 210px; object-fit: contain; background: linear-gradient(135deg,#1c2042 0%,#2a1838 100%); padding: 14px 18px; }
.upd-section-body { padding: 16px 18px 18px; }
.upd-section h4 {
  font-size: 11px; letter-spacing: .12em; color: var(--accent);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed','Inter',sans-serif; font-weight: 800;
}
.upd-section h4::before { content: ""; width: 3px; height: 14px; background: var(--accent-fill); border-radius: 2px; }
.upd-section ul { margin: 0; padding: 0; list-style: none; }
.upd-section li {
  padding: 5px 0; border-bottom: 1px dashed var(--w05);
  font-size: 13.5px; color: var(--text);
}
.upd-section li:last-child { border-bottom: none; }
.upd-section li strong { color: var(--accent); font-weight: 700; }
.upd-section li em { color: var(--text-mute); font-style: normal; font-size: 12.5px; }
.upd-section-source { display: none; }
.upd-section h4:has(+ .upd-section-source),
.upd-section-body h4 + .upd-section-source ~ * { display: none; }
/* Hide any "Source" h4 in update sections */
.upd-section .upd-section-body:has(> h4:only-child) { display: none; }
.upd-trailer {
  position: relative; aspect-ratio: 16/9;
  background: #000; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}
.upd-trailer iframe { width: 100%; height: 100%; border: 0; }
.upd-trailer video { width: 100%; height: 100%; object-fit: cover; display: block; }
.upd-trailer-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  grid-column: 1 / -1;
}
@media (max-width: 760px) { .upd-trailer-trio { grid-template-columns: 1fr; } }
.upd-trailer-trio .upd-trailer-card {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.upd-trailer-trio .upd-trailer-card .label {
  padding: 6px 12px;
  font-size: 10.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  background: rgba(var(--accent-rgb),.06);
  border-bottom: 1px solid rgba(var(--accent-rgb),.15);
}
.upd-trailer-trio video {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  object-fit: cover;
}
.upd-trailer-top {
  background: #000; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  margin: 0 auto 18px; max-width: 760px;
}
.upd-trailer-top .label {
  padding: 8px 14px;
  font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; text-align: left;
  background: rgba(var(--accent-rgb),.06);
  border-bottom: 1px solid rgba(var(--accent-rgb),.15);
}
.upd-trailer-top video { width: 100%; aspect-ratio: 16/9; display: block; }
.upd-trailer-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 auto 18px; max-width: 880px;
}
@media (max-width: 700px) { .upd-trailer-pair { grid-template-columns: 1fr; } }
/* Three trailers shown side-by-side (e.g. the Launch page's Announce /
   Cinematic / Gameplay trio). Drops to 1-column on narrow screens. */
.upd-trailer-trio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 0 auto 18px; max-width: 1100px;
}
.upd-trailer-trio .upd-trailer-top { margin: 0; max-width: none; }
.upd-trailer-trio .upd-trailer-top .label { font-size: 10.5px; padding: 6px 10px; }
@media (max-width: 900px) { .upd-trailer-trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .upd-trailer-trio { grid-template-columns: 1fr; } }

/* Fallback "watch trailer on YouTube" card for updates whose MP4 isn't hosted on R2. */
.upd-trailer-extlink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.1) 0%, var(--sf21) 100%);
  border: 2px dashed rgba(var(--accent-rgb),.4);
  border-radius: 14px;
  color: var(--accent);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background var(--t-slow) ease, border-color var(--t-slow) ease, transform var(--t-fast) ease;
  text-align: center;
  padding: 16px;
}
.upd-trailer-extlink:hover {
  background: rgba(var(--accent-rgb),.18);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.upd-trailer-extlink .upd-trailer-extlink-icon {
  font-size: 28px;
  line-height: 1;
}

.micros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 22px;
}
.micro {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px;
}
.micro h4 {
  font-size: 11px; letter-spacing: .12em; color: var(--accent);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.micro h4::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent-fill);
}
.micro ul { margin: 0; padding: 0; list-style: none; }
.micro li {
  padding: 5px 0; border-bottom: 1px dashed var(--w05);
  font-size: 13.5px; color: var(--text);
}
.micro li:last-child { border-bottom: none; }
.micro li strong { color: var(--accent); font-weight: 600; }
.micro li em { color: var(--text-mute); font-style: normal; font-size: 12.5px; }





/* ========== villagers / creatures tiles ========== */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 auto 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  justify-content: center;
}
.tab-btn {
  padding: 8px 16px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.tab-btn:hover { color: var(--text); background: var(--bg-3); }
.tab-btn.active { background: var(--bg-3); color: var(--accent); border-color: var(--line); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* v160: Featured Creators tab bar. Sits above the creators-grid and
   filters cards by data-creator-platform. */
.creator-tabs-nav {
  margin-top: 0;
  margin-bottom: 22px;
}
.creator-tabs-nav .tab-btn {
  font-size: 14px;
  padding: 9px 18px;
}
/* When a creator card is filtered out by the active tab, hide it
   entirely so the grid reflows without gaps. */
.creators-grid .creator-card[hidden] { display: none !important; }
.creator-card.has-banner { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
.creator-card.has-banner .creator-banner { width: 100%; height: 88px; object-fit: cover; display: block; border: none; border-radius: 0; border-bottom: 2px solid var(--w08); background: #1a2040; }
.creator-card.has-banner .creator-row { display: flex; gap: 12px; align-items: center; padding: 14px; }

/* Top-level Utility / Resources toggle on the Utility and Resources page */
.ur-toggle {
  display: flex; gap: 6px;
  max-width: 360px; margin: 6px auto 22px;
  padding: 5px;
  background: var(--sf9); border: 1px solid var(--line);
  border-radius: 12px;
}
.ur-tab {
  flex: 1; padding: 10px 16px;
  background: transparent; border: 0; color: var(--text-dim);
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  text-transform: uppercase;
  border-radius: 8px; cursor: pointer;
  transition: background var(--t-slow) ease, color var(--t-slow) ease;
}
.ur-tab:hover { color: var(--text); }
.ur-tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.18) 0%, rgba(var(--accent-rgb),.08) 100%);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.35);
}
.ur-view { display: none; }
.ur-view.active { display: block; }

.cat-section { margin: 0 auto 24px; max-width: 920px; }
.cat-section.panel {
  /* Section is no longer a single big panel, individual tiles below are the grey boxes */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.cat-title {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  margin: 0 0 12px;
  font-size: 1rem;
}
.cat-heading {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .04em;
  color: var(--text);
  margin: 6px 0 10px;
}
.section-desc {
  background: var(--sf22);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.section-desc strong { color: var(--accent); }

/* Yellow-highlighted secondary note shown under a section-desc when
   we need to call attention to a special rule (e.g. Relics: where to
   actually find the Epic + Legendary variants). */
.section-note {
  border-radius: 10px;
  padding: 10px 16px;
  margin: -8px 0 16px;
  font-size: 13px;
  line-height: 1.5;
}
.section-note-warning {
  background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.45);
  color: #f7d76a;
}
.section-note-warning strong { color: #fff2a8; }
/* Info / how-it-works callout, soft blue (used for rune-tome unlock notes etc.) */
.section-note-info {
  background: rgba(74,160,255,.10);
  border: 1px solid rgba(74,160,255,.45);
  color: #b9d8ff;
}
.section-note-info strong { color: #d6e8ff; }
/* Elemental relic callout, yellow gradient with small element tags inline */
.section-note-elemental {
  background: linear-gradient(135deg, rgba(255,220,80,.18) 0%, rgba(255,170,40,.10) 60%, rgba(245,160,60,.06) 100%);
  border: 1px solid rgba(255,205,70,.55);
  color: #ffe79b;
}
.section-note-elemental strong { color: #fff3b3; }
.section-note-elemental .elem-chain {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #ffe28a;
}
.section-note-elemental .elem-tag {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.elem-tag-fire      { background: rgba(255,120,60,.18);  color: #ffb088; border: 1px solid rgba(255,120,60,.55); }
.elem-tag-ice       { background: rgba(125,210,255,.16); color: #b6e6ff; border: 1px solid rgba(125,210,255,.55); }
.elem-tag-earth     { background: rgba(140,205,120,.16); color: #c4e4b0; border: 1px solid rgba(140,205,120,.55); }
.elem-tag-lightning { background: rgba(255,225,110,.18); color: #fff0a0; border: 1px solid rgba(255,225,110,.6); }

/* ========== weapons table ========== */
.weapon-table {
  background: var(--sf22);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
}
.weapon-table-head {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 8px 18px;
  background: rgba(var(--accent-rgb),.05);
  border-bottom: 1px solid var(--line);
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.weapon-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px dashed var(--w04);
  transition: background var(--t-fast) ease;
}
.weapon-row:last-child { border-bottom: 0; }
.weapon-row:hover { background: rgba(var(--accent-rgb),.03); }
.weapon-cell-name {
  display: flex; align-items: center; gap: 12px;
}
.weapon-cell-img {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--w03);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.weapon-cell-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.weapon-cell-title {
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  font-family: 'Nunito',sans-serif;
}
.weapon-cell-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.weapon-cell-rarities {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: flex-end;
}
.weapon-cell-rarities .rarity-pill {
  font-size: 10px; padding: 2px 8px;
}
.weapon-rarity-row {
  margin-top: 14px;
  background: var(--sf22);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
}
.weapon-rarity-row .wrr-label {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.weapon-rarity-row .wrr-tiles {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.weapon-rarity-row .wrr-tile {
  display: flex; flex-direction: column; align-items: center;
  width: 64px;
}
.weapon-rarity-row .wrr-tile img {
  width: 48px; height: 48px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.weapon-rarity-row .wrr-tile span {
  font-size: 10.5px; color: var(--text-mute);
  margin-top: 3px;
  text-align: center;
}
@media (max-width: 700px) {
  .weapon-table-head, .weapon-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .weapon-cell-rarities { justify-content: flex-start; }
}
.cat-title .badge {
  padding: 2px 10px; border-radius: 999px; background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 11px; color: var(--text-mute); font-weight: 600;
}

.tile-row {
  display: flex; flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.tile {
  flex: 0 0 130px;
  background: var(--sf23);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px 10px;
  text-align: center; cursor: default;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.32);
}
.tile-img {
  width: 90px; height: 90px; margin: 0 auto 8px;
  display: grid; place-items: center;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}
.tile-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
.tile-img.fallback {
  background: linear-gradient(135deg, #1f2547 0%, #2e1a3e 100%);
  font-size: 26px;
  border: 1px dashed var(--line);
}
.tile-name {
  font-size: 13px; font-weight: 700; line-height: 1.25;
  color: var(--text); margin-bottom: 3px;
  font-family: 'Nunito',sans-serif;
  text-align: center;
}
.tile-sub { font-size: 11px; color: var(--text-mute); text-align: center; }
.tile.placeholder {
  background: var(--sf24);
  border: 1px dashed var(--line);
  opacity: 0.6;
}

/* ===== Animal Barn Feeding Guide ===== */
#ce-view-feeding .cat-section.panel { max-width: 1100px; }
.feeding-guide-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.feeding-guide {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--sf22);
}
.feeding-guide th,
.feeding-guide td {
  padding: 6px 8px;
  border: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.feeding-guide thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--sf25);
  backdrop-filter: blur(4px);
}
.feeding-guide th.fg-corner { text-align: left; min-width: 150px; }
.feeding-guide th.fg-anim { padding: 8px 6px; }
.fg-anim-img {
  width: 56px; height: 56px;
  margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--w04);
  border-radius: 8px;
}
.fg-anim-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fg-anim-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 11.5px; font-weight: 800;
  color: var(--text); letter-spacing: .05em; text-transform: uppercase;
}
.feeding-guide th.fg-food {
  text-align: left;
  position: sticky; left: 0; z-index: 1;
  background: var(--sf25);
  font-weight: 700; color: var(--text);
  font-size: 12.5px;
  min-width: 150px;
}
/* Top-left cell sticks both ways */
.feeding-guide thead th.fg-corner {
  left: 0; z-index: 4;
}
.feeding-guide tbody tr:hover th.fg-food,
.feeding-guide tbody tr:hover td { background: rgba(var(--accent-rgb),.06); }
.fg-cell { color: var(--text-dim); font-weight: 600; }
.fg-cell.fg-x        { color: var(--w18); }
.fg-cell.fg-wool     { color: #f7e9b0; background: rgba(247,233,176,.05); }
.fg-cell.fg-heavy    { color: #ffe27a; background: rgba(255,226,122,.07); }
.fg-cell.fg-milk     { color: #ffffff; background: var(--w05); }
.fg-cell.fg-egg      { color: #ffd75a; background: rgba(255,215,90,.06); }
.fg-cell.fg-poop     { color: #b88a4a; background: rgba(184,138,74,.08); }
.fg-cell.fg-mushroom { color: #d39860; background: rgba(211,152,96,.08); }
.fg-cell.fg-icecream { color: #c8ecff; background: rgba(200,236,255,.07); }
.fg-cell.fg-feather  { color: #d6d8df; background: rgba(214,216,223,.05); }
.fg-cell.fg-special  { color: #c084fc; background: rgba(168,85,247,.10); font-weight: 800; }
.fg-cell.fg-combo    { color: #d39860; background: rgba(211,152,96,.06); font-style: italic; }

/* ===== Creatures view, 7 per row, smaller sets centered (mirrors villagers) ===== */
#page-creatures .cat-section.panel { max-width: 1080px; }
#page-food .cat-section.panel { max-width: 1180px; }
.creatures-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 970px;
  margin: 0 auto;
}
.creatures-row > .tile {
  flex: 0 0 130px;
  width: 130px;
  padding: 8px 6px 10px;
}
.creatures-row > .tile > .tile-img {
  width: 122px;
  height: 140px;
  margin: 0 auto 6px;
  background: var(--sf26);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.creatures-row > .tile > .tile-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.creatures-row > .tile .tile-name { font-size: 11.5px; line-height: 1.25; }
@media (max-width: 1000px) { .creatures-row { max-width: 700px; } }
@media (max-width: 700px)  { .creatures-row { max-width: 560px; } }
@media (max-width: 480px)  { .creatures-row { max-width: 410px; } }

/* ===== Villagers list, 7 per row with smaller sets centered ===== */
#page-villagers .cat-section.panel {
  max-width: 1080px;
}
#villagers-list .tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 970px; /* 7 × 130px + 6 × 10px gap = exactly 7 per row */
  margin: 0 auto;
}
#villagers-list .tile {
  flex: 0 0 130px;
  width: 130px;
  padding: 6px 4px 10px;
}
#villagers-list .tile-img {
  width: 122px;
  height: 140px;
  margin: 0 auto 6px;
  background: var(--sf26);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
#villagers-list .tile-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
#villagers-list .tile.tile-zoom .tile-img img {
  transform: scale(1.45);
  transform-origin: center center;
}
#villagers-list .tile-name {
  font-size: 11.5px;
  line-height: 1.25;
}
@media (max-width: 1000px) {
  #villagers-list .tile-row { max-width: 700px; } /* 5 per row */
}
@media (max-width: 700px) {
  #villagers-list .tile-row { max-width: 560px; } /* 4 per row */
}
@media (max-width: 480px) {
  #villagers-list .tile-row { max-width: 410px; } /* 3 per row */
}
.tile.placeholder .tile-img {
  background: var(--w02);
}
.tile.placeholder .tile-img::before {
  content: "?";
  font-size: 38px;
  color: var(--text-mute);
  font-weight: 900;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
}
.tile.placeholder .tile-name { color: var(--text-mute); font-style: italic; }

/* ========== weapons / resources / data tables ========== */









.rarity-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.r-common  { background: rgba(185,194,214,.14); color: var(--rare-c); }
.r-uncommon { background: rgba(108,229,138,.14); color: var(--rare-u); }
.r-rare    { background: rgba(93,181,255,.14); color: var(--rare-r); }
.r-epic    { background: rgba(200,125,255,.14); color: var(--rare-e); }
.r-legendary { background: rgba(255,171,31,.14); color: var(--rare-l); } .rarity-pill.r-red{background:rgba(255,92,108,.16);color:var(--ink-bad);border-color:rgba(255,92,108,.55);} .rarity-pill.r-event{background:rgba(45,212,191,.16);color:#5eead4;border-color:rgba(45,212,191,.55);}
.r-mythic   { background: rgba(255,171,31,.14); color: var(--rare-m); }
.r-deprecated { background: rgba(185,194,214,.10); color: #8a93a6; border: 1px dashed rgba(185,194,214,.35); }
.r-event { background: rgba(244,114,182,.14); color: #f9a8d4; border: 1px solid rgba(244,114,182,.4); }
/* Combat-trait pills, show an enemy's damage immunities / elemental
   weaknesses next to its rarity pill. Hover (or tap on mobile) reveals
   the full explanation via the native `title` attribute. */






/* Tile-level lift on hover so the trait pills stand out as interactive */
.tile [class*="r-weak-"], .tile .r-immunity { cursor: help; }
/* Star rating chip, sits next to rarity pills. NINJAGO items use a 4-8★
   scale (NINJAGO Workbench resources), basic Crafting Bench items use a
   1-4★ scale. Driven by the lf-rarity-stars script at the bottom of the
   page; the chip inherits the pill's color. */

.tile.is-deprecated { opacity: .6; filter: grayscale(.55); position: relative; }
.tile.is-deprecated .tile-img img { filter: grayscale(.85); }
.tile.is-deprecated .tile-name { text-decoration: line-through; text-decoration-color: rgba(185,194,214,.5); }
.weapon-row.is-deprecated { opacity: .6; filter: grayscale(.55); }
.weapon-row.is-deprecated .weapon-cell-img img { filter: grayscale(.85); }
.weapon-row.is-deprecated .weapon-cell-title { text-decoration: line-through; text-decoration-color: rgba(185,194,214,.5); }
.weapon-rarity-row.is-deprecated { opacity: .55; filter: grayscale(.7); }
.weapon-rarity-row.is-deprecated .wrr-tile img { filter: grayscale(.9); }
.weapon-rarity-row.is-deprecated .wrr-label { text-decoration: line-through; text-decoration-color: rgba(185,194,214,.5); }
.tfb-lore { font-style: italic; color: rgba(185,194,214,.85); padding: 6px 10px;  background: rgba(var(--accent-rgb),.06); border-radius: 4px; margin-bottom: 6px !important; }
/* v565: enemy weapon-type icon row, shown under an enemy's name to indicate
   which weapon(s) that enemy fights with. */
.enemy-weapons { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin: 5px 0 1px; }
.enemy-weapons .ew-ico {
  width: 18px; height: 18px; object-fit: contain;
  background: var(--w06);
  border: 1px solid var(--w08);
  border-radius: 4px; padding: 1px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
/* v784: a weapon with no glyph on the site yet (Punch) shows as a small text chip in the same box style. */
.enemy-weapons .ew-txt { width: auto; padding: 0 5px; display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); line-height: 1; }
/* v570: rune unlock source, small tome icon + label under a rune tile so
   players can see which book unlocks it. */
.rune-src {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 5px 0 1px; padding: 2px 5px;
  background: var(--w05);
  border: 1px solid var(--w09);
  border-radius: 5px;
  font-size: 9.5px; line-height: 1.2; color: var(--text-dim);
}
.rune-src img { width: 15px; height: 15px; object-fit: contain; flex: 0 0 auto; }
.rune-src.rs-klombo { border-color: rgba(255,212,41,.3); }
.rune-src.rs-storm  { border-color: rgba(86,182,240,.3); }
.rune-src.rs-spire  { border-color: rgba(168,85,247,.3); }
.rune-src.rs-shatter{ border-color: rgba(239,68,68,.3); }
/* v567: Gather Planner two-column layout stacks on narrow screens. */
@media (max-width: 620px){ .lf-gp-grid{ grid-template-columns: 1fr !important; } }
.lf-gp-raw:hover{ background: var(--w05); }

/* ===== Rarity corner-glow accents, INSIDE the inner image box ===== */
/* Targets the small image square (recipe-img / tile-img / weapon-cell-img)
   so the glow sits in the bottom-right of the icon's box, not the whole card. */
.recipe-img, .tile-img, .weapon-cell-img {
  position: relative;
}
.recipe-card:has(.rarity-pill) .recipe-img::after,
.tile:has(.rarity-pill) .tile-img::after,
.weapon-row:has(.rarity-pill) .weapon-cell-img::after {
  content: "";
  position: absolute;
  bottom: -16px; right: -16px;
  width: 50px; height: 50px;
  border-radius: 50%;
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
/* Make the icon image sit above the glow */
.recipe-img > img, .tile-img > img, .weapon-cell-img > img { position: relative; z-index: 1; }

/* ---------- FOOD / CHARMS / TILES, BEST rarity wins (cascade: Common → Legendary) ---------- */
/* Common, gray */
.recipe-card:has(.rarity-pill.r-common) .recipe-img::after,
.tile:has(.rarity-pill.r-common) .tile-img::after {
  background: #b9c2d6;
  opacity: 0.55;
}
/* Uncommon, green */
.recipe-card:has(.rarity-pill.r-uncommon) .recipe-img::after,
.tile:has(.rarity-pill.r-uncommon) .tile-img::after {
  background: var(--ink-good-2);
  opacity: 0.6;
}
/* Rare, blue */
.recipe-card:has(.rarity-pill.r-rare) .recipe-img::after,
.tile:has(.rarity-pill.r-rare) .tile-img::after {
  background: #5db5ff;
  opacity: 0.65;
}
/* Epic, purple */
.recipe-card:has(.rarity-pill.r-epic) .recipe-img::after,
.tile:has(.rarity-pill.r-epic) .tile-img::after {
  background: #c87dff;
  opacity: 0.7;
}
/* Legendary, gold (highest in cascade, wins for multi-rarity rows) */
.recipe-card:has(.rarity-pill.r-legendary) .recipe-img::after,
.tile:has(.rarity-pill.r-legendary) .tile-img::after {
  background: #ffab1f;
  opacity: 0.75;
}
/* Mythic, gold (matches Legendary visually; wins over Legendary in cascade) */
.recipe-card:has(.rarity-pill.r-mythic) .recipe-img::after,
.tile:has(.rarity-pill.r-mythic) .tile-img::after {
  background: #ffab1f;
  opacity: 0.8;
}

/* ---------- WEAPONS & TOOLS, WORST rarity wins (cascade reversed: Mythic → Common) ---------- */
/* Mythic, gold (matches Legendary visually; cascades first so any lower row override wins) */
.weapon-row:has(.rarity-pill.r-mythic) .weapon-cell-img::after {
  background: #ffab1f;
  opacity: 0.8;
}
/* Legendary, gold */
.weapon-row:has(.rarity-pill.r-legendary) .weapon-cell-img::after {
  background: #ffab1f;
  opacity: 0.75;
}
/* Epic, purple */
.weapon-row:has(.rarity-pill.r-epic) .weapon-cell-img::after {
  background: #c87dff;
  opacity: 0.7;
}
/* Rare, blue */
.weapon-row:has(.rarity-pill.r-rare) .weapon-cell-img::after {
  background: #5db5ff;
  opacity: 0.65;
}
/* Uncommon, green */
.weapon-row:has(.rarity-pill.r-uncommon) .weapon-cell-img::after {
  background: var(--ink-good-2);
  opacity: 0.6;
}
/* Common, gray (last in cascade, wins for multi-rarity weapon rows) */
.weapon-row:has(.rarity-pill.r-common) .weapon-cell-img::after {
  background: #b9c2d6;
  opacity: 0.55;
}

table.data { width: 100%; max-width: 720px; margin: 0 auto; border-collapse: collapse; }
table.data th, table.data td {
  padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
table.data th { color: var(--text-mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
table.data tbody tr:hover { background: var(--bg-3); }

/* ========== crafting & progression (v3 layout) ========== */
.craft-titlebox {
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 28px;
  text-align: center;
  margin: 0 auto 14px;
  max-width: 980px;
}
.craft-eyebrow {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-mute);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
}
.craft-titlebox h1 {
  margin: 0;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.03em;
  text-align: center;
}
.craft-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 18px; max-width: 980px;
}
.craft-tab {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--sf8);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.craft-tab:hover { color: var(--text); border-color: var(--accent); }
.craft-tab.active {
  background: rgba(var(--accent-rgb),.14);
  color: var(--accent);
  border-color: var(--accent);
}
.craft-pane { display: none; }
.craft-pane.active { display: block; }
.craft-callout {
  background: var(--sf27);
  border: 1px solid rgba(var(--accent-rgb),.45);
  
  border-radius: 12px;
  padding: 12px 18px;
  margin: 0 auto 18px;
  max-width: 980px;
  text-align: left;
}
.craft-callout-tag {
  font-size: 10.5px; font-weight: 800;
  color: var(--accent);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 3px;
  text-align: left;
}
.craft-callout-text {
  font-size: 13px; color: var(--text-dim);
  text-align: left;
}
.village-section-head {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 28px auto 14px;
  max-width: 980px;
  padding: 0 4px;
  text-align: center;
  gap: 4px;
}
.village-section-head h2 {
  margin: 0;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
}
.village-section-counter {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}
.village-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto 8px;
}
.village-grid > .village-card {
  flex: 0 1 calc((100% - 28px) / 3);
  min-width: 280px;
  max-width: 320px;
}


@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .village-grid, .village-grid.cols-2 { max-width: 380px; }
  .village-grid > .village-card,
  .village-grid.cols-2 > .village-card { flex: 1 1 100%; max-width: 380px; }
}
.village-card {
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.village-img {
  width: 100%; height: 170px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.village-img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;
  display: block;
}
.village-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(var(--accent-rgb),.2);
  text-align: left;
}
.village-levels {
  display: flex; flex-direction: column;
  padding: 4px 0;
  flex: 1;
}
.village-level {
  display: flex; gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px dashed var(--w04);
  align-items: flex-start;
}
.village-level:last-child { border-bottom: 0; }
.village-level .lvl {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 36px;
  padding-top: 1px;
  text-align: left;
}
.village-level .reqs {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  text-align: left;
}
.village-level.complete {
  background: rgba(var(--accent-rgb),.1);
}
.village-level.complete .lvl { color: var(--accent); }
.village-level.complete .reqs {
  color: var(--accent);
  font-weight: 700;
}
.village-level.total {
  background: rgba(108,229,138,.06);
  border-top: 1px solid rgba(108,229,138,.18);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 14px 16px;
  flex: 1;
}
.village-level.total .lvl {
  color: var(--rare-u);
  font-size: 11px;
  letter-spacing: .08em;
  min-width: 0;
  text-align: center;
}
.village-level.total .reqs {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
}
.village-level.total .reqs strong {
  color: var(--text);
  font-weight: 700;
}
/* Center all text inside the Free Rewards pane */
#craft-rewards .cat-heading,
#craft-rewards .section-desc,
#craft-rewards .tile-name,
#craft-rewards .tile-sub {
  text-align: center;
}

/* Build-unlock hover tooltip, shows the level requirement */
.tile[data-unlock] {
  overflow: visible;
  cursor: help;
  position: relative;
}
.tile[data-unlock]:hover,
.tile[data-unlock].lf-tip-show { z-index: 9999; }
.tile[data-unlock]::before,
.tile[data-unlock]::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity var(--t-fast) ease;
}
.tile[data-unlock]::before {
  content: attr(data-unlock);
  background: var(--sf28);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.65);
  font-family: 'Nunito',sans-serif;
}
.tile[data-unlock]::after {
  content: "";
  bottom: calc(100% + 2px);
  border: 6px solid transparent;
  border-top-color: var(--accent);
}
.tile[data-unlock]:hover::before,
.tile[data-unlock]:hover::after {
  visibility: visible;
  opacity: 1;
}
/* v537: touch devices have no :hover -- tap toggles this class so the info shows on mobile. */
.tile[data-unlock].lf-tip-show::before,
.tile[data-unlock].lf-tip-show::after {
  visibility: visible;
  opacity: 1;
}
/* v541: the ::before/::after pseudo tooltip for data-unlock fails to paint on
   some tiles, so info is now served by a real floating element (#lf-vtip).
   Disable the old pseudo tooltip to avoid a broken/duplicate one. */
.tile[data-unlock]::before, .tile[data-unlock]::after { display: none !important; }
#lf-vtip {
  position: fixed; z-index: 100100; display: none;
  max-width: min(540px, 92vw);
  background: var(--sf29); color: var(--accent,var(--accent));
  border: 1px solid var(--accent,var(--accent)); border-radius: 8px;
  padding: 8px 14px; font: 700 12px/1.4 'Nunito',sans-serif; letter-spacing: .02em;
  box-shadow: 0 8px 26px rgba(0,0,0,.7); pointer-events: none;
  text-align: center; white-space: normal;
}
/* Special Visitors, wide, single-line-friendly hover tooltips for blessings */
#villagers-list [data-cat="special"] .tile[data-unlock]::before,
#villagers-list [data-cat="newfriends"] .tile[data-unlock]::before {
  white-space: normal;
  width: max-content;
  max-width: min(540px, 90vw);
  text-align: center;
  line-height: 1.4;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
}
/* v120: Expeditions Merge (Hope + Vengeance Jones), same wide, multi-line
   tooltip treatment as Special Visitors. Without this, the long "Only came
   to our Odyssey Worlds to merge Expeditions, not a recruitable villager"
   string renders as a single nowrap line that's wider than the screen and
   overlaps the section title above the tiles. Capped at 420px so it wraps
   to 2-3 readable lines instead of stretching edge to edge. */
#villagers-list [data-cat="expeditions-merge"] .tile[data-unlock]::before {
  white-space: normal;
  width: max-content;
  max-width: min(420px, 86vw);
  text-align: center;
  line-height: 1.4;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
}

/* Long-form tooltip for tiles that need a multi-paragraph hover detail
   (Spinjitzu Scrolls, Hero Equipment trinkets, fish locations). Uses
   data-detail attribute, supports embedded line breaks via white-space:
   pre-wrap, and stretches to ~420px wide before wrapping. */
.tile[data-detail] {
  overflow: visible;
  cursor: help;
  position: relative;
}
.tile[data-detail]:hover { z-index: 9999; }
.tile[data-detail]::before,
.tile[data-detail]::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity var(--t-fast) ease;
}
.tile[data-detail]::before {
  content: attr(data-detail);
  background: var(--sf29);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: pre-line;
  width: max-content;
  max-width: min(420px, 90vw);
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.65);
  font-family: 'Nunito',sans-serif;
}
.tile[data-detail]::after {
  content: "";
  bottom: calc(100% + 2px);
  border: 6px solid transparent;
  border-top-color: var(--accent);
}
.tile[data-detail]:hover::before,
.tile[data-detail]:hover::after {
  visibility: visible;
  opacity: 1;
}

/* v235: villager tiles that carry a data-detail disclaimer get a small,
   always-visible "i" badge so players can SEE which villagers have extra
   recruit/location info to hover for. Scoped to #villagers-list so other
   data-detail tiles (fish locations, Spinjitzu scrolls) are unaffected. */
#villagers-list .tile[data-detail] .tile-img { position: relative; }
#villagers-list .tile[data-detail] .tile-img::after {
  content: "i";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  color: var(--accent-ink);
  background: var(--accent-fill);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 3;
}

/* Utility station tooltips, multi-line panel, one ingredient per line */
.tile.util-tile[data-unlock]::before {
  white-space: pre-line;
  min-width: 180px;
  max-width: 320px;
  text-align: center;
  line-height: 1.6;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 16px;
  color: var(--accent);
}
/* v613: a crafting station hovers to its DESCRIPTION, not its build cost.
   data-unlock still carries the recipe because scanUtilTiles() parses it for
   the Build Calculator's + button, so the description goes in its own
   attribute rather than replacing it. Only the 23 stations carry one; chests,
   beds and garden plots keep showing materials. Prose reads better left
   aligned at normal weight than the centred bold ingredient list. */
.tile.util-tile[data-desc]::before {
  content: attr(data-desc);
  white-space: normal;
  min-width: 200px;
  max-width: 300px;
  text-align: left;
  line-height: 1.5;
  font-size: 12.5px;
  font-weight: 600;
  padding: 11px 14px;
  color: var(--text);
}
.craft-placeholder {
  background: var(--sf8);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 28px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13.5px;
}

/* ========== settings reference table ========== */
.settings-warning {
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.45);
  border-left: 4px solid #ef4444;
  border-radius: 12px;
  padding: 12px 18px;
  margin: 0 auto 18px;
  max-width: 980px;
  text-align: left;
  font-size: 13px; color: var(--text-dim);
}
.settings-warning strong { color: #f87171; }
.settings-table {
  background: var(--sf8);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto 18px;
  max-width: 980px;
}
.settings-table .st-head {
  background: rgba(var(--accent-rgb),.08);
  border-bottom: 1px solid var(--line);
  padding: 10px 18px;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
}
.settings-table table { width: 100%; border-collapse: collapse; }
.settings-table tbody tr { border-bottom: 1px dashed var(--w04); }
.settings-table tbody tr:last-child { border-bottom: 0; }
.settings-table tbody tr:hover { background: rgba(var(--accent-rgb),.03); }
.settings-table th, .settings-table td {
  padding: 10px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.45;
}
.settings-table th {
  width: 200px;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 13.5px;
  letter-spacing: .03em;
}
.settings-table td { color: var(--text); }
.settings-table td .opt {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 8px;
}
.settings-table td .opt strong { color: var(--text); }
.settings-tab-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 22px auto 0;
}
@media (max-width: 880px), (hover: none) and (pointer: coarse) { .settings-tab-imgs { grid-template-columns: 1fr; } }
.settings-tab-imgs figure {
  margin: 0;
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.settings-tab-imgs figure img {
  width: 100%; display: block;
}
.settings-tab-imgs figcaption {
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  background: rgba(var(--accent-rgb),.05);
  border-top: 1px solid var(--line);
}

/* ========== world layouts ========== */







@media (max-width: 880px), (hover: none) and (pointer: coarse) {  }





@media (max-width: 880px), (hover: none) and (pointer: coarse) {  }




/* ========== events calendar (v3 redesign) ========== */
.events-titlebox {
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 28px;
  text-align: center;
  margin: 0 auto 14px;
  max-width: 980px;
}
.events-titlebox .events-eyebrow {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-mute);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 4px; text-align: center;
}
.events-titlebox h1 {
  margin: 0;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.03em;
  text-align: center;
}

.featured-event {
  display: flex; align-items: center; gap: 16px;
  background: var(--sf27);
  border: 1px solid rgba(239,68,68,.5);
  border-left: 4px solid #ef4444;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 auto 14px;
  max-width: 980px;
  box-shadow: 0 8px 24px rgba(239,68,68,.08);
}
.featured-event-icon {
  width: 60px; height: 60px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, rgba(239,68,68,.2) 0%, rgba(239,68,68,.05) 70%, transparent 100%);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.featured-event-icon img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(239,68,68,.4));
}
.featured-event-body { flex: 1; min-width: 0; text-align: left; }
.featured-event-tag {
  font-size: 10.5px; font-weight: 800;
  color: #f87171;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 2px; text-align: left;
}
.featured-event-body h3 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 1.2rem;
  margin-bottom: 3px;
  color: var(--text); text-align: left;
}
.featured-event-body p {
  font-size: 13px; color: var(--text-dim); margin: 0;
  text-align: left;
}
/* Star Wars / Mandalorian accent variant (blue), used for the
   Din Djarin & Grogu featured event card. */





/* v560: Thing from Beneath "Upcoming Event" card, yellow-green accent. */
.fe-thing {
  border-color: rgba(163,230,53,.55);
  border-left-color: #a3e635;
  box-shadow: 0 8px 24px rgba(163,230,53,.10);
}
.fe-thing .featured-event-tag { color: #bef264; }
.featured-event.fe-thing .featured-event-icon {
  background: radial-gradient(circle at 50% 50%, rgba(163,230,53,.22) 0%, rgba(163,230,53,.05) 70%, transparent 100%);
}
.featured-event.fe-thing .featured-event-icon img {
  filter: drop-shadow(0 2px 6px rgba(163,230,53,.45));
}

/* v565: Machinist featured event, red accent. */





/* v755: Knight Shift, bat-signal yellow.
   v920: Knight Shift is archived and Brick or Treat is the current update, so
   the panel on the calendar now carries fe-brickortreat. The yellow block is
   kept because the archived pages still reference the class. */
.featured-event.fe-knightshift {
  border-color: rgba(var(--accent-rgb),.55);
  border-left-color: var(--accent-fill);
  box-shadow: 0 8px 28px rgba(var(--accent-rgb),.12);
}
.featured-event.fe-knightshift .featured-event-tag { color: var(--accent); }
.featured-event.fe-knightshift .featured-event-icon {
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.22) 0%, rgba(var(--accent-rgb),.05) 70%, transparent 100%);
}
.featured-event.fe-knightshift .featured-event-icon img {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accent-rgb),.28);
}

/* v920: Brick or Treat, pumpkin orange. */
.featured-event.fe-brickortreat {
  border-color: rgba(255,140,26,.55);
  border-left-color: var(--accent-fill);
  box-shadow: 0 8px 28px rgba(255,140,26,.14);
}
.featured-event.fe-brickortreat .featured-event-tag { color: var(--accent); }
.featured-event.fe-brickortreat .featured-event-icon {
  background: radial-gradient(circle at 50% 50%, rgba(255,140,26,.24) 0%, rgba(255,140,26,.05) 70%, transparent 100%);
}
.featured-event.fe-brickortreat .featured-event-icon img {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 0 1px rgba(255,140,26,.3);
}

/* v565: Shatter Spawn Gold Rush featured event, fuchsia/magenta accent. */
.featured-event.fe-goldrush {
  border-color: rgba(217,70,239,.55);
  border-left-color: #d946ef;
  box-shadow: 0 8px 24px rgba(217,70,239,.10);
}
.featured-event.fe-goldrush .featured-event-tag { color: #e879f9; }
.featured-event.fe-goldrush .featured-event-icon {
  background: radial-gradient(circle at 50% 50%, rgba(217,70,239,.22) 0%, rgba(217,70,239,.05) 70%, transparent 100%);
}
.featured-event.fe-goldrush .featured-event-icon img { filter: drop-shadow(0 2px 6px rgba(217,70,239,.45)); }

.events-legend {
  display: flex; gap: 16px 22px; flex-wrap: wrap;
  justify-content: center;
  background: var(--sf30);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 18px;
  margin: 0 auto 12px;
  max-width: 980px;
  font-size: 12px; color: var(--text-dim);
}
.events-legend .dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px currentColor;
}

.events-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 16px; max-width: 980px;
}
.ev-filter {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sf8);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.ev-filter:hover { color: var(--text); border-color: var(--accent); }
/* v783: What's On / Event History strip on the In-Game Events page. While the
   history tab is open, everything on the page except the title and the strip
   is hidden, so the calendar code never has to know about it. */
.ev-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 16px; }
#page-events.evh-on > :not(.events-titlebox):not(.ev-tabs):not(#event-history) { display: none !important; }
.evh { max-width: 980px; margin: 0 auto 24px; }
.evh-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.evh-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center; background: var(--sf8); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; padding: 12px 16px; text-align: left; }
.evh-row.evh-live { border-left-color: #ff8c1a; }
.evh-row.evh-ended { border-left-color: #ef4444; }
.evh-row.evh-drop { border-left-color: #56b6f0; }
.evh-when { font-family: 'Barlow Condensed','Poppins',sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .04em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.evh-name { font-weight: 800; font-size: 15px; color: var(--text); }
.evh-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; background: var(--w06); color: var(--text-dim); border: 1px solid var(--line); }
.evh-live .evh-tag { color: #ff8c1a; border-color: rgba(255,140,26,.5); }
.evh-ended .evh-tag { color: #f87171; border-color: rgba(239,68,68,.5); }
.evh-drop .evh-tag { color: #56b6f0; border-color: rgba(86,182,240,.5); }
.evh-sum { font-size: 13px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.evh-act { display: flex; flex-direction: column; gap: 6px; }
.evh-open { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-weight: 800; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.evh-open:hover { background: var(--accent); color: #06080e; }
.evh-open.evh-alt { border-color: var(--line); color: var(--text-dim); }
.evh-open.evh-alt:hover { background: var(--w06); color: var(--text); }
@media (max-width: 640px) { .evh-row { grid-template-columns: 1fr; gap: 6px; } .evh-act { flex-direction: row; } }
.ev-filter.active {
  background: rgba(var(--accent-rgb),.14);
  color: var(--accent);
  border-color: var(--accent);
}
/* Per-filter active colors matching the legend dots */
.ev-filter[data-filter="content"].active {
  background: rgba(86,182,240,.14); color: #56b6f0; border-color: #56b6f0;
}
.ev-filter[data-filter="weekly"].active {
  background: rgba(253,224,71,.14); color: #fde047; border-color: #fde047;
}
.ev-filter[data-filter="visitor"].active {
  background: rgba(34,197,94,.14); color: #4ade80; border-color: #4ade80;
}
.ev-filter[data-filter="shatter"].active {
  background: rgba(217,70,239,.16); color: #e879f9; border-color: #d946ef;
}
.ev-filter[data-filter="machinist"].active {
  background: rgba(239,68,68,.16); color: #f87171; border-color: #ef4444;
}
.ev-filter[data-filter="knightshift"].active {
  background: rgba(var(--accent-rgb),.16); color: var(--accent); border-color: var(--accent);
}

.cal-wrap {
  background: var(--sf31);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin: 0 auto;
  /* v811: was 980px, which gave each column about 136px and truncated almost
     every Knight Shift entry to "Knight Shift Quest...". */
  max-width: 1320px;
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-head h2 {
  margin: 0; font-size: 1.5rem;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  text-align: left;
}
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--sf27);
  border: 1px solid var(--line);
  color: var(--text-dim); font-size: 16px; cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
}
.cal-nav button:hover { border-color: var(--accent); color: var(--accent); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow-row { margin-bottom: 4px; }
.cal-dow {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-mute); letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 0;
}
.cal-cell {
  min-height: 128px;
  background: var(--sf23);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 6px 4px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cal-cell.muted { opacity: .35; }
.cal-cell.today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.cal-cell.today .day-num {
  color: var(--accent);
}
.cal-cell.has-events {
  cursor: pointer;
  transition: transform var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease;
}
.cal-cell.has-events:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.4), 0 0 0 1px var(--accent);
  z-index: 5;
}
.cal-cell.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.1);
  box-shadow: 0 0 0 2px var(--accent), 0 8px 22px rgba(var(--accent-rgb),.2);
  transform: translateY(-2px) scale(1.02);
  z-index: 4;
}

/* ===== Day-detail panel below calendar ===== */
.cal-day-detail {
  display: none;
  margin: 14px auto 0;
  max-width: 980px;
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px 20px;
  animation: cdd-fade .25s ease;
}
.cal-day-detail.active { display: block; }
@keyframes cdd-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.cdd-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cdd-date {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-align: left;
}
.cdd-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px; line-height: 1;
  font-family: inherit;
  display: grid; place-items: center;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.cdd-close:hover { border-color: var(--bad); color: var(--bad); }

.cdd-event {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  border-left: 3px solid var(--line);
  background: var(--w02);
  text-align: left;
}
.cdd-event:last-child { margin-bottom: 0; }
.cdd-event.weekly    { border-left-color: #fde047; background: rgba(253,224,71,.05); }
.cdd-event.visitor   { border-left-color: #4ade80; background: rgba(34,197,94,.05); }
.cdd-event.content   { border-left-color: #56b6f0; background: rgba(86,182,240,.05); }
.cdd-event.community { border-left-color: #c084fc; background: rgba(168,85,247,.05); }
.cdd-event.shatter   { border-left-color: #f87171; background: rgba(239,68,68,.05); }
.cdd-event.featured  { border-left-color: #ff8c1a; background: rgba(255,140,26,.05); }
.cdd-event.pass      { border-left-color: #fb923c; background: rgba(251,146,60,.05); }
.cdd-event-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 4px;
  text-align: left;
}
.cdd-event.weekly    .cdd-event-tag { color: #fde047; }
.cdd-event.visitor   .cdd-event-tag { color: #4ade80; }
.cdd-event.content   .cdd-event-tag { color: #56b6f0; }
.cdd-event.community .cdd-event-tag { color: #c084fc; }
.cdd-event.shatter   .cdd-event-tag { color: #f87171; }
.cdd-event.featured  .cdd-event-tag { color: #ff8c1a; }
.cdd-event.pass      .cdd-event-tag { color: #fb923c; }
.cdd-event-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 1.05rem;
  color: var(--text);
  text-align: left;
  letter-spacing: .01em;
  margin-bottom: 4px;
}
.cdd-event-desc {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.5;
  text-align: left;
}
.day-num {
  font-size: 13px; font-weight: 700;
  text-align: center;
  color: var(--text-dim);
  margin-bottom: 4px;
  padding-top: 2px;
}
.cal-events {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
}
/* v811: two lines, wrapped, instead of one line ellipsed. Most titles fit on
   one line at the new column width; the long ones now finish on a second
   rather than being cut. */
.cal-event {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
  text-align: center;
}
.cal-event.featured { background: rgba(255,140,26,.18); color: #ff8c1a; }
.cal-event.weekly   { background: rgba(253,224,71,.18); color: #fde047; }
.cal-event.visitor  { background: rgba(34,197,94,.18); color: #4ade80; }
.cal-event.content  { background: rgba(86,182,240,.18); color: #56b6f0; }
.cal-event.community{ background: rgba(168,85,247,.18); color: #c084fc; }
.cal-event.shatter  { background: rgba(217,70,239,.20); color: #e879f9; }  /* v565: Shatter Spawn fuchsia/magenta */
.cal-event.machinist{ background: rgba(239,68,68,.20); color: #f87171; }  /* v565: Daily Machinist Reward red */
.cal-event.pass     { background: rgba(251,146,60,.18); color: #fb923c; }
.cal-event.hidden   { display: none; }

/* ========== creators ========== */
/* v171: flex layout for ALL creator tabs so 2 cards sit per row and any
   lone trailing card (StarbuckAU on Featured Creators, Daveskerz on the
   Twitch tab) is horizontally centered instead of left-aligned. */
.creators-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px; margin: 0 auto 18px;
  max-width: 800px;
}
.creators-grid .creator-card {
  flex: 0 0 calc(50% - 8px);
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .creators-grid .creator-card { flex: 0 0 100%; }
}
.creator-card {
  background: var(--bg-card);
  border: 2px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; gap: 12px;
  padding: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-slow) ease, box-shadow var(--t-slow) ease, border-color var(--t-slow) ease, background var(--t-slow) ease;
  position: relative;
}
.creator-card:hover {
  transform: translateY(-4px) scale(1.015);
  background: rgba(var(--accent-rgb),.04);
}
/* Per-creator accent stroke */
.creator-card[data-color="lightblue"] {
  border-color: #56b6f0;
  box-shadow: 0 0 0 0 rgba(86,182,240,0);
}
.creator-card[data-color="lightblue"]:hover {
  box-shadow: 0 10px 28px rgba(86,182,240,.35), 0 0 0 1px #56b6f0;
}
.creator-card[data-color="white"] {
  border-color: #e8ecf6;
}
.creator-card[data-color="white"]:hover {
  box-shadow: 0 10px 28px rgba(232,236,246,.25), 0 0 0 1px #e8ecf6;
}
.creator-card[data-color="purple"] {
  border-color: #c87dff;
}
.creator-card[data-color="purple"]:hover {
  box-shadow: 0 10px 28px rgba(200,125,255,.35), 0 0 0 1px #c87dff;
}
.creator-card[data-color="darkblue"] {
  border-color: #2f5ee8;
}
.creator-card[data-color="darkblue"]:hover {
  box-shadow: 0 10px 28px rgba(47,94,232,.4), 0 0 0 1px #2f5ee8;
}
.creator-card img {
  width: 76px; height: 76px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg,#2a3556,#1a2040);
  border: 2px solid var(--w10);
}
.creator-body { flex: 1; text-align: left; min-width: 0; }
.creator-body h3 {
  font-size: 1.05rem; margin-bottom: 3px;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--accent);
  text-align: left;
}
.creator-body p {
  color: var(--text-dim); font-size: 12.5px;
  margin-bottom: 6px; text-align: left;
  line-height: 1.4;
}
.creator-yt, .creator-tw {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text); text-transform: uppercase;
  letter-spacing: .05em;
}
.creator-yt::before {
  content: "▶"; color: #ff3b30; font-size: 10px;
}
.creator-tw::before {
  content: "●"; color: #9146FF; font-size: 14px; line-height: 1;
}
.creator-card.creator-bottom {
  grid-column: 1 / -1;
  max-width: 392px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  /* v171: grid is now flexbox, drop each card to full width on phones. */
  .creators-grid .creator-card { flex: 0 0 100%; }
}

/* ========== Featured Video (Featured Creators bottom) ========== */
.featured-video {
  max-width: 1100px; margin: 38px auto 12px; text-align: center;
}
.featured-video-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 38px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  text-shadow: 0 2px 12px rgba(var(--accent-rgb),.18);
}
.featured-video-frame {
  display: block;
  position: relative; width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0; overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accent-rgb),.08);
  cursor: pointer;
  text-decoration: none;
}
.featured-video-frame iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}
.featured-video-frame .fv-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .4s ease, filter .4s ease;
}
.featured-video-frame:hover .fv-thumb { transform: scale(1.02); filter: brightness(.85); }
.featured-video-frame .fv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.6));
  opacity: .92;
  transition: transform var(--t-slow) ease, opacity var(--t-slow) ease;
}
.featured-video-frame:hover .fv-play { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
.featured-video-frame .fv-fallback-link {
  position: absolute; bottom: 12px; right: 14px;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--w15);
  transition: background var(--t-slow) ease, color var(--t-slow) ease;
}
.featured-video-frame .fv-fallback-link:hover {
  background: var(--accent-fill); color: var(--accent-ink);
}


@media (max-width: 720px) {
  .featured-video-title { font-size: 28px; }
}

/* ========== Build Visualizer ========== */
/* Override the page max-width for the Builds Creator so the canvas can breathe */
#page-builder { max-width: 1880px !important; }

/* v60 layout, canvas + Build Parts dock split roughly 50/50 because the
   parts panel was previously squeezed into 32vh, which left only one
   visible row of parts after the filter chips. Now the parts panel is
   the second-most-prominent block on the screen, with the filter chips
   collapsed by default so the grid itself fills the dock. */
.bv-shell {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  /* v100: BIG canvas (3D builder area) + BIG dock for 5 visible part
     rows. The two sections each take their own viewport sweep so the
     user scrolls vertically between them, that's intentional, the
     user wants both maximally usable. Canvas: 720px floor / 70vh max.
     Dock: 1100px floor / 90vh max (fits topbar + filter panel + 5
     rows of tiles). Trackers stay auto below. */
  grid-template-rows: minmax(720px, 70vh) var(--bv-parts-row, minmax(1100px, 90vh)) minmax(160px, auto);
  grid-template-areas:
    "stage stage stage"
    "parts parts parts"
    "instr instr  mat"; /* v487: bg panel hidden; instructions take its column */
  gap: 12px;
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .bv-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(320px, 36vh) minmax(640px, 75vh) auto auto;
    grid-template-areas:
      "stage"
      "parts"
      "instr"
      "mat"; /* v487: bg panel hidden */
  }
}
.bv-parts { grid-area: parts; }
.bv-stage { grid-area: stage; }

/* ================================================================
   v797: THE PARTS PANEL MOVES BESIDE THE CANVAS.

   The layout above stacks canvas, then parts, then trackers, each one
   its own viewport sweep. On a laptop you cannot see the pieces and the
   model at the same time, so building is: scroll down, click a piece,
   scroll up, place it, scroll down. Every session in the builder is that
   loop, several hundred times.

   Two features exist only because of it. Pop Out opens the parts list in
   a SECOND BROWSER WINDOW so you can drag it to another monitor. Full
   Screen hides everything else. Neither is discoverable, and neither
   should have to exist.

   Above 1180px the parts panel becomes a right hand rail running the
   full height of the stage, so both are on screen at once. Below that
   the original stacked layout is untouched, which is what phones and
   narrow windows want anyway.
   ================================================================ */
@media (min-width: 1180px) {
  .bv-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(300px, 26vw, 400px);
    grid-template-rows: minmax(560px, 74vh) minmax(160px, auto);
    grid-template-areas:
      "stage stage parts"
      "instr instr mat";
  }
  /* The rail scrolls inside itself rather than stretching the page. Spanning
     both rows made the parts content drive the height of the tracker row, so
     the rail is the height of the stage and scrolls. */
  .bv-shell > .bv-parts {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 74vh;
    overflow: hidden;
  }
  .bv-shell > .bv-parts .bv-parts-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    /* The Build Calculator dock floats over the bottom right of the viewport;
       leave it room so the last row of tiles is not underneath it. */
    padding-bottom: 76px;
  }
  /* Chips stack in a narrow rail instead of fighting for three columns. */
  .bv-shell > .bv-parts .bv-filter-panel { grid-template-columns: 1fr; }
  /* A narrow rail: let every control wrap onto its own line rather than
     overlapping the one next to it. */
  .bv-shell > .bv-parts .bv-parts-topbar {
    flex-wrap: wrap; gap: 7px; align-items: center;
  }
  .bv-shell > .bv-parts .bv-parts-search { flex: 1 1 100%; order: 1; }
  .bv-shell > .bv-parts .bv-parts-mintoggle { order: 0; }
  .bv-shell > .bv-parts .bv-fav-chip { order: 2; }
  .bv-shell > .bv-parts .bv-filter-toggle { order: 3; }
  /* v820: Pop Out is back on the toolbar at every width. It was hidden here
     on the theory that the parts rail made a second window unnecessary, but
     the rail shares one screen with the model and Pop Out puts the parts on
     a second monitor, which the rail cannot do. Different jobs. */
  /* Clear Scene wipes the whole build. It should not sit at the top of the
     panel you open to browse pieces, ahead of everything else. */
  .bv-shell > .bv-parts .bv-clear-btn { order: 9; margin-left: auto; opacity: .8; font-size: 11.5px; }
  .bv-shell > .bv-parts #bv-hidedoors-wrap { order: 8; margin-left: 0 !important; }
  /* The vertical drag handle belongs to the stacked layout. */
  .bv-shell > .bv-parts .bv-parts-resizer { display: none; }
  /* v820: was opacity .7 to play these down as legacy workarounds. They are
     not legacy, they are the two-monitor path, so they read at full strength. */
  #bv-popout-btn { opacity: 1; }
}
/* The minimize toggle folded the dock away to free the canvas. In the rail
   layout it folds the rail away instead, which is still useful on a laptop. */
@media (min-width: 1180px) {
  .bv-shell.parts-minimized {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 210px;
  }
}
.bv-bg-panel { grid-area: bg; }
.bv-instructions { grid-area: instr; }
.bv-materials { grid-area: mat; }
/* v296: cap the bottom trackers - a 250-step build scrolls INSIDE the
   Instructions Tracker instead of stretching the page (forum feedback). */
.bv-instructions, .bv-materials, .bv-bg-panel { max-height: min(62vh, 600px); }

/* ===== Minimize / expand the Build Parts dock (frees the canvas, esp. mobile) ===== */
.bv-parts-mintoggle { background: transparent; border: 0; cursor: pointer; color: var(--accent); font: inherit; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; padding: 2px 2px; }
.bv-parts-mintoggle:hover { filter: brightness(1.15); }
/* v296: drag strip at the bottom of the Build Parts dock - resize the dock
   (persists). Doubles as a quick way to give the part grid more rows. */
.bv-parts-resizer { height: 12px; cursor: ns-resize; flex: 0 0 12px; display:flex; align-items:center; justify-content:center; color: var(--text-dim); user-select:none; border-top: 1px solid var(--line); background: rgba(var(--accent-rgb),.04); }
.bv-parts-resizer:hover { color: var(--accent); background: rgba(var(--accent-rgb),.10); }
/* v297: the grid is the scroll region so the drag-strip can never be pushed
   out of view (forum: "drag to resize goes away sometimes") */
.bv-parts .bv-parts-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bv-collapse-btn { background: transparent; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0 6px 0 0; }
.bv-bg-panel.bv-collapsed, .bv-instructions.bv-collapsed, .bv-materials.bv-collapsed { max-height: 44px !important; min-height: 0; overflow: hidden; }
/* v298: collapsible saved/community blocks + fullscreen stage */
.bv-saved-builds.bv-collapsed { max-height: 54px !important; overflow: hidden; }
.bv-canvas-wrap:fullscreen { width: 100vw !important; height: 100vh !important; background: var(--canvas-bg); }
.bv-canvas-wrap:fullscreen canvas { width: 100% !important; height: 100% !important; } .bv-canvas-wrap.bv-cssfs{position:fixed;inset:0;width:100vw;height:100vh;z-index:4000;background:var(--canvas-bg);} .bv-canvas-wrap.bv-cssfs canvas{width:100%!important;height:100%!important;}
#bv-fullscreen-btn { position: absolute; top: 10px; right: 12px; z-index: 30; background: var(--sf32); color: var(--ink-cool); border: 1px solid rgba(120,170,230,.5); border-radius: 8px; padding: 6px 12px; font-size: 11px; cursor: pointer; }
#bv-fullscreen-btn:hover { border-color: var(--accent); color: var(--accent); }
.bv-parts-resizer::before { content: '⋯  drag to resize  ⋯'; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
/* v296: collapsible Themes block (chips eat half the dock on small screens) */
.bv-filter-grouphead.bv-collapsible { cursor: pointer; }
.bv-filter-grouphead.bv-collapsible:hover { color: var(--accent); }
.bv-filter-grouphead .bv-collapse-arrow { display:inline-block; margin-right:6px; transition: transform var(--t-fast); }
.bv-filter-group.collapsed .bv-theme-filters { display: none; }
.bv-filter-group.collapsed .bv-collapse-arrow { transform: rotate(-90deg); }
.bv-parts-min-chev { transition: transform var(--t-slow) ease; display: inline-block; font-size: .85em; }
.bv-shell.parts-minimized .bv-parts-min-chev { transform: rotate(-90deg); }
.bv-shell.parts-minimized .bv-parts-search,
.bv-shell.parts-minimized .bv-filter-toggle,
.bv-shell.parts-minimized .bv-clear-btn,
.bv-shell.parts-minimized .bv-active-chips,
.bv-shell.parts-minimized .bv-filter-panel,
.bv-shell.parts-minimized .bv-parts-grid,
.bv-shell.parts-minimized #bv-parts-empty,
.bv-shell.parts-minimized .bv-parts-tip { display: none !important; }
.bv-shell.parts-minimized .bv-parts-topbar { display: flex; border-bottom: 0; }
.bv-shell.parts-minimized .bv-parts { min-height: 0; height: auto; }
/* Collapse the fixed parts-row floor to its thin bar, per breakpoint.
   Parts is row 2 on desktop & tablet; on phones (<=720px) it is row 1 and
   already `auto`, so hiding the content alone shrinks it there. */
@media (min-width: 901px) {
  .bv-shell.parts-minimized { grid-template-rows: minmax(720px,70vh) auto minmax(160px,auto); }
}
@media (min-width: 721px) and (max-width: 900px) {
  .bv-shell.parts-minimized { grid-template-rows: minmax(320px,36vh) auto auto auto auto; }
}

/* New compact filter UI for the bottom-dock layout ----------------------- */
.bv-parts-topbar {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  grid-template-areas: "title search filters clear";
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.06), transparent);
}
@media (max-width: 720px) {
  .bv-parts-topbar {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "title    filters clear"
      "search   search  search";
  }
  .bv-parts-topbar .bv-parts-search { max-width: none; padding: 8px 12px; font-size: 14px; }
  /* Bump tap targets, chips and toggle buttons get the 36-40px min height
     iOS/Android recommend for finger-driven UIs. */
  .bv-filter-toggle, .bv-parts-topbar .bv-clear-btn { padding: 8px 12px; font-size: 12px; }
  .bv-theme-filter, .bv-filter, .bv-color-filter { padding: 8px 12px; font-size: 11.5px; }
  .bv-color-filter { padding: 6px 10px; }
  .bv-color-chip { width: 16px; height: 16px; }
  .bv-active-chip { padding: 5px 6px 5px 12px; font-size: 11px; }
  .bv-active-chip .x { width: 20px; height: 20px; }
}
.bv-parts-title {
  grid-area: title;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
}
.bv-parts-topbar .bv-parts-search {
  grid-area: search;
  width: 100%; max-width: 360px;
  background: rgba(0,0,0,.4);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.bv-parts-topbar .bv-parts-search:focus { outline: 0; border-color: var(--accent); }
.bv-filter-toggle {
  grid-area: filters;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--w04);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
  font: 700 11px/1 'Barlow Condensed','Inter',sans-serif;
  text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer;
  transition: all var(--t-fast) ease;
}
.bv-filter-toggle:hover { border-color: rgba(var(--accent-rgb),.6); color: var(--accent); }
.bv-filter-toggle.open {
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.55);
}
.bv-filter-toggle .bv-filter-count {
  display: none;
  background: var(--accent-fill); color: var(--accent-ink);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 800;
  min-width: 18px;
  text-align: center;
}
.bv-filter-toggle .bv-filter-count.show { display: inline-block; }
.bv-filter-toggle .bv-chev {
  font-size: 11px; line-height: 1;
  transition: transform var(--t-slow) ease;
}
.bv-filter-toggle.open .bv-chev { transform: rotate(180deg); }
.bv-parts-topbar .bv-clear-btn { grid-area: clear; }

/* Sticky active-chip strip below the topbar, visible only when filters are set */
.bv-active-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  min-height: 0;
}
.bv-active-chips:empty { display: none; }
.bv-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--accent-rgb),.16);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.45);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  font: 700 10.5px/1 'Barlow Condensed','Inter',sans-serif;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer;
}
.bv-active-chip .x {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.25);
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.bv-active-chip:hover { background: rgba(var(--accent-rgb),.28); }

/* The collapsible filters panel itself. Compact padding so the grid
   below has room for 3 rows on 1440p / 2+ rows on 1080p. */
.bv-filter-panel {
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  padding: 8px 12px 6px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
}
/* v797: the panel ships with the hidden attribute and the Filters button
   adds and removes it, but `display: grid` above outranks the browser's own
   [hidden] rule, so the panel was ALWAYS open and the button did nothing
   visible. Three rows of theme, colour and size chips therefore sat between
   the search box and the parts on every visit. */
.bv-filter-panel[hidden] { display: none !important; }
/* When the filter panel is open, the active-chip strip is redundant
   (the same chips show inside the panel itself). Hide it to claw back
   ~40px of vertical space for more part rows. */
.bv-parts.filters-open > .bv-active-chips { display: none; }
@media (max-width: 1100px) {
  .bv-filter-panel { grid-template-columns: 1fr; }
}
.bv-filter-group { min-width: 0; }
.bv-filter-grouphead {
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.bv-filter-grouphead small {
  font: 600 9.5px/1 'Inter',sans-serif;
  text-transform: none; letter-spacing: 0;
  color: var(--text-dim); opacity: .7;
}
.bv-filter-actions {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.bv-filter-reset {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 12px;
  font: 700 11px/1 'Barlow Condensed','Inter',sans-serif;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer;
}
.bv-filter-reset:hover { color: var(--text); border-color: rgba(var(--accent-rgb),.4); }

.bv-parts, .bv-bg-panel, .bv-tracker, .bv-stage {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bv-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.06), transparent);
}
.bv-clear-btn {
  background: rgba(255,80,80,.12);
  color: var(--ink-bad);
  border: 1px solid rgba(255,80,80,.35);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
}
.bv-clear-btn:hover { background: rgba(255,80,80,.22); }

/* Filters */
.bv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.bv-filter {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  transition: all var(--t-fast) ease;
}
.bv-filter:hover { color: var(--text); border-color: rgba(var(--accent-rgb),.4); }
.bv-theme-filters {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 0; border: 0; margin: 0;
  /* v99: 48 theme chips wrap to many rows. Cap the height + scroll
     internally so the filter panel doesn't squash the parts grid below
     it. Without this cap, opening filters dropped the grid to ~1.5
     visible rows even with the 80vh dock. */
  max-height: 130px;
  overflow-y: auto;
  padding-right: 4px;
}
.bv-theme-filters::-webkit-scrollbar { width: 6px; }
.bv-theme-filters::-webkit-scrollbar-track { background: transparent; }
.bv-theme-filters::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.25); border-radius: 3px; }
.bv-theme-filter {
  display: inline-block;
  padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim);
  background: var(--w03);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: all var(--t-fast) ease;
  text-align: left;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.bv-theme-filter:hover { color: var(--text); border-color: rgba(var(--accent-rgb),.4); }
.bv-theme-filter.active {
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.55);
}
.bv-theme-filter.loading { opacity: 0.55; cursor: wait; }
/* v211: locked theme chip, gated until its unlock date */
.bv-theme-filter.locked {
  opacity: 0.6;
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(var(--accent-rgb),.35);
}
.bv-theme-filter.locked:hover { color: var(--text-dim); border-color: rgba(var(--accent-rgb),.35); }
.bv-theme-thumb {
  display: inline-block;
  width: 28px; height: 28px;
  margin-right: 8px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-color: var(--w04);
  border: 1px solid rgba(var(--accent-rgb),.18);
  vertical-align: middle;
  flex-shrink: 0;
}
.bv-theme-thumb-blank {
  background-image: linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.04));
}
.bv-theme-filter {
  display: inline-flex !important;
  align-items: center;
}
.bv-theme-label { display: inline-block; line-height: 1.15; }
.bv-theme-filter.coming-soon {
  opacity: .55;
  cursor: not-allowed;
  border-color: rgba(var(--accent-rgb),.15) !important;
}
.bv-theme-filter.coming-soon:hover { color: var(--text-dim); border-color: rgba(var(--accent-rgb),.15); }
.bv-theme-filter.coming-soon small {
  display: block;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb),.55);
}
.bv-theme-filter.locked .bv-lock { margin-right: 4px; font-size: 9px; }
.bv-theme-filter.locked small {
  display: block; font-size: 8px; font-weight: 600;
  letter-spacing: .02em; text-transform: none; opacity: .8; margin-top: 1px;
}
/* Color filter row */
.bv-color-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.bv-color-filter {
  background: transparent;
  border: 1px solid var(--w12);
  border-radius: 999px;
  padding: 4px 10px;
  font: 600 11px/1 Inter, sans-serif;
  color: var(--muted, #9aa3bf);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast) ease;
}
.bv-color-filter:hover { color: var(--text, #e7ecf6); border-color: rgba(var(--accent-rgb),.4); }
.bv-color-filter.active {
  color: #fff;
  background: rgba(var(--accent-rgb),0.15);
  border-color: rgba(var(--accent-rgb),0.6);
}
.bv-color-chip {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--w20);
}
.bv-theme-loading-msg {
  text-align: center; padding: 24px 12px; font-size: 12px; color: var(--text-dim);
}
.bv-filter.active {
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.5);
}

/* Parts grid, full-width dock layout uses auto-fill so the grid scales
   from ~10 columns on a wide monitor down to 2 columns on phones. 126px
   floor (was 140) balances readability against how many rows fit; with
   the new 56vh dock height that gives 3 rows on 1440p / 2 rows on 1080p
   when the filter panel is open, and more when it's collapsed. */
.bv-parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 8px;
  padding: 10px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  align-content: start;
  /* v99: guarantee at least 5 tile rows visible. Tile is ~126px + 8px
     gap + 28px name + 4px padding = ~166px per row. 5 × 166 = 830px.
     min-height is what forces the grid to occupy at least this much
     vertical space even when the filter panel is wide open. */
  min-height: 830px;
}
@media (max-width: 1400px) {
  /* On 1080p / smaller laptops, 5 rows at the same tile size would
     overflow. Drop the floor to 4 rows (~664px) but the rest of the
     layout still gets the bigger dock. */
  .bv-parts-grid { min-height: 664px; }
}
@media (max-width: 900px) {
  .bv-parts-grid { min-height: 500px; }
}
.bv-part {
  background: linear-gradient(135deg, var(--sf33), var(--sf7));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 6px;
  cursor: grab;
  text-align: center;
  transition: all var(--t-fast) ease;
  user-select: none;
}
.bv-part:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.bv-part:active { cursor: grabbing; }
.bv-part.hidden { display: none; }
/* v714: the dock builds 8,925 tiles in batches of 500, and each batch used to
   appear all at once, which reads as a stutter rather than as loading. The
   class is added at build time and taken off when the animation ends, so it
   never re-runs when the filters hide and show a tile. The delay wraps every
   24 tiles, which is roughly a row, so the cascade stays short no matter how
   big the batch is. */
@keyframes bvTileIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.bv-part-in { animation: bvTileIn .22s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .bv-part-in { animation: none; } }
.bv-part-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  font-size: 28px;
  /* Dark navy backdrop. Epic's PNG icons have transparent corners that
     made the pieces look washed-out on the previous light-grey bg ,
     against dark navy, both white pieces (Rebel walls) and dark pieces
     (Log Cabin wood) read clearly. */
  background: #161b2a;
  border-radius: 6px;
  overflow: hidden;
}
.bv-part-icon {
  width: 100%; height: 100%; object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.bv-part-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  color: var(--text);
  line-height: 1.15;
}
.bv-part-cost {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 2px;
}
/* v726: a piece whose recipe nobody has read out of the game yet. Set apart
   from a real recipe so it does not read as one, and quiet enough that a
   dock full of priced pieces still scans normally. */
.bv-part-cost-unknown {
  font-style: italic;
  opacity: .62;
}





/* Search bar */

.bv-parts-search {
  width: 100%;
  background: rgba(0,0,0,.4);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.bv-parts-search:focus { outline: 0; border-color: var(--accent); }

/* Toolbar in canvas, v73 redesign: collapsible header with grouped
   labeled buttons that stretch across the canvas instead of cramming
   into a corner. Click the chevron to collapse the body to just the
   "Tools ▾" pill. */
.bv-toolbar {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--sf34);
  border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  z-index: 5;
  min-width: 0;
  max-width: calc(100vw - 360px);    /* don't crowd the rotation pill / freeroam */
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  overflow: hidden;
}
.bv-toolbar-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.06));
  border: 0; border-bottom: 1px solid rgba(var(--accent-rgb),.22);
  color: var(--accent);
  cursor: pointer;
  font: 800 12px/1 'Barlow Condensed','Inter',sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  width: 100%;
}
.bv-toolbar-toggle:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb),.26), rgba(var(--accent-rgb),.1)); }
.bv-toolbar-label { flex: 1; text-align: left; }
.bv-toolbar-chev {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: rgba(var(--accent-rgb),.18);
  border: 1px solid rgba(var(--accent-rgb),.4);
  border-radius: 6px;
  font-size: 14px; line-height: 1;
  transition: transform var(--t-slow) ease;
}
.bv-toolbar.collapsed .bv-toolbar-chev { transform: rotate(180deg); }
.bv-toolbar.collapsed .bv-toolbar-body { display: none; }
.bv-toolbar.collapsed .bv-toolbar-toggle { border-bottom: 0; }
.bv-toolbar-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}
.bv-toolbar-group {
  display: flex; gap: 4px;
  padding-right: 8px;
  border-right: 1px solid var(--w08);
}
.bv-toolbar-group:last-child { border-right: 0; padding-right: 0; }
.bv-tool-btn {
  background: var(--sf35);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 10px;
  min-height: 28px;
  cursor: pointer;
  font: 700 11px/1.1 'Barlow Condensed','Inter',sans-serif;
  letter-spacing: .03em;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  white-space: nowrap;
}
.bv-tool-btn .bv-tool-ico { font-size: 13px; line-height: 1; }
.bv-tool-btn:hover { background: rgba(var(--accent-rgb),.18); border-color: var(--accent); color: var(--accent); }
.bv-tool-btn.bv-tool-toggle.off {
  opacity: 0.45;
  background: var(--sf36);
}
/* v797: Support, Game Snap and Overlap each flip an "active" class that had no
   rule behind it, and two of the three ship ON. So the three buttons that
   decide whether a placement is allowed looked identical whether they were
   enforcing or not, and someone whose clicks kept getting rejected had no way
   to see why. Grid and Sun already dim via .off; these light up instead. */
.bv-tool-btn.bv-tool-toggle.active {
  background: rgba(var(--accent-rgb),.2);
  border-color: rgba(var(--accent-rgb),.6);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.25);
}
.bv-tool-btn.bv-tool-toggle.active::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-left: 2px;
  flex: 0 0 auto;
}


/* v797: the member directory. */
.lf-dir-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  max-width: 1180px; margin: 0 auto;
}
.lf-dir-card { padding: 14px 16px; }
.lf-dir-sub { color: var(--text-mute); font-size: 12.5px; margin-bottom: 8px; }
.lf-dir-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-top: 1px solid var(--line);
}
.lf-dir-rank { flex: 0 0 30px; text-align: center; font-weight: 700; color: var(--text-dim); font-size: 13px; }
.lf-dir-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.lf-dir-av-none {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text-mute); font: 700 12px/1 Inter, system-ui, sans-serif;
}
.lf-dir-name { flex: 1; min-width: 0; color: var(--text); font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-dir-big { color: var(--accent); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.lf-dir-small { color: var(--text-mute); font-size: 11.5px; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.lf-dir-empty { color: var(--text-mute); font-size: 13px; padding: 8px 2px; }
.lf-dir-foot { max-width: 1180px; margin: 16px auto 0; color: var(--text-mute); font-size: 12.5px; text-align: center; }

/* v797: the searchable favorite pickers. */
.fav-search {
  width: 100%;
  background: var(--sf7, #12151d);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: 600 13.5px/1.2 Inter, system-ui, sans-serif;
  padding: 8px 11px;
}
.fav-search:focus { outline: none; border-color: rgba(var(--accent-rgb),.55); }
.fav-search.fav-bad { border-color: rgba(224,92,62,.7); background: rgba(224,92,62,.08); }

/* v797: what this build has cost so far, over the stage. */
.bv-cost-strip {
  position: absolute; left: 50%; transform: translateX(-50%); top: 10px;
  z-index: 7; pointer-events: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: calc(100% - 200px);
  background: rgba(10,13,20,.8); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px;
  font: 600 12px/1 Inter, system-ui, sans-serif; color: var(--text-dim);
}
.bv-cost-strip[hidden] { display: none; }
.bv-cost-n { color: var(--accent); font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bv-cost-lbl { color: var(--text-mute); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.bv-cost-sep { width: 1px; height: 13px; background: var(--line); }
.bv-cost-mat { white-space: nowrap; }
.bv-cost-mat b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
/* In the touch builder it sits under the armed-piece readout instead. */
.bv-canvas-wrap.bv-touchfs .bv-cost-strip { top: auto; bottom: calc(180px + env(safe-area-inset-bottom, 0px)); right: 12px; left: auto; transform: none; max-width: 62vw; }

/* v797: the on-map strip that replaced a second copy of the village cards. */
.mw-onmap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.mw-onmap-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px 5px 6px; color: var(--text); font: 600 13px/1 Inter, system-ui, sans-serif;
}
.mw-onmap-chip:hover { border-color: rgba(var(--accent-rgb),.5); }
.mw-onmap-chip img { width: 22px; height: 22px; object-fit: contain; }
.mw-onmap-chip small { color: var(--text-mute); font-size: 11px; font-weight: 500; }
.mw-onmap-pins { color: var(--text-mute); font-size: 12.5px; }
.mw-onmap-all {
  cursor: pointer; background: none; border: 0; padding: 5px 4px;
  color: var(--accent); font: 700 12.5px/1 Inter, system-ui, sans-serif;
}
.mw-onmap-all:hover { text-decoration: underline; }

/* v797: My Worlds says what to do next, and what is account wide. */
.lf-pm-nextup {
  margin: 2px auto 10px; max-width: 760px;
  text-align: center; font-size: 13px; color: var(--text-dim);
  background: rgba(var(--accent-rgb),.07);
  border: 1px solid rgba(var(--accent-rgb),.26);
  border-radius: 999px; padding: 7px 16px;
}
.mw-scope-note {
  max-width: 640px; margin: 4px auto 12px;
  text-align: center; font-size: 12.5px; line-height: 1.5;
  color: var(--text-mute);
  border-top: 1px solid var(--line); padding-top: 10px;
}
.mw-scope-note b { color: var(--text-dim); }

/* v797: the My Worlds save indicator. Saving can fail, and used to do so in
   total silence, so the state it is in has to be visible. */
.lf-pm-savestate {
  align-self: center; margin-left: 10px;
  font: 700 11.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid transparent; color: var(--text-mute);
}
.lf-pm-savestate:empty { display: none; }
.lf-pm-savestate.saving { color: var(--text-dim); border-color: var(--line); }
.lf-pm-savestate.saved  { color: var(--ink-good-2, #6edc8c); border-color: rgba(110,220,140,.4); background: rgba(110,220,140,.08); }
.lf-pm-savestate.local  { color: var(--accent, var(--accent)); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.08); }
.lf-pm-savestate.failed { color: #ff9d90; border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.1); }

/* v797: the level ring and the build shelf on a profile. */
.lf-lvl-ring {
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb),.16), transparent 68%), var(--bg-3);
  border: 2px solid var(--accent, var(--accent));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; box-shadow: 0 0 16px rgba(var(--accent-rgb),.18);
}
.lf-lvl-cap { font-size: 9px; letter-spacing: .12em; color: var(--text-mute); line-height: 1; }
.lf-lvl-n { font: 900 23px/1 Inter, system-ui, sans-serif; color: var(--accent); font-variant-numeric: tabular-nums; }

.lf-prof-buildgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 10px;
}
.lf-pb-card {
  background: var(--bg-card, #16161b); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; cursor: pointer;
}
.lf-pb-card:hover { border-color: rgba(var(--accent-rgb),.5); }
.lf-pb-thumb {
  aspect-ratio: 16 / 10; background: #0d1422;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lf-pb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-pb-nothumb { color: var(--text-mute); font-size: 12.5px; }
.lf-pb-name {
  padding: 8px 10px 0; font-weight: 700; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-pb-meta { padding: 2px 10px 10px; font-size: 11.5px; color: var(--text-mute); }

/* v797: every username is a link now, and they should look like one without
   shouting over the content they sit in. */
.lf-userlink { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.lf-userlink:hover { color: var(--accent); border-bottom-color: rgba(var(--accent-rgb),.5); }
.lf-userlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* v797: told up front, not after the work. */
.profile-guest-note {
  margin: 0 16px 14px; padding: 12px 15px;
  border: 1px solid rgba(var(--accent-rgb),.34);
  border-left: 3px solid var(--accent, var(--accent));
  background: rgba(var(--accent-rgb),.07);
  border-radius: 0 10px 10px 0;
  color: var(--text-dim); font-size: 13.5px; line-height: 1.55;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.profile-guest-note[hidden] { display: none; }
.profile-guest-note b { color: var(--text); }
.profile-guest-note button {
  margin-left: auto; cursor: pointer;
  background: rgba(var(--accent-rgb),.18); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.5); border-radius: 8px;
  padding: 7px 14px; font: 700 13px/1 Inter, system-ui, sans-serif;
}
.profile-guest-note button:hover { background: rgba(var(--accent-rgb),.28); }

/* v797: a social link the profile cannot use, and why. */
.profile-social-edit input.social-bad {
  border-color: rgba(224,92,62,.7) !important;
  background: rgba(224,92,62,.08) !important;
}
.profile-social-hint:empty { display: none; }
.profile-social-hint {
  margin-top: 8px; padding: 8px 11px;
  border-left: 3px solid var(--ink-bad, #e05c3e);
  background: rgba(224,92,62,.08);
  border-radius: 0 7px 7px 0;
  color: var(--text-dim); font-size: 12.5px; line-height: 1.5;
}

/* v797: stud size on a part tile, and the nudge plane indicator. */
.bv-part-thumb { position: relative; }
.bv-part-dim {
  position: absolute; left: 3px; bottom: 3px;
  background: rgba(8,10,16,.72); color: #c7ccd8;
  font: 700 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: .02em; padding: 3px 5px; border-radius: 4px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.bv-nudge-plane {
  position: absolute; left: 50%; transform: translateX(-50%); top: 46px;
  z-index: 6; pointer-events: none;
  background: rgba(8,10,16,.66); color: var(--text-dim, #9fb6d8);
  border: 1px solid var(--line); border-radius: 999px;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  padding: 5px 12px; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease;
}
.bv-canvas-wrap.placing .bv-nudge-plane { opacity: .85; }
.bv-nudge-plane.flash { opacity: 1; color: var(--accent); border-color: rgba(var(--accent-rgb),.55); }

/* Rotation indicator */
.bv-rotation-indicator {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  background: var(--sf37);
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 8px;
  padding: 5px 12px;
  color: var(--accent);
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  backdrop-filter: blur(4px);
  z-index: 4;
  transition: transform var(--t-slow) ease, background var(--t-slow) ease;
}
/* v797: this said 'R · ' and the tooltip said "R to rotate". R is bound to
   nothing anywhere in the builder; rotation is the scroll wheel. */
.bv-rotation-indicator::before { content: 'Turn · '; opacity: 0.7; }
.bv-rotation-indicator.flash {
  background: rgba(var(--accent-rgb),.32);
  transform: translateX(-50%) scale(1.15);
}
/* Armed-part info (shows what's about to be placed) */
.bv-armed-info {
  position: absolute;
  top: 56px; left: 50%;
  transform: translateX(-50%);
  background: var(--sf38);
  border: 1px solid rgba(110,220,140,.45);
  border-radius: 8px;
  padding: 6px 14px;
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  backdrop-filter: blur(4px);
  z-index: 4;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.bv-armed-info .bv-armed-name {
  color: var(--ink-good);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bv-armed-info .bv-armed-cost {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .02em;
}
/* v629: a toolbar toggle whose feature is still fetching its data */
.bv-tool-btn.loading {
  opacity: .62;
  border-color: rgba(var(--accent-rgb),.28);
}
.bv-tool-btn.loading .bv-tool-ico {
  display: inline-block;
  animation: bv-tool-pulse 1.1s ease-in-out infinite;
}
@keyframes bv-tool-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
/* v624: variant swatches under the armed piece */
.bv-var-strip {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--w10);
  max-width: 320px; flex-wrap: wrap; justify-content: center;
}
.bv-var-strip .bv-var-label {
  color: var(--text-dim); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; margin-right: 2px;
}
.bv-var {
  width: 22px; height: 22px; border-radius: 5px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: rgba(0,0,0,.62);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--t-fast) ease, border-color var(--t-fast) ease;
  padding: 0; line-height: 1;
}
.bv-var:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.55); }
.bv-var.current { border-color: var(--accent, var(--accent)); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.28); }
@media (max-width: 720px) {
  .bv-var { width: 19px; height: 19px; font-size: 9px; }
  .bv-var-strip { max-width: 240px; }
}

/* Stage / canvas */
.bv-help-overlay {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 30;
  /* Wider so the long mouse-look / shortcut rows fit on one line without
     mid-word wrapping. Cap at 45vw so it never eats more than half the
     canvas. The collapsed state shrinks to fit just the title bar. */
  width: 380px; max-width: 45vw;
  background: var(--sf39);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  pointer-events: auto;
  transition: transform var(--t-slow) ease, opacity var(--t-slow) ease, width var(--t-slow) ease;
}
.bv-help-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.06));
  border: 0; border-bottom: 1px solid rgba(var(--accent-rgb),.22);
  color: var(--accent);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.bv-help-toggle:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.1)); }
.bv-help-icon { font-size: 15px; opacity: .9; }
.bv-help-label { flex: 1; text-align: left; }
/* Larger, more obvious collapse arrow */
.bv-help-chev {
  transition: transform var(--t-slow) ease;
  opacity: .9;
  font-size: 16px;
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb),.18);
  border: 1px solid rgba(var(--accent-rgb),.4);
  line-height: 1;
}
.bv-help-toggle:hover .bv-help-chev { background: rgba(var(--accent-rgb),.32); }
.bv-help-overlay.collapsed .bv-help-chev { transform: rotate(180deg); }
.bv-help-overlay.collapsed .bv-help-body { display: none; }
.bv-help-overlay.collapsed { width: auto; }
.bv-help-overlay.collapsed .bv-help-toggle { border-bottom: 0; }
.bv-help-body { padding: 12px 14px 14px; }
.bv-help-section + .bv-help-section { margin-top: 10px; }
.bv-help-title {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px; padding-bottom: 3px;
  border-bottom: 1px dashed rgba(var(--accent-rgb),.18);
}
.bv-help-row {
  padding: 3px 0; line-height: 1.65;
  color: var(--text);
  white-space: nowrap;          /* keep keybind rows on one line */
  overflow: hidden;
  text-overflow: ellipsis;
}
.bv-help-tip {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--w08);
  font-size: 11px; color: var(--text-dim); font-style: italic; line-height: 1.55;
  white-space: normal;          /* tip can wrap; only the rows need single-line */
}
.bv-help-overlay .bv-kbd {
  display: inline-block;
  background: var(--w08);
  border: 1px solid var(--w18);
  border-radius: 3px;
  padding: 0 6px;
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-size: 10.5px;
  color: var(--accent);
  margin: 0 2px;
}
@media (max-width: 980px) {
  .bv-help-overlay { width: 300px; max-width: 60vw; font-size: 11px; }
}
@media (max-width: 720px) {
  .bv-help-overlay { width: 240px; max-width: 70vw; font-size: 10.5px; }
  .bv-help-row { white-space: normal; }  /* let them wrap on phones */
}

.bv-canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--canvas-bg);
  overflow: hidden;
}
#bv-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.bv-canvas-wrap.placing #bv-canvas { cursor: copy; }
.bv-canvas-wrap.freeroam #bv-canvas { cursor: none; }
.bv-canvas-wrap.freeroam.freeroam-paused #bv-canvas { cursor: default; }

.bv-freeroam-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--sf37);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.45);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  cursor: pointer;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-fast) ease;
}
.bv-freeroam-btn:hover { background: rgba(var(--accent-rgb),.18); }
.bv-canvas-wrap.freeroam .bv-freeroam-btn {
  background: rgba(80,180,90,.18);
  color: var(--ink-good);
  border-color: rgba(110,220,140,.55);
}
.bv-freeroam-btn .key-hint {
  font-size: 9.5px;
  background: var(--w08);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--w15);
  color: var(--text);
  letter-spacing: .04em;
}
.bv-sens-control {
  position: absolute;
  top: 56px;
  right: 12px;
  background: var(--sf37);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  color: var(--text);
  backdrop-filter: blur(4px);
}
.bv-sens-control label { color: var(--accent); }
.bv-sens-control input[type=range] {
  width: 90px;
  accent-color: var(--accent);
  cursor: pointer;
}
.bv-sens-control #bv-sens-value {
  color: var(--accent);
  min-width: 32px;
  text-align: right;
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-size: 10px;
}

.bv-freeroam-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.bv-canvas-wrap.freeroam .bv-freeroam-hud { display: block; }
.hud-crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(var(--accent-rgb),.7);
  text-shadow: 0 0 4px rgba(0,0,0,.7);
  font-family: monospace;
  font-weight: 100;
  user-select: none;
}
.hud-help {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sf40);
  color: var(--text);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 11.5px;
  letter-spacing: .03em;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.hud-help strong { color: var(--accent); margin-right: 4px; }
.hud-help .kbd {
  display: inline-block;
  background: var(--w10);
  border: 1px solid var(--w18);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-size: 10px;
  margin: 0 2px;
  color: var(--accent);
}
.bv-rotate-gizmo {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--sf40);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 10px;
  padding: 6px 8px;
  backdrop-filter: blur(4px);
}
.rg-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.rg-pad {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 2px;
}
.rg-btn {
  background: var(--sf35);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
}
.rg-btn:hover { background: rgba(var(--accent-rgb),.18); border-color: var(--accent); color: var(--accent); }
.rg-up { grid-column: 2; grid-row: 1; }
.rg-left { grid-column: 1; grid-row: 2; }
.rg-center { grid-column: 2; grid-row: 2; font-size: 14px; }
.rg-right { grid-column: 3; grid-row: 2; }
.rg-down { grid-column: 2; grid-row: 3; }

/* Live Builder canvas overlays on phones, the canvas itself shrinks to
   ~360px wide so the eight stacked toolbar buttons, the centered
   rotation badge, the freeroam button and the mouse-sens slider can no
   longer coexist on a single row. Shrink + reflow them. */
@media (max-width: 720px) {
  .bv-toolbar { gap: 2px; padding: 4px 5px; top: 8px; left: 8px; }
  .bv-tool-btn { width: 26px; height: 26px; font-size: 12px; }
  
  .bv-rotation-indicator {
    top: auto; bottom: 64px;
    font-size: 11px; padding: 4px 9px;
  }
  /* Mouse-sens is useless on touch; hide it. Free-Roam button is also
     useless without a mouse, but leave it so testers on touch laptops
     can still try the mode. */
  .bv-sens-control { display: none !important; }
  .bv-freeroam-btn {
    top: 8px; right: 8px;
    padding: 5px 9px; font-size: 10.5px;
  }
  .bv-freeroam-btn .key-hint { display: none; }
  .bv-armed-info {
    top: auto; bottom: 100px;
    padding: 5px 11px;
  }
  .bv-armed-info .bv-armed-name { font-size: 11px; }
  .bv-armed-info .bv-armed-cost { font-size: 10px; }
  .bv-help-overlay {
    left: 8px; bottom: 8px;
    width: 220px; max-width: 60vw;
    font-size: 10.5px;
  }
  .bv-rotate-gizmo { bottom: 8px; right: 8px; padding: 4px 6px; }
  .rg-pad {
    grid-template-columns: repeat(3, 24px);
    grid-template-rows:    repeat(3, 24px);
  }
}

/* Background panel */
.bv-bg-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.bv-bg-arrow {
  background: var(--sf35);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.bv-bg-arrow:hover { background: rgba(var(--accent-rgb),.18); border-color: var(--accent); color: var(--accent); }
.bv-bg-name {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  color: var(--text);
}
.bv-bg-preview {
  flex: 0 0 auto;
  height: 140px;
  margin: 10px;
  border-radius: 8px;
  background: var(--canvas-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  text-align: center;
}
.bv-bg-empty {
  font-size: 10.5px;
  color: var(--text-dim);
  padding: 10px;
  line-height: 1.5;
}
.bv-bg-empty code {
  background: rgba(0,0,0,.4);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--accent);
}
.bv-bg-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  display: grid;
  gap: 4px;
}
.bv-bg-item {
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.bv-bg-item:hover, .bv-bg-item.active {
  background: rgba(var(--accent-rgb),.12);
  border-color: rgba(var(--accent-rgb),.35);
  color: var(--accent);
}
.bv-bg-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bv-bg-thumb {
  width: 36px; height: 24px;
  border-radius: 4px;
  flex: 0 0 auto;
  border: 1px solid var(--w08);
  background-color: var(--canvas-bg);
}
.bv-bg-itemname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Background image layer behind the canvas, sits like a diorama backdrop,
   bottom of image aligns with the horizon (~platform back edge). Below the
   image, a soft floor gradient gives a sense of ground extending forward. */
.bv-canvas-wrap {
  position: relative;
  background: linear-gradient(180deg, var(--canvas-bg) 0%, var(--canvas-bg) 58%, #1a2138 80%, #0d1120 100%);
}
.bv-bg-fallback {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: center bottom / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
#bv-canvas { position: relative; z-index: 1; }
.bv-canvas-wrap.has-bg-img #bv-canvas { background: transparent !important; }

/* Trackers */
.bv-tracker { padding: 0; }
.bv-instr-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  margin: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bv-instr-list li {
  counter-increment: step;
  position: relative;
  padding: 5px 8px 5px 30px;
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.4;
  border-radius: 6px;
  background: var(--sf41);
  border: 1px solid var(--w04);
}
.bv-instr-list li::before {
  content: counter(step);
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  width: 18px; height: 18px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}
.bv-instr-list li.bv-empty {
  padding: 18px;
  background: transparent;
  border: 1px dashed var(--line);
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
}
.bv-instr-list li.bv-empty::before { display: none; }
/* v296: step reorder / insert controls */
.bv-step-tools { display: flex; flex-direction: column; gap: 2px; margin-left: 6px; flex: 0 0 auto; }
.bv-step-btn { background: var(--w05); border: 1px solid var(--line); color: var(--text-dim); border-radius: 4px; width: 20px; height: 16px; font-size: 9px; line-height: 1; cursor: pointer; padding: 0; }
.bv-step-btn:hover { color: var(--accent); border-color: var(--accent); }
.bv-step-btn.bv-step-ins.active { background: rgba(120,170,230,.35); color: #fff; border-color: rgba(120,170,230,.9); }
.bv-instr-list li.bv-insert-mark { box-shadow: 0 2px 0 0 rgba(120,170,230,.85); }
.bv-instr-step {
  list-style: none;
  display: grid;
  grid-template-columns: 28px 36px 1fr 96px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px !important;
  background: var(--sf42) !important;
  border: 1px solid var(--w06) !important;
}
.bv-instr-step::before { display: none !important; }
.bv-instr-step .bv-step-num {
  width: 28px; height: 28px;
  background: rgba(var(--accent-rgb),.2);
  color: var(--accent);
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.bv-instr-step .bv-step-icon {
  width: 36px; height: 36px;
  border-radius: 5px;
  background: var(--w04);
  border: 1px solid var(--line);
  /* v487: fill the frame; the padded square icon left its green corners
     sticking out inside the rounded border and read as "doesn't fit". */
  object-fit: cover;
  padding: 0;
}
.bv-instr-step .bv-step-info { min-width: 0; }
.bv-instr-step .bv-step-name {
  font-size: 11.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-instr-step .bv-step-mat {
  font-size: 10px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.bv-instr-step .bv-step-snap {
  width: 96px; height: 56px;
  border-radius: 4px;
  background: #0a0c14;
  border: 1px solid var(--line);
  object-fit: cover;
}
.bv-instr-step .bv-step-snap.empty {
  display: grid; place-items: center;
  font-size: 9px; color: var(--text-fade); text-align: center;
}
.bv-actions {
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bv-actions > * { min-width: 96px; }
.bv-action-btn {
  flex: 1;
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.4);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
}
.bv-action-btn:hover { background: rgba(var(--accent-rgb),.22); }

.bv-mat-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
}
.bv-mat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sf41);
  border: 1px solid var(--w04);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
}
.bv-mat-row .mat-ico {
  width: 20px; height: 20px;
  object-fit: contain;
  margin-right: 7px;
  vertical-align: -5px;
  border-radius: 4px;
}
.bv-mat-row .name {
  color: var(--text);
  font-weight: 600;
  letter-spacing: .02em;
}
.bv-mat-row .qty {
  color: var(--accent);
  font-weight: 800;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  letter-spacing: .04em;
}
.bv-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.bv-count {
  background: rgba(0,0,0,.35);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}

@media (max-width: 1100px) {
  .bv-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 60vh auto auto auto;
    grid-template-areas:
      "parts"
      "stage"
      "bg"
      "instr"
      "mat";
  }
}

/* ========== FAQ & Glossary ========== */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t-fast) ease;
}
.faq-item[open] { border-color: rgba(var(--accent-rgb),.4); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  color: var(--text);
  font-size: 14px;
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--accent);
  font-weight: 800;
  transition: transform var(--t-slow) ease;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary strong { color: var(--accent); font-family: 'Barlow Condensed','Poppins',sans-serif; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.faq-item p {
  margin: 0; padding: 0 22px 16px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.65;
}
.faq-item p strong { color: var(--accent); font-weight: 700; }

.gloss-list {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.gloss-entry {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.gloss-entry dt {
  color: var(--accent);
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gloss-entry dd {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}
.gloss-entry dd strong { color: var(--accent); font-weight: 700; }
.gloss-entry.hidden { display: none; }

/* ========== Beginner's Guide ========== */











/* ========== Community Forum ========== */
.forum-shell { max-width: 980px; margin: 0 auto; }
.forum-composer {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.forum-composer-locked {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px;
  line-height: 1.5;
}
.forum-composer-locked strong { color: var(--accent); }
.forum-composer-locked em { color: var(--text); font-style: normal; font-weight: 700; }
.forum-composer-head {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.forum-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-fill), #d6a635);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-weight: 900; font-size: 16px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.forum-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.forum-composer-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.forum-composer-as { font-size: 11.5px; color: var(--text-dim); }
.forum-composer-as strong { color: var(--accent); }
.forum-category-select {
  background: var(--field-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  width: max-content;
  cursor: pointer;
}
.forum-input,
.forum-textarea {
  width: 100%;
  background: var(--field);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.forum-input:focus, .forum-textarea:focus { outline: 0; border-color: var(--accent); }
.forum-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.forum-composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.forum-char-count { font-size: 11px; color: var(--text-fade); font-family: 'JetBrains Mono','Consolas',monospace; }

.forum-filters {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.forum-filter {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.forum-filter:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.4); }
.forum-filter.active { background: rgba(var(--accent-rgb),.18); color: var(--accent); border-color: rgba(var(--accent-rgb),.5); }

.forum-threads { display: flex; flex-direction: column; gap: 10px; }
/* v560: brief highlight when a bell notification jumps you to a post. */
.forum-post-flash { animation: lf-post-flash 2.4s ease-out; }
@keyframes lf-post-flash {
  0%, 15% { box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.10); }
  100% { box-shadow: none; }
}
.forum-thread {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; gap: 12px;
  transition: border-color var(--t-fast) ease;
}
.forum-thread:hover { border-color: rgba(var(--accent-rgb),.3); }
.forum-thread.is-mine {  }
.forum-thread .forum-avatar { width: 44px; height: 44px; font-size: 17px; }
.forum-thread-body { flex: 1; min-width: 0; }
.forum-thread-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-dim);
  margin-bottom: 4px;
}
.forum-thread-meta .ftm-user {
  color: var(--accent);
  font-weight: 800;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 13px;
}
.forum-thread-meta .ftm-cat {
  background: rgba(255,212,41,.15);
  color: var(--accent);
  border: 1px solid rgba(255,212,41,.35);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}
.forum-thread-meta .ftm-time { color: var(--text-fade); }
.forum-thread-meta .ftm-mine {
  background: rgba(80,180,90,.15);
  color: var(--ink-good);
  border: 1px solid rgba(110,220,140,.4);
  padding: 1px 6px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
}
.forum-thread-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 5px;
}
.forum-thread-text {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.forum-thread-text a { color: var(--accent); text-decoration: underline; }
/* v158: @mentions render as a tinted, non-underlined link inside
   post + reply bodies. Slightly heavier weight so it pops against
   regular body text. */
.forum-thread-text a.forum-mention,
.forum-reply-text a.forum-mention {
  color: #6bb4ff;
  background: rgba(107, 180, 255, 0.10);
  border: 1px solid rgba(107, 180, 255, 0.30);
  border-radius: 4px;
  padding: 0 5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
  white-space: nowrap;
}
.forum-thread-text a.forum-mention:hover,
.forum-reply-text a.forum-mention:hover {
  background: rgba(107, 180, 255, 0.22);
  border-color: rgba(107, 180, 255, 0.55);
  text-decoration: none;
}

/* v866: #PageTag renders as a button to that page. Same chip shape as an
   @mention so the two read as a family, in the site accent rather than the
   mention blue, with an arrow that only appears on hover so a sentence full
   of tags does not turn into a row of arrows. */
.forum-thread-text a.forum-pagetag,
.forum-reply-text a.forum-pagetag {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent);
  background: var(--accent-soft, rgba(var(--accent-rgb),.10));
  border: 1px solid rgba(var(--accent-rgb),.34);
  border-radius: 999px;
  padding: 1px 10px 1px 8px;
  font-weight: 700;
  font-size: .95em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.forum-thread-text a.forum-pagetag:hover,
.forum-reply-text a.forum-pagetag:hover {
  background: rgba(var(--accent-rgb),.2);
  border-color: rgba(var(--accent-rgb),.6);
  text-decoration: none;
}
.forum-pagetag-h { opacity: .6; font-weight: 800; }
.forum-thread-text a.forum-pagetag::after,
.forum-reply-text a.forum-pagetag::after {
  content: '\2192'; opacity: 0; margin-left: -2px;
  transition: opacity var(--t-fast) ease;
}
.forum-thread-text a.forum-pagetag:hover::after,
.forum-reply-text a.forum-pagetag:hover::after { opacity: .75; }
:root[data-theme="light"] .forum-thread-text a.forum-pagetag,
:root[data-theme="light"] .forum-reply-text a.forum-pagetag { color: #7a5c00; }

/* The page picker is the mention dropdown with a wider minimum, because a
   page label runs longer than a username. */
.lf-pagetag-dropdown .lf-mention-item-at { color: var(--accent); }

/* ===== v168: @mention autocomplete dropdown ===== */
.lf-mention-dropdown {
  position: absolute;
  z-index: 100110;
  min-width: 180px; max-width: 280px;
  max-height: 232px; overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  padding: 4px;
}
.lf-mention-dropdown[hidden] { display: none !important; }
.lf-mention-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px; color: var(--text);
}
.lf-mention-item:hover,
.lf-mention-item.is-active {
  background: rgba(107, 180, 255, 0.16);
}
.lf-mention-item-at {
  color: #6bb4ff; font-weight: 700;
}
.lf-mention-item-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lf-mention-empty {
  padding: 9px 10px; font-size: 12px; color: var(--text-fade);
}
.forum-thread-actions {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 11px; color: var(--text-fade);
}
.forum-thread-actions a {
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
}
.forum-thread-actions a:hover { color: var(--accent); }
.forum-thread-actions a.danger:hover { color: var(--ink-bad); }

/* Forum role badges */
.ftm-role {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ftm-role.role-owner {
  background: linear-gradient(90deg, rgba(255,212,41,.22), rgba(255,158,200,.22));
  color: #ffd24a;
  border: 1px solid rgba(255,212,41,.55);
}
.ftm-role.role-mod {
  background: rgba(108,229,138,.16);
  color: var(--ink-good-2);
  border: 1px solid rgba(108,229,138,.45);
}
.ftm-role.role-creator {
  background: rgba(106,183,255,.16);
  color: #6ab7ff;
  border: 1px solid rgba(106,183,255,.5);
}
.ftm-role.role-supporter {
  background: rgba(255,158,200,.18);
  color: var(--supporter);
  border: 1px solid rgba(255,158,200,.55);
}
/* v258: Founder + Hot Streak forum badges */
.ftm-role.role-founder {
  background: rgba(255,212,41,.16);
  color: #ffd429;
  border: 1px solid rgba(255,212,41,.55);
}
.ftm-role.role-streak {
  background: rgba(255,122,48,.16);
  color: #ff8a3d;
  border: 1px solid rgba(255,122,48,.55);
}

/* Author name color by role (applied to .ftm-user / .ftm-user-link) */
.ftm-user.role-owner-name     { color: #ffd24a; font-weight: 800; }
.ftm-user.role-mod-name       { color: var(--ink-good-2); font-weight: 800; }
.ftm-user.role-creator-name   { color: #6ab7ff; font-weight: 800; }
.ftm-user.role-supporter-name { color: var(--supporter); font-weight: 800; }
.ftm-user.role-default-name   { color: #f0f3fa; font-weight: 700; }
.ftm-user-link:hover { text-decoration: underline; }

/* Verified content-creator checkmark */
.ftm-verified {
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #6ab7ff;
  /* Inline SVG check, centered geometrically, the older ✓ glyph sat low
     inside the circle because Unicode checkmark heights vary by font. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.6 12 13 5' fill='none' stroke='%230a1224' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  box-shadow: 0 0 0 1.5px rgba(106,183,255,.35);
  font-size: 0; /* hide any legacy ✓ text */
  color: transparent;
}

/* ===== Forum category filter tints ===== */
.forum-filter.ff-chat.active     { background: rgba(var(--accent-rgb),.18); color: var(--accent); border-color: rgba(var(--accent-rgb),.55); }
.forum-filter.ff-builds.active   { background: rgba(106,183,255,.14); color: #6ab7ff; border-color: rgba(106,183,255,.5); }
.forum-filter.ff-group.active    { background: rgba(108,229,138,.14); color: var(--ink-good-2); border-color: rgba(108,229,138,.5); }
.forum-filter.ff-bugs.active     { background: rgba(255,90,90,.14);   color: #ff7878; border-color: rgba(255,90,90,.5); }
.forum-filter.ff-feedback.active { background: rgba(168,85,247,.14);  color: #c084fc; border-color: rgba(168,85,247,.5); }
.forum-filter.ff-tips.active      { background: rgba(45,212,191,.16);  color: #2dd4bf; border-color: rgba(45,212,191,.5); }
.forum-filter.ff-bricklife.active { background: rgba(255,159,67,.16);  color: #ff9f43; border-color: rgba(255,159,67,.5); }
.forum-filter.ff-tips:hover       { color: #2dd4bf; border-color: rgba(45,212,191,.4); }
.forum-filter.ff-bricklife:hover  { color: #ff9f43; border-color: rgba(255,159,67,.4); }
.forum-filter.ff-livebuilder.active { background: rgba(106,183,255,.16); color: #6ab7ff; border-color: rgba(106,183,255,.5); }
.forum-filter.ff-livebuilder:hover  { color: #6ab7ff; border-color: rgba(106,183,255,.4); }
.forum-filter.ff-showoff.active  { background: rgba(255,102,196,.16); color: #ff7ec4; border-color: rgba(255,102,196,.55); }
/* Staff-authored "Update Blog Posts", distinct gold-bordered chip so the
   official feed reads visually different from the player-driven categories. */
.forum-filter.ff-blog {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),.04));
  color: var(--ink-warm);
  border-color: rgba(var(--accent-rgb),.55);
}
.forum-filter.ff-blog.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.32), rgba(var(--accent-rgb),.18));
  color: var(--accent-ink);
  border-color: rgba(var(--accent-rgb),.85);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.4);
}
.forum-filter.ff-chat:hover     { color: var(--accent); border-color: rgba(var(--accent-rgb),.4); }
.forum-filter.ff-builds:hover   { color: #6ab7ff; border-color: rgba(106,183,255,.4); }
.forum-filter.ff-group:hover    { color: var(--ink-good-2); border-color: rgba(108,229,138,.4); }
.forum-filter.ff-bugs:hover     { color: #ff7878; border-color: rgba(255,90,90,.4); }
.forum-filter.ff-feedback:hover { color: #c084fc; border-color: rgba(168,85,247,.4); }
.forum-filter.ff-showoff:hover  { color: #ff7ec4; border-color: rgba(255,102,196,.4); }
.forum-filter.ff-blog:hover     { color: #fff; border-color: rgba(var(--accent-rgb),.7); background: linear-gradient(180deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.08)); }
/* Category pill that appears on a thread tile when category === blog */

/* A small "staff-only posting" notice that shows above the threads when the
   user filters to the Update Blog Posts category. */
.forum-blog-notice {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-rgb),.04));
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 10px;
  color: var(--ink-warm);
  font-size: 12.5px;
  line-height: 1.5;
}
.forum-blog-notice strong { color: var(--accent); }
/* 🔔 Website Updates, owner-only announcement channel (teal chip). */
.forum-filter.ff-updates {
  background: linear-gradient(180deg, rgba(45,212,191,.10), rgba(45,212,191,.04));
  color: #8ef0e2;
  border-color: rgba(45,212,191,.55);
}
.forum-filter.ff-updates.active {
  background: linear-gradient(180deg, rgba(45,212,191,.30), rgba(45,212,191,.16));
  color: #06231f;
  border-color: rgba(45,212,191,.85);
  box-shadow: 0 0 0 1px rgba(45,212,191,.4);
}
.forum-filter.ff-updates:hover { color: #fff; border-color: rgba(45,212,191,.7); background: linear-gradient(180deg, rgba(45,212,191,.18), rgba(45,212,191,.08)); }

.ftm-cat.cat-updates { color: #2dd4bf; }

/* Category pill on each post tinted by category */
.ftm-cat.cat-chat     { color: #ffd24a; }
.ftm-cat.cat-builds   { color: #6ab7ff; }
.ftm-cat.cat-group    { color: var(--ink-good-2); }
.ftm-cat.cat-bugs     { color: #ff7878; }
.ftm-cat.cat-feedback { color: #c084fc; }
.ftm-cat.cat-showoff  { color: #ff7ec4; }

/* Pinned post styling */
.forum-thread.is-pinned {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.08), transparent 30%);
}
.ftm-pinned {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.55);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.forum-pin-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}
.forum-pin-btn:hover { color: var(--accent); }
.forum-pin-btn.is-active { color: var(--accent); }

/* Edit link, anyone can edit their own post; staff can edit any post */
.forum-edit-link { color: var(--ink-good-2) !important; }
.forum-edit-link:hover { color: #8fffae !important; }

/* Staff-only Move-to-Category select. Sits inline with the other actions. */
.forum-move-ctl { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.forum-move-select {
  background: var(--sf35);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  font: 600 11px/1.2 'Inter','Barlow Condensed',sans-serif;
  cursor: pointer;
}
.forum-move-select:hover { border-color: rgba(var(--accent-rgb),.4); }
.forum-move-select:focus { outline: 0; border-color: var(--accent); }

/* Inline editor for editing your own posts */
.forum-edit-title, .forum-edit-body {
  width: 100%;
  background: rgba(0,0,0,.4);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  margin-bottom: 6px;
  resize: vertical;
}
.forum-edit-title { font-size: 15px; font-weight: 700; }
.forum-edit-title:focus, .forum-edit-body:focus { outline: 0; border-color: var(--accent); }
.forum-edit-actions { display: flex; gap: 8px; margin: 4px 0 8px; }
.bv-action-btn-ghost {
  background: transparent !important;
  color: var(--text-dim) !important;
  border-color: var(--line) !important;
}
.bv-action-btn-ghost:hover { color: var(--text) !important; border-color: rgba(var(--accent-rgb),.4) !important; }

/* Like / Dislike buttons on forum posts */
.forum-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sf43);
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  margin-right: 4px;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.forum-vote-btn:hover { background: var(--sf44); border-color: var(--w15); color: var(--text); }
.forum-vote-btn:active { transform: scale(.96); }
.forum-vote-btn .forum-vote-ico { font-size: 12px; line-height: 1; }
.forum-vote-btn-sm {
  padding: 2px 7px;
  font-size: 11.5px;
  border-radius: 5px;
}
.forum-vote-btn-sm .forum-vote-ico { font-size: 10.5px; }
.forum-reply-actions {
  display: flex; gap: 6px; align-items: center;
  margin-top: 6px;
}
/* Reply composer is now a textarea, let it grow but keep it compact. */
.forum-reply-form textarea {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--sf22);
  color: var(--text);
}
.forum-reply-form textarea:focus { outline: 0; border-color: var(--accent); }
.forum-vote-btn .forum-vote-count { min-width: 10px; text-align: center; }
.forum-like-btn.is-active {
  background: rgba(108,229,138,.18);
  border-color: rgba(108,229,138,.55);
  color: var(--ink-good-2);
}
.forum-like-btn.is-active:hover { background: rgba(108,229,138,.26); }
.forum-dislike-btn.is-active {
  background: rgba(255,107,107,.18);
  border-color: rgba(255,107,107,.55);
  color: #ff7c7c;
}
.forum-dislike-btn.is-active:hover { background: rgba(255,107,107,.26); }

/* Owner admin panel */
.forum-admin-panel {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.08) 0%, var(--sf26) 100%);
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.forum-admin-head {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.forum-admin-row {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.forum-admin-label {
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.forum-admin-row input {
  flex: 1; min-width: 200px;
  padding: 7px 10px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}
.forum-admin-row input:focus { outline: none; border-color: var(--accent); }
.forum-admin-btn {
  padding: 7px 14px;
  background: rgba(var(--accent-rgb),.18);
  border: 1px solid rgba(var(--accent-rgb),.55);
  color: var(--accent);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
}
.forum-admin-btn:hover { background: rgba(var(--accent-rgb),.32); }
.acct-rolefilters { flex-wrap: wrap; gap: 6px; }
.acct-rolefilter { font-size: 11.5px; padding: 5px 12px; }
.acct-rolefilter.active { background: rgba(var(--accent-rgb),.32); color: var(--accent-ink); border-color: rgba(var(--accent-rgb),.7); font-weight: 800; }
.forum-admin-hint {
  font-size: 11px;
  color: var(--text-fade);
  margin-top: 2px;
}
.forum-mod-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.forum-mod-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px;
  background: rgba(108,229,138,.14);
  border: 1px solid rgba(108,229,138,.4);
  color: var(--ink-good-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.forum-mod-chip button {
  background: transparent;
  border: 0;
  color: var(--ink-good-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.forum-mod-chip button:hover { color: var(--ink-bad); }

/* ===== Owner Account Admin panel (LF_SB_ACCOUNTS) ===== */
.lf-acct-section {
  margin-top: 14px;
  border-top: 1px dashed rgba(var(--accent-rgb),.22);
  padding-top: 12px;
}
.lf-acct-head {
  align-items: center !important;
  gap: 10px;
  flex-wrap: wrap;
}
.lf-acct-head input[type="search"] {
  flex: 1 1 200px; min-width: 0;
  background: var(--sf7);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12.5px;
}
.lf-acct-head input[type="search"]:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb),.55);
}
.acct-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 460px; overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: var(--sf45);
  margin-top: 8px;
}
.acct-row {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 10px;
  background: var(--sf46);
  border: 1px solid var(--w04);
  border-radius: 6px;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.acct-row:hover { background: var(--sf47); border-color: var(--w08); }
.acct-row.is-banned {
  background: var(--sf48);
  border-color: rgba(255,80,80,.32);
}
.acct-row.is-banned:hover { background: var(--sf49); }
.acct-cell-name { flex: 1; min-width: 0; line-height: 1.3; }
.acct-cell-name strong {
  color: var(--text); font-size: 13px;
  font-weight: 700;
}
.acct-row.is-banned .acct-cell-name strong { color: #ffb0b0; }
.acct-meta {
  font-size: 10.5px;
  color: var(--text-mute);
  margin-top: 2px;
  letter-spacing: .01em;
}
.acct-tag {
  display: inline-block;
  padding: 1px 7px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; margin-left: 4px;
  vertical-align: middle;
  line-height: 1.5;
}
.acct-tag.tag-owner     { background: rgba(255,212,41,.2);  color: var(--accent); border: 1px solid rgba(255,212,41,.4); }
.acct-tag.tag-mod       { background: rgba(108,229,138,.16); color: var(--ink-good-2); border: 1px solid rgba(108,229,138,.4); }
.acct-tag.tag-creator   { background: rgba(106,183,255,.16); color: #6ab7ff; border: 1px solid rgba(106,183,255,.45); }
.acct-tag.tag-supporter { background: rgba(255,158,200,.16); color: var(--supporter); border: 1px solid rgba(255,158,200,.45); }
.acct-tag.tag-ban       { background: rgba(255,90,90,.18);   color: #ff7878; border: 1px solid rgba(255,90,90,.4); }
.acct-btn.acct-btn-creator { background: rgba(106,183,255,.18); border-color: rgba(106,183,255,.45); color: #6ab7ff; }
.acct-btn.acct-btn-creator:hover { background: rgba(106,183,255,.28); }
.acct-cell-actions { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.acct-btn {
  background: var(--sf50); color: var(--text);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 9px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.acct-btn:hover { background: var(--sf51); border-color: var(--w15); }
.acct-btn.acct-btn-warn   { background: rgba(180,120,40,.4); border-color: rgba(var(--accent-rgb),.45); color: var(--accent); }
.acct-btn.acct-btn-warn:hover  { background: rgba(200,140,50,.55); }
.acct-btn.acct-btn-danger { background: var(--sf52);  border-color: rgba(255,80,80,.4);  color: #ffb0b0; }
.acct-btn.acct-btn-danger:hover { background: var(--sf53); }
@media (max-width: 600px) {
  .acct-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .acct-cell-actions { justify-content: flex-start; }
}

/* v815: "Not signed in" was wrapping onto three lines inside a 61px pill.
   The pill is an inline-flex in a flex header, so it was being squeezed to
   its smallest word rather than keeping its content on one line. */
#forum-role-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sf46);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
}
#forum-role-pill .frp-name { color: var(--text); }
#forum-role-pill .frp-divider { color: var(--text-fade); }
#forum-role-pill .frp-role-owner {
  color: var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.22), rgba(255,158,200,.22));
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),.55);
}
#forum-role-pill .frp-role-moderator {
  color: var(--ink-good-2);
  background: rgba(108,229,138,.16);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(108,229,138,.45);
}
#forum-role-pill .frp-role-member { color: var(--text-dim); }
#forum-role-pill .frp-role-not-signed-in { color: #ff9a9a; }

/* ============ Supabase connection + auth panel ============ */
.sb-conn-wrap {
  max-width: 760px; margin: 0 auto 16px;
  background: var(--sf46);
  border: 1px solid rgba(108,229,138,.35);
  border-radius: 10px;
  padding: 14px 18px;
}
.sb-status { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.sb-status.sb-status-loading { color: var(--text-dim); }
.sb-status.sb-status-out strong { color: var(--ink-good-2); }
.sb-status.sb-status-in strong { color: var(--ink-good-2); margin-right: 6px; }

.sb-role {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: 4px;
}
.sb-role-owner {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.22), rgba(255,158,200,.22));
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.55);
}
.sb-role-mod { background: rgba(108,229,138,.16); color: var(--ink-good-2); border: 1px solid rgba(108,229,138,.45); }
.sb-role-member { background: rgba(150,150,200,.12); color: var(--text-dim); border: 1px solid rgba(150,150,200,.3); }

.sb-auth-tab {
  padding: 6px 14px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px; cursor: pointer;
}
.sb-auth-tab.active {
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.55);
}



.sb-auth-btn {
  padding: 8px 16px;
  background: rgba(108,229,138,.18);
  border: 1px solid rgba(108,229,138,.55);
  color: var(--ink-good-2);
  font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px; cursor: pointer;
}
.sb-auth-btn:hover { background: rgba(108,229,138,.32); }


.sb-auth-msg { width: 100%; font-size: 12px; color: var(--text-dim); min-height: 16px; }
.sb-auth-msg.success { color: var(--ink-good-2); }
.sb-auth-msg.error { color: #ff9a9a; }
.forum-mod-empty {
  font-size: 11.5px;
  color: var(--text-fade);
  font-style: italic;
}




/* Replies */
.forum-replies {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--w08);
  display: flex; flex-direction: column; gap: 8px;
}
.forum-reply {
  display: flex; gap: 9px;
  background: rgba(0,0,0,.18);
  border-radius: 6px;
  padding: 9px 11px;
}
.forum-reply .forum-avatar { width: 28px; height: 28px; font-size: 12px; }
.forum-reply-body { flex: 1; min-width: 0; }
.forum-reply-meta { font-size: 10.5px; color: var(--text-fade); margin-bottom: 2px; }
.forum-reply-meta .ftm-user { font-size: 11.5px; }
.forum-reply-text { font-size: 12px; color: var(--text); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
/* Reply-to-person pieces ---------------------------------------------
   • .forum-reply-target, the small "↪ replying to @user" line that
     appears at the TOP of any reply that targeted a specific other reply.
   • .forum-reply-target-chip, the dismissable chip ABOVE the textarea
     while you're composing a targeted reply.
   • .forum-reply-highlight, pulse applied to a reply when its @-mention
     anchor is clicked, so you can see exactly where you landed. */
.forum-reply-target {
  font-size: 11px; color: var(--text-fade);
  margin: 0 0 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.forum-reply-target a {
  color: var(--accent); text-decoration: none;
  background: rgba(var(--accent-rgb),.10); border: 1px solid rgba(var(--accent-rgb),.30);
  padding: 1px 7px; border-radius: 999px; font-weight: 700;
}
.forum-reply-target a:hover { background: rgba(var(--accent-rgb),.20); }
.forum-reply-target-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--accent-rgb),.10); border: 1px solid rgba(var(--accent-rgb),.40);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-size: 11.5px; color: var(--accent);
  margin: 6px 0 4px;
}
.forum-reply-target-chip strong { color: var(--accent); }
.forum-reply-target-x {
  background: none; border: 0; color: var(--accent);
  font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 4px; opacity: .8;
}
.forum-reply-target-x:hover { opacity: 1; color: #fff; }
.forum-reply-action { color: var(--accent); cursor: pointer; }
.forum-reply-action:hover { text-decoration: underline; }
.forum-reply-highlight {
  background: rgba(var(--accent-rgb),.10) !important;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.50);
  transition: background var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.forum-reply-form { display: flex; gap: 6px; margin-top: 6px; }
.forum-reply-form input { flex: 1; padding: 5px 9px; font-size: 12px; }
.forum-reply-form button {
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.4);
  border-radius: 5px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

/* ========== Resource Finder ========== */
.rf-search-row { max-width: 720px; margin: 0 auto 14px; }
.rf-search {
  width: 100%;
  background: rgba(0,0,0,.4);
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  letter-spacing: .01em;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.rf-search:focus {
  outline: 0;
  border-color: var(--accent);
  background: rgba(0,0,0,.55);
}
.rf-quick {
  max-width: 1080px;
  margin: 0 auto 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.rf-quick-label {
  font-size: 11px;
  color: var(--text-fade);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  margin-right: 4px;
}
.rf-quick-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  transition: all var(--t-fast) ease;
}
.rf-quick-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.4); }
.rf-quick-btn.active { background: rgba(var(--accent-rgb),.18); color: var(--accent); border-color: rgba(var(--accent-rgb),.5); }
.rf-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
}
.rf-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.rf-card-img {
  width: 56px; height: 56px; flex: 0 0 auto;
  background: rgba(0,0,0,.3) center / contain no-repeat;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.rf-card-body { flex: 1; min-width: 0; }
.rf-card-name {
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.rf-card-where {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.45;
}
.rf-card-where .rf-tag {
  display: inline-block;
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.3);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-right: 4px;
  margin-top: 4px;
}
.rf-card-notes {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.5;
  font-style: italic;
}
.rf-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  padding: 30px;
  font-style: italic;
}

/* ========== Comparison tool ========== */
.cmp-tab-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.15), rgba(var(--accent-rgb),.05));
  border-color: rgba(var(--accent-rgb),.4);
  color: var(--accent);
}
.cmp-mode {
  display: flex; gap: 6px;
  margin: 6px 0 16px;
  justify-content: center;
}
.cmp-mode-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.cmp-mode-btn.active {
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.5);
}
.cmp-slots {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
  max-width: 880px;
  margin-left: auto; margin-right: auto;
}
/* Custom Build mode swaps in a 5-column layout: resources-A | weapon-A | VS |
   weapon-B | resources-B. Each side column holds TWO pickers (Resource Slot 1
   + Resource Slot 2) as their own bordered cards laid out side-by-side, so
   the whole row reads:
     [Slot1A][Slot2A]  [CardA]  VS  [CardB]  [Slot2B][Slot1B]
   The stats panel drops underneath the center weapon cards on row 2.
   Widths are FIXED (not minmax) so the side panels can't collapse when the
   center cards' content claims more horizontal room. */
.cmp-slots.cmp-slots--custom {
  /* v560: resource columns are now 1fr so they GROW to absorb the wide-screen
     whitespace (1440p) instead of leaving a big empty center. The weapon cards
     stay a fixed width and the VS column is clamped small so the cards sit close
     together with the stats spanning underneath them. */
  /* v721: the minimums came to 1130px before gaps, so on anything under about
     1200 the right-hand resource column hung off the edge. Trimmed so the row
     fits a 1024 content area, which is what a 1280 window actually gives you. */
  grid-template-columns:
    minmax(240px, 1fr)   /* resources A (Slot 1 + Slot 2) */
    minmax(196px, 240px) /* weapon card A */
    minmax(38px, 60px)   /* VS */
    minmax(196px, 240px) /* weapon card B */
    minmax(240px, 1fr);  /* resources B */
  max-width: 1560px;
  margin-left: auto; margin-right: auto;
  width: 100%;
  align-items: start;
  gap: 16px;
  overflow-x: auto;   /* v536: never clip the side resource panels off-screen -- scroll if the row is wider than the viewport */
  overflow-y: visible;
  padding-bottom: 6px;
}
/* In normal (Weapons / Tools) mode the stats live just below the slots
   spanning all 3 columns. In Custom Build we span only columns 2-4 so
   the bars sit underneath the two weapon cards, between the side
   resource panels. */
.cmp-slots .cmp-stats {
  grid-column: 1 / -1;
  margin: 6px 0 0;
}
.cmp-slots.cmp-slots--custom .cmp-stats {
  grid-column: 2 / 5;       /* covers Weapon A | VS | Weapon B */
  grid-row: 2;
  align-self: start;
  max-width: 100%;          /* v560: fill the space under the two cards */
  margin-left: auto; margin-right: auto;
}
/* Anchor the two weapon slots + VS to row 1 explicitly so the stats are
   guaranteed to land on row 2 underneath them. The .cmp-slot tracks are
   clamped at 220px, min-width:0 lets their card content wrap inside that
   track instead of pushing the side resource cols smaller. */
.cmp-slots.cmp-slots--custom > .cmp-slot,
.cmp-slots.cmp-slots--custom > .cmp-vs { grid-row: 1; }
.cmp-slots.cmp-slots--custom > .cmp-slot { min-width: 0; }
.cmp-slots.cmp-slots--custom > .cmp-slot * { min-width: 0; }
.cmp-slots.cmp-slots--custom > .cmp-resources-col { grid-row: 1 / span 2; }
/* Side panel: 2-column container (Slot 1 + Slot 2 picker each get
   their own bordered card). The wrapper itself is invisible scaffolding. */
/* v721: the two pickers now sit one ABOVE the other rather than side by side.
   Side by side, each picker got half of a 300px column, so each tile was 61px
   wide and 124px tall: a label like "Legendary Honed Dragon Opal" broke into
   five lines and the tile became a column of syllables. Stacked, each picker
   owns the full column and a tile is over twice as wide, which is the whole
   difference between a readable name and a word search. */
.cmp-resources-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}
.cmp-resources-col[hidden] { display: none; }
/* Each individual picker (Slot 1 / Slot 2) is its own card. */
.cmp-resources-col .cmp-picker {
  background: var(--sf54);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 7px 8px;
  min-width: 0;
}
/* v560: with the side columns now growing to fill the page, the tiles get a
   readable 2-up grid, larger icons and a proper label size (no more char-by-char
   wrapping). */
/* Tiles size themselves to the room available instead of always being halves,
   so a wide screen gets three or four across and a narrow one gets two. */
.cmp-resources-col .cmp-resource-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 7px;
}
/* Stacking makes each picker taller than the pair used to be, so each one
   scrolls inside itself. The column ends up about the height it was, and the
   stats panel underneath does not get pushed down the page. */
.cmp-resources-col .cmp-picker > .cmp-resource-grid {
  max-height: 296px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.cmp-resources-col .cmp-resource-tile {
  padding: 8px 6px 7px;
  min-height: 80px;
  min-width: 0;
  gap: 4px;
}
.cmp-resources-col .cmp-resource-img,
.cmp-resources-col .cmp-resource-none .cmp-resource-x {
  width: 34px; height: 34px;
}
.cmp-resources-col .cmp-resource-none .cmp-resource-x { font-size: 20px; }
/* With a tile twice as wide, names break between words again. anywhere was
   only ever there to stop a long word bursting a 61px tile. */
.cmp-resources-col .cmp-resource-label { font-size: 11px; line-height: 1.3; word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.cmp-resources-col .cmp-resource-head { font-size: 11px; margin-bottom: 6px; text-align: center; }
/* v263: Lightsaber sides have only a few tiles (Rarity 3 + Handle 7 + Runes),
   so the default 2-up side layout left the pickers tall and skinny and dropped
   a big empty gap between the short saber cards and the stats. For sabers,
   stack the three pickers full-width and use a tighter 4-up tile grid so the
   column height ~= card + stats (no gap). Regular weapons keep the 2-up side. */
.cmp-resources-col.is-saber { grid-template-columns: 1fr; }
.cmp-resources-col.is-saber .cmp-picker[data-build="rune"] { grid-column: 1 / -1; }
.cmp-resources-col.is-saber .cmp-resource-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cmp-resources-col.is-saber .cmp-resource-tile { min-height: 54px; }
.cmp-resources-col.is-saber .cmp-resource-img,
.cmp-resources-col.is-saber .cmp-resource-none .cmp-resource-x { width: 20px; height: 20px; }
.cmp-resources-col.is-saber .cmp-resource-label { font-size: 8px; }

/* When the Compare tab is active, let it grow past the 920px the rest
   of the cat-sections share. The custom-build row needs ~1240px at
   desktop, so cap at 1320px (with a small inset) for breathing room. */
#page-weapons .tab-pane[data-tab="compare"] .cat-section.panel {
  max-width: min(1580px, calc(100vw - 32px));
}
#page-weapons .tab-pane[data-tab="compare"] .cmp-stats {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1300px) {
  /* Below ~1300 the 5-col layout no longer fits horizontally, collapse
     the side pickers under their own slot so everything stays readable.
     v562 MOBILE FIX: the desktop rules pin the cards/VS to grid-row 1 and
     the resource columns to rows 1-2. With a single 1fr column those pins
     forced every child onto row 1, so the browser spawned squeezed implicit
     side columns (the unusable "sliver" layout on phones). Reset every
     explicit row/column pin here so the children stack, then use order to
     read: weapon A, A's resources, VS, weapon B, B's resources, stats. */
  .cmp-slots.cmp-slots--custom {
    grid-template-columns: 1fr;
    max-width: 560px;
    overflow-x: visible;
  }
  .cmp-slots.cmp-slots--custom > .cmp-slot,
  .cmp-slots.cmp-slots--custom > .cmp-vs,
  .cmp-slots.cmp-slots--custom > .cmp-resources-col,
  .cmp-slots.cmp-slots--custom > .cmp-stats {
    grid-row: auto;
    grid-column: 1;
  }
  .cmp-slots.cmp-slots--custom > * { max-width: 520px; width: 100%; margin-left: auto; margin-right: auto; min-width: 0; }
  .cmp-slots.cmp-slots--custom > .cmp-slot[data-slot="A"] { order: 1; }
  .cmp-slots.cmp-slots--custom > .cmp-resources-a { order: 2; }
  .cmp-slots.cmp-slots--custom > .cmp-vs { order: 3; padding: 6px 0; text-align: center; }
  .cmp-slots.cmp-slots--custom > .cmp-slot[data-slot="B"] { order: 4; }
  .cmp-slots.cmp-slots--custom > .cmp-resources-b { order: 5; }
  .cmp-slots.cmp-slots--custom > .cmp-stats { order: 6; }
}

/* v190: phone polish for the Compare feature, keep the side-by-side
   comparison fully on-screen and give every control a real tap target. */
@media (max-width: 560px) {
  /* The whole Compare pane must never cause sideways scrolling. */
  #page-weapons .tab-pane[data-tab="compare"] { overflow-x: hidden; }
  #page-weapons .tab-pane[data-tab="compare"] .cat-section.panel {
    max-width: calc(100vw - 20px);
    padding-left: 10px; padding-right: 10px;
  }
  /* Weapons / Tools mode: Slot A | VS | Slot B stays a row, just tighter,
     and the cards shrink instead of overflowing. */
  .cmp-slots { gap: 6px; }
  .cmp-card { padding: 8px; min-height: 118px; min-width: 0; }
  .cmp-card img { max-width: 64px; height: auto; }
  .cmp-card .cmp-name { font-size: 12px; }
  .cmp-card .cmp-type { font-size: 9.5px; }
  .cmp-vs { font-size: 12px; padding: 2px; }
  /* Custom Build side panel: stack the two resource pickers vertically so
     each gets full width instead of being squeezed two-up on a phone. */
  .cmp-resources-col { grid-template-columns: 1fr; }
  .cmp-resources-col .cmp-resource-grid { grid-template-columns: repeat(3, 1fr); }
  .cmp-resources-col .cmp-resource-label { font-size: 10px; }
  /* v562: the 4 mode pills are a no-wrap centered row on desktop; on a phone
     they overflowed and clipped at both edges. Wrap into a tidy 2x2. */
  .cmp-mode { flex-wrap: wrap; gap: 8px; }
  .cmp-mode-btn { flex: 1 1 40%; min-height: 44px; padding: 8px 6px; font-size: 10.5px; }
  .cmp-resource-tile { min-height: 58px; }
  #page-weapons .tab-pane[data-tab="compare"] select { min-height: 44px; font-size: 15px; }
  .cmp-rune-tile { min-height: 62px; }
}

/* v190: site-wide touch-target floor. On touch devices (no hover, coarse
   pointer) small inline action links + chips get a roomier tap zone so
   they're not a 1-pixel-tall target. */
@media (hover: none) and (pointer: coarse) {
  .forum-thread-actions a,
  .forum-move-select,
  .lf-react-btn,
  .forum-edit-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
}
.cmp-slot {
  display: flex; flex-direction: column;
  gap: 8px;
}
.cmp-slot-label {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
.cmp-select {
  width: 100%;
  background: var(--field-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.cmp-select:focus { outline: 0; border-color: var(--accent); }
.cmp-builder { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cmp-builder[hidden] { display: none; }
.cmp-build-input {
  width: 100%;
  background: var(--field-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
}
.cmp-build-input:focus { outline: 0; border-color: var(--accent); }
/* ===== Custom resource picker (image dropdown) ===== */
.cmp-picker { position: relative; width: 100%; }


















/* ===== Resource effects breakdown next to stats ===== */
.cmp-resource-info {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(var(--accent-rgb),.05);
  border: 1px solid rgba(var(--accent-rgb),.3);
  
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.cmp-resource-info[hidden] { display: none; }






/* ===== Runes & Relics explainer panel ===== */
.cmp-guide {
  margin-top: 16px; padding: 14px 16px;
  background: rgba(var(--accent-rgb),.05);
  border: 1px solid rgba(var(--accent-rgb),.28);
  
  border-radius: 8px;
}
.cmp-guide-head {
  font-weight: 800; color: var(--accent);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.cmp-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px){ .cmp-guide-grid { grid-template-columns: 1fr; } }
.cmp-guide-col p { margin: 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.cmp-guide-sub { font-weight: 700; color: var(--text); font-size: 13px; margin-bottom: 4px; }
.cmp-guide-src { font-weight: 500; color: var(--text-mute); font-size: 11px; }
.cmp-guide-list { margin: 4px 0 0; padding-left: 16px; }
.cmp-guide-list li { font-size: 12.5px; line-height: 1.6; color: var(--text); }
.cmp-guide-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.32);
  border-radius: 8px;
  font-size: 12px; line-height: 1.5;
  color: var(--text);
}
.cmp-guide-elem li { list-style: none; margin-left: -12px; }
.cmp-guide .rarity-pill { font-size: 10px; padding: 1px 5px; }
.cmp-card {
  flex: 1;
  background: linear-gradient(135deg, var(--sf33), var(--sf7));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 160px;
  text-align: center;
}
.cmp-card.empty { color: var(--text-dim); font-style: italic; justify-content: center; }
.cmp-card img {
  width: 88px; height: 88px;
  object-fit: contain;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  padding: 6px;
}
.cmp-card .cmp-name {
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.15;
}

.cmp-card .cmp-type { color: var(--text-dim); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-family: 'Barlow Condensed','Inter',sans-serif; font-weight: 700; }
.cmp-vs {
  display: grid; place-items: center;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 22px;
  color: var(--accent);
  letter-spacing: .1em;
}
.cmp-stats {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.cmp-empty {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 20px;
}
.cmp-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--w06);
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-row .cmp-label {
  text-align: center;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.cmp-side {
  display: flex; align-items: center;
  gap: 8px;
}
.cmp-side.left { justify-content: flex-end; }
.cmp-side.right { justify-content: flex-start; }
.cmp-bar {
  height: 14px;
  flex: 1;
  background: var(--w06);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  min-width: 60px;
}
.cmp-side.left .cmp-bar { transform: scaleX(-1); }
.cmp-bar > .fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.95));
  transition: width var(--t-slow) ease;
}
.cmp-row.win-left .cmp-side.left .cmp-bar > .fill,
.cmp-row.win-right .cmp-side.right .cmp-bar > .fill {
  background: linear-gradient(90deg, rgba(80,180,90,.55), rgba(110,220,140,.95));
}
.cmp-val {
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  min-width: 40px;
  text-align: center;
}
.cmp-val.placeholder { color: var(--text-fade); font-style: italic; font-size: 11px; }
.cmp-row.win-left .cmp-side.left .cmp-val,
.cmp-row.win-right .cmp-side.right .cmp-val {
  color: var(--ink-good);
}
.cmp-row.win-left .cmp-side.left .cmp-val::before,
.cmp-row.win-right .cmp-side.right .cmp-val::before {
  content: '✓ ';
  color: #6edc8c;
}
.cmp-pill-placeholder {
  background: var(--w08);
  color: var(--text-fade);
  border: 1px solid var(--w12);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.cmp-foot {
  font-size: 11px;
  color: var(--text-fade);
  text-align: center;
  padding: 10px 0;
  line-height: 1.55;
}
.cmp-foot strong { color: var(--accent); }

/* ----- Charm-delta breakdown (Custom Build, ABOVE the stat bars) ----- */
.cmp-cd-panel {
  background: rgba(var(--accent-rgb),.06);
  border: 1px solid rgba(var(--accent-rgb),.30);
  border-radius: 10px;
  padding: 10px 14px 9px;
  margin: 0 auto 12px;
  max-width: 720px;
}
.cmp-cd-head {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.cmp-cd-row {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  padding: 2px 0;
}
.cmp-cd-ico { font-size: 13px; line-height: 1.45; flex: none; }
.cmp-cd-text { flex: 1; min-width: 0; }
.cmp-cd-text strong { color: var(--text); }
.cmp-cd-text em { color: var(--accent); font-style: normal; font-weight: 700; }
.cmp-cd-gain {
  color: #8eea99;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

/* ----- Best Weapons panel ----- */
.cmp-bestof {
  margin: 22px auto 0;
  max-width: min(1120px, 100%);
}
.cmp-bestof:empty { display: none; }
.cmp-bestof-head {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: 12px;
}
.cmp-bestof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cmp-bestof-card {
  background: linear-gradient(160deg, var(--sf19) 0%, var(--sf57) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
  position: relative;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.cmp-bestof-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cmp-bestof-damage     { border-top: 3px solid #ff8866; }
.cmp-bestof-durability { border-top: 3px solid #6cc1ff; }
.cmp-bestof-knockback  { border-top: 3px solid #ffb83a; }
.cmp-bestof-speed      { border-top: 3px solid #8eea99; }
.cmp-bestof-ico {
  font-size: 22px;
  margin-bottom: 4px;
  line-height: 1;
  /* Apple-style emoji images served from emojicdn for cross-OS consistency. */
}
.cmp-bestof-ico .apple-emoji { width: 28px; height: 28px; vertical-align: middle; display: inline-block; }
.cmp-bestof-head .apple-emoji { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }

/* Default sizing for emoji images injected by the appleEmojiLayer module.
   Sized to match the surrounding text via em units. Specific call sites
   (the Best-Of cards above, the notification bell badge, etc.) can
   override with their own .apple-emoji rule and higher specificity. */
.apple-emoji {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  margin: 0 0.06em;
  pointer-events: none;
}
/* Pills and small chips: don't bloat the line-height. */
.rarity-pill .apple-emoji,
.notif-item-ico .apple-emoji,
.frp-role { white-space: nowrap; }
.frp-role .apple-emoji {
  width: 0.95em; height: 0.95em; vertical-align: -0.15em;
}
.notif-item-ico .apple-emoji { width: 16px; height: 16px; vertical-align: -3px; }
/* Tooltip / data-detail bodies: emojis stay inline. */
.tile[data-detail]::before .apple-emoji { /* CSS attr() can't render images, these stay native */ }
.cmp-bestof-stat {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.cmp-bestof-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 6px;
  line-height: 1.05;
}
.cmp-bestof-img {
  width: 48px; height: 48px;
  object-fit: contain;
  margin: 0 auto 4px;
  display: block;
}
.cmp-bestof-name {
  font-weight: 700; font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.cmp-bestof-tier { margin-bottom: 6px; }
.cmp-bestof-tier .rarity-pill { font-size: 9.5px; padding: 2px 7px; }
.cmp-bestof-charms {
  font-size: 10.5px; color: var(--text-fade);
  font-style: italic; line-height: 1.35;
  min-height: 24px;
}
/* v560: full build recipe (base material + rune + relic) so players know
   exactly how to copy each "best" build in-game. */
.cmp-bestof-recipe {
  margin-top: 8px;
  padding: 7px 9px;
  background: rgba(var(--accent-rgb),.08);
  border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: 8px;
  font-size: 11px; line-height: 1.4;
  color: var(--text);
  text-align: center;
}
.cmp-bestof-recipe-tag {
  display: block;
  font-size: 8.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}

@media (max-width: 900px) {
  .cmp-bestof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cmp-bestof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cmp-slots { grid-template-columns: 1fr; }
  .cmp-vs { padding: 4px; }
  .cmp-row { grid-template-columns: 1fr; gap: 4px; }
  .cmp-row .cmp-label { order: -1; }
}
/* Charm-slot select label + the "with: …" line on the custom build card */


.cmp-charms-line {
  margin-top: 6px;
  font-size: 11.5px; color: var(--text-dim);
  font-style: italic; line-height: 1.35;
}
/* Inline rune chip, small in-game rune icon + label, replaces the old
   🔯 emoji that rendered as a Star of David on Windows. */
.cmp-rune-chip {
  display: flex; align-items: center; gap: 8px;
  font-style: normal;
  font-size: 12px;
}
.cmp-rune-chip-img {
  width: 46px; height: 46px;
  object-fit: contain;
  flex: 0 0 46px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.cmp-tier-line { margin: 6px 0 2px; }
.cmp-tier-line .rarity-pill { font-size: 11px; padding: 2px 9px; }

/* Visual resource-tile picker (Custom Build → resource slots) */
.cmp-resource-head {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 6px;
}
.cmp-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 6px;
}
.cmp-resource-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px;
  padding: 6px 4px 5px;
  min-height: 78px;
  background: var(--sf58);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--text-dim);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.cmp-resource-tile:hover { transform: translateY(-1px); border-color: var(--accent); background: rgba(var(--accent-rgb),.06); }
.cmp-resource-tile.is-active {
  border-width: 2px;
  background: rgba(var(--accent-rgb),.14);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.45), 0 4px 10px rgba(0,0,0,.35);
}
.cmp-resource-tile.is-active::after {
  content: '✓';
  position: absolute; top: 2px; right: 4px;
  font-size: 11px; font-weight: 900; color: var(--accent);
}
.cmp-resource-img {
  width: 36px; height: 36px;
  object-fit: contain; display: block;
}
.cmp-resource-label {
  font-size: 9.5px; font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--text);
  word-break: break-word;
  hyphens: auto;
}
.cmp-resource-none .cmp-resource-x {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--text-mute);
}
/* Rarity borders, picked up from the global r-uncommon / r-rare / r-epic
   / r-legendary / r-common pill color tokens. Each tile inherits the
   matching color on its border, keeping the visual language consistent
   with the rest of the site. */
.cmp-resource-tile.r-common    { border-color: rgba(200,200,210,.4); }
.cmp-resource-tile.r-uncommon  { border-color: rgba(108,229,138,.55); }
.cmp-resource-tile.r-rare      { border-color: rgba(106,183,255,.6); }
.cmp-resource-tile.r-epic      { border-color: rgba(168,85,247,.6); }
.cmp-resource-tile.r-legendary { border-color: rgba(255,212,41,.7); }
.cmp-resource-tile.r-uncommon:hover  { border-color: var(--ink-good-2); }
.cmp-resource-tile.r-rare:hover      { border-color: #6ab7ff; }
.cmp-resource-tile.r-epic:hover      { border-color: #c084fc; }
.cmp-resource-tile.r-legendary:hover { border-color: #ffd24a; }

/* TBD placeholder pill + charm-slot stubs for the Compare → Custom Build mode */
.cmp-pill-placeholder {
  display: inline-block;
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.4);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
}


/* ========== passes ========== */
.pass-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1180px;
  margin: 0 auto;
}
.pass-grid > * { flex: 0 0 280px; width: 280px; max-width: 320px; }
.pass-card.clickable, .biome-card.clickable {
  cursor: pointer;
  position: relative;
}
.pass-card.clickable:hover, .biome-card.clickable:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.32);
}
.pass-card.clickable::after, .biome-card.clickable::after {
  content: "▸ View Builds";
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  letter-spacing: .04em;
  border: 1px solid rgba(var(--accent-rgb),.4);
  pointer-events: none;
}

.bk-detail {
  display: none;
  max-width: 1020px;
  margin: 0 auto;
  background: var(--sf8);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.bk-hero {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.bk-hero img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.6);
}
.bk-hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 26px;
  background: linear-gradient(180deg, transparent 0%, var(--sf59) 100%);
}
.bk-hero-overlay h2 {
  margin: 0;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 2rem;
  color: var(--text);
  text-transform: uppercase; letter-spacing: .03em;
}
.bk-hero-overlay .bk-meta {
  font-size: 12px; color: var(--accent);
  letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.bk-content {
  padding: 22px 28px 28px;
}
.bk-back {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.bk-back:hover { color: var(--accent); border-color: var(--accent); }
.bk-summary {
  color: var(--text-dim);
  font-size: 13.5px; line-height: 1.55;
  margin-bottom: 18px;
}
.bk-section-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 18px 0 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.pass-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.pass-card img {
  width: 100%; height: 280px; object-fit: contain;
  display: block; background: var(--bg-3);
  padding: 6px;
}
.pass-body { padding: 10px 14px 12px; text-align: center; }
.pass-body .pass-ver {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  background: rgba(var(--accent-rgb),.12); color: var(--accent);
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  margin-bottom: 5px;
}
.pass-body h3 { font-size: .95rem; margin-bottom: 5px; font-family: 'Barlow Condensed','Poppins',sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.pass-body p { color: var(--text-dim); font-size: 12px; margin: 0; text-align: center; }

/* ========== food & cooking ========== */
.food-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 auto 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  justify-content: center;
}
.food-tab-btn {
  padding: 8px 16px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); font-size: 13.5px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.food-tab-btn:hover { color: var(--text); background: var(--bg-3); }
.food-tab-btn.active { background: var(--bg-3); color: var(--accent); border-color: var(--line); }
.food-pane { display: none; }
.food-pane.active { display: block; }
/* Fish Processor table, full grid of fish → fillet conversions */
.proc-table { display: flex; flex-direction: column; gap: 0; margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.proc-row { display: grid; grid-template-columns: 1.5fr 0.9fr 1.7fr 1.0fr 1.9fr; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: center; background: var(--sf60); }
.proc-row:first-child, .proc-row.proc-head { border-top: 0; background: rgba(var(--accent-rgb),.08); font-family:'Barlow Condensed',sans-serif; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-size: 11.5px; }
.proc-row:nth-child(even):not(.proc-head) { background: var(--sf61); }
.proc-cell { font-size: 12.5px; line-height: 1.45; color: var(--text); display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.proc-cell.proc-fish img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; background: rgba(0,0,0,.3); border-radius: 5px; }
.proc-cell.proc-fish span { font-weight: 700; }
.proc-cell.proc-out img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.proc-cell.proc-out span { font-weight: 600; font-size: 12px; }
.proc-cell.proc-recipe img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.proc-cell.proc-recipe span { color: var(--ink-good-2); font-weight: 600; }
.proc-cell .proc-plus { color: var(--text-mute); font-weight: 700; padding: 0 2px; }
.proc-cell .proc-num { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; font-size: 12px; }
.proc-cell .proc-dash { color: var(--text-mute); }
/* v777: the Compost Bin tables. Four columns rather than five, and three of
   them are numbers, so they get equal narrow columns and centred text. */
.proc-row.compost { grid-template-columns: 2.2fr 1fr 1fr 1fr; }
.proc-row.compost .proc-cell.proc-out { justify-content: center; }
/* a row whose item has no catalogue icon still lines its name up with the
   rows that do: the icon is 32px plus the cell's 8px gap */
.proc-row.compost .proc-cell.proc-fish:not(:has(img)) { padding-left: 40px; }
.proc-row.proc-head.compost .proc-cell.proc-out img { width: 18px; height: 18px; }
.compost-h { font-family: 'Barlow Condensed','Poppins',sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 18px 0 0; text-align: center; }
.compost-credit { font-size: 11.5px; color: var(--text-mute); text-align: center; margin: 2px 0 0; }
@media (max-width: 880px), (hover: none) and (pointer: coarse) { .proc-row.compost { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 4px 6px; } }
.proc-cell.proc-recipe { color: var(--ink-good-2); font-weight: 600; }
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .proc-row { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .proc-row.proc-head { display: none; }
  .proc-cell.proc-fish { grid-column: 1 / -1; font-size: 13px; }
  .proc-cell::before { content: attr(data-label); font-size: 10px; color: var(--text-mute); letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
}

.ingredient-grid {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  max-width: 980px; margin: 0 auto;
  justify-content: center;
}
.ingredient-card {
  flex: 0 0 140px;
  position: relative;
  background: var(--sf62);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px 10px;
  text-align: center;
  cursor: help;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.ingredient-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.06);
  z-index: 5;
}
.ingredient-icon {
  width: 64px; height: 64px; margin: 0 auto 8px;
  display: grid; place-items: center;
  font-size: 36px;
  background: var(--w03);
  border-radius: 12px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.ingredient-name {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  text-align: center;
}
.ingredient-pill {
  display: inline-block;
  margin: 6px auto 0;
  position: static;
  font-size: 10px;
  padding: 2px 8px;
}
.ingredient-tip {
  visibility: hidden; opacity: 0;
  position: absolute;
  top: 0; left: calc(100% + 10px);
  width: 290px; max-width: 80vw;
  background: var(--sf29);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  z-index: 100; pointer-events: none;
  text-align: left;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
  transition: opacity var(--t-fast) ease;
}
.ingredient-card.tip-left .ingredient-tip {
  left: auto; right: calc(100% + 10px);
}
.ingredient-card:hover .ingredient-tip { visibility: visible; opacity: 1; }
.ingredient-tip h5 {
  font-size: 10.5px; color: var(--accent);
  margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px dashed rgba(var(--accent-rgb),.25);
  text-transform: uppercase; letter-spacing: .08em;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  text-align: left;
}
.ingredient-tip ul { margin: 0; padding: 0; list-style: none; }
.ingredient-tip li {
  padding: 4px 0;
  font-size: 12px; color: var(--text);
  border-bottom: 1px dashed var(--w06);
  text-align: left;
}
.ingredient-tip li:last-child { border: 0; }
.ingredient-tip li small {
  display: block;
  color: var(--text-mute); font-size: 10.5px;
  margin-top: 2px;
}

/* Mobile fix: the side-positioned ingredient tooltip has no room beside the
   tile on narrow screens and ran off the edge. Drop it BELOW the tile and
   anchor it to the tile's near edge so it grows inward, never past the
   viewport (left-column tiles grow right; right-column 'tip-left' tiles grow
   left). */
@media (max-width: 640px) {
  .ingredient-tip {
    top: calc(100% + 8px);
    left: 0; right: auto;
    width: max-content; max-width: 78vw;
  }
  .ingredient-card.tip-left .ingredient-tip {
    left: auto; right: 0;
  }
}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
  max-width: 980px; margin: 0 auto 28px;
  justify-content: center;
  align-items: flex-start;
}
.recipe-card {
  flex: 0 0 280px;
  background: var(--sf8);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 16px;
  text-align: center;
  display: flex; flex-direction: column;
}
.recipe-card > .rarity-pill {
  align-self: center;
  font-size: 10px;
  padding: 1px 8px;
  margin: 0 auto 6px;
}
.recipe-card .recipe-img {
  width: 84px; height: 84px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  background: var(--w03);
  border-radius: 12px;
  overflow: hidden;
}
.recipe-card .recipe-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.recipe-card h4 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--accent);
  margin-bottom: 4px;
  text-align: center;
}
.recipe-card .recipe-effect {
  font-size: 12px; color: var(--text-dim);
  margin-bottom: 10px;
  text-align: center;
}
.recipe-card .recipe-heal-row {
  text-align: center;
  margin-bottom: 8px;
}
.recipe-card .recipe-heal {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(108,229,138,.14);
  color: var(--rare-u);
  font-size: 11px; font-weight: 700;
}
.recipe-card .recipe-armor {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(108,193,255,.14);
  color: #6cc1ff;
  font-size: 11px; font-weight: 700;
  margin-left: 5px;
}
.charm-bestof { margin-top: 22px; }
.charm-bestof-grid { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 760px; margin: 0 auto; }
.charm-bestof-health { border-top: 3px solid #8eea99; }
.charm-bestof-armor  { border-top: 3px solid #6cc1ff; }
.charm-bestof-mix    { border-top: 3px solid var(--accent); }
@media (max-width: 640px) { .charm-bestof-grid { grid-template-columns: 1fr; } }
.recipe-card .ingr-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.recipe-card .ingr-list li {
  font-size: 12.5px; color: var(--text);
  padding: 3px 0;
  border-bottom: 1px dashed var(--w04);
  text-align: center;
}
.recipe-card .ingr-list li:last-child { border: 0; }
.recipe-card .ingr-list strong { color: var(--accent); font-weight: 700; }
.food-station-heading {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 1.25rem;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: .08em;
  text-align: center;
  margin: 28px auto 14px;
  max-width: 980px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--accent-rgb),.2);
}
.food-pane > div:first-child > .food-station-heading,
#food-grill .food-station-heading {
  margin-top: 6px;
}

/* ========== home / overview (v5, full hero banner, image speaks for itself) ========== */
.home-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(var(--accent-rgb),.35);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.home-hero img {
  width: 100%; height: 460px; object-fit: cover; object-position: center 46%;
  display: block;
}
.home-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.38) 62%, transparent 100%);
  padding: 20px 24px 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.home-hero-tags {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-fill); font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
  white-space: nowrap;
}
/* v755: the update's name, set once, large, at the bottom left of the cover.
   Poppins at 900 is the heaviest face already loaded, so this costs nothing
   extra to download. */
.home-hero-title { margin: 0;
  font-family: 'Poppins','Inter',sans-serif;
  font-weight: 900; font-size: clamp(30px, 5.4vw, 56px);
  line-height: .92; letter-spacing: -.022em; text-transform: uppercase;
  color: #fff; margin: 0;
  text-shadow: 0 3px 22px rgba(0,0,0,.9), 0 0 44px rgba(var(--accent-rgb),.24);
}
.home-hero-title span { color: var(--accent-fill); display: block; }
.home-hero-sub {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: rgba(255,255,255,.82); margin-top: 7px;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
/* The searchlight beam. Purely decorative, composited, and it does not
   animate, so it costs one paint and nothing after that. The isolate on
   .home-hero below keeps the screen blend inside the banner instead of
   letting it reach for whatever stacking context happens to be above. */
/* v920: Brick or Treat. The beam used to be the Bat-Signal catching the
   top-left corner. The Halloween hero puts the jack-o-lantern moon at
   roughly 17% across and 56% down, so the warm glow sits on the moon and
   a faint green wash carries the aurora across the rest of the banner. */
.ks-beam {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(420px 300px at 17% 56%, rgba(255,140,26,.18) 0%, transparent 68%),
    linear-gradient(255deg, rgba(140,255,90,.07) 0%, transparent 38%);
  mix-blend-mode: screen;
}
.home-hero { isolation: isolate; }
@media (max-width: 640px) {
  .home-hero-overlay { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px 11px; }
  .home-hero-tags { white-space: normal; font-size: 9.5px; letter-spacing: .13em; }
  .home-hero-title { font-size: 34px; }
  .home-hero-sub { font-size: 10px; letter-spacing: .05em; margin-top: 5px; }
}

/* ===== v760: the Batman section ===== */

.bm-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; color: var(--accent);
}
.bm-note {
  border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: var(--radius-sm); background: rgba(var(--accent-rgb),.05);
  padding: 13px 16px; margin: 0 auto 18px; font-size: 13.5px; color: var(--text-dim);
  max-width: 900px; text-align: center;
}
.bm-note strong { color: var(--accent); }

/* --- points of interest --- */
/* --- v816: the Gotham location tabs --------------------------------------
   A tab row, then one open panel. The panels are the original .bm-poi
   sections and are unchanged. */
.ksp-tabs {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  margin-bottom: 18px;
}
.ksp-tab {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--field); color: var(--text-dim);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.ksp-tab:hover { border-color: rgba(var(--accent-rgb),.55); color: var(--text); }
.ksp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ksp-tab.on {
  background: rgba(var(--accent-rgb),.14); border-color: var(--accent); color: var(--accent);
}
/* Construction Site has screenshots but no flythrough. */
.ksp-tab-note {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 800; color: var(--text-mute);
}
.ksp-tab.on .ksp-tab-note { color: var(--accent-fill); opacity: .75; }

.bm-poi { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card); overflow: hidden; }
/* v816: a panel only shows when its card is picked. */
.ksp-panels > .bm-poi { display: none; }
.ksp-panels > .bm-poi.open { display: block; }
.bm-poi-head { padding: 15px 18px 12px; text-align: center; }
.bm-poi-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif; font-size: 25px;
  font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text); margin: 0 0 3px; line-height: 1;
}
.bm-poi-desc {
  font-size: 13px; color: var(--text-dim);
  /* v761: the 78ch box has to centre itself. `.page > *` auto-centres direct
     children of the page only, and this sits two levels down, so it hugged the
     left edge with its text centred inside it: almost centred, and wrapping a
     word onto its own line. */
  max-width: 78ch; margin: 0 auto;
}
.bm-poi-body { padding: 0 18px 16px; }
/* The flythrough. preload=none and a poster means nothing is fetched until
   somebody presses play, which matters when five of these sit on one page. */
.bm-video { width: 100%; display: block; border-radius: 10px; background: #000;
  aspect-ratio: 16/9; border: 1px solid var(--line); }
.bm-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 9px; margin-top: 12px; }
.bm-shot {
  padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: var(--field); cursor: zoom-in; display: block; line-height: 0;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.bm-shot:hover { border-color: var(--accent-fill); transform: translateY(-2px); }
.bm-shot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
/* v930: the two Drop 2 brick galleries run three shots and then two, and an
   auto-fill grid parks that short second row hard against the left edge.
   Centered here rather than on .bm-shots itself, because the other galleries
   that use that class fill their rows and look right as a grid. */
.bm-shots.bm-shots-center { display: flex; flex-wrap: wrap; justify-content: center; }
.bm-shots.bm-shots-center .bm-shot { flex: 0 1 240px; }


/* --- key art --- */
/* --- v813: the rewards rows -------------------------------------------
   Third try at this section. The original was four centred grids stacked
   down the page, about 1100px tall and repetitive. v812 made it a timeline
   of pills, which shrank the artwork so far that the rewards stopped being
   the point of the section. This keeps the large artwork and moves the week
   label out to a fixed left column, so the headings stop interrupting the
   flow and each week reads as one row. Rows grow sideways with the number of
   rewards, so Weeks 5 and 6 drop in without the layout changing. */
.ksr-rows { display: flex; flex-direction: column; gap: 10px; max-width: 1040px; margin: 0 auto; }
.ksr-row {
  display: grid; grid-template-columns: 158px 1fr; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-3); padding: 14px 16px;
}
.ksr-label { text-align: right; border-right: 1px solid var(--line); padding-right: 16px; }
.ksr-wk {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); line-height: 1.3;
}
.ksr-when { display: block; font-size: 11px; color: var(--text-mute); margin-top: 3px; }
.ksr-items { display: flex; flex-wrap: wrap; gap: 12px; }
.ksr-item {
  width: 112px; padding: 0; border: 0; background: none;
  font-family: inherit; text-align: center; color: var(--text-dim);
  transition: transform var(--t-fast) ease, color var(--t-fast) ease;
}
.ksr-item img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(var(--accent-rgb),.09) 0%, transparent 62%),
    var(--sf23);
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color var(--t-fast) ease;
}
.ksr-item span { display: block; font-size: 11.5px; font-weight: 700; margin-top: 6px; line-height: 1.3; }
button.ksr-item { cursor: zoom-in; }
button.ksr-item:hover { transform: translateY(-2px); color: var(--text); }
button.ksr-item:hover img { border-color: var(--accent-fill); }
button.ksr-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ksr-item.static { cursor: default; }
/* The note sits under the label column, spanning the row. */
.ksr-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0; }
/* ".page p" centres every paragraph in a page section and outranks a bare
   .ksr-note, so this note would sit centred while the row beside it sits
   left. .page p.ksr-note wins it back. */
.page p.ksr-note { text-align: left; }

/* --- one lightbox, shared by the screenshots and the key art --- */
.bm-lb {
  position: fixed; inset: 0; z-index: 9600; display: none;
  background: rgba(4,5,9,.94); align-items: center; justify-content: center;
  padding: 34px 18px;
}
.bm-lb.open { display: flex; }
.bm-lb img { max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 10px; display: block; }
.bm-lb-x, .bm-lb-nav {
  position: absolute; background: rgba(0,0,0,.55); color: var(--accent-fill);
  border: 1px solid rgba(var(--accent-rgb),.4); border-radius: 999px;
  width: 42px; height: 42px; font-size: 20px; font-weight: 900; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.bm-lb-x { top: 16px; right: 18px; }
.bm-lb-nav.prev { left: 16px; top: 50%; margin-top: -21px; }
.bm-lb-nav.next { right: 16px; top: 50%; margin-top: -21px; }
.bm-lb-cap {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  color: var(--text-dim); font-size: 12.5px; letter-spacing: .04em;
}
@media (max-width: 700px) {
  .bm-poi-name { font-size: 21px; }
  .bm-shots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .bm-shots.bm-shots-center .bm-shot { flex-basis: 150px; }
  .ksr-row { grid-template-columns: 1fr; gap: 10px; }
  .ksr-label { text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
  .ksr-items { justify-content: center; }
  .ksr-item { width: 96px; }
}

/* ===== v758: Knight Shift on the home page ===== */
.ks-home {
  /* v763: centred, like the rest of the site. */
  text-align: center;
  border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.05) 0%, transparent 42%),
    var(--bg-card);
  padding: 20px 22px 22px;
  margin: 0 0 18px;
  box-shadow: var(--shadow-2);
}
.ks-home-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; color: var(--accent); margin-bottom: 4px;
}
.ks-home-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text); line-height: 1; margin: 0 0 6px;
}
.ks-home-title span { color: var(--accent); font-size: 17px; margin-left: 8px; letter-spacing: .06em; }
.ks-home-lead { font-size: 13.5px; color: var(--text-dim); margin: 0 auto 16px; max-width: 74ch; }
.ks-drops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ks-drop {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field); padding: 13px 15px;
}
.ks-drop-h {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--accent); margin-bottom: 2px;
}
.ks-drop-when { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 7px; }
.ks-drop { text-align: center; }
/* list-style-position: inside so the bullet travels with the centred text
   instead of staying pinned to a left edge the text has left behind. */
.ks-drop ul { margin: 0; padding-left: 0; list-style-position: inside; }
.ks-drop li { font-size: 12.8px; color: var(--text-dim); line-height: 1.5; margin-bottom: 2px; }
/* The six weeks. The strip encodes the shape of the quest line: two on, two
   catching up, two on. That is information, not decoration, which is why it
   is numbered. */
.ks-weeks-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--text-mute); margin: 16px 0 6px;
  text-align: center;
}
/* v921: the strip was a fixed 6 column grid, built when Knight Shift had six
   quest weeks. Brick or Treat has four, so four tiles filled the leftmost four
   columns and the whole row sat shoved against the left edge. Centred flex
   instead, so the strip stays in the middle whatever the update's week count
   turns out to be next time. */
.ks-weeks { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ks-week { flex: 0 1 160px; }
.ks-week {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--field); padding: 9px 6px; text-align: center;
  font-family: inherit; color: inherit; cursor: pointer; position: relative;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.ks-week:hover { border-color: rgba(255,140,26,.55); }
/* v761: .on used to warm the border and the number to gold, to say "this week
   carries quests". But gold is what .done paints, so four untouched tiles read
   as already selected. Nothing on this strip is gold until somebody makes it
   gold.
   v763: and the catch-up weeks no longer start dimmed either. A catch-up
   window only stops mattering once you have finished the weeks it exists to
   catch you up on, so .muted is applied by the script to weeks 3 and 4 only
   when 1 AND 2 are both ticked. */
.ks-week.muted { opacity: .45; }
/* Done is a separate state from whether the week carries quests, so it reads
   differently: the whole tile fills instead of just its border warming. */
.ks-week.done { background: var(--accent-fill); border-color: var(--accent-fill); }
/* (0,4,0) on purpose: a ticked quest week matches .on and .done at equal
   weight, so this has to outweigh rather than merely follow. */
.ks-week.done.ks-week .ks-week-n,
.ks-week.done.ks-week .ks-week-l { color: var(--accent-ink); }
.ks-week-tick {
  position: absolute; top: 4px; right: 5px;
  font-size: 11px; font-weight: 900; line-height: 1;
  color: var(--accent-ink); opacity: 0;
}
.ks-week.done .ks-week-tick { opacity: 1; }
.ks-week-count {
  font-size: 12px; color: var(--text-mute); margin-top: 8px;
}
.ks-week-count b { color: var(--accent); font-weight: 800; }

/* ==================================================================
   v864: the Knight Shift challenge list rebuilt in the Free Machinist
   Rewards layout, Batman skin. The Machinist page proved this shape
   reads better than a card grid: one tall journal card per quest, the
   in-game journal screenshot at full width, the objective underneath,
   and the reward called out with its own transparent artwork.

   Class prefix is bmr- so none of it can collide with the ks- rules
   already in this section. The ring strip at the top is the Machinist
   tracker's markup, and it builds itself from the journal cards below,
   so a new week appears in it with no extra wiring.
   ================================================================== */
.bmr-track {
  background: var(--sf96);
  border: 1px solid rgba(255,216,77,.30);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin: 0 0 24px;
}
.bmr-track-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.bmr-track-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 20px; font-weight: 800; color: #ffd84d;
  letter-spacing: .04em; text-transform: uppercase;
}
.bmr-track-count { font-size: 13px; color: var(--text-dim); }
.bmr-track-count b { color: #ffd84d; font-size: 15px; }
.bmr-track-sub { font-size: 12px; color: var(--text-mute); margin: 0 0 12px; }
.bmr-track-bar {
  height: 7px; border-radius: 999px; background: var(--w09);
  overflow: hidden; margin: 0 0 14px;
}
.bmr-track-bar span {
  display: block; height: 100%; width: 0;
  /* v928: was Knight Shift gold, written as hex so the accent sweep missed it. */
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 999px; transition: width var(--t-slow) ease;
}
.bmr-track-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.bmr-day {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; color: inherit;
}
.bmr-day-figure {
  position: relative; width: 68px; height: 68px;
  transition: transform var(--t-fast) ease;
}
.bmr-day:hover .bmr-day-figure { transform: translateY(-2px); }
.bmr-day-ring {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--w16);
  background: var(--sf97);
  display: grid; place-items: center; overflow: hidden;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.bmr-day:hover .bmr-day-ring { border-color: rgba(255,216,77,.7); }
.bmr-day-ring img {
  width: 78%; height: 78%; object-fit: contain;
  filter: grayscale(.75) brightness(.72); transition: filter var(--t-fast) ease;
}
.bmr-day-check {
  position: absolute; right: -3px; bottom: -3px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
  display: grid; place-items: center;
  font-size: 13px; line-height: 1; color: rgba(255,255,255,.28);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.bmr-day:hover .bmr-day-check { border-color: rgba(255,216,77,.75); color: rgba(255,255,255,.5); }
.bmr-day-label { font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.bmr-day.is-got .bmr-day-ring {
  border-color: #5ee08a;
  box-shadow: 0 0 0 3px rgba(94,224,138,.16), 0 6px 18px rgba(94,224,138,.18);
}
.bmr-day.is-got .bmr-day-ring img { filter: none; }
.bmr-day.is-got .bmr-day-check { background: #5ee08a; border-color: #5ee08a; color: #08120b; }
.bmr-day.is-got:hover .bmr-day-check { background: #5ee08a; border-color: #5ee08a; color: #08120b; }
.bmr-day.is-got .bmr-day-label { color: #9df0b8; }
.bmr-track-note { font-size: 11.5px; color: var(--text-mute); margin-top: 12px; text-align: center; }

.bmr-weeks-label {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 19px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #ffd84d;
  margin: 30px 0 6px; padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,216,77,.26);
}
.bmr-lead { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); margin: 0 0 18px; }

.bmr-journal {
  background: var(--sf96);
  border: 1px solid var(--w10);
  border-left: 3px solid rgba(255,216,77,.5);
  border-radius: 14px;
  padding: 18px 20px 20px;
  margin: 0 0 18px;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.bmr-journal.is-got {
  border-left-color: #5ee08a;
  box-shadow: 0 0 0 1px rgba(94,224,138,.12) inset;
}
.bmr-journal-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.bmr-journal-num {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 21px; font-weight: 800; line-height: 1;
  color: #1a1400; background: linear-gradient(135deg, #ffd84d, #c9a227);
  box-shadow: 0 4px 14px rgba(201,162,39,.28);
}
.bmr-journal-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 24px; font-weight: 800; line-height: 1.15;
  color: var(--text); letter-spacing: .01em;
}
.bmr-claim {
  margin-left: auto; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--w06); color: var(--text-dim);
  border: 1px solid var(--w14);
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.bmr-claim:hover { border-color: rgba(255,216,77,.6); color: #ffe680; }
.bmr-claim-tick { font-size: 12px; line-height: 1; opacity: .45; }
.bmr-journal.is-got .bmr-claim {
  background: rgba(94,224,138,.14); border-color: rgba(94,224,138,.55); color: #9df0b8;
}
.bmr-journal.is-got .bmr-claim-tick { opacity: 1; }

.bmr-journal-img { border-radius: 11px; overflow: hidden; margin: 0 0 13px; border: 1px solid var(--w08); }
.bmr-journal-img a { display: block; }
.bmr-journal-img img { display: block; width: 100%; height: auto; }
/* v883: the game numbers each Knight Shift arc on its own, so the card shows
   its own "N of 5" beside the title while the big number stays the page's
   running count. Set small and dim so it reads as a footnote, not a heading. */
.bmr-journal-step {
  display: inline-block; margin-left: 9px; vertical-align: 2px;
  font-family: 'Poppins',system-ui,sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-mute);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
}
/* Batman's own words from the journal entry. Italic and indented so it is
   clearly the game talking rather than the wiki. */
.bmr-journal-quote {
  font-size: 14px; line-height: 1.7; color: var(--text-dim);
  font-style: italic; margin: 0 0 12px;
  border-left: 3px solid rgba(255,216,77,.35); padding-left: 13px;
}
.bmr-journal-desc { font-size: 14px; line-height: 1.65; color: var(--text-dim); margin: 0 0 14px; }
.bmr-journal-desc b { color: #ffe680; font-weight: 700; }

.bmr-reward-callout {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,216,77,.07), rgba(255,216,77,.02));
  border: 1px solid rgba(255,216,77,.22);
  border-radius: 12px; padding: 13px 16px;
}
.bmr-reward-imgs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bmr-reward-imgs img {
  width: 62px; height: 62px; object-fit: contain;
  background: var(--sf97); border: 1px solid var(--w10);
  border-radius: 10px; padding: 5px;
}
.bmr-reward-imgs img.bmr-reward-wide { width: 112px; }
.bmr-reward-text { min-width: 150px; }
.bmr-reward-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #c9a227; margin-bottom: 3px;
}
.bmr-reward-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--text);
}

@media (max-width: 560px){
  .bmr-track-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
  .bmr-day-figure { width: 58px; height: 58px; }
  .bmr-day-check { width: 21px; height: 21px; font-size: 11.5px; }
  .bmr-journal { padding: 15px 15px 17px; }
  .bmr-journal-title { font-size: 21px; }
  .bmr-journal-step { font-size: 10.5px; padding: 2px 7px; margin-left: 7px; }
  .bmr-journal-quote { font-size: 13.5px; padding-left: 11px; }
  .bmr-claim { margin-left: 0; }
  .bmr-reward-imgs img { width: 54px; height: 54px; }
  .bmr-reward-imgs img.bmr-reward-wide { width: 96px; }
}
      
/* v864: the light theme cannot carry Bat gold as text. Same darkened gold the
   lightning tag already measures clean against the light surface. */
:root[data-theme="light"] .bmr-track-title,
:root[data-theme="light"] .bmr-track-count b,
:root[data-theme="light"] .bmr-weeks-label,
:root[data-theme="light"] .bmr-journal-desc b,
:root[data-theme="light"] .bmr-reward-label { color: #7a5c00; }
.ks-week-n {
  font-family: 'Barlow Condensed',sans-serif; font-size: 19px; font-weight: 800;
  line-height: 1; color: var(--text);
}
.ks-week-l { color: var(--text-mute); }
/* v786: three drop blocks, a time line under each drop's dates, and a date under each week */
.ks-drops.ks-drops-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .ks-drops.ks-drops-3 { grid-template-columns: 1fr; } }
.ks-drop-weeks { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.ks-week-d { font-size: 9px; color: var(--text-dim); margin-top: 3px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ks-week-l {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--text-mute); margin-top: 4px; line-height: 1.25;
}
/* v921: auto-fit, not a hard 3. With three shots nothing changes; with two it
   fills the row instead of leaving a dead third column where the removed one
   used to be. */
.ks-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.ks-shots img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); display: block;
}
.ks-home-cta {
  display: inline-block; margin-top: 15px;
  background: var(--accent-fill); color: var(--accent-ink);
  border: 0; border-radius: 9px; padding: 10px 18px;
  font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .03em;
  cursor: pointer;
  transition: box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
}
.ks-home-cta:hover { box-shadow: 0 8px 24px rgba(var(--accent-rgb),.34); transform: translateY(-1px); }
@media (max-width: 720px) {
  .ks-drops { grid-template-columns: 1fr; }
  .ks-week { flex: 0 1 30%; }
  .ks-shots { grid-template-columns: 1fr; }
  .ks-shots img:nth-child(n+3) { display: none; }
  .ks-home-title { font-size: 25px; }
}

.home-callout {
  background: rgba(var(--accent-rgb),.05);
  border: 1px solid rgba(var(--accent-rgb),.25);
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 13px; color: var(--text-dim);
  margin-bottom: 16px;
  text-align: left;
}
.home-callout strong { color: var(--accent); font-weight: 800; }

/* ===== Ad slots ===== */






/* Hide all ads for signed-in supporters (member tier) */


/* Sidebar nav icons (replaced emojis with real LEGO Fortnite imagery) */
.nav-ico {
  width: 22px; height: 22px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
  display: inline-block;
  background: var(--sf63);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.nav a.active .nav-ico { box-shadow: 0 0 0 1.5px var(--accent), 0 1px 4px rgba(0,0,0,.5); }

/* Pink "★" Supporter badge, used as the nav icon for Become a Supporter */
.nav-ico.nav-ico-supporter {
  background: linear-gradient(135deg, var(--supporter) 0%, #ff5a93 100%);
  color: #fff;
  font-family: 'Segoe UI Symbol', 'Apple Color Emoji', 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  box-shadow: 0 0 0 1px rgba(255,158,200,.45), 0 4px 12px rgba(255,110,170,.32);
}
.nav-group-supporter {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.nav-group-supporter a {
  background: linear-gradient(90deg, rgba(255,158,200,.16), rgba(255,90,150,.06));
  border: 1px solid rgba(255,158,200,.4);
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--text);
}
.nav-group-supporter a:hover {
  background: linear-gradient(90deg, rgba(255,158,200,.26), rgba(255,90,150,.16));
  border-color: rgba(255,158,200,.7);
}

/* ===== Boss Trackers ===== */
.trackers-permission {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.04));
  border: 1px solid rgba(var(--accent-rgb),.4);
  border-radius: 12px;
  padding: 14px 18px;
  max-width: 760px;
  margin: 0 auto 22px;
}
.trackers-permission strong { color: var(--accent); display: block; margin-bottom: 4px; }
.trackers-permission p { color: var(--text-dim); font-size: 13px; margin: 4px 0 10px; line-height: 1.45; }
.trackers-perm-btn {
  background: var(--accent-fill); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: 9px 18px; font-weight: 800; cursor: pointer; font-size: 13px;
  letter-spacing: .04em; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.trackers-perm-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--accent-rgb),.35); }
.trackers-grid {
  display: flex; flex-wrap: wrap;
  gap: 16px; max-width: 1080px; margin: 0 auto;
  justify-content: center;
  align-items: flex-start;
}
.trackers-grid > * { flex: 0 0 320px; width: 320px; max-width: 360px; }
.tracker-card {
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 460px;
  transition: border-color var(--t-slow) ease;
}
.tracker-body { flex: 1 1 auto; }
.tracker-row { margin-top: auto; }
.tracker-card.is-ready { border-color: var(--accent); box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb),.45), 0 8px 22px rgba(var(--accent-rgb),.15); }
.tracker-card.is-inactive { opacity: .55; filter: grayscale(.4); }
.tracker-img {
  position: relative; aspect-ratio: 16/9; background: var(--canvas-bg); overflow: hidden;
}
.tracker-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tracker-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--sf14) 100%);
}
.tracker-status-pill {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.7); color: var(--text);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  letter-spacing: .08em; text-transform: uppercase;
}
.tracker-card.is-ready .tracker-status-pill { background: var(--accent-fill); color: var(--accent-ink); }
.tracker-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.tracker-name { font-weight: 800; font-size: 15.5px; color: var(--text); }
.tracker-desc { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.tracker-countdown {
  font-family: 'Barlow Condensed', monospace;
  font-size: 30px; font-weight: 900;
  color: var(--accent); letter-spacing: .06em;
  text-align: center; padding: 6px 0; line-height: 1;
}
.tracker-card.is-ready .tracker-countdown { color: var(--ink-good-2); }
/* v799: an inactive tracker has no clock to show, so it should not shout a
   30px gold line where the countdown normally goes. */
.tracker-card.is-inactive .tracker-countdown {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-mute);
  padding: 13px 0;
}
.tracker-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.tracker-btn {
  flex: 1 1 auto;
  background: rgba(var(--accent-rgb),.16); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.45);
  border-radius: 8px; padding: 9px 12px; font-weight: 700; font-size: 13px;
  cursor: pointer; letter-spacing: .04em;
  font-family: inherit;
  transition: background var(--t-fast) ease;
}
.tracker-btn:hover { background: rgba(var(--accent-rgb),.28); }
.tracker-btn.tracker-btn-secondary {
  background: transparent; color: var(--text-dim); border-color: var(--line);
}
.tracker-btn.tracker-btn-secondary:hover { background: var(--w04); color: var(--text); }
.tracker-card.is-inactive .tracker-btn { pointer-events: none; opacity: .5; }

/* PWA install banner */
.pwa-cta {
  display: flex; align-items: center; gap: 14px;
  background: var(--sf27); border: 1px solid rgba(var(--accent-rgb),.45);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
  position: relative;
}
.pwa-cta-icon { width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.pwa-cta-body { flex: 1 1 auto; min-width: 0; }
.pwa-cta-title { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.pwa-cta-sub { color: var(--text-mute); font-size: 12.5px; line-height: 1.35; }
.pwa-cta-btn {
  flex: 0 0 auto;
  background: var(--accent-fill); color: var(--accent-ink);
  border: 0; border-radius: 8px; padding: 10px 18px;
  font-weight: 800; cursor: pointer; font-size: 13.5px;
  letter-spacing: .03em;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.pwa-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--accent-rgb),.35); }
.pwa-cta-close {
  position: absolute; top: 4px; right: 6px;
  background: transparent; border: 0; color: var(--text-mute);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.pwa-cta-close:hover { color: var(--text); }
@media (max-width: 600px) {
  .pwa-cta { flex-wrap: wrap; }
  .pwa-cta-body { flex: 1 1 100%; order: 2; }
  .pwa-cta-icon { order: 1; }
  .pwa-cta-btn { order: 3; flex: 1 1 100%; padding: 12px; }
}

.home-stats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.home-stats-feature {
  display: grid; grid-template-columns: repeat(2, minmax(260px, 280px));
  gap: 8px; margin: 0 auto 22px; justify-content: center;
}
.stat-box.stat-box-feature .value {
  white-space: normal; overflow: visible; text-overflow: clip;
}
.stat-box {
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  min-width: 0;
}
.stat-box .label {
  font-size: 9.5px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  margin-bottom: 4px;
}
.stat-box .value {
  color: var(--accent); font-weight: 800; font-size: 14.5px;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1100px) { .home-stats { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px)  { .home-stats { grid-template-columns: repeat(2,1fr); } .home-stats-feature { grid-template-columns: 1fr; } }

.home-section-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 1.35rem;
  letter-spacing: .02em;
  margin: 0 0 12px;
  text-align: left;
}

.home-about {
  background: var(--sf8);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 13.5px; color: var(--text-dim);
  margin-bottom: 22px;
  text-align: left;
}
.home-about p { text-align: left; margin-bottom: 10px; }
.home-about p:last-child { margin-bottom: 0; }
.home-about strong { color: var(--accent); }

.core-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-bottom: 22px;
}
.core-box {
  background: linear-gradient(180deg, var(--sf64) 0%, var(--sf7) 100%);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 10px 12px;
  text-align: center;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.core-box:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.core-box .ico {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto 8px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb),.10) 0%, rgba(var(--accent-rgb),0) 70%);
}
.core-box .ico img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.core-box h4 {
  color: var(--accent); font-size: 12.5px; margin-bottom: 4px;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; letter-spacing: .02em;
  text-align: center;
}
.core-box p { color: var(--text-dim); font-size: 11px; margin: 0; line-height: 1.3; text-align: center; }
.core-box h4::before { display: none; }
@media (max-width: 900px) { .core-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 480px) { .core-grid { grid-template-columns: repeat(2,1fr); } }

.trailers-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.trailer-card {
  background: var(--sf27); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.trailer-card .label {
  padding: 10px 14px;
  font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; text-align: left;
}
.trailer-card video,
.trailer-card iframe {
  width: 100%; aspect-ratio: 16/9; border: none; display: block;
  background: #000;
}
@media (max-width: 700px) { .trailers-row { grid-template-columns: 1fr; } }
/* v768: a single trailer sits centred at a sensible width rather than filling
   half a two column grid. */
.trailers-row.one { grid-template-columns: 1fr; max-width: 960px; margin: 0 auto; }
.trailers-row.one .trailer-card .label { text-align: center; }

/* ========== physical sets, v3 style ========== */
.sets-notice {
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 auto 18px;
  max-width: 880px;
  font-size: 13px;
  color: var(--text-dim);
}
.sets-notice strong { color: var(--text); }
.sets-wave-row {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin: 12px auto 6px;
  max-width: 980px;
}
.sets-wave-pill {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.sets-wave-pill.w1 { background: rgba(255,212,41,.12); color: #ffd429; border: 1px solid #ffd42944; }
.sets-wave-pill.w2 { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid #22c55e44; }
.sets-wave-pill.bh { background: rgba(86,182,240,.12); color: #56b6f0; border: 1px solid #56b6f044; }
.sets-wave-rule { flex: 1; height: 1px; background: var(--w07); }

.sets-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 8px;
  max-width: 1020px;
}
.sets-grid > .set-card {
  flex: 0 1 230px;
  width: 230px;
  max-width: 230px;
}
.sets-grid.centered { max-width: 720px; }
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .sets-grid > .set-card { flex: 0 1 calc(50% - 14px); width: calc(50% - 14px); max-width: 320px; }
}
@media (max-width: 480px) {
  .sets-grid > .set-card { flex: 0 1 100%; width: 100%; max-width: 320px; }
}

.set-card {
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  height: 100%;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.set-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.set-card.no-link {
  cursor: default;
  opacity: 0.85;
}
.set-card.no-link:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}
.set-card.no-link .set-price {
  color: var(--text-mute);
  font-size: 12.5px;
  font-style: italic;
  font-weight: 700;
}
.set-img-wrap {
  background: linear-gradient(135deg, var(--sf65) 0%, var(--sf7) 100%);
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  flex-shrink: 0;
}
.set-img-wrap img {
  max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.set-body {
  padding: 12px 14px 14px;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--line);
  flex: 1;
  justify-content: space-between;
}
.set-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--text);
  line-height: 1.2;
}
.set-meta {
  font-size: 11px; color: var(--text-mute);
  letter-spacing: .04em; text-transform: uppercase;
}
.set-price {
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
  margin-top: 2px;
}
.set-cta {
  font-size: 11px;
  color: var(--accent-cool);
  letter-spacing: .06em; text-transform: uppercase;
  margin-top: 4px;
}

/* ========== biomes ========== */
.biome-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 980px;
  margin: 0 auto;
}
.biome-grid .biome-card {
  flex: 1 1 220px;
  max-width: 240px;
}
.biome-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.biome-card img {
  width: 100%; height: 120px; object-fit: cover;
  display: block; background: var(--bg-3);
}
.biome-body { padding: 10px 14px 12px; text-align: center; }
.biome-body h3 { font-size: 1rem; margin-bottom: 4px; font-family: 'Barlow Condensed','Poppins',sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--accent); }
.biome-body p { color: var(--text-dim); font-size: 12.5px; margin-bottom: 8px; text-align: center; }
.biome-meta { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.biome-meta span { font-size: 11.5px; color: var(--text-mute); text-align: left; }
.biome-meta strong { color: var(--text); font-weight: 700; }

/* ===== Collaborations, large feature cards ===== */
.collab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  max-width: 1180px;
  margin: 0 auto;
}
.collab-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 460px 1fr;
  align-items: stretch;
  transition: border-color var(--t-slow) ease, transform var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.collab-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px var(--accent);
}
@media (max-width: 880px), (hover: none) and (pointer: coarse) { .collab-card { grid-template-columns: 1fr; } }
.collab-card-img {
  position: relative;
  width: 100%;
  min-height: 280px;
  overflow: hidden;
}
.collab-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.collab-card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--sf46) 100%);
  pointer-events: none;
}
@media (max-width: 880px), (hover: none) and (pointer: coarse) { .collab-card-img { min-height: 220px; } .collab-card-img::after { background: linear-gradient(180deg, transparent 60%, var(--sf43) 100%); } }
.collab-card-body {
  padding: 26px 30px 28px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.collab-card-meta {
  font-size: 11.5px; font-weight: 800;
  color: var(--accent);
  letter-spacing: .14em; text-transform: uppercase;
}
.collab-card-body h3 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900;
  font-size: 1.85rem;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}
.collab-card-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}
.collab-card-body p strong { color: var(--text); font-weight: 700; }
.collab-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 4px;
}
.collab-features li {
  font-size: 12.5px;
  color: var(--text-dim);
  list-style: none;
  position: relative;
  padding-left: 16px;
}
.collab-features li::before {
  content: "▸";
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: 700;
}
.collab-link-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding-top: 6px;
}
.collab-link-row a {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--accent-rgb),.08);
  border: 1px solid var(--line);
  color: var(--accent-cool);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  text-decoration: none;
  letter-spacing: .04em;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.collab-link-row a:hover { border-color: var(--accent); color: var(--accent); }

/* ===== LEGO Kits, full-display cards (no crop) ===== */
.kit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  justify-content: center;
  align-items: flex-start;
}
.kit-grid > .kit-card { flex: 0 0 300px; width: 300px; }
.kit-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.kit-card.clickable {
  cursor: pointer;
}
.kit-card.clickable:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0,0,0,.4), 0 0 0 1px var(--accent);
}
.kit-card .kit-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--sf33) 0%, var(--sf7) 100%);
  display: grid;
  place-items: center;
  padding: 14px;
}
.kit-card .kit-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.kit-card .kit-img-wrap .kit-cta-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.4);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em;
  pointer-events: none;
}
.kit-card .shop-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  background: var(--sf66);
  color: var(--ink-cool);
  border: 1px solid rgba(120,170,230,.35);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(2px);
}
.kit-card .shop-tag.in-shop {
  background: rgba(60,180,90,.22);
  border-color: rgba(110,220,140,.55);
  color: var(--ink-good);
}
.kit-card .shop-tag.unknown {
  background: var(--sf67);
  color: var(--text-dim);
  border-color: var(--w08);
}
.kit-card .kit-body {
  padding: 14px 18px 16px;
  text-align: center;
}
.kit-card .kit-body h3 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--accent);
  margin: 0 0 5px;
}
.kit-card .kit-body p {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
}

/* ========== misc ========== */
.callout {
  background: var(--bg-card); border: 1px solid var(--line); 
  border-radius: var(--radius-sm); padding: 14px 18px;
  margin: 14px 0;
  font-size: 14px; color: var(--text-dim);
}
.callout strong { color: var(--text); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; justify-content: center; }
.gallery figure { margin: 0; background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gallery figure img { width: 100%; height: 120px; object-fit: cover; }
.gallery figcaption { padding: 6px 10px; font-size: 11.5px; color: var(--text-dim); text-align: center; }

/* ===== Back-to-top button ===== */
/* v768: bigger, labelled, and above the Build Calculator. The button is now a
   column: a disc, then "Back to the Top" in small caps. Its bottom offset is
   set by script from the calculator's real height, so it stays clear whether
   the calculator is a thin bar or a full panel.
   v921: the disc was the Bat-Signal and the glow around it was Bat-Signal
   gold, both left over from Knight Shift. It is the Brick or Treat pumpkin
   moon now, with the glow moved to the Halloween orange so the ring, the
   glow and the label agree with the rest of the theme. */
.back-to-top {
  position: fixed;
  right: max(env(safe-area-inset-right, 0px), 22px);
  bottom: calc(max(env(safe-area-inset-bottom, 0px), 22px));
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(.96);
  transition: opacity var(--t-slow) ease, transform var(--t-slow) ease, bottom .25s ease;
  z-index: 9100;
}
.back-to-top .btt-disc {
  display: block; width: 64px; height: 64px; border-radius: 50%;
  /* v921: the jack-o-lantern moon, cut square out of Epic's Brick or Treat key
     art so a round crop lands on the carved face. The arrow stays underneath
     for anyone the image does not load for. */
  background: url("brickortreat/moon_disc.webp?v=929") center/cover no-repeat, #16110a;
  color: transparent; font-size: 22px; font-weight: 900; line-height: 64px; text-align: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 0 2px var(--accent-fill), 0 0 18px rgba(255,140,26,.34);
  transition: box-shadow var(--t-slow) ease;
}
.back-to-top .btt-label {
  display: block;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(6,8,14,.82); border: 1px solid rgba(255,140,26,.38);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
:root[data-theme="light"] .back-to-top .btt-label { background: rgba(255,255,255,.92); }
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.back-to-top:hover .btt-disc {
  box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 2px var(--accent-fill), 0 0 30px rgba(255,140,26,.62);
}
.back-to-top:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; border-radius: 12px; }

/* ===== v758: one focus ring for the whole site =====
   Keyboard focus was picked up by a handful of components individually and
   missed by everything else, so tabbing through most of the site showed
   nothing at all. This is the default for anything focusable that does not
   already declare its own, and it is the signal yellow. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 1px;
}

/* ===== Notifications Center (floating bell + dropdown panel) =====
   • #notif-bell sits at the top-right of the viewport (next to the
     mobile account button on phones, off in the corner on desktop).
   • #notif-panel slides out from under the bell, listing recent items
     pulled from notifications_list. */
#notif-bell {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: calc(max(env(safe-area-inset-right, 0px), 14px) + 60px);
  width: 44px; height: 44px;
  background: var(--sf7);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 9200;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
#notif-bell:hover { border-color: var(--accent); transform: translateY(-1px); }
#notif-bell.has-unread { border-color: var(--accent); }
#notif-bell[hidden] { display: none !important; }
.notif-bell-ico { line-height: 1; pointer-events: none; }
.notif-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: #ff5c6c;
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  border-radius: 999px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--sf68);
  box-shadow: 0 2px 6px rgba(255,90,108,.5);
}
.notif-bell-badge[hidden] { display: none !important; }

#notif-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  right: max(env(safe-area-inset-right, 0px), 14px);
  width: min(380px, calc(100vw - 28px));
  max-height: 70vh;
  z-index: 9300;
  background: var(--sf69);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
#notif-panel[hidden] { display: none !important; }
.notif-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--sf43);
}
.notif-panel-title {
  flex: 1;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 13.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.notif-panel-markall {
  background: none; border: 1px solid var(--line);
  color: var(--text-dim); font-size: 10.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  cursor: pointer; letter-spacing: .04em; text-transform: uppercase;
}
.notif-panel-markall:hover { border-color: var(--accent); color: var(--accent); }
.notif-panel-x {
  background: none; border: 0; color: var(--text-fade);
  font-size: 20px; line-height: 1; cursor: pointer;
  padding: 0 4px;
}
.notif-panel-x:hover { color: var(--accent); }
.notif-panel-body {
  overflow-y: auto;
  flex: 1;
  padding: 4px 6px;
}
.notif-empty {
  text-align: center;
  color: var(--text-fade);
  font-size: 13px;
  padding: 30px 14px;
}
.notif-item {
  display: flex; gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  margin: 2px 0;
  border: 1px solid transparent;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.notif-item:hover { background: var(--w04); border-color: var(--line); }
.notif-item.is-unread {
  background: rgba(var(--accent-rgb),.06);
  border-color: rgba(var(--accent-rgb),.30);
}
.notif-item-ico {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sf9); border-radius: 50%;
  font-size: 15px; flex: none;
  border: 1px solid var(--line);
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.notif-item-text  { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }
.notif-item-time  { font-size: 10.5px; color: var(--text-fade); margin-top: 4px; }
@media (max-width: 700px) {
  #notif-bell { right: max(env(safe-area-inset-right, 0px), 14px); top: calc(env(safe-area-inset-top, 0px) + 76px); width: 42px; height: 42px; }
  /* On phones the account button already sits top-right at top:18; push
     the bell underneath it so they don't collide. */
}

/* ===== Daily Trivia widget (home page) ===== */
.lf-trivia { margin: 16px auto 18px; max-width: 920px; }
.lf-trivia-card {
  background: linear-gradient(135deg, var(--sf70) 0%, var(--sf21) 100%);
  border: 1px solid rgba(var(--accent-rgb),.40);
  border-radius: 14px;
  padding: 16px 20px 18px;
  box-shadow: 0 6px 22px rgba(0,0,0,.32);
}
.lf-trivia-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 10px; flex-wrap: wrap;
}
.lf-trivia-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 17px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.lf-trivia-ico { font-size: 18px; }
.lf-trivia-streak {
  background: rgba(255,140,60,.14);
  border: 1px solid rgba(255,140,60,.45);
  color: var(--ink-bad);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
.lf-trivia-streak strong { color: #ffd9a3; font-size: 14px; }
.lf-trivia-q {
  color: var(--text); font-size: 15px; font-weight: 600;
  line-height: 1.45;
  margin-bottom: 14px;
}
.lf-trivia-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-trivia-opt {
  display: flex; align-items: center; gap: 10px;
  background: var(--sf71);
  border: 1.5px solid var(--line);
  color: var(--text);
  font: 600 13.5px/1.3 'Inter', sans-serif;
  padding: 11px 12px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, transform var(--t-fast) ease;
}
.lf-trivia-opt:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.lf-trivia-opt:active { transform: translateY(1px); }
.lf-trivia-letter {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.45);
  border-radius: 50%;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 13px;
}
.lf-trivia-label { flex: 1; min-width: 0; }
.lf-trivia-result {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.lf-trivia-result.is-correct {
  background: rgba(108,229,138,.10);
  border: 1px solid rgba(108,229,138,.45);
  color: #b6ecc4;
}
.lf-trivia-result.is-correct strong { color: #d6f5dd; }
.lf-trivia-result.is-wrong {
  background: rgba(255,120,120,.10);
  border: 1px solid rgba(255,120,120,.45);
  color: #ffb6b6;
}
.lf-trivia-result.is-wrong strong { color: #ffd0d0; }
.lf-trivia-locked-hint {
  font-size: 11.5px;
  color: var(--text-fade);
  text-align: center;
  font-style: italic;
}
@media (max-width: 540px) {
  .lf-trivia-opts { grid-template-columns: 1fr; }
}

/* ===== v162: Daily Trivia leaderboard (top 5, 2-on-top / 3-on-bottom) ===== */
.lf-trivia-leaderboard {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.lf-trivia-lb-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.4px;
}
.lf-trivia-lb-sub {
  font-size: 11.5px;
  color: var(--text-fade);
  margin: 2px 0 14px;
}
.lf-trivia-lb-loading {
  font-size: 12px;
  color: var(--text-fade);
  padding: 14px 0;
}
.lf-trivia-lb-empty {
  font-size: 12.5px;
  color: var(--text-fade);
  padding: 10px 0;
}
.lf-trivia-lb-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lf-trivia-lb-row-top {
  margin-bottom: 12px;
}
.lf-trivia-lb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  padding: 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.lf-trivia-lb-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(255, 212, 41, 0.06);
}
.lf-trivia-lb-card.is-gold   { border-color: #ffd429; background: linear-gradient(180deg, rgba(255,212,41,0.18), rgba(255,212,41,0.04)); }
.lf-trivia-lb-card.is-silver { border-color: #c0c4cc; background: linear-gradient(180deg, rgba(192,196,204,0.18), rgba(192,196,204,0.04)); }
.lf-trivia-lb-card.is-bronze { border-color: #d09060; background: linear-gradient(180deg, rgba(208,144,96,0.18), rgba(208,144,96,0.04)); }
.lf-trivia-lb-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.lf-trivia-lb-card.is-gold   .lf-trivia-lb-rank { color: #ffd429; }
.lf-trivia-lb-card.is-silver .lf-trivia-lb-rank { color: #c0c4cc; }
.lf-trivia-lb-card.is-bronze .lf-trivia-lb-rank { color: #d09060; }
.lf-trivia-lb-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-2);
  background: var(--bg-2);
}
.lf-trivia-lb-avatar-blank {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--text-dim);
}
.lf-trivia-lb-name {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lf-trivia-lb-count {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-fade);
}
@media (max-width: 540px) {
  .lf-trivia-lb-card { width: 100px; padding: 10px 8px 8px; }
  .lf-trivia-lb-avatar { width: 38px; height: 38px; }
  .lf-trivia-lb-row { gap: 10px; }
}

/* ===== Daily Quest Board (home page, below the trivia widget) ===== */
.lf-quests { margin: 12px auto 18px; max-width: 920px; }
.lf-quests-card {
  background: linear-gradient(180deg, var(--sf72), var(--sf46));
  border: 1px solid rgba(var(--accent-rgb),.18);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.lf-quests-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.lf-quests-title { font-weight: 800; font-size: 16px; color: var(--accent); letter-spacing: .02em; }
.lf-quests-ico { font-size: 18px; margin-right: 6px; }
.lf-quests-streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,140,40,.18); color: #ffd9a3;
  font-size: 13px; font-weight: 700;
}
.lf-quests-streak strong { color: #ffefc8; font-size: 15px; }
.lf-quests-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.lf-quest-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--w04);
  border: 1px solid var(--w06);
}
.lf-quest-row.is-done {
  background: rgba(108,229,138,.10);
  border-color: rgba(108,229,138,.30);
}
.lf-quest-check {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--w06); border: 1px solid var(--w12);
  font-size: 13px; color: var(--text-dim); flex-shrink: 0;
}
.lf-quest-row.is-done .lf-quest-check {
  background: rgba(108,229,138,.30); border-color: rgba(108,229,138,.55);
  color: #d6f5dd;
}
.lf-quest-label { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); }
.lf-quest-label small { display: block; color: var(--text-fade); font-size: 11.5px; margin-top: 2px; }
.lf-quest-next {
  font-size: 12px; color: var(--text-fade); margin: 8px 0 10px;
}
.lf-quest-next strong { color: #ffd9a3; }
.lf-quest-progress {
  height: 6px; border-radius: 6px; overflow: hidden;
  background: var(--w06); margin-top: 4px;
}
.lf-quest-progress-bar {
  height: 100%; background: linear-gradient(90deg, #ff8c28, #ffd9a3);
  border-radius: 6px; transition: width .4s ease;
}
.lf-quest-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 10px; border-top: 1px solid var(--w06);
}
.lf-quest-badges-title {
  width: 100%; font-size: 11.5px; color: var(--text-fade);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
.lf-quest-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--accent-rgb),.14); border: 1px solid rgba(var(--accent-rgb),.30);
  color: #ffe9a0; font-size: 12px; font-weight: 700;
}
.lf-quest-badge.is-locked {
  background: var(--w03); border-color: var(--w10);
  color: var(--text-fade); opacity: .6;
}
.lf-quests-cta {
  font-size: 13px; color: var(--text-dim); text-align: center;
  padding: 10px 0 2px;
}
.lf-quests-cta a { color: var(--accent); text-decoration: underline; cursor: pointer; }
@media (max-width: 540px) {
  .lf-quests-card { padding: 14px 14px; }
  .lf-quests-streak { font-size: 12px; padding: 3px 10px; }
}

/* ===== Live presence counter (forum page header) ===== */
.lf-presence {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sf73);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  margin: -4px auto 14px;
  max-width: max-content;
  font-size: 12.5px;
  color: var(--text-dim);
}
.lf-presence[hidden] { display: none !important; }
.lf-presence strong { color: var(--text); font-weight: 700; }

/* ===== v167: emoji reactions row ===== */
.lf-reactions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.lf-react-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text-dim);
  font-size: 13px; cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.lf-react-btn:hover { background: rgba(var(--accent-rgb),0.10); border-color: var(--accent); color: var(--text); }
.lf-react-btn.is-mine {
  background: rgba(var(--accent-rgb),0.18);
  border-color: var(--accent);
  color: var(--text);
}
.lf-react-emoji { font-size: 14px; line-height: 1; }
.lf-react-count { font-size: 11px; font-weight: 600; }

/* ===== v167: profile follow button + counts ===== */
.lf-follow-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
  font-size: 13px; color: var(--text-dim);
}
.lf-follow-counts strong { color: var(--text); }
.lf-follow-link { cursor: pointer; text-decoration: none; color: inherit; }
.lf-follow-link:hover strong { color: var(--accent); }
.lf-fl-item:hover { background: var(--w05); }
.lf-follow-btn {
  padding: 6px 16px;
  background: var(--accent-fill); color: #1a1206;
  border: 0; border-radius: 6px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}
.lf-follow-btn:hover { transform: translateY(-1px); background: #ffd86b; }
.lf-follow-btn.is-following {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
}
.lf-follow-btn.is-following:hover { background: rgba(255,80,80,0.16); color: #ff8080; border-color: rgba(255,80,80,0.4); }
.lf-follow-btn.is-following:hover .lf-follow-btn-label::after { content: ' · Unfollow'; }

/* ===== v167: activity feed tile ===== */
.lf-activity-feed {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 18px auto;
  max-width: 920px;
}



.lf-activity-event {
  display: flex; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.lf-activity-event:last-child { border-bottom: 0; }
.lf-activity-event-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.lf-activity-event-body { flex: 1; min-width: 0; }

.lf-activity-event-text { font-size: 12.5px; color: var(--text-dim); }
.lf-activity-event-text a { color: var(--accent); text-decoration: none; }
.lf-activity-event-text a:hover { text-decoration: underline; }
.lf-activity-event-time { font-size: 11px; color: var(--text-fade); margin-top: 2px; }

/* ===== v167: LIVE NOW badge on Featured Creators ===== */
.creator-live-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: #e02828;
  color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(224,40,40,0.4), 0 4px 10px rgba(224,40,40,0.4);
  z-index: 2;
  animation: lf-live-pulse 1.8s ease-in-out infinite;
}
.creator-live-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: #fff;
}
@keyframes lf-live-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224,40,40,0.4), 0 4px 10px rgba(224,40,40,0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(224,40,40,0.18), 0 4px 14px rgba(224,40,40,0.6); }
}
.creator-card { position: relative; }
.creator-live-viewers {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.65);
  color: #fff; font-size: 11px; font-weight: 600;
  border-radius: 4px;
  z-index: 2;
}
.lf-pres-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6cf57e;
  box-shadow: 0 0 0 3px rgba(108,245,126,.20);
  animation: lf-pres-pulse 2.2s ease-in-out infinite;
}
@keyframes lf-pres-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(108,245,126,.20); }
  50%      { box-shadow: 0 0 0 6px rgba(108,245,126,.05); }
}
.lf-pres-divider { color: var(--text-fade); margin: 0 2px; }
.lf-pres-sample {
  flex-basis: 100%;
  color: var(--text-fade);
  font-size: 11px;
  font-style: italic;
  margin-top: -2px;
}

/* ===== One-time page popups ===== */
.lf-onetime-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 9500;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) ease;
}
.lf-onetime-overlay.is-open { opacity: 1; pointer-events: auto; }
.lf-onetime-card {
  background: linear-gradient(160deg, var(--sf75) 0%, var(--sf76) 100%);
  border: 1px solid rgba(var(--accent-rgb),.55);
  border-radius: 14px;
  padding: 24px 26px 22px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  position: relative;
  transform: translateY(8px) scale(.98);
  transition: transform var(--t-slow) ease;
}
.lf-onetime-overlay.is-open .lf-onetime-card { transform: translateY(0) scale(1); }
.lf-onetime-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0;
  color: var(--text-fade);
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.lf-onetime-x:hover { color: var(--accent); }
.lf-onetime-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 22px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  line-height: 1.2;
}
.lf-onetime-body {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.lf-onetime-go {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--accent-fill) 0%, #ffb834 100%);
  border: 0;
  color: #1a1f2e;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 800; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.30);
}
.lf-onetime-go:hover { filter: brightness(1.06); }

/* ===== Mobile / PWA back button ===== */
/* Floating "‹ Back" pill, only appears on narrow screens or when the
   site is launched as an installed PWA (display-mode: standalone) and
   the user has navigated past the landing page. Sits just below the
   hamburger button so it never overlaps it. */
#mobile-back-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
  left: max(env(safe-area-inset-left, 0px), 14px);
  z-index: 9100;
  display: flex; align-items: center; gap: 4px;
  background: var(--sf21);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: 700 13px/1 'Barlow Condensed','Poppins',sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 14px 8px 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
#mobile-back-btn:hover, #mobile-back-btn:focus { border-color: var(--accent); color: var(--accent); outline: 0; }
#mobile-back-btn[hidden] { display: none !important; }
#mobile-back-btn .mbb-arrow { font-size: 18px; line-height: 1; margin-top: -1px; }

/* ===== Mobile nav hamburger ===== */
.mobile-top-bar { display: none; }

/* ===== Mobile sticky search bar (between hamburger + account button) =====
   Hidden on desktop entirely; on mobile/coarse-pointer it pins to the top
   of the viewport between the 48px hamburger and 48px account button (each
   with 14px outer padding), giving the user a permanent search field. The
   results dropdown opens full-width below the input. */
.m-search-wrap { display: none; }
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .m-search-wrap {
    display: block;
    position: fixed;
    /* Sit on a second row BELOW the hamburger + account button so the
       three never overlap (the buttons are 48px tall at top:18px, so the
       second row starts at 18 + 48 + 10 = 76px from the safe-area-top). */
    top: calc(env(safe-area-inset-top, 0px) + 76px);
    left: max(env(safe-area-inset-left, 0px), 14px);
    /* v287: end the bar LEFT of the notif bell (42px wide at right:14)
       so the bell and the bar's own clear/collapse buttons never stack. */
    right: calc(max(env(safe-area-inset-right, 0px), 14px) + 52px);
    z-index: 9200;
  }
  .m-search {
    width: 100%;
    height: 48px;
    padding: 0 80px 0 14px;
    background: var(--sf7);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-size: 14.5px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    -webkit-appearance: none;
  }
  .m-search:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 2px rgba(var(--accent-rgb),.20);
  }
  .m-search::placeholder { color: var(--text-fade); }
  /* v792: the floating Back button sat on top of the search box's first
     70px on phones. It now lives inside the search row, and the input makes
     room for it; the native search cancel button is hidden so the field
     does not show two clear buttons. */
  #lf-back-btn { top: calc(env(safe-area-inset-top, 0px) + 80px) !important; left: max(env(safe-area-inset-left, 0px), 18px) !important; padding: 7px 10px !important; font-size: 12px !important; z-index: 9210 !important; }
  body.lf-has-back .m-search { padding-left: 84px; }
  .m-search::-webkit-search-cancel-button, .m-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
  .m-search-clear {
    position: absolute;
    top: 50%; right: 44px;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: var(--w06);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 18px; line-height: 1;
    display: none;
  }
  .m-search-wrap.has-text .m-search-clear { display: grid; place-items: center; }
  /* v246: mobile search collapse button + collapsed bubble */
  .m-search-collapse {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 30px; height: 30px; border: 0; border-radius: 7px;
    background: var(--w09); color: var(--text-dim); cursor: pointer;
    display: grid; place-items: center; font-size: 13px; line-height: 1; padding: 0; z-index: 3;
  }
  .m-search-collapse:hover { color: var(--accent); }
  .m-search-collapse .sc-label { display: none; }
  /* v287: the mobile notif bell lives at top 76 / right 14 -- the exact
     spot this bubble used to occupy, which buried the reopen button under
     the bell (user report, June 11). Collapsed bubble now sits BELOW the
     bell (76 + 42px bell + 10px gap = 128). */
  .m-search-wrap.m-search-collapsed {
    left: auto;
    right: max(env(safe-area-inset-right, 0px), 14px);
    width: auto;
    top: calc(env(safe-area-inset-top, 0px) + 128px);
  }
  .m-search-wrap.m-search-collapsed .m-search,
  .m-search-wrap.m-search-collapsed .m-search-clear,
  .m-search-wrap.m-search-collapsed .m-search-results { display: none !important; }
  .m-search-wrap.m-search-collapsed .m-search-collapse {
    position: static; transform: none; width: 48px; height: 48px; border-radius: 10px;
    background: var(--sf7); border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(0,0,0,.45); font-size: 18px;
  }
  .m-search-wrap.m-search-collapsed .m-search-collapse .sc-chev { display: none; }
  .m-search-wrap.m-search-collapsed .m-search-collapse .sc-label { display: inline; }
  .m-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;            /* full-width relative to the wrap */
    max-height: min(60vh, 480px);
    overflow-y: auto;
    background: var(--sf77);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
    padding: 6px;
  }
  .m-search-results .search-result {
    display: block; width: 100%;
    padding: 10px 12px; margin: 2px 0;
    text-align: left; cursor: pointer;
    background: transparent; border: 0; border-radius: 8px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
  }
  .m-search-results .search-result:hover,
  .m-search-results .search-result:focus {
    background: rgba(var(--accent-rgb),.10);
  }
  .m-search-results .sr-name { font-weight: 700; font-size: 14px; }
  .m-search-results .sr-page { font-size: 11.5px; color: var(--text-fade); margin-top: 2px; }
  .m-search-results .search-result-empty {
    padding: 14px 12px; color: var(--text-fade); font-size: 13px; text-align: center;
  }
}
/* Very narrow phones: tighter side padding only, the search bar already
   has its own row below the buttons, so no left/right offset for them. */
@media (max-width: 380px) {
  .m-search-wrap {
    left: max(env(safe-area-inset-left, 0px), 10px) !important;
    right: max(env(safe-area-inset-right, 0px), 10px) !important;
  }
  .m-search { font-size: 13.5px; padding: 0 32px 0 12px; }
}
.nav-hamburger {
  display: none;
  position: fixed;
  /* Push the hamburger below iOS notch / status bar; stays at 14px on devices
     without a notch (env(safe-area-inset-top) is 0 there). */
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: max(env(safe-area-inset-left, 0px), 14px);
  width: 48px; height: 48px;
  background: var(--sf7); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; padding: 12px 10px;
  flex-direction: column; justify-content: space-between; align-items: stretch;
  z-index: 9200;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.nav-hamburger span {
  display: block; height: 2px; background: var(--accent-fill); border-radius: 1px;
  transition: transform var(--t-slow) ease, opacity var(--t-slow) ease;
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ===== Mobile account button (top-right, mirrors the sidebar widget) ===== */
.mobile-acct-btn {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: max(env(safe-area-inset-right, 0px), 14px);
  width: 48px; height: 48px;
  z-index: 9200;
}
.mobile-acct-btn .mab-tap {
  width: 100%; height: 100%;
  background: var(--sf7);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer; padding: 0;
  display: grid; place-items: center;
  color: var(--accent);
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 900; font-size: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  position: relative; overflow: hidden;
}
.mobile-acct-btn .mab-tap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mobile-acct-btn .mab-tap svg { width: 28px; height: 28px; display: block; }
/* Signed-out: yellow LEGO head silhouette on dark button */
.mobile-acct-btn.signed-out .mab-tap {
  color: var(--accent);
  background: var(--sf7);
  border-color: rgba(var(--accent-rgb),.45);
}
.mobile-acct-btn.signed-in  .mab-tap { background: linear-gradient(135deg, var(--accent-fill), #d6a635); color: var(--accent-ink); }
.mobile-acct-btn .mab-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 9px; height: 9px;
  background: var(--ink-good-2); border: 2px solid var(--sf7);
  border-radius: 50%;
}
.mobile-acct-menu {
  position: absolute;
  top: 56px; right: 0;
  background: var(--sf56);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  min-width: 200px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accent-rgb),.10);
  display: none;
  flex-direction: column; gap: 6px;
  z-index: 9201;
  font-family: 'Inter', sans-serif;
}
.mobile-acct-menu.open { display: flex; }
.mobile-acct-menu .mab-name {
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800; font-size: 14px; color: var(--text);
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  word-break: break-all;
}
.mobile-acct-menu .mab-item {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 12px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  text-align: left; cursor: pointer;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.mobile-acct-menu .mab-item:hover { background: rgba(var(--accent-rgb),.10); color: var(--accent); border-color: rgba(var(--accent-rgb),.4); }
.mobile-acct-menu .mab-item.danger:hover { background: rgba(255,80,80,.12); color: #ff7c7c; border-color: rgba(255,80,80,.45); }
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .mobile-acct-btn { display: block; }
}

/* ===== Did You Know · home rotator ===== */
.dyk-card {
  max-width: 880px; margin: 22px auto;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.10) 0%, rgba(var(--accent-rgb),.02) 100%);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
}
.dyk-eyebrow {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 11.5px; letter-spacing: .15em; font-weight: 800;
  color: var(--accent); text-transform: uppercase; flex-shrink: 0;
}
#did-you-know {
  font-size: 13.5px; color: var(--text); line-height: 1.5;
  transition: opacity var(--t-slow) ease;
}

/* ===== Recently Updated timeline (Overview) ===== */
.recent-timeline {
  max-width: 880px; margin: 18px auto 28px;
  position: relative;
}
.recent-timeline::before {
  content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-fill) 0%, rgba(var(--accent-rgb),.15) 100%);
  border-radius: 1px;
}
.rt-item {
  position: relative; padding: 8px 0 14px 38px;
  cursor: pointer;
}
.rt-item::before {
  content: ""; position: absolute; left: 8px; top: 14px;
  width: 14px; height: 14px;
  background: var(--accent-fill); border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18);
}
.rt-row {
  display: flex; gap: 14px; align-items: center;
  background: var(--sf8); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease, background var(--t-slow) ease;
}
.rt-item:hover .rt-row {
  transform: translateX(4px);
  border-color: rgba(var(--accent-rgb),.35);
  background: var(--sf19);
}
.rt-thumb {
  width: 64px; height: 48px;
  flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  background: #0b0d18;
}
.rt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-meta { flex: 1; min-width: 0; }
.rt-date {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 11px; letter-spacing: .08em; font-weight: 800;
  color: var(--accent); text-transform: uppercase;
}
.rt-name { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }
.rt-arrow { color: var(--text-mute); font-size: 18px; transition: color var(--t-slow) ease, transform var(--t-slow) ease; }
.rt-item:hover .rt-arrow { color: var(--accent); transform: translateX(3px); }

/* ===== Build Calculator: + button on util-tiles, recipe-cards, free-reward tiles, village-cards ===== */
/* v612: style the BUTTON, not a list of containers. The yellow round + only
   existed for util-tiles, recipe-cards, tile[data-recipe] and village-cards.
   A resource tile gets the same .ut-add button injected but matched none of
   those selectors, so it fell back to a default white inline button sitting
   next to the rarity pill. Anything that can go into the Build Calculator now
   gets the identical affordance. */
.ut-add {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.95) 0%, rgba(220,170,40,.95) 100%);
  color: var(--accent-ink); font-weight: 900; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity var(--t-slow) ease, transform var(--t-slow) ease;
  z-index: 5;
}
/* Reveal on hover of whatever holds it. Keyboard users get it on focus too,
   which the container-list version never handled. */
.tile:hover .ut-add,
.util-tile:hover .ut-add,
.recipe-card:hover .ut-add,
.village-card:hover .ut-add,
.ut-add:focus-visible { opacity: 1; }
.ut-add:hover { transform: scale(1.1); }
.ut-add.flash { animation: utAdd .35s ease-out; }
/* The + is absolutely positioned, so every host needs a positioning context.
   Resource tiles never had one, which is the other half of why theirs sat
   inline in the rarity row instead of in the corner. */
.tile { position: relative; }
/* Recipe-cards already have position: relative implicitly via h4 styling, but
   make sure to enforce it so the absolutely-positioned + button anchors. */
.recipe-card { position: relative; }
.village-card { position: relative; }
.village-card .ut-add {
  width: 30px; height: 30px;
  font-size: 20px;
  top: 10px; right: 10px;
}
@keyframes utAdd {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); box-shadow: 0 0 0 8px rgba(var(--accent-rgb),.35); }
  100% { transform: scale(1); }
}
/* Build Calculator floating panel */
.calc-panel {
  position: fixed; right: 22px; bottom: 80px;
  z-index: 9050;
  background: var(--sf78);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  width: 320px; max-width: calc(100vw - 32px);
  overflow: hidden;
}
.calc-panel.has-items { width: 380px; }
.calc-panel.hint { animation: calcHint 2.2s ease; }
@keyframes calcHint {
  0%   { box-shadow: 0 18px 50px rgba(0,0,0,.6); }
  20%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),.35), 0 18px 50px rgba(0,0,0,.6); }
  100% { box-shadow: 0 18px 50px rgba(0,0,0,.6); }
}
.calc-toggle {
  width: 100%; background: transparent; border: 0; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 700;
  font-family: inherit;
}
.calc-toggle:hover { background: rgba(var(--accent-rgb),.08); }
.calc-icon { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.calc-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.calc-label { flex: 1; text-align: left; letter-spacing: .03em; }
.calc-count {
  background: var(--accent-fill); color: var(--accent-ink); font-weight: 900;
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  min-width: 18px; text-align: center;
}
.calc-count.empty { background: var(--w10); color: var(--text-mute); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; padding: 3px 10px; }
.calc-chev { color: var(--text-mute); transition: transform var(--t-slow) ease; }
.calc-panel.expanded .calc-chev { transform: rotate(180deg); }
.calc-body {
  border-top: 1px solid var(--w06);
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-slow) ease;
}
.calc-panel.expanded .calc-body { max-height: 70vh; overflow-y: auto; }
.calc-section-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 11px; letter-spacing: .14em; font-weight: 800;
  color: var(--accent); text-transform: uppercase;
  padding: 14px 16px 8px;
}
.calc-items { padding: 0 12px 8px; }
.calc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--sf23); border-radius: 8px;
  margin-bottom: 6px;
}
.calc-item img {
  width: 36px; height: 36px; object-fit: contain;
  background: var(--w04); border-radius: 6px; padding: 3px;
}
.calc-item .calc-noimg { width: 36px; height: 36px; background: var(--w04); border-radius: 6px; }
.calc-item-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text); }
.calc-qty { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
.calc-qty button {
  width: 22px; height: 22px;
  background: rgba(var(--accent-rgb),.15); border: 1px solid rgba(var(--accent-rgb),.4);
  color: var(--accent); border-radius: 6px;
  cursor: pointer; padding: 0; line-height: 1; font-weight: 800; font-size: 13px;
}
.calc-qty button:hover { background: rgba(var(--accent-rgb),.3); }
.calc-mats { padding: 0 12px 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.calc-mat {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--sf23); border-radius: 6px;
}
.calc-mat img {
  width: 28px; height: 28px; object-fit: contain;
  background: var(--w04); border-radius: 4px; padding: 2px;
}
.calc-mat-noimg {
  width: 28px; height: 28px; border-radius: 4px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.05));
  display: grid; place-items: center;
  color: var(--accent); font-size: 13px; font-weight: 900;
  border: 1px dashed rgba(var(--accent-rgb),.35);
}
.calc-mat-qty { color: var(--accent); font-weight: 900; font-size: 12px; min-width: 28px; }
.calc-mat-name { color: var(--text-dim); font-size: 11px; line-height: 1.2; }
.calc-actions {
  padding: 0 16px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.calc-actions .calc-clear { grid-column: 1 / -1; }
.calc-copy, .calc-share {
  background: rgba(var(--accent-rgb),.10); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 8px; padding: 8px;
  cursor: pointer; font-weight: 700; font-size: 11.5px;
  font-family: inherit;
  transition: background var(--t-slow) ease;
}
.calc-copy:hover, .calc-share:hover { background: rgba(var(--accent-rgb),.20); }
.calc-copy.flashed, .calc-share.flashed { background: rgba(108,229,138,.18); border-color: rgba(108,229,138,.45); color: var(--ink-good-2); }
.calc-clear {
  width: 100%; background: transparent; color: #ef6b6b;
  border: 1px solid rgba(239,107,107,.4);
  border-radius: 8px; padding: 8px;
  cursor: pointer; font-weight: 700; font-size: 12px;
}
.calc-clear:hover { background: rgba(239,107,107,.1); }
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .calc-panel { right: 12px; bottom: 80px; width: calc(100vw - 24px); }
  .calc-panel.calc-minned { width: auto !important; }
}

/* v246: Build Calculator minimize-to-bubble */
.calc-head { display: flex; align-items: stretch; }
.calc-head .calc-toggle { width: auto; flex: 1; }
.calc-min-btn {
  background: transparent; border: 0; border-left: 1px solid var(--w07);
  color: var(--text-mute); cursor: pointer; font-size: 17px; line-height: 1;
  padding: 0 14px; font-family: inherit;
}
.calc-min-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.calc-panel.calc-minned { width: auto !important; }
.calc-panel.calc-minned.has-items { width: auto !important; }
.calc-panel.calc-minned .calc-label,
.calc-panel.calc-minned .calc-chev,
.calc-panel.calc-minned .calc-min-btn,
.calc-panel.calc-minned .calc-body { display: none !important; }
.calc-panel.calc-minned .calc-count.empty { display: none !important; }
.calc-panel.calc-minned .calc-toggle { padding: 12px 15px; }

/* v246: Search bar collapse (desktop sidebar) */
.search-collapse {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: var(--w06); color: var(--text-dim); cursor: pointer;
  display: grid; place-items: center; font-size: 13px; line-height: 1; padding: 0; z-index: 2;
}
.search-collapse:hover { color: var(--accent); background: rgba(var(--accent-rgb),.12); }
.search-collapse .sc-label { display: none; }
.search-wrap .search { padding-right: 40px; }
.search-wrap.search-collapsed { display: flex; align-items: center; }
.search-wrap.search-collapsed .search,
.search-wrap.search-collapsed .search-results { display: none !important; }
/* v792: in the desktop top nav the search box is only 130px wide under
   1500px, so the results dropdown anchors to its right edge at a readable
   width instead of inheriting the box's width. */
.lf-topnav-on .search-results { left: auto; right: 0; width: min(380px, calc(100vw - 32px)); }
.search-wrap.search-collapsed .search-collapse {
  position: static; transform: none; width: auto; height: 38px; padding: 0 14px;
  gap: 8px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text-dim); font-weight: 700; font-size: 13px; font-family: inherit;
}
.search-wrap.search-collapsed .search-collapse .sc-chev { display: none; }
.search-wrap.search-collapsed .search-collapse .sc-label { display: inline; }

/* Inline ingredient thumbnail in recipe-card lists */
.recipe-card .ingr-list .ingr-li {
  display: flex; align-items: center; gap: 6px;
}
.ingr-thumb {
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--w04);
  border-radius: 4px;
  padding: 2px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* "Any X" rotator inside ingredient lists */
.any-li {
  display: flex; align-items: center; gap: 8px;
}
.any-li .any-name {
  flex: 1;
  font-style: italic; color: var(--text-mute);
  font-size: 12.5px;
}
.any-thumbs {
  display: inline-flex; align-items: center;
  width: 26px; height: 26px;
  border-radius: 5px;
  background: var(--w04);
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.any-thumb {
  width: 100%; height: 100%; object-fit: contain;
  padding: 2px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

/* ===== v526 scroll-performance: offscreen tiles/cards skip rendering ===== */
/* content-visibility:auto lets the engine skip style/layout/paint for
   offscreen units. With 12k+ images and 75k DOM nodes mounted, this is the
   difference between janky and smooth scroll on tile-heavy pages. The
   contain-intrinsic-size keeps scrollbar geometry stable (approx tile size). */
.tile, .kit-card, .pass-card, .set-card, .apparel-card, .bvs-card,
.village-card, .upd-list-item, .recipe-card, .boss-card, .tip-card,
.bv-part, .lf-card {
  content-visibility: auto;
  contain-intrinsic-size: 180px 210px;
}
.cat-section, .tab-pane { content-visibility: auto; contain-intrinsic-size: auto 600px; }
/* v527: extend content-visibility to dense image-tile grids that lacked it (profile/weapons pages) */
.pvc-tile, .profile-tile, .wrr-tile, .cmp-resource-tile { content-visibility: auto; contain-intrinsic-size: auto 140px; }

/* ===== Print stylesheet ===== */
@media print {
  body { background: white !important; color: black !important; }
  .sidebar, .calc-panel, .back-to-top, .nav-hamburger, .kbd-help, .random-row,
  .upd-trailer, video, iframe, .home-stats-row, .featured-video,
  .footer-link, .ut-add, .upd-back, .upd-next { display: none !important; }
  main { margin-left: 0 !important; padding: 0 !important; }
  .page { display: block !important; }
  .page-head h1, h2, h3, h4 { color: black !important; page-break-after: avoid; }
  .tile, .recipe-card, .upd-section, .tip-card, .boss-card, .calc-mat {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    color: black !important;
  }
  .tile-name, .tip-card h4, .boss-card h4, .recipe-card h4 { color: black !important; }
  .tile-sub, .tip-card p, .boss-desc, .recipe-effect { color: #333 !important; }
  a { color: black !important; text-decoration: none !important; }
  .rarity-pill { border: 1px solid #999 !important; color: #333 !important; background: #f6f6f6 !important; }
}

/* ===== Site Footer ===== */
.site-footer {
  margin-top: 56px;
  border-top: 1px solid rgba(var(--accent-rgb),.22);
  /* v758: Gotham behind the footer. The gradient that was already here sits
     on top of it, so the street reads as texture rather than a picture, and
     the whole thing still resolves on the light theme because the gradient
     is built from theme tokens. */
  background:
    linear-gradient(180deg, var(--sf79) 0%, var(--sf80) 100%),
    linear-gradient(180deg, transparent 0%, var(--footer-floor) 62%, var(--footer-floor) 100%),
    var(--footer-art) center top/cover no-repeat;
  padding: 36px 24px 22px;
}
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 13px; letter-spacing: .12em; font-weight: 800;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-text {
  font-size: 12px; color: var(--text-mute); line-height: 1.55;
}
.footer-link {
  display: block;
  font-size: 12.5px; color: var(--text-dim);
  text-decoration: none; padding: 3px 0;
  transition: color var(--t-slow) ease, transform var(--t-slow) ease;
  cursor: pointer;
}
.footer-link:hover { color: var(--accent); transform: translateX(3px); }
.footer-translate {
  background: rgba(0,0,0,.4);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  width: 100%;
  max-width: 200px;
  margin-bottom: 4px;
}
.footer-translate:focus { outline: 0; border-color: var(--accent); }
.footer-translate:hover { border-color: rgba(var(--accent-rgb),.4); }
.footer-fine {
  max-width: 1100px; margin: 28px auto 0;
  padding-top: 16px; border-top: 1px solid var(--w04);
  font-size: 10.5px; color: var(--text-fade);
  letter-spacing: .03em; text-align: center; line-height: 1.6;
}
.footer-ip {
  max-width: 1100px; margin: 12px auto 0;
  padding: 12px 18px 4px;
  font-size: 10.5px; color: var(--text-fade);
  letter-spacing: .03em; text-align: center; line-height: 1.6;
  opacity: .85;
}
.footer-legal-notice {
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 12px 18px;
  border: 1px solid rgba(var(--accent-rgb), .28);
  background: rgba(var(--accent-rgb), .06);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-fade);
  text-align: center;
  line-height: 1.55;
  letter-spacing: .02em;
}
.footer-legal-notice strong {
  color: var(--accent);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 10.5px;
  display: block;
  margin-bottom: 4px;
}
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ===== First-visit page popups (Events / Trackers / Forum welcome notices) ===== */
.lf-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: lfPopupFadeIn .2s ease;
}
@keyframes lfPopupFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lfPopupSlideIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.lf-popup-card {
  max-width: 520px;
  width: 100%;
  background: linear-gradient(180deg, var(--sf81) 0%, var(--sf69) 100%);
  border: 1px solid rgba(var(--accent-rgb),.45);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb),.2);
  animation: lfPopupSlideIn .25s ease;
}
.lf-popup-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: .02em;
  color: var(--accent);
  margin: 0 0 10px;
}
.lf-popup-body {
  color: var(--text-dim);
  font-size: 14px; line-height: 1.55;
}
.lf-popup-body strong { color: var(--text); }
.lf-popup-actions {
  display: flex; justify-content: flex-end;
  margin-top: 16px;
}
.lf-popup-close-btn {
  background: linear-gradient(135deg, var(--accent) 0%, #f8b830 100%);
  color: #1a1300;
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-weight: 800; font-size: 13.5px;
  cursor: pointer;
  letter-spacing: .03em;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.3);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.lf-popup-close-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--accent-rgb),.45); }

/* ===== Forum banned-words warning (shown when a post is blocked) ===== */
.forum-block-warning {
  background: rgba(255,90,90,.12);
  border: 1px solid rgba(255,90,90,.55);
  color: #ff9999;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.forum-block-warning strong { color: var(--accent); }
.forum-block-warning .fbw-word {
  display: inline-block;
  background: rgba(255,210,40,.18);
  color: var(--accent);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  margin: 2px 3px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ===== Forum media attachments (images / videos posted with messages) ===== */
.forum-attach-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.forum-attach-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(106,183,255,.10);
  border: 1px solid rgba(106,183,255,.4);
  color: #9fc7ff;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.forum-attach-btn:hover {
  background: rgba(106,183,255,.18); color: #cfe1ff;
  border-color: rgba(106,183,255,.6);
}
.forum-attach-btn[disabled] { opacity: .55; cursor: wait; }
.forum-attach-status {
  font-size: 12px; color: var(--text-mute); font-style: italic;
}
.forum-attach-input { display: none; }
.forum-attach-hint {
  font-size: 10.5px;
  font-weight: 500;
  opacity: .65;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.forum-attachment {
  display: block;
  max-width: 100%;
  max-height: 480px;
  margin: 10px auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #000;
}
.forum-attachment-video { width: 100%; }

/* ===== Legal pages (Terms / Privacy / Disclaimer / DMCA) ===== */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 4px 4px 60px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.72;
}
.legal-page p { margin: 0 0 14px; }
.legal-page h2 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 20px; font-weight: 800;
  color: var(--text);
  margin: 28px 0 10px;
  letter-spacing: .01em;
}
.legal-page h2:first-of-type { margin-top: 18px; }
.legal-page ul, .legal-page ol {
  margin: 0 0 14px 22px;
  padding: 0;
}
.legal-page li { margin: 0 0 6px; }
.legal-page code {
  background: var(--w06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.legal-page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-page a:hover { color: #fff; }
.legal-page strong { color: var(--text); }

/* ===== Random Discovery row ===== */
.random-row {
  max-width: 880px; margin: 14px auto 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.random-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.10) 0%, rgba(var(--accent-rgb),.02) 100%);
  border: 1px solid rgba(var(--accent-rgb),.3);
  color: var(--accent);
  padding: 10px 16px;
  border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: .03em;
  transition: background var(--t-slow) ease, transform var(--t-slow) ease, border-color var(--t-slow) ease;
}
.random-btn:hover {
  background: rgba(var(--accent-rgb),.18);
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),.55);
}

/* ===== Boss Codex ===== */
.boss-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px; max-width: 1100px; margin: 0 auto;
}
.boss-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sf82) 0%, var(--sf21) 100%);
  border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.boss-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb),.4);
  box-shadow: 0 16px 36px rgba(0,0,0,.5);
}
.boss-img {
  height: 200px; overflow: hidden;
  background: linear-gradient(135deg, #2a1a3a 0%, #1c2042 100%);
  position: relative;
}
.boss-img img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 14px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
}
.boss-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.boss-body { padding: 16px 18px 18px; }
.boss-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.boss-loc {
  font-size: 11px; color: var(--text-mute);
  letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700;
}
.boss-card h4 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 22px; font-weight: 900; color: var(--accent);
  letter-spacing: .03em; text-transform: uppercase;
  margin: 0 0 8px;
}
.boss-desc {
  color: var(--text-dim); font-size: 13px; line-height: 1.55;
  margin: 0 0 12px;
}
.boss-stats { list-style: none; padding: 0; margin: 0; }
.boss-stats li {
  display: flex; gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--w05);
  font-size: 12.5px; color: var(--text);
}
.boss-stats li:first-child { border-top: 0; }
.boss-stats strong {
  color: var(--accent);
  min-width: 78px; flex-shrink: 0;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding-top: 1px;
}

/* ===== Tips & Tricks ===== */

.tip-card {
  position: relative;
  background: linear-gradient(180deg, var(--sf19) 0%, var(--sf83) 100%);
  border: 1px solid var(--line);
  
  border-radius: 12px;
  padding: 18px 18px 16px 22px;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.tip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),.4);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.tip-card h4 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 17px; font-weight: 800; color: var(--accent);
  margin: 0 50px 8px 0;
  letter-spacing: .02em; text-transform: uppercase;
}
.tip-card p {
  color: var(--text-dim); font-size: 13.5px; line-height: 1.55;
  margin: 0;
}

/* ===== My Progress ===== */
.progress-summary {
  max-width: 880px; margin: 0 auto 22px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.06) 0%, rgba(var(--accent-rgb),.01) 100%);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 18px;
}
.ps-num {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 44px; font-weight: 900; color: var(--accent);
  line-height: 1;
}
.ps-meta { flex: 1; }
.ps-meta .ps-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.ps-meta .ps-text { font-size: 14px; color: var(--text); margin-top: 4px; }
.ps-bar {
  flex: 1; height: 10px;
  background: var(--w06);
  border-radius: 5px; overflow: hidden;
}
.ps-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-fill) 0%, #ffd870 100%);
  transition: width .4s ease;
}
.ps-rank {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  color: var(--accent); text-transform: uppercase;
  background: rgba(var(--accent-rgb),.12);
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),.35);
}
.progress-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.prog-cat {
  background: var(--sf8); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px;
}
.prog-cat-head {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--w05);
  padding-bottom: 10px; margin-bottom: 10px;
}
.prog-cat-icon { font-size: 22px; }
.prog-cat-name {
  flex: 1;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 16px; font-weight: 800; color: var(--accent);
  letter-spacing: .04em; text-transform: uppercase;
}
.prog-cat-count {
  font-size: 12px; font-weight: 700; color: var(--text-mute);
}
.prog-cat-selectall {
  background: transparent; border: 1px solid rgba(var(--accent-rgb),.35);
  color: var(--accent); border-radius: 6px;
  padding: 4px 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast);
  margin-left: 6px;
}
.prog-cat-selectall:hover { background: rgba(var(--accent-rgb),.12); border-color: var(--accent); }
.prog-list { display: flex; flex-direction: column; gap: 5px; }
.prog-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  background: var(--sf61); border: 1px solid var(--w04);
  cursor: pointer; transition: background var(--t-slow) ease, border-color var(--t-slow) ease;
}
.prog-item:hover { background: rgba(var(--accent-rgb),.06); border-color: rgba(var(--accent-rgb),.25); }
.prog-item.done { background: rgba(108,229,138,.07); border-color: rgba(108,229,138,.18); }
.prog-item.done .prog-text { color: var(--text-mute); text-decoration: line-through; }
.prog-item input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.prog-text { flex: 1; font-size: 12.5px; color: var(--text); }
.progress-actions { max-width: 1100px; margin: 22px auto 0; text-align: right; }
.prog-reset {
  background: transparent; color: var(--text-mute);
  border: 1px solid var(--w12);
  border-radius: 8px; padding: 8px 16px;
  cursor: pointer; font-family: inherit; font-size: 12px;
}
.prog-reset:hover { color: #ef6b6b; border-color: rgba(239,107,107,.4); }

/* ===== My Profile ===== */

/* Hero header */
.profile-hero {
  position: relative;
  max-width: 1080px; margin: 0 auto 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1f33 0%, #0f1322 60%, #1a1325 100%);
}
.profile-hero-banner {
  /* Tall enough to show full banner artwork (titles, captions, etc.).
     Matches the 1200×240 canvas resize used at upload time so the source
     image fits with minimal cropping. */
  height: 220px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.25), rgba(108,229,138,.18) 50%, rgba(108,158,229,.22));
  position: relative;
}
.profile-hero-banner::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(var(--accent-rgb),.35) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(108,158,229,.3) 0%, transparent 55%);
  pointer-events: none;
}
.profile-hero-body {
  display: flex; gap: 22px; align-items: center;
  padding: 14px 22px 18px;
  position: relative;
  flex-wrap: wrap;
}
.profile-avatar-wrap {
  flex: 0 0 auto;
  width: 116px; height: 116px;
  border-radius: 50%;
  background: var(--bg-2);
  /* v820: was var(--bg-1), which is defined nowhere, so the whole border
     declaration was invalid and the avatar had no ring against the banner. */
  border: 4px solid var(--bg-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  overflow: hidden;
  display: grid; place-items: center;
  /* Negative top margin pulls only the avatar up onto the banner, name,
     joined date, and chips stay safely in the dark area below. */
  margin-top: -64px;
  align-self: flex-start;
}
.profile-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* Click-to-change avatar (visible only in Edit mode). Wraps the avatar in
   a button that calls Account.pickAvatar(). The pencil overlay appears on
   hover to telegraph that the avatar is interactive. */
.profile-avatar-btn {
  width: 100%; height: 100%;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  position: relative; overflow: hidden;
  border-radius: 50%;
}
.profile-avatar-btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-avatar-btn .profile-avatar-edit-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sf84); color: var(--accent);
  font-size: 28px; font-weight: 800;
  opacity: 0; transition: opacity var(--t-fast) ease;
  pointer-events: none;
}
.profile-avatar-btn:hover .profile-avatar-edit-overlay,
.profile-avatar-btn:focus .profile-avatar-edit-overlay { opacity: 1; }
.profile-avatar-fallback {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-weight: 900; font-size: 48px; color: var(--accent);
  text-transform: uppercase;
}
.profile-name-block { flex: 1 1 280px; min-width: 0; }
.profile-role-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.profile-role-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.profile-role-pill.role-owner-pill     { background: linear-gradient(90deg, rgba(255,212,41,.25), rgba(255,158,200,.18)); color: #ffd24a; border: 1px solid rgba(255,212,41,.55); }
.profile-role-pill.role-mod-pill       { background: rgba(108,229,138,.18);  color: var(--ink-good-2); border: 1px solid rgba(108,229,138,.5); }
.profile-role-pill.role-creator-pill   { background: rgba(106,183,255,.18);  color: #6ab7ff; border: 1px solid rgba(106,183,255,.55); }
.profile-role-pill.role-supporter-pill { background: rgba(255,158,200,.18);  color: var(--supporter); border: 1px solid rgba(255,158,200,.55); }
.profile-name-display {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 30px; font-weight: 900; color: var(--text);
  line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  word-break: break-word;
}


.profile-rename-row { margin-top: 6px; }
.profile-rename-btn {
  background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.45);
  color: var(--accent);
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.profile-rename-btn:hover { background: rgba(var(--accent-rgb),.22); border-color: var(--accent); transform: translateY(-1px); }
.profile-joined {
  font-size: 12px; color: var(--text-mute);
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 4px; font-weight: 700;
}
.profile-socials {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; flex: 0 0 auto;
}
.profile-social-link {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sf9);
  border: 1px solid var(--line);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 16px; font-weight: 700;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.profile-social-link:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),.10); }
.profile-social-link.disabled { opacity: .3; pointer-events: none; }

/* Bio + edit row */
.profile-bio-row {
  max-width: 1080px; margin: 0 auto 14px;
  background: var(--sf31);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px; color: var(--text-dim);
  line-height: 1.55;
}
.profile-bio-row.empty-bio { color: var(--text-mute); font-style: italic; }
.profile-badges-row {
  max-width: 1080px; margin: 0 auto 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.profile-badges-row:empty { display: none; }
.profile-badges-row .pbr-label {
  font-size: 11.5px; color: var(--text-fade);
  text-transform: uppercase; letter-spacing: .08em;
  padding-right: 4px;
}
.profile-badges-row .pbr-streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,140,40,.18); color: #ffd9a3;
  font-size: 12.5px; font-weight: 700;
}
.profile-badges-row .pbr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--accent-rgb),.18); border: 1px solid rgba(var(--accent-rgb),.35);
  color: #ffe9a0; font-size: 12px; font-weight: 700;
}
.profile-bio-edit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.profile-bio-edit textarea {
  width: 100%; min-height: 64px;
  background: var(--sf20); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px;
  color: var(--text); font-size: 13.5px; line-height: 1.5;
  font-family: inherit; resize: vertical;
}
.profile-bio-edit textarea:focus { outline: none; border-color: var(--accent); }
.profile-bio-edit .profile-social-edit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.profile-bio-edit .profile-social-edit label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--text-mute); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.profile-bio-edit .profile-social-edit input {
  background: var(--sf20); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px;
  color: var(--text); font-size: 13px;
  font-family: inherit;
}
.profile-bio-edit .profile-social-edit input:focus { outline: none; border-color: var(--accent); }

/* Action bar */
.profile-actions-bar {
  max-width: 1080px; margin: 0 auto 14px;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.profile-mode-row { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-mode-btn, .profile-share-btn {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.profile-mode-btn:hover, .profile-share-btn:hover { color: var(--text); background: var(--bg-3); }
.profile-mode-btn.active { background: var(--bg-3); color: var(--accent); border-color: rgba(var(--accent-rgb),.35); }
.profile-share-btn { background: rgba(var(--accent-rgb),.16); color: var(--accent); border-color: rgba(var(--accent-rgb),.45); }
.profile-share-btn:hover { background: rgba(var(--accent-rgb),.28); color: var(--accent); }
.profile-save-btn {
  background: rgba(108,229,138,.18); color: var(--ink-good-2);
  border: 1px solid rgba(108,229,138,.45);
  border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.profile-save-btn:hover { background: rgba(108,229,138,.32); color: #b9f4c5; transform: translateY(-1px); }

/* Real-logo SVGs sit centered in the round social button */
.profile-social-link svg { width: 18px; height: 18px; display: block; }
.profile-social-link.social-yt:hover { color: #FF0033; border-color: var(--sf85); background: var(--sf86); }
.profile-social-link.social-x:hover  { color: #fff;    border-color: rgba(255,255,255,.5); background: var(--w06); }
.profile-social-link.social-ig:hover { color: #E4405F; border-color: rgba(228,64,95,.45); background: rgba(228,64,95,.10); }
.profile-social-link.social-tw:hover { color: #9146FF; border-color: rgba(145,70,255,.45); background: rgba(145,70,255,.12); }
.profile-social-link.social-tk:hover { color: #25F4EE; border-color: rgba(37,244,238,.45); background: rgba(37,244,238,.10); }
.profile-social-link.social-dc:hover { color: #5865F2; border-color: rgba(88,101,242,.55);  background: rgba(88,101,242,.12); }
/* Make sure the copy-on-click button version of a social link looks the
   same as the <a> version (no native button chrome). */
button.profile-social-link {
  appearance: none; -webkit-appearance: none;
  font: inherit; cursor: pointer;
}

/* Custom banner upload */
.profile-hero-banner { background-size: cover; background-position: center; }
.profile-hero-banner.has-img::after { display: none; }   /* hide default ambient overlay if user uploaded a banner */
.profile-hero-banner-edit {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; gap: 6px; z-index: 2;
}
.profile-banner-btn {
  background: var(--sf87); color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.profile-banner-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.35); background: var(--sf88); }

/* Profile hero matches the PC layout on every screen size, banner stays
 * 220px, avatar stays 116px with the same -64 overlap, no smaller font.
 * Only the banner edit button gets a friendly tap-target boost on phones. */
@media (max-width: 600px) {
  .profile-banner-btn { padding: 9px 12px; font-size: 11.5px; min-height: 36px; }
  .profile-hero-banner-edit { top: 10px; right: 10px; gap: 8px; }
}

.profile-summary {
  max-width: 1080px; margin: 0 auto 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.profile-stat-box {
  background: linear-gradient(180deg, var(--sf19) 0%, var(--sf20) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px; text-align: center;
}
.profile-stat-num {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 28px; font-weight: 900; color: var(--accent); line-height: 1;
}
/* "/total" suffix on stat boxes, keep it visually subordinate so the
   user-selected count stays the prominent number. */
.profile-stat-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-mute);
  margin-left: 1px;
}
/* v105: "· %" tail after the count/total. The dot is the same mute color
   so it reads as a separator, the percent is accent-tinted so it pops as
   the headline summary number. */
.profile-stat-dot {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-mute);
  margin: 0 2px;
  letter-spacing: 0;
}
.profile-stat-pct {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .01em;
}
.profile-gamer-dashboard .profile-stat-pct {
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.55);
}

/* ===== Player-type / game-mode chips under the Joined date ===== */
.profile-tags-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
}
.profile-tag-pill {
  display: inline-flex; align-items: center;
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.45);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-family: 'Barlow Condensed','Inter',sans-serif;
}
.profile-tag-pill.muted {
  background: var(--w04);
  color: var(--text-mute);
  border-color: var(--line);
}
/* Per-value chip colors. Player Type:
   - Combat = red (aggressive)
   - Builder = blue (creative/peaceful)
   - Both = gold (the existing accent)
   Game Mode (difficulty ramp):
   - Cozy = green   (easiest)
   - Sandbox = cyan (easy / open)
   - Survival = orange (challenging)
   - Expert = crimson (hardest) */
.profile-tag-pill.chip-combat   { background: rgba(255,107,107,.16); color: #ff7c7c; border-color: rgba(255,107,107,.50); }
.profile-tag-pill.chip-builder  { background: rgba(86,182,240,.16);  color: #6cd1ff; border-color: rgba(86,182,240,.50); }
.profile-tag-pill.chip-both     { background: rgba(var(--accent-rgb),.16);  color: var(--accent); border-color: rgba(var(--accent-rgb),.55); }
.profile-tag-pill.chip-cozy     { background: rgba(123,229,138,.16); color: #8ee6a0; border-color: rgba(123,229,138,.50); }
.profile-tag-pill.chip-sandbox  { background: rgba(93,212,212,.16);  color: #6fdfdf; border-color: rgba(93,212,212,.50); }
.profile-tag-pill.chip-survival { background: rgba(255,165,64,.18);  color: #ffb35a; border-color: rgba(255,165,64,.55); }
.profile-tag-pill.chip-expert   { background: rgba(168,85,247,.20);  color: #c084fc; border-color: rgba(168,85,247,.55); }
.profile-tag-select {
  background: var(--sf20);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  cursor: pointer;
}
.profile-tag-select:focus { outline: none; border-color: var(--accent); }

/* ===== "View My Builds" prominent CTA ===== */
.profile-builds-cta {
  max-width: 1080px; margin: 0 auto 18px;
}
.profile-builds-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08));
  border: 1px solid rgba(var(--accent-rgb),.55);
  color: var(--accent);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.profile-builds-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.34), rgba(var(--accent-rgb),.14));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),.18);
}
.profile-builds-btn .pb-arrow { font-size: 18px; transition: transform var(--t-fast) ease; }
.profile-builds-btn:hover .pb-arrow { transform: translateX(3px); }

/* ===== Favorites grid (Biome / Food / Weapon / Enemy / Update / Build Set / Physical Set) ===== */
/* Flexbox (instead of CSS Grid) so an incomplete final row centers itself
   under row 1, Grid would leave orphan cards left-aligned. */
.profile-favorites {
  max-width: 1080px; margin: 0 auto 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.profile-fav-box {
  flex: 0 1 220px;
  max-width: 240px;
  background: var(--sf27);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 70px;
  box-sizing: border-box;
  /* Center every favorite-card label and value */
  text-align: center;
  align-items: center;
}
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .profile-fav-box { flex: 1 1 calc(50% - 5px); max-width: none; }
}
@media (max-width: 480px) {
  .profile-fav-box { flex: 1 1 100%; max-width: none; }
}
.profile-fav-box .label {
  font-size: 9.5px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.profile-fav-box .value {
  color: var(--accent); font-weight: 800; font-size: 15px;
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  letter-spacing: .01em;
  /* Allow long names to wrap onto a second line instead of being clipped. */
  white-space: normal;
  line-height: 1.2;
  word-break: break-word;
}
.profile-fav-box .value.empty { color: var(--text-fade); font-style: italic; font-weight: 600; }
/* Per-element color for Favorite Elemental Power */
.profile-fav-box .value.value-elem-fire      { color: #ff8a4c; }
.profile-fav-box .value.value-elem-lightning { color: #ffe05a; }
.profile-fav-box .value.value-elem-earth     { color: #8ee6a0; }
.profile-fav-box .value.value-elem-ice       { color: #6fdfdf; }
.profile-fav-box select {
  width: 100%;
  background: var(--sf89);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: 'Barlow Condensed','Inter',sans-serif;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.profile-fav-box select:focus { outline: none; border-color: var(--accent); }
.profile-stat-lbl {
  font-size: 10.5px; color: var(--text-mute);
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 4px; font-weight: 700;
}

.profile-content { max-width: 1080px; margin: 0 auto; }
.profile-section {
  background: var(--sf31);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin-bottom: 18px;
}
.profile-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--w05);
  padding-bottom: 10px; margin-bottom: 14px;
}
.profile-section-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 18px; font-weight: 800; color: var(--accent);
  letter-spacing: .04em; text-transform: uppercase;
}
.profile-section-count { font-size: 12px; color: var(--text-mute); font-weight: 700; }

.profile-tile-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.profile-tile {
  flex: 0 0 130px; width: 130px;
  background: var(--sf23);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), background var(--t-fast);
  position: relative;
}
.profile-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.profile-tile-img {
  width: 90px; height: 90px; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  /* Inset padding so tightly-cropped trophy PNGs (e.g. Frostlands) don't
     fill the whole tile while loose-cropped PNGs sit smaller. */
  padding: 8px;
  box-sizing: border-box;
}
/* max-width/height + auto sizing reliably keeps every trophy inside the
   tile regardless of native aspect ratio. The previous width:100%;
   height:100%;object-fit:contain combo was clipping tall PNGs (Frostlands)
   on some browsers because the implicit min-content on the img conflicted
   with grid placement. */
.profile-tile-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.profile-tile-name { font-size: 11.5px; line-height: 1.25; color: var(--text); font-weight: 700; }

/* Edit mode: dim un-selected tiles */
.profile-mode-edit .profile-tile { opacity: .42; }
.profile-mode-edit .profile-tile.is-active { opacity: 1; border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.profile-mode-edit .profile-tile.is-active::after {
  content: '✓';
  position: absolute; top: 4px; right: 6px;
  background: var(--accent-fill); color: var(--accent-ink);
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 12px; font-weight: 900; line-height: 18px;
}
/* View mode: hide un-selected tiles entirely */
.profile-mode-view .profile-tile:not(.is-active) { display: none; }
.profile-mode-view .profile-tile { cursor: default; }
.profile-mode-view .profile-tile:hover { transform: none; }
.profile-mode-view .profile-empty {
  font-size: 13px; color: var(--text-mute); font-style: italic;
  text-align: center; padding: 18px 12px;
}

/* Legendary Fish tiles, gold border + warm gradient so every fish on a
   profile reads as a Legendary catch at a glance, in both view + edit modes. */
.profile-tile.profile-tile-legendary {
  border-color: rgba(255,212,41,.55);
  background: linear-gradient(160deg, rgba(255,212,41,.14) 0%, var(--sf90) 60%);
  box-shadow: 0 0 0 1px rgba(255,212,41,.25), 0 4px 14px rgba(255,212,41,.10);
}
.profile-tile.profile-tile-legendary:hover {
  border-color: rgba(255,215,90,.85);
  box-shadow: 0 0 0 1px rgba(255,215,90,.45), 0 6px 18px rgba(255,212,41,.22);
}
.profile-tile.profile-tile-legendary .profile-tile-name {
  color: #ffd75a;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
/* Expert Trophy hues on profile tiles (per biome/boss), mirroring the
   Legendary Fish gold treatment. */
.profile-tile.profile-tile-troph-grasslands { border-color: rgba(108,229,138,.55); background: linear-gradient(160deg, rgba(108,229,138,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(108,229,138,.22), 0 4px 14px rgba(108,229,138,.10); }
.profile-tile.profile-tile-troph-grasslands:hover { border-color: rgba(108,229,138,.85); box-shadow: 0 0 0 1px rgba(108,229,138,.45), 0 6px 18px rgba(108,229,138,.22); }
.profile-tile.profile-tile-troph-grasslands .profile-tile-name { color: #8ef0a8; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-dry_valley { border-color: rgba(255,160,66,.55); background: linear-gradient(160deg, rgba(255,160,66,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(255,160,66,.22), 0 4px 14px rgba(255,160,66,.10); }
.profile-tile.profile-tile-troph-dry_valley:hover { border-color: rgba(255,160,66,.85); box-shadow: 0 0 0 1px rgba(255,160,66,.45), 0 6px 18px rgba(255,160,66,.22); }
.profile-tile.profile-tile-troph-dry_valley .profile-tile-name { color: #ffb86b; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-frostlands { border-color: rgba(127,214,255,.55); background: linear-gradient(160deg, rgba(127,214,255,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(127,214,255,.22), 0 4px 14px rgba(127,214,255,.10); }
.profile-tile.profile-tile-troph-frostlands:hover { border-color: rgba(127,214,255,.85); box-shadow: 0 0 0 1px rgba(127,214,255,.45), 0 6px 18px rgba(127,214,255,.22); }
.profile-tile.profile-tile-troph-frostlands .profile-tile-name { color: #aee4ff; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-lost_isles { border-color: rgba(255,126,196,.55); background: linear-gradient(160deg, rgba(255,126,196,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(255,126,196,.22), 0 4px 14px rgba(255,126,196,.10); }
.profile-tile.profile-tile-troph-lost_isles:hover { border-color: rgba(255,126,196,.85); box-shadow: 0 0 0 1px rgba(255,126,196,.45), 0 6px 18px rgba(255,126,196,.22); }
.profile-tile.profile-tile-troph-lost_isles .profile-tile-name { color: #ff9ed4; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-storm_king { border-color: rgba(177,140,255,.55); background: linear-gradient(160deg, rgba(177,140,255,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(177,140,255,.22), 0 4px 14px rgba(177,140,255,.10); }
.profile-tile.profile-tile-troph-storm_king:hover { border-color: rgba(177,140,255,.85); box-shadow: 0 0 0 1px rgba(177,140,255,.45), 0 6px 18px rgba(177,140,255,.22); }
.profile-tile.profile-tile-troph-storm_king .profile-tile-name { color: #c9b3ff; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-expeditions { border-color: rgba(184,192,204,.55); background: linear-gradient(160deg, rgba(184,192,204,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(184,192,204,.22), 0 4px 14px rgba(184,192,204,.10); }
.profile-tile.profile-tile-troph-expeditions:hover { border-color: rgba(184,192,204,.85); box-shadow: 0 0 0 1px rgba(184,192,204,.45), 0 6px 18px rgba(184,192,204,.22); }
.profile-tile.profile-tile-troph-expeditions .profile-tile-name { color: #cfd6df; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-fire_dragon { border-color: rgba(255,107,90,.55); background: linear-gradient(160deg, rgba(255,107,90,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(255,107,90,.22), 0 4px 14px rgba(255,107,90,.10); }
.profile-tile.profile-tile-troph-fire_dragon:hover { border-color: rgba(255,107,90,.85); box-shadow: 0 0 0 1px rgba(255,107,90,.45), 0 6px 18px rgba(255,107,90,.22); }
.profile-tile.profile-tile-troph-fire_dragon .profile-tile-name { color: #ff8f80; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-tfb { border-color: rgba(138,154,91,.55); background: linear-gradient(160deg, rgba(138,154,91,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(138,154,91,.22), 0 4px 14px rgba(138,154,91,.10); }
.profile-tile.profile-tile-troph-tfb:hover { border-color: rgba(138,154,91,.85); box-shadow: 0 0 0 1px rgba(138,154,91,.45), 0 6px 18px rgba(138,154,91,.22); }
.profile-tile.profile-tile-troph-tfb .profile-tile-name { color: #b3c47a; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-ice_dragon { border-color: rgba(200,232,255,.55); background: linear-gradient(160deg, rgba(200,232,255,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(200,232,255,.22), 0 4px 14px rgba(200,232,255,.10); }
.profile-tile.profile-tile-troph-ice_dragon:hover { border-color: rgba(200,232,255,.85); box-shadow: 0 0 0 1px rgba(200,232,255,.45), 0 6px 18px rgba(200,232,255,.22); }
.profile-tile.profile-tile-troph-ice_dragon .profile-tile-name { color: #e6f4ff; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.profile-tile.profile-tile-troph-shatter { border-color: rgba(177,140,255,.55); background: linear-gradient(160deg, rgba(177,140,255,.14) 0%, var(--sf90) 60%); box-shadow: 0 0 0 1px rgba(177,140,255,.22), 0 4px 14px rgba(177,140,255,.10); }
.profile-tile.profile-tile-troph-shatter:hover { border-color: rgba(177,140,255,.85); box-shadow: 0 0 0 1px rgba(177,140,255,.45), 0 6px 18px rgba(177,140,255,.22); }
.profile-tile.profile-tile-troph-shatter .profile-tile-name { color: #c9b3ff; text-shadow: 0 1px 0 rgba(0,0,0,.45); }

.profile-tile-rarity-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #1a1300;
  background: linear-gradient(135deg, #ffe580 0%, var(--accent) 55%, #c89a18 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.profile-mode-edit .profile-tile.profile-tile-legendary.is-active {
  border-color: #ffd429;
  background: linear-gradient(160deg, rgba(255,212,41,.22) 0%, var(--sf91) 60%);
}

/* Broken-image fallback */
img.img-fallback { object-fit: cover !important; opacity: .9; cursor: default !important; }

/* ===== Gamer Dashboard polish, v102 =====
   Overlays gamer-dashboard aesthetic on the existing My Profile shell:
   subtle glowing borders, animated panel underlines, scanline shimmers on
   stat numbers. Targets only #page-profile.profile-gamer-dashboard so the
   rest of the site is untouched. */
.profile-gamer-dashboard .profile-hero {
  border-color: rgba(var(--accent-rgb),.35);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),.08) inset,
    0 18px 50px rgba(0,0,0,.55);
  position: relative;
}
.profile-gamer-dashboard .profile-hero::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-fill) 50%, transparent 100%);
  opacity: .65; pointer-events: none;
}
.profile-gamer-dashboard .profile-avatar-wrap {
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb),.45),
    0 0 18px rgba(var(--accent-rgb),.25),
    0 6px 18px rgba(0,0,0,.55);
}
.profile-gamer-dashboard .profile-bio-row,
.profile-gamer-dashboard .profile-favorites,
.profile-gamer-dashboard .profile-section,
.profile-gamer-dashboard .profile-summary,
.profile-gamer-dashboard .profile-progress-mirror,
.profile-gamer-dashboard .profile-villager-codex {
  position: relative;
  border-color: rgba(var(--accent-rgb),.18);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.04) inset, 0 8px 22px rgba(0,0,0,.28);
}
.profile-gamer-dashboard .profile-stat-num {
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.55);
}
.profile-gamer-dashboard .profile-section-title,
.profile-gamer-dashboard .pm-head-title,
.profile-gamer-dashboard .pvc-head-title {
  text-shadow: 0 0 12px rgba(var(--accent-rgb),.35);
}
.profile-gamer-dashboard .profile-name-display {
  background: linear-gradient(90deg, #fff 0%, var(--accent) 60%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px rgba(var(--accent-rgb),.35);
}

/* ===== Progress Mirror on profile ===== */
.profile-progress-mirror {
  max-width: 1080px; margin: 22px auto 18px;
  background: linear-gradient(180deg, var(--sf62) 0%, var(--sf92) 100%);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px;
}
.pm-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--w05);
  padding-bottom: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.pm-head-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 20px; font-weight: 800; color: var(--accent);
  letter-spacing: .05em; text-transform: uppercase;
}
.pm-head-sub { font-size: 12px; color: var(--text-mute); }
.pm-rank-row {
  display: flex; align-items: center; gap: 16px;
  background: rgba(var(--accent-rgb),.06);
  border: 1px solid rgba(var(--accent-rgb),.18);
  border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.pm-rank-pct {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 42px; font-weight: 900;
  background: linear-gradient(180deg, var(--accent), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1; min-width: 88px;
  text-shadow: 0 0 18px rgba(var(--accent-rgb),.4);
}
.pm-rank-body { flex: 1; min-width: 200px; }
.pm-rank-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 17px; font-weight: 800; color: var(--text);
  letter-spacing: .04em; text-transform: uppercase;
}
.pm-rank-desc { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.pm-bar {
  margin-top: 8px; height: 8px; background: var(--w06);
  border-radius: 999px; overflow: hidden;
}
.pm-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent) 0%, var(--supporter) 100%);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.55);
  border-radius: 999px;
  transition: width var(--t-slow) ease;
}
.pm-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.pm-cat {
  background: var(--sf46);
  border: 1px solid var(--w05);
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
}
.pm-cat-name {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.pm-cat-stat {
  font-size: 22px; font-weight: 900; color: var(--accent);
  margin-top: 4px; font-family: 'Barlow Condensed','Poppins',sans-serif;
}
.pm-cat-stat .pm-cat-total { color: var(--text-mute); font-size: 13px; font-weight: 700; margin-left: 4px; }
.pm-cat-mini-bar {
  margin-top: 8px; height: 5px; background: var(--w05);
  border-radius: 999px; overflow: hidden;
}
.pm-cat-mini-fill {
  height: 100%; background: var(--accent-fill); border-radius: 999px;
  transition: width var(--t-slow) ease;
}
.pm-empty {
  font-size: 13px; color: var(--text-mute); text-align: center;
  padding: 18px 0; font-style: italic;
}
.pm-empty a { color: var(--accent); }

/* ===== Villager Codex on profile ===== */
.profile-villager-codex {
  max-width: 1080px; margin: 22px auto 24px;
  background: linear-gradient(180deg, var(--sf62) 0%, var(--sf92) 100%);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px;
}
.pvc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--w05);
  padding-bottom: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.pvc-head-title {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 20px; font-weight: 800; color: var(--accent);
  letter-spacing: .05em; text-transform: uppercase;
}
.pvc-head-sub { font-size: 12px; color: var(--text-mute); }
.pvc-stat-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(108,229,138,.06);
  border: 1px solid rgba(108,229,138,.18);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.pvc-stat-num {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 30px; font-weight: 900; color: var(--ink-good-2);
  line-height: 1;
  text-shadow: 0 0 14px rgba(108,229,138,.5);
}
.pvc-stat-num .pvc-stat-total { color: var(--text-mute); font-size: 14px; font-weight: 700; margin-left: 4px; }
.pvc-stat-bar {
  flex: 1; min-width: 180px;
  height: 8px; background: var(--w06); border-radius: 999px; overflow: hidden;
}
.pvc-stat-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--ink-good-2) 0%, #6ab7ff 100%);
  box-shadow: 0 0 12px rgba(108,229,138,.5);
  border-radius: 999px;
  transition: width var(--t-slow) ease;
}
.pvc-filters {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.pvc-filter {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--w10);
  border-radius: 999px; padding: 5px 11px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  font-family: inherit; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pvc-filter:hover { color: var(--text); border-color: rgba(var(--accent-rgb),.4); }
.pvc-filter.active { background: rgba(var(--accent-rgb),.18); color: var(--accent); border-color: rgba(var(--accent-rgb),.5); }
.pvc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 98px);
  justify-content: center;
  gap: 9px;
}
.pvc-tile {
  position: relative;
  background: var(--sf46);
  border: 1px solid var(--w05);
  border-radius: 10px;
  padding: 8px 6px 10px;
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.pvc-tile:hover {
  border-color: rgba(var(--accent-rgb),.4);
  transform: translateY(-2px);
}
.pvc-tile.collected {
  background: linear-gradient(160deg, rgba(108,229,138,.16) 0%, var(--sf91) 70%);
  border-color: rgba(108,229,138,.55);
  box-shadow: 0 0 14px rgba(108,229,138,.18);
}
.pvc-tile.collected::after {
  content: '✓'; position: absolute; top: 4px; right: 6px;
  font-size: 11px; font-weight: 900;
  color: var(--accent-ink); background: var(--ink-good-2);
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 8px rgba(108,229,138,.6);
}
.pvc-tile-img {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  overflow: hidden;
  display: grid; place-items: center;
  margin-bottom: 6px;
}
.pvc-tile-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.6) brightness(.78);
  transition: filter var(--t-slow);
}
.pvc-tile.collected .pvc-tile-img img { filter: none; }
.pvc-tile-name {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-align: center; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pvc-tile.collected .pvc-tile-name { color: var(--text); }
.pvc-actions {
  margin-top: 14px; display: flex; gap: 8px; justify-content: flex-end;
}
.pvc-actions button {
  background: transparent; color: var(--text-mute);
  border: 1px solid var(--w10);
  border-radius: 8px; padding: 6px 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; font-family: inherit;
  transition: all var(--t-fast);
}
.pvc-actions button:hover { color: var(--text); border-color: rgba(var(--accent-rgb),.5); }
.pvc-actions .pvc-reset:hover { color: #ef6b6b; border-color: rgba(239,107,107,.45); }

@media (max-width: 640px) {
  .pm-cat-grid { grid-template-columns: 1fr 1fr; }
  .pvc-grid { grid-template-columns: repeat(auto-fill, 82px); justify-content: center; }
  .pm-rank-pct { font-size: 34px; min-width: 70px; }
}

/* ===== Stats panel on Overview ===== */
.home-stats-row {
  /* v876: eight figures now. Four across and four under reads as one block;
     six across left two stranded on a second row. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; max-width: 880px; margin: 14px auto 22px;
}
.hs-box {
  background: linear-gradient(180deg, var(--sf19) 0%, var(--sf20) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px; text-align: center;
  transition: transform var(--t-slow) ease, border-color var(--t-slow) ease;
}
.hs-box:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.3); }
.hs-num {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 30px; font-weight: 900; color: var(--accent);
  line-height: 1;
}
.hs-lbl {
  font-size: 10.5px; color: var(--text-mute);
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 4px; font-weight: 700;
}
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  /* two across on a phone: eight tiles divide evenly and the longer labels
     ("Map Markers", "Build Pieces") stay on one line */
  .home-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Daily Player Checklist ===== */
.dc-ico-rotator {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dc-ico-rotator .any-thumbs {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border-radius: 6px;
  background: var(--w05);
}
.dc-ico-rotator .any-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  padding: 2px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.daily-checklist {
  max-width: 880px; margin: 22px auto;
  background: linear-gradient(135deg, var(--sf19), var(--sf7));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 22px;
}
.dc-head {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--w06);
  padding-bottom: 12px; margin-bottom: 12px;
}
.dc-eyebrow {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 13px; letter-spacing: .12em; font-weight: 800;
  color: var(--accent); text-transform: uppercase;
}
.dc-progress {
  flex: 1; height: 8px;
  background: var(--w06);
  border-radius: 4px; overflow: hidden;
}
.dc-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-fill) 0%, #ffd870 100%);
  border-radius: 4px;
  transition: width var(--t-slow) ease;
}
.dc-count { font-size: 12px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.dc-streak {
  font-size: 13px; font-weight: 800; color: #ff8a3a;
  background: rgba(255,138,58,.12);
  border: 1px solid rgba(255,138,58,.4);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.dc-list { display: flex; flex-direction: column; gap: 6px; }
.dc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--sf26); border: 1px solid var(--w04);
  border-radius: 8px; cursor: pointer;
  transition: background var(--t-slow) ease, border-color var(--t-slow) ease;
}
.dc-item:hover { background: rgba(var(--accent-rgb),.05); border-color: rgba(var(--accent-rgb),.2); }
.dc-item.done { background: rgba(108,229,138,.06); border-color: rgba(108,229,138,.18); }
.dc-item.done .dc-text { color: var(--text-mute); text-decoration: line-through; }
.dc-item input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.dc-ico { font-size: 16px; }
.dc-text { flex: 1; font-size: 13px; color: var(--text); }
.dc-foot {
  margin-top: 10px; font-size: 11px; color: var(--text-mute);
  text-align: right; font-style: italic;
}

/* ===== Keyboard shortcuts help overlay ===== */
.kbd-help {
  position: fixed; inset: 0; z-index: 9600;
  background: var(--sf88); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.kbd-help.open { display: flex; }
.kbd-card {
  background: var(--sf78); border: 1px solid var(--accent);
  border-radius: 14px; padding: 24px 28px; max-width: 460px; width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
  position: relative;
}
.kbd-card h3 {
  font-family: 'Barlow Condensed','Poppins',sans-serif;
  font-size: 22px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 14px;
}
.kbd-card table { width: 100%; border-collapse: collapse; }
.kbd-card td { padding: 6px 0; font-size: 13px; color: var(--text); }
.kbd-card td:first-child { width: 130px; }
.kbd-card kbd {
  display: inline-block; min-width: 22px; padding: 2px 7px;
  background: var(--w08); border: 1px solid var(--w18);
  border-radius: 4px; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--accent); text-align: center;
  margin-right: 4px;
}
.kbd-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--text-mute); font-size: 22px; cursor: pointer;
  border-radius: 50%;
}
.kbd-close:hover { background: var(--w06); color: var(--text); }

/* ===== Mobile breakpoint for sidebar ===== */
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  /* On mobile the sidebar is replaced by the top-bar native select. Hide
     the sidebar shell, hamburger, and backdrop entirely. */
  .sidebar { display: none !important; }
  .nav-hamburger { display: none !important; }
  .sidebar-backdrop { display: none !important; }
  .sidebar-toggle { display: none !important; }

  /* ===== MOBILE TOP NAV BAR with native <select> page picker =====
     Native form controls always receive taps reliably on iOS, no matter
     what CSS/JS is going on. This is the bulletproof fallback. */
  .mobile-top-bar {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0; right: 0;
    height: 56px;
    background: var(--sf93);
    border-bottom: 1px solid var(--line);
    z-index: 9100;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    /* Left padding clears the hamburger (top-left). Right padding clears
       the floating .mobile-acct-btn so the dropdown doesn't slide under it. */
    padding: 0 70px 0 70px;
    gap: 10px;
    backdrop-filter: blur(8px);
  }
  .mobile-top-bar select {
    max-width: 100%;
    width: 100%;
  }
  
  
  .mobile-top-bar select {
    flex: 0 1 auto;
    height: 40px;
    background: var(--sf7);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 15px; font-weight: 600;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent-fill) 50%), linear-gradient(135deg, var(--accent-fill) 50%, transparent 50%);
    background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 32px;
  }
  /* Push the page content down so it doesn't hide under the top bar */
  main { padding-top: max(72px, calc(env(safe-area-inset-top, 0) + 72px)) !important; }

  /* Sidebar is a fixed shell, NOT scrollable itself. Scrolling happens in
     a single inner wrapper (created by JS at boot). This is the iOS pattern
     that avoids both the click-eaten-by-momentum-scroll bug AND the broken
     overflow on transformed fixed elements. */
  .sidebar {
    position: fixed !important;
    top: 0 !important; bottom: 0 !important;
    left: -300px !important;
    width: 280px !important; max-width: 85vw;
    height: auto !important;
    transform: none !important;
    transition: left var(--t-slow) ease !important;
    z-index: 9150;
    overflow: hidden !important;
    box-shadow: 6px 0 24px rgba(0,0,0,.55);
    pointer-events: auto !important;
    /* v792: was `display: flex !important`, which overrode the display:none
       above and parked 48 tabbable controls off screen. The drawer has no
       visible opener on phones (the picker replaced it), so it stays hidden. */
    flex-direction: column !important;
  }
  .sidebar.open { left: 0 !important; }
  .app, .app.sidebar-collapsed { display: block; }
  .app.sidebar-collapsed .sidebar { pointer-events: auto !important; transform: none !important; }

  /* The scrollable inner wrapper. JS will move all sidebar content into here. */
  .sb-scroll {
    flex: 1 1 auto;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    pointer-events: auto !important;
  }

  main { margin-left: 0; padding: 60px 14px 24px; }
  .core-grid { grid-template-columns: repeat(2,1fr); }

  /* Nav anchors: explicit block-level, taller, isolated stacking context so
     no parent div ever covers them in the hit test. */
  .sidebar .nav a {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    user-select: none;
    -webkit-tap-highlight-color: rgba(var(--accent-rgb),.2);
    min-height: 44px;
    line-height: 1.4;
    padding: 12px;
  }
  .sidebar .nav a > * {
    pointer-events: none !important; /* children pass clicks through to the <a> */
  }

  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 9140;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity var(--t-slow) ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* The legacy @media (max-width: 940px) rule that put the sidebar in document
   flow was conflicting with the 880px slide-in pattern above and pushing the
   sidebar to the top of mobile viewports. Removed. */

/* ===== Dedicated mobile polish ===== */
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .home-hero img { height: 260px; }
  .home-hero-tags { font-size: 10px; letter-spacing: .12em; }

  /* Tighter section spacing so the page feels less empty above the fold */
  .home-section-title { font-size: 1.15rem; margin-top: 18px; }
  .home-callout { font-size: 12px; padding: 10px 14px; }
  .home-about p { font-size: 13.5px; line-height: 1.5; }

  /* Safe-area insets for iOS notch / home-indicator + bottom toolbars */
  main {
    padding-top: max(60px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(96px, env(safe-area-inset-bottom));
  }

  /* Build Calculator: keep above iOS home-indicator + away from edges */
  .calc-panel { right: 12px; bottom: max(76px, calc(76px + env(safe-area-inset-bottom))); }

  /* Bigger touch targets for top-bar buttons */
  /* Hamburger sized + positioned at the base rule with safe-area insets */

  /* Hide the desktop-only floating sidebar-collapse arrow, it's the yellow
     ◀ button anchored to left:248px that visually floats untethered when the
     sidebar is hidden behind the slide-out overlay on mobile. */
  .sidebar-toggle { display: none !important; }
  .app.sidebar-collapsed .sidebar-toggle { display: none !important; }

  /* On mobile, the slide-in overlay drives sidebar visibility, not the
     desktop "collapsed" class. Force-clear pointer-events lock so the
     sidebar can be tapped, and let .sidebar.open win the transform race. */
  .app.sidebar-collapsed .sidebar { pointer-events: auto; }
  .sidebar.open { transform: translateX(0) !important; }

}

@media (max-width: 480px) {
  .home-hero img { height: 210px; }
}

/* ===== Mobile polish, May 2026 batch (search bar + cramped fixes) =====
   - Bigger tap targets on the slide-out sidebar nav (Apple/Google both
     recommend 44px minimum for touch). The base .nav a uses 8/12 padding
     which produces a ~36px tap target, fine for mouse, too small for fingers.
   - Recipe cards collapse to full-width on narrow phones so they're not
     stuck at 280px stranded in a 360px viewport.
   - Search-results overlay never reaches under the safe-area inset.
   ===================================================================== */
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  .nav a {
    padding: 12px 14px;        /* 44px+ tap target */
    font-size: 15px;
    min-height: 44px;
  }
  .nav-group-title { padding: 12px 14px 8px; font-size: 11.5px; }
  .recipe-card { flex: 1 1 100%; max-width: 360px; }
  .recipe-grid { gap: 14px 12px; padding: 0 4px; }
}
@media (max-width: 380px) {
  .recipe-card { flex: 1 1 100%; max-width: 100%; }
}

/* =====================================================================
 * Mobile polish, May 2026 batch (Dom's punch list)
 *  - Real gap below the 56px fixed top-bar so the page-head isn't tucked
 *    behind it on any mobile viewport.
 *  - Hover tooltips (.tile[data-unlock]::before) clamp to the viewport
 *    instead of trailing off the right edge on phones.
 *  - Game Modes hero titles fit on narrow screens.
 * ===================================================================== */
@media (max-width: 880px), (hover: none) and (pointer: coarse) {
  /* Larger, guaranteed clearance below the fixed mobile top-bar (56px tall).
     Both .main padding and html scroll-padding so anchor / focus scrolls land
     below the bar. !important wins over the earlier 60-72px rules. */
  /* Bumped to 140px so the page-head clears BOTH the 48px top-row
     (hamburger + account btn) AND the new 48px second-row mobile search
     bar that sits below them. Old value was 96px which only cleared the
     buttons; the search bar was overlapping the page title on every page. */
  html, body { scroll-padding-top: 140px; }
  /* v792: was `.main`, but the element is a bare <main>, so none of the four
     mobile padding rules ever matched and every page title sat under the
     fixed search bar. */
  main { padding-top: max(140px, calc(env(safe-area-inset-top, 0) + 132px)) !important; }
  /* Kill horizontal scroll on mobile. Some descendant (likely the
     calc-panel / floating buttons / a wide table) was extending past
     100vw and the user could pinch-zoom out to reveal a giant empty
     gap on the right. Clamping html + body to the viewport width and
     hiding overflow-x stops that without breaking any legitimate
     in-page horizontal scrollers (those use their own .overflow-x auto
     containers and aren't affected by an html/body rule). */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Page-head also gets a tiny extra top margin so the very first H1 isn't
     glued to the top-bar's bottom edge. */
  .page-head { scroll-margin-top: 96px; }

  /* ---- Hover-tooltip overflow fixes ----
     The base rule sets white-space:nowrap which makes ingredient tooltips run
     hundreds of pixels wide on phones. Force wrapping and clamp to viewport. */
  .tile[data-unlock]::before {
    white-space: normal !important;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    text-align: center;
    line-height: 1.4;
    font-size: 12px;
    padding: 9px 14px;
  }
  .tile.util-tile[data-unlock]::before {
    max-width: min(320px, calc(100vw - 32px));
  }
  /* The Special Visitors override already wraps; just enforce the viewport
     clamp so a long blessing description never overflows. */
  #villagers-list [data-cat="special"] .tile[data-unlock]::before,
#villagers-list [data-cat="newfriends"] .tile[data-unlock]::before {
    max-width: min(540px, calc(100vw - 32px));
  }
  /* v120: Same viewport clamp for the Expeditions Merge tooltip on mobile. */
  #villagers-list [data-cat="expeditions-merge"] .tile[data-unlock]::before {
    max-width: min(420px, calc(100vw - 32px));
  }
  /* When a tooltip is on a tile that's near the right viewport edge, the
     translateX(-50%) centering can still push its right side off-screen.
     Allow horizontal anchoring to flip, modern browsers respect anchor-default. */
  .tile[data-unlock]::before { right: auto; }

  /* JS-assisted tooltip clamping: --tt-shift is set on the tile by the
     clampTooltips IIFE on pointer enter. It nudges the tooltip horizontally
     so it never extends past the viewport on either side. Default 0px is a
     no-op for desktop / mid-row tiles. */
  .tile[data-unlock]::before,
  .tile[data-detail]::before {
    transform: translateX(calc(-50% + var(--tt-shift, 0px))) !important;
  }

  /* ---- Game Modes hero card title sizing ----
     The desktop 2.6rem title is too big on phones; shrink it and shrink the
     body padding so the description is no longer compressed in the corner. */
  .mode-hero { min-height: 320px; }
  .mode-hero-title h2 { font-size: 1.55rem; line-height: 1.05; }
  .mode-hero-body { padding: 14px 16px 16px; }
  .mode-hero-body p { font-size: 13px; line-height: 1.5; }
  .mode-hero-stats { gap: 8px; font-size: 11px; }
  .mode-hero-stats span { padding: 3px 8px; }
}

/* ============ Monthly "Become a Supporter" popup ============ */
.lf-memberpop-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--sf94); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-slow) ease;
}
.lf-memberpop-overlay.is-open { opacity: 1; pointer-events: auto; }
.lf-memberpop {
  width: 100%; max-width: 420px; background: linear-gradient(180deg, var(--bg-card), var(--bg-2));
  border: 1px solid rgba(255,158,200,.45); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); padding: 26px 24px 22px;
  text-align: center; transform: translateY(14px) scale(.97);
  transition: transform var(--t-slow) ease;
}
.lf-memberpop-overlay.is-open .lf-memberpop { transform: translateY(0) scale(1); }
.lf-memberpop-star { font-size: 38px; line-height: 1; color: var(--supporter); }
.lf-memberpop h3 { margin: 12px 0 6px; font-size: 20px; color: #fff; }
.lf-memberpop p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.lf-memberpop-actions { display: flex; flex-direction: column; gap: 9px; }
.lf-memberpop-cta {
  background: linear-gradient(180deg,var(--supporter),#f06ba6); color: #2a0f1d;
  border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 800;
  font-size: 14px; cursor: pointer;
}
.lf-memberpop-cta:hover { filter: brightness(1.07); }
.lf-memberpop-dismiss {
  background: transparent; color: var(--text-dim); border: 0;
  padding: 6px; font-size: 12.5px; cursor: pointer;
}
.lf-memberpop-dismiss:hover { color: var(--text); }

/* ============ Forum report modal ============ */
.lf-report-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--sf94); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lf-report-modal {
  width: 100%; max-width: 400px; background: linear-gradient(180deg,var(--bg-card),var(--bg-2));
  border: 1px solid var(--w14); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); padding: 22px 22px 18px;
}
.lf-report-modal h3 { margin: 0 0 4px; font-size: 17px; color: #fff; }
.lf-report-modal .lf-report-sub { margin: 0 0 14px; font-size: 12px; color: var(--text-dim); }
.lf-report-modal label {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); font-weight: 800; margin: 12px 0 5px;
}
.lf-report-modal select,
.lf-report-modal textarea {
  width: 100%; box-sizing: border-box; background: var(--field);
  border: 1px solid var(--w16); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px; padding: 9px 10px;
}
.lf-report-modal textarea { resize: vertical; min-height: 64px; }
.lf-report-actions { display: flex; gap: 9px; margin-top: 16px; }
.lf-report-actions button { flex: 1; border-radius: 9px; padding: 10px; font-weight: 700; font-size: 13px; cursor: pointer; border: 0; }
.lf-report-submit { background: #e0466a; color: #fff; }
.lf-report-submit:hover { filter: brightness(1.08); }
.lf-report-cancel { background: var(--w08); color: var(--text); border: 1px solid var(--w16) !important; }
.forum-report-action { color: #e08aa6 !important; cursor: pointer; }
.forum-report-action:hover { color: #f0a6c0 !important; }

/* ============ Moderators Inbox ============ */
.nav-ico-modinbox {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; background: rgba(224,70,106,.18);
  border-radius: 6px; color: #ff9ab0;
}
.modinbox-nav-count {
  display: none; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #e0466a; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.modinbox-nav-count.has-count { display: inline-block; }
.nav-archived-tag { font-size: 9px; font-weight: 700; letter-spacing: .04em; opacity: .6; text-transform: uppercase; margin-left: 4px; }
/* v548: fully archive the Free Star Wars Rewards nav entry: hidden from everyone. */
#nav-freestarwars { display: none !important; }
/* v782: Free Machinist Rewards archived the same way; the event ended Aug 13 2026. */
#nav-freemachinist { display: none !important; }
.modinbox-locked {
  text-align: center; max-width: 440px; margin: 40px auto;
  background: var(--w03); border: 1px solid var(--w10);
  border-radius: 14px; padding: 34px 26px;
}
.modinbox-locked-icon { font-size: 40px; }
.modinbox-locked-title { font-size: 18px; font-weight: 800; color: #fff; margin: 8px 0 6px; }
.modinbox-locked p { font-size: 13px; color: var(--text-dim); margin: 0; }
.modinbox-empty {
  text-align: center; color: var(--text-dim); font-size: 14px;
  padding: 44px 20px; background: var(--w03);
  border: 1px solid var(--w10); border-radius: 14px;
}
.modinbox-list { display: flex; flex-direction: column; gap: 14px; }
.modinbox-card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), var(--w02));
  border: 1px solid var(--w12); border-left: 4px solid #e0466a;
  border-radius: 12px; padding: 16px 18px;
}
.modinbox-card.is-deleted { border-left-color: #6b7280; opacity: .72; }
.modinbox-card-top {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px;
}
.modinbox-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.modinbox-tag-reason { background: rgba(224,70,106,.18); color: #ff9ab0; }
.modinbox-tag-type { background: rgba(120,160,255,.16); color: #9fc0ff; }
.modinbox-tag-gone { background: rgba(150,150,150,.18); color: #c7c7c7; }
.modinbox-content {
  background: rgba(0,0,0,.28); border: 1px solid var(--w08);
  border-radius: 9px; padding: 11px 13px; margin-bottom: 10px;
}
.modinbox-content-title { font-weight: 800; color: #fff; font-size: 14px; margin-bottom: 4px; }
.modinbox-content-body { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.modinbox-content-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.modinbox-content-media img {
  max-width: 130px; max-height: 130px; border-radius: 7px;
  border: 1px solid var(--w14);
}
.modinbox-content-media a { font-size: 12px; color: var(--accent); }
.modinbox-note {
  font-size: 12.5px; color: var(--text-dim); font-style: italic;
  margin-bottom: 12px;
}
.modinbox-note strong { color: var(--text); font-style: normal; }
.modinbox-card-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.modinbox-btn { border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: 12.5px; cursor: pointer; border: 0; }
.modinbox-btn-keep { background: rgba(90,200,130,.16); color: #7fe0a0; border: 1px solid rgba(90,200,130,.45) !important; }
.modinbox-btn-keep:hover { background: rgba(90,200,130,.26); }
.modinbox-btn-delete { background: #e0466a; color: #fff; }
.modinbox-btn-delete:hover { filter: brightness(1.08); }
.modinbox-btn:disabled { opacity: .55; cursor: default; }

/* v854: build approval queue inside the Moderators Inbox. */
.modinbox-sec { margin: 0 0 26px; }
.modinbox-sec-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 800; color: var(--text);
  margin: 0 0 6px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.modinbox-sec-n {
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: rgba(224,70,106,.18); color: #ff9ab0;
  font-size: 12px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
}
.modinbox-sec-n.is-zero { background: rgba(140,150,165,.16); color: var(--text-mute); }
.modinbox-sec-sub { font-size: 12.5px; color: var(--text-mute); line-height: 1.5; margin: 0 0 13px; max-width: 72ch; }
.modbq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; align-items: start; }
.modbq-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card);
}
.modbq-thumb {
  aspect-ratio: 16 / 10; background: #0d1422;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.modbq-thumb img { width: 100%; height: 100%; object-fit: cover; }
.modbq-thumb span { font-size: 12.5px; color: var(--text-mute); }
.modbq-meta { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 2px; }
.modbq-name { font-weight: 800; font-size: 13.5px; color: var(--text); word-break: break-word; }
.modbq-by { font-size: 12px; color: var(--text-mute); }
.modbq-acts { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px 12px; }
.modbq-acts .modinbox-btn { flex: 1 1 auto; padding: 8px 12px; font-size: 12px; }
.modbq-btn-view { background: rgba(120,160,255,.16); color: #9fc0ff; border: 1px solid rgba(120,160,255,.42) !important; }
.modbq-btn-view:hover { background: rgba(120,160,255,.26); }
.modbq-btn-no { background: transparent; color: var(--text-mute); border: 1px solid var(--line) !important; }
.modbq-btn-no:hover { color: #ff9ab0; border-color: rgba(224,70,106,.5) !important; }
.modbq-btn-no.armed { background: #e0466a; color: #fff; border-color: #e0466a !important; }
@media (max-width: 520px) { .modbq-grid { grid-template-columns: 1fr 1fr; } }
:root[data-theme="light"] .modbq-btn-view { background: rgba(40,100,210,.1); color: #1d4fa8; border-color: rgba(40,100,210,.35) !important; }
:root[data-theme="light"] .modbq-btn-view:hover { background: rgba(40,100,210,.18); }
:root[data-theme="light"] .modinbox-sec-n { background: rgba(200,40,78,.12); color: #b1264a; }
:root[data-theme="light"] .modinbox-sec-n.is-zero { background: rgba(20,26,38,.07); color: var(--text-mute); }
:root[data-theme="light"] .modbq-btn-no:hover { color: #b1264a; }
/* The shipped green-on-dark Keep/Approve button washed out on the light ground. */
:root[data-theme="light"] .modinbox-btn-keep { background: rgba(26,140,80,.12); color: #156b3c; border-color: rgba(26,140,80,.42) !important; }
:root[data-theme="light"] .modinbox-btn-keep:hover { background: rgba(26,140,80,.2); }


/* ============ Featured Stream (Twitch Streamers tab) ============ */
.featured-stream-sub {
  max-width: 640px; margin: 2px auto 14px; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--text-dim);
}
.featured-stream-frame {
  position: relative; width: 100%; max-width: 760px; margin: 0 auto;
  aspect-ratio: 16 / 9; background: #0e0a1a;
  border: 1px solid rgba(145,71,255,.45); border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.featured-stream-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.featured-stream-link {
  display: block; text-align: center; margin: 12px auto 0;
  color: #bf94ff; font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.featured-stream-link:hover { color: #d3b6ff; text-decoration: underline; }

/* ============ Push notification opt-in bar (forum) ============ */
.lf-pushbar {
  max-width: 1080px; margin: 0 auto 14px; padding: 11px 16px;
  background: linear-gradient(180deg, var(--sf19), var(--sf95));
  border: 1px solid rgba(120,160,255,.35); border-radius: 10px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lf-pushbar-text { flex: 1; min-width: 210px; font-size: 12.5px; }
.lf-pushbar-text strong {
  display: block; color: var(--accent); font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px;
}
.lf-pushbar-text span { color: var(--text-dim); }
.lf-pushbar-btn {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: 8px 16px; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; font-family: inherit;
}
.lf-pushbar-btn.is-on { background: #ef6b6b; }
.lf-pushbar-btn:disabled { opacity: .6; cursor: default; }