:root{
  --paper:#F2F4FB;--panel:#FFFFFF;--ink:#16163A;--muted:#5B5F86;--line:#D9DDF0;
  --blue:#3B3FD8;--blue-ink:#FFFFFF;--blue-soft:#E4E6FF;
  --w:#0E9F6E;--l:#E0383E;--fair:#C98A00;--warn-bg:#FFF1D6;--warn:#8A5A00;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--body:Figtree,system-ui,sans-serif;
  --r-s:6px;--r-m:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#11122A;--panel:#1A1C3A;--ink:#EDEEFF;--muted:#A3A7CF;--line:#2E3159;
  --blue:#7B7FFF;--blue-ink:#0E0F24;--blue-soft:#25285A;--w:#3DD69B;--l:#FF6B70;--fair:#F2B53A;--warn-bg:#3A2E12;--warn:#F2C46A;}}
:root[data-theme="dark"]{--paper:#11122A;--panel:#1A1C3A;--ink:#EDEEFF;--muted:#A3A7CF;--line:#2E3159;--blue:#7B7FFF;--blue-ink:#0E0F24;--blue-soft:#25285A;--w:#3DD69B;--l:#FF6B70;--fair:#F2B53A;--warn-bg:#3A2E12;--warn:#F2C46A;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body)}
a{color:var(--blue);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800}
h2{font-size:1.45rem;font-weight:800;margin-top:1.6em}
p{margin:0 0 .9em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.r{text-align:right}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:var(--blue-ink);padding:8px 12px;z-index:9}
.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* header */
.top{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-in{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font:800 1.2rem var(--display);color:var(--ink);text-decoration:none}
.logo-mark{width:22px;height:22px;background:var(--blue);border-radius:5px;box-shadow:6px 6px 0 -2px var(--fair)}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;padding:6px 10px;border-radius:var(--r-s)}
.nav a:hover{background:var(--blue-soft)}
.nav a[aria-current]{background:var(--blue);color:var(--blue-ink)}

main{padding-bottom:48px;min-height:60vh}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}
.page-head{padding:20px 0 8px;max-width:760px}
.lead{font-size:1.12rem;color:var(--muted);max-width:68ch}
.head-links{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--blue);color:var(--blue-ink);font:700 1rem var(--body);padding:11px 18px;border-radius:var(--r-s);border:2px solid var(--blue);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--blue)}
.linkbtn{background:none;border:0;padding:0;color:var(--blue);font:inherit;text-decoration:underline;cursor:pointer}
.note{font-size:.92rem;color:var(--muted);max-width:75ch}

/* hero */
.hero{padding:44px 0 20px;max-width:820px}
.hero h1{font-size:clamp(2.2rem,6.4vw,4rem);line-height:1.02}
.hero-search{position:relative;max-width:560px;margin-top:18px}
input[type=search],input[type=text],input[type=number],select{font:500 1rem var(--body);color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:var(--r-s);padding:11px 12px;width:100%}
input:focus,select:focus{border-color:var(--blue);outline:none}
.hero-search input{font-size:1.1rem;padding:14px 16px}
.sugg{list-style:none;margin:4px 0 0;padding:4px;position:absolute;left:0;right:0;background:var(--panel);border:2px solid var(--line);border-radius:var(--r-s);z-index:4;max-height:320px;overflow:auto}
.sugg:empty{display:none}
.sugg li{padding:8px 10px;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.sugg li[aria-selected=true],.sugg li:hover{background:var(--blue-soft)}
.sugg a{color:var(--ink);text-decoration:none;display:flex;justify-content:space-between;width:100%}

/* games on home */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:28px}
.game{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:20px;border-top:6px solid var(--blue)}
.game:nth-child(2){border-top-color:var(--l)}
.game:nth-child(3){border-top-color:var(--w)}
.game h2{margin-top:0}
.game h2 a{color:var(--ink);text-decoration:none}
.mini{margin:0 0 14px;padding:0;list-style:none;counter-reset:m}
.mini li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.mini a{color:var(--ink)}
.game-links{display:flex;gap:16px;flex-wrap:wrap;font-weight:700;margin:0}
.tool-list{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tool-list a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;text-decoration:none;color:var(--ink);height:100%}
.tool-list a:hover{border-color:var(--blue)}
.tool-list b{display:block;font-family:var(--display);font-size:1.1rem}
.tool-list span{color:var(--muted);font-size:.93rem}

/* values table */
.filters{display:grid;grid-template-columns:1fr 200px 170px;gap:10px;margin:20px 0 12px}
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.vt{width:100%;border-collapse:collapse;font-size:.98rem}
.vt th{text-align:left;font-weight:700;font-size:.85rem;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);background:var(--panel)}
.vt td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.vt tr:last-child td{border-bottom:0}
.vt .r{text-align:right}
.vt td:first-child a{color:var(--ink);font-weight:700;text-decoration:none}
.vt td:first-child a:hover{color:var(--blue);text-decoration:underline}
.vt tr[hidden]{display:none}
.tag{display:inline-block;font-size:.76rem;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--blue-soft);color:var(--ink);margin-left:6px;white-space:nowrap}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.award{margin-left:0}
.trend{font-size:.85rem;font-weight:700;white-space:nowrap}
.trend.up,.up{color:var(--w)} .trend.down,.down{color:var(--l)} .trend.flat{color:var(--muted)}
.demand{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-variant-numeric:tabular-nums}
.demand-bar{width:48px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue) calc(var(--d)*10%),var(--line) 0)}

