/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root{
  /* Neutrals — primary palette */
  --g:#e8e8e4; --tx:#f0f0ee; --mu:#686866; --mu2:#9a9a98;
  --d0:#0e0e0e; --d1:#141414; --d2:#1e1e1e;
  --cd:#181818; --br:rgba(255,255,255,0.08);
  /* Selective accent colours — used ONLY for scores, votes, key actions */
  --score:#e2c96e;  /* warm gold for scores */
  --up:#4a9e5c;     /* upvote */
  --dn:#b84a4a;     /* downvote / flags */
  --ver:#5a9ee0;    /* verified badge */
  --pro:#8b7ee0;    /* pro/critic */
  --warn:#c2773a;   /* warnings */
  /* 5 category colours — muted, not neon */
  --ss:#7a8fb0; --st:#7a9e8a; --sa:#9e8a7a; --sg:#8a9e7a; --se:#9e7a8a;
  /* keep compat aliases */
  --pk:var(--dn); --bl:var(--ver); --yl:var(--score); --or:var(--warn); --pu:var(--pro);
  /* stage level colours */
  --sl1:#5a5a5a; --sl2:#5a7a9e; --sl3:#5a9e6a; --sl4:#9e9e5a; --sl5:#9e5a5a;
}

/* ══ LIGHT MODE ══ */
[data-theme="light"]{
  --g:#1a1a18; --tx:#1c1c1a; --mu:#7a7a78; --mu2:#5a5a58;
  --d0:#f5f5f2; --d1:#ededea; --d2:#e4e4e0;
  --cd:#ffffff; --br:rgba(0,0,0,0.09);
  --score:#b8952a; --up:#3a8a4a; --dn:#a03a3a;
  --ver:#3a7ec0; --pro:#6b5ec0; --warn:#a05a20;
  --ss:#5a6f90; --st:#5a7e6a; --sa:#7e6a5a; --sg:#6a7e5a; --se:#7e5a6a;
}
[data-theme="light"] #nav{background:rgba(245,245,242,0.96);}
[data-theme="light"] .nav-logo #fsMark{color:var(--tx);}
[data-theme="light"] .nav-logo:hover #fsMark{color:rgba(0,0,0,.5);}
[data-theme="light"] .modal{background:var(--d1);}
[data-theme="light"] .profile-hero,[data-theme="light"] .xp-bar-row,[data-theme="light"] .profile-tabs,[data-theme="light"] .f-left,[data-theme="light"] .f-right,[data-theme="light"] .forum-sidebar-inner{background:var(--d1);}
[data-theme="light"] input[type=range]{filter:none;}

/* smooth theme transition */
body,#nav,.modal,.game-card,.rev-card,.topic-row,.fr-block,.bias-card,.sl-row,.auth-left,.auth-right{transition:background .2s,color .2s,border-color .2s;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--d0);color:var(--tx);font-family:'Barlow',sans-serif;min-height:100vh;overflow-x:hidden;}

/* ══ TRANSITIONS ══ */
.page,.page-shown{display:block;min-height:100vh;}
.page.active{display:block;}
.page-shown{padding-top:60px;}
/* Prevent any horizontal overflow from leaking beyond the viewport.
   Long content (wide tables, mis-sized rows) gets clipped instead of
   forcing the whole page to be scrollable sideways. */
html,body{max-width:100vw;overflow-x:hidden;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:0;
  height:60px;
  background:rgba(10,10,15,0.96);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--br);
  padding:0 28px;
}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;margin-right:8px;}
.nav-logo #fsMark{color:var(--tx);transition:color .2s;}
.nav-logo:hover #fsMark{color:rgba(255,255,255,.7);}
/* The wordmark uses Bebas Neue at 1.4rem with 3px tracking.
   Bebas Neue's cap-height sits visually higher within its line-box than the
   center, so even with line-height:1 the rendered letters appear slightly
   above the geometric midpoint of their container. We nudge it down ~8% of
   the font-size to bring the visible glyphs onto the centerline. This is a
   typography quirk specific to display fonts with no descenders, not a
   layout bug. */
.nav-wordmark{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:1.4rem;letter-spacing:3px;line-height:1;
  color:var(--tx);
  display:inline-flex;align-items:center;
  transform:translateY(0.08em);  /* optical centering for Bebas */
}
.nav-slogan{font-family:'Barlow Condensed',sans-serif;font-size:0.56rem;font-weight:600;letter-spacing:1.5px;color:var(--mu);text-transform:uppercase;border-left:1px solid var(--br);padding-left:10px;white-space:nowrap;margin-right:8px;}

/* Search */
.nav-search{display:none !important;}  /* search lives on the Browse page now */
.nav-search-legacy{position:relative;flex:1;max-width:400px;margin-right:16px;}
.nav-search input{
  width:100%;padding:8px 14px 8px 36px;
  background:var(--d2);border:1px solid var(--br);
  color:var(--tx);font-family:'Barlow',sans-serif;font-size:0.84rem;
  outline:none;transition:border-color 0.2s;
}
.nav-search input:focus{border-color:rgba(0,255,135,0.35);}
.nav-search input::placeholder{color:var(--mu);}
.nav-search .si{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mu);font-size:0.8rem;pointer-events:none;}
.search-dd{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--d1);border:1px solid var(--br);
  display:none;z-index:200;max-height:320px;overflow-y:auto;
}
.search-dd.open{display:block;}
.sdd-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  cursor:pointer;border-bottom:1px solid var(--br);transition:background 0.15s;
}
.sdd-item:hover{background:rgba(0,255,135,0.05);}
.sdd-item:last-child{border-bottom:none;}
.sdd-cover{width:30px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--d2);flex-shrink:0;}
.sdd-info{flex:1;}
.sdd-name{font-family:'Barlow Condensed',sans-serif;font-size:0.84rem;font-weight:700;text-transform:uppercase;}
.sdd-meta{font-size:0.7rem;color:var(--mu);}
.sdd-score{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--yl);}

/* Nav links — pushed to the right side of the bar so they sit alongside
   the bell + auth buttons. Logo + slogan stay on the left edge; the wide
   middle gap absorbs the responsive width. */
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nl{
  font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:7px 14px;
  cursor:pointer;border:none;background:none;color:var(--mu);
  transition:all 0.2s;border-bottom:2px solid transparent;
}
.nl:hover{color:var(--tx);}
.nl.active{color:var(--tx);border-bottom-color:rgba(255,255,255,.4);}

/* Auth buttons */
.nav-auth{display:flex;gap:6px;flex-shrink:0;}
.na-btn{
  font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:7px 16px;
  cursor:pointer;border:none;transition:all 0.2s;
}
.na-btn.ghost{background:none;color:var(--mu);border:1px solid var(--br);}
.na-btn.ghost:hover{color:var(--g);border-color:rgba(0,255,135,0.3);}
.na-btn.solid{background:var(--g);color:var(--d0);}
.na-btn.solid:hover{background:var(--yl);}

/* User chip when logged in */
.nav-user{
  display:flex;align-items:center;cursor:pointer;
  padding:0;border:none;background:none;
  border-radius:50%;
  transition:box-shadow .2s;
}
.nav-user:hover{box-shadow:0 0 0 2px rgba(255,255,255,.25);}
/* On the profile page the avatar gets a solid white ring — same
   treatment as the mobile bottom-nav profile button. */
.nav-user.active{box-shadow:0 0 0 2px var(--tx);}
/* Name + stage text are hidden on desktop — the nav profile button is
   now just the circular avatar, matching the mobile pattern. The
   elements stay in the DOM (other code reads #nuName) but don't render. */
.nav-user > div:not(.nu-av){display:none;}
.nu-av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--bl));
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:0.78rem;color:var(--d0);
}
.nu-name{font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.nu-stage{font-size:0.6rem;color:var(--g);}

/* ══════════════════════════════════════════
   SHARED UTILS
══════════════════════════════════════════ */
.pt{padding-top:60px;}
.btn-g{
  font-family:'Barlow Condensed',sans-serif;font-size:0.82rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:12px 28px;
  background:var(--g);color:var(--d0);border:none;cursor:pointer;
  transition:background 0.2s,transform 0.15s;display:inline-block;
}
.btn-g:hover{background:var(--yl);transform:translateY(-1px);}
.btn-ghost{
  font-family:'Barlow Condensed',sans-serif;font-size:0.78rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:11px 24px;
  background:none;border:1px solid var(--br);color:var(--mu);cursor:pointer;
  transition:all 0.2s;
}
.btn-ghost:hover{border-color:var(--g);color:var(--g);}

/* ══════════════════════════════════════════
   CANONICAL FOLLOW + FS BUTTONS
   Used everywhere on the site (game pages, profile actions, Following tab,
   followers/users lists). The pair always appears together at the same
   height so they read as a unit.

   Behaviour:
     .btn-follow         → "+ Follow"        — white border, muted text
     .btn-follow.on      → "✓ Following"     — green border, green text
     .btn-fs             → FS logo only      — grey border, muted FS glyph
     .btn-fs.on          → FS logo only      — gold border, gold FS glyph,
                                                subtle gold glow
   Min-width on follow keeps the button geometry stable when the label
   swaps between "+ Follow" and "✓ Following" (avoids the resize jitter).
══════════════════════════════════════════ */
.btn-follow{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;min-width:108px;
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  background:none;border:1px solid var(--br);color:var(--tx);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s;
  line-height:1;-webkit-tap-highlight-color:transparent;
}
.btn-follow:hover{border-color:rgba(255,255,255,.5);}
.btn-follow.on{
  color:var(--g);border-color:rgba(0,255,135,.5);background:rgba(0,255,135,.06);
}
.btn-follow.on:hover{
  border-color:var(--g);background:rgba(0,255,135,.1);
}
.btn-share{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 14px;
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  background:none;border:1px solid var(--br);color:var(--tx);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s;
  line-height:1;-webkit-tap-highlight-color:transparent;
}
.btn-share:hover{border-color:rgba(255,255,255,.5);}
.btn-share .ui-ic{width:0.9em;height:0.9em;}
.btn-share-icon{padding:0;width:34px;flex-shrink:0;}
.btn-share-icon .ui-ic{width:1.05em;height:1.05em;}

.btn-fs{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;width:42px;padding:0;
  background:none;border:1px solid var(--br);color:var(--mu);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn-fs svg{width:18px;height:18px;display:block;color:inherit;fill:currentColor;}
.btn-fs:hover{color:var(--tx);border-color:rgba(255,255,255,.5);}
.btn-fs.on{
  color:var(--score);border-color:var(--score);background:rgba(226,201,110,.08);
  box-shadow:0 0 10px rgba(226,201,110,.18);
}
.btn-fs.on:hover{background:rgba(226,201,110,.14);}

/* Log Out button on the profile page — destructive variant of btn-ghost.
   Muted at rest so it doesn't shout; on hover it firms up red. */
.ph-logout{color:var(--mu);border-color:var(--br);}
.ph-logout:hover{color:var(--dn);border-color:var(--dn);}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mu);}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:1px;}
.tag{font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;background:rgba(255,255,255,0.05);border:1px solid var(--br);color:var(--mu);}
.stage-pill{font-family:'Barlow Condensed',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;background:rgba(0,255,135,0.08);color:var(--g);}

/* Level + stars rendering. `formatLevel()` splits the legacy "Level N ★★★"
   string into two spans so they can be aligned independently. The stars
   render in the browser's fallback font (cap-height noticeably lower than
   Bebas's all-caps), so we vertically nudge them to optically centre with
   the text. */
.lvl-text{vertical-align:middle;}
.lvl-stars{
  display:inline-block;vertical-align:middle;
  margin-left:.35em;line-height:1;
  /* Match the cap-height of the LEVEL text exactly — same font-size as
     the surrounding text, with a small upward nudge so the star body's
     visual centre lines up with the text's cap-height midline (stars
     have a top point but no bottom point, so they read as bottom-
     heavy without this correction). */
  font-size:1em;
  transform:translateY(-0.06em);
  letter-spacing:.05em;
  color:inherit;
}
.card{background:var(--cd);border:1px solid var(--br);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}

/* ══════════════════════════════════════════
   FOLLOWING TAB — sub-toggle + row layout
══════════════════════════════════════════ */
.fol-sub-toggle{
  display:inline-flex;background:var(--cd);border:1px solid var(--br);
  padding:3px;gap:2px;flex-wrap:wrap;
}
.fst-btn{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:7px 10px;background:none;border:none;color:var(--mu);
  cursor:pointer;transition:color .15s,background .15s;
  display:inline-flex;align-items:center;gap:5px;
}
.fst-btn:hover{color:var(--tx);}
.fst-btn.on{background:var(--tx);color:var(--d0);}
.fst-ct{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  background:rgba(0,0,0,.18);padding:1px 5px;font-size:.62rem;border-radius:2px;
}
.fst-btn.on .fst-ct{background:rgba(0,0,0,.25);}

/* FS sub-tab — actual logo glyph instead of "FS" text. The SVG inherits
   colour from the button so it flips with the active state. */
.fst-btn-fs{padding:5px 10px;}
.fst-fs-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:14px;
}
.fst-fs-icon svg{
  width:100%;height:100%;display:block;
  color:inherit;fill:currentColor;
}

/* List rows — horizontal: avatar/name on left, action on right */
.fol-list{display:flex;flex-direction:column;gap:2px;}
.fol-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;background:var(--cd);
  border:1px solid var(--br);
  transition:border-color .15s,opacity .15s;
}
.fol-row:hover{border-color:rgba(255,255,255,.15);}
.fol-row.staged-off{opacity:.55;}
.fol-row-main{
  flex:1;display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer;
}
.fol-av{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.92rem;font-weight:800;
  letter-spacing:.5px;color:#fff;
}
.fol-av-dev{background:linear-gradient(135deg,#3a3a3a,#1a1a1a);}
.fol-cover{
  width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
.fol-info{min-width:0;flex:1;}
.fol-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:.3px;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fol-meta{
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;
  letter-spacing:1px;color:var(--mu);text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-top:2px;
}

/* Following-tab row action buttons use the canonical .btn-follow / .btn-fs
   classes from the global system (defined near the top of the stylesheet).
   No local overrides needed — rows render the same buttons used everywhere. */

/* Empty state */
.fol-empty{padding:48px 20px;text-align:center;background:var(--cd);border:1px dashed var(--br);}
.fol-empty-inner{max-width:380px;margin:0 auto;}
.fol-empty-emoji{font-size:2rem;margin-bottom:8px;}
.fol-empty-title{
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--tx);
  letter-spacing:1px;margin-bottom:6px;
}
.fol-empty-sub{font-size:.82rem;color:var(--mu);line-height:1.6;}

/* Section header inside a sub-tab. Used in FS sub-tab to label the Users
   vs Developers sections. Both headers render in primary text colour with
   the count badge sized to match so it reads as part of the heading. */
.fol-section-hdr{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--tx);
  margin:0 0 12px;display:flex;align-items:center;gap:10px;
}
.fol-section-users,.fol-section-devs{color:var(--tx);}
.fsh-ct{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  color:var(--mu);
  font-size:.95rem;letter-spacing:1px;line-height:1;
}

/* Scroll wrapper — shows up to ~5 rows before scrolling. Each row is
   roughly 70px (12px padding + 46px avatar + 12px padding) plus 2px gap.
   5 rows × 72px ≈ 360px. The wrapper keeps the gap between rows visible
   and the scrollbar inside the section, not the whole tab. */
.fol-scroll-wrap{
  display:flex;flex-direction:column;gap:2px;
  max-height:360px;overflow-y:auto;
  padding-right:4px;  /* breathing room for the scrollbar */
}
.fol-scroll-wrap::-webkit-scrollbar{width:6px;}
.fol-scroll-wrap::-webkit-scrollbar-track{background:transparent;}
.fol-scroll-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px;}
.fol-scroll-wrap::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}

/* Followers modal — list rows reuse .fol-row but get tighter spacing inside
   the modal. Scroll is on the list element so the header stays sticky. */
.followers-modal-list{display:flex;flex-direction:column;gap:2px;padding-right:4px;}
.followers-modal-list .fol-row{padding:10px 12px;}
.followers-modal-list .fol-av{width:40px;height:40px;font-size:.82rem;}

/* ══════════════════════════════════════════
   AVATAR PICKER (Edit Profile page)
══════════════════════════════════════════ */
.avp-preview-row{
  display:flex;align-items:center;gap:16px;
  margin-bottom:18px;padding:14px;
  background:var(--cd);border:1px solid var(--br);
}
.avp-preview{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;font-weight:800;
  letter-spacing:1px;color:#fff;
  background:var(--cd);
}
.avp-preview-meta{flex:1;min-width:0;}
.avp-preview-label{
  font-family:'Bebas Neue',sans-serif;font-size:1.05rem;letter-spacing:1px;
  color:var(--tx);margin-bottom:2px;
}
.avp-preview-sub{
  font-size:.74rem;color:var(--mu);line-height:1.5;
}

.avp-options{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:8px;
}
.avp-opt{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;background:var(--cd);
  border:1px solid var(--br);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.avp-opt:hover:not(.off){border-color:rgba(255,255,255,.18);background:var(--d2);}
.avp-opt.on{border-color:var(--g);background:rgba(0,255,135,.05);}
.avp-opt.off{opacity:.45;cursor:not-allowed;}
.avp-opt-av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.86rem;font-weight:800;
  letter-spacing:.5px;color:#fff;
}
.avp-opt-text{min-width:0;flex:1;}
.avp-opt-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.5px;color:var(--tx);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.avp-opt-sub{
  font-size:.68rem;color:var(--mu);line-height:1.4;margin-top:2px;
}
.avp-active-pill{
  font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  background:var(--g);color:var(--d0);padding:1px 6px;
}
.sep{height:1px;background:var(--br);}

/* Dual score */
.dual-score{display:flex;gap:2px;}
.ds-box{padding:16px 20px;flex:1;position:relative;overflow:hidden;}
.ds-box::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--dsc,var(--g));}
.ds-lbl{font-family:'Barlow Condensed',sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-bottom:4px;display:flex;align-items:center;gap:4px;}
.ds-lbl::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--dsc,var(--g));}
.ds-num{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;color:var(--dsc,var(--g));line-height:1;}
.ds-num .den{font-size:1rem;color:var(--mu);}
.ds-sub{font-size:0.65rem;color:var(--mu);margin-top:2px;}

/* STAGES bar */
.stages-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.sb-el{text-align:center;padding:8px 4px;background:rgba(255,255,255,0.02);border-top:2px solid var(--sc);}
.sb-l{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--sc);line-height:1;}
.sb-n{font-family:'Barlow Condensed',sans-serif;font-size:0.48rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);margin:2px 0;}
.sb-v{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;color:var(--tx);}

/* Notification bell in nav — same SVG silhouette as the mobile bar's bell icon.
   Sits visibly on every page regardless of login state. */
.nav-bell{
  position:relative;background:none;border:none;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  color:#9a9a9a;transition:color .15s,background .15s;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin-right:10px;
  -webkit-tap-highlight-color:transparent;
}
.nav-bell:hover{color:#ffffff;background:rgba(255,255,255,.06);}
.nav-bell.active{color:#ffffff;}
[data-theme="light"] .nav-bell{color:#9a9a9a;}
[data-theme="light"] .nav-bell:hover,
[data-theme="light"] .nav-bell.active{color:#1a1a1a;background:rgba(0,0,0,.06);}
.nav-bell svg{width:17.6px;height:17.6px;stroke:currentColor;}
.nb-dot{
  position:absolute;top:7px;right:8px;
  width:8px;height:8px;background:var(--dn);border-radius:50%;
  border:2px solid var(--d0);
}

/* ══════════════════════════════════════════
   MOBILE BOTTOM NAV
   Visible only on small screens. Sticky at bottom.
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   MOBILE BOTTOM NAV
   Bar content height locked to 31px (19px icon + 6px above + 6px below).
   Profile circle (38px) overflows upward by 13px above the bar's top edge.
   Dome above the bar is a CIRCLE concentric with the profile circle:
   radius = profile-radius (19px) + 6px gap = 25px. The dome's centre sits
   at 6px below the bar's top (where the profile circle's centre lives),
   so the visible portion above the bar is the upper portion of that arc.
══════════════════════════════════════════ */
.mobile-bottom-nav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:1500;
  /* Bar content height = 4 (above icons) + 19 (icon) + 4 (below) = 27px. */
  height:calc(27px + env(safe-area-inset-bottom));
  padding:0 4px env(safe-area-inset-bottom) 4px;
  grid-template-columns:repeat(7,1fr);
  /* Lock the grid row to 27px so the tall profile circle doesn't stretch it.
     Without this, grid auto-sizes the row to its tallest item (44px circle),
     squashing the icons against the top edge. */
  grid-auto-rows:27px;
  align-items:start;
  background:#141414;
  border-top:1px solid var(--br);
  overflow:visible;
}
[data-theme="light"] .mobile-bottom-nav{background:#ededea;}
.mbn-item{
  display:flex;align-items:center;justify-content:center;
  padding:0;background:none;border:none;cursor:pointer;
  color:#9a9a9a;transition:color .15s,transform .12s;
  position:relative;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  height:19px;
  margin-top:4px;  /* 4px gap from the bar's top edge */
}
[data-theme="light"] .mbn-item{color:#9a9a9a;}
.mbn-item:active{transform:scale(.92);}
.mbn-item.active{color:#ffffff;}
[data-theme="light"] .mbn-item.active{color:#1a1a1a;}
.mbn-svg{
  width:19px;height:19px;display:block;
  stroke:currentColor;color:inherit;
}
/* Profile slot. Bottom of the circle aligns with bottoms of the icons:
   icons sit with their bottom 4px above the bar bottom (top:4px + height:19px
   in a 27px bar). Profile has margin-bottom:4px so its bottom sits at the
   same line. The circle's top extends above the bar's top edge (it's 31px
   tall, and the bar's content is 27px, so it overhangs by 4px). */
.mbn-profile{
  align-self:end;
  height:31px;width:31px;justify-self:center;
  margin-top:0;
  margin-bottom:4px;
  z-index:2;position:relative;
}
.mbn-profile .mbn-av{
  width:31px;height:31px;border-radius:50%;
  background:linear-gradient(135deg,var(--pu),var(--bl));
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.74rem;font-weight:800;
  letter-spacing:.5px;color:#fff;
  /* Grey outline same colour as the bar's top border (.mobile-bottom-nav
     uses border-top:1px solid var(--br)). Active state replaces the colour. */
  border:2px solid var(--br);transition:border-color .15s;
}
.mbn-profile.active .mbn-av{border-color:#ffffff;}
[data-theme="light"] .mbn-profile.active .mbn-av{border-color:#1a1a1a;}
/* When logged out the slot holds the FS logo on a solid black circle. */
.mbn-profile .mbn-av svg{width:18px;height:18px;display:block;color:#fff;}
.mbn-bell-dot{
  position:absolute;top:-2px;right:calc(50% - 14px);
  width:8px;height:8px;background:var(--dn);border-radius:50%;
  border:2px solid var(--d1);
}

@media(max-width:768px){
  .mobile-bottom-nav{display:grid;}
  /* Pad body to match the bar's ~27px content + safe-area. */
  body{padding-bottom:34px;}
  /* On mobile the bottom nav covers Profile + Notifications, so the top nav
     doesn't need the bell button or the avatar/logout block. */
  .nav-bell{display:none;}
  #navUser{display:none !important;}
}

/* Bias indicator — simple +/- pill. Using flex centering + a fixed-line-height
   sans-serif fallback (not Bebas) since Bebas's tall ascenders make +/- glyphs
   sit visually off-centre inside a tiny circle. */
.bias-indicator{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  position:relative;cursor:help;border-radius:50%;
  box-sizing:border-box;
}
.bias-indicator .bias-glyph{
  width:14px;height:14px;display:block;
  /* Drawn from a 0,0,18,18 viewBox so the geometric centre is guaranteed.
     Scaled down to 14px so the glyph has a touch of breathing room from
     the circle's border. */
}
.bias-pos{background:rgba(74,158,92,.12);border:1px solid rgba(74,158,92,.4);color:var(--up);}
.bias-neg{background:rgba(184,74,74,.12);border:1px solid rgba(184,74,74,.4);color:var(--dn);}
.bi-tip{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--d1);border:1px solid var(--br);
  padding:8px 12px;width:220px;font-size:0.72rem;color:var(--tx);
  line-height:1.5;font-weight:600;letter-spacing:.3px;text-transform:none;
  opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:10;
  font-family:'Barlow',sans-serif;text-align:left;
}
.bias-indicator:hover .bi-tip,.bias-indicator:focus .bi-tip{opacity:1;}
@media(hover:none){
  .bias-indicator:active .bi-tip{opacity:1;}
}

/* Toast */
#toast{
  position:fixed;bottom:39px;right:24px;z-index:9999;
  padding:11px 20px;background:var(--d1);border:1px solid var(--g);
  color:var(--tx);font-family:'Barlow Condensed',sans-serif;
  font-size:0.8rem;font-weight:600;letter-spacing:1px;
  transform:translateY(60px);opacity:0;transition:all 0.28s ease;
  clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);
  max-width:320px;
}
#toast.show{transform:translateY(0);opacity:1;}
#toast.err{border-color:var(--pk);}

/* Form elements */
.fi{width:100%;padding:11px 14px;background:var(--d2);border:1px solid var(--br);color:var(--tx);font-family:'Barlow',sans-serif;font-size:0.88rem;outline:none;transition:border-color 0.2s;-webkit-appearance:none;}
.fi:focus{border-color:rgba(0,255,135,.4);}
.fi::placeholder{color:var(--mu);}
.fl{display:block;font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-bottom:6px;}
.fg{margin-bottom:18px;}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--d1);border:1px solid var(--br);max-width:540px;width:92%;padding:36px;position:relative;animation:mIn .22s ease;}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.modal-x{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--mu);font-size:1.1rem;cursor:pointer;transition:color .2s;}
.modal-x:hover{color:var(--pk);}
.modal h3{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:1px;margin-bottom:14px;}
.modal h3 em{color:var(--g);font-style:normal;}
.modal-submit{width:100%;padding:14px;background:var(--g);color:var(--d0);font-family:'Barlow Condensed',sans-serif;font-size:0.88rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;transition:background .2s;margin-top:6px;}
.modal-submit:hover{background:var(--yl);}

/* ══════════════════════════════════════════
   LANDING PAGE
══════════════════════════════════════════ */
#pg-landing{padding-top:0;}

/* ── Hero ── */
.land-hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 0;position:relative;overflow:hidden;
}
.land-bg{position:absolute;inset:0;background:var(--d0);}
.land-noise{position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;}

/* top nav bar within hero */
.hero-nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;gap:0;height:60px;padding:0 28px;
}
.hero-nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;}
.hero-nav-logo svg{color:var(--tx);}
.hero-nav-wordmark{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:3px;color:var(--tx);}
.hero-nav-links{display:flex;gap:4px;margin-left:28px;}
.hnl{background:none;border:none;color:var(--mu);font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 12px;cursor:pointer;transition:color .2s;}
.hnl:hover{color:var(--tx);}
.hero-nav-search{
  position:relative;flex:1;max-width:340px;margin:0 auto;
}
.hero-nav-search input{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--tx);font-family:'Barlow',sans-serif;font-size:.82rem;
  padding:7px 14px 7px 34px;outline:none;border-radius:2px;transition:all .2s;
}
.hero-nav-search input:focus{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}
.hero-nav-search input::placeholder{color:var(--mu);}
.hero-nav-search::before{content:'⌕';position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mu);font-size:1rem;pointer-events:none;}
.hero-nav-auth{display:flex;gap:6px;margin-left:auto;}

