:root{
  /* v15 Assay: rectangular data surfaces; violet = match & rarity identity (borders +
     <=12% tints, never large fills); amber stays review positivity + actions;
     teal locked to freshness; coral locked to warnings */
  --bg:#0f0e12; --surface:#1a1920; --surface-elevated:#242233; /* elevated carries the +4 blue shift */
  --border:#36333e; --border-subtle:#201e26;
  --text-primary:#f2f0ed; --text-secondary:#a5a0a8;
  --accent:#ffcf5c; --accent-pressed:#e8b84a;
  --gem:#ffcf5c; --gem-light:#ffe28a; --gem-bg:rgba(255,207,92,.09);
  /* coral lifted from #e3414f: at 11px on the rail surface it measured 4.27:1, under AA.
     It carries the zero-count marker, which is the design's most load-bearing signal. */
  --freshness:#3fd4b4; --warning:#e85463; --link:#8a83e0; --on-accent:#231d10;
  --match:#8a83e0; --match-strong:#6b63c8; --match-likely:#5c58b2; --match-distant:#3d3978;
  --violet-tint:rgba(122,114,224,.10); --chart-grid:#26232e;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;
  --nav-h:67px; /* measured height of the sticky nav; .cmptray sticks below it */
  --r-sm:0px; --r-md:0px; --r-lg:0px; --r-pill:0px;
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{
  --bg:#f4f2ef; --surface:#ffffff; --surface-elevated:#ece9f0;
  --border:#d6d2cc; --border-subtle:#e5e1db;
  --text-primary:#201b17; --text-secondary:#6b655e;
  --accent:#7d5a10; --accent-pressed:#6a4c0d; /* 6.28:1 on #fff, 5.23:1 on elevated — AA at 13px (was #a8791a, 3.88:1) */
  --gem:#7d5a10; --gem-light:#8f6512; --gem-bg:rgba(125,90,16,.08);
  --freshness:#1c7361; /* 5.11:1 on bg, 4.76:1 on elevated — AA (was #238f7a, 3.56:1) */
  --warning:#c9303e; --link:#5c53c4; --on-accent:#ffffff;
  --match:#5c53c4; --match-strong:#4a42a8; --match-likely:#3d3690; --match-distant:#8a86b8;
  --violet-tint:rgba(92,83,196,.08); --chart-grid:#ddd8d1;
}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip} /* the 100vw hero texture layer must not add a horizontal scrollbar (clip, not hidden — hidden would break the sticky nav) */
/* flex column + main{flex:1 0 auto} is the sticky footer: on short views (empty watchlist,
   an error state) the footer sits on the viewport bottom instead of floating mid-screen.
   width:100% on main is load-bearing — main has margin:0 auto, and an auto cross-axis
   margin disables align-self:stretch, so without it main collapses to shrink-to-fit
   (measured: watchlist main 1353.6px -> 765px, leaving the footer wider than the content). */
body{background:var(--bg);color:var(--text-primary);font-family:Ubuntu,'Segoe UI',system-ui,sans-serif;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;transition:background .3s ease-out,color .3s ease-out}
.mono{font-family:'Ubuntu Mono',ui-monospace,monospace}
a{color:var(--link);text-decoration:none}
button{font-family:inherit;cursor:pointer}
:is(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--gem);outline-offset:2px;border-radius:var(--r-sm)}

nav{display:flex;align-items:center;gap:26px;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);z-index:5}
.brand{display:flex;align-items:center;gap:10px}
.wordmark{font-size:20px;letter-spacing:.4px}
.navlinks{display:flex;gap:22px;font-size:14px;align-items:center}
.navlinks a{color:var(--text-secondary);padding:4px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.navlinks a:hover{color:var(--text-primary)}
.navlinks a.active{color:var(--text-primary);border-bottom-color:var(--gem)}
.navright{margin-left:auto;display:flex;gap:12px;align-items:center}
@media(max-width:560px){nav{gap:14px}nav.ttabs{gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}nav.ttabs::-webkit-scrollbar{display:none}.navlinks{gap:12px}}
@media(max-width:430px){nav{gap:10px;padding:12px 14px}.wordmark{display:none}.navlinks{gap:10px;font-size:13px}:root{--nav-h:59px}}
#themeToggle{background:none;border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--r-sm);padding:5px 12px;font-size:13px;transition:all .15s}
#themeToggle:hover{color:var(--text-primary);border-color:var(--gem)}

main{width:min(1360px, 100% - 32px);max-width:none;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-6);flex:1 0 auto}
/* 'backwards', not 'both': 'both' persists the final keyframe, and a keyframed transform:none
   still computes to an identity matrix, which makes this a containing block and silently kills
   position:sticky on the filter rail inside it. 'backwards' applies only the pre-animation state,
   so the element ends on its own styles with no transform. Same visual. */
main>*{animation:viewEnter .35s var(--ease) backwards}
@keyframes viewEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.viewsub{font-size:13px;color:var(--text-secondary);margin:var(--sp-1) 0 var(--sp-4);line-height:1.7;max-width:80ch}
.viewsub .t{color:var(--freshness)}
h1{font-size:24px;font-weight:700;letter-spacing:-.3px;margin-top:var(--sp-1)}
h2.rowhead{font-size:17px;color:var(--text-primary);margin:var(--sp-6) 0 var(--sp-1);font-weight:700;border-left:3px solid var(--gem);padding-left:10px;letter-spacing:-.2px}
.rowlogic{font-size:13px;font-weight:400;color:var(--text-secondary);margin:0 0 var(--sp-3) 13px;max-width:65ch;line-height:1.5}

/* cards — quiet hover (v12: sheen sweep removed everywhere except the game-page
   hero's one-time pass; loading shimmer stays as the loading signal) */
.card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color .2s ease-out,transform .2s var(--ease),box-shadow .2s ease-out}
.card:hover{border-color:color-mix(in srgb, var(--gem) 60%, var(--border));transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.3),0 2px 10px color-mix(in srgb, var(--gem) 8%, transparent)}
@keyframes sweep{to{transform:translateX(101%)}}

/* discover rows: hidden scrollbar + edge click-nav + entrance stagger */
.rowwrap{position:relative;margin:0 calc(-1*var(--sp-5))}
.rnav{position:absolute;top:4px;bottom:14px;width:48px;z-index:3;display:flex;align-items:center;justify-content:center;border:0;padding:0;cursor:pointer;color:var(--text-secondary);font-size:34px;line-height:1;opacity:0;pointer-events:none;transition:opacity .15s ease-out,color .15s,transform .15s var(--ease)}
.rnav-l{left:0;background:linear-gradient(90deg,var(--bg) 30%,transparent)}
.rnav-r{right:0;background:linear-gradient(270deg,var(--bg) 30%,transparent)}
.rnav.on{opacity:.65;pointer-events:auto}
.rowwrap:hover .rnav.on,.rnav.on:focus-visible{opacity:1}
.rnav.on:hover{color:var(--gem)}
.rnav-l.on:hover{transform:translateX(-2px)}
.rnav-r.on:hover{transform:translateX(2px)}
.rowwrap.gridopen .rnav{display:none}
.hrow{display:flex;gap:16px;overflow-x:auto;padding:4px var(--sp-5) 14px;scroll-snap-type:x proximity;scroll-padding:0 var(--sp-5);scrollbar-width:none;-ms-overflow-style:none}
.hrow::-webkit-scrollbar{display:none}
.gcard{flex:0 0 230px;scroll-snap-align:start;padding:0;cursor:pointer;opacity:0;animation:cardEnter .3s var(--ease) forwards;animation-delay:calc(var(--i,0)*20ms);display:flex;flex-direction:column}
@keyframes cardEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.gcover{aspect-ratio:231/87;border-radius:var(--r-md) var(--r-md) 0 0;display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;flex:none}
.gcover img{opacity:0;transition:opacity .35s ease-out}
.gcover img.ld{opacity:1}
.gbody{padding:12px 14px;display:flex;flex-direction:column;flex:1;gap:3px}
.gtitle{font-size:14px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gdev{font-size:12px;font-weight:500;color:var(--text-secondary)}
.gsig{margin-top:auto;padding-top:9px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-height:62px;overflow:hidden}
.b-teal{font-size:11px;font-weight:500;color:var(--freshness);border:1px solid color-mix(in srgb, var(--freshness) 55%, transparent);background:rgba(63,212,180,.08);border-radius:2px;padding:2px 10px}
.b-coral{font-size:11px;font-weight:500;color:var(--warning);border:1px solid color-mix(in srgb, var(--warning) 55%, transparent);background:rgba(227,65,79,.08);border-radius:2px;padding:2px 10px}
.b-dim{font-size:11px;font-weight:500;color:var(--text-secondary);border:1px solid var(--border);background:var(--surface-elevated);border-radius:2px;padding:2px 10px}

/* ===== Assay score system: the match SQUARE (violet identity) vs the amber review number.
   The two can never be confused: match = violet-bordered square, review = bare amber
   mono number with a thin understroke. Review pill is dead (v15). ===== */
.msq{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--match);color:var(--text-primary);font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;line-height:1;flex:none}
.msq.t-str{border-color:var(--match-strong)} .msq.t-lik{border-color:var(--match-likely)}
.msq.t-dis{border-color:var(--match-distant)} .msq.t-none{border-color:var(--border);color:var(--text-secondary)}
.msq-44{width:44px;height:44px;font-size:18px}
.msq-72{width:72px;height:72px;font-size:28px}
.msq-36{width:36px;height:36px;font-size:14px}
.msq-32{width:32px;height:32px;font-size:13px}
.tierword{font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--match)}
.tierword.t-str{color:var(--match-strong)} .tierword.t-lik{color:var(--match-likely)} .tierword.t-dis{color:var(--match-distant)}
.msq-wrap{display:flex;flex-direction:column;gap:4px;align-items:center;flex:none}
.msq-wrap.w-36{flex-direction:row;gap:8px} /* explore rows: tier word right of the square */
.card .msq-badge{position:absolute;top:6px;right:6px;z-index:2}
.msq-badge+.cmpbtn{right:56px} /* keep compare toggle clear of the match badge */
.rev{display:inline-flex;flex-direction:column;gap:3px;min-width:0}
.rev .n{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;color:var(--gem)}
.rev .n small{font-family:Ubuntu;font-weight:500;color:var(--text-secondary);font-size:max(11px,.72em);margin-left:5px}
.rev .track{height:2px;background:var(--border);position:relative;width:100%}
.rev .track i{position:absolute;left:0;top:0;bottom:0;background:var(--gem)}
.rev-13 .n{font-size:13px} .rev-28 .n{font-size:26px}
.rev-plain{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;color:var(--gem);font-size:12px}
.spark{display:block;flex:none}
.spark polyline{fill:none;stroke:var(--gem);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spark.violet polyline{stroke:var(--match-likely)}
.spark .dot{fill:var(--gem)} .spark.violet .dot{fill:var(--match-likely)}
.spark.sparse polyline{stroke-dasharray:4 3}
.scorerow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:8px;margin-top:auto;min-height:28px}
.chip{font-size:12px;font-weight:500;padding:2px 8px;border:1px solid var(--border);color:var(--text-secondary);background:var(--surface-elevated);border-radius:2px}
.chip-rare{border-color:var(--match-likely);color:var(--match);background:var(--violet-tint)}
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:44px;overflow:hidden}

/* landing — buried-motif pattern field (tiles infinitely, cannot clip); no glow layer —
   the art's own opacity carries the gradient (radial fade around the content panel) */
.hero-land{position:relative;overflow:visible;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--sp-6) + var(--sp-5)) 0 var(--sp-5);background:var(--bg);margin:calc(-1*var(--sp-5)) calc(-1*var(--sp-5)) 0}
.hero-land .pat{position:absolute;top:-67px;height:800px;left:50%;margin-left:-50vw;width:100vw;pointer-events:none;overflow:hidden;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.68) 58%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.11) 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.68) 58%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.11) 86%,transparent 100%)}
.hero-land .p{position:absolute;color:var(--text-primary);will-change:transform}
.hero-land .p svg{display:block}
@keyframes fall{from{transform:translate3d(0,-70px,0) rotate(var(--r0))}to{transform:translate3d(var(--dx),870px,0) rotate(var(--r1))}}
.glint{position:absolute;left:var(--gx,50%);top:var(--gy,50%);width:var(--gs);height:var(--gs);margin:calc(var(--gs)/-2) 0 0 calc(var(--gs)/-2);pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.5) 24%,transparent 62%);animation:twinkle var(--tdur) ease-in-out var(--tdelay) infinite}
.glint::before,.glint::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.9)}
.glint::before{width:var(--gs);height:1.4px;transform:translate(-50%,-50%)}
.glint::after{width:1.4px;height:var(--gs);transform:translate(-50%,-50%)}
@keyframes twinkle{0%,88%{opacity:0;transform:scale(.4)}92%{opacity:1;transform:scale(1)}96%{opacity:.5;transform:scale(.8)}100%{opacity:0;transform:scale(.4)}}
.hero-land>*:not(.pat){position:relative;z-index:1}
/* The rule above makes every hero child its own stacking context at z-index 1, which sealed
   .sug's z-index:15 inside .funnel — so .try and .statline, siblings at the same level and
   later in DOM order, painted their chips and stat text straight through the open dropdown.
   4 clears those siblings and the card internals (2-3) while staying under the sticky nav (5),
   so the dropdown covers the page without ever riding over the header on scroll. */
.hero-land>.funnel{z-index:4}
[data-theme="light"] .hero-land .p{color:var(--text-primary);opacity:.85}
[data-theme="light"] .glint{background:radial-gradient(circle,rgba(90,70,20,.55) 0%,transparent 62%)}
[data-theme="light"] .glint::before,[data-theme="light"] .glint::after{background:rgba(90,70,20,.5)}
.hero-land .lockup{display:flex;align-items:center;gap:16px}
.hero-land .bigword{font-size:52px;font-weight:400;letter-spacing:1px}
.hero-land .tag{color:var(--text-secondary);font-size:14px;letter-spacing:2px;margin:14px 0 var(--sp-6)}
.funnel{width:min(640px,100%);display:flex;gap:var(--sp-2)}
.funnel .searchbox{height:54px;border-radius:var(--r-pill);font-size:17px}
.funnel .digbtn{height:54px;padding:0 26px;font-size:16px}
.try{margin:var(--sp-3) 0 var(--sp-2);font-size:13px;color:var(--text-secondary);display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;justify-content:center}
.statline{margin-top:var(--sp-5);font-size:12px;font-weight:500;color:var(--text-secondary);display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.statline b{color:var(--gem)}
.statline .t{color:var(--freshness)}
.teaserhead{display:flex;align-items:baseline;gap:12px;margin:var(--sp-5) 0 var(--sp-1)}
.teaserhead a{font-size:13px}

/* userbar */
.udivider{width:1px;height:20px;background:var(--border);margin:0 2px}
.uchip{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:50%;width:34px;height:34px;color:var(--text-secondary);transition:border-color .15s,color .15s,transform .3s var(--ease)}
.uchip:hover svg{transform:rotate(45deg)}
.uchip svg{transition:transform .3s var(--ease)}
.uchip:hover{border-color:var(--gem);color:var(--text-primary)}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
/* z-index:20 orders this only WITHIN nav, which is itself a stacking context at z-index:5 —
   it cannot lift the menu above #scrim (8) or #panel (9), and should not: a modal covering
   the nav is correct. Verified latent, not live: the scrim sits at opacity:0 with
   pointer-events:none at rest, and the menu's rows hit-test reachable. Raising nav to beat
   the modal layers would break the modal, so leave it — and do not read this 20 as global. */
.umenu{position:absolute;top:54px;right:24px;width:250px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;z-index:20;display:none;transform-origin:top right}
.umenu.open{display:block;animation:menuIn .18s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.umenu .uname{font-weight:700;font-size:14px}
.umenu .usub{font-size:12px;color:var(--text-secondary);margin:3px 0 12px;line-height:1.5}
.umenu .urow{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:7px 0;border-top:1px solid var(--border-subtle)}
.umenu .urow .mono{color:var(--gem)}
.usignin{width:100%;margin-top:12px;border:1px dashed var(--border);background:none;color:var(--text-secondary);border-radius:var(--r-sm);padding:8px;font-size:12px;cursor:not-allowed}

/* search + suggestions */
/* min-width:0 on the flex child: the input's intrinsic width kept .searchbox from
   shrinking, so .digbtn was pushed 20px past the viewport and Explore scrolled sideways
   on every phone. Pre-existing since v21; fixed here because it is on the page. */
.searchrow{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2);min-width:0}
.searchrow .digbtn{flex:none}
.searchbox{flex:1;min-width:0;position:relative;display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:0 20px;height:44px;transition:border-color .15s,box-shadow .15s}
.searchbox:focus-within{border-color:var(--gem);box-shadow:0 0 0 3px var(--gem-bg)}
/* min-width:0 again, one level down: the input's intrinsic width (231 px) ran out of a 142 px .searchbox and under the
   Find-games button on the 320 px home page (measured 2026-09-30) — the box clips its own text instead */
.searchbox input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text-primary);font-size:15px;font-family:inherit}
/* the wrapper already shows focus (amber border + halo on :focus-within); without this the
   global :focus-visible rule paints a second amber ring on the inner input — its (0,2,0)
   beats the (0,1,1) of `.searchbox input{outline:none}` above, so it needs the same weight */
.searchbox input:focus-visible{outline:none}
.searchbox input::placeholder{color:var(--text-secondary)}
.sug:empty{display:none}
.sug{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;overflow-y:auto;max-height:60vh;z-index:15;transform-origin:top center}
.sug:not(:empty){animation:menuIn .18s var(--ease)}
.sugrow{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text-primary);font-size:14px;padding:9px 16px;transition:background .12s}
.sugrow:hover{background:var(--surface)}
.sugrow .dim{color:var(--text-secondary);font-size:12px}
.digbtn{background:var(--gem);color:var(--on-accent);border:none;border-radius:var(--r-sm);padding:0 20px;height:44px;font-size:14px;font-weight:700;transition:background .15s,transform .15s var(--ease)}
.digbtn:hover{background:var(--gem-light)}
.digbtn:active{transform:scale(.97)}
.digbtn.loading{pointer-events:none;animation:btnPulse 1s ease-in-out infinite}
@keyframes btnPulse{0%,100%{opacity:.7}50%{opacity:1}}
.starters{display:flex;gap:var(--sp-2);margin:6px 0 var(--sp-3);flex-wrap:wrap;align-items:center}
.starters .lbl{font-size:12px;font-weight:500;color:var(--text-secondary)}
.seedchip{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:2px;padding:4px 13px;font-size:13px;transition:all .15s}
.seedchip:hover{border-color:var(--gem);color:var(--text-primary);transform:translateY(-1px)}
.chipbtn{border:1px solid var(--border);background:none;color:var(--text-secondary);border-radius:2px;padding:4px 13px;font-size:12px;transition:all .15s}
.chipbtn.on{background:var(--gem);border-color:var(--gem);color:var(--on-accent)}