/* item page */
.item-head{padding:18px 0 4px;max-width:760px}
.item-game{margin:0 0 4px;font-weight:700}
.big-val{font:800 clamp(2.6rem,9vw,4.6rem)/1 var(--display);margin:6px 0 14px;letter-spacing:-.02em}
.big-val .unit{font-size:.35em;color:var(--muted);font-weight:600;letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:24px 0 8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.stats div{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats dt{font-size:.85rem;color:var(--muted);margin-bottom:4px}
.stats dd{margin:0;font-weight:600}
.near-list{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.near-list a{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);text-decoration:none}
.near-list a:hover{border-color:var(--blue)}
.near-list .num{font-weight:700}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 200px 1fr;gap:16px;align-items:start;margin-top:20px}
.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;min-height:280px;display:flex;flex-direction:column}
.side h2{margin:0 0 10px;font-size:1.2rem}
.picker{position:relative}
.chips{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:6px;flex:1}
.chips li{display:flex;align-items:center;gap:8px;background:var(--blue-soft);border-radius:var(--r-s);padding:7px 8px 7px 12px}
.chips .nm{flex:1;font-weight:600}
.chips .qty{font-weight:800;color:var(--blue)}
.chips button{border:0;background:transparent;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;padding:4px 6px;border-radius:4px}
.chips button:hover{color:var(--l)}
.total{margin:0;padding-top:10px;border-top:2px solid var(--line);display:flex;justify-content:space-between;font-weight:600}
.total b{font:800 1.3rem var(--display)}
.verdict{text-align:center;padding-top:40px}
.stamp{display:inline-block;font:800 1.2rem/1 var(--display);color:var(--muted);border:3px dashed var(--line);border-radius:10px;padding:16px 14px;min-width:150px;transform:rotate(-4deg);transition:transform .25s ease}
.stamp[data-v]:not([data-v=""]){font-size:3.4rem;border-style:solid;padding:14px 20px;transform:rotate(-7deg) scale(1)}
.stamp[data-v=W]{color:var(--w);border-color:var(--w)}
.stamp[data-v=L]{color:var(--l);border-color:var(--l)}
.stamp[data-v=FAIR]{color:var(--fair);border-color:var(--fair);font-size:2.4rem}
.stamp.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:rotate(-7deg) scale(1.35)}100%{transform:rotate(-7deg) scale(1)}}
.diff{margin-top:18px;font-weight:600}

/* tools */
.tool{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:20px;max-width:760px;margin-top:16px}
.tool label{display:block;font-weight:700;margin:12px 0 6px}
.tool label.check{display:inline-flex;gap:8px;align-items:center;font-weight:500;margin-right:16px}
.tool .btn{margin-top:14px}
.tool.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tool .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.out-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.out{background:var(--paper);border-radius:var(--r-s);padding:14px}
.out-k{margin:0;font-size:.88rem;color:var(--muted);font-weight:600}
.out-v{font:800 2rem/1.15 var(--display);margin:4px 0}
.names,.fonts{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.names{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.names button,.fonts button{width:100%;text-align:left;font:600 1.05rem var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.names button:hover,.fonts button:hover{border-color:var(--blue)}
.copied{color:var(--w);font-size:.85rem;font-weight:700}
.fonts .fn{color:var(--muted);font-size:.8rem;font-weight:500;white-space:nowrap}
.fonts .fv{overflow-wrap:anywhere}

.prose{max-width:72ch;margin-top:8px}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.prose .vt{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m)}

.log{border-left:4px solid var(--blue);padding:2px 0 2px 16px;margin:20px 0}
.log h2{margin-top:0;font-size:1.15rem}
.log ul{padding-left:1.1em}

.faq{max-width:760px;margin-top:28px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:8px 0 0;color:var(--muted)}

.foot{background:var(--panel);border-top:1px solid var(--line);padding:32px 0;font-size:.93rem}
.foot-in{display:grid;grid-template-columns:1.2fr 2fr;gap:24px}
.foot-name{font:800 1.1rem var(--display);margin-bottom:6px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.foot-cols a{display:block;color:var(--muted);margin-bottom:6px}
.foot-h{font-weight:700;margin-bottom:8px}

@media (max-width:860px){
  .calc{grid-template-columns:1fr}
  .verdict{padding:6px 0;order:3}
  .side[data-side=get]{order:2}
  .filters{grid-template-columns:1fr 1fr}
  .filters input{grid-column:1/-1}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .hide-s{display:none}
  .vt td,.vt th{padding:8px}
  .tool.two,.tool .row,.out-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}