/* =====================================================================
   Rate a Gamer styles
   Look: light and friendly by default, with the brand colours from the
   earlier design (navy ink, sunny yellow, red, sky, mint and violet game
   badges). A navy dark mode is one tap away (the moon button), and the
   visitor's choice is remembered.
   - Yellow means "act here": the Rate a player button and the hero.
   - Ratings carry colour: gold stars, red for low reports, green for high.
   - The Wall of Shame is red and hands out Ls; the Hall of Fame is gold and hands out Ws.
   - Type: Inter for text, Unbounded for headings, numbers and the wordmark.
     Gamertags use Inter's slashed zero, tailed l and serifed I.
   - Motion: sections rise in once as you scroll (site.js), game cards and
     list rows stagger, live counts count up, cards lift under a mouse.
     prefers-reduced-motion keeps a short fade and drops the movement.
   - Contrast: text 4.5:1 or better, field outlines 3:1 or better, in both
     themes (checked in the browser by contrast_audit.py).
   Grid: one 1152px column, 6 tracks of 180.33px with a 16px gap.
   ===================================================================== */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600 800;font-display:swap;src:url("fonts/unbounded-latin.woff2") format("woff2")}

/* ---------- Tokens: light (default) ---------- */
:root{
  --ground:#F3F5FA;
  --surface:#FFFFFF;
  --raised:#F4F6FB;
  --hover:#EEF2F9;
  --line:#E4E8F1;
  --control:#7A849E;
  --text:#121A2E;
  --muted:#4D5875;
  --faint:#5E6884;
  --primary:#FFD32A;
  --primary-hover:#FFDC55;
  --on-primary:#121A2E;
  --strong:#121A2E;
  --on-strong:#FFFFFF;
  --star:#F5B800;
  --star-edge:#9A6B00;
  --star-off:#D7DCE7;
  --shame:#D91F35;
  --shame-ink:#B3172B;
  --shame-tint:#FDECEE;
  --fame:#F5B800;
  --fame-ink:#7A5A00;
  --fame-tint:#FFF6D6;
  --loss:#D91F35; --on-loss:#FFFFFF;
  --win:#0B7A4B; --on-win:#FFFFFF;
  --bad:#C2182D;
  --bad-tint:#FDECEE;
  --warn:#A84600;
  --warn-tint:#FFF1E5;
  --ok:#0B7A4B;
  --ok-tint:#E5F6EE;
  --mid-tint:#EEF1F7;
  --ring:#1F6FEB;
  --hero:#FFD32A;
  --hero-ink:#121A2E;
  --hero-muted:#5B4B00;
  --hl:#FFFFFF;
  --hero-field-line:#121A2E;
  --chip-on-line:#121A2E;
  --game-sel:#FFF6D1;
  --g1:#D91F35; --g1-on:#FFFFFF;
  --g2:#0A66A8; --g2-on:#FFFFFF;
  --g3:#FFD32A; --g3-on:#121A2E;
  --g4:#0B7A4B; --g4-on:#FFFFFF;
  --g5:#6A4FD8; --g5-on:#FFFFFF;
  --foot:#121A2E;
  --foot-ink:#E9EDF6;
  --foot-muted:#A9B4CF;
  --scrim:rgba(18,26,46,.55);
  --shadow-1:0 1px 2px rgba(18,26,46,.05),0 4px 14px rgba(18,26,46,.05);
  --shadow-2:0 2px 6px rgba(18,26,46,.06),0 14px 32px rgba(18,26,46,.10);
  --float:0 20px 50px rgba(18,26,46,.18);
  --radius-card:22px;
  --radius-panel:16px;
  --radius-row:12px;
  --radius-pill:999px;
  --gap:16px;
  --pad:24px;
  --control-height:40px;
  --column:1152px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Unbounded","Inter",system-ui,sans-serif;
  --tag-features:"zero" 1,"cv05" 1,"cv08" 1;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-sine:cubic-bezier(0.37,0,0.63,1);
  color-scheme:light;
}
/* ---------- Tokens: dark (navy, from the earlier design) ---------- */
:root[data-theme="dark"]{
  --ground:#0D1426;
  --surface:#151E35;
  --raised:#1D2843;
  --hover:#24304F;
  --line:#2A3657;
  --control:#7080AA;
  --text:#F3F6FC;
  --muted:#A3AFCB;
  --faint:#95A2C2;
  --primary:#FFD32A;
  --primary-hover:#FFDC55;
  --on-primary:#0D1426;
  --strong:#F3F6FC;
  --on-strong:#0D1426;
  --star:#FFC83A;
  --star-edge:transparent;
  --star-off:#3A4770;
  --shame:#FF4D5E;
  --shame-ink:#FF8A95;
  --shame-tint:#3A1C27;
  --fame:#FFC83A;
  --fame-ink:#FFD25C;
  --fame-tint:#2B2715;
  --loss:#FF4D5E; --on-loss:#0D1426;
  --win:#3EE6A2; --on-win:#0D1426;
  --bad:#FF7A87;
  --bad-tint:#3A1C27;
  --warn:#FFB066;
  --warn-tint:#36261A;
  --ok:#4BE3A3;
  --ok-tint:#15342C;
  --mid-tint:#24304F;
  --ring:#6CD4FF;
  --hero:#1A2440;
  --hero-ink:#F3F6FC;
  --hero-muted:#A3AFCB;
  --hl:rgba(255,211,42,.42);
  --hero-field-line:#8A97C0;
  --chip-on-line:#FFD32A;
  --game-sel:#2A2A20;
  --g1:#FF4D5E; --g1-on:#0D1426;
  --g2:#38C8FF; --g2-on:#0D1426;
  --g3:#FFD32A; --g3-on:#0D1426;
  --g4:#3EE6A2; --g4-on:#0D1426;
  --g5:#B49CFF; --g5-on:#0D1426;
  --foot:#0A1020;
  --foot-ink:#E9EDF6;
  --foot-muted:#A3AFCB;
  --scrim:rgba(4,8,20,.72);
  --shadow-1:0 1px 2px rgba(0,0,0,.2);
  --shadow-2:0 14px 32px rgba(0,0,0,.35);
  --float:0 24px 60px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font);font-weight:400;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button,a,label,select,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--control);text-underline-offset:3px;font-weight:500}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.wrap{width:100%;max-width:calc(var(--column) + 48px);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-feature-settings:var(--tag-features)}
.skip{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:-80px;z-index:100;background:var(--primary);color:var(--on-primary);font-weight:700;padding:10px 16px;border-radius:var(--radius-pill);text-decoration:none}
.skip:focus{top:calc(8px + env(safe-area-inset-top,0px))}
main:focus{outline:none}
/* Spam trap: invisible to people, filled in by form bots */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:border-color 200ms ease,box-shadow 200ms ease}
.topbar.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px rgba(18,26,46,.06)}
.top-inner{display:flex;align-items:center;gap:8px 24px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:0;flex:none;text-decoration:none;color:var(--text)}
.brand-mark{width:32px;height:32px;flex:none;display:block}
.brand-mark .bm-tile{fill:var(--primary)}
.brand-mark .bm-star{fill:#121A2E}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1;letter-spacing:0;white-space:nowrap}
.top-nav{display:flex;align-items:center;gap:2px;min-width:0}
.top-nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:var(--radius-pill);color:var(--muted);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:background-color 160ms ease,color 160ms ease}
.top-nav a:hover{color:var(--text);background:var(--hover)}
.top-nav a[aria-current="page"]{color:var(--text);background:var(--hover)}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-height);padding:0 18px;border:1.5px solid transparent;border-radius:var(--radius-pill);background:none;color:var(--text);font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;text-decoration:none;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-strong{background:var(--strong);color:var(--on-strong)}
.btn-strong:hover{opacity:.9}
.btn-ghost{border-color:var(--control);color:var(--text);background:var(--surface)}
.btn-ghost:hover{background:var(--hover);border-color:var(--text)}
.btn-quiet{color:var(--text);padding:0 12px}
.btn-quiet:hover{background:var(--hover)}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
:root[data-theme="dark"] .btn-danger{color:#0D1426}
.btn-danger:hover{opacity:.9}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn .short{display:none}
.keep-case{font-feature-settings:var(--tag-features)}
.btn .keep-case{margin-left:-3px}
/* "Rate <gamertag>" buttons wrap a long gamertag instead of pushing the page sideways */
.btn:has(.keep-case){white-space:normal;max-width:100%;min-width:0;text-align:center;padding-block:8px}
.btn .keep-case{overflow-wrap:anywhere;min-width:0}
#acctBtn{max-width:220px;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:37px;font-feature-settings:var(--tag-features)}
.link-btn{display:inline-flex;align-items:center;text-align:left;min-height:32px;background:none;border:0;border-radius:8px;padding:4px 8px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color 160ms ease,text-decoration-color 160ms ease}
.link-btn:hover{color:var(--text);text-decoration-color:currentColor}
.link-btn.danger{color:var(--bad)}
.link-btn[disabled]{opacity:.45;cursor:not-allowed}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--radius-pill);background:none;color:var(--text);transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.icon-btn:hover{background:var(--hover)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.icon-btn.menu-btn{display:none}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
.mod-btn{display:inline-flex;align-items:center;gap:8px;min-height:var(--control-height);padding:0 8px 0 14px;border:1.5px solid var(--control);border-radius:var(--radius-pill);background:var(--surface);font-weight:700;font-size:14px;transition:background-color 160ms ease}
.mod-btn:hover{background:var(--hover)}
.mod-btn .n{min-width:24px;height:24px;display:inline-grid;place-items:center;padding:0 7px;border-radius:var(--radius-pill);background:var(--raised);font-size:12px;font-variant-numeric:tabular-nums}
.mod-btn.has .n{background:var(--bad);color:#fff}
:root[data-theme="dark"] .mod-btn.has .n{color:#0D1426}

/* ---------- Shared type ---------- */
.label{font-size:13px;font-weight:600;color:var(--muted)}
.count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hint{font-size:12px;color:var(--faint);font-weight:500}
.section-title{font-family:var(--font-display);font-size:18px;line-height:26px;font-weight:700}
.live-dot{position:relative;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#16A34A;margin-right:8px;vertical-align:middle}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#16A34A;animation:ping 2s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(2.6);opacity:0}}

/* ---------- Page grid ---------- */
main.wrap{padding-top:24px;padding-bottom:64px}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--pad);min-width:0;box-shadow:var(--shadow-1)}

/* Hero: the question, the search, a little sparkle */
.intro{grid-column:span 4;align-self:stretch;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:36px;background:var(--hero);color:var(--hero-ink);border-color:transparent}
.intro > *{position:relative;z-index:1}
.intro h1{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.12;letter-spacing:-.01em;max-width:15ch}
.hl{position:relative;z-index:0;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.04em;height:.36em;border-radius:.14em;background:var(--hl);z-index:-1;transform-origin:left center}
.js .hl::after{animation:hl-draw 900ms var(--ease-out) 450ms both}
@keyframes hl-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.intro-sub{font-size:17px;line-height:26px;color:var(--hero-muted);max-width:46ch;font-weight:500}
.hero-search{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:6px;max-width:560px}
.hero-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--hero-ink);margin-top:4px}
.hero-label:first-child{margin-top:0}
.hero-label b,.step{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--strong);color:var(--on-strong);font-family:var(--font-display);font-size:11px;font-weight:800;line-height:1}
.hero-find{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.player-game{margin-bottom:12px}
.player-game .label,.field-label .label{display:inline-flex;align-items:center;gap:8px}
.player-game select{padding-left:14px}
.hero-search select,.hero-search input{min-height:50px;border-radius:var(--radius-pill);padding-left:20px}
.hero-search input{font-feature-settings:var(--tag-features)}
.hero-search .btn{min-height:50px;padding:0 26px}
.hero-game{position:relative;display:block;min-width:0}
.hero-game-icon{position:absolute;left:12px;top:50%;translate:0 -50%;pointer-events:none;line-height:0}
.hero-game-icon .gi{margin:0;vertical-align:0}
.hero-search .hero-game select{padding-left:44px}
.intro-foot{margin-top:auto;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--hero-muted)}
.intro-art{position:absolute!important;right:0;top:0;bottom:0;width:38%;z-index:0!important;pointer-events:none}
/* A W that pops and scores +1, an L that shakes and droops, a GG bubble. Transform only. */
.hero-tile{position:absolute;display:grid;place-items:center;border-radius:26%;font-family:var(--font-display);font-weight:800;line-height:1;box-shadow:0 10px 0 rgba(18,26,46,.18)}
.hero-tile span{display:block}
.hero-w{width:112px;height:112px;right:40px;top:28px;font-size:62px;background:var(--win);color:var(--on-win);rotate:-8deg}
.hero-l{width:74px;height:74px;right:132px;top:122px;font-size:40px;background:var(--loss);color:var(--on-loss);rotate:10deg}
.hero-tile em{position:absolute;top:-12px;right:-14px;padding:4px 8px;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:0 3px 0 rgba(18,26,46,.16);font-style:normal;font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1;opacity:0}
.hero-bubble{position:absolute;right:196px;top:30px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--surface);color:var(--text);font-family:var(--font-display);font-weight:800;font-size:15px;box-shadow:0 6px 0 rgba(18,26,46,.12)}
.js .hero-w{animation:float 5s var(--ease-sine) infinite alternate}
.js .hero-l{animation:float 6s var(--ease-sine) -2.5s infinite alternate}
.js .hero-bubble{animation:float 4.5s var(--ease-sine) -1s infinite alternate}
.js .hero-w span{animation:w-pop 3.2s var(--ease-out) 1s infinite}
.js .hero-w em{animation:score-up 3.2s var(--ease-out) 1s infinite}
.js .hero-l span{animation:l-shake 3.2s ease 2.6s infinite}
.js .hero-l em{animation:score-up 3.2s var(--ease-out) 2.6s infinite}
@keyframes float{from{translate:0 -6px}to{translate:0 8px}}
@keyframes w-pop{0%{transform:none}8%{transform:scale(1.22) rotate(-4deg)}16%{transform:scale(.96)}22%,100%{transform:none}}
@keyframes l-shake{0%{transform:none}5%{transform:rotate(-16deg)}10%{transform:rotate(12deg)}15%{transform:rotate(-8deg)}20%{transform:rotate(4deg)}26%{transform:translateY(5px) rotate(0)}40%,100%{transform:none}}
@keyframes score-up{0%{opacity:0;transform:translateY(6px)}8%{opacity:1;transform:translateY(-6px)}30%{opacity:0;transform:translateY(-30px)}100%{opacity:0}}