/* hero main content */
.hero-body{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 420px;
  gap:0;min-height:100vh;
}
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 60px 80px;
  border-right:1px solid var(--br);
}
.hero-kicker{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--mu);
  margin-bottom:20px;
}
.hero-h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.2rem,7vw,6.5rem);
  line-height:.95;letter-spacing:1px;margin-bottom:24px;
}
.hero-slogan{
  font-size:1rem;color:var(--mu2);font-style:italic;
  margin-bottom:28px;line-height:1.5;max-width:420px;
}
.hero-desc{
  font-size:.9rem;color:var(--mu);line-height:1.7;max-width:400px;margin-bottom:36px;
}
.hero-desc strong{color:var(--tx);}
.hero-plats{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap;}
.hp-badge{
  display:flex;align-items:center;gap:5px;padding:4px 11px;
  background:rgba(255,255,255,.04);border:1px solid var(--br);
  font-family:'Barlow Condensed',sans-serif;font-size:.65rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
}
.hp-dot{width:5px;height:5px;border-radius:50%;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:56px;}
.hero-stats{
  display:flex;gap:36px;padding-top:32px;border-top:1px solid var(--br);
}
.hs-stat{}
.hs-num{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--tx);line-height:1;}
.hs-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-top:2px;}

/* right panel — new releases */
.hero-right{
  display:flex;flex-direction:column;
  background:var(--d1);border-left:1px solid var(--br);
  overflow:hidden;
}
.hero-right-hdr{
  padding:20px 22px 14px;border-bottom:1px solid var(--br);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.hero-right-hdr h3{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mu);}
.new-releases-list{flex:1;overflow-y:auto;padding:8px 0;}
.nr-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 22px;cursor:pointer;transition:background .15s;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.nr-item:last-child{border-bottom:none;}
.nr-item:hover{background:rgba(255,255,255,.03);}
.nr-cover{
  width:42px;height:56px;background:var(--cd);border-radius:2px;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  flex-shrink:0;border:1px solid var(--br);
}
.nr-info{flex:1;min-width:0;}
.nr-name{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nr-meta{font-size:.65rem;color:var(--mu);margin-top:2px;}
.nr-score{text-align:right;flex-shrink:0;}
.nr-score .ns-val{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--score);line-height:1;}
.nr-score .ns-crit{font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--pro);margin-top:1px;}

/* hero search tab bar */
.hero-tabs{
  display:flex;border-bottom:1px solid var(--br);padding:0 60px;
  background:var(--d0);position:relative;z-index:2;flex-shrink:0;
}
.htab{
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:14px 16px;
  background:none;border:none;color:var(--mu);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px;
}
.htab:hover{color:var(--tx);}
.htab.on{color:var(--tx);border-bottom-color:var(--tx);}

/* How it works strip */
.how-strip{padding:80px 60px;background:var(--d1);border-top:1px solid var(--br);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;position:relative;}
.steps::before{content:'';position:absolute;top:28px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,var(--g),var(--bl),var(--pk),var(--yl));}
.step{text-align:center;padding:0 20px;}
.step-num{width:56px;height:56px;border:2px solid var(--sn-c,var(--g));border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--sn-c,var(--g));margin:0 auto 22px;background:var(--d0);position:relative;z-index:1;}
.step h4{font-family:'Barlow Condensed',sans-serif;font-size:0.9rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.step p{font-size:0.8rem;color:var(--mu);line-height:1.6;}

/* Category system section */
.stages-brand{padding:80px 60px;background:var(--d0);}
.stages-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:36px;}
.sg-card{background:var(--cd);border-top:3px solid var(--sgc);overflow:hidden;}
.sg-header{display:flex;align-items:center;gap:10px;padding:18px 18px 12px;}
.sg-letter{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--sgc);line-height:1;width:28px;flex-shrink:0;}
.sg-word{font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.sg-subs{border-top:1px solid var(--br);padding:10px 0;}
.sg-sub{display:flex;align-items:center;gap:8px;padding:6px 18px;}
.sg-sub-dot{width:4px;height:4px;border-radius:50%;background:var(--sgc);opacity:.6;flex-shrink:0;}
.sg-sub-name{font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);}

/* Featured reviews on landing */
.land-reviews{padding:80px 60px;background:var(--d1);border-top:1px solid var(--br);}
.lr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2px;margin-top:36px;}
.lr-card{background:var(--cd);padding:24px;cursor:pointer;transition:transform .2s;border-left:3px solid transparent;}
.lr-card:hover{transform:translateX(4px);border-left-color:var(--g);}
.lrc-game{font-family:'Barlow Condensed',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bl);margin-bottom:8px;}
.lrc-score{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--yl);line-height:1;margin-bottom:6px;}
.lrc-text{font-size:0.82rem;color:var(--mu);line-height:1.6;margin-bottom:12px;}
.lrc-meta{font-size:0.7rem;color:var(--mu);}
.lrc-verified{color:var(--g);}

/* CTA section */
.land-cta-section{padding:100px 60px;text-align:center;position:relative;overflow:hidden;background:var(--d0);}
.land-cta-section h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,7vw,6rem);line-height:.95;margin-bottom:20px;position:relative;}
.land-slogan-bottom{font-size:.9rem;color:var(--mu);font-style:italic;margin-bottom:32px;position:relative;}

/* ══════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════ */
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 60px);}
.auth-left{background:var(--d1);padding:60px 50px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--br);position:relative;overflow:hidden;}
.auth-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 20% 50%,rgba(0,255,135,.04) 0%,transparent 60%);}
.auth-left-inner{position:relative;}
.auth-left h2{font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;margin-bottom:16px;}
.auth-left h2 em{color:var(--g);font-style:normal;}
.auth-left p{color:var(--mu);font-size:0.85rem;line-height:1.7;margin-bottom:32px;}
.stage-levels{display:flex;flex-direction:column;gap:10px;}
.sl-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.02);border:1px solid var(--br);border-left:3px solid var(--slc);}
.sl-badge{font-family:'Bebas Neue',sans-serif;font-size:0.9rem;letter-spacing:1px;color:var(--slc);min-width:90px;}
.sl-req{font-size:0.72rem;color:var(--mu);}
.auth-right{padding:60px 50px;display:flex;flex-direction:column;justify-content:center;}
.auth-right h3{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:1px;margin-bottom:4px;}
.auth-sub{color:var(--mu);font-size:0.84rem;margin-bottom:28px;}
.auth-sub a{color:var(--g);cursor:pointer;}
.plat-btns{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.pb{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--d2);border:1px solid var(--br);color:var(--mu);font-family:'Barlow Condensed',sans-serif;font-size:0.78rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;width:100%;}
.pb:hover{border-color:var(--pbc);}
.pb.on{border-color:var(--pbc);color:var(--pbc);background:rgba(255,255,255,.02);}
.pb .ps{margin-left:auto;font-size:0.65rem;}
.pb.on .ps::after{content:'✓ Connected';color:var(--pbc);}
.pb:not(.on) .ps::after{content:'Click to Link';}
.divider-text{display:flex;align-items:center;gap:10px;color:var(--mu);font-size:0.75rem;margin:14px 0;}
.divider-text::before,.divider-text::after{content:'';flex:1;height:1px;background:var(--br);}

/* ══════════════════════════════════════════
   HOME PAGE — LOGGED-OUT HERO
══════════════════════════════════════════ */
.lo-hero{
  background:linear-gradient(180deg,var(--d1) 0%,var(--d0) 100%);
  border-bottom:1px solid var(--br);
  padding:48px 40px;
  position:relative;overflow:hidden;
}
.lo-hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at top right,black 0%,transparent 70%);
  pointer-events:none;
}
.lo-hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;
  max-width:1280px;margin:0 auto;
}
.lo-kicker{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--mu);
  margin-bottom:14px;line-height:1.3;
}
/* When the kicker sits BELOW the headline (as a second small caption
   row), pull it slightly tighter to the headline above so the pair
   reads as a unit rather than two separated taglines, and shrink it
   back down so the lead kicker dominates the pair. */
.lo-kicker-sub{
  font-size:.62rem;line-height:1.5;
  margin-top:-2px;margin-bottom:18px;
}
.lo-h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:.95;letter-spacing:1px;
  margin-bottom:14px;
}
.lo-slogan{
  font-size:.92rem;color:var(--mu2);font-style:italic;
  margin-bottom:16px;
}
.lo-desc{
  font-size:.84rem;color:var(--mu);line-height:1.65;
  margin-bottom:22px;max-width:480px;
}
.lo-desc strong{color:var(--tx);}
.lo-actions{display:flex;gap:10px;flex-wrap:wrap;}
.lo-hero-stats{
  display:flex;flex-direction:column;gap:18px;
  padding-left:36px;border-left:1px solid var(--br);
}
.lo-stat-num{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;color:var(--tx);line-height:1;}
.lo-stat-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-top:2px;}

/* Logged-out footer CTA */
.lo-footer{
  padding:60px 40px;text-align:center;
  background:var(--d1);border-top:1px solid var(--br);
}
.lo-footer h2{
  font-family:'Bebas Neue',sans-serif;font-size:2.4rem;
  letter-spacing:1px;margin-bottom:10px;
}
.lo-footer p{
  color:var(--mu);font-size:.9rem;line-height:1.6;
  margin-bottom:24px;max-width:480px;margin-left:auto;margin-right:auto;
}

@media(max-width:768px){
  .lo-hero{padding:32px 20px;}
  .lo-hero-inner{grid-template-columns:1fr;gap:28px;}
  .lo-hero-stats{flex-direction:row;justify-content:space-between;padding-left:0;border-left:none;border-top:1px solid var(--br);padding-top:22px;}
  .lo-stat-num{font-size:1.8rem;}
  .lo-footer{padding:48px 20px;}
}

/* ══════════════════════════════════════════
   HOME / DISCOVER
══════════════════════════════════════════ */
.home-hero{
  position:relative;overflow:hidden;height:480px;cursor:pointer;
}
.hh-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0d0520,#050d1a,#0a0a0f);transition:transform .6s ease;}
.home-hero:hover .hh-bg{transform:scale(1.02);}
.hh-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 15% 60%,rgba(192,132,252,.12) 0%,transparent 60%),radial-gradient(ellipse 40% 60% at 85% 30%,rgba(0,207,255,.07) 0%,transparent 60%);}
.hh-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,255,135,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,135,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 25% 50%,black 20%,transparent 70%);}
.hh-cover{position:absolute;right:80px;top:50%;transform:translateY(-50%);width:180px;height:240px;display:flex;align-items:center;justify-content:center;font-size:5rem;background:linear-gradient(135deg,#1a0a3d,#0a1a4d);border:1px solid rgba(255,255,255,.1);box-shadow:-30px 0 60px rgba(0,0,0,.5);}
.hh-content{position:absolute;left:56px;top:50%;transform:translateY(-50%);max-width:460px;}
.hh-label{font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#fff;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.hh-label::before{content:'';width:16px;height:1px;background:#fff;}
.hh-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5vw,4.5rem);line-height:.95;letter-spacing:2px;margin-bottom:12px;color:#fff;}
.hh-scores{display:flex;gap:16px;margin-bottom:20px;}
.hh-sc{text-align:center;}
/* Featured hero: all scores + labels render white for a clean spotlight
   look (overrides the per-dimension --sc colour). */
.hh-sc .n{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:1;color:#fff;}
.hh-sc .l{font-size:0.58rem;color:rgba(255,255,255,.65);font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;}

/* New Releases swipeable strip */
.new-releases-strip{
  padding:0 0 0;border-bottom:1px solid var(--br);
  background:var(--d1);
}
.nrs-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px 12px;
}
.nrs-hdr h3{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mu);}
.nrs-scroll{
  display:flex;gap:2px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding:0 28px 16px;
  scrollbar-width:none;
  /* Don't stretch cards to match the tallest sibling. Each card sizes
     to its own content so there's no empty space below shorter titles. */
  align-items:flex-start;
}
.nrs-scroll::-webkit-scrollbar{display:none;}
.nrc{
  flex:0 0 140px;width:140px;max-width:140px;min-width:0;scroll-snap-align:start;
  background:var(--cd);border:1px solid var(--br);cursor:pointer;
  transition:border-color .2s;
}
.nrc:hover{border-color:rgba(255,255,255,.18);}
.nrc-cover{
  height:80px;display:flex;align-items:center;justify-content:center;
  font-size:2rem;border-bottom:1px solid var(--br);
}
/* Trimmer body padding — bottom is tight so the score strip sits close
   to the card's bottom edge. Top stays comfortable for the title. */
.nrc-body{padding:8px 10px 6px;}
/* Clamp the name to a single line so every card has the same content
   height — keeps the row visually rhythmic. Truncation handles long names. */
.nrc-name{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.2;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nrc-meta{font-size:.58rem;color:var(--mu);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* New Releases card score strip — three small score cells in a tight
   row. Each cell stacks the numeric value (Bebas Neue) above an
   uppercase label (Barlow Condensed). Colour is set inline per cell. */
.nrc-scores{display:flex;gap:8px;align-items:flex-end;}
.nrc-sc{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.nrc-sc-val{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;line-height:1;letter-spacing:.5px;}
.nrc-sc-empty{color:var(--mu);}
.nrc-sc-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin-top:2px;}

/* Trending */
/* Trending — column-fill 2-column grid (rank 1-5 left column top→bottom,
   rank 6-10 right column top→bottom). Each cell is a row with rank +
   cover + title + 3-score strip. The column-major fill order eliminates
   the wasted vertical space a single-column 10-row stack would create. */
.trending-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(5, auto);
  grid-auto-flow:column;
  gap:1px;
}
.tr-row{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:14px;align-items:center;
  padding:12px 16px;background:var(--cd);
  border-left:3px solid var(--br);
  cursor:pointer;transition:background .15s;
}
.tr-row:hover{background:rgba(255,255,255,.04);}
.tr-row:hover .tr-name{color:var(--g);}
.tr-rank{
  font-family:'Bebas Neue',sans-serif;font-size:1.6rem;line-height:1;
  color:var(--mu);text-align:center;letter-spacing:1px;
}
.tr-cover{
  width:56px;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;border:1px solid var(--br);
}
.tr-body{min-width:0;display:flex;flex-direction:column;gap:3px;}
.tr-title-row{display:flex;align-items:center;gap:8px;min-width:0;}
.tr-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .15s;
}
.tr-pill{
  font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:2px 6px;flex-shrink:0;
}
.tr-pill-hot{background:rgba(255,80,140,.15);color:var(--pk);}
.tr-pill-up {background:rgba(45,201,128,.15);color:var(--g);}
.tr-pill-new{background:rgba(80,160,255,.15);color:var(--bl);}
.tr-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
}
.tr-sep{opacity:.5;}
.tr-week{color:var(--g);}
.tr-scores{display:flex;gap:10px;align-items:flex-end;flex-shrink:0;}
.tr-sc{display:flex;flex-direction:column;align-items:flex-start;}
.tr-sc-val{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;line-height:1;letter-spacing:.5px;}
.tr-sc-empty{color:var(--mu);}
.tr-sc-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin-top:2px;}

/* Game cards */
.game-card{background:var(--cd);cursor:pointer;transition:all .25s;border:1px solid var(--br);overflow:hidden;}
.game-card:hover{transform:translateY(-4px);border-color:rgba(0,255,135,.2);box-shadow:0 12px 36px rgba(0,0,0,.4);}
.gc-cover{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:2.8rem;position:relative;}
.gc-body{padding:12px 12px 14px;min-width:0;overflow:hidden;}
.gc-name{font-family:'Barlow Condensed',sans-serif;font-size:0.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Meta (dev · year) stays on ONE line and truncates with an ellipsis so a
   long studio name (e.g. "Santa Monica Studio") never widens or misaligns
   the card. Full text is available via the title tooltip. */
.gc-meta{font-size:0.66rem;color:var(--mu);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.gc-meta .gc-meta-inner{display:inline;}
.gc-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;}
.gc-bigwrap{display:flex;align-items:flex-end;gap:5px;}
/* The main-score type label box sits to the right of the large score; the
   number is bottom-aligned so the very bottom of the digits lines up with
   the bottom of the label box (not the label text). */
.gc-biglbl{font-family:'Barlow Condensed',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:2px 5px;line-height:1;}
.gc-smalls{display:flex;align-items:baseline;gap:6px;}
/* Main score is white (no longer the per-dimension colour). The tiny
   translate drops the digits so their visible bottom edge sits flush with
   the bottom of the label box beside them (Bebas has a small line-box gap). */
.gc-score{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:#fff;line-height:1;transform:translateY(4.75px);}
/* The two non-selected scores are neutral grey so the white main score
   clearly reads as the active dimension. */
.gc-pro{font-family:'Barlow Condensed',sans-serif;font-size:0.56rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);padding:1px 4px;background:var(--d2);border:1px solid var(--br);}
.gc-critic{font-family:'Barlow Condensed',sans-serif;font-size:0.56rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);padding:1px 5px;background:var(--d2);border:1px solid var(--br);}

/* Home section */
.hs{padding:40px;}
.hs-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
/* Section title — small uppercase eyebrow style matching the New
   Releases strip header. Tappable: cursor + hover colour change since
   each title doubles as a link to the relevant filtered listing. */
.hs-title{
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--mu);
  cursor:pointer;background:none;border:none;padding:0;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s;
}
.hs-title:hover{color:var(--tx);}
.hs-title em{color:var(--g);font-style:normal;}
/* Tiny baseline tweak for icons embedded in section headers — the
   Barlow Condensed eyebrow has a slightly higher visual centre than
   Bebas / body text, so icons sit a hair too high without this. */
.hs-title .ui-ic,
.nrs-hdr h3 .ui-ic{vertical-align:-0.18em;}
/* Match New Releases strip header to the same eyebrow style (it's
   identical now, but the markup uses h3 so we re-target). */
.nrs-hdr h3{
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--mu);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:color .2s;
}
.nrs-hdr h3:hover{color:var(--tx);}
.see-all{font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);background:none;border:none;cursor:pointer;transition:color .2s;}
.see-all:hover{color:var(--g);}

/* ══════════════════════════════════════════
   BROWSE
══════════════════════════════════════════ */
.browse-layout{display:grid;grid-template-columns:220px 1fr;}
.browse-sb{background:var(--d1);border-right:1px solid var(--br);padding:20px 0;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;}
.bsb-sec{margin-bottom:22px;}
.bsb-lbl{font-family:'Barlow Condensed',sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mu);padding:0 16px;margin-bottom:8px;display:block;}
.bsb-item{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;cursor:pointer;font-size:0.82rem;color:var(--mu);transition:all .15s;border-left:2px solid transparent;}
.bsb-item:hover{color:var(--tx);background:rgba(255,255,255,.03);}
.bsb-item.on{color:var(--g);border-left-color:var(--g);background:rgba(0,255,135,.04);}
.bsb-ct{font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;color:var(--mu);letter-spacing:1px;}
/* min-width:0 lets the 1fr track shrink so the horizontal Trending rail
   scrolls inside it instead of blowing out the page width. */
.browse-main{padding:24px 28px;min-width:0;}
#browseReleasedView,#browseUpcomingView{min-width:0;}

/* Prominent search bar at the top of the Browse page. Filters the grid live. */
.browse-search{
  position:relative;display:flex;align-items:center;
  margin-bottom:18px;
  background:var(--d2);border:1px solid var(--br);
  transition:border-color .15s;
}
.browse-search:focus-within{border-color:rgba(0,255,135,.4);}
.bs-icon{
  padding:0 14px;font-size:1rem;color:var(--mu);
  pointer-events:none;
}
.bs-input{
  flex:1;padding:14px 0;
  background:none;border:none;outline:none;
  font-family:'Barlow',sans-serif;font-size:.95rem;color:var(--tx);
}
.bs-input::placeholder{color:var(--mu);}
.bs-clear{
  display:none;align-items:center;justify-content:center;
  width:36px;height:36px;margin-right:6px;border-radius:50%;
  background:none;border:none;cursor:pointer;
  color:var(--mu);font-size:.95rem;
  transition:color .15s,background .15s;
}
.bs-clear:hover{color:var(--tx);background:rgba(255,255,255,.06);}

/* Empty state when search has no matches */
.browse-empty{
  grid-column:1/-1;
  padding:60px 24px;text-align:center;
  background:var(--cd);border:1px dashed var(--br);
}
.be-emoji{font-size:2.4rem;margin-bottom:12px;opacity:.5;}
.be-title{
  font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:1px;
  color:var(--tx);margin-bottom:6px;
}
.be-sub{
  font-size:.84rem;color:var(--mu);line-height:1.6;
  max-width:360px;margin:0 auto;
}

.sort-bar{display:flex;align-items:center;gap:7px;margin-bottom:18px;flex-wrap:wrap;}
@media(max-width:640px){
  /* On mobile, drop the "Sort:" label and keep the buttons on one line. */
  #pg-browse .sort-bar{flex-wrap:nowrap;gap:5px;overflow-x:auto;scrollbar-width:none;}
  #pg-browse .sort-bar::-webkit-scrollbar{display:none;}
  #pg-browse .sort-bar .sp-label{display:none;}
  #pg-browse .sort-bar .sp{flex:0 0 auto;white-space:nowrap;padding:6px 10px;font-size:.6rem;}
  #pg-browse .sort-bar .res-count{display:none;}
}
.sp{font-family:'Barlow Condensed',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;background:var(--d2);border:1px solid var(--br);color:var(--mu);cursor:pointer;transition:all .2s;}
.sp:hover{color:var(--tx);}
.sp.on{border-color:var(--g);color:var(--g);background:rgba(0,255,135,.04);}
/* Rolled Credits stacking toggle — visually separated from the sort pills
   with a left divider and its own "on" treatment (white, like the credits
   badge) so it reads as an independent filter, not another sort option. */
.sp-toggle{margin-left:8px;display:inline-flex;align-items:center;gap:6px;position:relative;}
.sp-toggle::before{content:'';position:absolute;left:-8px;top:3px;bottom:3px;width:1px;background:var(--br);}
.sp-toggle.on{border-color:var(--tx);color:var(--tx);background:rgba(255,255,255,.06);}
.sp-toggle .ui-ic{width:0.95em;height:0.95em;}
.sp-label{font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);}
.res-count{margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-size:0.65rem;color:var(--mu);letter-spacing:1px;}
/* Browse grid: a fixed 3 columns on desktop, 2 on mobile. */
.browse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
@media(max-width:640px){
  /* Two games per row on mobile. */
  .browse-grid{grid-template-columns:repeat(2,1fr);}
  /* On mobile: big score + its label box on the first line (label box
     bottom-aligned with the score), the two other scores on the line
     below. */
  .browse-grid .gc-cover{font-size:2.1rem;}
  .browse-grid .gc-body{padding:10px 10px 12px;}
  .browse-grid .gc-name{font-size:.78rem;letter-spacing:.3px;}
  .browse-grid .gc-meta{font-size:.6rem;margin-bottom:6px;}
  .browse-grid .gc-row{flex-direction:column;align-items:flex-start;gap:5px;}
  .browse-grid .gc-bigwrap{align-items:flex-end;gap:5px;}
  .browse-grid .gc-score{font-size:1.4rem;}
  .browse-grid .gc-smalls{gap:6px;flex-wrap:wrap;}
}

/* ══════════════════════════════════════════
   THREE-SCORE PANEL
══════════════════════════════════════════ */
.score-trio{display:flex;flex-direction:column;gap:2px;margin-bottom:2px;}
.st-block{padding:9px 13px;background:var(--cd);border:1px solid var(--br);border-left:3px solid transparent;}
.st-critic{border-left-color:var(--pro);}
.st-player{border-left-color:var(--score);}
.st-real{border-left-color:var(--up);}
.st-label{font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.fs-personal-pill{
  font-family:'Barlow Condensed',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:1.5px;
  padding:1px 6px;background:rgba(74,158,92,.12);border:1px solid rgba(74,158,92,.35);
  color:var(--up);
}

/* "Why this score?" button on the FS Score block */
.fs-why-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--up);
  padding:8px 0 0;margin-top:6px;
  border-top:1px solid var(--br);width:100%;text-align:left;
  transition:color .15s;
}
.fs-why-btn:hover{color:var(--tx);}