/* omni-css */
.omni{flex:0 1 360px;min-width:0;position:relative;margin:0 var(--sp-3)}
#omniIn{height:36px;font-size:15px;background:var(--surface);border:1px solid var(--text-secondary);padding:0 12px;width:100%;color:var(--text-primary);font-family:inherit;border-radius:0}
#omniIn:focus{border-color:var(--gem);outline:none}
.omnilist{width:100%;max-height:none}
.omnilist .sugrow{display:flex;align-items:center;gap:10px;font-size:14px;min-height:36px}
.sugart{width:46px;height:17px;object-fit:cover}
.sugrow.like{color:var(--link);padding-left:24px;border-left:2px solid var(--link)}
.suggrp{font-size:14px;color:var(--text-secondary);padding:6px 16px 2px}
.sugrow[aria-selected=true]{background:var(--violet-tint);box-shadow:inset 3px 0 var(--gem)}
#omniBtn{display:none}
@media(min-width:561px){#omniBtn{display:none!important}}
@media(max-width:560px){
  .omni{display:none}
  #omniBtn{display:inline-flex}
  body.omni-open .omni{display:block;position:fixed;top:0;left:0;right:0;height:var(--nav-h);padding:12px;background:var(--surface);z-index:30}
  body.omni-open #omniClose{display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;align-items:center;justify-content:center;background:none;border:none;color:var(--text-primary);font-size:18px;cursor:pointer}
  body.omni-open .omnilist{position:fixed;top:var(--nav-h);left:0;right:0;max-height:calc(100vh - var(--nav-h));overflow-y:auto;z-index:30}
}
.ctabtn{display:inline-flex;align-items:center;height:44px;padding:0 16px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:700;line-height:1;text-decoration:none;border:none;cursor:pointer;border-radius:0}
.ctabtn:hover{filter:brightness(1.08)}
/* long game names: the CTA grows instead of spilling out of a fixed 44px box */
.ctabtn{height:auto;min-height:44px;line-height:1.25;padding:10px 16px;text-align:center}
.navlinks{flex:none}
@media(max-width:900px){.omni{flex:1 1 200px}}
#omniIn:focus-visible,.sugrow:focus-visible,.ctabtn:focus-visible,#omniBtn:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* explore */
.trail{font-size:12px;font-weight:500;color:var(--text-secondary);margin:0 0 var(--sp-3);display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.trail button{background:none;border:none;color:var(--link);font-size:12px;padding:1px 2px}
.trail button:hover{color:var(--gem)}
.trail .cur{color:var(--text-primary);font-weight:700}
.seedcard{display:flex;gap:14px;align-items:center;padding:13px 16px;margin-bottom:6px;background:var(--surface-elevated) !important;border-left:3px solid var(--gem) !important}
.seedcover{width:80px;height:46px;border-radius:var(--r-sm);flex:none;display:flex;align-items:center;justify-content:center;font-size:19px;overflow:hidden}
.livenote{font-size:12px;font-weight:500;color:var(--freshness);margin:6px 2px var(--sp-3)}
.ngrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media(max-width:720px){.ngrid{grid-template-columns:1fr}}
.ncard{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;cursor:pointer;opacity:0;animation:cardEnter .3s var(--ease) forwards;animation-delay:calc(var(--i,0)*18ms)}
.ncover{width:62px;height:36px;border-radius:var(--r-sm);flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;overflow:hidden}
.nbody{flex:1;min-width:0}
.ncard .gtitle{white-space:nowrap;display:block;-webkit-line-clamp:unset}
.nwhy{font-size:12px;font-weight:500;color:var(--text-secondary);margin-top:3px;line-height:1.5}
.nwhy .rare{color:var(--gem);font-weight:700}
.nmeta{font-size:12px;font-weight:500;margin-top:4px;color:var(--freshness)}
.nright{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.tier{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.tier.normal{color:var(--text-secondary)}
.hopbtn{border:1px solid var(--border);background:none;color:var(--link);border-radius:var(--r-md);padding:4px 11px;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}
.hopbtn:hover{border-color:var(--gem);color:var(--text-primary)}

/* watchlist */
.changed{border:1px solid var(--border);border-left:3px solid var(--freshness);border-radius:var(--r-md);padding:14px 18px;margin-bottom:var(--sp-3);background:var(--surface)}
.changed h3{font-size:13px;color:var(--freshness);letter-spacing:.3px;text-transform:uppercase;margin-bottom:9px}
.chline{font-size:13px;margin:5px 0}
.chline .t{color:var(--freshness)} .chline .w{color:var(--warning)}
.wrow{display:flex;gap:14px;align-items:center;padding:14px 16px;margin-bottom:14px;cursor:pointer;opacity:0;animation:cardEnter .3s var(--ease) forwards;animation-delay:calc(var(--i,0)*30ms)}
.star{background:none;border:none;color:var(--text-secondary);font-size:15px;padding:2px 5px;border-radius:var(--r-sm);transition:color .15s,transform .15s var(--ease)}
.star.on{color:var(--gem)}
.star:active{transform:scale(1.25)}
.emptyw{text-align:center;color:var(--text-secondary);padding:50px 0 40px;font-size:15px}
.emptyw .big{font-size:18px;color:var(--text-primary);margin:14px 0 6px}
.cta{display:inline-block;margin-top:14px;background:var(--gem);color:var(--on-accent);border:none;border-radius:var(--r-sm);padding:9px 18px;font-size:13px;font-weight:700;transition:background .15s}
.cta:hover{background:var(--gem-light)}
.apierr{color:var(--text-secondary);font-size:13px;padding:20px 4px}

/* detail panel */
#scrim{position:fixed;inset:0;background:rgba(6,5,15,.6);opacity:0;pointer-events:none;transition:opacity .25s ease-out;z-index:8}
#scrim.open{opacity:1;pointer-events:auto}
#panel{position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);background:var(--surface);border-left:1px solid var(--border);transform:translateX(102%);transition:transform .3s var(--ease);z-index:9;overflow-y:auto;padding:22px 24px}
#panel.open{transform:none}
#panel.open>*{animation:panelIn .3s ease-out both}
#panel.open>*:nth-child(2){animation-delay:50ms}#panel.open>*:nth-child(3){animation-delay:90ms}#panel.open>*:nth-child(4){animation-delay:120ms}#panel.open>*:nth-child(n+5){animation-delay:150ms}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#panel .close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:20px;z-index:2}
.dhero{height:150px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:48px;margin-bottom:14px;background:var(--surface-elevated);overflow:hidden}
.dtitle{font-size:20px;font-weight:700}
.ddev{font-size:13px;color:var(--text-secondary);margin:2px 0 10px}
.dsec{font-size:13px;color:var(--gem);font-weight:700;margin:18px 0 8px;letter-spacing:.2px;border-bottom:1px solid var(--border-subtle);padding-bottom:5px}
.dwhy{font-size:13px;line-height:1.7;max-width:70ch}
.dwhy .t{color:var(--freshness)} .dwhy .w{color:var(--warning)}
.dtags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.dsim{display:flex;gap:8px;flex-wrap:wrap}
.simchip{border:1px solid var(--border);background:var(--surface-elevated);color:var(--text-primary);border-radius:var(--r-md);padding:8px 12px;font-size:12px;text-align:left;transition:border-color .15s,transform .15s var(--ease)}
.simchip:hover{border-color:var(--gem);transform:translateY(-1px)}
.simchip .m{color:var(--match);font-family:'Ubuntu Mono',monospace;font-weight:700} /* match % = violet identity */
.watchbtn{width:100%;margin-top:20px;border-radius:var(--r-sm);padding:11px;font-size:14px;font-weight:700;border:1px solid var(--gem);background:var(--gem);color:var(--on-accent);transition:all .15s}
.watchbtn.on{background:transparent;color:var(--gem)}
.watchbtn:active{transform:scale(.98)}
.watchbtn.pop{animation:watchConfirm .4s ease-out}
@keyframes watchConfirm{0%{transform:scale(1)}30%{transform:scale(1.04)}60%{transform:scale(.98)}100%{transform:scale(1)}}
.steam{display:block;text-align:center;margin-top:12px;font-size:13px}

/* skeletons — layout-true silhouettes with shimmer */
/* Card silhouettes reuse the REAL card classes (.card.gcard > .gcover + .gbody), so
   width, the 231/87 cover ratio, the spotlight first child and every breakpoint step
   track the live card automatically instead of drifting. .skl only neutralises the
   entrance animation and paints the placeholder bars. Bar heights are set in `em`
   against each parent's own font-size, so each one occupies exactly the line box its
   real counterpart would: measured 1280px spotlight card = 2 + cover 127.3 + gbody
   134.05 (24 pad + title 20.8 + 3 + dev 17.25 + 3 + scorerow 32.5 + 8 + 3 + chips
   22.5) = 263.34px, matching the loaded row to the pixel. */
.skl{opacity:1;animation:none;cursor:default;pointer-events:none;user-select:none}
.skl .gcover{background:var(--surface-elevated)}
.skl .sb{display:block;width:100%;border-radius:2px;
  background:linear-gradient(var(--surface-elevated),var(--surface-elevated)) no-repeat left center;
  background-size:100% 9px}
.skl .gtitle .sb{height:1.3em}                       /* .gtitle line-height:1.3 */
.skl .gdev .sb{height:1.5em;background-size:100% 8px} /* 11.5px font, 17.25px line box */
.skl .scorerow .sb{width:46px;height:24.5px;background-size:46px 13px;background-position:left bottom 4px}
.skl .chiprow .sb{height:22.5px;background-size:100% 100%;opacity:.55}
/* the spotlight card is 340px wide at 16px, so its title lands on one line in practice —
   drop the second bar there or the silhouette row stands 20.8px taller than the loaded one */
.hrow:not(.asgrid) .skl:first-child .gtitle .sb:nth-child(2){display:none}
.skl-row{display:flex;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--surface);margin-bottom:10px}
.skl-thumb{width:62px;height:36px;border-radius:var(--r-sm);background:var(--surface-elevated);flex:none}
.skl-fill{flex:1}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,color-mix(in srgb, var(--gem) 5%, transparent) 45%,color-mix(in srgb, var(--gem) 8%, transparent) 55%,transparent 80%);animation:shim 2.2s ease-in-out infinite}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.rotnote{color:var(--freshness);font-size:12px;font-weight:500;white-space:nowrap}
[data-rotnote]:empty{display:none}

/* row controls */
.rowhead-line{display:flex;align-items:center;gap:10px;margin:var(--sp-4) 0 var(--sp-1)}
.rowhead-line .rowhead{margin:0}
.rowctl{margin-left:auto;display:flex;gap:6px;align-items:center}
.seeall{border:none;background:none;color:var(--link);font-size:13px;padding:2px 6px}
.seeall:hover{color:var(--gem)}
.hrow.asgrid{flex-wrap:wrap;overflow-x:visible}
.hrow.asgrid .gcard{flex:0 0 calc(20% - 13px)}
@media(max-width:900px){.hrow.asgrid .gcard{flex:0 0 calc(33% - 6px)}}

/* ===== v22 cards — rebuilt from a persona + relevancy pass (2026-09-16) =====
   Replaces the mixed chip row (tags + demo/free + a review count in one unbounded strip,
   which wrapped on ~20% of cards and desynced the review figure by 20px across a row).
   Tags are now tags; state is a glyph on the art; exactly one quality signal per card. */
.gcard .gtitle{font-size:16px;font-weight:700;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;min-height:41px}
.tagline{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tagline b{font-weight:500;color:var(--text-primary)}
.tagline b.rare{color:var(--match)}
.tagline i{font-style:normal;opacity:.4;margin:0 5px}
.tagline .more{font-family:'Ubuntu Mono',ui-monospace,monospace;color:var(--match)}
.sigrow{display:flex;align-items:baseline;gap:6px;white-space:nowrap;min-width:0;margin-top:auto;padding-top:6px}
.sig-lbl{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;font-size:12px;color:var(--gem);overflow:hidden;text-overflow:ellipsis}
/* the longest label ('Overwhelmingly Positive'/'...Negative') needs 200.6px beside its count
   and the narrowest shelf card gives 200 — at 12.5px it lost four characters to the ellipsis. */
.gcard .sig-lbl{font-size:12px}
.sig-lbl.dim{color:var(--text-secondary);font-weight:500}
.sig-n{font-size:12px;color:var(--text-secondary);font-weight:500}
.sig-n.tealn{color:var(--freshness);font-weight:700;font-size:13px}
.relnote{font-size:11px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.covwrap{position:relative;flex:none}  /* glyphs anchor to the ART, not the card — otherwise they sit over the signal row */
.glyphs{position:absolute;bottom:6px;left:6px;z-index:2;display:flex;gap:4px}
.glyph{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.5px;padding:1px 5px;
  background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(3px)}
.glyph.d{color:var(--freshness);border:1px solid var(--freshness)}
/* --freshness is 3.65:1 on the light paper — fine for the large surfaces that use it, short of
   4.5 for these new 11-13px labels, so they get a darker teal in that theme only. */
[data-theme="light"] .glyph.d{color:#115446;border-color:#115446}
[data-theme="light"] .sig-n.tealn,[data-theme="light"] .wstate.soon{color:#115446}
[data-theme="light"] .wstate.soon{border-color:#115446}
.glyph.f{color:var(--gem);border:1px solid var(--gem)}

/* ============ Explore shell ============ */
/* title bar: Match = the first seed's capsule (the list's art, bigger) beside two lines (title, seed chips) */
.xctx{display:block;margin-bottom:var(--sp-2);min-height:72px}
.xctx-l{min-width:0}
/* Match: title and seed chips on the left, the capsule on the right (balancing the sort under it) */
.xctx-m{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.xctx-t{min-width:0;flex:1 1 auto}
.xhero-l{flex:none;display:block}
.xhero-l:hover .xart{outline:1px solid var(--gem)}
.xart.xhero{width:192px;height:72px}
/* the title is regular weight; the count and the game names are bold in the accent colour */
.xctx-l h1{font-size:24px;font-weight:400;margin:0 0 12px;line-height:1.3;overflow-wrap:anywhere}
.xctx-l h1 b{font-weight:700;color:var(--accent)}
/* the two lines add up to the capsule's 72px: a 28px title line, 12px of air, the 32px chip row */
.xctx-m h1{line-height:28px;margin:0 0 12px}
.xctx-m .xseedrow{min-height:32px}
.xseedrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
/* seed chips: quiet borders on the surface colour */
.xseed{display:inline-flex;align-items:center;height:32px;border:1px solid var(--border);padding:0 4px 0 0;gap:8px;background:var(--surface);color:var(--text-primary);font-size:14px;line-height:1.4}
.xseed .xart.xs{width:32px;height:32px;object-fit:cover;flex:none;display:block}
.xseed .x{width:24px;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;padding:0}
.xseed .x:hover{color:var(--gem)}
.xseed .nm{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xaddbox{position:relative;display:inline-block;width:260px}
#xaddIn{height:32px;font-size:14px;width:100%;background:var(--surface);border:1px solid var(--text-secondary);color:var(--text-primary);padding:0 8px;font-family:inherit;line-height:1.4}
#xaddIn::placeholder{color:var(--text-secondary)}
/* the sort select keeps its border; its native arrow is replaced by the dropdowns' chevron (drawn on the wrapper) */
.xdd-k{color:var(--text-secondary)}
/* "Customize weights" inside the Matching dropdown: a disclosure, then one slider per signal */
.xdisc{margin-top:10px;background:none;border:none;color:var(--link);font:inherit;font-size:14px;cursor:pointer;padding:6px 6px;text-align:left;min-height:32px;width:100%}
.xdisc::after{content:'';display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:8px}
.xdisc[aria-expanded=true]::after{transform:translateY(2px) rotate(225deg)}
.xdisc:hover{color:var(--text-primary)}
.xcust{display:block;width:100%;padding:2px 6px 0;min-width:0}
.xcust-grid{display:grid;gap:2px}
.xcust-f{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.xcust-f .xlink{align-self:flex-start}
.xw{display:grid;grid-template-columns:110px minmax(0,1fr) 40px;align-items:center;gap:var(--sp-2);min-height:32px}
.xw span{font-size:14px;color:var(--text-secondary)}
.xw b{font-family:'Ubuntu Mono';font-size:14px;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums}
.xw input[type=range]{width:100%;accent-color:var(--gem);min-width:0}
.xw-note{font-size:14px;color:var(--text-secondary);grid-column:1 / -1}
/* ============ Explore filter UI (2026-09-28) ============
   Bar: Tags field + group dropdowns with state in the label, cogwheel (adult content, match settings) + sort on the right.
   Applied row: one chip per filter (label edits, × removes). #xpop: one dropdown or the tag picker at a
   time, instant apply. Mobile (≤760px): "Filters (n)" opens a full-screen sheet with batch apply. Site tokens only. */

/* == skip link (first Tab stop on Explore) == */
.xskip{position:fixed;left:16px;top:8px;z-index:100;transform:translateY(-200%);background:var(--surface);color:var(--text-primary);border:1px solid var(--accent);padding:8px 12px;font-size:14px;text-decoration:none}
.xskip:focus{transform:none}

/* == bar == */
.xbarf{position:sticky;top:var(--nav-h);z-index:4;background:var(--bg);min-height:52px;padding:8px 0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-2);border-bottom:1px solid var(--border)}
.xbar{display:flex;align-items:center;gap:8px;width:100%;flex-wrap:wrap;min-height:36px}
.xtags{flex:1 1 260px;min-width:160px;max-width:260px;height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 10px;background:var(--surface);border:1px solid var(--text-secondary);color:var(--text-secondary);font-size:14px;line-height:1.4;text-align:left;cursor:text;border-radius:0}
.xtags-ph{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the counter badge: how many filters a menu holds (notification style), on the Tags field, the groups and the phone's Filters button */
.xcnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warning);color:#fff;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;flex:none}
.xtags .xcnt{margin-left:auto}
#xtagq::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.xtags[aria-expanded=true]{border-color:var(--gem)}
.xmag{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (min-width:1200px){.xbar{flex-wrap:nowrap}.xbar.wrap{flex-wrap:wrap}}
.xdd-s,.xbar.tight .xdd-f{display:none}
.xbar.tight .xdd-s{display:inline}
/* group dropdown buttons: no border at rest (the Tags field keeps its box); hover tints, open underlines */
.xdd{height:36px;padding:0 10px;flex:none;display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid transparent;color:var(--text-primary);font-size:14px;line-height:1.4;white-space:nowrap;border-radius:0;cursor:pointer}
.xdd::after{content:'';width:6px;height:6px;border-right:1.5px solid var(--text-secondary);border-bottom:1.5px solid var(--text-secondary);transform:translateY(-2px) rotate(45deg);margin-left:2px}
.xtags:hover{border-color:var(--gem)}
.xdd:hover{background:var(--violet-tint)}
.xdd[aria-expanded=true]{background:var(--gem-bg);box-shadow:inset 0 -2px 0 var(--gem)}
.xdd[aria-expanded=true]::after{transform:translateY(2px) rotate(225deg)}
.xbar-r{margin-left:auto;padding-left:8px;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:var(--text-secondary)}
/* "Reset to default": small text left of the cogwheel, only while a filter is set (the phone has Clear all in the sheet) */
.xreset{height:36px;padding:0 8px;background:none;border:none;color:var(--text-secondary);font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap}
.xreset:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:2px}
/* the cogwheel: adult content (and, in Match, looser matches); lit when any of those is on */
.xgear{width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:0;border-radius:0}
.xgear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xgear:hover{background:var(--violet-tint);color:var(--text-primary)}
.xgear.on{color:var(--gem)}
.xgear[aria-expanded=true]{background:var(--gem-bg);box-shadow:inset 0 -2px 0 var(--gem);color:var(--text-primary)}
.xlink{background:none;border:none;color:var(--link);font:inherit;font-size:14px;cursor:pointer;padding:0 2px;min-height:24px;text-decoration:underline;text-underline-offset:2px}
.xlink:hover{color:var(--text-primary)}
.xfbtn{display:none}
.xbar :focus-visible,.xpop :focus-visible,#xapplied :focus-visible,.xlayer :focus-visible,.xzero :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xplist :focus-visible{outline-offset:-2px}

/* == applied row == */
.xapplied{display:block;padding:8px 0 4px}
.xapplied:empty{display:none}
.xarow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xchips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.xtok{display:inline-flex;align-items:stretch;height:32px;border:1px solid var(--text-secondary);background:var(--surface);font-size:14px;line-height:1.4}
.xtok.not{border-style:dashed}
.xtok.inc{border-color:var(--freshness)}
.xtok .lb{background:none;border:none;color:var(--text-primary);font-size:14px;padding:0 4px 0 10px;white-space:nowrap;cursor:pointer}
.xtok .lb:hover{text-decoration:underline}
.xtok .x{width:28px;background:none;border:none;color:var(--text-secondary);font-size:16px;line-height:1;padding:0;cursor:pointer}
.xtok .x:hover{color:var(--warning)}
.xclearall{background:none;border:none;color:var(--link);font-size:14px;min-height:32px;padding:0 4px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.xundo{background:none;border:1px dashed var(--gem);color:var(--gem);font-size:14px;min-height:32px;padding:0 8px;cursor:pointer}
.xundo:hover{background:var(--gem-bg)}

/* == dropdown == */
.xpop{position:absolute;top:calc(100% + 2px);z-index:8;background:var(--surface);border:1px solid var(--text-secondary);padding:14px 16px 12px;box-shadow:0 12px 28px rgba(0,0,0,.45);max-width:calc(100vw - 32px);display:flex;flex-direction:column;overflow:auto;animation:xIn .12s ease-out}
[data-theme="light"] .xpop{box-shadow:0 12px 28px rgba(40,30,20,.16)}
@keyframes xIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.xpop-h{font-size:16px;font-weight:700;margin:0 -16px 10px;padding:0 52px 12px 16px;line-height:1.4;color:var(--text-primary);border-bottom:1px solid var(--border)}
.xpop-x{position:absolute;top:10px;right:10px;width:32px;height:32px;background:none;border:none;color:var(--text-secondary);font-size:22px;line-height:1;cursor:pointer;padding:0}
.xpop-x:hover{color:var(--text-primary)}
.xpop-b{display:flex;flex-direction:column;gap:2px}
.xopt{display:flex;align-items:center;gap:10px;min-height:32px;width:100%;background:none;border:none;color:var(--text-primary);font-size:14px;line-height:1.4;text-align:left;padding:0 6px;cursor:pointer}
.xopt:hover{background:var(--violet-tint)}
.xopt .bx{width:16px;height:16px;flex:none;border:1px solid var(--text-secondary)}
.xopt.on .bx{background:var(--gem);border-color:var(--gem);box-shadow:inset 0 0 0 3px var(--surface)}
.xopt.radio .bx{border-radius:50%}
.xopt .lb{flex:1;min-width:0}
.xopt .n{font-family:'Ubuntu Mono',ui-monospace,monospace;color:var(--text-secondary);font-variant-numeric:tabular-nums;margin-left:auto}
.xopt.zero{color:var(--text-secondary);cursor:not-allowed}
.xopt.zero:hover{background:none}
.xopt.zero .bx{border-style:dashed}
.xgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.xsub{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);margin:12px 0 4px;line-height:1.4}
.xpop-b>*+.xsub{border-top:1px solid var(--border);padding-top:12px}
.xsub:first-child{margin-top:0}
.xnote{font-size:14px;color:var(--text-secondary);line-height:1.4;margin:6px 0 2px}
.xpre,.xinline{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.xinline{padding-left:32px}
.xpbtn{height:28px;padding:0 10px;background:none;border:1px solid var(--border);color:var(--text-primary);font-size:14px;cursor:pointer;border-radius:0}
.xpbtn:hover{border-color:var(--gem)}
.xpbtn.on{border-color:var(--gem);background:var(--gem-bg)}
.xrange{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0}
.xrange label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--text-secondary)}
.xrange input{height:36px;width:100%;min-width:0;background:var(--bg);border:1px solid var(--text-secondary);color:var(--text-primary);font:inherit;font-size:14px;padding:0 8px;border-radius:0;color-scheme:dark}
[data-theme="light"] .xrange input{color-scheme:light}
.xmm{display:grid;grid-template-columns:auto minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:32px;font-size:14px;color:var(--text-secondary);margin-top:6px}
.xmm input{width:100%;accent-color:var(--gem)}
.xmm b{font-family:'Ubuntu Mono',ui-monospace,monospace;color:var(--text-primary);text-align:right}
.xpop-f{border-top:1px solid var(--border);margin-top:10px;padding-top:6px;display:flex;justify-content:flex-end}

/* == tag picker == */
.xtagpop{overflow:hidden}
.xpsearch{position:relative;margin-right:36px}
.xpsearch .xmag{position:absolute;left:10px;top:10px;color:var(--text-secondary)}
#xtagq{width:100%;height:36px;background:var(--bg);border:1px solid var(--text-secondary);color:var(--text-primary);font:inherit;font-size:14px;padding:0 10px 0 34px;border-radius:0}
#xtagq::placeholder{color:var(--text-secondary)}
.xtabs{display:flex;gap:0;margin:10px 0 4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;flex:none}
.xtab{height:32px;padding:0 6px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:14px;white-space:nowrap;cursor:pointer;margin-bottom:-1px}
.xtab:hover{color:var(--text-primary)}
.xtab.cur{color:var(--text-primary);border-bottom-color:var(--gem);font-weight:700}
.xtab .n{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:400;color:var(--text-secondary)}
.xplist.xscroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.xphead{font-size:14px;color:var(--text-secondary);margin:6px 0 2px;line-height:1.4}
.xtrow{display:flex;align-items:center;gap:8px;min-height:36px;border-bottom:1px solid var(--border-subtle);padding:2px 0}
.xtrow .nm{flex:1;min-width:0;font-size:14px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xtrow.inc .nm{color:var(--freshness);font-weight:700}
.xtrow.exc .nm{color:var(--warning);text-decoration:line-through}
.xbadge{font-size:14px;color:var(--text-secondary);border:1px solid var(--border);padding:0 6px;line-height:22px;white-space:nowrap}
.xtrow .n{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:14px;color:var(--text-secondary);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.xinc,.xexc{height:28px;padding:0 8px;background:none;border:1px solid var(--border);color:var(--text-secondary);font-size:14px;white-space:nowrap;cursor:pointer;border-radius:0}
.xinc:hover,.xinc[aria-pressed=true]{color:var(--freshness);border-color:var(--freshness)}
.xexc:hover,.xexc[aria-pressed=true]{color:var(--warning);border-color:var(--warning)}
.xinc[aria-pressed=true],.xexc[aria-pressed=true]{font-weight:700;background:var(--bg)}
.xcap{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--border);margin-top:8px;padding-top:8px;font-size:14px;color:var(--text-secondary);flex:none}
.xcap b{color:var(--text-primary)}

/* == zero results == */
.xzero{padding:24px;border:1px solid var(--border);background:var(--surface);font-size:15px;color:var(--text-secondary);text-align:center}
.xzero b{color:var(--text-primary)}
.xzero-h{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 4px}
.xzero-s{font-size:14px;color:var(--text-secondary);margin:0 0 12px}
.xzero-l{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.xzero-b{min-height:32px;padding:0 12px;background:var(--bg);border:1px solid var(--text-secondary);color:var(--text-primary);font-size:14px;cursor:pointer}
.xzero-b .n{font-family:'Ubuntu Mono',ui-monospace,monospace;color:var(--text-secondary)}
.xzero-b:hover{border-color:var(--gem)}
.xzero-c{border-style:dashed}

/* == starting points: the container is a plain block; the nav must not inherit the site's sticky top-nav rule == */
#xlens.xlens{display:block;margin:0}
#xlens:empty{display:none}
#xlens nav.xlens{margin:10px 0 8px;position:static;padding:0;border:0;background:none;backdrop-filter:none;gap:8px;z-index:auto}

/* == mobile bar and applied row == */
@media (max-width:760px){
  .xbarf{min-height:60px;padding:8px 0;border-bottom:none}
  .xbar{flex-wrap:nowrap}
  .xtags,.xdd{display:none}
  .xdd.xsort{display:inline-flex;height:44px}
  .xfbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:var(--surface);border:1px solid var(--text-secondary);color:var(--text-primary);font-size:15px;white-space:nowrap}
  .xfbtn:hover{border-color:var(--gem)}
  .xbar-r{gap:8px}
  .xbar-r .xgear{width:44px;height:44px}
  .xbar-r .xgear svg{width:20px;height:20px}
  .xsetpop .xopt{min-height:44px}
  .xarow{flex-wrap:nowrap}
  .xchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
  .xchips::-webkit-scrollbar{display:none}
  .xtok{height:44px;flex:none}
  .xtok .x{width:40px;font-size:18px}
  .xclearall,.xundo{min-height:44px;flex:none}
}

/* == mobile sheet == */
.xlayer{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.xl-h{flex:none;height:60px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--border)}
.xl-h h2{font-size:18px;font-weight:700;margin:0}
.xl-x{width:44px;height:44px;background:none;border:1px solid var(--text-secondary);color:var(--text-primary);font-size:18px;cursor:pointer;padding:0}
.xl-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 16px 16px;overscroll-behavior:contain}
.xacc{border-bottom:1px solid var(--border)}
.xacc-t{margin:0;font-size:inherit}
.xacc-h{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--text-primary);font-size:16px;font-weight:700;padding:0;text-align:left;cursor:pointer}
.xacc-h .t{flex:none}
.xacc-h .v{flex:1;min-width:0;font-size:14px;font-weight:400;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.xacc-h::after{content:'';flex:none;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-45deg);margin:0 4px}
.xacc.open .xacc-h::after{transform:rotate(45deg)}
.xacc-b{padding-bottom:12px}
.xlayer .xopt{min-height:44px;font-size:15px}
.xlayer .xpbtn{height:44px;padding:0 14px}
.xlayer .xrange input,.xlayer #xtagq{height:44px;font-size:16px}
.xlayer .xpsearch{margin-right:0}
.xlayer .xpsearch .xmag{top:14px}
.xlayer .xtabs{border-bottom:none;gap:6px;margin:10px -16px 6px;padding:0 16px}
.xlayer .xtab{height:44px;border:1px solid var(--border);padding:0 12px;margin:0}
.xlayer .xtab.cur{border-color:var(--gem);background:var(--gem-bg)}
.xlayer .xtrow{min-height:52px;flex-wrap:nowrap}
.xlayer .xtrow .nm{white-space:normal;font-size:15px}
.xlayer .xtrow .n{min-width:0}
.xlayer .xinc,.xlayer .xexc{height:44px;padding:0 8px}
.xlayer .xcap{flex-wrap:wrap}
.xlayer .xcap .xlink,.xlayer .xpop-f .xlink{min-height:44px}
.xlayer .xinline{padding-left:0}
.xlayer .xmm{min-height:44px}
.xl-f{flex:none;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg)}
.xlbtn{height:48px;padding:0 16px;background:var(--surface);border:1px solid var(--text-secondary);color:var(--text-primary);font-size:15px;cursor:pointer}
.xlbtn.pri{flex:1;background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.xlbtn.busy{opacity:.85}
body.xlayer-open{overflow:hidden}

/* == reduced motion == */
@media (prefers-reduced-motion:reduce){.xpop{animation:none}.xskip{transition:none}}
.xlens{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0}
.xlensc{height:32px;display:inline-flex;align-items:center;font-size:14px;border:1px solid var(--text-secondary);color:var(--text-primary);background:none;padding:0 10px;cursor:pointer;font-family:inherit;line-height:1.4;text-decoration:none}
.xlensc:hover{border-color:var(--gem)}
.xbtn{height:36px;padding:0 16px;font-size:14px;border:1px solid var(--text-secondary);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:inherit;line-height:1.4;display:inline-flex;align-items:center}
.xbtn:hover{border-color:var(--gem)}
.xbtn.pri{background:var(--accent);color:var(--on-accent);font-weight:700;border-color:var(--accent)}
.xbtn[aria-pressed=true]{border-color:var(--gem);background:var(--gem-bg)}
.xbtn.pri:hover{border-color:var(--gem)}
.xaddbtn{height:32px;font-size:14px;padding:0 10px;background:var(--surface);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;font-family:inherit;line-height:1.4;display:inline-flex;align-items:center}
.xaddbtn:hover{border-color:var(--gem)}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media(max-width:760px){
  .xctx{min-height:0}
  .xctx-l{width:100%;max-width:100%;min-width:0}
  /* phone: title on the left and the capsule on the right, the seed chips (and notes) on their own full-width row under them */
  .xctx-m{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center}
  .xctx-t{display:contents}
  .xctx-m h1{grid-column:1;grid-row:1;margin:0}
  .xctx-m .xhero-l{grid-column:2;grid-row:1}
  .xart.xhero{width:120px;height:45px}
  .xctx-l h1{font-size:20px;margin:0}
  .xctx-m .xseedrow{grid-column:1 / -1;grid-row:2}
  .xctx-m .xw-note{grid-column:1 / -1}
  .xreset{display:none}
  .xseedrow{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:center;min-height:40px;padding:2px 0;scrollbar-width:none;mask-image:linear-gradient(to right,black calc(100% - 40px),transparent)}
  .xseedrow::-webkit-scrollbar{display:none}
  .xseed .x{width:32px;min-width:32px;height:32px}
}
.c-sim .sc{display:block}
.c-sim .bd{display:block;font-size:12px;font-weight:400;color:var(--text-secondary)}
.c-nm .dev{display:block;font-weight:400;font-size:13px;color:var(--text-secondary)}
.c-tg b.def{color:var(--match)}
.c-tg .rel,.c-tg .cs{color:var(--text-secondary);margin-left:6px}

/* ============ Explore: queryable row list (2026-09-17) ============
   Replaces the card grid. The grid showed ~4 results with no way to narrow them; this shows
   18 rows above the fold at 1440 and 10 at 390. Column widths are fixed so the eye can scan
   down a column — that alignment is the difference between a list and a table. */
/* With a seed active the starter chips are answering a question already answered; the
   search box stays (you re-seed from it) but the shortcuts go, which is 40px of the 454px
   that stood between the page top and the first result. */
body.has-seed .starters{display:none}
body.has-seed .viewsub{display:none}

.xtable{border:1px solid var(--border);overflow:hidden}
.xhead,.xr{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3)}
/* The card's visible title is the real link: middle-click, open-in-new-tab, a hover
   target and something for a crawler to follow into the game pages. A full-card
   stretched overlay was tried first and reverted — an inset:0 layer over the card
   kills text selection, cover drag, and the .nrail title tooltip, which is a poor
   trade for making the cover area clickable when the whole card already navigates. */
.cardlink{color:inherit;text-decoration:none}
.cardlink:hover{text-decoration:underline}
.card button,.card input,.card select{position:relative;z-index:2}
.xhead{background:var(--surface-elevated);border-bottom:1px solid var(--border);
  font-size:14px;font-weight:600;color:var(--text-secondary)}
/* Sortable headers are real buttons so they are keyboard reachable and can carry aria-sort;
   these rules strip the button chrome back to the header's own type. */
.xhead .s{cursor:pointer;display:inline-flex;align-items:baseline;gap:4px;
  background:none;border:none;padding:0;margin:0;font:inherit;color:inherit}
/* Visually hidden but announced — the rank and art columns need names for screen readers
   and nothing on screen. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.xhead .s:hover{color:var(--text-primary)}
.xhead .s{min-height:24px;align-items:center}   /* 24px target minimum */
.xhead .s.on{color:var(--gem)}
.xhead .s i{font-style:normal}
.xhead .cov{font-style:normal;font-size:14px;text-transform:none;letter-spacing:0}
/* The head cell must not clip its own label: justify-content:flex-end plus overflow:hidden
   cuts from the START, which silently rendered "Reviews" as "eviews". */
.xhead .c-sig{overflow:visible}
.xbody{display:flex;flex-direction:column}
.xr{border-bottom:1px solid var(--border-subtle);min-height:56px;height:auto;box-sizing:content-box;cursor:pointer;
  background:var(--surface);opacity:0;animation:cardEnter .25s var(--ease) forwards;
  animation-delay:calc(var(--i,0)*12ms)}
.xr:nth-child(even){background:var(--surface-elevated)}
.xr:hover{background:var(--violet-tint)}
.xr:last-child{border-bottom:none}
.c-rank{width:28px;text-align:right;flex:none;font-size:14px;color:var(--text-secondary);
  font-family:'Ubuntu Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.c-art{width:64px;flex:none}
.xart{width:64px;height:30px;display:block;border-radius:0}
.xart img{width:100%;height:100%;object-fit:cover}
.c-nm{flex:1 1 0;min-width:220px;font-size:15px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-nm .dev{display:block;font-size:14px;font-weight:400;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-tg{flex:1.4 1 0;min-width:260px;display:flex;flex-wrap:wrap;align-items:center;gap:4px;row-gap:4px}
.c-tg .xwhy{display:inline-flex;align-items:center;height:28px;font-size:14px;border:1px solid var(--text-secondary);
  padding:0 8px;background:none;color:var(--text-primary);cursor:pointer;line-height:1.4;white-space:nowrap;gap:4px}
.c-tg .xwhy.def{border-color:var(--match)}
.c-tg .xsig{display:inline-flex;align-items:center;height:28px;font-size:14px;border:1px solid var(--border);
  padding:0 8px;background:none;color:var(--text-secondary);line-height:1.4;white-space:nowrap}
.c-sim{width:88px;text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end}
.c-act{width:122px;flex:none;display:flex;justify-content:flex-end}
.xhop{background:none;border:1px solid var(--border);color:var(--link);font:500 12px/1 Ubuntu,'Segoe UI',system-ui,sans-serif;padding:7px 9px;cursor:pointer;white-space:nowrap;border-radius:0}
.xhop:hover{border-color:var(--link);background:var(--violet-tint)}
.xhop:focus-visible{outline:2px solid var(--gem);outline-offset:1px}
#xh1:focus{outline:none}
.c-sim .sc{font-size:15px;font-weight:700;color:var(--match);
  font-family:'Ubuntu Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.c-sim .bd{font-size:14px;font-weight:400;color:var(--text-secondary)}
.c-sim .xmbar{display:block;height:2px;background:var(--match-strong);margin-top:2px;border-radius:1px;max-width:100%}
/* One signals cell rather than three sparse columns: review score is 5-14% populated in a
   real result set and release date ~9%, so three columns would render the majority row as a
   line of dashes. */
.c-sig{flex:0 0 224px;min-width:0;padding-left:var(--sp-3);box-sizing:border-box;display:flex;gap:6px;align-items:baseline;justify-content:flex-start;text-align:left;
  white-space:normal;overflow:visible;font-size:14px}
.c-sig b{font-size:14px;font-weight:700;color:var(--gem)}
.c-sig .n{font-size:14px;color:var(--text-secondary)}
.c-sig .yr{font-size:14px;color:var(--freshness)}
.c-sig .none{font-size:14px;color:var(--text-secondary)}
.c-st{width:74px;flex:none;display:flex;gap:var(--sp-1)}
.pl{font-style:normal;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:14px;
  padding:0 4px;border:1px solid var(--border);color:var(--text-secondary)}
.pl.d{color:var(--freshness);border-color:var(--freshness)}
.pl.f{color:var(--gem);border-color:var(--gem)}

.xpage{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 2px;font-size:14px;color:var(--text-secondary);flex-wrap:wrap}
.xpage b{color:var(--text-primary)}
.xpage .pg{display:flex;gap:4px}
.xpage .pg button{padding:2px 8px;min-width:32px;min-height:32px;border:1px solid var(--border);background:none;
  color:var(--text-secondary);font-family:inherit;font-size:14px;cursor:pointer}
.xpage .pg button:hover{border-color:var(--gem);color:var(--text-primary)}
.xpage .pg button.on{background:var(--gem);border-color:var(--gem);color:var(--on-accent);font-weight:700}
.xpage .pg button[aria-current="page"]{background:var(--gem);border-color:var(--gem);color:var(--on-accent);font-weight:700}

/* Between 761 and 1100 the developer line and why shrink first */
@media(max-width:1100px) and (min-width:761px){
  .c-nm .dev{display:none}
  .c-tg{min-width:200px;flex:1 1 0}
}
@media(max-width:760px){
  .xhead{display:none}
  .xr{flex-wrap:wrap;gap:4px 8px;padding:8px 10px;min-height:44px;height:auto;align-items:flex-start}
  .c-rank{display:none}
  .c-art{width:48px;flex:none}
  .xart{width:48px;height:19px}
  .c-nm{flex:1 1 0;min-width:0;font-size:15px;font-weight:600;color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c-nm .dev{display:block;font-size:13px;font-weight:400;color:var(--text-secondary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c-sim{width:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;margin-left:auto}
  .c-act{flex:0 0 100%;width:auto;justify-content:flex-start;padding-left:56px}
  .c-sim .sc{font-size:15px;font-weight:700;color:var(--match);
    font-family:'Ubuntu Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
  .c-sim .bd{font-size:13px;font-weight:400;color:var(--text-secondary)}
  .c-sim .xmbar{display:none}
  .c-tg{order:3;flex:0 0 100%;margin-left:0;gap:4px;flex-wrap:wrap}
  .c-tg .xwhy{font-size:13px;height:24px;padding:0 6px}
  .c-tg .xwhy:nth-child(3){display:none}
  .c-tg .xsig{font-size:13px;height:24px;padding:0 6px}
    .c-sig{order:4;flex:0 0 auto;font-size:13px;justify-content:flex-start}
  .c-sig b{font-size:13px}
  .c-sig .n{font-size:13px}
  .c-sig .yr{font-size:13px}
  .c-sig .none{font-size:13px}
  .c-st{order:5;width:auto;margin-left:0}
  .pl{font-size:13px}
}
@media(max-width:400px){
  .c-art{width:38px}
  .xart{width:38px;height:15px}
}

/* Focus ring for interactive elements */
.xwhy:focus-visible,.cardlink:focus-visible,.xhead .s:focus-visible,.xpage .pg button:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* explore neighbour — score rail, capsule, evidence line */
.ncard{display:flex;gap:0;align-items:stretch;padding:0;overflow:hidden}
.nrail{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--surface-elevated);border-right:1px solid var(--border-subtle)}
.nrail .msq-wrap.w-36{flex-direction:column;gap:4px}  /* the w-36 default lays the tier word beside the square, which overruns a 74px rail */
.nrail .tierword{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmain{flex:1;min-width:0;display:flex;flex-direction:column}
.ncard .ncover{width:100%;height:auto;aspect-ratio:231/87;border-radius:0}
.ncard .nbody{padding:9px 11px;display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.ntitle{font-size:14px;font-weight:700;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.nwhy{font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45;margin-top:0}
.nwhy b{color:var(--text-primary);font-weight:700}
.nwhy b.rare{color:var(--match)}
.ncard .hopbtn{align-self:flex-start;margin-top:2px}

/* explore seed — image flush to the left, top and bottom edges */
.seedcard{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;min-height:56px}
.seedcover{width:148px;flex:none;height:auto;align-self:stretch;border-radius:0}
.seedbody{flex:1;min-width:0;padding:9px 14px;display:flex;flex-direction:column;justify-content:center}
.seedname{font-size:16px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seedsub{font-size:12px;color:var(--text-secondary);font-weight:500}
.strengthset{display:flex;gap:8px;align-items:center;padding:9px 12px 9px 0;flex:none}

/* watchlist row — image flush to the left, top and bottom edges */
.wrow{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;min-height:56px}
.wcover{width:148px;flex:none;height:auto;align-self:stretch;border-radius:0}
.wbody{flex:1;min-width:0;padding:9px 14px;display:flex;flex-direction:column;justify-content:center;gap:1px}
.wtitle{font-size:14px;font-weight:700;line-height:1.28;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wdev{font-size:12px;color:var(--text-secondary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wstate{align-self:center;flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;white-space:nowrap}
.wstate.out{color:var(--text-secondary);border:1px solid var(--border)}
.wstate.soon{color:var(--freshness);border:1px solid var(--freshness)}
.wsig{align-self:center;flex:0 0 auto;margin:0;padding:0 14px}
.wrow .star{align-self:center;margin-right:10px}

/* compare header — capsule flush to the top and sides */
.cmphead{padding:0!important;vertical-align:top}
.cmphead a{display:block;text-decoration:none;color:inherit}
.cmpcover{width:100%;aspect-ratio:231/87;border-radius:0}
.cmpname{font-size:13px;font-weight:700;line-height:1.28;padding:7px 10px 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}

/* similar chip — score, one divider rule, name */
.simchip{display:inline-flex;align-items:stretch;gap:0;padding:0;overflow:hidden;max-width:260px;text-align:left}
.simchip .m{font-weight:700;color:var(--match);font-size:12px;padding:8px 10px;flex:none;display:flex;align-items:center}
.simchip .rule{width:1px;background:var(--border);flex:none}
.simchip .nm{padding:8px 12px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

@media(max-width:560px){
  .seedcover,.wcover{width:104px}
  .nrail{flex:0 0 60px}
  /* cover | title+dev | state | star  /  cover | signal across the rest */
  .wrow{display:grid;grid-template-columns:104px minmax(0,1fr) auto auto;
        grid-template-areas:"cover body state star" "cover sig sig sig";align-items:center}
  .wcover{grid-area:cover;align-self:stretch;height:100%}
  .wbody{grid-area:body;padding:9px 12px 0}
  .wstate{grid-area:state;align-self:center}
  /* "RELEASED" costs 77px of title width to repeat what the review signal beside it already
     says; the unreleased pill carries a date the signal does not, so only that one stays. */
  .wstate.out{display:none}
  .wrow .star{grid-area:star;align-self:center;margin-right:10px}
  .wsig{grid-area:sig;align-self:center;justify-content:flex-start;padding:2px 12px 9px;margin:0}
  /* the signal spans three columns, so its intrinsic width would otherwise inflate the two
     auto ones and starve the title; zero its size contribution and let 1fr place it. */
  .wsig,.wsig .sig-lbl{min-width:0}
  .wsig .sig-lbl{font-size:12px}   /* same 1px overage as the shelf card, same fix */
  .wsig{padding-right:4px}
}
@media(max-width:470px){
  /* the seed is cover + identity + a three-button control; below ~470px they cannot share
     a row, so the control wraps to its own line rather than pushing the card wider */
  .seedcard{flex-wrap:wrap}
  .seedbody{flex:1 1 auto;padding:9px 12px}
  .strengthset{flex:1 0 100%;padding:0 12px 10px;justify-content:flex-start}
  .seedname{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* footer */
footer{flex:none;max-width:min(1360px,94vw);width:100%;margin:var(--sp-5) auto 0;padding:var(--sp-3) var(--sp-5) var(--sp-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);border-top:1px solid var(--border-subtle)}
footer .note{font-size:12px;font-weight:500;color:var(--text-secondary);line-height:1.5}
.foot-l{display:flex;align-items:flex-start;gap:10px;min-width:0} /* top-aligned: the note wraps to two lines at narrow widths and centring drops the mark */
.foot-l svg{flex:none;margin-top:1px}
.foot-r{margin-left:auto;display:flex;align-items:center;gap:var(--sp-4)}
.foot-r a{font-size:12px;font-weight:500}
@media(max-width:620px){.foot-r{margin-left:0}}

@media (prefers-reduced-motion: reduce){.hero-land .p,.glint{animation:none!important}.glint{opacity:0!important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}
}
/* ---------- game pages / compare / media (v9) ---------- */
.gcard{position:relative}
.cmpbtn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:0;border:1px solid var(--border);background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--text-secondary);font-size:13px;cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s;z-index:2;backdrop-filter:blur(4px)}
.gcard:hover .cmpbtn,.cmpbtn.in{opacity:1}
.cmpbtn.in{color:var(--gem);border-color:var(--gem)}
.cmpbtn:hover{color:var(--text-primary)}
.cmptray{position:sticky;top:var(--nav-h);z-index:6;display:none;align-items:center;gap:12px;background:color-mix(in srgb, var(--surface-elevated) 92%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);color:var(--text-primary);padding:8px var(--sp-4);font-size:13px}
.cmptray.show{display:flex}
.cmptray .thumbs{display:flex;gap:6px}
.cmptray .thumbs img{width:48px;height:18px;object-fit:cover;border:1px solid var(--border)}
.cmptray .n{color:var(--gem);font-weight:700}
.cmptray .golink{margin-left:auto;background:var(--gem);color:var(--on-accent);border:none;border-radius:var(--r-sm);padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer}
.cmptray .golink:hover{background:var(--gem-light)}
.cmptray .clearlink{background:none;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer}
.cmptray .clearlink:hover{color:var(--warning)}
.ghero{position:relative;overflow:hidden;border:1px solid var(--border);min-height:210px;max-height:340px;display:flex;align-items:flex-end;background:var(--surface-elevated);margin-top:6px}
.gh-matchctx{position:absolute;right:26px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:3}
.gh-matchctx .ctxlbl{font-size:11px;color:var(--text-secondary);background:color-mix(in srgb, var(--bg) 78%, transparent);padding:2px 8px}
.crumbs{font-size:13px;color:var(--text-secondary);margin:0 0 14px}
.crumbs a{color:var(--link)} .crumbs b{color:var(--text-primary);font-weight:500}
.ghero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);transform:translateX(-101%);pointer-events:none;animation:sweep .7s ease-out .4s forwards}
.gh-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gh-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,color-mix(in srgb,var(--bg) 88%,transparent) 78%,var(--bg) 100%)}
.gh-body{position:relative;padding:26px 26px 18px;width:100%}
.gh-title{font-size:30px;margin:0 0 4px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.gh-sub{font-size:13px;color:var(--text-secondary)}
.watchbtn.slim{width:auto;margin:0;padding:8px 16px;font-size:13px}
.watchbtn.ghost{background:transparent;color:var(--gem)}
.steam.slim{display:inline-block;margin:0;padding:8px 14px;border:1px solid var(--border);font-size:13px}
.cmpbtn2{padding:8px 16px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:color .15s,border-color .15s}
.cmpbtn2.in{color:var(--gem);border-color:var(--gem)}
/* stat cells (v15: replace verdict cards; 1px-gap grid on hairline, each cell clickable) */
.scells{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);margin:16px 0 4px}
.scell{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:6px;position:relative;color:inherit}
a.scell{text-decoration:none}
a.scell:hover{background:var(--surface-elevated)}
.scell .big{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;font-size:26px;color:var(--text-primary)}
.scell .lbl{font-size:12px;color:var(--text-secondary);line-height:1.45}
.scell .go{position:absolute;top:10px;right:12px;font-size:12px;color:var(--text-secondary)}
.delta{display:inline-block;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:11px;font-weight:700;color:var(--match);background:var(--violet-tint);padding:1px 7px;margin-left:8px;vertical-align:3px}
.trendteaser{display:flex;align-items:center;gap:16px;border:1px solid var(--border-subtle);padding:12px 16px;margin:16px 0;flex-wrap:wrap}
.trendteaser .tt-lbl{font-size:13px;color:var(--text-secondary)}
.trendteaser a{font-size:13px;margin-left:auto}
.mediarow{display:flex;gap:8px;align-items:center;margin:10px 0 6px;overflow-x:auto}
.mediarow img{width:150px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border-subtle);cursor:zoom-in;flex:none}
.mediarow .all{font-size:13px;margin-left:10px;white-space:nowrap}
.gdesc{font-size:14px;line-height:1.6;color:var(--text-secondary);max-width:72ch;margin:14px 0 4px}
.dna{display:grid;grid-template-columns:1fr;gap:6px 40px;max-width:640px}
@media(min-width:1100px){.dna{max-width:540px}}
.dnarow{display:grid;grid-template-columns:minmax(120px,170px) 1fr minmax(90px,auto);gap:12px;align-items:center;font-size:12px}
.dnarow .dnatag{color:var(--text-primary)}
.dnabar{height:5px;background:var(--surface-elevated);overflow:hidden}
.dnabar i{display:block;height:100%;background:color-mix(in srgb, var(--text-primary) 55%, var(--surface-elevated))}
.dnanote{font-size:11px;color:var(--text-secondary);text-align:right}
.mediastrip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.mediastrip img{height:130px;border:1px solid var(--border);cursor:zoom-in;transition:transform .15s}
.mediastrip img:hover{transform:scale(1.03)}
.lightbox{position:fixed;inset:0;background:rgba(8,7,12,.9);z-index:120;display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:lbIn .2s ease-out}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:92vw;max-height:90vh;box-shadow:0 12px 60px rgba(0,0,0,.7);animation:lbImg .22s var(--ease)}
@keyframes lbImg{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.lightbox .lbclose{position:fixed;top:18px;right:20px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox .lbclose:hover{background:rgba(255,255,255,.22)}
.skl-hero{height:230px;margin:6px 0 16px;background:var(--surface-elevated);position:relative;overflow:hidden}
.cmpscroll{overflow-x:auto}
.cmptbl{border-collapse:separate;border-spacing:0;min-width:560px;width:100%}
.cmptbl th{text-align:left;font-size:11px;color:var(--text-secondary);font-weight:500;padding:10px 14px 10px 0;white-space:nowrap;vertical-align:top}
.cmptbl td{background:var(--surface);border:1px solid var(--border);border-left:none;padding:10px 14px;font-size:13px;min-width:150px;vertical-align:top}
.cmptbl tr td:first-of-type{border-left:1px solid var(--border)}

.cmptbl td.best{border-color:var(--gem);border-left:1px solid var(--gem);background:color-mix(in srgb,var(--gem) 7%,var(--surface));color:var(--text-primary)}
.cmphead{position:relative}
.cmphead .gtitle{margin-top:8px;font-size:13px}
.cmpcover{height:64px;overflow:hidden}
.cmprm{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:13px}
.cmprm:hover{color:var(--warning)}
.statbar{display:block;height:4px;background:var(--surface-elevated);margin-top:6px;overflow:hidden}
.statbar i{display:block;height:100%;background:var(--freshness);opacity:.7}
@media (prefers-reduced-motion: reduce){.mediastrip img,.cmptray{transition:none}}
/* spotlight first card in each carousel row */
.hrow:not(.asgrid) .gcard:first-child{flex:0 0 310px}

/* room to breathe on big screens */
@media(min-width:1200px){
  .gcard{flex:0 0 250px}
  .hrow:not(.asgrid) .gcard:first-child{flex:0 0 340px}
  .hero-land .bigword{font-size:58px}
  .funnel{width:min(720px,100%)}
}
@media(min-width:1600px){.gcard{flex:0 0 280px}}
@media(min-width:1500px){.ngrid{grid-template-columns:1fr 1fr 1fr}}
/* missing-art fallback: initials, not a bare color block */
.fallback{background:var(--surface-elevated) !important;outline:1px dashed var(--border);outline-offset:-6px}
.fallback::before{content:attr(data-initials);position:absolute;font-family:'Ubuntu Mono',monospace;font-size:22px;font-weight:700;color:var(--text-secondary);letter-spacing:4px}
.gcover,.ncover,.seedcover{position:relative}

/* ---------- v15: trends page ---------- */
.banner{display:flex;align-items:center;gap:10px;background:var(--surface-elevated);border:1px solid var(--border-subtle);padding:10px 14px;font-size:12px;color:var(--text-secondary);margin:14px 0 22px}
.banner .mono{color:var(--freshness)}
.chartblk{margin:0 0 30px}
.chartblk h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 10px}
.chart{border:1px solid var(--border-subtle);background:var(--surface);padding:14px 10px 8px}
.chart text{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:11px;fill:var(--text-secondary)}
.chart line.grid{stroke:var(--chart-grid);stroke-width:.5}
.chart polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .l-violet{stroke:var(--match-likely)} .chart .l-amber{stroke:var(--gem)}
.chart circle{fill:var(--match-likely)} .chart circle.amber{fill:var(--gem)}
.chart-xlbl{display:flex;justify-content:space-between;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:11px;color:var(--text-secondary);padding:4px 8px 0}
.chart-empty{border:1px solid var(--border-subtle);background:var(--surface);height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-secondary);font-size:13px;text-align:center;padding:0 20px}
.dtable{width:100%;max-width:560px;border-collapse:collapse;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:12px;margin-top:8px}
.dtable th{text-align:left;font-weight:400;color:var(--text-secondary);padding:6px 10px;border-bottom:1px solid var(--border)}
.dtable td{padding:5px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary)}

/* ---------- v15: media page ---------- */
.featured{position:relative;border:1px solid var(--border-subtle);aspect-ratio:16/9;max-height:420px;width:100%;overflow:hidden;background:var(--surface)}
.featured img,.featured video{width:100%;height:100%;object-fit:cover;display:block}
.featured video{object-fit:contain;background:#000}
.msec{font-size:13px;font-family:'Ubuntu Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);margin:28px 0 10px;display:flex;gap:8px;align-items:baseline}
.msec b{color:var(--text-primary)}
.mgrid{display:grid;gap:10px}
.mgrid-3{grid-template-columns:repeat(3,1fr)} .mgrid-4{grid-template-columns:repeat(4,1fr)} .mgrid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.mgrid-3,.mgrid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mgrid-3,.mgrid-4,.mgrid-2{grid-template-columns:1fr}}
.mgrid img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border-subtle);background:var(--surface);display:block;cursor:zoom-in}
.mgrid video{width:100%;aspect-ratio:16/9;border:1px solid var(--border-subtle);background:#000;display:block}
.mgrid img.tall{aspect-ratio:auto;object-fit:contain}
.quietline{font-size:12px;color:var(--text-secondary);border-left:2px solid var(--border);padding:6px 12px;margin:22px 0}

/* ---------- v15: game page mobile — sticky action bar ----------
   Since v17 the bar appears only once the in-flow action bar (.ctabar) has scrolled out (body.ctabar-out), so a phone
   never shows two amber CTAs at once. */
.actionbar-m{display:none}
@media(max-width:560px){
  body.ctabar-out .actionbar-m{position:fixed;left:0;right:0;bottom:0;display:flex;gap:1px;background:var(--border);border-top:1px solid var(--border);z-index:10}
  .actionbar-m button,.actionbar-m a{flex:1;background:var(--surface-elevated);color:var(--text-primary);border:0;padding:13px 0;font-size:14px;font-weight:500;text-align:center;text-decoration:none}
  /* the primary cell: amber like every CTA, a little wider than the other three, the same height. This one rule is
     the whole of its styling — `.actionbar-m a` out-specifies `.ctabtn`, which once left "Find similar" dark */
  .actionbar-m a.ctabtn{flex:1.3;display:block;height:auto;min-height:0;line-height:inherit;padding:13px 0;background:var(--accent);color:var(--on-accent);font-weight:700}
  .actionbar-m a.ctabtn:active{background:var(--accent-pressed)}
  .actionbar-m .primary{background:var(--gem);color:var(--on-accent);font-weight:700}
  .actionbar-m .primary.on{background:var(--surface-elevated);color:var(--gem)}
  main.hasbar{padding-bottom:90px}
  .gh-matchctx{right:12px;bottom:12px}
  .gh-matchctx .msq-72{width:44px;height:44px;font-size:18px}
  .scells{grid-template-columns:1fr 1fr}
}

/* ---------- v16: game-page trend strip + tabbed trends page ---------- */
.tstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);margin:16px 0 0}
/* minmax(0,1fr) + min-width:0: a 1fr track is minmax(auto,1fr), so the card's min-content — the 150 px sparkline beside a
   nowrap delta chip, 278 px with padding — used to pin every track. Measured 2026-09-30: cards spilled the content column below
   375 px (page scrolled 7 px sideways at 320) and the first column stayed 278 px while the other two shrank at 761–950 px. */
.tcard{background:var(--surface);padding:16px 18px 14px;display:flex;flex-direction:column;gap:6px;color:inherit;position:relative;min-height:156px;min-width:0}
/* the sparkline gives way first: viewBox keeps its shape, height follows width (150 x 34 → 94 x 21 at 320) */
.tcard .trow .spark{flex:0 1 150px;min-width:64px;width:auto;height:auto}
.tcard:hover{background:var(--surface-elevated)}
.tcard-link{position:absolute;inset:0;z-index:1}
.tcard-link:focus-visible{outline:2px solid var(--gem);outline-offset:-2px}
.tattr{position:relative;z-index:2;font-size:12px;color:var(--text-secondary);text-decoration:none;font-family:Ubuntu,'Segoe UI',system-ui,sans-serif;white-space:nowrap}
.tattr:hover{color:var(--text-primary);text-decoration:underline}
.tattr-row{display:flex;justify-content:flex-end;margin:-16px 0 16px}
.tlinks{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.scorecard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle)}
.scr{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.scr-l{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
.scr-v{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;font-size:20px;color:var(--text-primary)}
.scr-s{font-size:12px;color:var(--text-secondary)}
.tcard .tl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
.tbadge{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--match);border:1px solid var(--match-likely);background:var(--violet-tint);padding:1px 7px;white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis}
.tv{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;font-size:28px;line-height:1.1;color:var(--text-primary)}
.tv.amber{color:var(--gem)} .tv.violet{color:var(--match)} .tv.teal{color:var(--freshness)}
.tcard .trow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.tval{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kdelta{display:inline-block;align-self:flex-start;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:11px;font-weight:700;padding:1px 7px;border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.kdelta.up{color:var(--freshness);border-color:color-mix(in srgb,var(--freshness) 50%,transparent)}
.kdelta.down{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 50%,transparent)}
.kdelta.live{color:var(--gem);border-color:color-mix(in srgb,var(--gem) 50%,transparent)}
.tcard .ts{font-size:12px;color:var(--text-secondary);line-height:1.45}
.tcard .tfoot{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10px;color:var(--text-secondary);display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.tcard.empty .tv{color:var(--text-secondary)}
.tstrip-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px;border:1px solid var(--border-subtle);border-top:0;padding:8px 14px}
.tcells{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary)}
.tcells b{font-family:'Ubuntu Mono',ui-monospace,monospace;color:var(--text-primary);font-weight:700}
.tcells a{color:var(--link);text-decoration:none}
.tcta{font-size:13px;color:var(--link);text-decoration:none;font-weight:500;margin-left:auto}
.tsub{font-size:14px;color:var(--text-secondary);margin:2px 0 10px;max-width:70ch}
/* nav.ttabs must shed the site-nav rules (sticky, padding, blur, gap) — it is a <nav> for the landmark, not the header */
/* overflow stays visible: with overflow:auto the tabs' own 2px underline overflowed the nav's content box by 1px
   (scrollHeight 43 vs clientHeight 42, measured) and Windows painted a scrollbar for it */
nav.ttabs{display:flex;gap:2px;padding:0;border-bottom:1px solid var(--border);margin:6px 0 14px;overflow:visible;position:static;background:none;backdrop-filter:none;z-index:auto;align-items:stretch}
.ttab{padding:10px 14px;font-size:14px;font-weight:500;color:var(--text-secondary);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
/* phones: the strip scrolls sideways instead of running past the column (289 px of tabs vs a 224 px column at 320 — the page
   itself scrolled 17 px). The <=560 rule near the top of the file says the same but loses to the overflow:visible above;
   line-height pins the tab at 42 px so scrollHeight == clientHeight and nothing clips the active underline or draws a bar. */
@media(max-width:560px){nav.ttabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}.ttab{line-height:20px}}
/* the fade is the scroll cue: it only touches a tab that actually reaches the strip's last 28 px */
.ttab:hover{color:var(--text-primary)} .ttab.on{color:var(--text-primary);font-weight:700;border-bottom-color:var(--gem)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);margin:0 0 22px}
.kpi{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;min-height:104px}
.kpi.primary{box-shadow:inset 0 3px 0 var(--gem)}
.kpi-l{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
.kpi-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.kpi-v{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;font-size:26px;line-height:1.1;color:var(--text-primary)}
.kpi-s{font-size:12px;color:var(--text-secondary);line-height:1.4}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 30px}
.tblk{border:1px solid var(--border-subtle);background:var(--surface);padding:16px}
.tblk h3{font-size:15px;font-weight:700;margin:0 0 10px}
.tblk .kpi{border:1px solid var(--border-subtle);margin-bottom:10px;min-height:0}
.tblk .chart{margin-top:0}
.tk{display:flex;flex-direction:column;gap:8px}
.tki{border-left:3px solid var(--border);background:var(--surface-elevated);padding:10px 12px}
.tki.good{border-left-color:var(--freshness)} .tki.warn{border-left-color:var(--warning)} .tki.live{border-left-color:var(--gem)} .tki.neutral{border-left-color:var(--match-likely)}
.tki b{display:block;font-size:13px;margin-bottom:2px} .tki span{font-size:12.5px;color:var(--text-secondary);line-height:1.45}
.chart .pos{fill:var(--gem)} .chart .neg{fill:var(--warning)} .chart .net{fill:none;stroke:var(--match-likely);stroke-width:2}
.chart-legend{display:flex;gap:14px;font-size:11px;color:var(--text-secondary);padding:6px 8px 0;align-items:center}
.chart-legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.chart-legend i.pos{background:var(--gem)} .chart-legend i.neg{background:var(--warning)} .chart-legend i.net{background:var(--match-likely);height:2px;width:14px}
.chart-note{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10px;color:var(--text-secondary);padding:6px 8px 0}
.chart text.now{fill:var(--text-primary);font-weight:700}
.chart text.r{text-anchor:end}
.chart circle.end{fill:var(--match-likely)} .chart circle.end.amber{fill:var(--gem)}
.chart polyline.sparse{stroke-dasharray:6 4}
.lanes{border:1px solid var(--border-subtle);background:var(--surface);padding:14px 16px}
.lane{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:12px;min-height:30px}
.lane-l{font-size:13px;color:var(--text-primary)}
.lane-t{position:relative;height:18px;border-bottom:1px solid var(--border-subtle)}
.lane-bar{position:absolute;top:1px;height:16px;background:var(--violet-tint);border:1px solid var(--match-likely);color:var(--match);font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10px;line-height:14px;padding:0 6px;white-space:nowrap;overflow:hidden}
.lane-pt{position:absolute;top:0;transform:translateX(-50%);font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10px;color:var(--match);background:var(--surface);border:1px solid var(--match-likely);padding:0 5px;line-height:16px}
.lane.untracked .lane-l{color:var(--text-secondary)} .lane-note{font-size:11px;color:var(--text-secondary);position:absolute;left:0;top:0;line-height:18px}
.lane.axis{min-height:20px} .lane.axis .lane-t{border:0;height:auto;padding:4px 0 0}
.tlink{display:inline-block;margin-top:4px;font-size:13px;color:var(--link);text-decoration:none}
/* chart SVGs stretch a 1104-wide viewBox to the viewport (preserveAspectRatio none), which squeezes their text
   horizontally on phones; scaling the glyphs back out around their own box keeps the axis legible. */
@media(max-width:760px){.tstrip{grid-template-columns:minmax(0,1fr)}.tgrid{grid-template-columns:1fr}.lane{grid-template-columns:104px 1fr}.lane-l{font-size:12px}.chart:not(.mini) text{transform-box:fill-box;transform-origin:left center;transform:scaleX(1.7)}}
@media(max-width:560px){.chart:not(.mini) text{transform:scaleX(2.4)}.chart.mini text{transform-box:fill-box;transform-origin:left center;transform:scaleX(1.25)}}
@media(max-width:420px){.chart:not(.mini) text{transform:scaleX(3.1)}.chart.mini text{transform:scaleX(1.7)}nav.ttabs{gap:0;padding:0}.ttab{padding:10px 9px;font-size:13px}}
/* two equal KPI columns: with 1fr 1fr the first track took the Review-score card's min-content (value + nowrap chip, 171 px)
   and the second got what was left — 97 px at 320, 46 px past the column. The chip wraps under the value instead. */
@media(max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{min-width:0}.kpi-row{flex-wrap:wrap}.tstrip-foot{flex-direction:column;align-items:flex-start}.tcta{margin-left:0}}

/* ---------- v17: game-page action bar + sticky row (variant S8, judged 2026-09-29; refine-S1 sizing) ----------
   One row from 761 px. The CTA is the only thing that gives way when the row is short: a long name is cut with an
   ellipsis, while the count and the three secondaries keep their size and stay on one line. */
.ctabar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:6px 0;border-bottom:1px solid var(--border);background:var(--bg)}
.ctabar .ctabtn,.ctasticky .ctabtn{flex:0 1 auto;min-width:0;padding:0 24px;gap:8px;white-space:nowrap}
.ctabtn .cta-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctabtn .cta-n{flex:none;font-size:13px;font-weight:700;opacity:.85}
.ctabtn:active{background:var(--accent-pressed);filter:none}
.ctabar-r{display:flex;flex:none;gap:8px;align-items:center}
.ctabar-r .watchbtn.slim,.ctabar-r .cmpbtn2,.ctabar-r .steam.slim{flex:none;height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:13px;line-height:1;white-space:nowrap}
/* on states: `.ctabar-r .cmpbtn2` above ties with and follows `.cmpbtn2.in`, which hid the compare state in the bar */
.ctabar-r .watchbtn.slim.on,.ctabar-r .cmpbtn2.in{color:var(--gem);border-color:var(--gem);background:var(--surface)}
.ctasticky + .tstrip{margin-top:19px}   /* 6 px of bar + its 1 px border below the CTA + 19 = the 26 px CTA→strip gap judged on S1 */
/* the row is a direct child of main: without animation:none the view-enter animation fades it in over the breadcrumb on every load */
.ctasticky{display:none;animation:none}
@media(min-width:561px){
  .ctasticky{display:block;position:fixed;top:calc(var(--nav-h) + var(--cta-tray-h, 0px));left:0;right:0;z-index:4;height:52px;background:var(--surface);border-bottom:1px solid var(--border);opacity:0;transform:translateY(-52px);pointer-events:none;transition:opacity .2s,transform .2s}
  body.ctabar-out .ctasticky{opacity:1;transform:none;pointer-events:auto}
  .sticky-in{width:min(1360px, 100% - 32px);margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .sticky-t{flex:1 1 0;min-width:0;font-size:15px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* 760 px and below: the bar stacks — CTA full width on one line, then the three secondaries in ONE 36 px row of equal
   cells; the whole bar stays ≤ 100 px so the strip's first card is reachable without a scroll. The sticky row
   (561–760 px) drops its title and gives the CTA the row. */
@media(max-width:760px){
  .ctabar{flex-direction:column;align-items:stretch;height:auto;padding:8px 0 5px;gap:6px}
  .ctabar .ctabtn{justify-content:center;height:44px;min-height:44px;padding:0 12px;gap:6px}
  .ctabar-r .watchbtn.slim,.ctabar-r .cmpbtn2,.ctabar-r .steam.slim{flex:1 1 0;min-width:0;padding:0 8px}
  .sticky-t{display:none}
  .ctasticky .ctabtn{flex:1 1 auto;justify-content:center;padding:0 12px;gap:6px}
}
/* phones: the count shortens to "· 219"; the narrowest ones tighten the secondaries so "✓ Watching" still fits its cell */
@media(max-width:560px){.ctabtn .cta-nw{display:none}}
@media(max-width:360px){.ctabar-r{gap:6px}.ctabar-r .watchbtn.slim,.ctabar-r .cmpbtn2,.ctabar-r .steam.slim{padding:0 4px;font-size:12px}}
/* <= 360: at 320 the nav spilled 5 px bare, 27 px with "Watchlist (1)", 34 px with "(12)" (measured 2026-09-30) — the whole page
   scrolled sideways. Budget at 320 with "(12)": 8 pad + 28 brand + 8 + 189 links + 8 + 69 chips + 8 = 318. The links row can
   also scroll (scrollbar hidden) so a three-digit count clips inside it instead of widening the page; the 4 px padding/negative-
   margin pair gives the links' focus ring (2 px + 2 px offset) room on every side — with 2 px only the ring's right edge
   survived, measured. Chips 32 px → nav 57 px, so --nav-h follows. */
@media(max-width:360px){nav{gap:8px;padding:12px 8px}.navlinks{gap:7px;font-size:12px;flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:4px;margin:-4px}.navlinks::-webkit-scrollbar{display:none}.navlinks a{white-space:nowrap}.navright{gap:5px}.uchip{width:32px;height:32px}#watchCount{font-size:11px}:root{--nav-h:57px}}
/* review history: time-scaled solid line, HTML x labels placed by date, one muted methodology footnote */
.chart.tline polyline{vector-effect:non-scaling-stroke}
.chart-xlbl.tx{position:relative;display:block;height:18px;padding:4px 0 0}
.chart-xlbl.tx span{position:absolute;top:4px;transform:translateX(-50%);white-space:nowrap}
.chart-foot{font-size:11px;line-height:1.45;color:var(--text-secondary);padding:8px 2px 0;max-width:760px}
/* chart tooltips (installChartTips): guide + point/column highlight + a card in the .xpop recipe (surface, secondary border, shadow, square) */
.chart[data-tip]{position:relative;cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.chart[data-tip]:focus{outline:none}
.chart[data-tip]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctip-layer{display:none}
.chart.tipon>.ctip-layer{display:block}
.ctip-layer>*{position:absolute;pointer-events:none}
.ctip-guide{width:0;border-left:1px solid var(--text-secondary);opacity:.75}
.ctip-band{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.ctip-dot{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--gem);box-shadow:0 0 0 2px var(--surface)}
.ctip{z-index:4;background:var(--surface);border:1px solid var(--text-secondary);box-shadow:0 10px 24px rgba(0,0,0,.45);padding:8px 11px 9px;font-size:12px;line-height:1.5;color:var(--text-primary);white-space:nowrap;display:flex;flex-direction:column}
[data-theme="light"] .ctip{box-shadow:0 10px 24px rgba(40,30,20,.16)}
.ctip b{font-weight:700;font-size:12px;display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ctip span{font-family:'Ubuntu Mono',ui-monospace,monospace;color:var(--text-primary)}
.ctip span.ctip-tag{font-family:Ubuntu,'Segoe UI',system-ui,sans-serif;font-size:10px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:var(--text-secondary);border:1px solid var(--border);padding:0 5px;line-height:1.6}
.ctip-sr{width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* weekly bars: the running week is faded; the 52-weeks / all switch sits at the right of the heading */
.chart rect.partial{opacity:.4}
.chart-legend i.part{background:var(--gem);opacity:.4}
.wkwin{margin-left:auto;display:inline-flex;border:1px solid var(--border)}
.wkwin button{font:inherit;font-size:12px;font-weight:500;background:none;border:0;color:var(--text-secondary);padding:3px 10px;cursor:pointer;min-height:28px}
.wkwin button+button{border-left:1px solid var(--border)}
.wkwin button[aria-pressed=true]{background:var(--gem-bg);color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--gem)}
.wkwin button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chart-legend{flex-wrap:wrap;row-gap:4px}
.chart-legend>span{white-space:nowrap}
/* phones: a long delta chip ("+6% vs prior week") wraps inside its card instead of pushing the 2-up grid past the gutter */
@media(max-width:560px){.kpis>.kpi{min-width:0}.kdelta{white-space:normal}}
@media(max-width:560px){.chart.tline text.now{display:none}} /* the stretched label clips at phone width; the sub line states the current value */
/* 320 px sweep (2026-09-30, measured on the review server; every one of these fits from 340 up):
   home lockup 340 px wide at 52 px (page scrolled 10 px); explore sort row 289 px vs a 224 px column (17 px page scroll,
   and it still ran 10 px into the gutter at 375); DNA rows need 234 px (the bar collapsed to 0 and the note sat in the gutter);
   the Reviews tab's data table needed 254 px; the trends tab strip hid its fourth tab entirely. */
@media(max-width:360px){
  .hero-land .bigword{font-size:min(44px,12.5vw)}   /* 40 px at 320: the lockup (icon + word) then fits the 288 px hero box */
  .funnel .digbtn{padding:0 18px}   /* 122 px instead of 138: the search box beside it keeps ~120 px of text at 320 */
  .dtable th,.dtable td{padding-left:6px;padding-right:6px}   /* the 4-column review table needed 254 px at 10 px cell padding */
  .ttab{padding:10px 8px;font-size:12px}   /* ~265 px of tabs in a 224 px strip: the fourth tab peeks in beside the fade (after the <=420 rule above, which it overrides) */
  .dnarow{grid-template-columns:minmax(96px,170px) 1fr minmax(84px,auto);gap:8px}
  .xbar.tight .xfbtn{padding:0 12px}
  .xbar.tight .xbar-r .xgear{width:40px}
}
@media(max-width:400px){
  .xbar.tight .xdd-k{display:none}   /* "Sort:" — the aria-label keeps it */
  .xbar.tight .xbar-r{min-width:0}
  .xbar.tight .xdd.xsort{flex:0 1 auto;min-width:0;display:inline-block;line-height:42px;overflow:hidden;text-overflow:ellipsis}
}

/* ===== Mobile UX pass (2026-09-30, deepseek fanout blend, judged + measured on the review server) — phones only.
   P1 gutters · P2 thumb targets · P3 explore rows · P4 filter bottom sheet · P5 game page compaction (strip summary,
   DNA bar + top-6, 2-column neighbours) · P6 home hero · P7 compare sticky labels · P8 pressed states. Desktop untouched. */
@media(max-width:560px){
  /* P1: the column is the viewport minus 40 px, not minus 96. The rails and the home hero bleed by --sp-5, so they follow. */
  :root{--sp-5:20px;--sp-6:32px}
  main{width:100%}
  /* P6: home hero 501 → ~400 px so the first rail starts inside the first screen */
  .hero-land{padding-top:32px}
  .hero-land .tag{margin-bottom:20px}
  .statline{margin-top:16px}
  /* P2: real thumb targets, same visual size. Nav links 30 → 44 px hit (nav height unchanged via the negative margin);
     chips keep 34/32 px visuals and get a 44 px hit box; the hop, "More like this →", "Show all" and the star become 44 px. */
  .navlinks a{padding:11px 2px;margin:-7px 0}
  .uchip{position:relative}
  .uchip::before{content:'';position:absolute;inset:-6px}   /* -6 not -5: inset is measured from the padding box, inside the 1 px border */
  .xhop{min-height:44px;padding:0 12px;font-size:13px;display:inline-flex;align-items:center}
  .hopbtn{min-height:44px;padding:0 12px;font-size:13px;display:inline-flex;align-items:center}
  .seeall{min-height:44px;padding:0 10px}
  .wrow .star{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .c-tg .xwhy,.c-tg .xsig{height:32px}
  .try .seedchip{min-height:44px;padding:0 12px}
  .ctabar-r .watchbtn.slim,.ctabar-r .cmpbtn2,.ctabar-r .steam.slim{height:44px}
  .ttab{line-height:22px}   /* 44 px tabs; the strip's scrollHeight still equals its clientHeight */
  /* P3: the hop sits on the tags line instead of its own full-width line (~110 → ~84 px rows) */
  .c-nm{flex:1 1 30%}   /* the title claims real width on its line (its 0 basis let the tags squeeze in beside it) */
  .c-sig{order:0;flex:0 0 auto;align-self:center;font-size:12px}   /* the rating joins the title line, right of the score, instead of a third line */
  .c-tg{order:3;flex:1 1 55%;min-width:0}   /* 30% + 60 + 93 + 55% never fit on one line, so the tags start a new line and the hop joins them */
  .c-act{order:3;flex:0 0 auto;width:auto;padding-left:0;margin-left:auto;align-self:center}
  /* P8: the brand's one motion — the 200 ms sweep — answers a tap on the primary and secondary actions (the same
     keyframes the game hero uses on hover; hover has no meaning on a phone, so the press is where the sweep belongs) */
  .actionbar-m a,.actionbar-m button,.ctabtn,.xhop,.hopbtn,.ctabar-r .watchbtn.slim,.ctabar-r .cmpbtn2,.ctabar-r .steam.slim,.tmore,.dnamore,.seeall,.xfbtn{position:relative;overflow:hidden}
  .actionbar-m a:active::after,.actionbar-m button:active::after,.ctabtn:active::after,.xhop:active::after,.hopbtn:active::after,.ctabar-r .watchbtn.slim:active::after,.ctabar-r .cmpbtn2:active::after,.ctabar-r .steam.slim:active::after,.tmore:active::after,.dnamore:active::after,.seeall:active::after,.xfbtn:active::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-101%);animation:sweep .2s var(--ease) forwards;pointer-events:none}
  /* P7: compare — row labels stay put while the game columns scroll sideways */
  .cmptbl th:first-child{position:sticky;left:0;z-index:1;background:var(--bg);padding-right:10px}
  .cmptbl td{min-width:130px}
  /* P5b: Tag DNA — the bar gets the flexible column (it was 10 px at 390: tag 170 + note 90 + gaps), top 6 rows + toggle */
  .dnarow{grid-template-columns:auto minmax(60px,1fr) auto;gap:10px}
  .dna:not(.open) .dnarow:nth-child(n+7){display:none}
  /* P5c: More like this — two columns of compact cards (score rail across the top) ≈ 220 px per row of two */
  .ngrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ncard{flex-direction:column}
  .nrail{flex:none;flex-direction:row;justify-content:flex-start;gap:8px;padding:4px 8px;border-right:0;border-bottom:1px solid var(--border-subtle)}
  .nrail .msq-wrap.w-36{flex-direction:row;gap:6px}
  .nrail .tierword{max-width:none;font-size:11px}
  .ncard .nbody{padding:8px;gap:4px}
  .ncard .hopbtn{align-self:stretch;justify-content:center}
  /* P5a: the trend strip opens as a three-cell summary (label, value, delta); "Show details" expands to the full cards */
  .tstrip:not(.open){grid-template-columns:repeat(3,minmax(0,1fr))}
  .tstrip:not(.open) .tcard{min-height:0;padding:10px 6px 8px;gap:4px}
  .tstrip:not(.open) .tcard .ts,.tstrip:not(.open) .tcard .tfoot,.tstrip:not(.open) .tcard .spark,.tstrip:not(.open) .tcard .tbadge,.tstrip:not(.open) .tattr-row{display:none}
  .tstrip:not(.open) .tv{font-size:20px}
  .tstrip:not(.open) .tcard .tl{font-size:10px;letter-spacing:.4px}
  .tstrip:not(.open) .tval{gap:4px 6px}
  .tstrip:not(.open) .kdelta{font-size:10px;padding:0 5px}
  .tmore,.dnamore{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;margin:6px 0 0;border:1px solid var(--border);background:none;color:var(--link);font:500 13px Ubuntu,'Segoe UI',system-ui,sans-serif;cursor:pointer;border-radius:0}
  .tmore{margin-top:0;border-top:0;width:100%;justify-content:center}
  /* readability lifts from the final scoring: 16 px description; the top three tags ride in the hero (phones only) */
  .gdesc{font-size:16px;line-height:1.55}
  .gh-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .gh-tags span{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-primary);border:1px solid color-mix(in srgb,var(--text-primary) 45%,transparent);padding:2px 7px;background:rgba(0,0,0,.35)}
  .gh-tags span.rare{color:var(--gem);border-color:color-mix(in srgb,var(--gem) 60%,transparent)}
  /* explore crumbs (phones only): Home › Explore › Games like X */
  .xcrumbs{grid-column:1 / -1;grid-row:1;margin:0 0 -3px;font-size:12px;line-height:16px}
  .xctx-m{row-gap:6px}
  .xctx{margin-bottom:4px}
  .xaddbtn{white-space:nowrap;min-height:40px}   /* "+ Add game" wrapped inside itself at 320; it wraps to the next line instead, and is a 40 px target */
  .xctx-m h1{grid-row:2}.xctx-m .xhero-l{grid-row:2}.xctx-m .xseedrow{grid-row:3}
}
@media(min-width:561px){.gh-tags,.xcrumbs{display:none}}
/* P4: the filter sheet is a bottom sheet on phones with room to see the results and the count behind it */
@media(max-width:560px) and (min-height:480px){
  .xlayer{top:auto;bottom:0;height:min(50vh,400px);border-top:1px solid var(--border)}   /* half the screen on every phone height (400 px = 47% at 844, 284 px at 568); only landscape phones get the full sheet */
  body.xlayer-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:59}
}
@media(min-width:561px){.tmore,.dnamore{display:none}}
/* below 376 px the row's content box (viewport − 40 − 20) cannot hold title + score + rating on one line: the rating takes
   its own line again; below 341 the second tag chip goes so the tags + hop still share a line */
@media(max-width:375px){.c-sig{order:4;flex:0 0 100%}}
@media(max-width:360px){.xhop{padding:0 8px;font-size:12px}.navlinks{padding:8px 4px;margin:-8px -4px}.navlinks a{padding:12px 4px;margin:-8px -2px}.navlinks a:focus-visible{outline-offset:-2px}.uchip::before{inset:-7px}}   /* the links row clips (it scrolls), so it grows to 44 px to hold the links' 44 px hit boxes; the focus ring draws just inside that box */   /* 12 px links and 32 px chips there: keep the 44 px hit boxes */
@media(max-width:340px){.c-tg{flex-basis:45%}.c-tg .xwhy:nth-child(2){display:none}.c-nm .dev{display:none}.c-sim .bd{display:none}.xr{padding:4px 10px;gap:2px 8px}.xaddbtn,.xseedrow .xseed{min-height:36px}.xaddbtn{padding:0 8px}}   /* ≤340: the developer line and the tier word go (the score keeps its colour), the row tightens to ~100 px, the developer line goes (as it already does at 761–1100) and the row tightens to ~100 px, so four full rows fit a 320×667 screen */
/* ≤360: the Explore head (24 px three-line title beside a 120 px cover) cost 128 px; a 20 px full-width title costs ~80,
   which is the difference between two and three full result rows on a 320×667 screen */
@media(max-width:360px){.xctx-m .xhero-l{display:none}.xctx-l h1,.xctx-m h1{font-size:20px;line-height:25px}}

/* Text inputs show focus once (2026-09-30, Evan: "remove double focus border on all input boxes"): the amber border plus the
   faint halo the home search box already uses. The outline rings — global amber (line ~43), nav violet (#omniIn, ~253),
   filter-panel accent (.xlayer/.xbar/.xpop, ~477) — are for links and buttons; on an input they framed the border a second
   time. Wrapped in :is(#omniIn, …) so this (1,1,0) rule outranks those and, being last, wins the tie with #omniIn's own.
   The home search's inner input keeps its border-less look (the wrapper shows focus); sliders keep the outline (no border). */
:is(#omniIn,.xbar input,.xpop input,.xlayer input,#xapplied input,input):not([type=range],[type=checkbox],[type=radio],.searchbox input):is(:focus,:focus-visible){outline:none;border-color:var(--gem);box-shadow:0 0 0 3px var(--gem-bg)}
/* == trends-align region (builder CSS; later rules win) == */
/* == tk-kitA == */
.ta-c-amber { stroke: var(--accent); fill: var(--accent); }
.ta-c-violet { stroke: var(--match); fill: var(--match); }
.ta-c-teal { stroke: var(--freshness); fill: var(--freshness); }
.ta-c-coral { stroke: var(--warning); fill: var(--warning); }
.ta-band { fill: var(--match); opacity: 0.12; }
.ta-area { fill: var(--freshness); opacity: 0.15; }
.ta-mk { stroke: var(--border); stroke-dasharray: 4 3; stroke-width: 1.5; }
.ta-mk-l { fill: var(--text-secondary); font-size: 10px; }
.ta-base { stroke: var(--border); stroke-width: 1; }
/* == tk-kitB == */
.ta-c-amber { stroke: var(--accent); fill: var(--accent); }
.ta-c-violet { stroke: var(--match); fill: var(--match); }
.ta-c-teal { stroke: var(--freshness); fill: var(--freshness); }
.ta-c-coral { stroke: var(--warning); fill: var(--warning); }
.ta-band { fill: var(--match); opacity: 0.12; }
.ta-area { fill: var(--freshness); opacity: 0.15; }
.ta-mk { stroke: var(--border); stroke-dasharray: 4 3; stroke-width: 1.5; }
.ta-mk-l { fill: var(--text-secondary); font-size: 10px; }
.ta-base { stroke: var(--border); stroke-width: 1; }
/* == tk-kitD == */
.ta-c-amber { stroke: var(--accent); fill: var(--accent); }
.ta-c-violet { stroke: var(--match); fill: var(--match); }
.ta-c-teal { stroke: var(--freshness); fill: var(--freshness); }
.ta-c-coral { stroke: var(--warning); fill: var(--warning); }
.ta-band { fill: var(--match); opacity: 0.12; }
.ta-area { fill: var(--freshness); opacity: 0.15; }
.ta-mk { stroke: var(--border); stroke-dasharray: 4 3; stroke-width: 1.5; }
.ta-mk-l { fill: var(--text-secondary); font-size: 10px; }
.ta-base { stroke: var(--border); stroke-width: 1; }
/* == tpg-page == */
.ta-hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 8px; }
.ta-hdr h1 { margin: 0; flex: 1 1 auto; }
.ta-hdr .tsub { width: 100%; color: var(--text-secondary); font-size: 14px; }
.ta-hdr-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.ta-claim { border-left: 3px solid var(--accent); padding-left: 12px; margin: 8px 0 16px; font-size: 15px; color: var(--text-secondary); }
.ta-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); display: flex; gap: 4px; flex-wrap: wrap; }
.ta-tab { min-height: 200px; }
.ta-share { font-size: 13px; }
.ta-v-amber { color: var(--accent); }
.ta-v-violet { color: var(--match); }
.ta-v-teal { color: var(--freshness); }
.ta-v-coral { color: var(--warning); }
.ta-compare .ta-lb-r.ta-me { border-left-color: var(--accent); background: var(--gem-bg); }
.ta-compare .ta-sc { border-left: 2px solid var(--accent); }
@media (max-width: 760px) {
  .ta-hdr-ctl { width: 100%; justify-content: flex-start; }
  .ta-hdr .tsub { font-size: 13px; }
}
/* == tsp-strip == */
.tstrip-foot .tcells {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  align-items: center;
}
.tstrip-foot .tcells .ta-seg {
  margin-right: 8px;
}
.tstrip-foot .tcta {
  margin-left: auto;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .tstrip-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .tstrip-foot .tcells {
    flex-direction: column;
    align-items: flex-start;
  }
  .tstrip-foot .tcta {
    margin-left: 0;
  }
}
/* == tsp-strip == */
.ta-strip-wrap {
  margin-top: 16px;
}
.ta-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ta-strip[data-n="1"] > .ta-card {
  flex: 1 1 100%;
}
.ta-strip[data-n="2"] > .ta-card {
  flex: 1 1 calc(50% - 8px);
}
.ta-strip[data-n="3"] > .ta-card {
  flex: 1 1 calc(33.333% - 11px);
}
.ta-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ta-card .tl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ta-card .tl span:first-child {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.ta-card .tbadge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-muted);
}
.ta-card .trow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ta-card .tval {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ta-card .tv {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.ta-card .tv.amber { color: var(--accent); }
.ta-card .tv.violet { color: var(--match); }
.ta-card .tv.teal { color: var(--freshness); }
.ta-card .ta-spark {
  width: 100%;
  height: 40px;
  min-width: 120px;
}
.ta-card .ts {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ta-card .tfoot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.ta-card .tcard-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tstrip-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tstrip-foot .tcells {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.tstrip-foot .tcta {
  margin-left: auto;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .ta-strip {
    flex-direction: column;
  }
  .ta-strip[data-n] > .ta-card {
    flex: 1 1 100%;
  }
  .ta-card .ta-spark {
    height: 34px;
  }
  .tstrip-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .tstrip-foot .tcta {
    margin-left: 0;
  }
}
/* == trends-align region (builder CSS; later rules win) == */
.ta-strip-wrap {
  margin-top: 16px;
}
.ta-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ta-strip[data-n="1"] > .ta-card {
  flex: 1 1 100%;
}
.ta-strip[data-n="2"] > .ta-card {
  flex: 1 1 calc(50% - 8px);
}
.ta-strip[data-n="3"] > .ta-card {
  flex: 1 1 calc(33.333% - 11px);
}
.ta-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ta-card .tl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ta-card .tl span:first-child {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.ta-card .tbadge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-muted);
}
.ta-card .trow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ta-card .tval {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ta-card .tv {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.ta-card .tv.amber { color: var(--accent); }
.ta-card .tv.violet { color: var(--match); }
.ta-card .tv.teal { color: var(--freshness); }
.ta-card .ta-spark {
  width: 100%;
  height: 40px;
  min-width: 120px;
}
.ta-card .ts {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ta-card .tfoot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.ta-card .tcard-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media (max-width: 760px) {
  .ta-strip {
    flex-direction: column;
  }
  .ta-strip[data-n] > .ta-card {
    flex: 1 1 100%;
  }
  .ta-card .ta-spark {
    height: 34px;
  }
}
/* == tov-overview == */
/* tov-overview: Overview lane styles — cascade wins */
.ta-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ta-kpis .ta-kpi { flex: 1 1 180px; min-width: 160px; }
.ta-v-amber { color: var(--accent, #ffcf5c); }
.ta-v-violet { color: var(--match, #8a83e0); }
.ta-v-teal { color: var(--freshness, #3fd4b4); }
.ta-kpi .kpi-row .spark { flex-shrink: 0; align-self: flex-end; }
.ta-kpi .ta-delta { font-family: 'Ubuntu Mono', ui-monospace, monospace; font-size: 11px; margin-left: 4px; }
.ta-kpi .ta-delta.up { color: var(--freshness); }
.ta-kpi .ta-delta.down { color: var(--warning); }
.ta-kpi .ta-delta.flat { color: var(--text-secondary); }
.ta-kpi.ta-kpi-primary { border-top: 2px solid var(--accent) !important; box-shadow: none !important; }
.ta-block .ta-insight { margin-top: 8px; padding: 8px 12px; background: var(--surface, #1a1a2e); border-left: 3px solid var(--accent, #ffcf5c); font-size: 13px; line-height: 1.5; color: var(--text-secondary, #a0a0b0); }
.ta-block .ta-note { margin-top: 4px; font-size: 11px; color: var(--text-muted, #707080); text-align: center; }
.ta-block .ta-block-sub { font-size: 12.5px; }
/* == trv-reviews == */
.ta-ctlrow { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.ta-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ta-kpis .kpi { flex: 1; min-width: 160px; }
.ta-support { margin-top: 16px; }
.ta-span-12 { grid-column: span 12; }
.ta-span-8 { grid-column: span 8; }
.ta-span-4 { grid-column: span 4; }
@media (max-width: 760px) {
  .ta-span-12, .ta-span-8, .ta-span-4 { grid-column: span 12; }
}
.ta-block .ta-insight { margin-top: 8px; padding: 8px 12px; background: var(--surface, #1a1a2e); border-left: 3px solid var(--accent, #ffcf5c); font-size: 13px; line-height: 1.5; color: var(--text-secondary, #a0a0b0); }
.ta-block .ta-note { margin-top: 4px; font-size: 11px; color: var(--text-muted, #707080); text-align: center; }
.ta-block .ta-block-sub { font-size: 12.5px
}
/* == tst-steam == */
.ta-ctlrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ta-kpis { display: flex; flex-wrap: wrap; gap: 16px; }
.ta-kpis .kpi { flex: 1; min-width: 180px; }
.ta-v-violet { color: var(--match); }
.ta-support { margin-top: 16px; }
.ta-block .ta-block-hd .ta-delta-chip { display: inline-block; margin-left: 8px; }
/* == ttw-twitch == */
/* == ttw-twitch == */
.ta-ctlrow {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.ta-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 760px) {
  .ta-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ta-v-teal {
  color: var(--freshness, #3fd4b4);
}
.ta-v-amber {
  color: var(--accent, #ffcf5c);
}
.ta-v-coral {
  color: var(--warning, #e85463);
}
.ta-v-violet {
  color: var(--match, #8a83e0);
}
.ta-insight {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--surface, #1a1a2e);
  border-left: 3px solid var(--freshness, #3fd4b4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #a0a0b0);
}
.ta-note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted, #707080);
  text-align: center;
}
.ta-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border: 1px dashed var(--border, #333);
  border-radius: 4px;
  padding: 16px;
}
.ta-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted, #707080);
  font-size: 13px;
}
.ta-seg {
  display: flex;
  gap: 4px;
}
.ta-seg-b {
  padding: 4px 12px;
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  background: var(--surface, #1a1a2e);
  color: var(--text, #e0e0e0);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.ta-seg-b[aria-pressed="true"] {
  background: var(--freshness, #3fd4b4);
  color: #000;
  border-color: var(--freshness, #3fd4b4);
}
.ta-seg-b:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tlinks {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
}
.tlinks .tlink {
  color: var(--freshness, #3fd4b4);
  text-decoration: none;
}
.tlinks .tlink:hover {
  text-decoration: underline;
}
/* == ts-grid == */
.ta-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin:0 0 30px}
.ta-grid > *{grid-column:span 12}
.ta-span-12{grid-column:span 12}
.ta-span-8{grid-column:span 8}
.ta-span-6{grid-column:span 6}
.ta-span-4{grid-column:span 4}
.ta-grid > .ta-block{margin:0;min-width:0}
.ta-block{margin:0 0 30px}
@media(max-width:760px){.ta-span-12,.ta-span-8,.ta-span-6,.ta-span-4{grid-column:span 12}}
/* == ts-block == */
.ta-block{background:var(--surface);border:1px solid var(--border-subtle);padding:16px;min-width:0}
.ta-block-hd{display:flex;justify-content:space-between;align-items:start;gap:12px}
.ta-block-t{font-size:15px;font-weight:700;margin:0}
.ta-block-sub{font-size:12.5px;color:var(--text-secondary);margin:2px 0 10px}
.ta-insight{border-left:3px solid var(--accent);background:var(--gem-bg);padding:8px 12px;font-size:13px;margin-top:10px}
.ta-note{font-size:11.5px;color:var(--text-secondary)}
.ta-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.ta-sw{display:inline-block;width:10px;height:10px;vertical-align:middle}
.ta-sw.ta-c-amber{background:var(--accent)}
.ta-sw.ta-c-violet{background:var(--match)}
.ta-sw.ta-c-teal{background:var(--freshness)}
.ta-sw.ta-c-coral{background:var(--warning)}
.ta-support{border-left-color:var(--border-subtle)}
/* == ts-chart == */
.ta-chart .ta-c-amber{stroke:var(--accent);fill:none;stroke-width:2}
.ta-chart .ta-c-violet{stroke:var(--match);fill:none;stroke-width:2}
.ta-chart .ta-c-teal{stroke:var(--freshness);fill:none;stroke-width:2}
.ta-chart .ta-c-coral{stroke:var(--warning);fill:none;stroke-width:2}
.ta-chart .ta-area.ta-c-amber{fill:var(--accent);fill-opacity:.18}
.ta-chart .ta-area.ta-c-violet{fill:var(--match);fill-opacity:.18}
.ta-chart .ta-area.ta-c-teal{fill:var(--freshness);fill-opacity:.22}
.ta-chart .ta-area.ta-c-coral{fill:var(--warning);fill-opacity:.18}
.ta-chart rect.ta-c-amber{fill:var(--accent)}
.ta-chart rect.ta-c-violet{fill:var(--match)}
.ta-chart rect.ta-c-teal{fill:var(--freshness)}
.ta-chart rect.ta-c-coral{fill:var(--warning)}
.ta-band{fill:var(--violet-tint)}
.ta-mk{stroke:var(--text-secondary);stroke-dasharray:3 3}
.ta-mk-stream{stroke:var(--freshness)}
.ta-mk-list{stroke:var(--match)}
.ta-mk-reviews{stroke:var(--accent)}
.ta-mk-l{font-size:10px;fill:var(--text-secondary)}
.ta-base{stroke:var(--chart-grid)}
.ta-frame{min-height:220px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-secondary)}
.ta-chart text{fill:var(--text-secondary);font-size:11px}
.ta-chart text.r{text-anchor:end}
.ta-chart .chart-xlbl span:first-child{text-align:left}
.ta-chart .chart-xlbl span:last-child{text-align:right}
.ta-chart .chart-xlbl{display:flex;justify-content:space-between;padding:4px 62px 0;font-size:11px;color:var(--text-secondary)}
.ta-histogram text{font-size:11px}
.ta-histogram .chart-xlbl span{white-space:nowrap}
.ta-xlbl-rot{transform:rotate(-30deg);transform-origin:left center}
/* == ts-kpi == */
.kpi.ta-kpi{background:var(--surface);border:1px solid var(--border);padding:14px 16px;display:flex;flex-direction:column;gap:5px;min-height:104px}
.kpi.ta-kpi.ta-kpi-primary{box-shadow:inset 0 3px 0 var(--accent)}
.ta-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.ta-kpis .kpi.ta-kpi{flex:none;min-width:0}
.ta-kpi .kpi-l{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
.ta-kpi .kpi-v{font-family:'Ubuntu Mono',ui-monospace,monospace;font-weight:700;font-size:28px;line-height:1.1;color:var(--text-primary)}
.ta-kpi .kpi-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ta-kpi .kpi-s{font-size:12px;color:var(--text-secondary);line-height:1.4}
.ta-v-amber{color:var(--accent)}
.ta-v-violet{color:var(--match)}
.ta-v-teal{color:var(--freshness)}
.ta-v-coral{color:var(--warning)}
.ta-delta{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:11px}
.ta-delta.up{color:var(--freshness)}
.ta-delta.down{color:var(--warning)}
.ta-delta.flat{color:var(--text-secondary)}
.kpi-row .spark{flex-shrink:0;align-self:flex-end}
@media(max-width:560px){
  .ta-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ta-kpis .kpi.ta-kpi{min-width:0}
  .ta-kpi .kpi-row{flex-wrap:wrap}
}
/* == ts-chip == */
.ta-chip{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;border:1px solid;padding:1px 6px;border-radius:0}
.ta-chip-amber{color:var(--accent);border-color:var(--accent);background:var(--gem-bg)}
.ta-chip-violet{color:var(--match);border-color:var(--match);background:var(--violet-tint)}
.ta-chip-teal{color:var(--freshness);border-color:var(--freshness);background:rgba(63,212,180,.08)}
.ta-chip-coral{color:var(--warning);border-color:var(--warning);background:rgba(232,84,99,.08)}
.ta-chip-muted{color:var(--text-secondary);border-color:var(--border);background:transparent}
.ta-chip-release{color:var(--text-secondary);border-color:var(--border);background:transparent}
.ta-chip-list{color:var(--match);border-color:var(--match);background:var(--violet-tint)}
.ta-chip-stream{color:var(--freshness);border-color:var(--freshness);background:rgba(63,212,180,.08)}
.ta-chip-reviews{color:var(--accent);border-color:var(--accent);background:var(--gem-bg)}
.ta-chip-data{color:var(--text-secondary);border-color:var(--border);background:transparent}
/* == ts-controls == */
.ta-seg{display:inline-flex;border:1px solid var(--border);border-radius:0}
.ta-seg-b{background:none;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:12px;padding:5px 11px;color:var(--text-secondary);min-height:32px;border:0;cursor:pointer}
.ta-seg-b[aria-pressed="true"]{color:var(--text-primary);background:var(--gem-bg);box-shadow:inset 0 -2px 0 var(--accent)}
.ta-seg-b:disabled{opacity:.45;cursor:not-allowed}
.ta-seg-b:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ta-hdr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px}
.ta-hdr-ctl{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ta-ctlrow{display:flex;justify-content:flex-end;gap:8px;margin:0 0 12px}
[data-ta-view][hidden]{display:none!important}
.ta-controls{overflow-x:auto;white-space:nowrap}
@media(max-width:560px){.ta-seg-b{min-height:44px}}
/* == ts-claim == */
.ta-claim{border-left:3px solid var(--accent);padding:8px 14px;font-size:15px;margin:14px 0 18px;background:var(--surface)}
.ta-foot{font-size:12px;color:var(--text-secondary);margin:24px 0 0}
.ta-foot .mono{color:var(--freshness)}
/* == ts-lists == */
.ta-events{list-style:none;padding:0;margin:0}
.ta-ev{display:grid;grid-template-columns:96px auto 1fr auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--border-subtle)}
.ta-ev-d{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:12px}
.ta-ev-e{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:12px;color:var(--text-secondary)}
.ta-lb{list-style:none;padding:0;margin:0}
.ta-lb-r{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;padding:7px 8px;align-items:center}
.ta-me{background:var(--gem-bg);border-left:3px solid var(--accent)}
.ta-cmp{background:var(--violet-tint)}
.ta-lb-n,.ta-lb-v{font-family:'Ubuntu Mono',ui-monospace,monospace}
.ta-lb-s{font-size:11.5px;color:var(--text-secondary);grid-column:2 / -1}
.ta-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border-subtle)}
.ta-sc{background:var(--surface);padding:12px}
.ta-sc-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.ta-sc-v{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:18px;font-weight:600}
.ta-sc-s{font-size:12px;color:var(--text-secondary)}
.ta-empty{font-size:13px;color:var(--text-secondary);padding:18px 0;text-align:center}
.ta-sc-row{display:grid;grid-template-columns:1fr;gap:12px}
.ta-sc-row .ta-sc-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.ta-sc-row .ta-sc-v{font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:18px;font-weight:600}
.ta-sc-row .ta-sc-s{font-size:12px;color:var(--text-secondary)}
@media(max-width:560px){
  .ta-ev{grid-template-columns:80px 1fr}
  .ta-ev .ta-ev-d{grid-column:1}
  .ta-ev .ta-chip{grid-column:1}
  .ta-ev .ta-ev-l{grid-column:2;grid-row:1}
  .ta-ev .ta-ev-e{grid-column:2;grid-row:2;text-align:right}
  .ta-lb-r{grid-template-columns:24px 1fr auto}
}
/* == ts-lanes == */
.ta-lanes{border:1px solid var(--border-subtle);background:var(--surface);padding:14px 16px}
.ta-lanes .lane.untracked{opacity:.5}
.ta-lanes .lane.untracked .lane-t{border-bottom:1px dashed var(--border-subtle)}
.ta-lanes .lane-bar{background:var(--match);color:var(--bg);font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10px;line-height:14px;padding:0 6px;white-space:nowrap;overflow:hidden}
.ta-lanes .lane.untracked .lane-t .lane-bar{background:transparent;border:1px dashed var(--border-subtle);color:var(--text-secondary)}
/* == ts-strip == */
.tstrip.ta-strip[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.tstrip.ta-strip[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.tstrip.ta-strip[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ta-card .spark{display:block;width:100%;height:40px}
.tcard .tl{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.tcard .tl .tbadge{margin-left:auto}
.tfoot{display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}
.tcard-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tstrip-foot .ta-seg{justify-content:flex-start}
.tstrip-foot .tcta{margin-left:auto}
/* == ts-phone == */
@media(max-width:760px){
  .tstrip.ta-strip{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .tstrip:not(.open){grid-template-columns:minmax(0,1fr)}
  .tstrip:not(.open) .tcard{min-height:0;padding:14px 16px;gap:6px}
  .tstrip:not(.open) .tcard .ts,.tstrip:not(.open) .tcard .tfoot,.tstrip:not(.open) .tcard .tbadge{display:revert}
  .tstrip:not(.open) .tcard .spark{display:block;width:100%;height:40px}
  .tstrip:not(.open) .tv{font-size:28px}
  .ta-hdr-ctl{width:100%;justify-content:flex-start}
  .ta-seg{flex-wrap:wrap}
  .ta-ev{grid-template-columns:80px 1fr}
  .ta-lb-r{grid-template-columns:24px 1fr auto}
  .ta-claim{font-size:14px}
  .ta-controls{overflow-x:auto;white-space:nowrap}
}
/* == tk-kit == */
.ta-c-amber { stroke: var(--accent); fill: var(--accent); }
.ta-c-violet { stroke: var(--match); fill: var(--match); }
.ta-c-teal { stroke: var(--freshness); fill: var(--freshness); }
.ta-c-coral { stroke: var(--warning); fill: var(--warning); }
.ta-band { fill: var(--match); opacity: 0.12; }
.ta-area { fill: var(--freshness); opacity: 0.15; }
.ta-mk { stroke: var(--border); stroke-dasharray: 4 3; stroke-width: 1.5; }
.ta-mk-l { fill: var(--text-secondary); font-size: 10px; }
.ta-base { stroke: var(--border); stroke-width: 1; }
/* == tst-steam-fix == */
.ta-block .ta-block-hd .ta-delta-chip {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
.ta-block .ta-block-hd .ta-delta {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
.ta-block .ta-block-hd .ta-delta.up { color: var(--freshness); }
.ta-block .ta-block-hd .ta-delta.down { color: var(--warning); }
.ta-block .ta-block-hd .ta-delta.flat { color: var(--text-secondary); }
/* == ts-scorecard == */
.ta-scorecard-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.ta-scorecard-row > div {
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ta-scorecard-row .scr-l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ta-scorecard-row .scr-v {
  font-family: 'Ubuntu Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
}
.ta-scorecard-row .scr-s {
  font-size: 12px;
  color: var(--text-secondary);
}
/* == ts-lb-row == */
.ta-lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 10px;
  padding: 7px 8px;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}
.ta-lb-row.ta-me {
  background: var(--gem-bg);
  border-left: 3px solid var(--accent);
}
.ta-lb-row .ta-lb-n,
.ta-lb-row .ta-lb-v {
  font-family: 'Ubuntu Mono', ui-monospace, monospace;
}
.ta-lb-row .ta-lb-s {
  font-size: 11.5px;
  color: var(--text-secondary);
  grid-column: 2 / -1;
}
/* == ts-chart-xlbl == */
.ta-chart .chart-xlbl {
  display: flex;
  justify-content: space-between;
  font-family: 'Ubuntu Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 8px 0;
}
.ta-chart .chart-xlbl span:first-child {
  text-align: left;
  transform: none;
}
.ta-chart .chart-xlbl span:last-child {
  text-align: right;
}
.ta-chart .chart-xlbl span {
  position: relative;
  white-space: nowrap;
}
/* == ts-controls-fix == */
.ta-seg-b {
  font-family: 'Ubuntu Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  padding: 5px 11px;
  min-height: 32px;
  cursor: pointer;
  border-radius: 0;
}
.ta-seg-b[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--gem-bg);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.ta-seg-b:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.ta-seg-b:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* == ts-card-foot == */
.tcard .tfoot.ta-card-foot {
  display: flex;
  justify-content: space-between;
  font-family: 'Ubuntu Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: auto;
}
.tcard .tfoot.ta-card-foot span {
  white-space: nowrap;
}
/* == ts-phone-fix == */
@media (max-width: 560px) {
  .ta-hdr-ctl {
    width: 100%;
    justify-content: flex-start;
  }
  .ta-seg {
    flex-wrap: wrap;
  }
  .ta-strip .tcard {
    width: 100%;
  }
  .ta-chart .chart-xlbl span {
    font-size: 10px;
  }
  .ta-kpis .kpi.ta-kpi {
    min-width: 0;
  }
  .ta-kpi .kpi-row {
    flex-wrap: wrap;
  }
  .ta-lb-row {
    grid-template-columns: 24px 1fr auto;
  }
  .ta-ev {
    grid-template-columns: 80px 1fr;
  }
  .ta-claim {
    font-size: 14px;
  }
  .ta-scorecard-row {
    grid-template-columns: 1fr;
  }
}
/* == ts-kpi-fix == */
.kpi.ta-kpi.ta-kpi-primary,
.kpi.primary.ta-kpi-primary {
  border-top: 2px solid var(--accent) !important;
  box-shadow: none !important;
}
.ta-kpis .kpi.primary {
  border-top: 2px solid var(--accent) !important;
  box-shadow: none !important;
}
/* == ts-chart-fix == */
.ta-chart.ta-area path.ta-area,
.ta-chart .ta-area path.area {
  fill: var(--freshness);
  fill-opacity: 0.22;
}
.ta-chart.ta-area polyline,
.ta-chart .ta-area polyline,
.ta-chart.ta-area path.ta-line,
.ta-chart .ta-area path.ta-line {
  stroke: var(--freshness);
  stroke-width: 2;
  fill: none;
}
.ta-chart text {
  fill: var(--text-secondary);
  font-size: 11px;
}
.ta-rank text {
  font-size: 11px;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ta-histogram text {
  font-size: 11px;
}
.ta-histogram .chart-xlbl span {
  white-space: nowrap;
}
.ta-histogram .chart-xlbl span.ta-xlbl-rot {
  transform: rotate(-30deg);
  transform-origin: left center;
}
/* == ts-kpi-delta == */
.ta-kpi .ta-delta {
  font-family: 'Ubuntu Mono', ui-monospace, monospace;
  font-size: 11px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}
.ta-kpi .ta-delta.up {
  color: var(--freshness);
}
.ta-kpi .ta-delta.down {
  color: var(--warning);
}
.ta-kpi .ta-delta.flat {
  color: var(--text-secondary);
}
.ta-kpi .kpi-row .spark {
  flex-shrink: 0;
  align-self: flex-end;
}
/* == ts-kpi-spark == */
.ta-kpis .kpi .kpi-row .spark {
  flex-shrink: 0;
  align-self: flex-end;
  display: inline-block;
}
.ta-kpis .kpi .kpi-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.ta-kpis .kpi .kpi-v {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.ta-kpis .kpi .kpi-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.ta-kpis .kpi .kpi-s {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
/* == ts-phone-kpi == */
@media (max-width: 560px) {
  .ta-kpis .kpi.ta-kpi {
    min-width: 0;
  }
  .ta-kpi .kpi-row {
    flex-wrap: wrap;
  }
  .ta-kpis .kpi .kpi-row .spark {
    flex: 0 0 auto;
  }
}
/* == txkit css == */
.tx *{box-sizing:border-box}
.tx{margin:0;background:#0f0e12;color:#f2f0ed;font-family:Ubuntu,'Segoe UI',system-ui,sans-serif;font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
.tx .mono,.tx .kv,.tx .ed,.tx .rk,.tx .sv,.tx .gf,.tx .foot,.tx .fresh,.tx .ax,.tx .ks b{font-family:'Ubuntu Mono',ui-monospace,monospace}
.tx .nl{color:#a5a0a8;font-size:14px}
.tx .content{width:1104px;margin:0 auto;padding:22px 0 40px}
.tx.m .content{width:358px;padding:14px 0 28px}
@media (max-width: 720px){ .tx.tx .content{width:358px;padding:14px 0 28px} }
.tx .crumbs{font-size:12px;color:#a5a0a8;margin-bottom:14px}
.tx .crumbs b{color:#f2f0ed;font-weight:600}
.tx h1{font-size:26px;margin:0 0 4px;font-weight:700}
.tx h1 span{font-weight:400;color:#a5a0a8;font-size:20px}
.tx.m h1{font-size:22px}
@media (max-width: 720px){ .tx.tx h1{font-size:22px} }
.tx.m h1 span{font-size:16px}
@media (max-width: 720px){ .tx.tx h1 span{font-size:16px} }
.tx .ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.tx.m .ph{flex-direction:column;align-items:flex-start;gap:8px}
@media (max-width: 720px){ .tx.tx .ph{flex-direction:column;align-items:flex-start;gap:8px} }
.tx .q{font-size:14px;color:#a5a0a8}
.tx .ctls,.tx .tctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tx .tctl{margin:-4px 0 12px}
.tx .seg{display:inline-flex;border:1px solid #36333e}
.tx .seg b{font-weight:500;font-size:12px;padding:5px 10px;color:#a5a0a8;font-family:'Ubuntu Mono',monospace}
.tx .seg b.on{background:#242233;color:#f2f0ed}
.tx .seg b+b{border-left:1px solid #36333e}
.tx .ctl{font-size:12px;padding:5px 10px;border:1px solid #36333e;color:#a5a0a8;white-space:nowrap}
.tx .ctlg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tx .ctll{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b6674}
.tx .hrow{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.tx .hrow .hl{margin:0;flex:1;min-width:0}
.tx .hrow .tctl{margin:0;flex:none;justify-content:flex-end}
.tx .hrow.stack{flex-direction:column;align-items:flex-start;gap:10px}
.tx .hrow.stack .tctl{align-self:flex-end}
.tx.m .hrow .tctl{align-self:flex-start;flex-wrap:wrap}
@media (max-width: 720px){ .tx.tx .hrow .tctl{align-self:flex-start;flex-wrap:wrap} }
.tx .tabs{display:flex;gap:4px;margin:0 0 18px;font-size:14px}
.tx .tabs a{padding:8px 14px;color:#a5a0a8;font-weight:500;white-space:nowrap}
.tx .tabs a.on{color:#f2f0ed}
.tx .tabs.underline{border-bottom:1px solid #36333e;gap:0}
.tx .tabs.underline a{border-bottom:2px solid transparent;margin-bottom:-1px}
.tx .tabs.underline a.on{border-bottom-color:#ffcf5c}
.tx .tabs.pills{gap:8px}
.tx .tabs.pills a{border:1px solid #36333e;padding:6px 12px}
.tx .tabs.pills a.on{border-color:#ffcf5c;color:#ffcf5c;background:rgba(255,207,92,.08)}
.tx .tabs.segmented{gap:0;border:1px solid #36333e;width:max-content}
.tx .tabs.segmented a{border-right:1px solid #36333e;padding:7px 16px}
.tx .tabs.segmented a:last-child{border-right:0}
.tx .tabs.segmented a.on{background:#242233}
.tx .tabs.sidebar{flex-direction:column;gap:2px}
.tx .tabs.sidebar a{border-left:3px solid transparent;padding:9px 12px}
.tx .tabs.sidebar a.on{border-left-color:#ffcf5c;background:#1a1920}
.tx .layout{display:flex;gap:24px;align-items:flex-start}
.tx .side{width:200px;flex:none;position:sticky;top:0}
.tx .main{width:880px}
.tx.m .tabs{overflow:hidden;margin-bottom:14px}
@media (max-width: 720px){ .tx.tx .tabs{overflow:hidden;margin-bottom:14px} }
.tx.m .tabs a{padding:7px 10px;font-size:13px}
@media (max-width: 720px){ .tx.tx .tabs a{padding:7px 10px;font-size:13px} }
.tx .hl{font-size:15px;color:#f2f0ed;margin:0 0 12px;padding-left:10px;border-left:3px solid #ffcf5c}
.tx .kpis{display:grid;gap:var(--gap);margin-bottom:var(--gap)}
.tx .kpis.n3{grid-template-columns:repeat(3,1fr)}
.tx .kpis.n4{grid-template-columns:repeat(4,1fr)}
.tx .kpis.n5{grid-template-columns:repeat(5,1fr)}
.tx .kpis.n6{grid-template-columns:repeat(6,1fr)}
.tx.m .kpis{grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 720px){ .tx.tx .kpis{grid-template-columns:1fr 1fr;gap:10px} }
.tx.m .kpis.scroll{display:flex;overflow:hidden}
@media (max-width: 720px){ .tx.tx .kpis.scroll{display:flex;overflow:hidden} }
.tx.m .kpis.scroll .kpi{flex:none;width:170px}
@media (max-width: 720px){ .tx.tx .kpis.scroll .kpi{flex:none;width:170px} }
.tx .kpi{background:#1a1920;border:1px solid #36333e;padding:var(--pad);display:flex;flex-direction:column;gap:5px;min-width:0}
.tx .kpi.pri{border-top:2px solid #ffcf5c}
.tx .kl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a5a0a8;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .km{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.tx .kv{font-size:30px;font-weight:700;line-height:1.05;white-space:nowrap}
.tx .kpi.pri .kv{font-size:34px;color:#ffcf5c}
.tx .kv.s{font-size:22px}
.tx.d-dense .kv{font-size:26px}
.tx.m .kv{font-size:24px}
@media (max-width: 720px){ .tx.tx .kv{font-size:24px} }
.tx .kf{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
.tx .ks{font-size:12px;color:#a5a0a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .kh{font-size:11px;color:#6b6674}
.tx .kd{font-family:'Ubuntu Mono',monospace;font-size:11px;padding:2px 6px;border:1px solid;white-space:nowrap;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;box-sizing:border-box}
.tx .kd.long{font-size:10px}
.tx .kdl{min-width:0;margin:2px 0 4px;display:flex}
.tx .kf.col{flex-direction:column;align-items:flex-start;gap:4px}
.tx .kf,.tx .km{min-width:0}
.tx .km .kd{flex:0 1 auto;min-width:0}
.tx .kd.up{color:#3fd4b4;border-color:rgba(63,212,180,.45);background:rgba(63,212,180,.08)}
.tx .kd.dn{color:#e85463;border-color:rgba(232,84,99,.45);background:rgba(232,84,99,.08)}
.tx .kd.fl{color:#a5a0a8;border-color:#36333e}
.tx .kd.sp{color:#ffcf5c;border-color:rgba(255,207,92,.5);background:rgba(255,207,92,.08)}
.tx .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.tx.m .grid{grid-template-columns:1fr;gap:12px}
@media (max-width: 720px){ .tx.tx .grid{grid-template-columns:1fr;gap:12px} }
.tx .card{background:#1a1920;border:1px solid #36333e;padding:var(--pad);min-width:0;display:flex;flex-direction:column}
.tx .ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.tx .ct{font-size:14px;font-weight:600}
.tx .cs{font-size:12px;color:#a5a0a8;margin-top:2px}
.tx .lgd{display:flex;gap:12px;font-size:11px;color:#a5a0a8;white-space:nowrap;flex-wrap:wrap;justify-content:flex-end}
.tx .lgd i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.tx .cb{flex:1}
.tx .cb svg{display:block;max-width:100%;height:auto}
.tx .ins{border-left:3px solid #ffcf5c;background:rgba(255,207,92,.06);padding:8px 12px;font-size:13px;margin-top:12px;color:#f2f0ed}
.tx .cn{font-size:11px;color:#6b6674;margin-top:8px;font-family:'Ubuntu Mono',monospace}
.tx .grid line.grid,.tx line.grid{stroke:#26232e;stroke-width:1}
.tx text{fill:#f2f0ed;font-family:Ubuntu,sans-serif}
.tx text.ax{fill:#a5a0a8;font-size:11px;font-family:'Ubuntu Mono',monospace}
.tx text.mk{fill:#a5a0a8;font-size:10px}
.tx text.ann{fill:#f2f0ed;font-size:11px;font-family:'Ubuntu Mono',monospace;font-weight:700}
.tx text.lg{fill:#a5a0a8;font-size:12px}
.tx text.lb{fill:#f2f0ed;font-size:12px;font-weight:500}
.tx text.big{fill:#f2f0ed;font-size:18px;font-weight:700;font-family:'Ubuntu Mono',monospace}
.tx text.huge{fill:#ffcf5c;font-size:30px;font-weight:700;font-family:'Ubuntu Mono',monospace}
.tx .tbl{width:100%;border-collapse:collapse;font-size:13px}
.tx .tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#a5a0a8;font-weight:500;padding:6px 8px;border-bottom:1px solid #36333e}
.tx .tbl td{padding:7px 8px;border-bottom:1px solid #201e26;white-space:nowrap}
.tx .tbl tr:last-child td{border-bottom:0}
.tx .ibar{display:inline-block;width:70px;height:6px;background:#26232e;margin-left:8px;vertical-align:middle}
.tx .ibar i{display:block;height:100%;background:#8a83e0}
.tx .lead .lr{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #201e26;font-size:13px}
.tx .lead .lr:last-child{border-bottom:0}
.tx .lead .lr.me{background:rgba(138,131,224,.12);box-shadow:inset 3px 0 0 #8a83e0;margin:0;padding:7px 6px 7px 8px;border-radius:4px}
.tx .rk{color:#a5a0a8;width:34px}
.tx .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .vl{font-family:'Ubuntu Mono',monospace;font-weight:700}
.tx .insl{display:flex;flex-direction:column;gap:10px}
.tx .ii{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-left:3px solid #6b6674;background:#242233}
.tx .ii b{font-size:13px}
.tx .ii span{font-size:12.5px;color:#a5a0a8}
.tx .ii.good{border-left-color:#3fd4b4}
.tx .ii.warn{border-left-color:#e85463}
.tx .ii.live{border-left-color:#3fd4b4}
.tx .ii.neutral{border-left-color:#8a83e0}
.tx .sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tx .smi{border:1px solid #36333e;padding:10px;background:#242233;min-width:0}
.tx .smi .km{margin:2px 0 6px}
.tx .evl{display:flex;flex-direction:column}
.tx .ev{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #201e26;font-size:13px}
.tx .ev:last-child{border-bottom:0}
.tx .ed{color:#a5a0a8;font-size:12px;width:78px;flex:none}
.tx .ek{font-size:10px;text-transform:uppercase;letter-spacing:.05em;border:1px solid;padding:1px 6px;flex:none}
.tx .el{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .ee{color:#3fd4b4;font-family:'Ubuntu Mono',monospace;font-size:12px;flex:none}
.tx .sc .sr{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid #201e26;font-size:13px}
.tx .sc .sr:last-child{border-bottom:0}
.tx .sl{flex:1;color:#a5a0a8}
.tx .sv{font-weight:700;font-size:15px}
.tx .ss{font-size:11px;color:#6b6674}
.tx .txt{margin:0;font-size:13.5px;color:#a5a0a8;line-height:1.5}
.tx .unr{background:#242233;color:#a5a0a8;padding:30px;text-align:center;font-size:12px}
.tx .foot{margin-top:28px;font-size:12px;color:#3fd4b4}
.tx .hero{height:220px;border:1px solid #36333e;background:linear-gradient(100deg,#141126 0%,#1a1733 52%,#2a2450 100%);position:relative;overflow:hidden}
.tx .hero:after{content:"";position:absolute;right:-60px;top:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(138,131,224,.28),transparent 62%)}
.tx.m .hero{height:160px}
@media (max-width: 720px){ .tx.tx .hero{height:160px} }
.tx .hb{position:absolute;left:24px;bottom:22px;z-index:1}
.tx.m .hb{left:14px;bottom:14px}
@media (max-width: 720px){ .tx.tx .hb{left:14px;bottom:14px} }
.tx .ht{font-size:32px;font-weight:700;margin-bottom:4px}
.tx.m .ht{font-size:22px}
@media (max-width: 720px){ .tx.tx .ht{font-size:22px} }
.tx .hs{font-size:13px;color:#a5a0a8;margin-bottom:12px}
.tx .fresh{color:#3fd4b4;font-size:12px}
.tx .ha{display:flex;gap:8px;flex-wrap:wrap}
.tx .cta{background:#ffcf5c;color:#231d10;font-weight:700;font-size:13px;padding:8px 14px}
.tx .gh{border:1px solid #36333e;background:#1a1920;font-size:13px;padding:8px 12px;color:#f2f0ed}
.tx.m .ha .gh:nth-child(n+3){display:none}
@media (max-width: 720px){ .tx.tx .ha .gh:nth-child(n+3){display:none} }
.tx .gstrip{display:grid;gap:16px;margin-top:16px}
.tx .gstrip.ov{margin:-44px 24px 0;position:relative;z-index:2}
.tx .gstrip.ov .gc{background:#242233}
.tx.m .gstrip{gap:10px;margin-top:12px}
@media (max-width: 720px){ .tx.tx .gstrip{gap:10px;margin-top:12px} }
.tx .gc{background:#1a1920;border:1px solid #36333e;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tx .gc.cp{padding:12px}
.tx .gl{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tx .badge{font-family:'Ubuntu Mono',monospace;font-size:11px;color:#8a83e0;border:1px solid #5c58b2;background:rgba(122,114,224,.10);padding:1px 6px;white-space:nowrap}
.tx .gc .kl{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.tx .gc .ks{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.tx .gbl{margin:2px 0 4px}
.tx .gs.slot{height:40px}
.tx .gc.cp .gs.slot{height:30px}
.tx .scells .gc{height:100%}
.tx .gc .kv.fresh{font-size:17px;color:#3fd4b4}
.tx .gc.lg .ks{color:#a5a0a8}
.tx .gv{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tx .gc .kv{font-size:32px}
.tx .gc.cp .kv{font-size:24px}
.tx.m .gc .kv{font-size:26px}
@media (max-width: 720px){ .tx.tx .gc .kv{font-size:26px} }
.tx .gs{margin-top:auto;padding-top:8px}
.tx .gs svg{display:block}
.tx .gf{display:flex;justify-content:space-between;font-size:11px;color:#6b6674;margin-top:4px}
.tx .grow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.tx .grow .gcta,.tx .grow .gex{margin-top:0}
.tx .gcta{margin-top:12px;font-size:13px;color:#8a83e0;text-align:right}
.tx .gcta.btn span{display:inline-block;border:1px solid #5c58b2;padding:7px 14px;color:#8a83e0}
.tx .rail .gcta{text-align:left}
.tx .gex{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
.tx .rail .grow{flex-direction:column;align-items:flex-start}
.tx .two{display:flex;gap:24px;align-items:flex-start}
.tx .lft{width:760px}
.tx .rail{width:320px;flex:none;display:flex;flex-direction:column;gap:12px}
.tx .scells{display:grid;gap:0;margin-top:16px;border:1px solid #36333e}
.tx .scells>*{border-right:1px solid #36333e}
.tx .scells>*:last-child{border-right:0}
.tx .scells .gc{border:0}
.tx .scell{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.tx .scell .big{font-size:24px;font-weight:700;font-family:'Ubuntu Mono',monospace}
.tx .scell .lbl{font-size:12px;color:#a5a0a8}
.tx .scell .mono.fresh{font-size:15px}
.tx .desc{margin:22px 0 26px;opacity:.55}
.tx .desc i{display:block;height:10px;background:#242233;margin-bottom:8px}
.tx .rowhead{font-size:17px;margin:26px 0 4px;padding-left:10px;border-left:3px solid #ffcf5c;font-weight:700}
.tx .dna{opacity:.5;margin-top:10px}
.tx .dna div{height:8px;background:#242233;margin:8px 0;width:48%}
.tx .dna i{display:block;height:100%;background:#6b6674}
.tx .art{padding:24px;background:#08070a}
.tx .cap{color:#a5a0a8;font-family:'Ubuntu Mono',monospace;font-size:12px;margin-bottom:8px}
/* == /txkit css == */
/* == txkit parity (resets app rules that leak into .tx) == */
/* root: lay out at the mock's 1104 px content width, left edge on the breadcrumb (charts are drawn for 1104) */
.tx.tx{max-width:1104px;margin-left:0;margin-right:auto}
/* game-page strip: sits under the full-width hero + action bar, so it fills the page column instead (the 1fr cards
   stretch; the fixed-width sparks scale with their card — also keeps the 324 px phone sparks inside a 350 px column) */
.ta-strip-wrap .tx.tx{max-width:none}
.tx.tx .gs svg{width:100%;height:auto}
/* h1 (app.css `h1`): letter-spacing -.3px */
.tx.tx h1{letter-spacing:normal}
/* .hrow (discover row scroller): padding 4px 32px 14px, overflow-x:auto, scroll snap */
.tx.tx .hrow{padding:0;overflow:visible;scroll-snap-type:none;scroll-padding:0}
/* .kpis (legacy KPI band): 1px border + hairline background */
.tx.tx .kpis{background:transparent;border:0}
/* .kpi (legacy KPI cell): min-height 104px, text-decoration */
.tx.tx .kpi{min-height:auto;text-decoration:none}
/* .card (app cards): position/overflow, hover lift + glow */
.tx.tx .card{position:static;overflow:visible;transition:none}
.tx.tx .card:hover{border-color:#36333e;transform:none;box-shadow:none}
/* anchors read as the mock's text; the CTA keeps its violet */
.tx a{color:inherit;text-decoration:none}
.tx a:hover{text-decoration:none}
.tx.tx .gcta a{color:#8a83e0}
@media (max-width: 720px){.tx.tx .foot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* == /txkit parity == */
/* == tx-tooltip-rects == */
.tx .txh { cursor: pointer; }
.tx .txh:hover { outline: 1px solid #f2f0ed; outline-offset: -1px; }
/* == tpg-tooltips == */
.tx rect.txh[data-tip]:hover { cursor: pointer; }
.tx rect.txh[data-tip] title { font-size: 12px; color: #f2f0ed; }

/* Server-rendered first paint (SEO plan action 7): the text a crawler reads without JS, shown until the app renders
   the full page over it. Plain reading layout in the content column; the app replaces the whole block. */
.ssr{max-width:760px;padding:var(--sp-4) 0;color:var(--text-primary);line-height:1.6}
.ssr h1{margin:0 0 var(--sp-2)}
.ssr h2{font-size:18px;margin:var(--sp-5) 0 var(--sp-2)}
.ssr p{margin:0 0 var(--sp-3);color:var(--text-secondary)}
.ssr a{color:var(--link)}
.ssr .ssr-by{margin-top:calc(-1 * var(--sp-1))}
.ssr .ssr-dim{color:var(--text-secondary);font-size:.92em}
.ssr .ssr-like{margin:0 0 var(--sp-3);padding-left:1.2em}
.ssr .ssr-like li{margin:0 0 var(--sp-1);overflow-wrap:anywhere}

/* /explore first paint: reserve the header's measured height until the first answer paints it (see viewExplore).
   Measured 2026-09-30: heading 72 / bar 53 / lenses 50 (32 + margins) at >=1024; heading 79 (94 seeded) / bar 60 / lenses 90 at
   <=560. Seeded pages show no lenses. Tablet widths wrap the bar to 97, so the 53 reserve leaves a small shift there. */
main.xpending #xctx{min-height:72px}
main.xpending #xbarf{min-height:53px}
main.xpending:not(.xseeded) #xlens{display:block;min-height:50px}   /* 32 px of lenses + the nav's 10/8 px margins */
@media (max-width:560px){
  main.xpending #xctx{min-height:79px}
  main.xpending.xseeded #xctx{min-height:94px}
  main.xpending #xbarf{min-height:60px}
  main.xpending:not(.xseeded) #xlens{min-height:90px}
}
/* Keep the footer below the fold from the first paint. With main only flex-filling the viewport, the footer sat on
   screen while a view loaded and jumped down when the content arrived — the footer shift behind CLS 0.063 (1280) and
   0.115 (390) on every game page. A short page now shows its footer one scroll away instead of pinned to the bottom. */
main{min-height:calc(100vh - var(--nav-h))}
/* Empty-chart schematic (GHOST in app.js): neutral, hollow, static. Shorter than a real chart, and dropped entirely
   where faint strokes cannot be told from content (forced colours) or would only waste ink (print). */
.chart-ghost{width:min(320px,86%);height:auto;display:block;overflow:visible}
.chart-ghost .g{stroke:var(--border);stroke-width:1;opacity:.45}
.chart-ghost .m{fill:none;stroke:var(--text-secondary);stroke-width:1.25;opacity:.26;stroke-linecap:round;stroke-linejoin:round}
.chart-ghost .dash{stroke-dasharray:4 4}
[data-theme="light"] .chart-ghost .m{opacity:.4}
@media (forced-colors:active),print{.chart-ghost{display:none}}
/* Trends X3: phone header stacks RANGE / COMPARE / share on three rows like the Concept X phone frame */
@media (max-width:720px){.tx .ph .ctls::before{content:'';flex-basis:100%;order:8}.tx .ph .ctls>.ctl{order:9}}
/* Trends X3: 5-up KPI row puts the sub line under the chip, as Concept X's Overview row does */
.tx .kpis.n5 .kf .ks{flex-basis:100%}
/* Trends X3: 4-up KPI rows keep chip + sub on one line (Concept X); a long sub is cut with an ellipsis, never wrapped */
.tx .kpis:not(.n5) .kf{flex-wrap:nowrap}
.tx .kpis:not(.n5) .kf .ks{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .kpis:not(.n5) .kf .kd{flex:none}
/* Trends X3 sample-off empty states: a sample-only KPI / card / block shows a dash, the empty sentence and a faint
   chart-ghost in the slot the data would use (same geometry as the filled card). */
.tx .chart-ghost.sp{width:auto;max-width:100%;height:auto;display:block}
.tx .chart-empty.tx-empty{height:auto;border:0;background:transparent;padding:0 12px}
.tx .chart-empty.tx-empty .chart-ghost{width:min(320px,80%)}
.tx [data-empty] .kv{color:var(--text-secondary);font-weight:500}
.tx [data-empty] .ks{white-space:normal;overflow:visible;text-overflow:clip;color:var(--text-secondary)}
.tx .kpis .kpi[data-empty] .kf .ks{white-space:normal;overflow:visible;text-overflow:clip;min-width:0}
/* X3c (Evan's review edits 2026-10-02) ------------------------------------------------------------------------------ */
/* Shared yellow button (game page "See more <Game> data", trends page "Back to <Game>"): dark text on yellow in both
   themes; the game name ellipsizes on a narrow screen, the lead/tail words never do. */
:root{--cta-yellow:#ffcf5c;--on-cta-yellow:#231d10;--cta-yellow-edge:#ffcf5c}
[data-theme="light"]{--cta-yellow-edge:#c99a1e}
a.ybtn,.tx.tx a.ybtn{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:8px 16px;box-sizing:border-box;background:var(--cta-yellow);color:var(--on-cta-yellow);border:1px solid var(--cta-yellow-edge);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
a.ybtn:hover,.tx.tx a.ybtn:hover{filter:brightness(1.06);text-decoration:none}
a.ybtn:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.ybtn-i{flex:none}
.ybtn-t{display:flex;min-width:0}
.ybtn-n{overflow:hidden;text-overflow:ellipsis;min-width:0;margin:0 .3em}
.ybtn-l{flex:none}
.tx .gcta.yb{text-align:right;min-width:0;max-width:100%}
.tx .grow .gcta.yb{flex:0 1 auto}
.tback{margin:0 0 14px}
.tx.tx .gcta.yb a.ybtn{min-height:30px;padding:5px 12px;font-size:13px;gap:6px}
@media(max-width:720px){.tx .grow{flex-wrap:nowrap}.tx .grow .gex{flex:none}.tx .grow .gcta.yb{flex:0 1 auto;min-width:0;text-align:right}.tx.tx .grow .gcta.yb a.ybtn{padding:5px 10px}.tx .grow .gex .ctll{display:none}.tback a.ybtn{width:100%;justify-content:center}}
/* Trend cards are one link each, to their own trends tab: a stretched <a> under the content, inner links above it. */
.tx .gc.gc-click{position:relative;cursor:pointer;transition:border-color .12s,background-color .12s}
.tx .gc.gc-click:hover{border-color:#5a5566;background:#1e1d25}
.tx .gc .gc-link{position:absolute;inset:0;z-index:1}
.tx .gc .gc-link:focus-visible{outline:2px solid var(--cta-yellow);outline-offset:2px}
.tx .gc.gc-click a:not(.gc-link),.tx .gc.gc-click button{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.tx .gc.gc-click{transition:none}}
/* Breadcrumbs: room around the › separators (every .crumbs / .xcrumbs). */
.crumbs .csep{display:inline-block;margin:0 .5em;color:var(--text-secondary)}
.crumbs{line-height:1.6}
/* Game-page media mosaic: a full 4×2 grid (trailer loop 2×2 at the left when there is one); phone: the loop full
   width on top, then two columns. */
.gmedia{margin:10px 0 6px}
.gmosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,150px);gap:8px}
.gmosaic .gm-t{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border-subtle);min-width:0}
.gmosaic .gm-t img,.gmosaic .gm-t video{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.gmosaic .gm-t video{cursor:pointer;background:#000}
.gmosaic .gm-v,.gmosaic .gm-b{grid-column:span 2;grid-row:span 2}
.gmosaic .gm-w{grid-column:span 2}
.gmosaic .gm-x img{visibility:hidden}
.gmedia-all{display:inline-block;font-size:13px;margin:4px 0 0}
@media(max-width:720px){
  .gmosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
  .gmosaic .gm-t{grid-column:auto;grid-row:auto;aspect-ratio:16/9}
  .gmosaic .gm-v,.gmosaic .gm-b{grid-column:1 / -1;grid-row:auto}
  .gmosaic .gm-w{grid-column:auto}
  .gmosaic > .gm-t:nth-child(even):last-child{grid-column:1 / -1}  /* the first tile is full width; an odd tail would orphan */
}
/* phone: the Steam tab's four-list selector (432px) wrapped past a 390px screen; let the group and its segments wrap */
@media(max-width:720px){.tx .tctl .ctlg{white-space:normal;flex-wrap:wrap;max-width:100%}.tx .tctl .seg{flex-wrap:wrap;max-width:100%}}
/* == gamehdr (fix/align-gamehdr, 2026-10-03): game-page header vs approved mock X game-desktop == */
/* GAME-04: the action bar rides inside the hero under the subtitle (app.js viewGame); no border row of its own */
.ghero .ctabar{height:auto;padding:0;margin-top:12px;border:0;background:none;justify-content:flex-start;gap:8px}
.ghero .ctabar-r .watchbtn.slim,.ghero .ctabar-r .cmpbtn2,.ghero .ctabar-r .steam.slim{font-weight:400}   /* GAME-11: '+ Watch' matched Compare/Steam */
.gh-img{object-position:50% 25%}   /* GAME-14: library heroes put the subject high; centre-crop cut logos and heads */
@media(min-width:761px){
  .ghero{min-height:220px}
  .gh-body{padding:26px 24px 22px}
  .gh-title{font-size:32px}
  .ghero .ctabar .ctabtn{height:36px;min-height:36px;padding:0 14px;font-size:13px}
  .ghero .ctabar .ctabtn .cta-n{font-size:13px}
  .ghero .ctabar-r .watchbtn.slim,.ghero .ctabar-r .cmpbtn2,.ghero .ctabar-r .steam.slim{height:36px;padding:0 12px;background:var(--surface);color:var(--text-primary)}
  .ghero .ctabar-r .watchbtn.slim.on,.ghero .ctabar-r .cmpbtn2.in{color:var(--gem);border-color:var(--gem)}
  /* GAME-10: game-page crumbs 12 px, all secondary grey, bold current page */
  .gcrumbs{font-size:12px;line-height:1.4}
  .gcrumbs a{color:var(--text-secondary)}
  .gcrumbs a:hover{color:var(--text-primary);text-decoration:underline}
  .gcrumbs b{font-weight:600}
  /* GAME-09: description runs the width of the column; 22 px under the range row, Tag DNA 26 px below */
  .gdesc{max-width:92%;margin:22px 0 0}
  .gdesc + h2.rowhead{margin-top:26px}
}
/* phones keep today's stacked bar (CTA row, then three equal cells), now inside the hero: the body keeps ~80 px of
   art above the title and the scrim starts earlier so the title/subtitle never sit on bright art; the match square
   moves to the hero's top-right so it never sits on the buttons */
@media(max-width:760px){
  .ghero .ctabar{padding:0;gap:6px}
  .gh-body{padding:80px 14px 14px}
  .gh-grad{background:linear-gradient(180deg,transparent 12%,color-mix(in srgb,var(--bg) 88%,transparent) 46%,var(--bg) 100%)}
  .gh-matchctx{top:12px;bottom:auto}
}
/* == fix1 copy lane (2026-10-03) ========================================================================= */
/* Trends chart tooltips: the kit's charts use the site's tooltip layer (installChartTips) through a .txc[data-tip]
   box — guide line, dot on a line point / band on a bar column, and a small dark kit card in both themes. */
.tx .txc[data-tip]{position:relative;display:block;cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.tx .txc[data-tip]:focus{outline:none}
.tx .txc[data-tip]:focus-visible{outline:2px solid #ffcf5c;outline-offset:2px}
.tx .txc>svg{display:block}
.tx .txc.tipon>.ctip-layer{display:block}
.tx .ctip-guide{border-left:1px dashed #a5a0a8;opacity:.8}
.tx .ctip-band{background:rgba(242,240,237,.07)}
.tx .ctip-dot{background:#f2f0ed;box-shadow:0 0 0 2px #1a1920}
.tx .ctip{background:#242233;border:1px solid #36333e;color:#f2f0ed;box-shadow:0 8px 20px rgba(0,0,0,.5);padding:7px 10px 8px;font-size:12px;line-height:1.45}
.tx .ctip b{color:#f2f0ed;font-size:12px;font-weight:700}
.tx .ctip span{color:#f2f0ed;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:12px}
/* KPI sub line flows beside the chip and wraps only when it does not fit (Concept X); the phone keeps it on its own row */
@media (min-width:721px){.tx .kpis.n5 .kf .ks{flex-basis:auto}}
/* event effects follow the sign of the move: falls and exits in coral */
.tx .ee.dn{color:#e85463}
.tx .ee.fl{color:#a5a0a8}
/* a leaderboard row with no signed change shows its count as plain secondary text, not a chip */
.tx .lead .ln{font-family:'Ubuntu Mono',monospace;font-size:11px;color:#a5a0a8;white-space:nowrap;flex:none}
/* light theme: the kit stays dark but reads as a deliberate panel — inner padding and a radius, content edge unchanged */
@media (min-width:721px){[data-theme="light"] .tx.tx{box-sizing:content-box;padding:20px 24px 16px;margin-left:-24px;border-radius:10px}
  [data-theme="light"] .ta-strip-wrap .tx.tx{margin-right:-24px}}
@media (max-width:720px){[data-theme="light"] .tx.tx{border-radius:8px;padding:12px 10px}}
/* trends-shaped loading skeleton (viewTrends first paint) */
.txsk{max-width:1104px}
.txsk .s{background:var(--surface);border:1px solid var(--border-subtle);position:relative;overflow:hidden}
.txsk .s::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-primary) 6%,transparent),transparent);animation:txsk 1.4s infinite}
@keyframes txsk{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.txsk .s::after{animation:none}}
.txsk .h{height:34px;width:360px;max-width:70%;margin:0 0 10px}
.txsk .q{height:16px;width:440px;max-width:85%;margin:0 0 18px}
.txsk .tb{display:flex;gap:12px;margin:0 0 18px}.txsk .tb .s{height:30px;width:88px}
.txsk .k{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:0 0 16px}.txsk .k .s{height:142px}
.txsk .c{height:350px;margin:0 0 16px}
.txsk .r{display:grid;grid-template-columns:1fr 1fr;gap:16px}.txsk .r .s{height:244px}
@media (max-width:720px){.txsk .k{grid-template-columns:1fr 1fr}.txsk .r{grid-template-columns:1fr}.txsk .c{height:260px}}
/* trends controls (fix/align-controls): share is a real button styled as the mock's .ctl; seg options are pressable */
.tx button.ctl{background:none;font-family:inherit;line-height:inherit;cursor:pointer}
.tx button.ctl:hover,.tx .seg b[role=button]:not(.on):hover{color:#f2f0ed}
.tx .seg b[role=button]{cursor:pointer}
/* fix2 charts: a KPI spark keeps its 90 px next to a long value (OV2-06); its tooltip wrapper does not stretch */
.tx .km>svg,.tx .km>.txc{flex-shrink:0}
.tx .km>.txc{display:inline-block}

/* fix2 controls lane (2026-10-03 desktop re-audit) */
/* ruling 1, STEAM2-06, BEH2-06: an option the data cannot fill is muted, says why in its title and does not press */
.tx .seg b[role=button][aria-disabled=true],.tx .seg b[role=button][aria-disabled=true]:hover{color:#6f6a75;background:none;cursor:not-allowed}
/* ruling 4: the game strip's one-line 'History since <Mon D>' beside its RANGE seg */
.tx .gex .txhist{font-size:12px;color:#a5a0a8;white-space:nowrap}
/* BEH2-07: 'share' keeps its width; the confirmation floats under it */
.tx button.ctl[data-tx-share]{position:relative}
.tx [data-tx-share] .txtip{position:absolute;top:calc(100% + 6px);right:0;white-space:nowrap;background:#242233;color:#f2f0ed;border:1px solid #36333e;padding:4px 8px;font-size:12px;line-height:1.2;pointer-events:none;z-index:5}
/* BEH2-10: the skeleton has the painted page's title row (with the control stub), tabs and claim + grain row */
.txsk .phr{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;height:60px;margin:0 0 14px}
.txsk .phr>div{flex:1;min-width:0}
.txsk .phr .h{margin:0 0 6px}
.txsk .phr .q{height:20px;margin:0}
.txsk .phr .cs{flex:none;width:371px;height:29px}
.txsk .tb{height:38px;align-items:center;margin:0 0 18px}
.txsk .cl{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;height:60px;margin:0 0 16px}
.txsk .cl .cb{align-self:flex-start;width:66%;height:21px}
.txsk .cl .cg{width:214px;height:29px}
.txsk .k .s{height:117px}
.txsk .tback{line-height:0}
@media (max-width:720px){.txsk .phr{flex-direction:column;align-items:stretch;height:auto}.txsk .phr .cs{width:100%;height:80px}.txsk .tb{height:34px;margin-bottom:14px}.txsk .cl{height:102px}.txsk .cl .cb{width:100%;height:63px}.txsk .cl .cg{align-self:flex-start}}
/* GAME2-08: one focus ring across the game hero's action row and the yellow buttons: 2px gem, 2px offset; on a yellow
   button the offset gap is filled with the page background, a dark inner ring between the button and the ring */
.ctabar.ctabar :is(a,button):focus-visible,.ctasticky.ctasticky :is(a,button):focus-visible,a.ybtn.ybtn:focus-visible,.tx.tx a.ybtn:focus-visible{outline:2px solid var(--gem);outline-offset:2px;box-shadow:none}
.ctabar.ctabar .ctabtn:focus-visible,.ctasticky.ctasticky .ctabtn:focus-visible,a.ybtn.ybtn:focus-visible,.tx.tx a.ybtn:focus-visible{box-shadow:0 0 0 2px var(--bg)}
/* '+ Watch' animated `transition:all` from the initial 3px currentColor outline: its ring flashed white and thick */
.watchbtn{transition-property:background-color,color,border-color,transform}
/* REV3-12: a KPI that omits its chip (no measured change / no data) keeps the chip row's height, so the row stays level */
.tx .kpis .kpi .kf{min-height:21px}
.tx .kpi.nc[data-empty] .km{min-height:36px}
.tx .kpi.tight .kf{gap:4px}
.tx .kpi.tight .kd{font-size:10px;padding:2px 3px}
/* fix3 p3: game strip — the spark's tooltip layer sits above the card's stretched link (a click on it still opens the
   tab, tpgWireOnce); an empty card's label row keeps the badge's height so its value lines up (GAME2-05) */
.tx .gc.gc-click .gs .txc{position:relative;z-index:2;cursor:pointer}
.tx .gc .gl{min-height:20px}.tx .gc .gv{min-height:35px}
/* fix3 p3 (GAME2-11): desktop Tag DNA in the mock's proportions — one column 48% wide, 8px bars on a 16-18px pitch */
@media (min-width:1100px){.dna{max-width:48%;gap:2px 40px}.dnarow{line-height:16px}.dnabar{height:8px}}
/* BEH3-05: the loading skeleton per tab — 4 KPI tiles off Overview; Overview's KPI cards hold the mock's 142 px */
.txsk .k.n4{grid-template-columns:repeat(4,1fr)}
@media (min-width:721px){.txsk.t-overview .k .s{height:142px}}
@media (max-width:720px){.txsk .k.n4{grid-template-columns:1fr 1fr}.txsk .cl .cg{max-width:100%}}
/* OV3-02: the 5-up Overview KPI row keeps the mock's 142 px card on every game, chip or not */
@media (min-width:721px){.tx .kpis.n5 .kpi{min-height:142px}}
/* OV3-08: the game's own leaderboard row stays inside the row column (no tint poking into the card padding); OV6-06:
   and is styled like every other row, as in the mocks (no violet rank, no bold name) */
.tx .lead .lr.me{background:none;box-shadow:none;margin:0;padding:7px 0;border-radius:0}
/* OV3-01: a KPI with no measured change has no chip at all (never an empty dash box); its row keeps the chip's height */
.tx .kpi .kf{min-height:21px}
/* integ (OV3-07): a peer chip still loading holds its slot invisibly, so the leaderboard does not move when it lands */
.tx .lead .kd.kph{visibility:hidden}
/* every leaderboard row is as tall as a row with a chip, so a chip landing (or not) never moves the card */
/* fix14-b (P6 card4): the row holds the chip's height (min-height below, end of file); the rank keeps the mock's own line box */
/* GAME2-05: the game strip's empty review value reads at the weight of the cards beside it */
.tx .gc[data-empty] .kv{font-weight:700}
/* fix4 OV4-03: on the Overview row the KPIs whose sub is a label (score band, review window, list name) always put it
   on its own line under the chip, as the mock does; Twitch peak and momentum keep chip + sub inline */
@media (min-width:721px){.tx .kpis.n5 .kpi:nth-child(-n+3) .kf .ks{flex-basis:100%}}
/* fix4 BEH-12: on desktop the trends tab bar sticks under the site nav, so a tab switch (and Back) from anywhere down
   the page keeps the scroll and the tab bar stays in view; at the top of the page it sits exactly where it did */
@media (min-width:721px){.tx .tabs{position:sticky;top:var(--nav-h);z-index:3;background:#0f0e12}}
/* R5-f: the one-line KPI readout that fits the gutter between the KPI row and a title */
.tx .ctip.ctip-1l{flex-direction:row;align-items:baseline;gap:8px;padding:3px 8px 4px;line-height:1.35}
.tx .ctip.ctip-1l b{margin-bottom:0}
/* fix5 BEH5-03: flush under the nav as measured at >= 431 px (69 px: 16+36+16 + its 1 px rule; --nav-h says 67, which
   tucked the bar's top 2 px under the nav), and once stuck (.stuck, set by txTabsStuckWire) a soft shadow under the
   hairline so cards scrolling beneath it do not look clipped */
@media (min-width:721px){.tx .tabs{top:69px;transition:box-shadow .15s}.tx .tabs.stuck{box-shadow:0 10px 14px -10px rgba(0,0,0,.85)}}
/* OV6-04 / R6-e: KPI chips keep one type size across the row (11 px, as the mock), long ones included */
.tx .kpi .kd.long{font-size:11px}
/* R6-a (GAME6-02): desktop Tag DNA in the mock's treatment — 10px under the heading, the dimmed bar (#6b6674 at half
   strength over the page: rgb(61,58,67) dark) on the mock's half-strength track; rare rows keep their hue, dimmed alike */
@media (min-width:1100px){.dna{margin-top:10px}.dnabar{background:color-mix(in srgb, var(--surface-elevated) 50%, var(--bg))}.dnabar i{background:color-mix(in srgb, #6b6674 50%, var(--bg))}}
/* BEH6-01: the stuck tab bar sits flush under the nav (z above it), so an outset ring loses its top edge: inset it */
.tx .tabs a:focus-visible{outline-offset:-2px}
/* R7-a (GAME7-02): the strip's all-time label reads as the card's muted mono footline, not primary text */
.tx .gc text.sref-l{fill:#6b6674;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:10px}

/* fix8 lane b (2026-10-04) */
/* BEH8-01/02, OV8-05 (ruling 34): a KPI readout stays inside its card: wrapped to the column left of the spark (kin) or
   the compact box under the spark (kc) */
.tx .ctip.ctip-kin{white-space:normal;box-sizing:border-box}
.tx .ctip.ctip-kc{padding:3px 8px 4px;line-height:1.3}
.tx .ctip.ctip-kc b{margin-bottom:0}
/* OV8-02: the KPI spark gives way to a long value (>= 24 px clear of it) instead of running into the card padding; the
   svg scales uniformly, so the readout's dot still lands on the line */
.tx .kpi .km>.txc{flex:0 1 90px;min-width:56px;margin-left:16px}
.tx .kpi .km>.txc>svg{width:100%;height:auto}
/* fix9 lane b — OV9-04: the KPI spark is the mock's 90x28: 8 px from the value (the .km gap), 90 px wide when it fits and
   never under 80 px; the height stays 28 px and only the width gives (preserveAspectRatio none, the stroke unscaled) */
.tx .kpi .km>.txc{flex:0 1 90px;min-width:80px;margin-left:0}
.tx .kpi .km>.txc>svg{width:100%;height:28px;display:block}
.tx .kpi .km>.txc>svg polyline,.tx .kpi .km>.txc>svg line{vector-effect:non-scaling-stroke}
/* GAME9-09: the section heads in the mock's metrics (17px/700, line-height 1.4, no tracking) */
h2.rowhead{line-height:1.4;letter-spacing:normal}
/* GAME5-01: desktop Tag DNA in the mock's columns — the bar track is the mock's bar (48% of its 1104 px content: 530 px)
   at its 16 px pitch (8 px bar + 8 px gap); the tag name before it and the '1 in N' note right after it */
@media (min-width:1100px){.dna{max-width:none;gap:0 40px}.dnarow{grid-template-columns:minmax(120px,170px) 530px max-content;justify-content:start;line-height:16px}.dnanote{text-align:left}.dnabar{height:8px}}
/* fix10 lane c — GAME10-03: every strip chip is the mock's 11 px Ubuntu Mono (lh 15.4, 21 px tall); a long chip is not shrunk.
   GAME5-01: Tag DNA rows are the mock's bare 530 px bars from the left edge at a 16 px pitch; the tag name and its rarity
   follow the bar in the space the mock leaves empty to its right */
.tx .gc .kd.long{font-size:11px}
@media (min-width:1100px){.dnarow{grid-template-columns:530px minmax(120px,170px) max-content;gap:12px}.dnarow .dnabar{order:-1}.dnanote{text-align:left}}
/* fix13-a (OV13-08): the trends page's breadcrumb takes the mock's .crumbs — 12 px #a5a0a8 plain-text links, current
   page #f2f0ed 600, line-height 1.4, the separator one space either side (the page renders it outside .tx) */
.crumbs.tcrumbs{font-size:12px;line-height:1.4;color:#a5a0a8;margin:0 0 14px}
.crumbs.tcrumbs a{color:inherit;text-decoration:none}
.crumbs.tcrumbs b{color:#f2f0ed;font-weight:600}
.crumbs.tcrumbs .csep{margin:0 .3em;color:inherit}
/* fix13-a (OV13-02 / STEAM10-03): chart axis tick text and the COMPARE band label carry the marker label's halo (the card's
   #1a1920 under the glyphs), so an edge bar or the line under them never cuts the text; invisible over the bare card */
.tx svg text.ax,.tx svg text.band-l{stroke:#1a1920;stroke-width:3px;paint-order:stroke;stroke-linejoin:round}

/* fix11 lane b — GAME11-02 (Evan 2026-10-04: Tag DNA labels exempt, match the rest): the mock's treatment — the whole block
   at opacity .5 over the raw #242233 track / #6b6674 fill (not pre-mixed bar colours under full-opacity text) */
@media (min-width:1100px){.dna{opacity:.5}.dnabar{background:#242233}.dnabar i{background:#6b6674}}

/* fix14-b (P6 card4): every leaderboard row as tall as a row with a chip (7 + 21.4 + 7 px + its 1 px rule), set on the row
   so the rank cell keeps the mock's line box (18.2 px, not 21.4) */
.tx .lead .lr{min-height:36.4px}.tx .lead .lr:last-child{min-height:35.4px}
/* fix12-b (GAME12-03): the first Tag DNA bar 10 px under the heading as the mock (the 16 px row centres its 8 px bar, 4 px in) */
@media (min-width:1100px){.dna{margin-top:6px}}
/* rank-events3 (RG2-2): on a phone an event label wraps to 2 lines (then ellipsis), so the list's tier or rank shows after its name */
@media (max-width:480px){.tx .ev .el{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.3}}
/* rank-events4 (RG3-1): on a phone the effect drops to its own line under the label, so the label takes the whole width
   right of the date and chip and wraps in full (no clamp): the list's tier or rank always shows */
@media (max-width:480px){.tx .ev{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start}.tx .ev .ek{align-self:start;margin-top:1px}.tx .ev .el{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible;white-space:normal;overflow-wrap:break-word}.tx .ev .ee{grid-column:3;justify-self:start}}

/* feat/trends-controls (Evan 2026-10-05): RANGE, the COMPARE switch and the icon-only share ride in the sticky tab bar
   row (.tbar), right of the tabs. Desktop: one 38 px row, the hairline under the whole row. Phone: the tabs keep the
   full first line (never clipped), the controls drop to one compact second line, and the whole bar sticks under the
   nav (it used to be static on phones; the controls would otherwise scroll away). */
.tx .tbar{display:flex;align-items:flex-end;gap:16px;margin:0 0 18px;border-bottom:1px solid #36333e;background:#0f0e12}
.tx .tbar .tabs{margin:0;flex:0 1 auto;min-width:0}
.tx .tbar .tabs.underline{border-bottom:0}
.tx .tbar .ctls{margin-left:auto;align-self:center;flex-wrap:nowrap;gap:12px}
@media (min-width:721px){.tx .tbar .tabs{position:static;box-shadow:none}.tx .tbar{position:sticky;top:69px;z-index:3;transition:box-shadow .15s}.tx .tbar.stuck{box-shadow:0 10px 14px -10px rgba(0,0,0,.85)}}
/* the COMPARE switch: a native button with role=switch; amber track when on (the active tab's accent) */
.tx .txsw{display:inline-flex;align-items:center;gap:8px;min-height:29px;padding:0 2px;background:none;border:0;color:#a5a0a8;font:inherit;font-size:12px;line-height:1.2;cursor:pointer;white-space:nowrap;text-align:left}
.tx .txsw-t{position:relative;flex:none;width:28px;height:16px;border-radius:8px;background:#36333e;transition:background-color .15s}
.tx .txsw-t i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#a5a0a8;transition:transform .15s,background-color .15s}
.tx .txsw.on{color:#f2f0ed}
.tx .txsw.on .txsw-t{background:#ffcf5c}
.tx .txsw.on .txsw-t i{transform:translateX(12px);background:#0f0e12}
.tx .txsw:not([aria-disabled=true]):hover{color:#f2f0ed}
.tx .txsw[aria-disabled=true]{color:#6f6a75;cursor:not-allowed}
.tx .txsw[aria-disabled=true] .txsw-t{background:#242233}
.tx .txsw[aria-disabled=true] .txsw-t i{background:#4a4652}
.tx .txsw:focus-visible,.tx button.txshare:focus-visible{outline:2px solid var(--gem);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tx .txsw-t,.tx .txsw-t i{transition:none}}
/* share: icon only, square, as tall as the RANGE seg */
.tx button.ctl.txshare{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;padding:0;flex:none}
.tx button.ctl.txshare .txshi{display:block}
@media (max-width:720px){
  .tx.tx .tbar{flex-wrap:wrap;gap:0;border-bottom:0;margin-bottom:14px;position:sticky;top:var(--nav-h);z-index:3;transition:box-shadow .15s}
  .tx.tx .tbar.stuck{box-shadow:0 10px 14px -10px rgba(0,0,0,.85)}
  .tx.tx .tbar .tabs{flex:1 1 100%;margin:0}
  .tx.tx .tbar .tabs.underline{border-bottom:1px solid #36333e}
  .tx.tx .tbar .ctls{flex:1 1 100%;margin:0;padding:6px 0;gap:8px;justify-content:space-between;border-bottom:1px solid #36333e}
  .tx.tx .tbar .ctlg .ctll{display:none}
  .tx.tx .tbar .seg b{display:inline-flex;align-items:center;min-height:30px;padding:0 9px}
  .tx.tx .tbar .txsw{min-height:32px;font-size:11px;white-space:normal;max-width:126px}
  .tx.tx .tbar button.ctl.txshare{width:32px;height:32px}
}
.txsk .tb .cs{margin-left:auto;width:332px;height:29px}
@media (max-width:720px){.txsk .phr{height:auto}.txsk .tb{flex-wrap:wrap;height:auto;row-gap:6px}.txsk .tb .s{height:34px}.txsk .tb .s.cs{margin-left:0;flex-basis:100%;width:100%;height:32px}}
/* perf/page-render (perf audit 2026-10-09). The game page renders before the history shard lands, and every strip card
   reads it (review, Steam list and Twitch spans, deltas and sparks change once it arrives). Until it does, the cards
   keep their boxes and labels and shimmer, rather than show the no-history numbers as if they were final (viewGame). */
.ta-strip-wrap[aria-busy="true"] .gc[data-metric]{position:relative;overflow:hidden}
.ta-strip-wrap[aria-busy="true"] .gc[data-metric] > :not(.gc-link):not(.gl){visibility:hidden}
.ta-strip-wrap[aria-busy="true"] .gc[data-metric]::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,color-mix(in srgb, var(--gem) 5%, transparent) 45%,color-mix(in srgb, var(--gem) 8%, transparent) 55%,transparent 80%);animation:shim 2.2s ease-in-out infinite;pointer-events:none}
/* the server-rendered hero (ssrGameBlock) holds the action bar's height until app.js fills it, so the hero box does
   not grow under the image when the page takes over */
.ghero .ssr-cta{height:36px;margin-top:12px}
@media(max-width:760px){.ghero .ssr-cta{height:94px}}
/* trends-smalls (Evan 2026-10-09): under 360 px the four trends tab labels need 296 px of the bar's 280 at 320, so
   "Twitch" lost ~16 px; a 7 px side padding fits all four (272 px). 360 px and up keep 10 px (390 and 1280 unchanged) */
@media (max-width: 359px){ .tx.tx .tabs a{padding:7px 7px} }
/* quick-wins P-b (2026-10-12): Steam regular price. Cards get a price glyph beside DEMO (FREE keeps its own); the
   explore row's state cell widens from 74 px to fit DEMO + "$19.99"; the game hero gets one price line under the sub
   line. The price is the REGULAR price with its reading day, never a sale price. */
.glyph.p{color:var(--text-primary);border:1px solid var(--text-secondary)}
.pl.p{color:var(--text-primary);border-color:var(--text-secondary);white-space:nowrap}
.c-st{width:118px}
.gh-price{font-size:13px;color:var(--text-secondary);margin-top:4px}
.gh-price b{font-size:15px;font-weight:700;color:var(--text-primary)}
.gh-price.none{color:var(--text-secondary)}
@media(max-width:760px){
  .c-st{width:auto}
}
/* quick-wins integration (2026-10-12). The price's qualifier shows without hover wherever a price shows: cards carry
   the price in the body as "$19.99 regular US price · Oct 7" (the cover badge was a bare "$19.99"), and the explore
   table gets one line above it naming regular US prices, the reading day(s) and no sales. On phones the game hero
   grows with its content instead of clipping a long title at the top (the 340 px cap plus the new price line cut
   two-line titles at 390 and 320 px). */
.gprice{font-size:12px;line-height:1.35;color:var(--text-secondary);margin-top:6px}
.gprice b{font-size:13px;font-weight:700;color:var(--text-primary)}
.pnote{font-size:12px;color:var(--text-secondary);margin:0 0 8px}
@media(max-width:760px){
  .ghero{max-height:none}
}
/* qw D-a (2026-10-12): developer / publisher portfolio pages (/developer/<slug>, /publisher/<slug>) and the game page's
   studio links. Kept at the end of the file so the media rules win the cascade. */
.gh-sub a,.ssr-by a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
.gh-sub a:hover,.ssr-by a:hover{color:var(--link);text-decoration-color:currentColor}
.studio-h{margin:0 0 2px;font-size:30px;line-height:1.15;overflow-wrap:anywhere}
.studio-sub{margin-bottom:var(--sp-4)}
.studio-sub a{color:var(--link)}
.studio-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.studio-kpis .kpi{min-height:92px}
.studio-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:var(--text-secondary)}
.studio-sort{display:inline-flex;border:1px solid var(--border)}
.studio-sort a{padding:6px 12px;color:var(--text-secondary);text-decoration:none}
.studio-sort a+a{border-left:1px solid var(--border)}
.studio-sort a.on{background:var(--surface-elevated);color:var(--text-primary);font-weight:500}
.studio-count{font-family:'Ubuntu Mono',ui-monospace,monospace}
.hrow.asgrid.studio-grid{padding:4px 0 0;margin-bottom:18px;scroll-snap-type:none}
.studio-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:6px 0 18px;font-size:14px;color:var(--text-secondary)}
.studio-pager a{color:var(--link)} .studio-pager a:last-child{justify-self:end}
.studio-note{font-size:13px;color:var(--text-secondary);margin:0 0 18px}
.studio-note a{color:var(--link)}
@media(max-width:900px){.studio-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.studio-h{font-size:24px}.hrow.asgrid.studio-grid{gap:10px}.hrow.asgrid.studio-grid .gcard{flex:0 0 calc(50% - 5px)}.studio-kpis .kpi{min-height:0;padding:12px}.studio-kpis .kpi-v{font-size:22px}}
/* Review fix #9 (2026-10-12): every explore / match row fits with its "Games like this →" hop, 761 to 1440 px and up
   (rows were clipped by .xtable's overflow:hidden at ~1,105-1,293 px since the state cell grew to 118 px, and at
   1,024 already on base). The state cell stacks DEMO over the price in its old 74 px; the title and tag columns keep
   smaller floors and the signal column may give up width (its parts wrap) before anything is pushed past the edge. */
@media(min-width:761px){
  .c-st{width:74px;flex-wrap:wrap;row-gap:4px;align-content:center}
  .c-nm{min-width:140px}
  .c-tg{min-width:150px}
  .c-sig{flex:0 1 224px;min-width:140px;flex-wrap:wrap;row-gap:0}
}
/* game hero price: "as of <date>" and "sales not shown" each wrap as a unit */
.gh-price .asof span{white-space:nowrap}
/* tag pages (/tag/<slug>, wave 2 T-a) and the Tag DNA links into them. Kept at the end so the media rules win. */
.dnarow a.dnatag{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.dnarow a.dnatag:hover{color:var(--link);text-decoration-color:currentColor}
.tag-kpis{margin-bottom:8px}
.tag-share-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:var(--sp-5) 0 var(--sp-1)}
.tag-share-head .rowhead{margin:0}
.tag-share-sub{font-size:13px;color:var(--text-secondary);margin:0 0 var(--sp-3) 13px;max-width:80ch;line-height:1.5}
.tag-bars{display:flex;align-items:stretch;gap:6px;height:180px;padding:12px 12px 8px;background:var(--surface);border:1px solid var(--border-subtle)}
.tb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.tb-v{font-size:11px;color:var(--text-secondary);white-space:nowrap;line-height:1}
.tb-c{flex:1;width:100%;display:flex;align-items:flex-end;border-bottom:1px solid var(--chart-grid)}
.tb-c i{display:block;width:100%;background:var(--match);min-height:0}
.tb.part .tb-c i{background:var(--match-distant)}
.tb-y{font-size:11px;color:var(--text-secondary);line-height:1}
.tag-note{font-size:12px;color:var(--text-secondary);margin:8px 0 0 13px;max-width:80ch;line-height:1.5}
.tag-method{margin-top:var(--sp-5)}
.tag-rowhead{margin-top:var(--sp-5)}
.tag-more{margin-left:auto;font-size:13px;color:var(--link);white-space:nowrap}
.tag-paired{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-2)}
.tag-pair{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);min-width:150px}
.tag-pair:hover{border-color:var(--link)}
.tag-pair b{font-size:13px;font-weight:500}
.tag-pair span{font-size:11px;color:var(--text-secondary)}
@media(max-width:600px){.tag-bars{gap:3px;height:150px;padding:10px 6px 6px}.tb-v{display:none}.tb-y{font-size:10px}.tb-cc{display:none}.tag-pair{min-width:0;flex:1 1 calc(50% - 4px)}.tag-rowhead{flex-wrap:wrap}}
/* game hero audience line (wave 2 K-a): followers and players online, set like the price line above it; each phrase
   wraps as a unit, the separator is the only break point */
.gh-aud{font-size:13px;color:var(--text-secondary);margin-top:2px}
.gh-aud b{font-size:15px;font-weight:700;color:var(--text-primary)}
.gh-aud-i{white-space:nowrap}
/* Steam sales estimate (game page) and its method page — wave 2 #7 */
.sest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);max-width:880px;margin-top:var(--sp-2)}
.sest-cell{background:var(--surface);padding:16px 18px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sest-l{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
.sest-v{font-size:26px;font-weight:700;color:var(--text-primary);line-height:1.2;overflow-wrap:anywhere}
.sest-v.sest-na{font-size:14px;font-weight:400;color:var(--text-secondary);font-family:inherit}
.sest-dash{color:var(--text-secondary);font-weight:400}
.sest-q{font-size:12px;color:var(--text-secondary)}
.sest-note{font-size:13px;line-height:1.55;color:var(--text-secondary);max-width:880px;margin:10px 0 0}
.sest-note b{color:var(--text-primary);font-weight:500}
.sest-empty{font-size:13px;color:var(--text-secondary);margin:6px 0 0}
.sest-in{font-size:11px;color:var(--freshness)} .sest-out{font-size:11px;color:var(--warning)}
.smeth{max-width:900px}
.smeth h1{margin-bottom:10px}
.smeth p,.smeth-l{font-size:14px;line-height:1.6;color:var(--text-secondary);max-width:75ch;margin:8px 0}
.smeth-lead{font-size:15px!important;color:var(--text-primary)!important}
.smeth-l{padding-left:20px} .smeth-l li{margin:4px 0}
.smeth-tw{overflow-x:auto;max-width:100%;margin:10px 0 4px}
.smeth-t{border-collapse:collapse;font-size:13px;min-width:100%}
.smeth-t th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);padding:6px 10px;border-bottom:1px solid var(--border)}
.smeth-t td{padding:6px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);white-space:nowrap}
.smeth-t tr.ho td{background:var(--violet-tint)}
@media(max-width:560px){
  .sest-grid{grid-template-columns:minmax(0,1fr)}
  .sest-v{font-size:22px}
  .smeth-cal td:first-child{white-space:normal;min-width:120px}
}
/* wave-2 review fixes (2026-10-13): the one-line note on games with no sales section (free, unreleased, not a game) */
.sest-none{font-size:13px;color:var(--text-secondary);margin:14px 0 0;max-width:880px}
/* wave-2 review fixes: the tag share chart's first / tallest / latest values, printed on phones where the per-bar
   labels are hidden (UX review #4); the adult note above the tag figures (UX review #2) */
.tag-scale{display:none;font-size:11px;color:var(--text-secondary);margin:6px 0 0;line-height:1.4}
@media(max-width:600px){.tag-scale{display:block}}
.tag-adult{margin:6px 0 12px}
/* wave-2 review UX #9: in the light theme the hero's sub-line, price and followers lines sat on bright art (Balatro's
   red and blue) with little behind them; the scrim starts higher and is denser where those lines are */
[data-theme="light"] .gh-grad{background:linear-gradient(180deg,transparent 8%,color-mix(in srgb,var(--bg) 78%,transparent) 50%,color-mix(in srgb,var(--bg) 94%,transparent) 74%,var(--bg) 100%)}
/* ---------- tag index (/tags): one table across the tag pages ----------
   Desktop: a sortable table whose header sticks under the nav. Up to 767px: each row becomes a card (the tag on
   one line, then four labelled figures) and the group, minimum-games and sort controls fold under one Filters button. */
.mk-adult{margin:0 0 var(--sp-3)}
.mk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0 var(--sp-2)}
.mk-q input{height:36px;width:240px;max-width:100%;background:var(--surface);border:1px solid var(--text-secondary);color:var(--text-primary);padding:0 10px;font:inherit;font-size:14px}
.mk-q input::placeholder{color:var(--text-secondary)}
.mk-f{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center}
.mk-f label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}
.mk-f select{height:36px;background:var(--surface);border:1px solid var(--border);color:var(--text-primary);font:inherit;font-size:14px;padding:0 6px;max-width:100%}
.mk-f .mk-sortl{display:none}
.mk-fbtn{display:none;height:36px;background:var(--surface);border:1px solid var(--border);color:var(--text-primary);font:inherit;font-size:14px;padding:0 12px;cursor:pointer}
.mk-badge{display:inline-block;min-width:18px;padding:0 4px;margin-left:4px;background:var(--gem);color:var(--on-accent);font-size:12px;font-weight:700;text-align:center}
.mk-count{margin-left:auto;font-size:13px;color:var(--text-secondary)}
.mk-table{width:100%;border-collapse:collapse;font-size:14px}
.mk-h th{position:sticky;top:var(--nav-h);z-index:3;background:var(--bg);border-bottom:1px solid var(--border);text-align:right;font-weight:400;padding:8px 10px 6px;vertical-align:bottom;white-space:nowrap}
.mk-h th.mk-h-tag{text-align:left;padding-left:4px}
.mk-h .s{background:none;border:none;color:var(--text-secondary);font:inherit;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;padding:4px 0;min-height:32px}
.mk-h .s:hover,.mk-h .s.on{color:var(--text-primary)}
.mk-h .s i{display:inline-block;width:12px;font-style:normal;color:var(--gem)}
.mk-sub{display:block;font-size:11px;color:var(--text-secondary);font-family:'Ubuntu Mono',ui-monospace,monospace;margin-top:-4px}
.mk-r{border-bottom:1px solid var(--border-subtle)}
.mk-r:hover{background:var(--surface)}
.mk-r>th,.mk-r>td{padding:7px 10px;vertical-align:middle}
.mk-c-tag{text-align:left;font-weight:400;padding-left:4px!important}
.mk-name{color:var(--text-primary);font-size:15px;font-weight:700;padding:2px 0;text-decoration:none}
.mk-name:hover,.mk-name:focus-visible{color:var(--gem);text-decoration:underline}
.mk-grp{display:block;font-size:12px;color:var(--text-secondary);line-height:1.2}
.mk-n{text-align:right;font-family:'Ubuntu Mono',ui-monospace,monospace;font-size:15px;white-space:nowrap}
.mk-sh{display:block;font-size:12px;color:var(--text-secondary)}
.mk-none{text-align:center;color:var(--text-secondary);padding:32px 8px!important}
.mk-none button{background:none;border:none;color:var(--link);font:inherit;cursor:pointer;text-decoration:underline;padding:4px}
.mk-method{margin:var(--sp-4) 0 0;font-size:13px;color:var(--text-secondary);max-width:90ch;line-height:1.7}
.mk-method summary{cursor:pointer;color:var(--text-primary);font-size:14px;padding:6px 0}
.mk-method ul{padding-left:20px;margin-top:4px}
.mk-method li{margin:4px 0}
.mk-method b{color:var(--text-primary);font-weight:700}
.mk-r{animation:panelIn .25s ease-out both;animation-delay:calc(var(--i,0) * 12ms)}
@media(prefers-reduced-motion:reduce){.mk-r{animation:none}}
@media(max-width:767px){   /* cards up to 767: the five-column table needs ~770 px (width probe: +70 at 641, +11 at 700) */
  .mk-bar{gap:var(--sp-2)}
  .mk-q{flex:1 1 0;min-width:0}
  .mk-q input{width:100%;height:40px}
  .mk-fbtn{display:inline-block;height:40px}
  .mk-f{display:none;flex:1 0 100%;flex-direction:column;align-items:stretch;gap:var(--sp-2);padding:10px;border:1px solid var(--border);background:var(--surface)}
  .mk-f.open{display:flex}
  .mk-f label,.mk-f .mk-sortl{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center}
  .mk-f select{height:40px;width:100%}
  .mk-count{flex:1 0 100%;margin-left:0}
  .mk-table,.mk-table tbody{display:block}
  .mk-table thead{display:none}
  .mk-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"tag tag tag tag" "a b c d";gap:4px 8px;padding:10px 2px}
  .mk-r>th,.mk-r>td{padding:0!important}
  .mk-c-tag{grid-area:tag;min-width:0;display:flex;align-items:baseline;gap:8px}
  .mk-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;min-height:24px}
  .mk-grp{display:inline;white-space:nowrap;flex:none}
  .mk-n{text-align:left;font-size:14px;min-width:0}
  .mk-n::before{content:attr(data-l);display:block;font-family:Ubuntu,'Segoe UI',system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mk-sh{font-size:11px}
  .mk-none{display:block}
}
/* Tags (/tags) nav link: up to 1023 px the nav keeps its three links. A fourth overflows the nav at 375-600 px and,
   from 641 px, takes its ~55 px out of the search box (35 px left at 641); the 1 px width probe vs 4359ccc found the
   box back at full width only from 966 px (997 px with a 12-game Watchlist count), so 1023 leaves room for a longer
   count. Below that, /tags is reached from the footer and every tag page's breadcrumb. */
@media(max-width:1023px){.navlinks a[data-nav="tags"]{display:none}}
/* Market table, desktop: fixed column widths so filtering does not move the columns, and the sort arrow of a
   right-aligned header hangs to the left of its label so the label lines up with the figures under it. */
@media(min-width:768px){
  .mk-table{table-layout:fixed}
  .mk-h th.mk-h-tag{width:32%}
  .mk-h .s{position:relative}
  .mk-h th:not(.mk-h-tag) .s i{position:absolute;right:100%;top:50%;transform:translateY(-50%);text-align:center}
}
.mk-still .mk-r{animation:none}
/* explore800 (2026-10-20): Explore's results table at 761-1023 px. Two defects, one cause each:
   1. Page scroll (+128 px at 800): the header's visually hidden "Actions" label (.vh, position:absolute) sat at its
      static position past the table's right edge, and .xtable's overflow:hidden does not clip an absolutely positioned
      descendant unless .xtable is itself positioned. Positioning the table contains every .vh label in it.
   2. Hidden by 1: the row floors (cells 806 px + gaps 56 + padding 32 = 894 px) exceed the table below ~992 px, so
      .xtable clipped every row's "Games like this →" hop (25/25 rows at 761-960). In this band header and rows share
      one grid template: the reviews cell moves under the title, the rank number goes (as on phones) and the cover
      shrinks to 48 px. Tracks are fixed px or minmax(<px>,<n>fr), so every row lines up with the header whatever its
      content. 1024 px and up keep the flex layout. */
.xtable{position:relative}
@media(min-width:761px) and (max-width:1023px){
  .xhead,.xr{display:grid;grid-template-columns:48px minmax(124px,1fr) minmax(130px,1.4fr) 84px 74px 118px;
    grid-template-areas:"art nm tg sim st act" "art sig tg sim st act";column-gap:8px;row-gap:2px;align-items:center;padding:6px 12px}
  .xr{min-height:44px}
  .c-rank{display:none}
  .c-art{grid-area:art;width:48px}
  .xart{width:48px;height:22px}
  .c-nm{grid-area:nm;min-width:0;align-self:end}
  .c-sig{grid-area:sig;min-width:0;flex:none;padding-left:0;align-self:start}
  .c-tg{grid-area:tg;min-width:0}
  .c-sim{grid-area:sim;width:auto;min-width:0}
  .c-st{grid-area:st;width:auto;min-width:0}
  .c-act{grid-area:act;width:auto;min-width:0}
}
/* Tag-cell chips were nowrap, so a chip wider than its cell ran over the match score and reviews (pre-existing): the
   audience chip "Audience ≈ <seed name>" (351 px for The Witcher 3, every desktop width) and long tag chips (183 px
   in a 150-170 px cell for the Terraria seed, 761-1100 px). They wrap inside their cell instead. */
.c-tg .xsig,.c-tg .xwhy{max-width:100%;box-sizing:border-box;white-space:normal;height:auto;min-height:28px;padding-top:3px;padding-bottom:3px;text-align:left}
@media(max-width:760px){.c-tg .xsig,.c-tg .xwhy{min-height:24px;padding-top:0;padding-bottom:0}}   /* phones keep their 24 px chips */
/* SEO content 2026-10-22: the server-rendered figures and lists (ssrFigures, ssrGameRows, ...) are plain tables in the
   .ssr block, shown until app.js replaces it. Readable at 390 px: a table wider than the column scrolls inside itself. */
.ssr .ssr-t{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 var(--sp-3);font-size:14px;line-height:1.45}
.ssr .ssr-t th,.ssr .ssr-t td{padding:4px 12px 4px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.ssr .ssr-t thead th{color:var(--text-secondary);font-weight:600;font-size:12px}
.ssr .ssr-t tbody th{font-weight:500;color:var(--text-primary)}
.ssr .ssr-t td{color:var(--text-secondary);font-variant-numeric:tabular-nums}