/* The L and W badges next to the counts */
.wl{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1;font-style:normal}
.wl i{display:block;font-style:normal}
.wl-l{background:var(--loss);color:var(--on-loss)}
.wl-w{background:var(--win);color:var(--on-win)}
/* idle: the top three on each list (and the #1 cards) keep their badge moving */
.js .nl-row.top .wl-l i,.js .naughty-tile .wl-l i{animation:l-shake 4.2s ease calc(var(--i,0) * 0.7s + 1.2s) infinite}
.js .nl-row.top .wl-w i,.js .angel-tile .wl-w i{animation:w-pop 4.2s var(--ease-out) calc(var(--i,0) * 0.7s + 1.2s) infinite}
.js .angel-tile .wl-w i{animation-delay:2.6s}
/* badges stamp down when the list first rises into view */
.js .naughty-list.revealing .wl{animation:stamp 480ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms + 260ms)}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(-14deg)}70%{opacity:1;transform:scale(.92) rotate(3deg)}100%{opacity:1;transform:none}}
@media (hover: hover) and (pointer: fine){
  .nl-row:hover .wl-l i{animation:l-shake 900ms ease}
  .nl-row:hover .wl-w i{animation:w-pop 900ms var(--ease-out)}
}

/* Live counts */
.stats{grid-column:span 2;align-self:stretch;display:flex;flex-direction:column}
.stats h2{font-family:var(--font-display);font-size:18px;line-height:26px;font-weight:700;margin-bottom:6px}
.stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);flex:1;min-height:60px}
.stats h2 + .stat{border-top:0}
.stat span{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--muted)}
.stat span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--dot,var(--g2));flex:none}
.stat:nth-of-type(1){--dot:var(--g2)}
.stat:nth-of-type(2){--dot:var(--g4)}
.stat:nth-of-type(3){--dot:var(--g5)}
.stat b{font-family:var(--font-display);font-size:28px;line-height:32px;font-weight:700;font-variant-numeric:tabular-nums}
.stat b.dash{color:var(--faint);font-weight:600}
.stats-foot{display:flex;align-items:center;gap:0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;font-weight:500;color:var(--muted)}
.skel-num{width:56px;height:28px}

/* #1 on each list */
.top-card{grid-column:span 3;align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:8px;align-items:start;border-color:transparent}
.naughty-tile{background:var(--shame-tint)}
.angel-tile{background:var(--fame-tint)}
.tt-label{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.naughty-tile .tt-label b{color:var(--shame-ink)}
.angel-tile .tt-label b{color:var(--fame-ink)}
.tt-label b{font-weight:800}
.tt-label .wl{width:38px;height:38px;border-radius:11px;font-size:20px}
.tt-tag{justify-self:start;font-feature-settings:var(--tag-features);font-weight:700;font-size:24px;line-height:30px;background:none;border:0;padding:0;text-align:left;color:var(--text);overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;max-width:100%}
.tt-tag:hover{text-decoration-color:currentColor}
.tt-meta{grid-column:1;font-size:14px;font-weight:500;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-variant-numeric:tabular-nums}
.tt-empty{grid-column:1;font-size:15px;color:var(--muted);max-width:52ch}
.top-card .link-btn{grid-column:2;grid-row:2 / span 2;align-self:end;margin-right:-8px;color:var(--text)}
.top-card .skel{grid-column:1 / -1}

/* ---------- Games: colourful count cards that filter the players list ---------- */
.games{grid-column:span 6;margin-top:16px}
.games-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.game-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.game-tile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:0;align-items:center;min-height:72px;padding:12px 14px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-panel);min-width:0;box-shadow:var(--shadow-1);transition:background-color 160ms ease,border-color 160ms ease,transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.game-tile:hover{border-color:var(--control)}
.game-tile[aria-pressed="true"]{border-color:var(--primary);background:var(--game-sel)}
.gt-mono{grid-row:1 / span 2;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:0;background:var(--g,var(--g2));color:var(--g-on,#fff)}
.game-tile.c1 .gt-mono{--g:var(--g1);--g-on:var(--g1-on)}
.game-tile.c2 .gt-mono{--g:var(--g2);--g-on:var(--g2-on)}
.game-tile.c3 .gt-mono{--g:var(--g3);--g-on:var(--g3-on)}
.game-tile.c4 .gt-mono{--g:var(--g4);--g-on:var(--g4-on)}
.game-tile.c5 .gt-mono{--g:var(--g5);--g-on:var(--g5-on)}
.gt-mono svg,.gi svg{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.gt-mono svg{width:26px;height:26px;stroke-width:2}
/* game symbol chips: a coloured square holding the game's symbol, next to its name */
.gi{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:var(--g,var(--g2));color:var(--g-on,#fff);vertical-align:-5px;margin-right:8px}
.gi svg{width:15px;height:15px;stroke-width:2.3}
.gi-xs{width:18px;height:18px;border-radius:6px;margin-right:6px;vertical-align:-4px}
.gi-xs svg{width:12px;height:12px;stroke-width:2.5}
.gi-lg{width:32px;height:32px;border-radius:10px;margin-right:10px;vertical-align:-6px}
.gi-lg svg{width:20px;height:20px;stroke-width:2.2}
.gi.c1{--g:var(--g1);--g-on:var(--g1-on)}
.gi.c2{--g:var(--g2);--g-on:var(--g2-on)}
.gi.c3{--g:var(--g3);--g-on:var(--g3-on)}
.gi.c4{--g:var(--g4);--g-on:var(--g4-on)}
.gi.c5{--g:var(--g5);--g-on:var(--g5-on)}
.tt-game{display:inline-flex;align-items:center}
/* an official logo (when the owner has added one) sits on a plain white chip instead of the colour */
.gt-mono.is-logo,.gi.is-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.gt-mono.is-logo img,.gi.is-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:12%}
.rv-player .gi{text-decoration:none}
.more-games{color:var(--text);font-weight:700}
.gt-name{font-size:14px;line-height:19px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gt-meta{font-size:13px;line-height:18px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-meta b{font-weight:800;color:var(--text)}

.notice{grid-column:span 6;background:var(--warn-tint);color:var(--warn);border-radius:var(--radius-panel);padding:14px 18px;font-size:14px;font-weight:600}

/* ---------- Players and the detail panel ---------- */
/* Players and detail sit in their own 6-track box; the sticky Players card can't leave it, so it never floats over the banner or the lists */
.browse{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:inherit;align-items:start}
.players{grid-column:span 2;position:sticky;top:80px;z-index:2}
.detail{grid-column:span 4;min-height:340px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-head h2{font-family:var(--font-display);font-size:17px;line-height:24px;font-weight:700}
#playersTitle{display:flex;align-items:flex-start;min-width:0}
#playersTitle .gi{margin-top:1px}
.field-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.search-box{position:relative}
.search-box svg{position:absolute;left:15px;top:50%;width:17px;height:17px;transform:translateY(-50%);stroke:var(--faint);fill:none;stroke-width:2;pointer-events:none}

.input,.search-box input,.hero-search input,select,textarea{width:100%;min-height:44px;background:var(--surface);border:1.5px solid var(--control);border-radius:12px;padding:10px 14px;font-size:15px;font-weight:500;color:var(--text);transition:border-color 160ms ease,box-shadow 160ms ease}
.search-box input{padding-left:40px;border-radius:var(--radius-pill);font-feature-settings:var(--tag-features)}
select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%237A849E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
select option{background:var(--surface);color:var(--text)}
::placeholder{color:var(--faint);opacity:1}
.input:focus,.search-box input:focus,.hero-search input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 25%,transparent)}
.input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}
/* fields on the hero: a strong outline so they stand out from the yellow (3:1 or better) */
.hero-search select,.hero-search input{border:2px solid var(--hero-field-line);background-color:var(--surface)}
.sort-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:12px}
.sort-field{display:grid;gap:4px;min-width:0}

.create-hit{margin-top:12px;border-radius:var(--radius-panel);background:var(--game-sel);border:1.5px dashed var(--primary);padding:14px;display:grid;gap:10px;justify-items:start}
.create-hit p{font-size:14px;color:var(--muted)}
.create-hit b{color:var(--text);font-weight:700;font-feature-settings:var(--tag-features);overflow-wrap:anywhere}

.player-list{list-style:none;margin:12px -10px 0;padding:0;display:grid;gap:2px}
.player-row{width:100%;min-height:58px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:left;background:none;border:0;border-radius:var(--radius-row);padding:8px 10px;transition:background-color 160ms ease}
.player-row:hover{background:var(--hover)}
.player-row[aria-current="true"]{background:var(--game-sel);box-shadow:inset 3px 0 0 var(--primary)}
.pr-tag{font-feature-settings:var(--tag-features);font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pr-score{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.pr-meta{grid-column:1 / -1;font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-small{margin-top:12px;font-size:14px;color:var(--muted)}

/* ---------- Stars ---------- */
.stars{position:relative;display:inline-flex;vertical-align:middle;line-height:0;--s:15px}
.stars.sm{--s:14px}
.stars.lg{--s:22px}
.stars-back,.stars-front{display:flex;gap:1px}
.stars svg{width:var(--s);height:var(--s);flex:none;overflow:visible}
.stars svg path{stroke:var(--star-edge);stroke-width:1.1;stroke-linejoin:round}
.stars-back svg{fill:var(--star-off)}
.stars-back svg path{stroke:transparent}
.stars-front{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.stars-front svg{fill:var(--star)}

/* ---------- Detail views ---------- */
.game-title{font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:700;margin-top:2px}
.statline{margin-top:8px;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:4px 16px}
.statline b{color:var(--text);font-weight:700}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 6px}
.section-h h3{font-family:var(--font-display);font-size:17px;line-height:24px;font-weight:700}
.empty-state{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;justify-items:start;max-width:60ch}
.empty-state .btn{white-space:normal;text-align:center;max-width:100%;padding-block:8px}
.empty-state p{color:var(--muted)}
.loading{margin-top:16px;color:var(--muted)}

.back{margin:-6px 0 6px -8px}
.dossier-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--gap);align-items:start}
.dossier-id{min-width:0;display:grid;gap:10px;justify-items:start}
.tag-big{font-feature-settings:var(--tag-features);font-weight:800;font-size:30px;line-height:36px;letter-spacing:-.01em;overflow-wrap:anywhere;max-width:100%}
.tag-big:focus{outline:none}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.verdict,.nl-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;white-space:nowrap}
.v-bad{background:var(--bad-tint);color:var(--bad)}
.v-warn{background:var(--warn-tint);color:var(--warn)}
.v-mid{background:var(--mid-tint);color:var(--text)}
.v-ok{background:var(--ok-tint);color:var(--ok)}
.nl-badge.shame{background:var(--shame-tint);color:var(--shame-ink)}
.nl-badge.fame{background:var(--fame-tint);color:var(--fame-ink)}
.nl-badge .wl{width:20px;height:20px;border-radius:6px;font-size:11px}
.reported-tags{display:grid;gap:6px}
.scorebox{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-panel);padding:18px;display:grid;gap:12px}
.score-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.score-num{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:42px;font-variant-numeric:tabular-nums}
.score-num small{font-size:16px;color:var(--muted);font-weight:600}
.score-sub{font-size:12px;color:var(--muted);display:grid;gap:2px}
.dist{display:grid;gap:7px}
.dist-row{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
.dist-row .k{font-weight:700;display:flex;align-items:center;gap:3px;color:var(--muted)}
.dist-row .k svg{width:12px;height:12px;fill:var(--star)}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--star);border-radius:4px;transform-origin:left center}
.js .detail.fresh-open .bar i{animation:bar-grow 700ms var(--ease-out) both}
@keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dist-row .c{color:var(--muted);text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;border:1.5px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);padding:0 10px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;max-width:100%}
.chip.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad);background:var(--bad-tint)}
.chip.good{border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok);background:var(--ok-tint)}
.chip .n{color:var(--muted);font-variant-numeric:tabular-nums}
.chip.bad .n,.chip.good .n{color:inherit;opacity:.85}
.dossier-cta{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.plat-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}