/* Locked state — score not yet available for this user */
.st-real-locked{
  border-color:rgba(255,255,255,.05);
  background:rgba(255,255,255,.015);
}
.fs-locked-val{
  font-family:'Bebas Neue',sans-serif;line-height:1;
}
.fs-locked-pill{
  font-family:'Barlow Condensed',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:1.5px;
  padding:1px 6px;background:rgba(170,170,170,.08);border:1px solid var(--br);
  color:var(--mu);text-transform:uppercase;
}
.st-real-locked .fs-why-btn{color:var(--mu2);}
.st-real-locked .fs-why-btn:hover{color:var(--tx);}
/* Progress bar for "rate X more games" */
.fs-progress{
  height:3px;background:var(--d2);border-radius:2px;overflow:hidden;
  margin-top:8px;
}
.fs-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--mu),var(--up));
  transition:width .3s ease;
}

/* ══════════════════════════════════════════
   FS BREAKDOWN MODAL
   The "open the black box" view — shows every reviewer's contribution.
══════════════════════════════════════════ */
.fsb-modal{max-width:640px;}
.fsb-summary{
  padding:18px 20px;background:var(--d2);border:1px solid var(--br);
  margin-bottom:20px;
}
.fsb-summary-scores{
  display:flex;align-items:center;gap:18px;
}
.fsb-ss{flex:1;text-align:center;}
.fsb-ss-divider{width:1px;height:42px;background:var(--br);}
.fsb-ss-label{
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--mu);margin-bottom:4px;
}
.fsb-ss-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;line-height:1;}
.fsb-explain{
  font-size:.78rem;color:var(--mu2);line-height:1.6;
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--br);
}
.fsb-formula{
  font-size:.74rem;color:var(--mu);line-height:1.55;
  margin-bottom:18px;font-style:italic;
}

.fsb-sec{margin-bottom:18px;}
.fsb-sec-hdr{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--tx);
  margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--br);
  display:flex;justify-content:space-between;align-items:baseline;
}
.fsb-sec-hdr span{font-size:.6rem;color:var(--mu);font-weight:400;letter-spacing:1px;}

.fsb-row{
  display:grid;grid-template-columns:36px 1fr auto auto;gap:12px;
  align-items:center;padding:10px 12px;background:var(--cd);
  margin-bottom:2px;cursor:pointer;transition:background .15s;
}
.fsb-row:hover{background:rgba(255,255,255,.04);}
.fsb-row-trusted{
  background:rgba(226,201,110,.05);
  border-left:2px solid var(--score);padding-left:10px;
}
.fsb-row-trusted:hover{background:rgba(226,201,110,.09);}
.fsb-trusted{
  display:inline-flex;align-items:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(226,201,110,.14);border:1px solid rgba(226,201,110,.4);
  color:var(--score);
}
.fsb-trusted .fs-icon-svg{width:11px;height:11px;margin:auto;}
.fsb-av{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:.78rem;color:var(--d0);
}
.fsb-body{min-width:0;}
.fsb-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.84rem;
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.fsb-stage{
  font-size:.56rem;font-weight:700;letter-spacing:1px;color:var(--mu);
  padding:1px 6px;background:var(--d2);border:1px solid var(--br);
}
.fsb-meta{font-size:.66rem;color:var(--mu);margin:3px 0 5px;}
.fsb-weight-bar{height:3px;background:var(--d2);overflow:hidden;border-radius:2px;}
.fsb-weight-fill{height:100%;background:linear-gradient(90deg,var(--mu),var(--up));}
.fsb-score{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;line-height:1;}
.fsb-mw{
  font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--tx);
  line-height:1;text-align:center;min-width:36px;
}
.fsb-mw span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:.5rem;
  font-weight:700;letter-spacing:1.5px;color:var(--mu);margin-top:1px;
}

.fsb-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--br);
  font-size:.7rem;color:var(--mu);gap:12px;flex-wrap:wrap;
}

/* Mobile */
@media(max-width:600px){
  /* Modal needs less padding on small screens */
  .modal{padding:24px 20px;width:94%;max-height:88vh;overflow-y:auto;}
  /* Followers modal scrolls its inner list, not the modal itself */
  #followersModal .modal{overflow:hidden;}
  .modal h3{font-size:1.4rem;margin-bottom:12px;}

  /* Score trio cards — tighter padding, smaller numbers */
  .st-block{padding:9px 11px;}
  .st-val{font-size:1.45rem;}
  .st-denom{font-size:.68rem;}
  .st-label{font-size:.5rem;letter-spacing:1.5px;}
  .st-sub{font-size:.56rem;}
  button.st-sub-link{font-size:.56rem;margin-bottom:4px;}
  .fs-why-btn{padding:6px 0 0;margin-top:5px;font-size:.58rem;}

  /* Category Avg row — more compact cards on mobile */
  .stages-bar{gap:2px;}
  .sb-el{padding:6px 2px;}
  .sb-l{font-size:.95rem;}
  .sb-n{font-size:.42rem;margin:1px 0;letter-spacing:.5px;}
  .sb-v{font-size:.85rem;}

  /* FS breakdown modal */
  .fsb-modal{padding:22px 18px;}
  .fsb-summary{padding:14px 14px;margin-bottom:16px;}
  .fsb-summary-scores{gap:6px;}
  .fsb-ss-val{font-size:1.5rem;}
  .fsb-ss-label{font-size:.52rem;letter-spacing:1.2px;}
  .fsb-ss-divider{height:32px;}
  .fsb-explain{font-size:.74rem;margin-top:12px;padding-top:12px;}
  .fsb-formula{font-size:.7rem;margin-bottom:14px;}
  .fsb-sec-hdr{font-size:.62rem;letter-spacing:1.5px;}
  .fsb-sec-hdr span{font-size:.56rem;}
  .fsb-row{grid-template-columns:32px 1fr auto;gap:8px;padding:9px 10px;}
  .fsb-mw{display:none;}
  .fsb-name{font-size:.76rem;gap:6px;}
  .fsb-stage{font-size:.52rem;padding:1px 5px;}
  .fsb-meta{font-size:.6rem;margin:2px 0 4px;}
  .fsb-score{font-size:1.3rem;}
  .fsb-foot{font-size:.66rem;flex-direction:column;align-items:flex-start;}
  /* Sort/filter buttons row */
  .rev-controls{gap:5px;margin-bottom:14px;row-gap:8px;}
  .rev-controls .sp{font-size:.6rem;padding:5px 9px;}
  .rev-controls .sp-label{font-size:.56rem;}
  .stale-toggle{font-size:.62rem;}
  .stale-toggle input[type=checkbox]{transform:scale(.85);}
}
.st-val{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;line-height:1;margin-bottom:2px;}
.st-denom{font-size:.82rem;color:var(--mu);}
.st-sub{font-size:.62rem;color:var(--mu);margin-bottom:2px;}
/* A clickable .st-sub — used for "FS Score info →" and "N critic reviews →".
   Looks like a normal sub-label but is actually a button. On hover the text
   firms up and the underline appears so it reads as clickable. */
button.st-sub-link{
  font-family:inherit;font-size:.62rem;color:var(--mu);
  background:none;border:none;padding:0 0 1px;
  margin-bottom:2px;
  cursor:pointer;
  text-align:left;
  letter-spacing:.2px;
  border-bottom:1px dashed transparent;
  transition:color .15s,border-color .15s;
  display:inline-block;
  -webkit-tap-highlight-color:transparent;
}
button.st-sub-link:hover,
button.st-sub-link:focus-visible{
  color:var(--tx);
  border-bottom-color:rgba(255,255,255,.25);
  outline:none;
}
.st-note{font-size:.64rem;color:var(--mu);line-height:1.5;padding-top:6px;border-top:1px solid var(--br);}
.st-badge-real{font-family:'Bebas Neue',sans-serif;font-size:.6rem;background:var(--up);color:var(--d0);padding:1px 4px;border-radius:2px;letter-spacing:1px;}
/* Old per-pub source pills + "View all critics" pill — kept as harmless rules
   in case any orphan markup survives, but no longer rendered. */
.st-sources{display:none;}
.st-src{font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;background:rgba(139,126,224,.08);border:1px solid rgba(139,126,224,.2);color:var(--pro);text-decoration:none;}
.st-src-pill{display:none;}

/* Critics modal */
.crit-modal{max-width:540px;}
.crit-summary{
  display:flex;align-items:center;gap:18px;
  padding:18px 20px;background:var(--d2);border:1px solid var(--br);
  margin-bottom:18px;
}
.crit-summary-num{
  font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;
  letter-spacing:1px;
}
.crit-summary-num span{font-size:1rem;color:var(--mu);margin-left:2px;}
.crit-summary-meta{flex:1;}
.crit-summary-l{
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--tx);margin-bottom:3px;
}
.crit-summary-s{font-size:.72rem;color:var(--mu);line-height:1.4;}

.crit-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:50vh;overflow-y:auto;
}
.crit-row{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:11px 14px;background:var(--cd);
  text-decoration:none;color:var(--tx);
  transition:background .15s;
}
.crit-row:hover{background:rgba(139,126,224,.08);}
.crit-pub{
  font-family:'Barlow Condensed',sans-serif;font-size:.84rem;
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.crit-score{
  font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--pro);
  letter-spacing:.5px;
}
.crit-ext{font-size:.85rem;color:var(--mu);}
.crit-row:hover .crit-ext{color:var(--pro);}

@media(max-width:600px){
  .crit-summary{padding:14px 16px;gap:12px;}
  .crit-summary-num{font-size:2.4rem;}
  .crit-row{padding:10px 12px;gap:10px;}
  .crit-pub{font-size:.78rem;}
  .crit-score{font-size:1rem;}
}
.st-more{font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;background:rgba(255,255,255,.04);border:1px solid var(--br);color:var(--mu);cursor:pointer;transition:all .15s;}
.st-more:hover{color:var(--tx);border-color:rgba(255,255,255,.2);}
/* Completion badge on reviews */
.comp-badge{display:inline-flex;align-items:center;gap:4px;font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border:1px solid;}
/* The trophy / completion glyph inside a completion badge reads smaller
   than the uppercase label beside it (badge text is only .56rem, and the
   default .ui-ic sizing leaves the visible glyph shorter than the caps).
   Bump the icon so its visible height matches the COMPLETIONIST cap-height.
   The badge is inline-flex with align-items:center, so vertical centering
   is automatic — we only need the size. */
.comp-badge .ui-ic{width:1.3em;height:1.3em;}

/* ══════════════════════════════════════════
   FS TRUST TOGGLE
   The FS-monogram button that marks a user or dev as influencing your FS Score.
   Outline (off) = neutral muted. Filled (on) = gold + soft glow.
══════════════════════════════════════════ */
/* .fs-trust-toggle now uses the canonical .btn-fs visual treatment so
   every FS-trust button across the site looks identical. The class name
   is kept for HTML compatibility (used in renderTrustToggle()) but its
   styling is just an alias for .btn-fs. The label span — when present —
   makes the button widen to accommodate text. */
.fs-trust-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;width:42px;padding:0;
  background:none;border:1px solid var(--br);color:var(--mu);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s;
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.fs-trust-toggle:hover{color:var(--tx);border-color:rgba(255,255,255,.5);}
.fs-trust-toggle.on{
  color:var(--score);border-color:var(--score);
  background:rgba(226,201,110,.08);
  box-shadow:0 0 10px rgba(226,201,110,.18);
}
.fs-trust-toggle.on:hover{background:rgba(226,201,110,.14);}
.fs-trust-toggle:has(.fs-trust-lbl){width:auto;padding:0 12px;}
/* The FS icon itself */
.fs-icon-svg{
  width:18px;height:18px;display:block;flex-shrink:0;
  color:currentColor;fill:currentColor;
}
.fs-trust-lbl{line-height:1;}

/* Compact trust toggle when sitting inside a review card's sub-row.
   Match the match-weight badge dimensions (20px tall) for visual parity. */
.rc-sub-row .fs-trust-toggle{
  height:20px;width:auto;padding:0 8px;font-size:.54rem;
}
.rc-sub-row .fs-trust-toggle .fs-icon-svg{width:11px;height:11px;}

/* FS trust toggle on the game hero — match the new .btn-follow height. */
.gh-actions .fs-trust-toggle{height:34px;width:42px;}
.gh-actions .fs-icon-svg{width:18px;height:18px;}

/* ══════════════════════════════════════════
   MATCH WEIGHT BADGE
   How much this reviewer's taste aligns with yours.
   Three tiers: high (75+, accent), med (45-74, muted), low (<45, dim).
══════════════════════════════════════════ */
.match-weight{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:2px 7px;border:1px solid;position:relative;cursor:help;
  outline:none;
}
.match-weight::before{content:'⭐';font-size:.6rem;}
.match-weight.mw-high{background:rgba(74,158,92,.1);border-color:rgba(74,158,92,.35);color:var(--up);}
.match-weight.mw-med{background:rgba(170,170,170,.06);border-color:rgba(170,170,170,.25);color:var(--mu2);}
.match-weight.mw-low{background:rgba(170,170,170,.03);border-color:rgba(170,170,170,.15);color:var(--mu);}

/* Tooltip */
.mw-tip{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--d1);border:1px solid var(--br);
  padding:12px 14px;width:280px;font-size:0.72rem;color:var(--tx);
  line-height:1.5;font-weight:400;letter-spacing:.3px;text-transform:none;
  opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:50;
  font-family:'Barlow',sans-serif;text-align:left;
}
.mw-tip strong{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:.74rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--tx);
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--br);
}
.mw-tip-bars{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.mw-tip-bar{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.7rem;color:var(--mu);
}
.mw-tip-bar span:last-child{font-family:'Bebas Neue',sans-serif;color:var(--tx);font-size:.78rem;}
.mw-tip-note{font-size:.68rem;color:var(--mu2);font-style:italic;line-height:1.4;margin-top:2px;}
.mw-tip-footer{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--br);
  font-size:.66rem;color:var(--mu);font-style:italic;
}
.match-weight:hover .mw-tip,.match-weight:focus .mw-tip{opacity:1;}
@media(hover:none){
  .match-weight:active .mw-tip{opacity:1;}
}
/* On narrow screens, anchor the tooltip from the LEFT edge of the badge instead of
   centring it, and constrain its width to stay inside the viewport.
   This works because the badge sits on the left side of the review header — a
   left-anchored tooltip will extend to the right (into the safe area), not the left. */
@media(max-width:600px){
  .mw-tip{
    left:0;right:auto;transform:none;
    width:min(260px, calc(100vw - 80px));
  }
}
.comp-badge.comp-plat{background:rgba(226,201,110,.1);border-color:rgba(226,201,110,.3);color:var(--score);}
.comp-badge.comp-credits{background:rgba(74,158,92,.1);border-color:rgba(74,158,92,.3);color:var(--up);}
.comp-badge.comp-verified{background:rgba(90,158,224,.08);border-color:rgba(90,158,224,.25);color:var(--ver);}

/* Patch timeline */
.patch-timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:18px;}
.patch-timeline::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--br);}
.patch-item{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:10px 0;align-items:center;position:relative;}
.patch-dot{position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--d2);border:1px solid var(--br);}
.patch-item.major .patch-dot{background:var(--score);border-color:var(--score);box-shadow:0 0 0 3px rgba(226,201,110,.15);}
.patch-ver{font-family:'Bebas Neue',sans-serif;font-size:1rem;line-height:1;color:var(--tx);}
.patch-major-badge{font-family:'Barlow Condensed',sans-serif;font-size:.55rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:1px 5px;background:rgba(226,201,110,.1);border:1px solid rgba(226,201,110,.3);color:var(--score);margin-left:4px;}
.patch-date{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mu);margin-top:2px;}
.patch-label{font-size:.78rem;color:var(--mu2);}
.comp-trophy{display:inline-flex;align-items:center;gap:4px;font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;background:rgba(74,158,92,.08);border:1px solid rgba(74,158,92,.25);color:var(--up);}
/* ══════════════════════════════════════════
   GAME DETAIL
══════════════════════════════════════════ */
.game-hero{position:relative;overflow:hidden;background:var(--d1);border-bottom:1px solid var(--br);}
.gh-back{position:absolute;inset:0;opacity:.04;display:flex;align-items:center;justify-content:center;font-size:20rem;pointer-events:none;filter:blur(2px);}
.gh-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 100% at 8% 50%,rgba(192,132,252,.1) 0%,transparent 60%),radial-gradient(ellipse 40% 60% at 90% 20%,rgba(0,207,255,.07) 0%,transparent 60%);}
.gh-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:200px 1fr 240px;
  gap:28px 32px;
  padding:28px 40px;
  align-items:start;
}
.gh-cover{grid-column:1;grid-row:1;}
.gh-info{grid-column:2;grid-row:1;min-width:0;}
.gh-rightcol{grid-column:3;grid-row:1;}
/* Write Review CTA — two variants for desktop vs mobile placement.
   Desktop: lives inside the sort row of the Reviews tab, pushed to the
   far right via margin-left:auto. Mobile: lives under the score trio at
   the top of the page (full-width). Each variant is hidden in the other
   breakpoint to avoid double rendering. */
.gh-write-cta-desktop{
  margin-left:auto;
  /* Sized to match the + New Discussion button on the game page so the
     two CTAs feel like siblings — same font, same padding, same shape. */
  font-size:.7rem;padding:9px 20px;
  flex:0 0 auto;
}
.gh-write-cta-mobile{display:none;}
.gh-cover{width:200px;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:4.5rem;flex-shrink:0;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 56px rgba(0,0,0,.6);position:relative;}
/* Platform pills row — sits above the genre tags in the hero info column */
.gh-plats-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.gh-pb-row{
  padding:3px 9px;
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  background:var(--d2);border:1px solid var(--br);color:var(--mu2);
}
/* Kept (no longer used) but harmless if any orphan tags survive */
.gh-pb{padding:2px 7px;font-family:'Barlow Condensed',sans-serif;font-size:0.55rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--d1);border:1px solid var(--br);color:var(--mu);}

/* ══════════════════════════════════════════
   SCREENSHOT LIGHTBOX
   Near-fullscreen modal that lets you scroll/swipe through all screenshots.
══════════════════════════════════════════ */
.lb-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.95);
  z-index:3000;
  display:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.lb-overlay.open{display:block;}
.lb-track{
  position:absolute;inset:5% 5% 5% 5%;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.lb-track::-webkit-scrollbar{display:none;}
.lb-tile{
  scroll-snap-align:start;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--br);border-radius:4px;
  overflow:hidden;
  background:var(--d1);
}
.lb-tile img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.lb-tile-emoji{font-size:8rem;opacity:.5;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));}
.lb-close{
  position:absolute;top:20px;right:20px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid var(--br);
  color:var(--tx);font-size:1.4rem;line-height:1;
  cursor:pointer;z-index:10;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
}
.lb-close:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.3);}
.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid var(--br);
  color:var(--tx);font-size:1.8rem;line-height:1;
  cursor:pointer;z-index:10;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
}
.lb-arrow:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.3);}
.lb-arrow-l{left:20px;}
.lb-arrow-r{right:20px;}
.lb-counter{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  padding:6px 14px;background:rgba(0,0,0,.6);border:1px solid var(--br);
  border-radius:20px;
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:2px;color:var(--tx);z-index:10;
}
@media(max-width:600px){
  .lb-track{inset:8% 0 12%;gap:8px;}
  .lb-close{top:12px;right:12px;width:38px;height:38px;font-size:1.2rem;}
  .lb-arrow{display:none;}  /* mobile uses swipe */
  .lb-counter{bottom:24px;font-size:.66rem;}
  .lb-tile-emoji{font-size:5rem;}
}

/* ══════════════════════════════════════════
   FOLLOWING FEED PAGE
   Activity feed from followed users. Lives at /followers.html.
══════════════════════════════════════════ */
.following-shell{
  max-width:760px;margin:0 auto;
  padding:36px 24px 60px;
}
.following-hdr{margin-bottom:20px;}
.following-hdr h1{
  font-family:'Bebas Neue',sans-serif;font-size:2.4rem;letter-spacing:1px;
  margin-bottom:4px;
}
.following-sub{color:var(--mu);font-size:.86rem;}

.following-filters{
  display:flex;gap:4px;
  margin-bottom:18px;border-bottom:1px solid var(--br);
}
.fwf-btn{
  background:none;border:none;color:var(--mu);
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.fwf-btn:hover{color:var(--tx);}
.fwf-btn.on{color:var(--tx);border-bottom-color:var(--tx);}
@media(max-width:640px){
  /* Tabs span the full width, each flexing equally — same as Notifications. */
  .following-filters{gap:0;}
  .fwf-btn{flex:1;text-align:center;padding:10px 4px;letter-spacing:1px;white-space:nowrap;}
}

.following-feed{display:flex;flex-direction:column;gap:1px;}

.ff-row{
  --accent:var(--mu);
  display:grid;grid-template-columns:40px 1fr;gap:13px;
  padding:15px 16px;background:var(--cd);
  transition:background .15s;
}
.ff-row:hover{background:rgba(255,255,255,.025);}
.ff-av{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.86rem;font-weight:800;
  letter-spacing:.5px;color:#fff;
  cursor:pointer;flex-shrink:0;
}
.ff-content{min-width:0;}
.ff-av-game{background:var(--d2) !important;border:1px solid var(--br);font-size:1.25rem !important;cursor:default;}
.ff-hdr{
  display:block;
  font-size:.84rem;line-height:1.55;color:var(--mu);
}
.ff-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  letter-spacing:.5px;color:var(--tx);
  font-size:.9rem;
  cursor:pointer;text-decoration:none;
}
.ff-name:hover{color:var(--g);}
.ff-level{
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:1px;color:var(--mu);
  padding:1px 5px;background:var(--d2);border:1px solid var(--br);
  margin-left:6px;white-space:nowrap;
}
.ff-emoji{display:none;}
.ff-verb{color:var(--mu);font-weight:400;}
.ff-game{
  color:var(--tx);font-weight:600;cursor:pointer;
  text-decoration:none;
  transition:color .15s;
}
.ff-game:hover{color:var(--g);}
.ff-gap{font-size:.78rem;color:var(--mu);}
.ff-time{
  font-size:.62rem;color:var(--mu2);margin-top:6px;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;
}

.ff-review-card{
  margin-top:9px;padding:10px 13px;
  background:rgba(255,255,255,.025);border:1px solid var(--br);
  display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;
  cursor:pointer;transition:background .15s;
}
.ff-review-card:hover{background:rgba(255,255,255,.05);}
.ff-rev-score{
  font-family:'Bebas Neue',sans-serif;font-size:1.5rem;line-height:1;
  letter-spacing:.5px;padding-left:8px;
  border-left:3px solid var(--mu);
}
.ff-rev-score span{font-size:.66rem;color:var(--mu);margin-left:1px;}
.ff-rev-body{min-width:0;}
.ff-rev-text{
  font-size:.8rem;color:var(--tx);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:4px;
}
.ff-rev-meta{
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--mu2);
}
/* Discussion card — single-column (no empty score gutter that made the
   following feed look broken). Title + compact reply/vote stats. */
.ff-disc-card{
  margin-top:9px;padding:11px 14px;
  background:rgba(255,255,255,.025);border:1px solid var(--br);
  border-left:3px solid var(--bl);
  cursor:pointer;transition:background .15s;
}
.ff-disc-card:hover{background:rgba(255,255,255,.05);}
.ff-disc-title{font-size:.84rem;font-weight:600;color:var(--tx);line-height:1.4;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ff-disc-meta{display:flex;gap:14px;}
.ff-disc-stat{display:inline-flex;align-items:center;gap:4px;
  font-family:'Barlow Condensed',sans-serif;font-size:.64rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);}
.ff-disc-stat .ui-ic{width:12px;height:12px;}
.ff-disc-context{font-family:'Barlow Condensed',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mu2);margin-bottom:6px;}
.ff-disc-comment{font-size:.84rem;color:var(--tx);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

@media(max-width:768px){
  .following-shell{padding:22px 16px 40px;}
  .following-hdr h1{font-size:1.9rem;}
  .ff-row{grid-template-columns:38px 1fr;gap:12px;padding:12px 14px;}
  .ff-av{width:38px;height:38px;font-size:.82rem;}
  .ff-review-card{grid-template-columns:50px 1fr;padding:10px 12px;}
  .ff-rev-score{font-size:1.4rem;}
}

/* ══════════════════════════════════════════
   SCREENSHOTS STRIP
   Full-width band that sits below the hero, above the tabs.
   Desktop: 4 visible w/ scroll arrows. Tablet: 3. Mobile: 1-up swipe.
══════════════════════════════════════════ */
.screens-strip-wrap{
  position:relative;
  background:var(--d0);
  padding:18px 40px 22px;
  border-bottom:1px solid var(--br);
}
.screens-strip{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 36px) / 4);  /* exactly 4 tiles visible */
  gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.screens-strip::-webkit-scrollbar{display:none;}
.screens-tile{
  scroll-snap-align:start;
  aspect-ratio:16/9;border-radius:4px;
  position:relative;overflow:hidden;
  border:1px solid var(--br);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .18s ease;
}
.screens-tile:hover{transform:translateY(-2px);}
.screens-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.screens-tile-emoji{font-size:3rem;opacity:.55;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));}
.screens-tile-num{
  position:absolute;bottom:8px;right:10px;
  font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:1.5px;color:rgba(255,255,255,.5);
}
/* Scroll arrows — desktop only */
.screens-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.65);border:1px solid var(--br);
  color:var(--tx);font-size:1.5rem;line-height:1;
  cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.screens-arrow:hover{background:rgba(0,0,0,.9);border-color:rgba(255,255,255,.2);}
.screens-arrow-l{left:14px;}
.screens-arrow-r{right:14px;}