/* ---------- Reports: a rating colour on every row ---------- */
.review-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.review{--band:var(--control);position:relative;padding:14px 16px 14px 20px;background:var(--raised);border-radius:var(--radius-panel);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;min-width:0;overflow:hidden}
.review::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--band)}
.review.r1,.review.r2{--band:var(--bad)}
.review.r4,.review.r5{--band:var(--ok)}
.review > *{grid-column:1 / -1}
.review > .rv-meta:has(+ .rv-actions){grid-column:1;align-self:center}
.review > .rv-meta + .rv-actions{grid-column:2;margin:-6px -8px -6px 0;align-self:center}
.rv-top{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.rv-word{font-weight:800;font-size:14px}
.rv-player{font-feature-settings:var(--tag-features);font-weight:700;font-size:14px;background:none;border:0;padding:2px 0;color:var(--text);text-decoration:underline;text-decoration-color:var(--control);text-underline-offset:3px;overflow-wrap:anywhere;text-align:left}
.rv-player:hover{text-decoration-color:currentColor}
.rv-time{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap}
.rv-text{font-size:15px;line-height:23px;max-width:68ch;overflow-wrap:anywhere;white-space:pre-line}
.rv-meta{font-size:12px;color:var(--faint);display:flex;flex-wrap:wrap;gap:2px 12px;list-style:none;margin:0;padding:0;min-width:0}
.rv-meta > *{min-width:0;overflow-wrap:anywhere}
.rv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.you{font-size:11px;font-weight:800;border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);padding:1px 9px}
.flagged{font-size:12px;font-weight:700;color:var(--bad);background:var(--bad-tint);border-radius:var(--radius-pill);padding:1px 9px}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-row);padding:6px 6px 6px 12px;justify-self:start}
.reasons{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.disclaimer{font-size:13px;color:var(--muted);margin:4px 0 10px;max-width:70ch;overflow-wrap:anywhere}
.proof-badge{font-size:12px;font-weight:700;color:var(--g2);background:color-mix(in srgb,var(--g2) 12%,var(--surface));border-radius:var(--radius-pill);padding:1px 9px;white-space:nowrap}
:root[data-theme="dark"] .proof-badge{color:var(--g2)}
.proof-row{display:flex;flex-wrap:wrap;gap:8px}
.proof-thumb{width:132px;height:82px;max-width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);display:grid;place-items:center;transition:transform 200ms var(--ease-out)}
.proof-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.proof-missing{font-size:12px;color:var(--muted);padding:6px;text-align:center;line-height:1.3}

/* ---------- Wall of Shame and Hall of Fame ---------- */
.lists{--list:var(--shame);--list-ink:var(--shame-ink);--list-tint:var(--shame-tint);grid-column:span 6;margin-top:16px;padding:32px}
.lists.angel{--list:var(--fame);--list-ink:var(--fame-ink);--list-tint:var(--fame-tint)}
.naughty-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.naughty-head > div:first-child{min-width:0;flex:1 1 380px}
.naughty-title{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:30px;line-height:38px;font-weight:800;color:var(--text)}
.naughty-title .wl{width:44px;height:44px;border-radius:12px;font-size:24px}
.naughty-live{display:flex;align-items:center;margin-top:8px;font-size:14px;font-weight:600;color:var(--list-ink)}
.naughty-sub{color:var(--muted);margin-top:6px;max-width:72ch}
.list-tabs,.auth-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-pill)}
.list-tabs button,.auth-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:38px;border:0;background:none;border-radius:var(--radius-pill);padding:0 16px;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap;transition:background-color 200ms ease,color 200ms ease,box-shadow 200ms ease}
.list-tabs button:hover,.auth-tabs button:hover{color:var(--text)}
.list-tabs button .wl{width:22px;height:22px;border-radius:6px;font-size:12px}
.auth-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
#tabNaughty[aria-selected="true"]{background:var(--shame);color:#fff}
#tabAngel[aria-selected="true"]{background:var(--fame);color:#121A2E}
:root[data-theme="dark"] #tabNaughty[aria-selected="true"]{color:#0D1426}
#tabNaughty[aria-selected="true"] .wl{background:#fff;color:var(--loss)}
:root[data-theme="dark"] #tabNaughty[aria-selected="true"] .wl{background:#0D1426}
.nl-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
.nl-toolbar select:disabled{opacity:.6;cursor:not-allowed}
.nl-summary{margin-top:14px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.naughty-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.nl-row{display:grid;grid-template-columns:56px minmax(0,1fr) 130px 210px;gap:4px 18px;align-items:center;min-height:84px;padding:12px 18px 12px 14px;background:var(--raised);border:1px solid transparent;border-radius:var(--radius-panel)}
.nl-row.top{background:var(--list-tint);border-color:color-mix(in srgb,var(--list) 30%,transparent)}
.nl-row.fresh{animation:fresh 2.4s ease-out}
@keyframes fresh{0%{box-shadow:0 0 0 3px var(--list)}100%{box-shadow:0 0 0 3px transparent}}
.nl-rank{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted)}
.nl-row.top .nl-rank{background:var(--list);border-color:transparent;color:#fff;font-size:17px}
.lists.angel .nl-row.top .nl-rank{color:#121A2E}
:root[data-theme="dark"] .nl-row.top .nl-rank{color:#0D1426}
.nl-who{min-width:0;display:grid;gap:2px;justify-items:start}
.nl-tag{font-feature-settings:var(--tag-features);font-weight:800;font-size:17px;line-height:23px;background:none;border:0;padding:2px 0;text-align:left;color:var(--text);overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.nl-tag:hover{text-decoration-color:currentColor}
.nl-sub{font-size:12px;color:var(--faint)}
.nl-note{font-size:13px;font-weight:600;color:var(--list-ink)}
.nl-pts{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:800;font-size:16px;white-space:nowrap}
.nl-pts{gap:8px}
.nl-pts .wl{width:30px;height:30px;border-radius:9px;font-size:16px}
.nl-pts .label{font-size:12px;font-weight:600;color:var(--faint)}
.nl-score{display:grid;justify-items:end;gap:2px;font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.nl-score .avg{display:flex;align-items:center;gap:6px;color:var(--text);font-weight:800;font-size:15px}
.naughty-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.naughty-rules{font-size:13px;color:var(--muted);max-width:86ch}
.naughty-empty{margin-top:16px;color:var(--muted);max-width:65ch}

/* Loading placeholders: flat bars at the real size */
.skel{display:block;background:var(--hover);border-radius:8px}
.skel-row{height:58px;margin:4px 0}
.skel-line{height:14px;margin-top:8px}
.skel-line.w60{width:60%} .skel-line.w40{width:40%}

/* ---------- Footer ---------- */
.foot{background:var(--foot);color:var(--foot-muted);padding-block:40px 48px;font-size:13px;margin-top:8px}
.foot a{color:var(--foot-ink)}
.foot-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:start}
.foot-brand{display:grid;gap:10px;justify-items:start}
.foot-brand .brand{color:#fff}
.foot-brand p{max-width:62ch;font-size:14px;color:var(--foot-muted)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 4px;max-width:540px}
.foot nav a,.foot nav button{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border:0;background:none;border-radius:var(--radius-pill);color:var(--foot-ink);font-weight:600;font-size:13px;text-decoration:none;transition:background-color 160ms ease}
.foot nav a:hover,.foot nav button:hover{background:rgba(255,255,255,.08)}
.foot-legal{grid-column:1 / -1;display:grid;gap:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.foot-legal p{max-width:100ch}
.cfg-missing{background:var(--warn-tint);color:var(--warn);border-radius:4px;padding:0 4px}
.foot .cfg-missing{background:#3A2A12;color:#FFC27A}

/* ---------- Dialogs ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.sheet-backdrop{position:absolute;inset:0;background:var(--scrim);animation:fade 250ms var(--ease-out) both}
.sheet-panel{position:relative;width:min(600px,100%);max-height:calc(100% - 8px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--float);display:grid;gap:18px;padding:24px 0;animation:sheet-in 250ms var(--ease-out) both}
.sheet-panel.narrow{width:min(470px,100%)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheet-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 24px}
.sheet-head h2{font-family:var(--font-display);font-size:22px;line-height:30px;font-weight:700}
.sheet-head .sub{font-size:14px;color:var(--muted);margin-top:4px}
.close-x{background:var(--raised);border:0;width:38px;height:38px;margin:-4px -8px 0 0;display:grid;place-items:center;flex:none;border-radius:var(--radius-pill);transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.close-x:hover{background:var(--hover)}
.close-x:active{transform:scale(.94)}
.close-x svg{width:18px;height:18px;stroke:var(--text);stroke-width:2.2;stroke-linecap:round;fill:none}
.fields{display:grid;gap:18px;padding:0 24px}
.field{display:grid;gap:6px;min-width:0}
.field > .label,.field-label .label,fieldset.bare legend{font-size:14px;font-weight:700;color:var(--text)}
fieldset.bare,.field.bare{border:0;padding:0;margin:0;min-width:0}
fieldset.bare legend{margin-bottom:8px;padding:0}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mono-input{font-feature-settings:var(--tag-features)}
.existing{font-size:13px;color:var(--text);font-weight:600;background:var(--game-sel);border-radius:10px;padding:8px 12px}
.req{color:var(--bad);margin-left:3px}
.req-note{font-size:12px;color:var(--faint)}
.field-error{display:flex;align-items:flex-start;gap:8px;color:var(--bad);font-size:13px;font-weight:600;line-height:1.4}
.field-error::before{content:"!";flex:none;display:grid;place-items:center;width:17px;height:17px;margin-top:1px;border-radius:50%;background:var(--bad);color:var(--surface);font-size:11px;font-weight:800}
.star-input,.tag-pick{position:relative}
.star-input{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.star-input input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.star-input label{cursor:pointer;line-height:0;padding:3px;border-radius:8px}
.star-input svg{width:36px;height:36px;fill:var(--star-off);overflow:visible;transition:fill 160ms ease,transform 200ms var(--ease-out)}
.star-input svg path{stroke:var(--star-edge);stroke-width:1.1;stroke-linejoin:round}
.star-input label:not(.on) svg path{stroke:transparent}
.star-input label.on svg{fill:var(--star)}
.star-input input:focus-visible + label{outline:2px solid var(--ring);outline-offset:1px}
.star-word{margin-left:8px;font-weight:800;font-size:15px;min-width:0}
.tag-pick{display:flex;flex-wrap:wrap;gap:8px}
.tag-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tag-pick label{display:inline-flex;align-items:center;gap:6px;min-height:36px;border:1.5px solid var(--control);background:var(--surface);border-radius:var(--radius-pill);padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.tag-pick label:active{transform:scale(.96)}
.tag-pick label::before{content:"+";font-weight:800;color:var(--faint)}
.tag-pick input:checked + label{background:var(--primary);border-color:var(--chip-on-line);color:var(--on-primary)}
.tag-pick input:checked + label::before{content:"✓";color:var(--on-primary)}
.tag-pick input:focus-visible + label{outline:2px solid var(--ring);outline-offset:2px}
.plat-pick label::before{content:"";width:10px;height:10px;border:2px solid var(--faint);border-radius:3px;box-sizing:border-box}
.plat-pick input:checked + label::before{content:"";background:var(--on-primary);border-color:var(--on-primary)}
textarea{min-height:116px;resize:vertical;line-height:1.5}
.counter{font-size:12px;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.guide{font-size:13px;color:var(--muted);line-height:19px;border-left:3px solid var(--line);padding-left:10px}
.form-error{color:var(--bad);font-size:14px;font-weight:600;padding:0 24px}
.form-ok{color:var(--ok);background:var(--ok-tint);border-radius:12px;font-size:14px;font-weight:600;padding:12px 14px;margin:0 24px}
.sheet-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 24px;flex-wrap:wrap}
.discard{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;margin:0 24px;padding:10px 12px;background:var(--warn-tint);color:var(--warn);border-radius:var(--radius-panel);font-weight:600;font-size:14px}
.discard span{margin-right:auto}

/* Toast: a transition (not keyframes) so a second toast retargets smoothly */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:60;background:var(--strong);color:var(--on-strong);font-weight:600;font-size:14px;padding:12px 20px;border-radius:var(--radius-pill);box-shadow:var(--float);max-width:calc(100% - 32px);opacity:1;transform:none;transition:opacity 400ms ease,transform 400ms ease}
@starting-style{.toast{opacity:0;transform:translateY(100%)}}

/* Screenshot upload */
.drop{position:relative;display:grid;gap:10px;border:2px dashed var(--control);border-radius:var(--radius-panel);padding:14px;background:var(--raised);transition:border-color 160ms ease,background-color 160ms ease}
.drop.over{border-color:var(--ring);background:var(--hover)}
.drop-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop input[type=file]:focus-visible + label{outline:2px solid var(--ring);outline-offset:2px}
.drop input[type=file]:disabled + label{opacity:.45;cursor:not-allowed}
.drop label.btn{cursor:pointer}
.drop .hint-text{font-size:13px;color:var(--muted);flex:1 1 220px;min-width:0}
.up-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.up-thumb{position:relative;width:108px;height:70px;overflow:hidden;border-radius:10px;background:var(--surface)}
.up-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.up-thumb button{position:absolute;top:4px;right:4px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(18,26,46,.75);color:#fff;font-size:16px;line-height:1;display:grid;place-items:center;padding:0}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(10,14,26,.9);animation:fade 250ms var(--ease-out) both;padding:max(64px,calc(56px + env(safe-area-inset-top,0px))) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-fig{margin:0;display:grid;gap:8px;justify-items:center;max-width:100%;max-height:100%;min-width:0}
.lb-fig img{max-width:100%;max-height:calc(100dvh - 150px);border-radius:12px;background:#fff}
.lb-fig figcaption{color:#E9EDF6;font-size:13px;max-width:100%;overflow-wrap:anywhere}
.lightbox .close-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,calc(12px + env(safe-area-inset-right,0px)));width:44px;height:44px;margin:0;background:#fff}
.lightbox .close-x svg{stroke:#121A2E}

/* ---------- Accounts ---------- */
.oauth{display:grid;gap:8px}
.oauth .btn{width:100%;min-height:46px}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:13px;font-weight:600}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer;min-height:32px}
.check input{width:19px;height:19px;margin:1px 0 0;flex:none;accent-color:var(--strong)}
.rule-list{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.acct{position:relative;min-width:0}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);box-shadow:var(--float);padding:6px;display:grid;transform-origin:top right;animation:menu-in 200ms var(--ease-out) both}
@keyframes menu-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.acct-menu .who{font-size:12px;color:var(--muted);padding:8px 10px;margin:0 0 4px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.acct-menu button{text-align:left;min-height:40px;background:none;border:0;border-radius:10px;padding:8px 10px;font-weight:600;font-size:14px;color:var(--text);display:flex;align-items:center}
.acct-menu button:hover,.acct-menu button:focus-visible{background:var(--hover)}
.acct-menu button.danger{color:var(--bad);margin-top:5px;position:relative}
.acct-menu button.danger::before{content:"";position:absolute;left:4px;right:4px;top:-3px;height:1px;background:var(--line)}
.nav-acct{display:none}
.nav-who{font-size:12px;color:var(--muted);padding:8px 12px;overflow-wrap:anywhere}
.nav-item{text-align:left;min-height:44px;background:none;border:0;border-radius:10px;padding:0 12px;font-weight:600;font-size:15px;color:var(--text)}
.nav-item:hover{background:var(--hover)}
.nav-item.danger{color:var(--bad)}
.banner{margin-top:6px;padding:10px 14px;font-size:14px;font-weight:600;border-radius:12px;background:var(--warn-tint);color:var(--warn)}
.status-chip{font-size:12px;font-weight:700;color:var(--warn);background:var(--warn-tint);border-radius:var(--radius-pill);padding:1px 9px;white-space:nowrap}
.mod-note{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mod-note input{flex:1 1 220px;min-width:0}
.dispute-card{padding:16px;margin-top:10px;background:var(--raised);border-radius:var(--radius-panel);display:grid;gap:8px}
.dispute-card .msg{white-space:pre-line;overflow-wrap:anywhere;max-width:70ch}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:78px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:32px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:var(--raised);color:var(--text);font-weight:700;font-size:13px;transition:background-color 160ms ease}
.pw-toggle:hover{background:var(--hover)}
.un-status{font-size:13px;font-weight:600;line-height:1.4}
.un-status:empty{display:none}
.un-status.good{color:var(--ok)}
.un-status.bad{color:var(--bad)}
.auth-tabs{display:flex}
.auth-tabs button{flex:1;justify-content:center}
.auth-links{display:flex;flex-wrap:wrap;gap:4px 12px;margin-left:-8px}
.fields-inner{display:grid;gap:16px}
.link-btn.small{min-height:28px;padding:2px 6px;font-size:13px}
.field-label .link-btn{margin-right:-6px}
#captchaBox:empty{display:none}

/* ---------- Cookie notice ---------- */
.consent{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:65;width:min(430px,calc(100% - 32px));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--float);padding:20px;display:grid;gap:12px;opacity:1;transform:none;transition:opacity 400ms ease,transform 400ms ease}
@starting-style{.consent{opacity:0;transform:translateY(24px)}}
.consent h2{font-family:var(--font-display);font-size:17px;line-height:24px;font-weight:700;margin:0}
.consent p{font-size:14px;line-height:21px;color:var(--muted);margin:0;max-width:none}
.consent-actions{display:flex;flex-wrap:wrap;gap:8px}
.consent-actions .btn{flex:1 1 140px}

/* ---------- Policy pages and 404 ---------- */
.legal-wrap{max-width:calc(760px + 48px);margin:0 auto;padding-block:28px 64px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.legal main h1{font-family:var(--font-display);font-size:34px;line-height:42px;font-weight:800;margin:0 0 8px}
.legal .meta{color:var(--muted);font-size:13px;margin-bottom:24px}
.legal main h2{font-family:var(--font-display);font-size:19px;line-height:27px;font-weight:700;margin:36px 0 8px}
.legal main h3{font-size:16px;line-height:23px;font-weight:700;margin:20px 0 6px}
.legal main p,.legal main li{font-size:16px;line-height:26px;max-width:68ch}
.legal main p{margin:0 0 12px}
.legal main ul,.legal main ol{margin:0 0 12px;padding-left:22px;display:grid;gap:4px}
.legal .callout{background:var(--hero);color:var(--hero-ink);border-radius:var(--radius-panel);padding:18px 20px;margin:0 0 20px}
.legal .callout p{margin:0}
.legal .back{display:inline-flex;align-items:center;min-height:32px;margin:0 0 12px;color:var(--muted);text-decoration:none;font-weight:600}
.legal .back:hover{color:var(--text)}
.legal table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:14px;background:var(--surface);border-radius:var(--radius-panel);overflow:hidden;box-shadow:var(--shadow-1)}
.legal th,.legal td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.legal thead th{border-top:0;font-size:12px;font-weight:700;color:var(--muted);background:var(--raised)}
.legal code{font-size:13px;background:var(--hover);border-radius:6px;padding:1px 6px}
.notfound{min-height:calc(100dvh - 300px);display:grid;align-content:center;justify-items:start;gap:14px;padding-block:56px}
.notfound .code{font-family:var(--font-display);font-weight:800;font-size:64px;line-height:1;color:var(--text);display:flex;align-items:center;gap:12px}
.notfound .code .wl{width:72px;height:72px;border-radius:20px;font-size:40px;rotate:-6deg}
.js .notfound .code .wl i{animation:l-shake 3.6s ease 1s infinite}
.notfound h1{font-family:var(--font-display);font-size:30px;line-height:38px;font-weight:700}
.notfound p{color:var(--muted);font-size:17px;line-height:26px;max-width:52ch}
.notfound .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* Help page contents, the removal form, the not-available page */
.legal .toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.legal .toc a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;text-decoration:none;color:var(--text)}
.legal .toc a:hover{background:var(--hover)}
.legal .banner{margin:0 0 18px}
.takedown-form{display:grid;gap:18px;padding:24px 0;margin:0 0 12px}
.takedown-form .check{margin:0}
.unavail-mail{font-size:15px}
.notfound .row + p{margin-top:8px}
/* ---------- Scroll progress: a yellow line under the top bar fills as you scroll ---------- */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--primary);transform:scaleX(0);transform-origin:left center;will-change:transform}

/* ---------- Chihuahua banner: a squad of costumed pups slides sideways as you scroll ----------
   The dogs are drawn in index.html (made by tools/chihuahuas.py). site.js copies the parade twice so
   it fills wide screens, slides it with the scroll, and adds .live only while the banner is on screen,
   so the little loops below stop when nobody can see them. */
.band{grid-column:span 6;margin-top:16px;border-radius:var(--radius-card);overflow:hidden;background:var(--primary);box-shadow:var(--shadow-1)}
.band-row{overflow:hidden;white-space:nowrap;padding:34px 0 18px}
.band-track{display:inline-flex;align-items:flex-end;gap:18px;padding-left:18px;will-change:transform}
.pup{position:relative;flex:none;display:block;width:132px;height:141px}
.pup svg{display:block;width:100%;height:100%;overflow:visible}
.pup svg *{transform-box:view-box}
.pup-badge{position:absolute;top:2px;right:-4px;width:36px;height:36px;border-radius:10px;font-size:20px;box-shadow:0 0 0 3px #fff,0 4px 0 3px rgba(18,26,46,.18)}
.paw{flex:none;align-self:center;width:28px;height:28px;fill:#121A2E;opacity:.28;rotate:18deg}
.band-track > .paw:nth-child(4n){rotate:-14deg;translate:0 10px}
/* each pup starts its loops at a different moment, copies included */
.band-track > :nth-child(5n+1){--dl:-.4s}
.band-track > :nth-child(5n+2){--dl:-1.3s}
.band-track > :nth-child(5n+3){--dl:-2.1s}
.band-track > :nth-child(5n+4){--dl:-.9s}
.band-track > :nth-child(5n){--dl:-1.7s}
/* every pup wears a W or an L: the L shakes, the W pops, and site.js keeps flipping them; each flip floats a +1 or -1 up, like the hero tiles */
.band.live .pup .wl-l i{animation:l-shake 3.4s ease var(--dl,0s) infinite}
.band.live .pup .wl-w i{animation:w-pop 3s var(--ease-out) calc(var(--dl,0s) + .4s) infinite}
.pup-badge.flip{animation:badge-flip 360ms ease-in-out}
.pup-badge em{position:absolute;top:-12px;right:-14px;padding:3px 7px;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:0 3px 0 rgba(18,26,46,.16);font-style:normal;font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1;opacity:0;pointer-events:none}
.pup-badge.scored em{animation:pup-score 1s var(--ease-out)}
@keyframes pup-score{0%{opacity:0;transform:translateY(6px)}18%{opacity:1;transform:translateY(-4px)}70%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
@keyframes badge-flip{0%{transform:none}50%{transform:rotateY(90deg) scale(1.15)}100%{transform:none}}
/* every pup: bobs, blinks, wags and flicks an ear now and then */
.band.live .pup{animation:pup-bob 2.6s var(--ease-sine) var(--dl,0s) infinite alternate}
.band.live .pup .eye{animation:pup-blink 4.4s linear calc(var(--dl,0s) - 1.2s) infinite}
.band.live .pup .tail{animation:pup-wag .42s ease-in-out var(--dl,0s) infinite alternate}
.band.live .pup .ear-l{animation:pup-ear-l 3.6s ease calc(var(--dl,0s) - .6s) infinite}
.band.live .pup .ear-r{animation:pup-ear-r 4.2s ease calc(var(--dl,0s) - 2s) infinite}
/* demon: flames flicker, eyes glow, tail swishes, and it cackles */
.band.live .pup-demon .fl{animation:pup-flame .9s ease-in-out infinite alternate}
.band.live .pup-demon .fl2{animation-duration:.7s;animation-delay:-.3s}
.band.live .pup-demon .fl3{animation-duration:.55s;animation-delay:-.15s}
.band.live .pup-demon .glow{animation:pup-glow 1.6s ease-in-out infinite alternate}
.band.live .pup-demon .dtail{animation:pup-swish 1.8s var(--ease-sine) infinite alternate}
.band.live .pup-demon .head{animation:pup-cackle 3.4s ease var(--dl,0s) infinite}
/* knight: plume sways, shield bumps */
.band.live .pup-knight .plume{animation:pup-sway 1.4s var(--ease-sine) infinite alternate}
.band.live .pup-knight .shield{animation:pup-bump 3s var(--ease-out) var(--dl,0s) infinite}
/* mage: hat wobbles, sparks twinkle */
.band.live .pup-mage .hat{animation:pup-hat 2.2s var(--ease-sine) infinite alternate}
.band.live .pup-mage .spark,.band.live .pup-mage .hs{animation:pup-twinkle 1.6s ease-in-out infinite}
.band.live .pup-mage .spark2,.band.live .pup-mage .hs2{animation:pup-twinkle 1.6s ease-in-out -.8s infinite}
/* ninja: headband tails flutter, throwing star spins */
.band.live .pup-ninja .tails{animation:pup-flutter .32s ease-in-out infinite alternate}
.band.live .pup-ninja .nstar{animation:pup-spin 1.1s linear infinite}
/* healer: holds a beating heart, more hearts float up */
.band.live .pup-healer .hold{animation:pup-beat 1.1s ease-in-out infinite}
.band.live .pup-healer .ht{animation:pup-float 2.6s var(--ease-out) var(--dl,0s) infinite}
.band.live .pup-healer .h2{animation-delay:calc(var(--dl,0s) - 1.3s)}
/* ranger: the leaf on the hood sways, head tilts to listen */
.band.live .pup-ranger .leaf{animation:pup-sway 1.8s var(--ease-sine) infinite alternate}
.band.live .pup-ranger .head{animation:pup-tilt 4s var(--ease-out) var(--dl,0s) infinite}
@keyframes pup-bob{from{translate:0 -3px}to{translate:0 4px}}
@keyframes pup-blink{0%,91%,100%{transform:none}94%{transform:scaleY(.1)}}
@keyframes pup-wag{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
@keyframes pup-ear-l{0%,70%,100%{transform:none}76%{transform:rotate(-12deg)}82%{transform:rotate(4deg)}88%{transform:none}}
@keyframes pup-ear-r{0%,70%,100%{transform:none}76%{transform:rotate(12deg)}82%{transform:rotate(-4deg)}88%{transform:none}}
@keyframes pup-flame{from{transform:scale(1,1)}to{transform:scale(1.05,.9)}}
@keyframes pup-glow{from{opacity:.35}to{opacity:1}}
@keyframes pup-swish{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes pup-cackle{0%,60%,100%{transform:none}64%{transform:translateY(-3px) rotate(-3deg)}68%{transform:translateY(0) rotate(3deg)}72%{transform:translateY(-3px) rotate(-3deg)}76%{transform:translateY(0) rotate(2deg)}80%{transform:none}}
@keyframes pup-sway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes pup-hat{from{transform:rotate(-3.5deg)}to{transform:rotate(4deg)}}
@keyframes pup-bump{0%,64%,100%{transform:none}70%{transform:translate(-3px,-2px) rotate(-10deg)}78%{transform:translate(1px,0) rotate(4deg)}86%{transform:none}}
@keyframes pup-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
@keyframes pup-flutter{from{transform:rotate(-6deg) scaleY(.92)}to{transform:rotate(8deg) scaleY(1.06)}}
@keyframes pup-spin{to{transform:rotate(360deg)}}
@keyframes pup-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(1)}45%{transform:scale(1.1)}60%{transform:scale(1)}}
@keyframes pup-float{0%{opacity:0;transform:translate(-4px,10px) scale(.55)}22%{opacity:1}100%{opacity:0;transform:translate(5px,-18px) scale(1)}}
@keyframes pup-tilt{0%,52%{transform:none}62%,84%{transform:rotate(-10deg)}94%,100%{transform:none}}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .pup{transition:scale 220ms var(--ease-out)}
  .pup:hover{scale:1.08}
}
@media (max-width: 600px){
  .band-row{padding:26px 0 12px}
  .band-track{gap:12px;padding-left:12px}
  .pup{width:100px;height:107px}
  .pup-badge{width:28px;height:28px;border-radius:8px;font-size:15px;top:0;right:-4px}
  .pup-badge em{font-size:11px;top:-9px;right:-10px}
  .paw{width:20px;height:20px}
}

/* ---------- Game symbol animations ----------
   Each game's symbol plays its own short animation when you point at it, focus it, or pick that
   game (a tap on a phone). app.js adds .gplay for about a second. Parts with class a-x are extras
   (sparks, trails, a moon) that only show while it plays. Pivots are in the symbol's 24x24 grid. */
.gt-mono,.gi{overflow:hidden}
.gt-mono svg,.gi svg{overflow:visible}
.gt-mono svg *,.gi svg *{transform-box:view-box}
.a-x{opacity:0}
.a-bolt{fill:currentColor;fill-opacity:0}
@keyframes a-pop{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.35)}}
/* Marvel Rivals: the bolt strikes down, flashes solid, sparks fly */
.gplay .a-bolt{animation:a-strike 620ms var(--ease-out) both;transform-origin:10px 21.5px}
.gplay .a-spark{animation:a-pop 520ms var(--ease-out) 170ms both;transform-origin:10px 20px}
@keyframes a-strike{0%{transform:translateY(-20px) scaleY(1.4);opacity:0;fill-opacity:0}30%{transform:none;opacity:1;fill-opacity:1}40%{transform:scaleY(.86)}58%{transform:scaleY(1.04)}100%{transform:none;fill-opacity:0}}
/* Fortnite: the wall builds brick by brick, bottom row first */
.gplay .a-brick{animation:a-brick 300ms var(--ease-out) both}
.gplay .k2{animation-delay:70ms}.gplay .k3{animation-delay:140ms}.gplay .k4{animation-delay:210ms}.gplay .k5{animation-delay:280ms}.gplay .k6{animation-delay:350ms}.gplay .k7{animation-delay:420ms}
@keyframes a-brick{0%{transform:translateY(-12px);opacity:0}70%{transform:translateY(1px);opacity:1}100%{transform:none;opacity:1}}
/* Apex Legends: the ring closes in, the centre pulses */
.gplay .a-ring{animation:a-close 700ms var(--ease-out) both;transform-origin:12px 12px}
.gplay .a-core{animation:a-pulse 700ms ease both;transform-origin:12px 12px}
@keyframes a-close{0%{transform:scale(1.45) rotate(-90deg);opacity:.2}100%{transform:none;opacity:1}}
@keyframes a-pulse{0%,55%{transform:none}72%{transform:scale(1.35)}100%{transform:none}}
/* Valorant: the crosshair tightens and the dot marks a hit */
.t1{--ax:0px;--ay:-4px}.t2{--ax:0px;--ay:4px}.t3{--ax:-4px;--ay:0px}.t4{--ax:4px;--ay:0px}
.gplay .a-tk{animation:a-aim 600ms var(--ease-out) both}
.gplay .a-scope{animation:a-scope 600ms var(--ease-out) both;transform-origin:12px 12px}
.gplay .a-dot{animation:a-dot 600ms var(--ease-out) both;transform-origin:12px 12px}
@keyframes a-aim{0%{transform:translate(var(--ax),var(--ay))}45%{transform:translate(calc(var(--ax) * -.3),calc(var(--ay) * -.3))}100%{transform:none}}
@keyframes a-scope{0%{transform:scale(1.25);opacity:.4}45%{transform:scale(.9);opacity:1}100%{transform:none}}
@keyframes a-dot{0%,40%{transform:none}60%{transform:scale(3)}100%{transform:none}}
/* Overwatch: the shield slams up and deflects */
.gplay .a-shield{animation:a-raise 560ms var(--ease-out) both;transform-origin:12px 20px}
.gplay .a-draw{stroke-dasharray:1 1.2;animation:a-draw 500ms var(--ease-out) 150ms both}
.gplay .a-defl{animation:a-pop 480ms var(--ease-out) 260ms both;transform-origin:12px 6px}
@keyframes a-raise{0%{transform:translateY(5px) scale(.75);opacity:.3}55%{transform:translateY(-1px) scale(1.08);opacity:1}100%{transform:none}}
@keyframes a-draw{from{stroke-dashoffset:1.1}to{stroke-dashoffset:0}}
/* League of Legends: the swords swing in and clash */
.gplay .a-swa{animation:a-swa 520ms var(--ease-out) both;transform-origin:17px 17px}
.gplay .a-swb{animation:a-swb 520ms var(--ease-out) both;transform-origin:7px 17px}
.gplay .a-clash{animation:a-pop 420ms var(--ease-out) 260ms both;transform-origin:12px 9px}
@keyframes a-swa{0%{transform:rotate(38deg)}60%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes a-swb{0%{transform:rotate(-38deg)}60%{transform:rotate(5deg)}100%{transform:none}}
/* Warzone: the parachute drifts down, swaying */
.gplay .a-chute{animation:a-drift 900ms ease-in-out both;transform-origin:12px 3px}
@keyframes a-drift{0%{transform:translateY(-14px) rotate(-14deg);opacity:0}25%{opacity:1}45%{transform:translateY(-3px) rotate(10deg)}70%{transform:translateY(0) rotate(-5deg)}100%{transform:none}}
/* Counter-Strike 2: the knife slashes, leaving a trail */
.gplay .a-knife{animation:a-slash 480ms var(--ease-out) both;transform-origin:5px 21px}
.gplay .a-slash{stroke-dasharray:1 1.2;animation:a-trail 480ms var(--ease-out) both}
@keyframes a-slash{0%{transform:rotate(-70deg)}55%{transform:rotate(10deg)}100%{transform:none}}
@keyframes a-trail{0%{opacity:1;stroke-dashoffset:1.1}50%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
/* Rocket League: the car boosts and knocks the ball away */
.gplay .a-car{animation:a-boostcar 640ms var(--ease-out) both}
.gplay .a-boost{animation:a-boost 640ms var(--ease-out) both}
.gplay .a-ball{animation:a-kick 640ms var(--ease-out) both;transform-origin:18.5px 5.5px}
@keyframes a-boostcar{0%{transform:translateX(-5px)}45%{transform:translateX(2.5px)}100%{transform:none}}
@keyframes a-boost{0%{opacity:1;transform:translateX(-5px)}45%{opacity:1;transform:translateX(2.5px)}100%{opacity:0;transform:none}}
@keyframes a-kick{0%,35%{transform:none;opacity:1}60%{transform:translate(5px,-5px) rotate(90deg);opacity:0}61%{transform:translate(-3px,2px);opacity:0}100%{transform:none;opacity:1}}
/* Rainbow Six Siege: the rotors spin up and the drone lifts off */
.gplay .a-drone{animation:a-lift 900ms ease-in-out both}
.gplay .a-rotor{transform-box:fill-box;transform-origin:center;animation:a-spin 300ms linear 3 both}
@keyframes a-lift{0%{transform:none}30%{transform:translateY(-3px)}55%{transform:translateY(-1.5px)}80%{transform:translateY(-2.5px)}100%{transform:none}}
@keyframes a-spin{to{transform:rotate(360deg)}}
/* Call of Duty: the helmet drops on and the strap swings */
.gplay .a-helm{animation:a-drop 620ms var(--ease-out) both;transform-origin:12px 17px}
.gplay .a-strap{animation:a-strap 620ms ease both;transform-origin:7px 16.5px}
@keyframes a-drop{0%{transform:translateY(-14px);opacity:0}45%{transform:translateY(1px) scaleY(.88);opacity:1}65%{transform:translateY(-1.5px)}100%{transform:none}}
@keyframes a-strap{0%,40%{transform:none}55%{transform:rotate(28deg)}75%{transform:rotate(-10deg)}100%{transform:none}}
/* Battlefield 6: the tank fires, the barrel recoils and the body rocks */
.gplay .a-tank{animation:a-rock 560ms ease both;transform-origin:12px 20px}
.gplay .a-barrel{animation:a-recoil 560ms var(--ease-out) both}
.gplay .a-blast{animation:a-pop 380ms var(--ease-out) both;transform-origin:22.5px 8.8px}
@keyframes a-rock{0%,8%{transform:none}22%{transform:rotate(-4deg)}45%{transform:rotate(2deg)}70%{transform:rotate(-1deg)}100%{transform:none}}
@keyframes a-recoil{0%{transform:none}12%{transform:translate(-2.5px,1px)}100%{transform:none}}
/* PUBG: the plane flies off the top and loops back in from below */
.gplay .a-plane{animation:a-fly 900ms both}
@keyframes a-fly{0%{transform:none;animation-timing-function:cubic-bezier(.55,0,1,.45)}38%{transform:translateY(-30px)}39%{transform:translateY(30px);animation-timing-function:cubic-bezier(.23,1,.32,1)}100%{transform:none}}
/* Dota 2: the tower rises from the ground */
.gplay .a-tower{animation:a-rise 600ms var(--ease-out) both;transform-origin:12px 21px}
@keyframes a-rise{0%{transform:scaleY(0)}70%{transform:scaleY(1.08)}100%{transform:none}}
/* Deadlock: the shackle pops open, swings and snaps shut */
.gplay .a-shackle{animation:a-unlock 800ms var(--ease-out) both;transform-origin:16px 9px}
.gplay .a-lock{animation:a-click 800ms ease both;transform-origin:12px 21px}
.gplay .a-key{transform-box:fill-box;transform-origin:center;animation:a-turn 800ms ease both}
@keyframes a-unlock{0%{transform:none}22%{transform:translateY(-3.5px)}45%,60%{transform:translateY(-3.5px) rotate(-35deg)}78%{transform:translateY(-3.5px)}90%{transform:translateY(.6px)}100%{transform:none}}
@keyframes a-click{0%,86%{transform:none}92%{transform:scale(1.06,.94)}100%{transform:none}}
@keyframes a-turn{0%,10%{transform:none}22%,78%{transform:rotate(90deg)}90%,100%{transform:none}}
/* Destiny 2: a moon orbits the planet */
.gplay .a-planet{animation:a-wobble 900ms ease both;transform-origin:12px 12px}
.gplay .a-moon{animation:a-orbit 900ms var(--ease-in-out) both;transform-origin:12px 12px}
@keyframes a-wobble{0%{transform:none}30%{transform:rotate(-12deg)}65%{transform:rotate(6deg)}100%{transform:none}}
@keyframes a-orbit{0%{opacity:0;transform:rotate(-90deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:rotate(270deg)}}
/* Dead by Daylight: the ghost rises, sways and goes "ooh" */
.gplay .a-ghost{animation:a-haunt 900ms ease-in-out both;transform-origin:12px 20px}
.gplay .a-boo{transform-box:fill-box;transform-origin:center;animation:a-boo 900ms ease both}
@keyframes a-haunt{0%{transform:translateY(6px);opacity:0}25%{transform:translateY(-1px);opacity:1}45%{transform:translate(-1.5px,-2px) rotate(-7deg)}65%{transform:translate(1.5px,-2px) rotate(7deg)}85%{transform:translateY(-1px)}100%{transform:none}}
@keyframes a-boo{0%,35%{transform:none}45%,75%{transform:scale(.8,3.2)}90%,100%{transform:none}}
/* EA Sports FC: the ball rolls in from the side */
.gplay .a-roll{animation:a-roll 700ms var(--ease-out) both;transform-origin:12px 12px}
@keyframes a-roll{0%{transform:translateX(-22px) rotate(-300deg)}75%{transform:translateX(1px) rotate(10deg)}100%{transform:none}}
/* Helldivers 2: the bug scuttles about, legs going */
.gplay .a-bug{animation:a-scuttle 720ms linear both}
.gplay .a-legl{animation:a-legs 240ms ease-in-out 3 both;transform-origin:7.5px 15.5px}
.gplay .a-legr{animation:a-legs 240ms ease-in-out 120ms 3 both;transform-origin:16.5px 15.5px}
.gplay .a-ant{animation:a-legs 180ms ease-in-out 4 both;transform-origin:12px 5px}
@keyframes a-scuttle{0%{transform:none}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1.5px)}80%{transform:translateX(1px)}100%{transform:none}}
@keyframes a-legs{0%,100%{transform:none}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
/* ARC Raiders: the backpack hops and loot sparkles out */
.gplay .a-pack{animation:a-hop 640ms var(--ease-out) both;transform-origin:12px 21px}
.gplay .a-loot{animation:a-loot 640ms var(--ease-out) 200ms both;transform-origin:19.5px 3.5px}
@keyframes a-hop{0%{transform:none}25%{transform:scale(1.06,.9)}50%{transform:translateY(-4px) scale(.96,1.06)}75%{transform:scale(1.04,.94)}100%{transform:none}}
@keyframes a-loot{0%{opacity:0;transform:translate(-5px,6px) scale(.3)}45%{opacity:1;transform:rotate(45deg) scale(1.2)}100%{opacity:0;transform:translateY(-2px) rotate(90deg) scale(.8)}}
/* NBA 2K: the ball bounces twice */
.gplay .a-bb{animation:a-bounce 760ms both;transform-origin:12px 21px}
@keyframes a-bounce{0%{transform:none;animation-timing-function:cubic-bezier(.23,1,.32,1)}22%{transform:translateY(-7px);animation-timing-function:cubic-bezier(.55,0,1,.45)}44%{transform:scale(1.12,.82);animation-timing-function:cubic-bezier(.23,1,.32,1)}66%{transform:translateY(-3.5px);animation-timing-function:cubic-bezier(.55,0,1,.45)}82%{transform:scale(1.05,.93)}100%{transform:none}}
/* Mobile Legends: the crown drops on and gleams */
.gplay .a-crown{animation:a-crown 640ms var(--ease-out) both;transform-origin:12px 21px}
.gplay .a-gleam{transform-box:fill-box;transform-origin:center;animation:a-pop 500ms var(--ease-out) 320ms both}
.gplay .g2{animation-delay:400ms}.gplay .g3{animation-delay:460ms}
@keyframes a-crown{0%{transform:translateY(-9px) rotate(-10deg);opacity:0}55%{transform:translateY(.5px) rotate(3deg) scale(1.04,.95);opacity:1}100%{transform:none}}
/* Brawl Stars: the glove winds up and punches */
.gplay .a-glove{animation:a-punch 560ms var(--ease-out) both;transform-origin:12px 12px}
.gplay .a-pow{animation:a-pop 400ms var(--ease-out) 170ms both;transform-origin:22px 10px}
@keyframes a-punch{0%{transform:none}30%{transform:translateX(-3px) scale(.9) rotate(-6deg)}55%{transform:translateX(3px) scale(1.1)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){ .gplay *{animation:none!important} }

/* ---------- Report filters: search words, sort, rating, proof, reviewer, platform, tag ---------- */
.rf{display:grid;gap:10px;margin:4px 0 14px;padding:14px;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-panel)}
.rf-search{position:relative}
.rf-search .input{padding-left:40px;border-radius:var(--radius-pill)}
.rf-ico{position:absolute;left:14px;top:50%;translate:0 -50%;line-height:0;pointer-events:none}
.rf-ico svg{width:17px;height:17px;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round}
.rf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.rf-grid select{min-height:40px;padding-top:6px;padding-bottom:6px;font-size:14px}
.rf-clear{margin:-6px 0 8px -8px}
.more-reports{margin-top:14px}
.game-banner{display:flex;align-items:center;gap:4px}
.game-banner .game-title{display:flex;align-items:center}

/* ---------- Avatars: a picture, or a coloured initial when there isn't one ---------- */
.av{--s:28px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;background:var(--g,var(--g2));color:var(--g-on,#fff);font-family:var(--font-display);font-weight:800;font-size:calc(var(--s) * .44);line-height:1;vertical-align:middle;box-shadow:0 0 0 2px var(--surface)}
.av.c1{--g:var(--g1);--g-on:var(--g1-on)} .av.c2{--g:var(--g2);--g-on:var(--g2-on)} .av.c3{--g:var(--g3);--g-on:var(--g3-on)} .av.c4{--g:var(--g4);--g-on:var(--g4-on)} .av.c5{--g:var(--g5);--g-on:var(--g5-on)}
.av-xs{--s:22px} .av-sm{--s:28px} .av-md{--s:40px} .av-lg{--s:56px} .av-xl{--s:104px;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--primary)}
.av.has-img{background:var(--raised)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.is-gif::after{content:"GIF";position:absolute;right:-1px;bottom:-1px;padding:1px 4px;border-radius:6px;background:var(--strong);color:var(--on-strong);font-family:var(--font);font-size:9px;font-weight:800;letter-spacing:.02em}
.av-sm.is-gif::after,.av-xs.is-gif::after{display:none}
#acctBtn{display:inline-flex;align-items:center;gap:8px;line-height:1.2}
#acctBtn > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Who wrote a report, their level, and the proof on it ---------- */
.rv-author{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;max-width:100%;min-width:0}
.rv-by{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:2px 4px 2px 0;border-radius:var(--radius-pill);color:var(--text);font-weight:700;font-size:13px;font-feature-settings:var(--tag-features)}
.rv-by{min-width:0;max-width:100%;text-align:left}
.rv-name{min-width:0;overflow-wrap:anywhere}
.rv-by:hover .rv-name{text-decoration:underline;text-underline-offset:3px}
.lvl{display:inline-flex;align-items:center;gap:4px;min-height:20px;padding:0 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:800;white-space:nowrap;background:var(--mid-tint);color:var(--text)}
.lvl.big{min-height:28px;padding:0 12px;font-size:13px}
.lvl-1{background:var(--mid-tint);color:var(--muted)}
.lvl-2{background:var(--ok-tint);color:var(--ok)}
.lvl-3{background:color-mix(in srgb,var(--g2) 14%,var(--surface));color:var(--g2)}
.lvl-4{background:color-mix(in srgb,var(--g5) 16%,var(--surface));color:var(--g5)}
.lvl-5{background:var(--fame-tint);color:var(--fame-ink)}
.lvl-6{background:var(--strong);color:var(--primary)}
:root[data-theme="dark"] .lvl-6{background:var(--primary);color:#0D1426}
.lvl-linked{background:none;border:1.5px solid color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok)}
.lvl-rank{background:var(--primary);color:var(--on-primary)}
.proof-badge{display:inline-flex;align-items:center;gap:4px;cursor:default}
.proof-badge svg{width:13px;height:13px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.proof-badge.m-verified,.proof-badge.m-found{color:var(--ok);background:var(--ok-tint)}
.proof-badge.m-failed{color:var(--warn);background:var(--warn-tint)}
:root[data-theme="dark"] .proof-badge.m-verified,:root[data-theme="dark"] .proof-badge.m-found{color:var(--ok)}
.helpful-btn{gap:6px;text-decoration:none!important;border-radius:var(--radius-pill)}
.helpful-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linejoin:round}
.helpful-btn[aria-pressed="true"]{color:var(--ok);background:var(--ok-tint)}
.helpful-btn[aria-pressed="true"] svg{fill:currentColor;fill-opacity:.2}
.status-chip.bad{color:var(--bad);background:var(--bad-tint)}
.review.is-removed{opacity:.8}
.removed-why b{color:var(--text)}
.appeal-box,.response-form{display:grid;gap:8px}
.appeal-box textarea,.response-form textarea{min-height:90px}

/* ---------- The player's side: a confirmed owner's response, "Is this you?" ---------- */
.response{margin-top:16px;padding:14px 16px 14px 20px;background:var(--raised);border-radius:var(--radius-panel);position:relative;display:grid;gap:8px;overflow:hidden}
.response::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--g2)}
.response-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.isyou{margin-top:12px;padding:14px 16px;border:1.5px dashed var(--control);border-radius:var(--radius-panel);display:grid;gap:10px}
.isyou p{font-size:14px;color:var(--muted)}

/* ---------- Badges ---------- */
.badge-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px 0 4px;border-radius:var(--radius-pill);background:var(--fame-tint);color:var(--fame-ink);font-size:12px;font-weight:800;white-space:nowrap}
.badge-ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fame);color:#121A2E}
.badge-ico svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.badge-chip.big{min-height:32px;font-size:13px;padding-right:12px}
.badge-chip.big .badge-ico{width:26px;height:26px}
.badge-chip.big .badge-ico svg{width:16px;height:16px}
.b-top10 .badge-ico,.b-moderator .badge-ico{background:var(--strong);color:var(--primary)}
.b-founding .badge-ico{background:var(--g5);color:#fff}
.b-linked .badge-ico,.b-match_proof .badge-ico{background:var(--ok);color:#fff}
:root[data-theme="dark"] .b-linked .badge-ico,:root[data-theme="dark"] .b-match_proof .badge-ico,:root[data-theme="dark"] .b-founding .badge-ico{color:#0D1426}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:6px}
.badge-card{display:grid;gap:6px;justify-items:start;padding:12px 14px;background:var(--raised);border-radius:var(--radius-panel)}
.badge-card p{font-size:13px;color:var(--muted)}
.badge-card.locked .badge-chip{background:var(--mid-tint);color:var(--muted)}
.badge-card.locked .badge-ico{background:var(--star-off);color:var(--muted)}

/* ---------- Public profile ---------- */
.profile-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.profile-id{display:grid;gap:10px;justify-items:start;min-width:0;flex:1 1 260px}
.profile-name{font-family:var(--font-display);font-size:26px;line-height:32px;font-weight:800;font-feature-settings:var(--tag-features);overflow-wrap:anywhere}
.profile-name:focus{outline:none}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:20px}
.pstat{display:grid;gap:2px;padding:12px 14px;background:var(--raised);border-radius:var(--radius-panel)}
.pstat b{font-family:var(--font-display);font-size:20px;line-height:26px;font-weight:700;font-variant-numeric:tabular-nums}
.pstat span{font-size:12px;color:var(--muted);font-weight:600}

/* ---------- Settings ---------- */
.set-sec{display:grid;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.set-sec h3{font-family:var(--font-display);font-size:17px;line-height:24px;font-weight:700}
.av-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.av-side{display:grid;gap:10px;min-width:0;flex:1 1 260px}
.av-status{font-size:14px;font-weight:600;color:var(--g2)}
.av-status.bad{color:var(--bad)}
details.rules{background:var(--raised);border-radius:var(--radius-panel);padding:10px 14px}
details.rules summary{cursor:pointer;font-weight:700;font-size:14px;min-height:32px;display:flex;align-items:center}
details.rules ul{margin:6px 0 10px;padding-left:20px;display:grid;gap:4px;font-size:14px}
details.rules p{font-size:13px;color:var(--muted)}
.lvl-card{display:grid;gap:10px;padding:16px;background:var(--raised);border-radius:var(--radius-panel)}
.lvl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lvl-top b{font-family:var(--font-display);font-size:18px;font-variant-numeric:tabular-nums}
.lvl-bar{height:10px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}
.lvl-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--g4),var(--primary))}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.link-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;background:var(--raised);border-radius:var(--radius-panel)}
.link-name{display:grid;gap:2px}
.where .field-row{gap:10px}
.where-col{display:grid;min-width:0}
.proof-intro{gap:4px}
.proof-title{font-size:14px;font-weight:700;color:var(--text)}

/* ---------- Top 10 Contributors ---------- */
.top-critics{grid-column:span 6;margin-top:16px}
.tc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tc-sub{font-size:14px;color:var(--muted);max-width:70ch;margin-top:4px}
.tc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:6px 16px}
.tc-row{width:100%;display:grid;grid-template-columns:40px auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:8px 12px;background:var(--raised);border:0;border-radius:var(--radius-panel);text-align:left;transition:background-color 160ms ease}
.tc-row:hover{background:var(--hover)}
.tc-rank{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.tc-list li:nth-child(-n+3) .tc-rank{color:var(--fame-ink)}
.tc-who{display:grid;gap:3px;justify-items:start;min-width:0}
.tc-who .lvl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tc-who b{font-feature-settings:var(--tag-features);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tc-pts{display:grid;justify-items:end;font-size:11px;color:var(--faint);font-weight:600}
.tc-pts b{font-family:var(--font-display);font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.tc-empty{color:var(--muted)}

/* ---------- Moderation extras ---------- */
.dispute-card.urgent{box-shadow:inset 5px 0 0 var(--bad);background:var(--bad-tint)}
.mod-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px}
.mod-pic-card{display:grid;gap:8px;align-content:start;padding:12px;background:var(--raised);border-radius:var(--radius-panel)}
.mod-pic{width:120px;height:120px;border-radius:14px;object-fit:cover;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--muted)}
.mod-locks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.mod-locks li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;background:var(--raised);border-radius:var(--radius-panel)}

@media (max-width: 760px){
  .tc-list{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none}
  .tc-row{grid-template-columns:32px auto minmax(0,1fr) auto;gap:10px}
  .profile-name{font-size:22px;line-height:28px}
  .av-xl{--s:84px}
}

/* ---------- Splash art (tools/splash.py): original paint splashes, light bursts, halftone and
   sparkles in the brand colours. Behind the top of the home page, and inside the hero. ---------- */
body.home{background:var(--ground) url("img/splash-light.svg") center top / max(1600px,100%) auto no-repeat}
:root[data-theme="dark"] body.home{background-image:url("img/splash-dark.svg")}
.foot{position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-96px;height:140px;background:url("img/band-light.svg") center top / 1600px 140px repeat-x;pointer-events:none}
:root[data-theme="dark"] .foot::before{background-image:url("img/band-dark.svg")}
main.wrap,.legal-wrap{padding-bottom:104px}
.hero-splash{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
.hero-splash *{transform-box:view-box}
.sp-ray{fill:#FFE36F}
.sp-a{fill:var(--g1)} .sp-b{fill:var(--g2)} .sp-c{fill:var(--g5)}
.sp-dots{fill:#121A2E;opacity:.16}
.sp-s1,.sp-s3{fill:#fff} .sp-s2{fill:var(--g2)}
.sp-line{fill:none;stroke:#121A2E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
:root[data-theme="dark"] .sp-ray{fill:#223060}
:root[data-theme="dark"] .sp-dots{fill:#38C8FF;opacity:.3}
:root[data-theme="dark"] .sp-line{stroke:#F3F6FC}
:root[data-theme="dark"] .sp-s1,:root[data-theme="dark"] .sp-s3{fill:#FFD32A}
.js .sp-ray{animation:sp-turn 140s linear infinite;transform-origin:330px 150px}
@keyframes sp-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .sp-ray{animation:none!important} }

/* Phones: the hero art sits in a band across the top of the hero instead of beside the text */
@media (max-width: 760px){
  .intro .intro-art{display:block;position:relative!important;inset:auto;width:auto;height:112px;margin:-26px -20px -6px;opacity:1;border-radius:20px 20px 0 0;overflow:hidden}
  .intro .hero-splash{inset:auto;top:-30px;left:0;width:100%;height:300px;-webkit-mask-image:linear-gradient(180deg,#000 38%,transparent 48%);mask-image:linear-gradient(180deg,#000 38%,transparent 48%)}
  .intro .hero-w{width:64px;height:64px;font-size:36px;right:22px;top:20px;box-shadow:0 6px 0 rgba(18,26,46,.18)}
  .intro .hero-l{width:44px;height:44px;font-size:24px;right:98px;top:50px;box-shadow:0 5px 0 rgba(18,26,46,.18)}
  .intro .hero-bubble{right:150px;top:16px;font-size:13px;padding:6px 10px}
  .intro .hero-tile em{font-size:12px;top:-8px;right:-10px}
}

/* ---------- Rendering work skipped until it scrolls near ----------
   The browser lays out and paints these only when they come close to the screen, so the first
   paint on a phone doesn't pay for the chihuahua parade (about 900 SVG parts) or for long lists.
   "auto" in the size remembers the real height once it has been drawn, so the page doesn't jump. */
.band{content-visibility:auto;contain-intrinsic-size:auto 362px}
.nl-row{content-visibility:auto;contain-intrinsic-size:auto 84px}
.review{content-visibility:auto;contain-intrinsic-size:auto 150px}

/* ---------- Space kept for what the script fills in ----------
   On a slow phone the page paints before app.js runs. These boxes are empty until then, so they
   keep their finished height and nothing below them jumps when the numbers and cards arrive. */
.js .top-card:empty{min-height:156px}
.js .game-rail:empty{min-height:156px}
@media (max-width: 1100px){ .js .stats:empty{min-height:196px} }
@media (max-width: 900px){ .js .game-rail:empty{min-height:86px} .js .top-card:empty{min-height:181px} }
@media (max-width: 600px){ .js .top-card:empty{min-height:168px} .js .stats:empty{min-height:199px} }

/* ---------- Motion: rise in on scroll (site.js adds .in once) ---------- */
.js [data-reveal]:not(.in){opacity:0;translate:0 44px;scale:.97}
.js [data-reveal].revealing{transition:opacity 650ms var(--ease-out),translate 800ms var(--ease-out),scale 800ms var(--ease-out),transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out);transition-delay:var(--d,0ms),var(--d,0ms),0ms,0ms}
.js [data-stagger]:not(.in) > *{opacity:0;translate:0 26px}
.js [data-stagger].revealing > *{transition:opacity 500ms var(--ease-out),translate 600ms var(--ease-out),background-color 160ms ease,border-color 160ms ease;transition-delay:calc(var(--i,0) * 50ms),calc(var(--i,0) * 50ms),0ms,0ms}
/* the hero rises in on first paint with plain CSS, so it never waits for a script */
.enter{animation:rise 700ms var(--ease-out) both}
@keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
/* if site.js never runs, show everything after a moment */
.js:not(.reveal-ready) [data-reveal],.js:not(.reveal-ready) [data-stagger] > *{animation:failsafe 1ms 3s forwards}
@keyframes failsafe{to{opacity:1;translate:none;scale:none}}
/* Lift under a mouse (not on touch, where hover sticks after a tap) */
@media (hover: hover) and (pointer: fine){
  .lift{transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}
  .lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
  .game-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
  .proof-thumb:hover{transform:scale(1.03)}
  .star-input label:hover svg{transform:scale(1.12)}
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .intro{grid-column:span 6}
  .stats{grid-column:span 6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .stats h2{grid-column:1 / -1}
  .stat{border-top:0;border-left:1px solid var(--line);padding:4px 0 4px 16px;flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:2px;min-height:0}
  .stats h2 + .stat{border-left:0;padding-left:0}
  .stats-foot{grid-column:1 / -1;margin-top:14px}
}
@media (max-width: 1060px){
  .players{grid-column:span 6;position:static}
  .detail{grid-column:span 6}
  .nl-row{grid-template-columns:48px minmax(0,1fr) 120px 180px}
}
@media (max-width: 900px){
  .game-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;margin:-4px -2px 0;scrollbar-width:thin}
  .game-tile{scroll-snap-align:start}
  .top-nav{display:none}
  .icon-btn.menu-btn{display:inline-grid}
  .top-nav.open{display:grid;position:absolute;left:16px;right:16px;top:calc(100% + 6px);z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);box-shadow:var(--float);padding:6px;gap:0;transform-origin:top right;animation:menu-in 200ms var(--ease-out) both}
  .top-nav.open a{min-height:46px;padding:0 12px;color:var(--text);border-radius:10px}
  .top-inner{position:relative}
  .intro-art{width:46%;opacity:.55}
}
@media (max-width: 760px){
  .wrap,.legal-wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  main.wrap{padding-top:14px}
  .grid{gap:12px}
  .card{padding:20px;border-radius:20px}
  .intro{padding:26px 20px 22px}
  .intro h1{font-size:30px;line-height:1.15}
  .intro-sub{font-size:16px;line-height:24px}
  .intro-art{display:none}
  .top-card{grid-column:span 6}
  .stats{column-gap:12px}
  .stat{padding-left:12px}
  .stat b{font-size:22px;line-height:26px}
  .stat span{font-size:13px}
  .stat span::before{display:none}
  .dossier-head{grid-template-columns:minmax(0,1fr)}
  .tag-big{font-size:26px;line-height:32px}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .lists{padding:20px}
  .naughty-title{font-size:24px;line-height:30px}
  .naughty-title .wl{width:36px;height:36px;font-size:20px}
  .list-tabs{width:100%}
  .list-tabs button{flex:1;justify-content:center;padding:0 10px}
  .nl-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nl-row{grid-template-columns:44px minmax(0,1fr);gap:6px 12px;min-height:0;padding:14px}
  .nl-rank{width:40px;height:40px}
  .nl-pts,.nl-score{grid-column:2}
  .nl-score{justify-items:start;grid-auto-flow:column;justify-content:start;gap:4px 10px;white-space:normal;grid-template-columns:none}
  .foot-inner{grid-template-columns:minmax(0,1fr)}
  .foot nav{justify-content:flex-start;margin-left:-10px}
  .sheet{place-items:end stretch;padding:0}
  .sheet-panel,.sheet-panel.narrow{width:100%;max-height:92%;border-radius:22px 22px 0 0;border-bottom:0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));animation:sheet-up 500ms cubic-bezier(0.32,0.72,0,1) both}
  .sheet-head,.fields,.sheet-actions,.form-error{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .discard,.form-ok{margin-left:max(16px,env(safe-area-inset-left,0px));margin-right:max(16px,env(safe-area-inset-right,0px))}
  .star-input svg{width:40px;height:40px}
  .consent{left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .legal main h1{font-size:28px;line-height:34px}
}
@media (max-width: 600px){
  .review > .rv-meta:has(+ .rv-actions),.review > .rv-meta + .rv-actions{grid-column:1 / -1}
  .review > .rv-meta + .rv-actions{margin:-4px 0 -6px -8px;justify-self:start}
  .btn .long{display:none}
  .btn .short{display:inline}
  #signInBtn,#acctWrap,#modBtn{display:none!important}
  .top-nav.open .nav-acct:not(:empty){display:grid;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
  .top-inner{gap:6px;min-height:58px}
  .top-actions{gap:2px}
  .nl-score{grid-auto-flow:row}
  .notfound .code{font-size:48px}
}
@media (max-width: 380px){
  .wordmark{font-size:15px}
  .brand{gap:8px}
  .brand-mark{width:28px;height:28px}
  /* the Wall of Shame / Hall of Fame tabs wrap instead of pushing the page sideways */
  .lists{padding:16px}
  .list-tabs button{min-width:0;white-space:normal;line-height:1.2;text-align:center;gap:6px;padding:4px 8px}
  .list-tabs button .wl{width:18px;height:18px;border-radius:5px;font-size:10px}
}
/* Phones and tablets: 44px touch targets, 16px text in fields (no zoom on focus) */
@media (pointer: coarse){
  .btn,.mod-btn,.list-tabs button,.auth-tabs button,.acct-menu button,.oauth .btn,.top-nav a,.icon-btn,.close-x{min-height:44px}
  .icon-btn,.close-x{width:44px;height:44px}
  #acctBtn{line-height:41px}
  .link-btn,.rv-player,.nl-tag,.tt-tag,.foot nav a,.foot nav button,.legal .back,.link-btn.small,.pw-toggle,.brand,.nav-item{min-height:44px}
  .tag-pick label{min-height:44px}
  .up-thumb button{width:36px;height:36px}
  .input,.search-box input,select,textarea,.hero-search input,.hero-search select{font-size:16px;min-height:46px}
}
/* Reduced motion: keep a short fade so things don't pop, drop all movement */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]:not(.in),.js [data-stagger]:not(.in) > *{translate:none;scale:none}
  .js [data-reveal].revealing,.js [data-stagger].revealing > *{transition:opacity 200ms ease;transition-delay:0ms}
  .enter{animation:fade 200ms ease both}
  .band-track{transform:none!important}
  .hl::after,.hero-tile,.hero-tile span,.hero-tile em,.hero-bubble,.wl,.wl i,.pup,.pup *,.live-dot::after,.bar i,.nl-row.fresh,.sheet-panel,.acct-menu,.top-nav.open{animation:none!important}
  .btn:active,.icon-btn:active,.close-x:active,.tag-pick label:active{transform:none}
  .lift:hover,.game-tile:hover,.proof-thumb:hover,.star-input label:hover svg{transform:none!important}
  .toast,.consent{transition:opacity 200ms ease}
  @starting-style{.toast,.consent{transform:none}}
  html{scroll-behavior:auto}
}
/* Theme switch inside the phone menu */
.nav-theme{display:none}
.nav-theme .t-light{display:none}
:root[data-theme="dark"] .nav-theme .t-dark{display:none}
:root[data-theme="dark"] .nav-theme .t-light{display:inline}
@media (max-width: 600px){
  #themeBtn{display:none}
  .top-nav.open .nav-theme{display:flex;align-items:center;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:6px}
}
@media print{
  .js [data-reveal],.js [data-stagger] > *{opacity:1!important;translate:none!important}
  .topbar,.consent,.intro-art{position:static}
}