@media(max-width:1100px){
  .screens-strip-wrap{padding:16px 24px 20px;}
  .screens-strip{grid-auto-columns:calc((100% - 24px) / 3);}  /* 3 visible */
}
@media(max-width:768px){
  .screens-strip-wrap{padding:14px 0 18px;}
  .screens-strip{grid-auto-columns:100%;gap:8px;}  /* 1-up full width */
  .screens-arrow{display:none;}  /* swipe instead on mobile */
}
/* min-width:0 prevents the info column from being pushed wider than its 1fr track
   by long titles — fixes desktop overlap without breaking the responsive layout. */
.gh-info{padding-top:0;min-width:0;overflow-wrap:break-word;}
.gh-back-btn{font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);background:none;border:none;cursor:pointer;margin-bottom:8px;transition:color .2s;display:block;}
.gh-back-btn:hover{color:var(--g);}
.gh-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,3.5rem);line-height:.95;letter-spacing:2px;margin-bottom:4px;overflow-wrap:break-word;word-break:normal;hyphens:none;}
/* Title row wrapper — on desktop the actions sit inline with the title
   on the far right (Follow + FS trust). On mobile the same row layout
   applies, just tighter. Creator pages override this (see .creator-hero
   below) to move actions out of the row entirely and place them under
   the bio. */
.gh-title-row{
  position:relative;
  display:flex;flex-direction:row;align-items:flex-start;
  gap:14px;margin-bottom:12px;
}
/* Actions are pinned to the top-right corner. The title reserves right
   padding equal to the actions' width so a long, multi-line game name
   wraps beside them instead of dragging them down a line. */
.gh-title-row .gh-title{flex:1 1 auto;min-width:0;margin-bottom:0;padding-right:240px;}
.gh-title-row .gh-actions{position:absolute;top:0;right:0;flex:0 0 auto;}
.gh-actions{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;}

/* About-tab metadata grid. Five columns at desktop; .game-about-grid > div
   cells allow text wrap via min-width:0 so long publisher / dev names
   don't push the grid wider than its container. */
.game-about-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  padding:16px 20px;
  background:rgba(0,207,255,.04);border:1px solid rgba(0,207,255,.15);
  margin-bottom:24px;
}
.game-about-grid > div{min-width:0;overflow-wrap:break-word;}
.gag-key{
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--ver);
  margin-bottom:4px;
}
.gag-val{font-size:.8rem;}
.gh-sub{color:var(--mu);font-size:0.82rem;margin-bottom:10px;}
.gh-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;}
.gh-synopsis{font-size:0.84rem;color:var(--mu);line-height:1.6;max-width:500px;margin-bottom:14px;}

/* Game tabs */
.game-tabs{display:flex;border-bottom:1px solid var(--br);padding:0 40px;background:var(--d1);position:sticky;top:60px;z-index:100;}
.gtab{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 18px;cursor:pointer;background:none;border:none;color:var(--mu);border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px;}
.gtab.on{color:var(--g);border-bottom-color:var(--g);}
.gtab:hover:not(.on){color:var(--tx);}

.game-body{padding:36px 40px;}

/* Review controls */
.rev-controls{display:flex;align-items:center;gap:7px;margin-bottom:22px;flex-wrap:wrap;}

/* Review cards in game page */
.rev-card{background:var(--cd);padding:20px 24px;margin-bottom:2px;transition:opacity .2s;}
.rev-card.pro{border-left:3px solid var(--bl);}
.rch{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.rc-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--d0);}
.rc-meta{flex:1;min-width:0;}
.rc-nr{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:6px;row-gap:6px;
}
.rc-name{font-family:'Barlow Condensed',sans-serif;font-size:0.95rem;font-weight:700;text-transform:uppercase;}
.rc-name-link{color:var(--tx);text-decoration:none;cursor:pointer;transition:color .15s;}
.rc-name-link:hover{color:var(--mu);}
.rc-av-link{cursor:pointer;transition:transform .15s;}
.rc-av-link:hover{transform:scale(1.05);}
/* Second row under the username — holds the Level badge, Completionist
   badge, bias indicator etc. Lays them out as a single horizontal strip
   with consistent height so they read as a unit. */
.rc-sub-row{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;row-gap:6px;
  margin-top:2px;
}
/* Normalise all pills/badges that live in the header so they share a visual rhythm.
   Top row (.rc-nr) hosts: Level pill, Completionist badge.
   Sub row (.rc-sub-row) hosts: match% badge, FS trust button. */
.rc-nr .stage-pill,
.rc-nr .comp-badge,
.rc-sub-row .match-weight,
.rc-sub-row .fs-trust-toggle{
  height:20px;display:inline-flex;align-items:center;
  line-height:1;box-sizing:border-box;
}
.rc-nr .bias-indicator{flex-shrink:0;}
.rc-pro{font-family:'Barlow Condensed',sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;background:rgba(0,207,255,.1);border:1px solid rgba(0,207,255,.25);color:var(--bl);}
.rc-verified{font-size:0.7rem;color:var(--mu);}
/* Old purple genre pill row removed entirely — was clutter. Kept the rule
   here as a safety net hiding any stray .rc-pref / .rc-genre that might be
   re-introduced by a future render path. */
.rc-pref,.rc-genre{display:none;}
.rc-scores{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}
.rc-total{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;line-height:1;color:var(--yl);}
.rc-total .den{font-size:.9rem;color:var(--mu);}
.rc-hrs{font-size:0.66rem;color:var(--mu);text-align:right;}
/* Hours played reads in primary white instead of blue — quieter and more
   readable, matches the score-trio metric treatment. */
.rc-hrs strong{color:var(--tx);display:block;font-size:.8rem;}
.rc-text{font-size:0.84rem;color:var(--mu);line-height:1.7;margin-bottom:12px;}
/* Long review text — clamped to 5 lines until expanded */
.rc-text-long{
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:6px;
}
.rc-text-long.expanded{
  display:block;-webkit-line-clamp:unset;overflow:visible;
}
.rc-readmore{
  background:none;border:none;color:var(--mu);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;padding:0 0 12px;
  transition:color .15s;
}
.rc-readmore:hover{color:var(--tx);}
/* ══════════════════════════════════════════
   REVIEW CATEGORY CARDS — tab-style expand
   Desktop: 5 collapsed cards in a row; click one to "select" it and a
   full-width panel opens below showing notes and labelled sub-bars.
   Mobile: each card inline-expands under itself (handled in media query).
══════════════════════════════════════════ */
.rev-cats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-bottom:2px;}
.rev-cat-card{
  background:rgba(255,255,255,.02);border-top:2px solid var(--cc);
  padding:10px 12px;min-width:0;cursor:pointer;transition:background .15s;
  position:relative;
}
.rev-cat-card:hover{background:rgba(255,255,255,.05);}
/* Selected (active) tab — connects visually to the panel below */
.rev-cat-card.active{
  background:rgba(255,255,255,.06);
  z-index:2;
}
.rev-cat-card.active::after{
  /* visual "bridge" that hides the gap between the card and the panel below */
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:rgba(255,255,255,.06);
}

/* Header row (always visible) */
.rev-cat-hdr{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:nowrap;min-width:0;}
.rev-cat-letter{font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--cc);line-height:1;flex-shrink:0;}
.rev-cat-name{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);flex-shrink:0;}
/* Category note — hidden in the collapsed/grid view on desktop (shown in the expand panel) */
.rev-cat-note{display:none;}
.rev-cat-val{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;color:var(--cc);line-height:1;margin-left:auto;flex-shrink:0;}
.rev-cat-chev{
  display:inline-block;color:var(--mu);font-size:.65rem;
  transition:transform .2s;flex-shrink:0;
}
.rev-cat-card.active .rev-cat-chev{transform:rotate(180deg);color:var(--tx);}

/* Sub-bars in collapsed cards — compact mini-bars, no notes */
.rev-cat-subs{display:flex;flex-direction:column;gap:5px;}
.sub-bar{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:center;}
.sub-bar-name{font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mu2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sub-bar-track{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;}
.sub-bar-fill{height:100%;border-radius:2px;transition:width .3s ease;}
.sub-bar-val{font-family:'Bebas Neue',sans-serif;font-size:.8rem;color:var(--tx);line-height:1;min-width:22px;text-align:right;}
/* Sub-notes hidden in the grid (shown in the expand panel only) */
.rev-cat-subs .sub-bar-note{display:none;}

/* ═ Tab-style expand panel ═ */
.rev-cat-expand{
  display:none;
  background:rgba(255,255,255,.06);
  margin-bottom:12px;
  padding:18px 22px;
  border-top:2px solid var(--br);
}
.rev-cat-expand.open{display:block;}

.exp-hdr{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--br);
}
.exp-letter{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--tx);line-height:1;flex-shrink:0;}
.exp-title{flex:1;min-width:0;}
.exp-name{font-family:'Barlow Condensed',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tx);}
.exp-note{font-size:.84rem;color:var(--mu2);font-style:italic;line-height:1.4;margin-top:4px;}
.exp-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--tx);line-height:1;flex-shrink:0;}

.exp-subs{display:flex;flex-direction:column;gap:14px;}
.exp-subs .sub-bar{grid-template-columns:160px 1fr auto;gap:14px;row-gap:4px;}
.exp-subs .sub-bar-name{font-size:.72rem;color:var(--tx);letter-spacing:1px;}
.exp-subs .sub-bar-track{height:5px;}
.exp-subs .sub-bar-val{font-size:1.1rem;min-width:32px;}
.exp-subs .sub-bar-note{display:block;grid-column:1/-1;font-size:.74rem;color:var(--mu);font-style:italic;line-height:1.4;padding-left:2px;}

/* Stale (out-of-date) reviews */
.rev-card.stale{opacity:0.65;border-left:3px solid var(--warn);}
.rev-card.stale:hover{opacity:0.9;}
.stale-label{font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--warn);background:rgba(194,119,58,.08);border:1px solid rgba(194,119,58,.2);padding:6px 10px;margin-bottom:12px;}
.stale-toggle{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mu);cursor:pointer;padding:4px 10px;border:1px solid var(--br);transition:all .2s;}
.stale-toggle:hover{color:var(--tx);border-color:rgba(255,255,255,.2);}
.stale-toggle input{accent-color:var(--warn);cursor:pointer;}
.hide-stale .rev-card.stale{display:none;}

.rc-foot{display:flex;align-items:center;gap:7px;margin-top:13px;}
.rc-act{background:none;border:1px solid var(--br);color:var(--mu);padding:4px 10px;font-size:0.68rem;cursor:pointer;transition:all .2s;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:1px;}
.rc-act:hover{border-color:var(--g);color:var(--g);}
.rc-flag{background:none;border:none;color:var(--mu);font-size:0.68rem;cursor:pointer;margin-left:auto;transition:color .2s;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;}
.rc-flag:hover{color:var(--pk);}

/* ══════════════════════════════════════════
   WRITE REVIEW
══════════════════════════════════════════ */
.write-wrap{max-width:760px;margin:0 auto;padding:44px 40px;}
.write-wrap h2{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:1px;margin-bottom:4px;}
.write-sub{color:var(--mu);font-size:0.84rem;line-height:1.7;margin-bottom:28px;}

/* Category groups */
.cat-groups{display:flex;flex-direction:column;gap:3px;margin-bottom:24px;}
.cat-group{background:var(--cd);border:1px solid var(--br);overflow:hidden;transition:border-color .2s;}
.cat-group.open{border-color:color-mix(in srgb,var(--cg-c) 40%,transparent);}
.cat-header{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;user-select:none;transition:background .15s;}
.cat-header:hover{background:rgba(255,255,255,.025);}
.cat-left{display:flex;align-items:center;gap:10px;}
.cat-icon{width:28px;height:28px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--cg-c);line-height:1;border:1px solid color-mix(in srgb,var(--cg-c) 50%,transparent);opacity:.6;transition:opacity .2s;}
.cat-group.open .cat-icon{opacity:1;}
.cat-title{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.cat-subs-preview{font-size:.62rem;color:var(--mu);margin-top:2px;}
.cat-score{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--cg-c);line-height:1;min-width:44px;text-align:right;}
.cat-chevron{color:var(--mu);font-size:.65rem;transition:transform .25s;margin-left:2px;}
.cat-group.open .cat-chevron{transform:rotate(180deg);}
.cat-body{display:none;border-top:1px solid var(--br);}
.cat-group.open .cat-body{display:block;}

/* Sub-sliders */
.sub-slider{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.04);}
.sub-slider:last-child{border-bottom:none;}
.sub-slider:hover{background:rgba(255,255,255,.015);}
.sub-name{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);}
.sub-num{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--cg-c,var(--tx));line-height:1;text-align:right;}
/* Rating sliders — pill-shaped track with a rounded fill that has a soft
   round end. The thumb sits flush on top of the fill so the whole thing
   reads as "a line that ends in a circle" rather than "rectangle with a
   ball stuck to it." Track height nudged up slightly for visual weight. */
input[type=range]{
  -webkit-appearance:none;width:100%;height:6px;
  background:transparent;border-radius:999px;outline:none;cursor:pointer;
  padding:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--sc,var(--tx)) var(--fill,50%),var(--d2) var(--fill,50%));
}
input[type=range]::-moz-range-track{
  height:6px;border-radius:999px;background:var(--d2);
}
input[type=range]::-moz-range-progress{
  height:6px;border-radius:999px;background:var(--sc,var(--tx));
}
/* Thumb hidden — the bar shows the value via its fill alone (no circle
   on the leading edge). The thumb itself is kept invisible but still
   click-targetable, sized to the full slider area so taps anywhere on
   the bar register correctly on mobile. */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  background:transparent;border:none;cursor:pointer;
  opacity:0;  /* hide visually; still drag-targetable */
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;background:transparent;border:none;cursor:pointer;
  opacity:0;
}

/* Per-category note row (in cat-body header) */
.cat-note-row{
  padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.015);
}
.note-label{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:.56rem;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mu);margin-bottom:5px;
}
.cat-note-input{
  width:100%;background:var(--d2);border:1px solid var(--br);
  color:var(--tx);font-family:'Barlow',sans-serif;font-size:.82rem;
  padding:7px 10px;outline:none;transition:border-color .15s;
}
.cat-note-input:focus{border-color:var(--cg-c);}

/* Per-sub-slider note input (full-width row below slider) */
.sub-note-row{
  grid-column:1/-1;display:flex;align-items:center;gap:8px;
  margin-top:6px;
}
.sub-note-input{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--br);
  color:var(--mu2);font-family:'Barlow',sans-serif;font-size:.74rem;
  padding:4px 0;outline:none;transition:border-color .15s,color .15s;
}
.sub-note-input:focus{border-bottom-color:var(--cg-c);color:var(--tx);}
.sub-note-input::placeholder{color:var(--mu);font-style:italic;}
.sub-note-count{
  font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:1px;color:var(--mu);min-width:36px;text-align:right;
}

/* Score preview bar */
.score-preview{display:flex;align-items:stretch;gap:0;border:1px solid var(--br);margin-bottom:22px;overflow:hidden;}
.sp-total{padding:16px 22px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--br);min-width:100px;}
.sp-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-bottom:2px;}
.sp-score{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--score);line-height:1;}
.sp-cats{display:flex;flex-wrap:wrap;flex:1;}
.sp-cat{display:flex;flex-direction:column;justify-content:center;padding:10px 14px;border-right:1px solid var(--br);flex:1;min-width:72px;}
.sp-cat:last-child{border-right:none;}
.sp-cat-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);}
.sp-cat-val{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;line-height:1.15;}

/* ══════════════════════════════════════════
   FORUM / STAGES
══════════════════════════════════════════ */
.forum-shell{display:grid;grid-template-columns:240px 1fr 260px;min-height:calc(100vh - 60px);}
.f-mid{min-width:0;}
.f-left{background:var(--d1);border-right:1px solid var(--br);padding:18px 0;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;}
.fl-sec{margin-bottom:20px;}
.fl-lbl{font-family:'Barlow Condensed',sans-serif;font-size:0.56rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mu);padding:0 16px;margin-bottom:7px;display:block;}
.fl-item{display:flex;align-items:flex-start;gap:8px;padding:7px 16px;cursor:pointer;font-size:0.8rem;color:var(--mu);transition:all .15s;border-left:2px solid transparent;}
/* Game name in the left sidebar — clamp long titles to 3 lines so they
   don't overflow or push the count out of the row. */
.fl-gname{flex:1;min-width:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.fl-item:hover{color:var(--tx);background:rgba(255,255,255,.03);}
.fl-item.on{color:var(--g);border-left-color:var(--g);background:rgba(0,255,135,.04);}
.fl-ic{font-size:0.9rem;width:16px;text-align:center;flex-shrink:0;line-height:1.3;}
.fl-ct{margin-left:auto;flex-shrink:0;font-family:'Barlow Condensed',sans-serif;font-size:0.6rem;color:var(--mu);line-height:1.3;}
.fl-unread{width:5px;height:5px;border-radius:50%;background:var(--g);box-shadow:0 0 5px var(--g);}
.new-space-btn{margin:4px 14px 0;display:flex;align-items:center;gap:6px;justify-content:center;padding:8px;background:rgba(0,255,135,.05);border:1px dashed rgba(0,255,135,.25);color:var(--g);font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.new-space-btn:hover{background:rgba(0,255,135,.12);}

/* Space header */
.space-hdr{padding:24px 28px 18px;border-bottom:1px solid var(--br);background:var(--d1);position:relative;}
.space-hdr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 0% 50%,rgba(0,255,135,.04) 0%,transparent 60%);pointer-events:none;}
.sh-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;position:relative;}
.sh-icon{width:48px;height:48px;background:var(--d2);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;border:1px solid var(--br);}
.sh-nm{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:1px;line-height:1;margin-bottom:3px;}
.sh-desc{font-size:0.76rem;color:var(--mu);line-height:1.5;margin-bottom:7px;}
.sh-stats{display:flex;gap:16px;}
.sh-stat{font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);}
.sh-stat strong{color:var(--tx);display:block;font-size:0.84rem;}

/* Feed controls */
.feed-ctrl{display:flex;align-items:center;gap:7px;padding:12px 28px;border-bottom:1px solid var(--br);background:var(--d1);flex-wrap:wrap;}
/* "Sort:" label sits before the feed-sort buttons on desktop. Hidden on
   mobile (≤640px) where horizontal space is tight. */
.fc-sort-label{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-right:2px;}
@media(max-width:640px){
  .fc-sort-label{display:none;}
}
.fc{font-family:'Barlow Condensed',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;background:none;border:1px solid var(--br);color:var(--mu);cursor:pointer;transition:all .2s;}
.fc:hover{color:var(--tx);}
.fc.on{border-color:var(--g);color:var(--g);background:rgba(0,255,135,.04);}
.new-stage-btn{margin-left:auto;padding:7px 18px;background:var(--g);color:var(--d0);font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);transition:background .2s;}
.new-stage-btn:hover{background:var(--yl);}

/* ══════════════════════════════════════════
   DISCUSSION (TOPIC) ROW — restored design language
   Coloured left bar · vote stack on the left · prominent game chip ·
   big title · preview · author bar at the bottom.
══════════════════════════════════════════ */
.topic-row{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:0;
  background:var(--cd);
  border-left:3px solid var(--up);
  border-bottom:1px solid var(--br);
  margin-bottom:2px;
  cursor:pointer;
  transition:background .15s;
}
.topic-row:hover{background:rgba(255,255,255,.03);}
.topic-row.pinned{border-left-color:var(--score);}
.topic-row.negative{border-left-color:var(--dn);}
.topic-row.negative .vote-count{color:var(--dn);}

/* Vote column (left) */
.topic-row .vote-col{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:14px 8px;
  background:rgba(255,255,255,.015);
  border-right:1px solid var(--br);
  flex-shrink:0;
}
.topic-row .vote-btn{
  background:none;border:none;color:var(--mu);
  cursor:pointer;font-size:.78rem;padding:3px 4px;line-height:1;
  transition:color .15s,transform .12s;
}
.topic-row .vote-btn.up:hover{color:var(--up);transform:translateY(-1px);}
.topic-row .vote-btn.dn:hover{color:var(--dn);transform:translateY(1px);}
.topic-row .vote-count{
  font-family:'Bebas Neue',sans-serif;font-size:1.1rem;
  color:var(--tx);line-height:1;
}

/* Content area (right) */
.topic-body{
  padding:14px 18px;min-width:0;
}
.topic-tags{
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;flex-wrap:wrap;
}
.disc-game-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:12px;
  background:rgba(90,158,224,.1);border:1px solid rgba(90,158,224,.3);
  font-family:'Barlow',sans-serif;font-size:.72rem;font-weight:600;
  color:var(--ver);
  letter-spacing:.2px;text-transform:none;
}
.disc-meta-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--br);
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu2);
}
.topic-title{
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;
  color:var(--tx);line-height:1.3;
  margin-bottom:6px;
}
.topic-preview{
  font-size:.78rem;color:var(--mu);line-height:1.5;
  margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Author / meta row at the bottom */
.topic-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.7rem;color:var(--mu);
}
.disc-author{display:inline-flex;align-items:center;gap:6px;}
.disc-author-av{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:.6rem;color:var(--d0);
  flex-shrink:0;
}
.disc-time{color:var(--mu);}
.disc-spacer{flex:1;}
.disc-stat{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Barlow',sans-serif;font-size:.7rem;color:var(--mu);
}

@media(max-width:600px){
  .topic-row{grid-template-columns:48px 1fr;}
  .topic-row .vote-col{padding:10px 4px;}
  .topic-row .vote-count{font-size:.95rem;}
  .topic-body{padding:11px 13px;}
  .topic-title{font-size:.92rem;line-height:1.25;}
  .topic-preview{font-size:.74rem;-webkit-line-clamp:2;}
  .disc-game-chip{font-size:.66rem;padding:2px 8px;}
  .disc-meta-tag{font-size:.54rem;}
  .topic-meta{gap:6px;font-size:.66rem;}
  .disc-spacer{flex:1 1 100%;}  /* wrap counts below on tight screens */
}

/* Stage (topic) rows */
.stage-row{display:flex;gap:0;border-bottom:1px solid var(--br);transition:background .15s;cursor:pointer;}
.stage-row:hover{background:rgba(255,255,255,.02);}
.stage-row.pinned{border-left:3px solid var(--yl);}
.stage-row.hot{border-left:3px solid var(--pk);}
.stage-row.normal{border-left:3px solid transparent;}
.sr-vote{display:flex;flex-direction:column;align-items:center;padding:16px 12px;gap:2px;flex-shrink:0;width:48px;border-right:1px solid var(--br);background:rgba(255,255,255,.01);}
.vb{background:none;border:none;color:var(--mu);cursor:pointer;font-size:0.72rem;padding:2px 4px;line-height:1;transition:color .15s;}
.vb.up:hover,.vb.voted-up{color:var(--g);}
.vb.dn:hover,.vb.voted-down{color:var(--pk);}
.vc{font-family:'Bebas Neue',sans-serif;font-size:.95rem;color:var(--tx);line-height:1;min-width:26px;text-align:center;}
.sr-body{flex:1;padding:14px 18px;}
.sr-tags{display:flex;gap:5px;margin-bottom:7px;flex-wrap:wrap;}
.sr-tag{font-family:'Barlow Condensed',sans-serif;font-size:0.55rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:2px 6px;background:rgba(255,255,255,.04);color:var(--mu);}
.sr-tag.pin{background:rgba(255,230,0,.08);color:var(--yl);}
.sr-tag.hot{background:rgba(255,45,120,.08);color:var(--pk);}
.sr-tag.gm{background:rgba(0,207,255,.08);color:var(--bl);}
.sr-tag.nw{background:rgba(0,255,135,.08);color:var(--g);}
.sr-title{font-family:'Barlow Condensed',sans-serif;font-size:0.94rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;line-height:1.3;}
.sr-preview{font-size:0.76rem;color:var(--mu);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sr-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sr-author{display:flex;align-items:center;gap:5px;}
.sr-av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:0.52rem;color:var(--d0);}
.sr-aname{font-size:0.68rem;color:var(--mu);}
.sr-astage{font-family:'Barlow Condensed',sans-serif;font-size:0.56rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--g);padding:1px 4px;background:rgba(0,255,135,.07);}
.sr-stats{display:flex;gap:9px;margin-left:auto;}
.sr-stat{font-size:0.66rem;color:var(--mu);display:flex;align-items:center;gap:3px;}

/* Right sidebar forum */
.f-right{border-left:1px solid var(--br);padding:20px 18px;background:var(--d1);position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;}
.fr-block{margin-bottom:24px;}
.fr-title{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;margin-bottom:12px;}
.fr-title em{color:var(--g);font-style:normal;}
.fr-rule{display:flex;align-items:flex-start;gap:7px;padding:7px 0;border-bottom:1px solid var(--br);font-size:0.74rem;}
.fr-rule:last-child{border-bottom:none;}
.fr-rn{font-family:'Bebas Neue',sans-serif;font-size:.85rem;color:var(--g);min-width:14px;}
.fr-rt{color:var(--mu);line-height:1.5;}
.fr-rt strong{color:var(--tx);}

/* ══ THREAD VIEW ══ */
.thread-shell{display:grid;grid-template-columns:1fr 240px;min-height:calc(100vh - 60px);}
.thread-main{padding:28px 32px;border-right:1px solid var(--br);}
.op-card{background:var(--d1);border:1px solid var(--br);margin-bottom:2px;}
.op-vbar{display:flex;align-items:center;gap:10px;padding:12px 18px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--br);}
.op-vbtn{display:flex;align-items:center;gap:5px;padding:5px 12px;background:none;border:1px solid var(--br);color:var(--mu);font-family:'Barlow Condensed',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.op-vbtn.up:hover,.op-vbtn.voted-up{border-color:var(--g);color:var(--g);}
.op-vbtn.dn:hover,.op-vbtn.voted-dn{border-color:var(--pk);color:var(--pk);}
.op-vscore{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--tx);min-width:28px;text-align:center;}
.op-share-btn{
  background:none;border:none;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--mu);
  transition:color .2s;
  display:inline-flex;align-items:center;gap:6px;padding:0;
}
/* The first .op-share-btn in its row gets shoved to the right via auto
   margin — siblings line up next to it with their own intrinsic spacing. */
.op-share-btn:first-of-type{margin-left:auto;}
.op-share-btn:hover{color:var(--g);}
/* Icon sized to match the height of the uppercase Barlow label. Uses
   currentColor so it picks up the hover colour change automatically. */
.op-ic{width:14px;height:14px;display:block;flex-shrink:0;}
.op-body{padding:22px 26px;}
.op-hdr{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.op-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--d0);}
.op-nm{font-family:'Barlow Condensed',sans-serif;font-size:.9rem;font-weight:700;text-transform:uppercase;}
.op-nr{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px;}
.op-gtag{padding:2px 7px;background:rgba(0,207,255,.08);border:1px solid rgba(0,207,255,.2);font-family:'Barlow Condensed',sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--bl);}
.op-time{font-size:0.68rem;color:var(--mu);}
.op-title{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:1px;line-height:1.05;margin-bottom:12px;}
.op-text{font-size:0.86rem;color:var(--mu);line-height:1.75;}
.op-text p{margin-bottom:10px;}
.op-text p:last-child{margin-bottom:0;}

/* Comments */
.cmts-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--br);background:var(--d1);}
.cmts-title{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:1px;}
.cmts-title em{color:var(--g);font-style:normal;}
.cmt-sorts{display:flex;gap:5px;}
.cmt-sort{font-family:'Barlow Condensed',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;background:none;border:1px solid var(--br);color:var(--mu);cursor:pointer;transition:all .2s;}
.cmt-sort.on{border-color:var(--g);color:var(--g);}

/* Composer */
.composer{padding:16px 24px;border-bottom:1px solid var(--br);background:rgba(0,255,135,.02);}
.composer-in{display:flex;gap:10px;align-items:flex-start;}
.cmp-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--g),var(--bl));display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:.75rem;color:var(--d0);}
.cmp-right{flex:1;}
.cmp-ta{width:100%;padding:9px 12px;background:var(--d2);border:1px solid var(--br);color:var(--tx);font-family:'Barlow',sans-serif;font-size:0.82rem;resize:none;height:40px;outline:none;transition:all .2s;line-height:1.5;overflow:hidden;}
.cmp-ta:focus{border-color:rgba(0,255,135,.3);height:88px;}
.cmp-ta::placeholder{color:var(--mu);}
.cmp-acts{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;display:none;}
.cmp-ta:focus ~ .cmp-acts,.cmp-acts.vis{display:flex;}
.cmp-cancel{padding:5px 11px;background:none;border:1px solid var(--br);color:var(--mu);font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.cmp-cancel:hover{border-color:var(--pk);color:var(--pk);}
.cmp-submit{padding:5px 14px;background:var(--g);color:var(--d0);font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:none;cursor:pointer;clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);transition:background .2s;}
.cmp-submit:hover{background:var(--yl);}

/* Comment tree */
.cmts-list{padding-bottom:40px;}
.cmt-thread{position:relative;}
.cmt-children{padding-left:18px;position:relative;}
.cmt-children::before{content:'';position:absolute;left:9px;top:0;bottom:14px;width:1px;background:var(--br);transition:background .2s;}
.cmt-children:hover::before{background:rgba(0,255,135,.18);}
.cmt{padding:12px 18px 12px 18px;border-bottom:1px solid rgba(255,255,255,.025);}
.cmt-in{display:flex;gap:8px;}
.cmt-vcol{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0;padding-top:1px;}
.cvb{background:none;border:none;color:var(--mu);cursor:pointer;font-size:0.68rem;padding:2px 4px;line-height:1;transition:color .15s;}
.cvb.up:hover,.cvb.voted-up{color:var(--g);}
.cvb.dn:hover,.cvb.voted-down{color:var(--pk);}
.cvc{font-family:'Bebas Neue',sans-serif;font-size:.78rem;color:var(--tx);line-height:1;text-align:center;min-width:22px;}
.cvc.pos{color:var(--g);}
.cvc.neg{color:var(--pk);}
.cmt-cnt{flex:1;min-width:0;}
.cmt-meta{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap;}
.cmt-av{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:.52rem;color:var(--d0);}
.cmt-nm{font-family:'Barlow Condensed',sans-serif;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.cmt-stg{font-family:'Barlow Condensed',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--g);padding:1px 5px;background:rgba(0,255,135,.07);}
.cmt-op{font-family:'Barlow Condensed',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--bl);padding:1px 5px;background:rgba(0,207,255,.1);border:1px solid rgba(0,207,255,.2);}
.cmt-time{font-size:.62rem;color:var(--mu);}
.cmt-text{font-size:.82rem;color:var(--tx);line-height:1.7;margin-bottom:7px;}
.cmt-text.del{font-style:italic;color:var(--mu);opacity:.5;font-size:.76rem;}
.cmt-acts{display:flex;align-items:center;gap:1px;}
.ca{background:none;border:none;color:var(--mu);font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;cursor:pointer;transition:color .15s;}
.ca:hover{color:var(--tx);}
.ca.rpl:hover{color:var(--g);}
.ca.flg:hover{color:var(--pk);}
.inline-cmp{margin:6px 0;padding:9px 12px;background:rgba(0,255,135,.03);border:1px solid rgba(0,255,135,.14);display:none;}
.inline-cmp.open{display:block;}
.ic-ta{width:100%;padding:7px 10px;background:var(--d2);border:1px solid var(--br);color:var(--tx);font-family:'Barlow',sans-serif;font-size:.8rem;resize:none;height:64px;outline:none;transition:border-color .2s;line-height:1.5;}
.ic-ta:focus{border-color:rgba(0,255,135,.3);}
.ic-ta::placeholder{color:var(--mu);}
.ic-foot{display:flex;justify-content:flex-end;gap:5px;margin-top:6px;}
.ic-cancel{padding:4px 10px;background:none;border:1px solid var(--br);color:var(--mu);font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.ic-cancel:hover{border-color:var(--pk);color:var(--pk);}
.ic-submit{padding:4px 12px;background:var(--g);color:var(--d0);font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:none;cursor:pointer;clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);transition:background .2s;}
.ic-submit:hover{background:var(--yl);}
.collapsed-bar{display:none;align-items:center;gap:7px;padding:6px 18px;cursor:pointer;background:rgba(255,255,255,.02);border-bottom:1px solid var(--br);font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);transition:background .15s;}
.collapsed-bar:hover{background:rgba(0,255,135,.04);color:var(--g);}
.cb-line{flex:1;height:1px;background:var(--br);}

/* Thread sidebar */
.thread-sb{padding:20px 18px;background:var(--d1);border-left:1px solid var(--br);position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;}

/* ══════════════════════════════════════════
   PROFILE
══════════════════════════════════════════ */
.profile-hero{background:var(--d1);border-bottom:1px solid var(--br);padding:36px 40px 0;position:relative;overflow:hidden;}
.ph-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 80% at 20% 50%,rgba(0,255,135,.05) 0%,transparent 60%);}

/* Pinned top-right actions: Settings + Edit Profile.
   Sits in the corner of the profile hero, visible only when viewing your
   own profile. Icon-only design keeps it minimal — same visual language as
   the desktop nav bell. */
.ph-top-actions{
  position:absolute;top:16px;right:20px;z-index:5;
  display:flex;gap:4px;align-items:center;
}
.pta-btn{
  width:36px;height:36px;border-radius:50%;
  background:none;border:none;cursor:pointer;
  color:#9a9a9a;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;-webkit-tap-highlight-color:transparent;
  transition:color .15s,background .15s;
}
.pta-btn:hover{color:#ffffff;background:rgba(255,255,255,.06);}
.pta-btn svg{width:20px;height:20px;stroke:currentColor;display:block;}
[data-theme="light"] .pta-btn{color:#6a6a6a;}
[data-theme="light"] .pta-btn:hover{color:#1a1a1a;background:rgba(0,0,0,.06);}

/* Other-user profile actions, same pinned slot. Follow reads as a primary
   pill button; FS-Trust reads as a circular icon button identical in size
   to .pta-btn so the rhythm matches own-profile. */
/* The pinned top-right slot uses the canonical .btn-follow + .btn-fs classes
   directly in the markup. Local rules removed — see .btn-follow / .btn-fs above. */

.ph-top{display:flex;gap:22px;align-items:flex-start;position:relative;}
.ph-av-wrap{position:relative;}
.ph-av{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--bl));display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--d0);border:3px solid var(--d1);}
.ph-stage-ring{display:none;}
.ph-info{flex:1;}
.ph-name{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:1px;line-height:1;margin-bottom:4px;}
.ph-handle{color:var(--mu);font-size:0.8rem;margin-bottom:10px;}
.ph-plats{display:flex;gap:6px;flex-wrap:wrap;}
.ph-plat{display:flex;align-items:center;gap:4px;padding:3px 8px;font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--br);color:var(--mu);}
.ph-plat.on{border-color:var(--plc);color:var(--plc);}
.ph-plat .pd{width:4px;height:4px;border-radius:50%;background:var(--plc);}
.ph-stats{display:flex;gap:28px;margin-top:24px;padding:16px 0;border-top:1px solid var(--br);position:relative;}
/* Stat cells use flex column with align-items:center so the number and the
   label below it share an exact horizontal centre. Avoids Bebas Neue's
   asymmetric glyph metrics offsetting one from the other under text-align. */
.phs{display:flex;flex-direction:column;align-items:center;text-align:center;}
/* Tappable hero stats — subtle hover lift, brighter on focus.
   The cursor change is the primary affordance; we deliberately don't add
   underlines or boxes since the rest of the hero stays clean. */
.phs-tap{
  cursor:pointer;padding:6px 8px;margin:-6px -8px;
  border-radius:3px;transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.phs-tap:hover{background:rgba(255,255,255,.04);}
.phs-tap:hover .phs-n{filter:brightness(1.15);}
.phs-tap:hover .phs-l{color:var(--tx);}
.phs-tap:focus-visible{outline:1px dashed rgba(255,255,255,.3);outline-offset:2px;}
.phs-n{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;color:var(--g);line-height:1;}
.phs-l{font-size:0.62rem;color:var(--mu);text-transform:uppercase;letter-spacing:1px;font-family:'Barlow Condensed',sans-serif;font-weight:700;margin-top:2px;}
.xp-bar-row{display:flex;align-items:center;gap:14px;padding:14px 40px;background:var(--d1);border-bottom:1px solid var(--br);}
.xp-stage{font-family:'Bebas Neue',sans-serif;font-size:.9rem;color:var(--g);letter-spacing:2px;white-space:nowrap;}
.xp-track{flex:1;height:4px;background:var(--d2);}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--bl));width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1);}
.xp-fill.xp-max{background:linear-gradient(90deg,var(--score),var(--g));box-shadow:0 0 8px rgba(226,201,110,.4);}
.xp-next{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;color:var(--mu);white-space:nowrap;}
.profile-tabs{display:flex;border-bottom:1px solid var(--br);padding:0 40px;background:var(--d1);}
.ptab{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 18px;cursor:pointer;background:none;border:none;color:var(--mu);border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px;}
.ptab.on{color:var(--tx);border-bottom-color:var(--tx);}
.ptab:hover:not(.on){color:var(--tx);}
.profile-body{padding:36px 40px;}

/* Reviews list */
.my-review-row{
  display:flex;align-items:center;gap:16px;padding:18px 22px;
  background:var(--cd);margin-bottom:2px;cursor:pointer;
  transition:background .15s;
}

/* Timeline settings toggle list */
.tl-toggle-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.tl-toggle{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  background:var(--d2);border:1px solid var(--br);cursor:pointer;
  transition:border-color .15s;
}
.tl-toggle:hover{border-color:rgba(255,255,255,.2);}
.tl-toggle input[type=checkbox]{margin-top:3px;accent-color:var(--tx);cursor:pointer;}
.tl-toggle-body{flex:1;}
.tl-toggle-name{font-family:'Barlow Condensed',sans-serif;font-size:.86rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px;}
.tl-toggle-desc{font-size:.74rem;color:var(--mu);line-height:1.4;}
.my-review-row:hover{background:rgba(255,255,255,.04);}
.mrr-icon{width:40px;height:40px;background:var(--d2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.mrr-body{flex:1;min-width:0;}
.mrr-name{font-family:'Barlow Condensed',sans-serif;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.mrr-preview{
  font-size:.78rem;color:var(--mu);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:6px;
}
.mrr-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.68rem;color:var(--mu);}
.mrr-comp{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--up);font-size:.6rem;}
.mrr-score{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:1;flex-shrink:0;}
.mrr-score span{font-size:.6rem;color:var(--mu);font-family:'Barlow',sans-serif;margin-left:2px;}

/* User bio on profile */
.ph-bio{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--br);
  font-size:.84rem;color:var(--mu2);line-height:1.6;max-width:540px;
}

/* Game page — Accolades (full trophy/achievement list) */
.acc-row{
  display:grid;grid-template-columns:52px 1fr 70px;gap:12px;align-items:center;
  padding:13px 16px;background:var(--cd);margin-bottom:2px;
  border-left:3px solid var(--br);transition:background .15s,opacity .15s,filter .15s;
  position:relative;
  /* Default state: NOT obtained. Whole row reads as muted/locked — medal
     desaturated, text dimmed. Tier colours below take effect only when the
     row also has .acc-unlocked (obtained). */
  opacity:.55;
}
.acc-row .acc-medal-svg{filter:grayscale(1) brightness(.75);}
.acc-row .acc-rarity-lbl{color:var(--mu);}

/* Obtained — restore full opacity and the tier-specific colour treatment. */
.acc-row.acc-unlocked{opacity:1;}
.acc-row.acc-unlocked .acc-medal-svg{filter:none;}

/* Tier colours apply only to obtained rows. Each tier colours: the left
   border accent, the medal SVG (via currentColor on .acc-ic), the rarity
   label, and tints the row background. Progression: white → green → blue
   → purple → gold. Common uses pure white so it reads clearly distinct
   from the desaturated non-obtained state of any other tier. */
.acc-row.acc-unlocked.acc-common{
  border-left-color:#ffffff;background:rgba(255,255,255,.05);
}
.acc-row.acc-unlocked.acc-common .acc-ic{color:#ffffff;}
.acc-row.acc-unlocked.acc-common .acc-rarity-lbl{color:#ffffff;}

.acc-row.acc-unlocked.acc-uncommon{
  border-left-color:var(--up);background:rgba(0,255,135,.06);
}
.acc-row.acc-unlocked.acc-uncommon .acc-ic{color:var(--up);}
.acc-row.acc-unlocked.acc-uncommon .acc-rarity-lbl{color:var(--up);}

.acc-row.acc-unlocked.acc-rare{
  border-left-color:var(--bl);background:rgba(0,207,255,.07);
}
.acc-row.acc-unlocked.acc-rare .acc-ic{color:var(--bl);}
.acc-row.acc-unlocked.acc-rare .acc-rarity-lbl{color:var(--bl);}

.acc-row.acc-unlocked.acc-ultra-rare{
  border-left-color:var(--pu);background:rgba(140,90,200,.1);
}
.acc-row.acc-unlocked.acc-ultra-rare .acc-ic{color:var(--pu);}
.acc-row.acc-unlocked.acc-ultra-rare .acc-rarity-lbl{color:var(--pu);}

.acc-row.acc-unlocked.acc-completionist{
  border-left-color:var(--score);
  background:rgba(226,201,110,.1);
  box-shadow:inset 1px 0 0 rgba(226,201,110,.15);
}
.acc-row.acc-unlocked.acc-completionist .acc-ic{
  color:var(--score);filter:drop-shadow(0 0 6px rgba(226,201,110,.4));
}
.acc-row.acc-unlocked.acc-completionist .acc-rarity-lbl{color:var(--score);}

.acc-row:hover{background:rgba(255,255,255,.05);}
.acc-row.acc-unlocked:hover{filter:brightness(1.05);}

/* Obtained rows already render their tier colour at full strength (the
   non-obtained rows are greyed out). A faint drop-shadow on the medal
   reinforces "this is yours" but no extra coloured stripes or tag pills. */
.acc-row.acc-unlocked .acc-medal-svg{filter:drop-shadow(0 0 4px currentColor);}

/* Per-row "Reveal" / "Hide" button — sits inline with the trophy name on
   hidden trophies the user hasn't obtained yet. Small ghost button styled
   to match the dark-theme rhythm; lets users opt in or out of spoilers
   one row at a time rather than nuking all masking at once. */
.acc-reveal-btn{
  display:inline-block;vertical-align:middle;
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:2px 8px;margin-top:4px;background:transparent;color:var(--mu);
  border:1px solid var(--br);cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.acc-reveal-btn:hover{color:var(--tx);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04);}

/* Medal icon container — fixed 48×48 with the SVG filling it */
.acc-ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center;}
.acc-medal-svg{width:48px;height:48px;display:block;transition:filter .2s;}
.acc-body{min-width:0;}
.acc-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.9rem;
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:2px;line-height:1.3;
}
/* Title text is capped at 2 lines max. If a name would wrap to 3+ lines it
   ellipsises after line 2. The Reveal button sits after the text inline, so
   on a clamped title it appears next to the `…`. */
.acc-name-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  vertical-align:bottom;  /* align baseline of button with end of clamp */
}
.trophy-hidden-tag{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:.55rem;font-weight:700;letter-spacing:1.5px;
  padding:2px 6px;background:rgba(255,255,255,.06);border:1px solid var(--br);
  color:var(--mu);
}
.acc-desc{font-size:.74rem;color:var(--mu);line-height:1.4;}
.acc-rarity{text-align:right;flex-shrink:0;}
.acc-rarity-pct{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--tx);line-height:1;}
.acc-rarity-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.55rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin-top:2px;}

/* Trophy Cabinet */
.trophy-stats{display:flex;gap:24px;padding:20px;background:var(--cd);border:1px solid var(--br);}
.tstat{flex:1;}
.tstat-tap{cursor:pointer;transition:opacity .15s;-webkit-tap-highlight-color:transparent;}
.tstat-tap:hover{opacity:.85;}
.tstat-caret{display:inline-block;font-size:.7em;color:var(--mu);transition:transform .2s;margin-left:3px;vertical-align:middle;}
.tstat-tap.on .tstat-caret{transform:rotate(180deg);}
.trophy-expand{margin-top:14px;}
.trophy-expand-sec{animation:mIn .2s ease;}
.tstat-n{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;line-height:1;color:var(--tx);}
.tstat-l{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-top:2px;}
.trophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
/* Collapsed: only the first 3 cards show. Expanded: all cards in a
   scrollable area so a long list doesn't dominate the page. */
.trophy-grid.trophy-collapsed > .trophy-card:nth-child(n+4){display:none;}
.trophy-grid.trophy-expanded{max-height:340px;overflow-y:auto;scrollbar-width:thin;}
.trophy-grid.trophy-expanded::-webkit-scrollbar{width:6px;}
.trophy-grid.trophy-expanded::-webkit-scrollbar-thumb{background:var(--br);border-radius:3px;}
.trophy-more{
  margin-top:10px;background:none;border:1px solid var(--br);color:var(--mu);
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;padding:7px 16px;cursor:pointer;
  transition:border-color .15s,color .15s;-webkit-tap-highlight-color:transparent;
}
.trophy-more:hover{border-color:rgba(255,255,255,.4);color:var(--tx);}
.tm-caret{display:inline-block;transition:transform .2s;font-size:.85em;}
.tm-caret.tm-up{transform:rotate(180deg);}
.trophy-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--cd);border-left:3px solid var(--up);cursor:pointer;
  transition:background .15s;
}
.trophy-card.platinum{border-left-color:var(--score);}
.trophy-card:hover{background:rgba(255,255,255,.04);}
/* Icon area now hosts the hex+glyph medal stack (same as game-page
   Accolades), inheriting the tier colour set by the row's .acc-<tier>
   class. Stripped the old emoji font-size + grey backdrop. */
.trophy-icon{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:transparent;flex-shrink:0;padding:0;overflow:visible;
}
.trophy-icon .acc-medal-svg{width:42px;height:42px;overflow:visible;}
/* Tier colours scoped to .trophy-card so the SVG medal + glyph adopt the
   correct hue via currentColor inheritance. Mirrors the .acc-row tier
   palette: muted → green → blue → purple → gold. */
.trophy-card.acc-common .trophy-icon       {color:var(--mu);}
.trophy-card.acc-uncommon .trophy-icon     {color:var(--up);}
.trophy-card.acc-rare .trophy-icon         {color:var(--bl);}
.trophy-card.acc-ultra-rare .trophy-icon   {color:var(--pu);}
.trophy-card.acc-completionist .trophy-icon{color:var(--score);}
.trophy-card.acc-completionist             {border-left-color:var(--score);}
.trophy-card.acc-ultra-rare                {border-left-color:var(--pu);}
.trophy-card.acc-rare                      {border-left-color:var(--bl);}
.trophy-card.acc-uncommon                  {border-left-color:var(--up);}
.trophy-card.acc-common                    {border-left-color:var(--mu);}
.trophy-body{flex:1;min-width:0;}
.trophy-game{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}
.trophy-name{font-size:.68rem;color:var(--tx);margin-bottom:2px;}
.trophy-meta{font-size:.6rem;color:var(--mu);}
.empty-row{padding:18px 22px;background:var(--cd);color:var(--mu);font-size:.78rem;font-style:italic;text-align:center;}

/* Diary */
.diary-list{display:flex;flex-direction:column;gap:24px;}
.diary-month{}
.diary-month-hdr{
  font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:2px;
  color:var(--mu);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--br);
}
.diary-items{display:flex;flex-direction:column;gap:2px;}
.diary-row{
  display:grid;grid-template-columns:48px 40px 1fr auto;gap:14px;
  align-items:center;padding:13px 18px;background:var(--cd);
  cursor:pointer;transition:background .15s;
}
.diary-row:hover{background:rgba(255,255,255,.04);}
.diary-day{
  font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--tx);
  line-height:1;text-align:center;
}
.diary-icon{width:36px;height:36px;background:var(--d2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.diary-game{font-family:'Barlow Condensed',sans-serif;font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}
.diary-event{font-size:.7rem;color:var(--mu);}
.diary-plat{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);padding:3px 8px;border:1px solid var(--br);}

/* Bias card on profile */
.bias-card{background:var(--d1);border:1px solid var(--br);padding:24px 28px;margin-bottom:2px;}
.bc-hdr{display:flex;align-items:center;gap:10px;margin-bottom:5px;}
.bc-hdr h3{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:1px;}
.bc-note{font-size:.78rem;color:var(--mu);line-height:1.6;margin-bottom:20px;padding:11px 14px;background:rgba(255,255,255,.02);border-left:3px solid var(--br);}
.bc-note strong{color:var(--tx);}
.bf-list{display:flex;flex-direction:column;gap:2px;}
.bf-row{padding:14px 18px;background:var(--cd);display:grid;grid-template-columns:170px 1fr 100px 80px;align-items:center;gap:14px;border-left:3px solid var(--bfc);}
.bf-name{font-family:'Barlow Condensed',sans-serif;font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.bf-name span{display:block;font-size:.6rem;color:var(--mu);font-weight:400;letter-spacing:1px;margin-top:1px;}
/* Track is a horizontal -5…0…+5 bias scale. The centre line marks zero.
   The endpoints (-5 / +5) are subtle labels above the track ends. */
.bf-track{position:relative;height:6px;background:var(--d2);overflow:hidden;}
.bf-track::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.18);}
/* Bar width is clamped to half the track regardless of inline value, so a
   bar can never overflow into the opposing half or off the row. */
.bf-fill{position:absolute;height:100%;top:0;background:var(--bfc);max-width:50%;}
.bf-fill.pos{left:50%;}
.bf-fill.neg{right:50%;}
.bf-dev{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--bfc);text-align:right;}
.bf-dev span{font-size:.6rem;color:var(--mu);font-family:'Barlow',sans-serif;display:block;font-weight:400;}
.bf-badge{font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border:1px solid var(--bfc);color:var(--bfc);background:rgba(255,255,255,.02);white-space:nowrap;}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1100px){
  .forum-shell{grid-template-columns:200px 1fr;}
  .f-right{display:none;}
  /* Tighter 3-col game hero for tablet */
  .gh-inner{grid-template-columns:160px 1fr 220px;gap:20px;padding:28px 24px;}
  .gh-cover{width:160px;}
  .gh-title{font-size:clamp(1.8rem,3vw,2.4rem);}
  .gh-synopsis{font-size:.78rem;}
  .hero-body{grid-template-columns:1fr;}
  .hero-right{display:none;}
}
/* Narrow-desktop guard: between the mobile breakpoint and full desktop,
   the slogan + 4 nav links + bell + 2 auth buttons can overflow the bar.
   Drop the decorative slogan early and tighten nav-link spacing so the
   Sign Up button never runs off the right edge. */
@media(max-width:1180px){
  /* Tighten the nav links a touch on narrower desktops to keep everything
     on one line, but keep the slogan visible (as it was originally). */
  .nav-links{gap:0;}
  .nl{padding:7px 11px;letter-spacing:1.5px;}
}
@media(max-width:900px){
  #nav{padding:0 12px;gap:6px;}
  .nl{display:none;}
  /* Wordmark on mobile uses the exact same letter formatting as desktop:
     Bebas Neue, 400 weight, 1.4rem (22.4px) with 3px letter-spacing and
     line-height:1 so vertical centering in the 60px nav bar is exact.
     The flex alignment on .nav-logo + line-height:1 prevents the small
     visual offset Bebas would otherwise have from its default ascender. */
  .nav-wordmark{
    font-family:'Bebas Neue',sans-serif !important;
    font-weight:400 !important;
    font-size:1.4rem !important;
    letter-spacing:3px !important;
    line-height:1 !important;
    color:var(--tx) !important;
    display:inline-flex !important;
    align-items:center !important;
    transform:translateY(0.08em) !important;  /* match desktop optical-centering */
  }
  .nav-logo{align-items:center;}
  .nav-slogan{font-size:.5rem !important;letter-spacing:1px !important;padding-left:8px !important;margin-right:4px !important;display:block !important;white-space:normal !important;line-height:1.2 !important;max-height:2.4em;overflow:hidden;}
  .nav-search{display:none !important;}
  /* Login/Signup show only when logged OUT. When logged in, the body gets
     .logged-in and we hide them so they don't wrongly appear in the bar. */
  .nav-auth{display:flex !important;flex-shrink:0;}
  body.logged-in .nav-auth{display:none !important;}
  .na-btn{font-size:.58rem;letter-spacing:1px;padding:6px 9px;}
  .auth-wrap,.forum-shell,.browse-layout,.thread-shell{grid-template-columns:1fr;}
}
@media(max-width:520px){
  /* Slogan drops on narrow phones when LOGGED OUT (no room beside the
     login/signup buttons). When logged in those buttons are gone, so the
     slogan shows next to the wordmark just like desktop. */
  .nav-slogan{display:none !important;}
  body.logged-in .nav-slogan{display:block !important;}
}
@media(max-width:900px){
  /* Mobile hero layout — single column, cover full-width at the top:
       Row 1: cover (full width, key art hero)
       Row 2: info — title, plats, genres, synopsis (action buttons floated top-right)
       Row 3: score trio
       Row 4: screenshots strip
     The Follow + FS buttons get absolutely-positioned to the top-right of the
     info column so they sit inline with the title (per the spec). Keeping them
     in source order at the bottom of .gh-info means the natural tab order is
     still title → metadata → actions, which is correct semantically. */
  .gh-inner{
    display:flex;flex-direction:column;
    gap:14px;
    padding:0 0 20px;
    align-items:stretch;
  }
  .gh-cover{
    width:100%;aspect-ratio:16/9;
    border:none;border-radius:0;
    box-shadow:none;
    font-size:6rem;
  }
  .gh-info{
    width:auto;min-width:0;padding:0 16px;
    padding-top:0;
  }
  /* On mobile the title and actions stack vertically so a long game name
     (e.g. "God of War Ragnarök") never squeezes or misaligns the buttons.
     Title sits on top full-width; then the Follow button on its own row;
     then FS + Share together in a row beneath it. */
  .gh-title-row{
    position:static;
    flex-direction:column;align-items:stretch;
    gap:12px;
    margin-bottom:8px;
  }
  .gh-title-row .gh-title{font-size:1.8rem;padding-right:0;}
  .gh-title-row .gh-actions{position:static;}
  .gh-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  /* Follow spans the full width on its own row. */
  .gh-actions .btn-follow{
    height:38px;width:100%;min-width:0;padding:0 14px;font-size:.7rem;
    grid-column:1 / -1;
  }
  /* FS toggle + Share share the second row, side by side. */
  .gh-actions #gameTrustToggleWrap{display:block;}
  .gh-actions #gameTrustToggleWrap .fs-trust-toggle,
  .gh-actions .btn-share{height:38px;width:100%;}
  .gh-actions .fs-trust-toggle{height:38px;}
  .gh-actions .fs-icon-svg{width:18px;height:18px;}
  .gh-rightcol{display:contents;}
  .gh-rightcol .score-trio{
    flex-direction:row;gap:6px;
    margin:0 16px;
  }
  .gh-rightcol .score-trio .st-block{flex:1 1 0;min-width:0;}
  /* Mobile-specific CTA swap: hide the desktop CTA (which lives in the
     sort row) and show the mobile CTA under the score trio. */
  .gh-write-cta-desktop{display:none;}
  .gh-write-cta-mobile{
    display:block;width:auto;margin:8px 16px 0;
    font-size:.74rem;padding:11px 18px;text-align:center;
    box-sizing:border-box;
  }
  #screensStripWrap{padding:3px 16px;}
  /* About-tab grid: drop to 2 columns on mobile so long values fit. */
  .game-about-grid{grid-template-columns:repeat(2,1fr) !important;}
  .game-about-grid > div{min-width:0;}
  .auth-left,.f-left,.browse-sb,.thread-sb{display:none;}
  .how-strip,.stages-brand,.land-reviews,.land-cta-section{padding:56px 24px;}
  .steps{grid-template-columns:1fr 1fr;}
  .steps::before{display:none;}
  .stages-grid{grid-template-columns:1fr 1fr;}
  .lr-grid,.grid3,.grid4{grid-template-columns:1fr 1fr;}
  .hs{padding:28px 20px;}
  /* Mobile trending — single column, 1→10. Larger portrait cover on
     the left; rank in its own narrow column; title + studio in the
     body; the 3-score strip drops to a second row spanning under the
     cover + body so it never competes with the cover for width.
     The container is capped to roughly 5 rows tall and scrolls
     internally so the top 5 are visible at a glance and you can scroll
     down within the section to reach 6-10. */
  .trending-row{
    grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:6px;
    max-height:342px;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    /* Fade the bottom edge slightly to hint there's more below. */
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
    padding-bottom:8px;
  }
  .tr-row{
    grid-template-columns:60px 1fr;
    grid-template-areas:
      "cover body"
      "cover scores";
    gap:4px 12px;padding:12px 14px;align-items:center;
  }
  .tr-cover{grid-area:cover;width:60px;height:80px;font-size:1.9rem;align-self:center;}
  .tr-body{grid-area:body;gap:4px;align-self:end;}
  .tr-scores{grid-area:scores;gap:16px;align-self:start;}
  .tr-name{font-size:.92rem;white-space:normal;}
  .tr-sc-val{font-size:1.05rem;}
  .game-body,.browse-main,.profile-body,.write-wrap,.thread-main{padding:20px;}
  /* Inside .thread-main on mobile, every internal section (OP card body,
     composer, comments) should share the same horizontal padding so
     content aligns to one consistent gutter. Without this, the OP body
     sits at 26px in, the composer at 24px, and comments at varying
     indents — making the column look off-centre on small screens. */
  .thread-main .op-body{padding:18px 16px;}
  .thread-main .op-vbar{padding:10px 16px;gap:6px;flex-wrap:wrap;}
  .thread-main .composer{padding:14px 16px;}
  .thread-main .composer-in{gap:8px;}
  .thread-main .cmp-av{flex-shrink:0;}
  .thread-main .cmt-thread{padding:16px 16px 24px;}
  .thread-main .cmt{padding-left:0;}
  .game-tabs,.profile-tabs{
    padding:0;
    width:100%;
    box-sizing:border-box;
  }
  .gtab,.ptab{
    flex:1 1 0;                /* share the available width equally */
    min-width:0;               /* allow shrink below content size */
    padding:13px 4px;
    font-size:.58rem;letter-spacing:1px;
    white-space:nowrap;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gh-inner,.game-body,.profile-hero,.xp-bar-row{padding-left:20px;padding-right:20px;}
  .space-hdr,.feed-ctrl{padding-left:20px;padding-right:20px;}
  .bf-row{grid-template-columns:1fr 1fr;gap:8px;}
  /* Reviews on mobile: stacked rows, inline-collapse */
  .rev-cats-grid{grid-template-columns:1fr;gap:1px;}
  .rev-cat-card{
    padding:11px 14px;cursor:pointer;text-align:left;
    border-top:none;border-left:3px solid var(--cc);
    background:rgba(255,255,255,.02);
  }
  .rev-cat-card:active{background:rgba(255,255,255,.06);}
  .rev-cat-letter{display:none;}
  .rev-cat-name{font-size:.74rem;color:var(--tx);letter-spacing:1.5px;flex-shrink:0;}
  /* Show the quick-take note inline in the collapsed header — between name and score */
  .rev-cat-note{
    display:block;font-size:.7rem;font-style:italic;color:var(--mu2);
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;
  }
  .rev-cat-card.open .rev-cat-note{
    display:block;white-space:normal;overflow:visible;
    margin-top:6px;flex-basis:100%;order:99;  /* drop below the header row when open */
  }
  .rev-cat-hdr{flex-direction:row;gap:10px;align-items:center;margin-bottom:0;flex-wrap:wrap;}
  .rev-cat-val{margin-left:auto;font-size:1.3rem;}
  .rev-cat-chev{
    display:inline-block;color:var(--mu);font-size:.7rem;
    transition:transform .25s;flex-shrink:0;margin-left:4px;
  }
  .rev-cat-card.open .rev-cat-chev{transform:rotate(180deg);}
  /* Collapse sub-bars by default on mobile, show when card is open */
  .rev-cat-subs{
    max-height:0;overflow:hidden;
    transition:max-height .3s ease,margin-top .3s ease,padding-top .3s ease;
    margin-top:0;padding-top:0;
  }
  .rev-cat-card.open .rev-cat-subs{
    max-height:1000px;margin-top:10px;padding-top:10px;
    border-top:1px solid var(--br);
    gap:12px;
  }
  /* Mobile expanded subs: sub name dominant (white, bigger), note smaller and grey */
  .rev-cat-card.open .sub-bar{
    grid-template-columns:1fr auto;
    gap:6px 10px;
    row-gap:4px;
  }
  .rev-cat-card.open .sub-bar-name{
    font-size:.78rem;color:var(--tx);letter-spacing:1.5px;font-weight:700;
  }
  .rev-cat-card.open .sub-bar-track{
    grid-column:1/-1;height:4px;order:3;
  }
  .rev-cat-card.open .sub-bar-val{
    font-size:1.1rem;min-width:30px;
  }
  /* Show sub-notes inline when expanded on mobile, smaller and grey + italic */
  .rev-cat-card.open .sub-bar-note{
    display:block;font-size:.7rem;color:var(--mu);font-style:italic;line-height:1.4;
    grid-column:1/-1;order:4;margin-top:-2px;
  }
  /* Hide the desktop tab-style expand panel on mobile (mobile uses inline expand) */
  .rev-cat-expand{display:none !important;}
}
@media(max-width:600px){
  /* Hero */
  .hero-body{grid-template-columns:1fr;}
  .hero-right{display:none;}
  .hero-left{padding:80px 20px 48px;}
  .hero-nav{padding:0 16px;}
  .hero-nav-links{display:none;}
  .hero-nav-search{display:none;}
  .hero-h1{font-size:clamp(2.6rem,12vw,4rem);}
  .hero-stats{gap:20px;flex-wrap:wrap;}
  /* New releases strip */
  .nrs-hdr{padding:14px 16px 10px;}
  .nrs-scroll{padding:0 16px 14px;}
  /* Show exactly 3 tiles at a time: viewport minus the 16px left padding
     and the two 2px gaps between three tiles, divided by three. */
  .nrc{
    flex:0 0 calc((100vw - 16px - 4px) / 3);
    width:calc((100vw - 16px - 4px) / 3);
    max-width:calc((100vw - 16px - 4px) / 3);
  }
  /* Landing sections */
  .how-strip,.stages-brand,.land-reviews,.land-cta-section{padding:44px 16px;}
  .steps{grid-template-columns:1fr;}
  .steps::before{display:none;}
  .stages-grid{grid-template-columns:1fr;}
  .lr-grid{grid-template-columns:1fr;}
  /* Home page */
  .home-hero{height:340px;}
  .hh-cover{display:none;}
  .hh-content{left:20px;right:20px;max-width:none;}
  .hs{padding:20px 16px;}
  .grid4,.grid3{grid-template-columns:1fr 1fr;}
  /* Auth */
  .auth-right{padding:32px 20px;}
  /* Game page */
  .game-body,.browse-main,.profile-body,.write-wrap,.thread-main{padding:16px;}
  .bs-input{padding:11px 0;font-size:.88rem;}
  .bs-icon{padding:0 11px;font-size:.9rem;}
  .gh-inner{padding:16px;}
  /* Profile */
  .profile-hero{padding:24px 16px 6px;}
  .ph-top-actions{top:10px;right:12px;}
  .pta-btn{width:34px;height:34px;}
  .pta-btn svg{width:18px;height:18px;}
  /* Following sub-toggle: take the full row, split each tab equally so all
     four fit side-by-side. Tighter padding + smaller letter-spacing so the
     longest label (DEVS) doesn't push the row to wrap. */
  .fol-sub-toggle{display:flex;width:100%;flex-wrap:nowrap;}
  .fst-btn{
    flex:1;justify-content:center;padding:8px 4px;
    letter-spacing:.8px;font-size:.62rem;gap:4px;min-width:0;
  }
  .fst-ct{padding:1px 4px;font-size:.58rem;}
  .profile-hero .xp-bar-row,.xp-bar-row{padding-left:16px;padding-right:16px;}
  .ph-top{flex-direction:column;align-items:flex-start;gap:14px;}
  .ph-av{width:64px;height:64px;font-size:1.6rem;}
  .ph-name{font-size:1.6rem;}
  .ph-handle{font-size:.75rem;margin-bottom:8px;}
  .ph-stats{gap:14px;margin-top:18px;padding:14px 0;flex-wrap:wrap;justify-content:space-between;}
  .phs-n{font-size:1.3rem;}
  .phs-l{font-size:.56rem;letter-spacing:.5px;}
  .ph-plats{gap:5px;}
  .ph-plat{padding:3px 7px;font-size:.58rem;}
  .xp-bar-row{flex-wrap:wrap;gap:8px;}
  .xp-stage{font-size:.78rem;}
  .xp-next{font-size:.6rem;width:100%;text-align:right;}
  /* (profile-tabs styled by the earlier rule that sets flex:1 evenly) */
  .profile-body{padding:16px;}
  .bf-row{grid-template-columns:1fr;gap:4px;}
  .trophy-grid{grid-template-columns:1fr;}
  .trophy-stats{gap:16px;padding:16px;flex-wrap:wrap;}
  .tstat-n{font-size:1.8rem;}
  .diary-row{grid-template-columns:36px 32px 1fr auto;gap:10px;padding:11px 14px;}
  .diary-day{font-size:1.2rem;}
  .diary-icon{width:28px;height:28px;font-size:1rem;}
  .diary-plat{font-size:.55rem;padding:2px 6px;}
  .my-review-row{padding:14px 16px;gap:12px;}
  .mrr-score{font-size:1.6rem;}
  /* Write review */
  .cat-header{padding:12px 14px;}
  .sub-slider{grid-template-columns:100px 1fr 36px;padding:8px 14px;}
  .score-preview{flex-direction:column;}
  .sp-total{border-right:none;border-bottom:1px solid var(--br);}
  /* Category cells distribute evenly across the available width — never
     overflow horizontally. The 5 cells share the row with very tight
     padding so all labels stay readable. */
  .sp-cats{display:flex;flex-wrap:nowrap;overflow:hidden;}
  .sp-cat{flex:1 1 0;min-width:0;padding:8px 4px;text-align:center;}
  .sp-cat-lbl{font-size:.5rem;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sp-cat-val{font-size:1.1rem;}
  /* Forum */
  .forum-shell{grid-template-columns:1fr;}
  .f-left{display:none;}
  .f-mid{min-width:0;}
  .space-hdr,.feed-ctrl{padding-left:16px;padding-right:16px;}
  /* Nav */
  #nav{padding:0 12px;}
  .nl{display:none;}
  .nav-search{display:none;}
}

/* ══════════════════════════════════════════
   LIBRARY TAB (profile)
   ══════════════════════════════════════════ */
.lib-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.lib-filters .sp-label{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin-right:4px;}
.lib-filters .filter-sep{width:1px;height:16px;background:var(--br);margin:0 6px;}
/* Forced flex-row breaks. `.filter-rowbreak` wraps Sort to its own row on
   both desktop and mobile. `.filter-rowbreak-mobile` wraps Completion to
   its own row on mobile only (hidden at desktop widths so Platform and
   Completion sit side-by-side there). */
.lib-filters .filter-rowbreak{flex-basis:100%;height:0;margin:6px 0 0;}
.lib-filters .filter-rowbreak-mobile{display:none;}

@media (max-width:768px){
  .lib-filters{gap:5px;align-items:center;}
  .lib-filters .filter-sep{display:none;}
  .lib-filters .filter-rowbreak{margin:4px 0 0;}
  /* Activate the mobile-only break so Completion starts on row 2. */
  .lib-filters .filter-rowbreak-mobile{display:block;flex-basis:100%;height:0;margin:4px 0 0;}
  .lib-filters .sp-label{font-size:.58rem;margin:0 4px 0 0;}
  .lib-filters .sp{font-size:.6rem;padding:5px 9px;letter-spacing:.5px;}
}

.lib-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
  padding:12px 16px;background:var(--cd);margin-bottom:2px;cursor:pointer;
  border-left:3px solid var(--br);transition:background .15s,border-color .15s;
}
.lib-row:hover{background:rgba(255,255,255,.04);border-left-color:var(--up);}
.lib-cover{
  width:64px;height:48px;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;border-radius:2px;flex-shrink:0;
}
.lib-meta{min-width:0;}
.lib-title{
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lib-sub{font-size:.7rem;color:var(--mu);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;}
.lib-sub .lib-plat{color:var(--tx);font-weight:600;}
/* Subtle three-score strip — Critic / Player / FS visible on every row
   regardless of which dimension drives the current sort. Each block stacks
   a tiny label above a compact value. Whites + muted ver for label so they
   don't compete with the title or status badge. */
.lib-scores{
  display:flex;gap:14px;margin-top:6px;
  font-family:'Barlow Condensed',sans-serif;
}
.lib-score-block{display:inline-flex;flex-direction:column;line-height:1;}
.lib-score-lbl{
  font-size:.5rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--tx);margin-bottom:2px;
}
.lib-score-val{font-size:.78rem;font-weight:600;color:var(--tx);}
.lib-score-val small{color:var(--mu);font-size:.55rem;margin-left:1px;}
.lib-right{flex-shrink:0;}
.lib-badge{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;
  font-size:.58rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:4px 9px;white-space:nowrap;
}
.lib-comp{background:rgba(226,201,110,.12);border:1px solid rgba(226,201,110,.4);color:var(--score);}
.lib-cred{background:rgba(0,207,255,.1);border:1px solid rgba(0,207,255,.3);color:var(--bl);}
.lib-play{background:rgba(0,255,135,.1);border:1px solid rgba(0,255,135,.3);color:var(--up);}
.lib-owned{background:rgba(255,255,255,.04);border:1px solid var(--br);color:var(--mu);}

/* ══════════════════════════════════════════
   CREATOR PAGE (dev / director / composer / publisher)
   ══════════════════════════════════════════
   Creator pages share the .game-hero shell so they're visually a member
   of the same family as game pages — same dark gradient background, same
   giant faded emoji behind the title, same button system, AND same cover
   proportions (3:4 portrait on desktop, 16:9 landscape banner on mobile).
   Only differences:
     • Grid is 2-col (cover | info), not 3-col, since creators have no
       score-trio to occupy the right column. Without this override the
       info column would render unnecessarily narrow.
     • Kind label ("DEVELOPER" / etc) sits above the title.
     • No score-trio, no platform pills, no genre tags — just bio.
*/
.creator-hero .gh-inner{
  grid-template-columns:200px 1fr;
}
.creator-hero .ch-cover{
  background:var(--cd);
}
.creator-hero .ch-cover-emoji{
  font-size:5.5rem;line-height:1;display:block;
}
.creator-hero .ch-kind{
  font-family:'Barlow Condensed',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--bl);
  margin-bottom:8px;
}
/* Standalone title (no longer wrapped in .gh-title-row on creator pages).
   Bottom margin gives breathing room before the meta line. */
.creator-hero .ch-title{margin-bottom:8px;}
/* Actions sit underneath the bio on creator pages — left-aligned. */
.creator-hero .ch-actions{margin-top:14px;justify-content:flex-start;}
/* The actions slot inherits .gh-actions styling from game.html — Follow
   button on the left, FS trust toggle on the right. Both are 34px tall
   to match the rest of the site. */

.creator-body{max-width:1200px;margin:0 auto;padding:32px 40px 60px;}
.creator-filters{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:18px;
}
.creator-games-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px;}
.cg-card{
  display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;background:var(--cd);cursor:pointer;
  border:1px solid var(--br);transition:background .15s,border-color .15s,transform .15s;
}
.cg-card:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2);transform:translateY(-2px);}
.cg-cover{
  width:80px;height:60px;display:flex;align-items:center;justify-content:center;
  font-size:2rem;flex-shrink:0;
}
.cg-info{min-width:0;}
.cg-title{
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--tx);
  margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cg-meta{font-size:.68rem;color:var(--mu);margin-bottom:4px;}
.cg-genres{display:flex;gap:4px;flex-wrap:wrap;}
.cg-genre{
  font-family:'Barlow Condensed',sans-serif;font-size:.54rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;padding:2px 5px;
  background:rgba(255,255,255,.04);border:1px solid var(--br);color:var(--mu);
}
.cg-scores{
  flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;line-height:1;
}
.cg-score-big{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;line-height:1;}
.cg-score-den{font-size:.7rem;color:var(--mu);}
.cg-score-lbl{
  font-family:'Barlow Condensed',sans-serif;font-size:.55rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--ver);
  margin-top:2px;
}
.cg-score-extra{
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;
  color:var(--mu);margin-top:4px;letter-spacing:.3px;
}
.cg-score-extra span{white-space:nowrap;}

/* ══════════════════════════════════════════
   GAME PAGE — credits grid
   ══════════════════════════════════════════
   Four creator credits — Developer / Publisher / Director / Composer —
   laid out as a 2-column grid of labelled cells. Each cell stacks a
   small uppercase label over a bold linked name. Reads as a unified
   "credits block" rather than a comma-soup line of mixed entities. */
.gh-credits-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,max-content));
  gap:10px 28px;margin:12px 0 14px;
}
.gh-credit-cell{min-width:0;}
.gh-credit-label{
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--ver);
  margin-bottom:2px;
}
.gh-credit-value{
  font-family:'Barlow Condensed',sans-serif;font-size:.86rem;font-weight:600;
  color:var(--tx);line-height:1.3;
}
.gh-credit-link{
  color:var(--tx);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s;
}
.gh-credit-link:hover{color:var(--bl);border-bottom-color:var(--bl);}

/* ══════════════════════════════════════════
   WRITE REVIEW GATE — disabled state
   ══════════════════════════════════════════
   When the user hasn't played the game, the button keeps its full size
   and label but switches to a hollow / outlined look: transparent fill,
   muted-grey border + text, not-allowed cursor. Reads as "this exists
   but is not available right now," not "this is a different button."
*/
.gh-write-cta-desktop.disabled,
.gh-write-cta-mobile.disabled{
  /* Disabled "write review" CTA: hollow look via a subtle background tint
     rather than an outlined border, matching the rectangular .btn-g. */
  background:rgba(255,255,255,.05) !important;
  color:var(--mu) !important;
  border:none !important;
  cursor:not-allowed;
  position:relative;  /* anchor for tap-tooltip */
  opacity:1;          /* full opacity — the muted colours carry the state */
  box-shadow:none;
}
.gh-write-cta-desktop.disabled:hover,
.gh-write-cta-mobile.disabled:hover{
  background:rgba(255,255,255,.09) !important;
  color:var(--tx) !important;
  transform:none;
}
/* Tap-tooltip bubble — body-attached so it renders above everything and
   isn't clipped by the button's clip-path / overflow / stacking context.
   Positioned via JS by reading the button's bounding rect. */
.write-review-tip{
  position:absolute;  /* JS sets top/left in document coordinates */
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.5px;text-transform:none;
  background:var(--d0);color:var(--tx);border:1px solid var(--br);
  padding:7px 14px;white-space:nowrap;
  opacity:0;transform:translateY(4px);
  transition:opacity .18s,transform .18s;
  pointer-events:none;z-index:9999;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
.write-review-tip.show{opacity:1;transform:translateY(0);}

/* Mobile tweaks for library/creator */
@media (max-width:768px){
  /* The .game-hero rules already collapse to single-column on mobile;
     creators inherit the same 16:9 mobile cover banner as game pages.
     Just size the centred emoji here. */
  .creator-hero .ch-cover-emoji{font-size:3.6rem;}
  .creator-body{padding:24px 16px 60px;}
  .creator-games-list{grid-template-columns:1fr;}
  .cg-card{grid-template-columns:60px 1fr auto;padding:12px;gap:10px;}
  .cg-cover{width:60px;height:45px;font-size:1.5rem;}
  .lib-row{grid-template-columns:52px 1fr auto;padding:10px 12px;gap:10px;}
  .lib-cover{width:52px;height:40px;font-size:1.4rem;}
  .lib-badge{font-size:.5rem;padding:3px 6px;}
  .gh-credits-row{grid-template-columns:1fr 1fr;gap:8px 14px;}
}

/* ══════════════════════════════════════════
   REVIEW COMMENTS — inline thread under each review card
   ══════════════════════════════════════════
   Visually consistent with the discussion-thread comments (.cmt-*).
   Lives inside the review card's bottom edge as an expandable panel.
*/
.rc-comments{
  border-top:1px solid var(--br);
  background:rgba(255,255,255,.015);
  /* Slight gap so the panel reads as a distinct popped-open area rather
     than fused to the Helpful / Comments button row above it. */
  margin-top:12px;
}
.rc-comments-inner{padding:14px 20px 16px;}
.rc-comments-empty{
  font-size:.8rem;color:var(--mu);font-style:italic;
  padding:6px 0 14px;
}
.rc-comments .cmt{
  background:transparent;padding:10px 0;border-bottom:1px solid var(--br);
}
.rc-comments .cmt:last-of-type{border-bottom:none;}
.rc-comments .cmt-in{display:flex;gap:10px;}
.rc-comments .cmt-cnt{flex:1 1 auto;min-width:0;}

.rc-comments-composer{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--br);
}
.rc-comments-ta{
  width:100%;min-height:60px;resize:vertical;
  background:var(--d2);color:var(--tx);border:1px solid var(--br);
  font:inherit;font-size:.86rem;line-height:1.5;padding:10px 12px;
  box-sizing:border-box;
}
.rc-comments-ta:focus{outline:none;border-color:var(--up);}
.rc-comments-foot{
  display:flex;justify-content:flex-end;gap:8px;margin-top:8px;
}

/* "Comments off" — non-interactive grey-out for reviewers who disabled */
.rc-act.rc-act-off{
  color:var(--mu);opacity:.7;cursor:default;
}
.rc-act.rc-act-off:hover{
  background:transparent;color:var(--mu);
}

/* ══════════════════════════════════════════
   WRITE-REVIEW TOGGLE — "Allow comments" opt-out
   ══════════════════════════════════════════ */
.wr-toggle{
  display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  padding:12px 14px;background:var(--d2);border:1px solid var(--br);
}
.wr-toggle input{position:absolute;opacity:0;pointer-events:none;}
.wr-toggle-track{
  flex-shrink:0;width:38px;height:22px;border-radius:999px;
  background:var(--cd);border:1px solid var(--br);position:relative;
  transition:background .2s,border-color .2s;
}
.wr-toggle-thumb{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--mu);transition:left .2s,background .2s;
}
.wr-toggle input:checked + .wr-toggle-track{
  background:rgba(0,255,135,.18);border-color:var(--up);
}
.wr-toggle input:checked + .wr-toggle-track .wr-toggle-thumb{
  left:18px;background:var(--up);
}
.wr-toggle-label{display:flex;flex-direction:column;gap:3px;min-width:0;}
.wr-toggle-title{font-size:.86rem;color:var(--tx);font-weight:600;}
.wr-toggle-sub{font-size:.72rem;color:var(--mu);line-height:1.5;}

/* ══════════════════════════════════════════
   THEME TOGGLE BUTTONS (settings page)
   ══════════════════════════════════════════
   Replaces the emoji-prefixed buttons with proper SVG icons drawn in the
   same stroked style as the nav-bar SVGs. Layout: 16px icon + label, sat
   on a dark backdrop with hover/active state mirroring the rest of the
   button system. */
.theme-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:7px 14px;border:1px solid var(--br);background:var(--d2);
  color:var(--tx);cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.theme-btn svg{
  width:16px;height:16px;flex-shrink:0;display:block;
  color:var(--mu);transition:color .2s;
}
.theme-btn:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3);}
.theme-btn:hover svg{color:var(--tx);}
/* Active (selected) state — JS adds .on to whichever theme is current. */
.theme-btn.on{border-color:var(--up);background:rgba(0,255,135,.06);}
.theme-btn.on svg{color:var(--up);}

/* ══════════════════════════════════════════
   BROWSE → RELEASE CALENDAR (Upcoming sub-tab)
   ══════════════════════════════════════════
   Sub-tab switcher mimics the .ptab profile-tab pattern so it feels
   familiar. The upcoming list itself is grouped by month with a sticky
   header above each bucket. Each row is a 3-column flex (cover + meta +
   right column with date/watch/hype) that collapses to a stack on
   mobile, similar to the library rows on the profile page.
*/
.browse-modes{
  display:flex;gap:0;border-bottom:1px solid var(--br);
  margin-bottom:18px;
}
.bm-btn{
  background:none;border:none;color:var(--mu);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  padding:12px 22px;border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.bm-btn:hover{color:var(--tx);}
.bm-btn.on{color:var(--tx);border-bottom-color:var(--up);}

.upcoming-filters{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:20px;
}
.upcoming-filters .filter-rowbreak{flex-basis:100%;height:0;margin:6px 0 0;}

.upcoming-list{display:flex;flex-direction:column;gap:24px;}
.up-bucket{display:flex;flex-direction:column;}
.up-bucket-hdr{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:2px;
  color:var(--tx);margin:0 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--br);
  display:flex;align-items:baseline;gap:10px;
}
.up-bucket-ct{
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1.5px;color:var(--mu);
}

.up-row{
  display:grid;
  /* Two-row layout: top bar with date (left) and actions (right) above
     the cover + meta block. On desktop the head spans full width; on
     mobile it does too — same layout pattern, just denser. */
  grid-template-columns:160px 1fr;
  grid-template-areas:
    'head head'
    'cover meta';
  gap:10px 18px;
  padding:14px 0;border-bottom:1px solid var(--br);
  align-items:start;
}
.up-bucket .up-row:last-child{border-bottom:none;}
.up-head{
  grid-area:head;
  display:flex;flex-direction:row;align-items:center;
  justify-content:space-between;gap:14px;
}
.up-actions{
  display:flex;flex-direction:row;align-items:center;gap:14px;
}
.up-cover{
  grid-area:cover;
  width:160px;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;border:1px solid var(--br);
}
.up-meta{grid-area:meta;min-width:0;}
.up-title{
  font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--tx);
  margin-bottom:3px;
}
.up-sub{font-size:.72rem;color:var(--mu);margin-bottom:6px;}
.up-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px;}
.up-plat,.up-genre{
  font-family:'Barlow Condensed',sans-serif;font-size:.55rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;padding:2px 6px;
  border:1px solid var(--br);background:rgba(255,255,255,.04);
}
.up-plat{color:var(--tx);}
.up-genre{color:var(--mu);}
.up-syn{font-size:.78rem;color:var(--mu);line-height:1.55;max-width:60ch;}

.up-date{
  font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:1.5px;
  line-height:1;
}
.up-date-firm  {color:var(--tx);}
.up-date-window{color:var(--tx);}
.up-date-tbc   {color:var(--mu);}
.up-watch{font-size:.6rem;padding:0 12px;height:28px;}
.up-hype{
  font-family:'Barlow Condensed',sans-serif;font-size:.62rem;
  color:var(--mu);letter-spacing:.5px;
  display:inline-flex;align-items:center;gap:5px;
}
.up-hype-ic{
  width:12px;height:12px;display:block;color:var(--mu);
}

.up-empty{
  padding:40px 20px;text-align:center;color:var(--mu);
  font-size:.85rem;
}

@media (max-width:768px){
  .up-row{
    /* Same head-on-top pattern as desktop, just narrower cover. The
       3-cell layout (head spans full width, then cover+meta below) is
       inherited from the desktop grid-template-areas rules — we only
       override column width and cover sizing here. */
    grid-template-columns:120px 1fr;
    gap:10px 12px;
  }
  .up-cover{
    /* Stretch the cover to the meta column's intrinsic height so the
       art frames the title → tags block. The 16:9 aspect-ratio lock is
       dropped on mobile (where row content is taller than 16:9 would
       allow); a min-height keeps it sensible on synopsis-less rows. */
    width:120px;aspect-ratio:auto;min-height:90px;
    height:100%;
    font-size:2.4rem;align-self:stretch;
  }
  .up-syn{display:none;}
  .bm-btn{font-size:.72rem;padding:10px 16px;}
}

/* ══════════════════════════════════════════
   UPCOMING-GAME LOCKED TABS
   ══════════════════════════════════════════
   For unreleased games, the Reviews and Accolades tabs get this class —
   greyed out, not-allowed cursor, but still clickable so the tooltip
   bubble can explain why. Same visual treatment as a disabled button. */
.gtab.gtab-locked{
  color:var(--mu);opacity:.55;cursor:not-allowed;
  position:relative;
}
.gtab.gtab-locked:hover{color:var(--mu);opacity:.65;}

/* ══════════════════════════════════════════
   NEW DISCUSSION MODAL — unified composer
   ══════════════════════════════════════════
   Shows a "Posting to {Game}" pin at the top with the game's cover +
   name, mirroring how Write Review tells the user which game they're
   reviewing. The pin replaces the older "Space" selector entirely.
*/
.ndm-game-pin{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:var(--d1);border:1px solid var(--br);
  margin-bottom:18px;
}
.ndm-game-cover{
  width:56px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;border:1px solid var(--br);
}
.ndm-game-info{flex:1 1 auto;min-width:0;}
.ndm-game-label{
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--mu);
}
.ndm-game-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--tx);
  margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ndm-change{
  background:none;border:1px solid var(--br);color:var(--mu);
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 12px;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.ndm-change:hover{color:var(--tx);border-color:rgba(255,255,255,.3);}

/* ══════════════════════════════════════════
   THREAD SIDEBAR — "More Discussions" panel
   ══════════════════════════════════════════
   Lists other popular discussions for the same game in the right rail
   of a thread page. Each row is a clickable button styled like a quiet
   text row (no border) so the panel reads as a list, not a stack of
   loud cards. Hover lights up the title in the accent green to match
   the link-style interaction language used elsewhere in the sidebar. */
.thread-sb-block{
  margin-top:0;
  padding-top:0;
}
.thread-sb-hdr{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;
}
.thread-sb-title{
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--mu);
}
.thread-sb-list{display:flex;flex-direction:column;gap:2px;}
.thread-sb-row{
  background:none;border:none;cursor:pointer;text-align:left;
  padding:10px 0;color:inherit;
  border-bottom:1px solid var(--br);
  transition:padding-left .15s;
}
.thread-sb-list .thread-sb-row:last-child{border-bottom:none;}
.thread-sb-row:hover{padding-left:4px;}
.thread-sb-row:hover .thread-sb-row-title{color:var(--g);}
.thread-sb-row-title{
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:600;
  color:var(--tx);line-height:1.35;
  margin-bottom:4px;
  /* Clamp to two lines so a very long title doesn't blow out the
     sidebar rhythm. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .15s;
}
.thread-sb-row-meta{
  display:flex;gap:6px;
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
}

/* ══════════════════════════════════════════
   UI ICON LIBRARY (.ui-ic)
   ══════════════════════════════════════════
   Universal sizing + display rules for inline nav-style SVG icons used
   as replacements for functional UI emojis (search, comment, trophy,
   credits, flame, eye, people, pin, warning, new, gear). They inherit
   colour via currentColor and behave like text — sitting inline with
   surrounding labels via display:inline-block + vertical-align:middle. */
.ui-ic{
  /* Visible glyph inside a nav-style 24×24 SVG fills roughly 80% of the
     viewBox. Text cap-height is roughly 70% of font-size. To make the
     icon's visible top/bottom line up with the text's cap-line and
     baseline, we want box ≈ cap-height / 0.8 ≈ 0.88em. We use 0.88em
     and a small baseline shift so the box sits centred on cap-height. */
  display:inline-block;width:0.88em;height:0.88em;
  vertical-align:-0.08em;
  flex-shrink:0;
}
/* Slightly-larger variants for headers / empty states where the icon
   needs to read at glyph-replacement size, not text-inline size. */
.ui-ic-lg{width:1.4em;height:1.4em;vertical-align:middle;}
.ui-ic-xl{width:2.2em;height:2.2em;vertical-align:middle;}
/* Rolled-credits glyph reads slightly smaller than its siblings because
   the silhouette has more internal whitespace (slate body + open slat
   create vertical breathing room). Bump 10% so it matches the visual
   weight of the trophy and other badge icons next to it. */
.ui-ic-credits{transform:scale(1.155) translateY(-0.5px);transform-origin:center;}

/* ══════════════════════════════════════════
   HOME — Latest Reviews & Latest Discussions
   ══════════════════════════════════════════
   Quiet row list (not boxy cards) — keeps the home page scannable. Each
   row is clickable; hover lifts the title in accent green to telegraph
   the link state, matching the rest of the site's row-click patterns. */
.latest-list{display:flex;flex-direction:column;gap:1px;}
.lr-row{
  display:grid;grid-template-columns:36px 1fr auto;
  gap:14px;padding:12px 16px;background:var(--cd);
  cursor:pointer;transition:background .15s;
  align-items:center;
}
.lr-row:hover{background:rgba(255,255,255,.03);}
.lr-row:hover .lr-title,
.lr-row:hover .lr-game-name{color:var(--g);}
.lr-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;
  background:var(--d2);color:var(--tx);
  flex-shrink:0;
}
.lr-body{min-width:0;display:flex;flex-direction:column;gap:3px;}
.lr-meta{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.lr-author{color:var(--tx);}
.lr-game-name{color:var(--tx);transition:color .15s;}
.lr-on{color:var(--mu);}
.lr-sep{color:var(--mu);opacity:.5;}
.lr-time{color:var(--mu);}
.lr-snippet{
  font-size:.78rem;color:var(--mu);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.lr-title{
  font-family:'Barlow Condensed',sans-serif;font-size:.92rem;font-weight:700;
  letter-spacing:.5px;color:var(--tx);transition:color .15s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.lr-counts{
  font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:600;
  letter-spacing:1px;color:var(--mu);
  display:flex;align-items:center;gap:6px;margin-top:3px;
}
.lr-score{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;line-height:1;
  letter-spacing:.5px;
}
.lr-score-den{font-size:.6em;color:var(--mu);margin-left:1px;}

@media (max-width:768px){
  .lr-row{grid-template-columns:32px 1fr auto;gap:10px;padding:10px 12px;}
  .lr-av{width:32px;height:32px;font-size:.66rem;}
  .lr-score{font-size:1.2rem;}
}

/* ══════════════════════════════════════════
   REVIEWS PAGE — feed rows
   ══════════════════════════════════════════
   Mirrors the discussions feed visual rhythm: a score column on the
   left, body on the right with author + game + review text. Each row
   is clickable, navigating to the game page. */
.rv-row{
  display:grid;grid-template-columns:56px 1fr;gap:16px;
  padding:18px 18px;background:var(--cd);
  border-bottom:1px solid var(--br);
  cursor:pointer;transition:background .15s;
}
.rv-row:hover{background:rgba(255,255,255,.025);}
.rv-row:hover .rv-game-name{color:var(--g);}
/* Left column — avatar pinned to the top, score pinned to the bottom.
   space-between pushes them to the two corners so the body text on the
   right aligns against a clean vertical edge. */
.rv-left{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.rv-score{
  font-family:'Bebas Neue',sans-serif;font-size:2.1rem;line-height:1;
  letter-spacing:1px;
}
.rv-score-den{font-size:.45em;color:var(--mu);margin-left:1px;letter-spacing:.5px;}
.rv-body{min-width:0;display:flex;flex-direction:column;gap:6px;}
.rv-av{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.84rem;font-weight:700;
  background:var(--d2);color:var(--tx);
  flex-shrink:0;
}
.rv-author-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.rv-author{
  font-family:'Barlow Condensed',sans-serif;font-size:.84rem;font-weight:700;
  letter-spacing:.5px;color:var(--tx);
}
.rv-lvl{
  font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);
  padding:2px 7px;background:rgba(255,255,255,.04);
}
.rv-comp{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;line-height:1;
}
.rv-comp-plat{color:var(--gd);}
.rv-comp-cred{color:var(--tx);}
.rv-meta-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
}
.rv-game-name{color:var(--tx);transition:color .15s;}
.rv-sep{color:var(--mu);opacity:.5;}
.rv-plat{
  padding:2px 6px;background:rgba(255,255,255,.05);color:var(--mu);
  letter-spacing:1px;
}
.rv-hrs,.rv-time{color:var(--mu);}
.rv-text{
  font-size:.84rem;line-height:1.55;color:var(--tx);
  max-width:75ch;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:768px){
  .rv-row{
    grid-template-columns:44px 1fr;gap:12px;padding:14px;
  }
  .rv-score{font-size:1.7rem;}
  .rv-av{width:40px;height:40px;font-size:.78rem;}
  .rv-text{-webkit-line-clamp:3;font-size:.8rem;}
}

/* Reviews icon in the mobile bottom nav reads slightly heavier than the
   other line icons because the pencil-and-page silhouette is denser.
   Shrink it 10% so it sits at the same optical weight as its siblings. */
.mbn-item[data-mbn="reviews"] .mbn-svg{
  width:18.05px;height:18.05px;  /* 95% of 19px */
}

/* Deep-linked review highlight — gentle green pulse so the user knows
   where they landed without being jarring. Border swells, then fades. */
.rev-card-highlight{
  animation:rev-card-pulse 2.4s ease-out 1;
}
.cmt-highlight{animation:cmt-pulse 2.6s ease-out 1;border-radius:4px;}
@keyframes cmt-pulse{
  0%{background:rgba(45,201,128,0);}
  12%{background:rgba(45,201,128,.14);}
  100%{background:rgba(45,201,128,0);}
}
@keyframes rev-card-pulse{
  0%   {box-shadow:0 0 0 0   rgba(45,201,128,0);    border-color:var(--br);}
  10%  {box-shadow:0 0 0 4px rgba(45,201,128,.4);   border-color:var(--g);}
  100% {box-shadow:0 0 0 0   rgba(45,201,128,0);    border-color:var(--br);}
}

/* Platform indicator placeholder dot — used in browse filters, signup,
   and settings until official PlayStation/Xbox/Steam logos are dropped
   in. A small coloured circle keeps the row identifiable and the layout
   intact. */
.plat-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  flex-shrink:0;vertical-align:middle;
}

/* ══════════════════════════════════════════
   FOR YOU — home recommendation strip
   ══════════════════════════════════════════ */
.for-you-strip{
  padding:20px 0 4px;
  border-bottom:1px solid var(--br);
  background:linear-gradient(180deg, rgba(45,201,128,.04), transparent);
}
.fys-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px 14px;
}
.fys-hdr h3{
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--mu);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:color .2s;
}
.fys-hdr h3:hover{color:var(--g);}
.fys-hdr h3 .ui-ic{transform:translateY(0.3px);}
.fys-tune{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--mu);
  background:none;border:none;cursor:pointer;transition:color .2s;
}
.fys-tune:hover{color:var(--g);}
.fys-scroll{
  display:flex;gap:10px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding:0 28px 16px;
  scrollbar-width:none;align-items:flex-start;
}
.fys-scroll::-webkit-scrollbar{display:none;}
.fyc{
  flex:0 0 200px;width:200px;max-width:200px;min-width:0;scroll-snap-align:start;
  background:var(--cd);border:1px solid var(--br);cursor:pointer;
  transition:border-color .2s;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
/* Only apply the hover border on devices that actually hover (mouse).
   On touch, :hover sticks after a tap and leaves a stray highlighted
   border — scoping to (hover:hover) avoids that. */
@media (hover:hover){
  .fyc:hover{border-color:var(--g);}
}
.fyc-cover{
  height:96px;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;position:relative;border-bottom:1px solid var(--br);
}
.fyc-match{
  position:absolute;top:8px;right:8px;
  font-family:'Barlow Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  background:rgba(0,0,0,.7);color:var(--g);padding:3px 7px;
  backdrop-filter:blur(4px);
}
.fyc-body{padding:10px 12px 11px;min-width:0;overflow:hidden;}
.fyc-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.88rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;
}
.fyc-reason{
  font-size:.68rem;color:var(--mu);line-height:1.4;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:1.9em;
}
.fyc-foot{display:flex;align-items:baseline;justify-content:flex-start;gap:6px;}
.fyc-score{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;line-height:1;letter-spacing:.5px;}
.fyc-scorelbl{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);}

/* For You — logged-out teaser */
.for-you-teaser{
  padding:24px 28px;border-bottom:1px solid var(--br);
  background:linear-gradient(180deg, rgba(45,201,128,.06), transparent);
}
.fyt-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:1000px;margin:0 auto;flex-wrap:wrap;
}
.fyt-kicker{
  font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--g);margin-bottom:6px;
}
.fyt-headline{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:1px;margin-bottom:4px;}
.fyt-sub{font-size:.82rem;color:var(--mu);line-height:1.5;max-width:52ch;}

@media (max-width:768px){
  .fys-hdr{padding:0 16px 12px;}
  .fys-scroll{padding:0 16px 14px;}
  .fyc{flex:0 0 168px;width:168px;max-width:168px;}
  .fyc-cover{height:84px;font-size:2rem;}
  .for-you-teaser{padding:20px 16px;}
  .fyt-inner{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ══════════════════════════════════════════
   PROFILE — For You tab (tuning + recs)
   ══════════════════════════════════════════ */
.fy-tune-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  background:var(--cd);border:1px solid var(--br);
  padding:22px;margin-bottom:28px;
}
.fy-tune-lbl{
  font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--mu);
  margin-bottom:16px;
}
/* Sliders */
.fy-sliders{display:flex;flex-direction:column;gap:14px;}
.fy-slider-row{display:grid;grid-template-columns:90px 1fr 44px;align-items:center;gap:12px;}
.fy-slider-lbl{
  font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.5px;color:var(--tx);
}
.fy-slider{
  -webkit-appearance:none;appearance:none;
  height:4px;border-radius:2px;background:var(--d2);
  outline:none;cursor:pointer;
}
.fy-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--g);cursor:pointer;border:2px solid var(--d0);
}
.fy-slider::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--g);cursor:pointer;border:2px solid var(--d0);
}
.fy-slider-val{
  font-family:'Barlow Condensed',sans-serif;font-size:.74rem;font-weight:700;
  color:var(--mu);text-align:right;
}
/* Toggles */
.fy-toggles{display:flex;flex-direction:column;gap:10px;}
.fy-toggle{
  display:flex;align-items:flex-start;gap:12px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:4px 0;
}
.fy-toggle-knob{
  flex-shrink:0;width:38px;height:22px;border-radius:11px;
  background:var(--d2);border:1px solid var(--br);position:relative;
  transition:background .2s,border-color .2s;margin-top:1px;
}
.fy-toggle-knob::after{
  content:'';position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;background:var(--mu);
  transition:transform .2s,background .2s;
}
.fy-toggle.on .fy-toggle-knob{background:rgba(45,201,128,.25);border-color:var(--g);}
.fy-toggle.on .fy-toggle-knob::after{transform:translateX(16px);background:var(--g);}
.fy-toggle-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.fy-toggle-label{
  font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.5px;color:var(--tx);
}
.fy-toggle-hint{font-size:.68rem;color:var(--mu);line-height:1.4;}
/* Recs header */
.fy-recs-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.fy-recs-title{
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--mu);
}
.fy-reset{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
  background:none;border:none;cursor:pointer;transition:color .2s;
}
.fy-reset:hover{color:var(--g);}
/* Recs grid */
.fy-recs-grid{display:grid;grid-template-columns:repeat(auto-fill,160px);gap:12px;justify-content:start;}
.fy-rec{background:var(--cd);border:1px solid var(--br);cursor:pointer;transition:border-color .2s;-webkit-tap-highlight-color:transparent;min-width:0;overflow:hidden;}
@media (hover:hover){.fy-rec:hover{border-color:var(--g);}}
.fy-rec-cover{height:90px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;position:relative;border-bottom:1px solid var(--br);}
.fy-rec-match{
  position:absolute;top:6px;right:6px;
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.5px;background:rgba(0,0,0,.7);color:var(--g);
  padding:2px 6px;backdrop-filter:blur(4px);
}
.fy-rec-body{padding:9px 11px 11px;min-width:0;}
.fy-rec-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;
}
.fy-rec-reason{font-size:.66rem;color:var(--mu);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.85em;}
.fy-rec-score{font-family:'Bebas Neue',sans-serif;font-size:1.25rem;line-height:1;letter-spacing:.5px;}

@media (max-width:768px){
  .fy-tune-panel{grid-template-columns:1fr;gap:22px;padding:18px;}
  .fy-recs-grid{grid-template-columns:repeat(auto-fill,128px);}
}

/* ══════════════════════════════════════════
   PROFILE SHOWCASE — vertical front-page feed
   ══════════════════════════════════════════ */
.profile-showcase{
  padding:8px 0 4px;
  border-bottom:1px solid var(--br);
  margin-bottom:4px;
}
.sc-band{padding:14px 0 18px;border-bottom:1px solid rgba(255,255,255,.04);}
.sc-band:last-child{border-bottom:none;}
.sc-band-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px 12px;
}
.sc-band-title{
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--tx);
  display:inline-flex;align-items:center;gap:8px;
}
.sc-band-title .ui-ic{color:var(--mu);}
.sc-seeall{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);
  background:none;border:none;cursor:pointer;transition:color .2s;
}
.sc-seeall:hover{color:var(--g);}
.sc-scroll{
  display:flex;gap:10px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding:0 28px 4px;
  scrollbar-width:none;
  /* No scroll-snap here: on some mobile browsers snap-align:start snaps
     the first card to the container's content-box edge and visually
     eats the left padding, clipping the first tile off-screen. Plain
     scrolling keeps the 28/16px gutter intact. */
}
.sc-scroll::-webkit-scrollbar{display:none;}
.sc-card{
  flex:0 0 120px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sc-card-cover{
  width:120px;height:120px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;position:relative;border:1px solid var(--br);
  margin-bottom:8px;transition:border-color .2s;
}
@media (hover:hover){.sc-card:hover .sc-card-cover{border-color:var(--g);}}
.sc-card-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;
}
.sc-card-sub{font-size:.66rem;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-acc-badge{
  position:absolute;top:6px;right:6px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);border-radius:50%;backdrop-filter:blur(4px);
}
.sc-acc-plat{color:var(--score);}
.sc-acc-cred{color:var(--up);}
.sc-rev-score{
  position:absolute;bottom:6px;right:6px;
  font-family:'Bebas Neue',sans-serif;font-size:1.1rem;line-height:1;
  background:rgba(0,0,0,.7);padding:2px 6px;border-radius:4px;backdrop-filter:blur(4px);
}

/* ── Backlog tab ── */
.bk-count{
  font-family:'Barlow Condensed',sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
}
.bk-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.bk-row{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;
  padding:12px 14px;background:var(--cd);border:1px solid var(--br);
  border-left:3px solid var(--br);margin-bottom:2px;cursor:pointer;
  transition:background .15s,border-left-color .15s;
}
.bk-row:hover{background:rgba(255,255,255,.03);border-left-color:var(--g);}
.bk-cover{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;border:1px solid var(--br);border-radius:4px;
}
.bk-body{min-width:0;}
.bk-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;line-height:1.2;margin-bottom:2px;
}
.bk-meta{font-size:.72rem;color:var(--mu);margin-bottom:2px;}
.bk-added{font-size:.64rem;color:var(--mu);letter-spacing:.5px;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;font-weight:600;}
.bk-right{display:flex;align-items:center;gap:14px;}
.bk-score{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;line-height:1;letter-spacing:.5px;}
.bk-remove{
  background:none;border:none;color:var(--mu);font-size:.9rem;cursor:pointer;
  width:28px;height:28px;border-radius:50%;transition:all .2s;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bk-remove:hover{background:rgba(255,80,80,.12);color:var(--dn);}

@media (max-width:768px){
  .sc-band-hdr{padding:0 16px 10px;}
  .sc-scroll{padding:0 16px 4px;}
  .sc-card{flex:0 0 104px;}
  .sc-card-cover{width:104px;height:104px;font-size:2.2rem;}
  .bk-row{grid-template-columns:48px 1fr auto;gap:10px;padding:10px 12px;}
  .bk-cover{width:48px;height:48px;font-size:1.5rem;}
  .bk-right{gap:8px;}
  .sc-rev-expand{padding:0 16px;margin-top:10px;}
}

/* ── Reviews page: reviewer search box ── */
.rv-search{
  display:flex;align-items:center;gap:8px;
  background:var(--cd);border:1px solid var(--br);
  padding:8px 10px;transition:border-color .2s;
}
.rv-search:focus-within{border-color:var(--g);}
.rv-search-ic{display:inline-flex;color:var(--mu);flex-shrink:0;}
.rv-search-ic .ui-ic{width:0.95em;height:0.95em;}
.rv-search-input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--tx);font-family:'Barlow',sans-serif;font-size:.8rem;
}
.rv-search-input::placeholder{color:var(--mu);}
.rv-search-clear{
  background:none;border:none;color:var(--mu);cursor:pointer;font-size:.85rem;
  padding:0 2px;flex-shrink:0;transition:color .2s;
}
.rv-search-clear:hover{color:var(--dn);}

/* ── Profile showcase: inline review expand ── */
.sc-rev-card.sc-rev-active .sc-card-cover{border-color:var(--g);box-shadow:0 0 0 1px var(--g);}
.sc-rev-expand{width:100%;margin-top:12px;padding:0 28px;box-sizing:border-box;}
.scre-inner{
  background:var(--cd);border:1px solid var(--br);
  padding:16px 18px;
}
.scre-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.scre-game{display:flex;align-items:center;gap:10px;min-width:0;}
.scre-game-link{cursor:pointer;-webkit-tap-highlight-color:transparent;}
@media (hover:hover){.scre-game-link:hover .scre-name{color:var(--g);}}
.scre-name{transition:color .2s;}
.scre-cats{margin-bottom:14px;}
.scre-e{font-size:1.8rem;flex-shrink:0;}
.scre-name{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.15;}
.scre-meta{font-size:.7rem;color:var(--mu);font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;text-transform:uppercase;margin-top:2px;}
.scre-score{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:1;letter-spacing:1px;flex-shrink:0;}
.scre-den{font-size:.45em;color:var(--mu);margin-left:1px;}
.scre-text{font-size:.86rem;line-height:1.65;color:var(--tx);margin-bottom:14px;}
.scre-text p{margin:0 0 11px;}
.scre-text p:last-child{margin-bottom:0;}

/* ── Reviews page: inline username search on the sort row ── */
/* Styled to match the .fc sort pills but holds an input. Pushed to the
   right of the row via margin-left:auto. */
.fc-search{
  display:flex;align-items:center;
  margin-left:auto;position:relative;
  border:1px solid var(--br);background:none;
  padding:4px 10px;transition:border-color .2s;
  width:150px;box-sizing:border-box;flex:0 0 auto;
}
.fc-search:focus-within{border-color:var(--g);}
/* Input fills the whole box and is left-aligned, so the caret sits at the
   far left (at/under the magnifier) when focused. */
.fc-search-input{
  background:none;border:none;outline:none;
  width:100%;flex:1 1 auto;min-width:0;
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--tx);
  padding:0;
}
/* Magnifier + "USERNAME" overlay — centred over the empty box, ignores
   pointer events so clicks land on the input. Hidden once there's text. */
.fc-search-ph{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:6px;pointer-events:none;
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
  transition:opacity .12s;
}
.fc-search-ph .ui-ic{width:0.9em;height:0.9em;transform:translateY(0.2px);}
.fc-search.has-text .fc-search-ph{opacity:0;}
.fc-search-clear{
  background:none;border:none;color:var(--mu);cursor:pointer;font-size:.8rem;
  padding:0 0 0 6px;flex-shrink:0;transition:color .2s;line-height:1;
}
.fc-search-clear:hover{color:var(--dn);}

@media (max-width:768px){
  /* On the reviews/discussions sort row, all controls share one even gap
     and stay on a single line. The sort pills size to their text; the
     search box is the flexible element that absorbs the remaining width,
     so the gaps between every button are identical regardless of screen
     width. */
  #pg-reviews .feed-ctrl,
  #pg-forum .feed-ctrl{flex-wrap:nowrap;gap:7px;}
  #pg-reviews .feed-ctrl .fc,
  #pg-forum .feed-ctrl .fc{flex:0 0 auto;white-space:nowrap;padding:5px 8px;}
  #pg-reviews .feed-ctrl .fc-search,
  #pg-forum .feed-ctrl .fc-search{
    margin-left:0;flex:1 1 auto;width:auto;min-width:0;max-width:200px;
    padding:4px 8px;
  }
}

/* Reviewer search typeahead dropdown */
.fc-search-dd{
  position:absolute;top:calc(100% + 5px);right:0;
  min-width:200px;max-width:280px;
  background:var(--cd);border:1px solid var(--br);
  z-index:60;max-height:280px;overflow-y:auto;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.fcdd-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s;
}
.fcdd-item:last-child{border-bottom:none;}
.fcdd-item:hover{background:rgba(255,255,255,.05);}
.fcdd-handle{
  font-family:'Barlow Condensed',sans-serif;font-size:.84rem;font-weight:700;
  letter-spacing:.5px;color:var(--tx);
}
.fcdd-stage{font-size:.64rem;color:var(--mu);font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;white-space:nowrap;}
.fcdd-empty{padding:12px;font-size:.78rem;color:var(--mu);font-style:italic;}

/* ── For You: FS signal toggle (replaces the old sliders/toggles) ── */
.fy-fs-panel{margin-bottom:24px;}
.fy-fs-toggle{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  background:var(--cd);border:1px solid var(--br);cursor:pointer;text-align:left;
  padding:16px 18px;transition:border-color .2s;
}
.fy-fs-toggle:hover{border-color:rgba(45,201,128,.4);}
.fy-fs-toggle.on{border-color:var(--g);background:linear-gradient(180deg,rgba(45,201,128,.06),transparent);}
.fy-fs-knob{
  flex-shrink:0;width:42px;height:24px;border-radius:12px;
  background:var(--d2);border:1px solid var(--br);position:relative;
  transition:background .2s,border-color .2s;margin-top:1px;
}
.fy-fs-knob::after{
  content:'';position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;background:var(--mu);
  transition:transform .2s,background .2s;
}
.fy-fs-toggle.on .fy-fs-knob{background:rgba(45,201,128,.25);border-color:var(--g);}
.fy-fs-toggle.on .fy-fs-knob::after{transform:translateX(18px);background:var(--g);}
.fy-fs-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.fy-fs-label{
  font-family:'Barlow Condensed',sans-serif;font-size:.9rem;font-weight:700;
  letter-spacing:.5px;color:var(--tx);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;
}
.fy-fs-label svg{width:1em;height:1em;}
.fy-fs-logo{display:inline-flex;width:1.1em;height:1.1em;color:var(--g);}
.fy-fs-logo svg{width:100%;height:100%;}
.fy-fs-hint{font-size:.74rem;color:var(--mu);line-height:1.5;}

/* For You picks — score with Player/FS label */
.fy-rec-scorewrap{display:flex;align-items:baseline;gap:5px;}
.fy-rec-scorelbl{
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--mu);
}
.fy-recs-title{display:inline-flex;align-items:center;gap:7px;}
.fy-recs-title .ui-ic{color:var(--mu);width:0.95em;height:0.95em;}

/* ── Password field: eye toggle + strength meter ── */
.pw-field{position:relative;display:flex;align-items:center;}
.pw-field .pw-input{width:100%;padding-right:42px;}
.pw-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--mu);cursor:pointer;padding:0;
  transition:color .15s;-webkit-tap-highlight-color:transparent;
}
.pw-eye:hover{color:var(--tx);}
.pw-eye svg{width:18px;height:18px;}

.pw-meter{display:flex;gap:5px;margin-top:8px;}
.pw-meter .pw-bar{
  flex:1;height:4px;border-radius:2px;background:var(--d2);overflow:hidden;
}
.pw-meter .pw-bar span{display:block;height:100%;width:0;transition:width .2s,background .2s;}
/* Weak: first bar red */
.pw-meter.pw-lvl-1 .pw-bar:nth-child(1) span{width:100%;background:var(--dn);}
/* Medium: first two bars amber */
.pw-meter.pw-lvl-2 .pw-bar:nth-child(1) span,
.pw-meter.pw-lvl-2 .pw-bar:nth-child(2) span{width:100%;background:#d6a93b;}
/* Strong: all three green */
.pw-meter.pw-lvl-3 .pw-bar span{width:100%;background:var(--up);}

.pw-meter-label{
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;margin-top:5px;min-height:.9em;
}
.pw-meter-label.pw-lvl-1{color:var(--dn);}
.pw-meter-label.pw-lvl-2{color:#d6a93b;}
.pw-meter-label.pw-lvl-3{color:var(--up);}

.pw-match{
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.5px;margin-top:6px;min-height:.9em;color:var(--mu);
}
.pw-match.ok{color:var(--up);}
.pw-match.no{color:var(--dn);}
.pw-reqs{
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.3px;margin-top:5px;color:var(--mu);line-height:1.4;
}

/* ── Match-weight badge (now a tappable button) ── */
.match-weight{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--br);background:none;cursor:pointer;
  transition:border-color .15s,color .15s;-webkit-tap-highlight-color:transparent;
}
.match-weight .mw-star{width:0.9em;height:0.9em;}
.match-weight.mw-high{color:var(--up);border-color:rgba(74,158,92,.5);}
.match-weight.mw-med{color:var(--score);border-color:rgba(226,201,110,.5);}
.match-weight.mw-low{color:var(--mu);}
.match-weight:hover{border-color:currentColor;}

/* ── Match-weight modal ── */
.mwm-card{max-width:440px;}
.mwm-head{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.mwm-score{
  font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:.9;flex-shrink:0;
}
.mwm-score-d{font-size:1.1rem;color:var(--mu);}
.mwm-score.mw-high{color:var(--up);}
.mwm-score.mw-med{color:var(--score);}
.mwm-score.mw-low{color:var(--mu);}
.mwm-tier{
  font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;
}
.mwm-tier.mw-high{color:var(--up);}
.mwm-tier.mw-med{color:var(--score);}
.mwm-tier.mw-low{color:var(--mu);}
.mwm-who{font-size:.84rem;color:var(--tx);line-height:1.4;}
.mwm-intro{font-size:.8rem;color:var(--mu);line-height:1.6;margin-bottom:18px;}
.mwm-bars{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}
.mwm-row-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.mwm-row-label{font-size:.82rem;color:var(--tx);font-weight:500;}
.mwm-row-val{font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--tx);letter-spacing:.5px;}
.mwm-row-max{color:var(--mu);font-size:.8rem;}
.mwm-track{height:5px;border-radius:3px;background:var(--d2);overflow:hidden;}
.mwm-fill{height:100%;background:var(--g);border-radius:3px;transition:width .3s;}
.mwm-row-hint{font-size:.7rem;color:var(--mu);margin-top:4px;line-height:1.4;}
.mwm-notes{
  background:var(--cd);border:1px solid var(--br);padding:12px 14px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:6px;
}
.mwm-note{font-size:.76rem;color:var(--up);font-weight:500;}
.mwm-foot{font-size:.74rem;color:var(--mu);line-height:1.55;border-top:1px solid var(--br);padding-top:12px;}

/* ── Game search in reviews/discussions header ── */
.game-search{
  position:relative;display:flex;align-items:center;gap:8px;margin-top:14px;
  border:1px solid var(--br);background:var(--cd);padding:9px 12px;max-width:420px;
  transition:border-color .15s;
}
.game-search:focus-within{border-color:var(--g);}
.game-search-ic{color:var(--mu);width:1em;height:1em;flex-shrink:0;}
.game-search-input{
  flex:1;background:none;border:none;outline:none;color:var(--tx);
  font-family:'Barlow',sans-serif;font-size:.86rem;min-width:0;
}
.game-search-input::placeholder{color:var(--mu);}
.game-search-dd{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:var(--d1);border:1px solid var(--br);max-height:320px;overflow-y:auto;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.game-search-opt{
  display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  border-bottom:1px solid var(--br);transition:background .12s;
}
.game-search-opt:last-child{border-bottom:none;}
.game-search-opt:hover{background:var(--cd);}
.game-search-opt-e{font-size:1.1rem;flex-shrink:0;}
.game-search-opt-nm{font-size:.86rem;color:var(--tx);}
.game-search-empty{padding:12px;color:var(--mu);font-size:.82rem;}

/* ── Hot band (side-scrolling cover art) ── */
.hot-band{margin:0;padding:14px 16px 8px;border-bottom:1px solid var(--br);min-width:0;}
.hot-band-hdr{
  display:flex;align-items:center;gap:7px;
  font-family:'Barlow Condensed',sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-bottom:12px;
}
.hot-flame{color:inherit;width:1em;height:1em;}
.hot-scroll{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;max-width:100%;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;       /* Firefox — hide scrollbar */
  -ms-overflow-style:none;    /* old Edge */
}
.hot-scroll::-webkit-scrollbar{display:none;height:0;}
.hot-card{flex:0 0 122px;width:122px;cursor:pointer;}
.hot-card-cover{
  position:relative;width:122px;height:74px;border-radius:4px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  margin-bottom:7px;transition:transform .15s;
}
.hot-card:hover .hot-card-cover{transform:translateY(-2px);}
.hot-card-score,.hot-card-votes{
  position:absolute;bottom:5px;right:5px;
  font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.5px;
  background:rgba(0,0,0,.78);padding:1px 6px;border-radius:3px;line-height:1.2;
}
.hot-card-votes{font-size:.7rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;}
.hot-card-votes.hot-up{color:var(--up);}
.hot-card-votes.hot-down{color:var(--dn);}
.hot-card-nm{
  font-size:.78rem;color:var(--tx);font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hot-card-by{font-size:.7rem;color:var(--mu);margin-top:2px;}

/* discussions search box reuses .fc-search styles already defined */

/* ── Platform achievement sections (Accolades) ── */
.plat-ach-wrap{display:flex;flex-direction:column;gap:14px;margin:24px 0 8px;}
.plat-ach{background:var(--cd);border:1px solid var(--br);overflow:hidden;}
.plat-ach-hdr{
  display:flex;align-items:center;gap:9px;padding:11px 16px;
  border-bottom:1px solid var(--br);background:rgba(255,255,255,.02);
}
.plat-ach-logo{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.plat-ach-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--tx);
}
.plat-ach-id{margin-left:auto;font-size:.74rem;color:var(--mu);}

/* PSN trophies — same separator-cell layout as Xbox/Steam, with an official
   trophy icon above each count. */
.psn-stats .psn-cell{gap:6px;}
.psn-cell-ic{width:30px;height:34px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;}
.psn-cell-ic svg{width:100%;height:100%;}
.psn-level-ic{color:#c0744a;}

/* Xbox / Steam stat row */
.xbox-stats{display:flex;padding:8px 0;}
.xb-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 8px;border-right:1px solid var(--br);}
.xb-stat:last-child{border-right:none;}
.xb-stat-n{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:.5px;color:var(--tx);line-height:1;}
.xb-gs .xb-stat-n{color:#52b043;}
.xb-steam-lvl .xb-stat-n{color:#66c0f4;}
.xb-psn-lvl .xb-stat-n{color:#3a8fd6;}
.xb-stat-l{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);}

/* ── Profile-top trophy showcase ── */
.ph-stats-row{display:flex;align-items:center;gap:24px;}
.ph-stats-row .ph-stats{flex-shrink:0;}
.ph-trophy-showcase{
  display:flex;align-items:center;justify-content:flex-end;
  flex:1;min-width:0;margin-left:auto;
}
.pts-chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.pts-group{
  display:flex;align-items:center;
  padding:8px 12px;background:var(--cd);border:1px solid var(--br);
  border-left:3px solid var(--ptc);
}
.pts-chip{display:flex;flex-direction:column;gap:1px;min-width:74px;}
.pts-lvl{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.5px;color:var(--tx);line-height:1;}
.pts-sub{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);}
/* PSN trophy tiles — horizontal, icon + count */
.pts-tros{display:flex;align-items:center;gap:12px;}
.pts-tro{display:flex;align-items:center;gap:5px;}
.pts-tro-ic{width:22px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pts-tro-ic svg{width:100%;height:100%;}
.pts-tro-lvl .pts-tro-ic{color:#c0744a;}
.pts-tro-n{font-family:'Barlow',sans-serif;font-weight:700;font-size:.92rem;color:var(--tx);}

@media(max-width:760px){
  /* On mobile the top-of-profile trophy showcase is hidden entirely —
     trophies/achievements live only in the Accolades tab on small screens. */
  .ph-trophy-showcase{display:none !important;}
  .ph-stats-row{flex-direction:column;align-items:stretch;gap:0;}
}

/* Settings toggle knob (checkbox-driven) */
.set-knob{position:absolute;inset:0;background:var(--d2);border:1px solid var(--br);border-radius:10px;cursor:pointer;transition:.2s;}
.set-knob::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--mu);transition:.2s;}
input:checked + .set-knob{background:rgba(0,255,135,.25);border-color:var(--g);}
input:checked + .set-knob::after{transform:translateX(18px);background:var(--g);}

/* ── XP bar tappable hint ── */
.xp-bar-tap{cursor:pointer;transition:background .15s;}
.xp-bar-tap:hover{background:var(--cd);}

/* ── XP + Referral modal ── */
.xpm-card{max-width:460px;}
.xpm-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.xpm-level-badge{font-size:1.3rem;letter-spacing:3px;color:var(--score);flex-shrink:0;}
.xpm-xp-total{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;line-height:.9;color:var(--tx);}
.xpm-xp-total span{font-size:1.1rem;color:var(--mu);}
.xpm-sub{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin-top:2px;}
.xpm-prog-top{display:flex;justify-content:space-between;align-items:baseline;font-family:'Barlow Condensed',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tx);margin-bottom:6px;}
.xpm-prog-next{color:var(--mu);}
.xpm-track{height:6px;background:var(--d2);border-radius:3px;overflow:hidden;margin-bottom:20px;}
.xpm-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--bl));border-radius:3px;transition:width .4s ease;}
.xpm-maxed{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:1px;color:var(--score);text-align:center;padding:10px;background:rgba(226,201,110,.08);border:1px solid rgba(226,201,110,.3);margin-bottom:20px;}
.xpm-sect-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--mu);margin-bottom:10px;}
.xpm-srcs{display:flex;flex-direction:column;gap:0;margin-bottom:22px;}
.xpm-src{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.84rem;color:var(--tx);}
.xpm-src:last-child{border-bottom:none;}
.xpm-src-xp{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;color:var(--g);letter-spacing:.5px;}
.xpm-referral{background:var(--cd);border:1px solid var(--br);padding:16px;}
.xpm-ref-desc{font-size:.8rem;color:var(--mu);line-height:1.6;margin-bottom:14px;}
.xpm-ref-desc strong{color:var(--g);}
.xpm-code-row{display:flex;gap:8px;margin-bottom:14px;}
.xpm-code{flex:1;min-width:0;font-family:'Barlow',sans-serif;font-size:.74rem;letter-spacing:.3px;color:var(--tx);background:var(--d2);border:1px dashed var(--br);padding:10px 12px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.xpm-code-btn{padding:0 16px;background:none;border:1px solid var(--br);color:var(--tx);font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:border-color .15s;}
.xpm-code-btn:hover{border-color:rgba(255,255,255,.5);}
.xpm-share-btn{background:var(--g);color:var(--d0);border-color:var(--g);}
.xpm-share-btn:hover{background:var(--yl);}
.xpm-ref-stats{display:flex;gap:0;border-top:1px solid var(--br);padding-top:14px;margin-bottom:12px;}
.xpm-ref-stat{flex:1;text-align:center;border-right:1px solid var(--br);}
.xpm-ref-stat:last-child{border-right:none;}
.xpm-ref-n{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;line-height:1;color:var(--tx);}
.xpm-ref-l{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin-top:3px;}
.xpm-ref-note{font-size:.72rem;color:var(--mu);line-height:1.5;}
.xpm-ref-note strong{color:var(--tx);}

/* ── Share menu ── */
.sh-card{max-width:420px;}
.sh-opts{display:flex;flex-direction:column;gap:8px;}
.sh-opt{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:13px 15px;background:var(--cd);border:1px solid var(--br);
  cursor:pointer;transition:border-color .15s,background .15s;text-align:left;
}
.sh-opt:hover{border-color:rgba(255,255,255,.4);background:var(--d2);}
.sh-opt-ic{width:26px;height:26px;flex-shrink:0;color:var(--shc);display:flex;align-items:center;justify-content:center;}
.sh-opt-ic svg{width:100%;height:100%;}
.sh-opt-lbl{flex:1;font-family:'Barlow Condensed',sans-serif;font-size:.92rem;font-weight:600;letter-spacing:.5px;color:var(--tx);}
.sh-opt-arrow{color:var(--mu);font-size:1.3rem;line-height:1;}
.sh-back{background:none;border:none;color:var(--mu);font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:1px;cursor:pointer;padding:0;margin-bottom:4px;transition:color .15s;}
.sh-back:hover{color:var(--tx);}

/* Social card previews */
.sh-cardprev{
  border-radius:6px;padding:22px;margin-bottom:16px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:8px;min-height:160px;justify-content:center;
}
.sh-cardprev-ig{background:linear-gradient(135deg,#1a1a2e,#3d1d3d);border:1px solid var(--br);}
.sh-cardprev-tiktok{background:linear-gradient(135deg,#0c0c12,#10363a);border:1px solid var(--br);}
.sh-cardprev-logo{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:2px;color:#EDEDED;}
.sh-cardprev-logo span{color:#9a9a9a;}
.sh-cardprev-title{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;color:#fff;line-height:1.25;}
.sh-cardprev-tag{font-size:.78rem;color:rgba(255,255,255,.6);line-height:1.4;}
.sh-cardprev-badge{position:absolute;top:12px;right:12px;background:rgba(37,244,238,.18);color:#25f4ee;font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border-radius:3px;}
.sh-caption-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--mu);margin-bottom:8px;}
.sh-caption{background:var(--d2);border:1px solid var(--br);padding:12px 14px;font-size:.8rem;color:var(--tx);line-height:1.6;white-space:pre-wrap;margin-bottom:14px;max-height:160px;overflow-y:auto;}
.sh-card-actions{display:flex;gap:8px;margin-bottom:12px;}
.sh-card-note{font-size:.72rem;color:var(--mu);line-height:1.5;}

/* ── Browse: Featured band ── */
.browse-featured{margin-bottom:14px;}
/* The browse Trending band sits inside .browse-main's padding, so zero out
   its own horizontal padding to line up flush with the grid below it. */
#browseTrendingBand{padding-left:0;padding-right:0;border-bottom:none;margin-bottom:6px;}
#browseTrendingBand .hot-scroll{padding-left:0;padding-right:0;}
.bf-card{
  position:relative;overflow:hidden;cursor:pointer;
  border:1px solid var(--br);min-height:150px;
  display:flex;align-items:flex-end;
  transition:transform .2s;
}
.bf-card:hover{transform:translateY(-2px);}
.bf-emoji{position:absolute;top:50%;right:24px;transform:translateY(-50%);font-size:4.5rem;opacity:.85;}
.bf-inner{position:relative;z-index:1;padding:20px 22px;width:100%;
  background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.1));}
.bf-label{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#fff;margin-bottom:6px;}
.bf-name{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:1px;color:#fff;line-height:1;margin-bottom:4px;}
.bf-meta{font-size:.74rem;color:rgba(255,255,255,.6);margin-bottom:12px;}
.bf-scores{display:flex;gap:18px;}
.bf-score{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;line-height:1;color:#fff;display:flex;flex-direction:column;gap:2px;}
.bf-score-l{font-family:'Barlow Condensed',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);}

@media(max-width:640px){
  .bf-emoji{font-size:3rem;right:16px;}
  .bf-name{font-size:1.5rem;}
  .bf-score{font-size:1.25rem;}
}

/* @mention tag in comments / reviews */
.mention{color:var(--g);font-weight:600;cursor:pointer;text-decoration:none;}
.mention:hover{text-decoration:underline;}

/* @mention type-ahead dropdown */
.mention-dd{
  position:absolute;z-index:3000;background:var(--d1);border:1px solid var(--br);
  box-shadow:0 10px 30px rgba(0,0,0,.5);max-height:240px;overflow-y:auto;min-width:180px;
}
.mention-opt{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;transition:background .12s;}
.mention-opt:hover{background:var(--cd);}
.mention-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:800;color:#fff;flex-shrink:0;}
.mention-h{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.5px;color:var(--tx);font-size:.86rem;}