/* Sora, Manrope, JetBrains Mono — SIL Open Font License 1.1 (license texts in /fonts) */
@font-face{font-family:"Sora";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fonts/sora-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fonts/sora-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/jetbrains-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/jetbrains-mono-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* Layout (unchanged): glass top bar → intro → picker → [result + what to buy | bottleneck + PSU] → all games → method.
     Material: frosted-glass panels floating over a black stage lit by deep-red ambient light. Single dark theme by design. */
  color-scheme:dark;
  --bg:#070608;
  --ink:#f6f1f2; --ink-2:#c0b4b8; --ink-3:#8d8085;
  --glass-a:rgba(255,255,255,.07); --glass-b:rgba(255,255,255,.025);
  --field:rgba(255,255,255,.055); --field-line:rgba(255,255,255,.11);
  --well:rgba(255,255,255,.045); --well-line:rgba(255,255,255,.08);
  --solid:rgba(24,15,18,.94);
  --red:#ff2d4a; --red-hi:#ff5a6c; --red-lo:#c3102c;
  --red-grad:linear-gradient(135deg,#ff5468 0%,#ef1d3a 48%,#a90c25 100%);
  --red-soft:rgba(255,45,74,.14); --red-line:rgba(255,64,90,.55); --red-glow:rgba(255,45,74,.42);
  --accent:var(--red);
  --good:#3ee39b; --good-soft:rgba(62,227,155,.14);
  --fair:#e2ee64; --fair-soft:rgba(226,238,100,.14);
  --warn:#ffb13d; --warn-soft:rgba(255,177,61,.14);
  --bad:#ff6b4f; --bad-soft:rgba(255,107,79,.15);
  --blur:18px;
  --font-display:"Sora","Segoe UI",system-ui,sans-serif;
  --font-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-xl:24px; --r-lg:18px; --r:14px; --r-sm:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:500 16px/1.5 var(--font-body); -webkit-font-smoothing:antialiased}
/* ambient red light behind the glass */
body::before{content:""; position:fixed; inset:-12vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(46vmax 46vmax at 10% 6%, rgba(255,32,72,0.360) 0.0%, rgba(255,32,72,0.323) 13.2%, rgba(255,32,72,0.233) 26.4%, rgba(255,32,72,0.127) 39.6%, rgba(255,32,72,0.037) 52.8%, rgba(255,32,72,0) 66.0%),
    radial-gradient(52vmax 52vmax at 96% 34%, rgba(176,8,40,0.420) 0.0%, rgba(176,8,40,0.376) 13.6%, rgba(176,8,40,0.272) 27.2%, rgba(176,8,40,0.148) 40.8%, rgba(176,8,40,0.044) 54.4%, rgba(176,8,40,0) 68.0%),
    radial-gradient(38vmax 38vmax at 68% 84%, rgba(126,10,58,0.280) 0.0%, rgba(126,10,58,0.251) 13.2%, rgba(126,10,58,0.181) 26.4%, rgba(126,10,58,0.099) 39.6%, rgba(126,10,58,0.029) 52.8%, rgba(126,10,58,0) 66.0%),
    radial-gradient(44vmax 44vmax at 16% 96%, rgba(255,72,92,0.150) 0.0%, rgba(255,72,92,0.134) 12.8%, rgba(255,72,92,0.097) 25.6%, rgba(255,72,92,0.053) 38.4%, rgba(255,72,92,0.016) 51.2%, rgba(255,72,92,0) 64.0%);}
/* fine grain so the gradients don't band */
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.page{position:relative}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--red-hi)}
:focus-visible{outline:2px solid var(--red-hi); outline-offset:2px}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{font-family:var(--font-display); margin:0; line-height:1.12; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
.s-good{--state:var(--good); --state-soft:var(--good-soft); --state-glow:rgba(62,227,155,.55)}
.s-fair{--state:var(--fair); --state-soft:var(--fair-soft); --state-glow:rgba(226,238,100,.5)}
.s-warn{--state:var(--warn); --state-soft:var(--warn-soft); --state-glow:rgba(255,177,61,.5)}
.s-bad{--state:var(--bad); --state-soft:var(--bad-soft); --state-glow:rgba(255,107,79,.55)}

/* ---------- glass material ---------- */
.card, .top, .toast{-webkit-backdrop-filter:blur(var(--blur)) saturate(150%); backdrop-filter:blur(var(--blur)) saturate(150%)}
.card{position:relative; border-radius:var(--r-xl); padding:20px; min-width:0;
  background:linear-gradient(180deg, var(--glass-a), var(--glass-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.85)}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,.30), rgba(255,255,255,.06) 30%, rgba(255,255,255,.02) 62%, rgba(255,70,96,.38));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .card{background:rgba(26,17,20,.94)} .top{background:rgba(12,9,11,.96)} }
@media (prefers-reduced-transparency: reduce){ .card{background:rgba(26,17,20,.97); -webkit-backdrop-filter:none; backdrop-filter:none} }

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px); background:rgba(10,7,9,.55); border-bottom:1px solid rgba(255,255,255,.07)}
.topin{display:flex; align-items:center; gap:10px; min-height:58px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.brand svg{width:32px; height:32px; flex:none; display:block; filter:drop-shadow(0 4px 14px rgba(255,45,74,.35))}
.wordmark{font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.02em; white-space:nowrap}
.wordmark em{font-style:normal; background:var(--red-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.beta{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); border-radius:999px; padding:2px 9px}
.langs{margin-left:auto; display:flex; gap:2px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:3px}
.langs a{font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ink-2); text-decoration:none; padding:5px 11px; border-radius:999px}
.langs a[aria-current="page"]{background:var(--red-grad); color:#fff; box-shadow:0 6px 18px -6px var(--red-glow)}
.langnote{background:rgba(255,45,74,.12); border-bottom:1px solid rgba(255,45,74,.25); font-size:14px; color:var(--ink)}
.langnote .wrap{display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; padding-block:8px}
.langnote a{font-weight:800; text-decoration:none; color:#fff}
.langnote button{margin-left:auto; background:none; border:0; color:var(--ink-2); font-size:22px; line-height:1; cursor:pointer; padding:0 4px}
@media (max-width:420px){ .beta{display:none} }

/* ---------- intro ---------- */
.intro{padding-block:28px 16px; display:grid; gap:8px}
.intro h1{font-size:clamp(28px,4.8vw,44px); font-weight:700}
.intro h1 em{font-style:normal; background:var(--red-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.intro p{color:var(--ink-2); font-size:16px; max-width:62ch}

/* ---------- layout ---------- */
.main{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding-bottom:48px}
.picker > *, .cols > *, .intro > *{min-width:0}
.cols{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start}
.col{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; min-width:0}
@media (min-width:980px){ .cols{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)} }
.card-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px}
.card-h h2{font-size:19px; font-weight:700; display:flex; align-items:center; gap:10px}
.card-h h2 svg{width:30px; height:30px; padding:6px; border-radius:10px; color:#fff; background:var(--red-grad); box-shadow:0 8px 20px -8px var(--red-glow); flex:none}
.sub{color:var(--ink-2); font-size:14px; margin-top:6px}

/* ---------- picker ---------- */
.picker{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; z-index:20}
.pgrid{display:grid; gap:10px; grid-template-columns:minmax(0,1fr) auto}
.f-gpu,.f-cpu{grid-column:1 / -1}
@media (min-width:980px){ .pgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) auto} .f-gpu,.f-cpu{grid-column:auto} }
.field{display:grid; gap:6px; min-width:0; align-content:start}
.field > label, .lbl{font-size:13px; font-weight:700; color:var(--ink-2)}
.lrow{display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0}
.lrow label{font-size:13px; font-weight:700; color:var(--ink-2); white-space:nowrap}
.hint{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
input[type=text], select{width:100%; min-width:0; height:50px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--field); color:var(--ink); font:650 16px/1.2 var(--font-body); padding:0 14px; transition:border-color .15s, box-shadow .15s, background .15s}
select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position:calc(100% - 19px) 22px, calc(100% - 14px) 22px; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px; text-overflow:ellipsis}
select option, select optgroup{background:#1a1114; color:var(--ink)}
input[type=text]:hover, select:hover{background:rgba(255,255,255,.075)}
input[type=text]:focus, select:focus{border-color:var(--red-line); outline:none; box-shadow:0 0 0 4px var(--red-soft)}
.combo{position:relative; min-width:0}
.combo input{padding-right:40px}
.combo .caret{position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:translateY(-70%) rotate(45deg); pointer-events:none}
.listbox{position:absolute; z-index:60; left:0; right:0; top:calc(100% + 8px); max-height:340px; overflow:auto; margin:0; padding:6px; list-style:none; background:linear-gradient(180deg,#24161a,#1b1013); border:1px solid rgba(255,255,255,.13); border-radius:var(--r); box-shadow:0 24px 50px rgba(0,0,0,.7)}
.listbox li{padding:10px 11px; border-radius:10px; cursor:pointer; font-size:15px; font-weight:650}
.listbox li.grp{cursor:default; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:10px 11px 4px}
.listbox li[aria-selected="true"]{background:var(--red-soft); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,64,90,.35)}
.listbox li.empty{color:var(--ink-3); cursor:default}
.detect{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--ink-2)}
.detect button{appearance:none; border:0; background:var(--red-grad); color:#fff; font:800 12.5px var(--font-body); border-radius:999px; padding:5px 12px; cursor:pointer; box-shadow:0 6px 16px -6px var(--red-glow)}
.seg{display:flex; gap:3px; background:var(--field); border:1px solid var(--field-line); border-radius:var(--r); padding:4px; height:50px}
.seg label{position:relative; flex:1; cursor:pointer}
.seg input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.seg span{display:grid; place-items:center; height:100%; padding:0 11px; border-radius:10px; font-weight:800; font-size:14px; color:var(--ink-2); white-space:nowrap; transition:background .2s, color .2s}
.seg input:checked + span{background:var(--red-grad); color:#fff; box-shadow:0 8px 20px -8px var(--red-glow)}
.seg input:focus-visible + span{outline:2px solid var(--red-hi); outline-offset:1px}
.more{border-top:1px solid rgba(255,255,255,.08); padding-top:10px}
.more summary{list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--ink-2); min-height:30px}
.more summary::-webkit-details-marker{display:none}
.more .sumtxt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.more .act{margin-left:auto; color:var(--red-hi); font-weight:800; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.more .act::after{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.more[open] .act::after{transform:rotate(-135deg) translateY(-1px)}
.more[open] .sumtxt{visibility:hidden}
.mgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:10px}
@media (min-width:980px){ .mgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- result ---------- */
.hero{display:grid; gap:16px; overflow:hidden}
/* light strip along the top edge of the result card: the focal point of the page */
.hero::after{content:""; position:absolute; top:0; left:16%; right:16%; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,96,116,.95), transparent); box-shadow:0 0 24px 3px rgba(255,45,74,.32)}
.hero-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.eyebrow{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); min-width:0}
.share{appearance:none; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--ink); font:800 13px var(--font-body); border-radius:999px; padding:8px 13px; cursor:pointer; white-space:nowrap}
.share:hover{background:rgba(255,255,255,.1)}
.share svg{width:15px; height:15px}
.hero-main{display:grid; gap:10px; justify-items:center; text-align:center}
@media (min-width:640px){ .hero-main{grid-template-columns:auto minmax(0,1fr); justify-items:start; text-align:left; align-items:center; gap:26px} }
.gauge-box{position:relative; width:min(290px,78vw)}
.gauge-box::before{content:""; position:absolute; left:22%; right:22%; top:16%; bottom:26%; border-radius:50%; background:radial-gradient(closest-side, var(--state-glow,transparent), transparent); opacity:.35; filter:blur(18px); pointer-events:none}
.gauge{position:relative; display:block; width:100%; height:auto; overflow:visible}
.g-track{fill:none; stroke:rgba(255,255,255,.08); stroke-width:14; stroke-linecap:round}
.g-val{fill:none; stroke:var(--state,var(--ink-3)); stroke-width:14; stroke-linecap:round; filter:drop-shadow(0 0 9px var(--state-glow,transparent))}
.tk{stroke:var(--ink-3); stroke-width:2.5; stroke-linecap:round}
.tk.hz{stroke:var(--red-hi)}
.tkl{font:600 11px var(--font-mono); fill:var(--ink-3)}
.tkl.hz{fill:var(--red-hi)}
.g-center{position:absolute; left:0; right:0; top:30%; display:grid; justify-items:center; gap:4px; pointer-events:none}
.g-num{font-family:var(--font-display); font-weight:700; font-size:66px; line-height:.9; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.g-unit{font-family:var(--font-mono); font-size:12px; color:var(--ink-2); letter-spacing:.18em}
.g-range{font-family:var(--font-mono); font-size:12px; color:var(--ink-3)}
.hero-text{display:grid; gap:10px; min-width:0}
.verdict{font-size:clamp(26px,3.4vw,34px); font-weight:700; color:var(--state,var(--ink)); text-shadow:0 0 28px var(--state-glow,transparent)}
.vline{color:var(--ink-2); font-size:15px; max-width:58ch}
.vline b{color:var(--ink)}
.tips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.tip{appearance:none; border:1px solid var(--red-line); background:var(--red-soft); color:#ffdfe3; font:800 14px var(--font-body); border-radius:999px; padding:9px 15px; cursor:pointer; transition:background .15s, box-shadow .15s}
.tip:hover{background:rgba(255,45,74,.26); box-shadow:0 8px 22px -10px var(--red-glow)}
.chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
@media (min-width:640px){ .tips,.chips{justify-content:flex-start} }
.chip{font-size:12.5px; font-weight:800; border-radius:999px; padding:4px 11px; background:rgba(255,255,255,.06); color:var(--ink-2); border:1px solid rgba(255,255,255,.1)}
.chip.good{background:var(--good-soft); color:var(--good); border-color:transparent}
.chip.fair{background:var(--fair-soft); color:var(--fair); border-color:transparent}
.chip.warn{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.chip.bad{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.osd{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0}
.osd div{background:var(--well); border:1px solid var(--well-line); border-radius:12px; padding:9px 11px; min-width:0}
.osd dt{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.osd dd{margin:0; font-family:var(--font-mono); font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.osd .lim{border-color:var(--red-line); background:var(--red-soft)}
.osd .lim dd{color:#fff}
.osd .short dd{color:var(--warn)}
.restiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.rt{appearance:none; text-align:left; border:1px solid var(--well-line); background:var(--well); color:var(--ink); border-radius:14px; padding:11px 12px; cursor:pointer; display:grid; gap:5px; font:inherit; min-width:0; transition:background .15s, border-color .15s}
.rt:hover{background:rgba(255,255,255,.08)}
.rt .rl{font-size:12px; font-weight:800; color:var(--ink-2); display:flex; align-items:center; gap:6px}
.rt .rl i{width:8px; height:8px; border-radius:50%; background:var(--state); box-shadow:0 0 10px var(--state-glow)}
.rt .rv{font-family:var(--font-display); font-size:26px; font-weight:700; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.rt .rv small{font-family:var(--font-mono); font-size:11px; color:var(--ink-3); font-weight:500; margin-left:4px; letter-spacing:0}
.rt[aria-pressed="true"]{border-color:var(--red-line); background:var(--red-soft); box-shadow:0 10px 26px -14px var(--red-glow)}

/* ---------- bottleneck ---------- */
.pill{font-size:12.5px; font-weight:800; border-radius:999px; padding:4px 11px; background:var(--state-soft,rgba(255,255,255,.06)); color:var(--state,var(--ink-2)); white-space:nowrap}
.pairgrid{display:grid; gap:11px; margin-top:14px}
.prow{display:grid; grid-template-columns:52px minmax(0,1fr) 46px; align-items:center; gap:10px}
.prow .res{font-family:var(--font-display); font-weight:700; font-size:15px}
.prow .bar{height:9px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden; position:relative}
.prow .bar i{position:absolute; inset:0 auto 0 0; background:var(--state); border-radius:6px; box-shadow:0 0 12px var(--state-glow)}
.prow .val{font-family:var(--font-mono); font-size:13px; text-align:right; color:var(--ink-2)}
.prow.is-mon .res{color:var(--red-hi)}
.note{color:var(--ink-2); font-size:14px; margin-top:12px}
.note b{color:var(--ink)}

/* ---------- PSU ---------- */
.psu-in{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px}
.psu-in .wide{grid-column:1 / -1}
.switch{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); cursor:pointer; position:relative}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch .sw{width:44px; height:26px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); position:relative; flex:none}
.switch .sw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-2)}
.switch input:checked + .sw{background:var(--red-grad); border-color:transparent; box-shadow:0 6px 16px -6px var(--red-glow)}
.switch input:checked + .sw::after{transform:translateX(18px); background:#fff}
.switch input:focus-visible + .sw{outline:2px solid var(--red-hi); outline-offset:2px}
.psu-out{display:grid; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08)}
.psu-rec .k{font-size:13px; font-weight:700; color:var(--ink-2)}
.psu-rec .v{font-family:var(--font-display); font-weight:700; font-size:36px; line-height:1.05; letter-spacing:-.03em; background:var(--red-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.osd.osd3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kv{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px}
.kv .k{color:var(--ink-3); font-weight:700; min-width:6.2em}
.kv .mono{font-family:var(--font-mono); font-size:13px; color:var(--ink-2)}
.loadbar{height:9px; background:rgba(255,255,255,.07); border-radius:6px; position:relative; overflow:hidden}
.loadbar i{position:absolute; inset:0 auto 0 0; background:var(--state); border-radius:6px; box-shadow:0 0 12px var(--state-glow)}
.loadbar .sweet{position:absolute; top:0; bottom:0; left:40%; width:30%; border-left:1px dashed var(--ink-3); border-right:1px dashed var(--ink-3)}
.loadcap{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin-top:6px}
.reasons{margin:0; padding-left:18px; display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
details.sub{border-top:1px solid rgba(255,255,255,.08); margin-top:14px; padding-top:12px}
details.sub > summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:800; font-size:14.5px}
details.sub > summary::-webkit-details-marker{display:none}
details.sub > summary::after{content:""; width:7px; height:7px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(45deg) translateY(-2px); flex:none}
details.sub[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.budget{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13px; margin-top:12px}
.budget th, .budget td{padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); text-align:left; font-weight:500; color:var(--ink-2)}
.budget td{text-align:right; color:var(--ink); font-weight:700; white-space:nowrap}
.budget tr.sum th, .budget tr.sum td{border-top:1px solid rgba(255,255,255,.18)}
.budget tr.rec td{color:var(--red-hi)}
.pa{display:grid; gap:14px; margin-top:12px}
@media (min-width:560px){ .pa{grid-template-columns:1fr 1fr} }
.pa h3{font-size:15.5px; font-weight:700; margin-bottom:8px}
.pa ul{margin:0; padding:0; list-style:none; display:grid; gap:7px; font-size:14px; color:var(--ink-2)}
.pa li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:6px}
.pa li::before{font-family:var(--font-mono); font-weight:700}
.pa .yes li::before{content:"+"; color:var(--good)}
.pa .no li::before{content:"×"; color:var(--bad)}

/* ---------- what to buy ---------- */
.advice{display:grid; gap:10px; margin-top:14px}
.acard{border:1px solid var(--well-line); background:var(--well); border-radius:16px; padding:15px; display:grid; gap:6px; min-width:0}
.acard .kind{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.acard .row{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.acard h3{font-size:18px; font-weight:700; min-width:0}
.acard .big{font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.02em; white-space:nowrap; background:var(--red-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.acard p{font-size:14px; color:var(--ink-2)}
.acard p b{color:var(--ink)}
.opt{border-top:1px solid rgba(255,255,255,.08); padding-top:8px; margin-top:4px; display:grid; gap:2px}
.calm{color:var(--ink-2); font-size:15px}

/* ---------- all games ---------- */
.gwrap{overflow-x:auto; margin-top:14px; border:1px solid var(--well-line); border-radius:16px; background:rgba(0,0,0,.18)}
table.gt{width:100%; border-collapse:collapse; font-size:14.5px}
.gt th, .gt td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.06); text-align:right; white-space:nowrap}
.gt th:first-child, .gt td:first-child{text-align:left; white-space:normal}
.gt thead th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; background:rgba(255,255,255,.04)}
.gt thead th.is-mon{color:var(--red-hi)}
.gt tr.grp th{text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding-top:14px}
.gt tbody tr:last-child td{border-bottom:0}
.gt tr.is-sel td{background:var(--red-soft)}
.gt .gbtn{all:unset; cursor:pointer; font-weight:700; color:var(--ink)}
.gt .gbtn:hover{color:var(--red-hi)}
.gt .gbtn:focus-visible{outline:2px solid var(--red-hi); outline-offset:2px; border-radius:3px}
.gt .yr{font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin-left:6px}
.fc span{display:inline-block; min-width:3.3em; padding:3px 8px; border-radius:8px; font-family:var(--font-mono); font-weight:700; font-size:13.5px; text-align:right}
.fc.good span{background:var(--good-soft); color:var(--good)}
.fc.fair span{background:var(--fair-soft); color:var(--fair)}
.fc.warn span{background:var(--warn-soft); color:var(--warn)}
.fc.bad span{background:var(--bad-soft); color:var(--bad)}
.fc .star{color:var(--red-hi); margin-left:2px}
.gt .limc{font-size:12.5px; color:var(--ink-3)}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-3); margin-top:10px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block}

/* ---------- method + footer ---------- */
details.method > summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px}
details.method > summary::-webkit-details-marker{display:none}
details.method > summary::after{content:""; width:8px; height:8px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(45deg) translateY(-2px)}
details.method[open] > summary::after{transform:rotate(-135deg)}
.methodbody{display:grid; gap:12px; padding-top:12px; color:var(--ink-2); font-size:14.5px; max-width:76ch}
.formula{font-family:var(--font-mono); font-size:12.5px; background:rgba(0,0,0,.25); border:1px solid var(--well-line); border-radius:var(--r-sm); padding:12px; white-space:pre; overflow-x:auto; color:var(--ink); line-height:1.7}
.methodbody ul{margin:0; padding-left:18px; display:grid; gap:6px}
footer{color:var(--ink-3); font-size:13px}
footer .wrap{padding-block:8px 32px}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:80; background:var(--solid); color:var(--ink); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:11px 15px; font-size:14px; font-weight:700; box-shadow:0 18px 40px rgba(0,0,0,.6); max-width:calc(100vw - 32px); overflow-wrap:anywhere}

/* ---------- site navigation ---------- */
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--red-grad); color:#fff; font-weight:800; padding:10px 14px; border-radius:12px; text-decoration:none}
.skip:focus{top:10px}
.topnav{display:none; gap:4px; margin-left:18px}
.topnav a, .tabbar a{color:var(--ink-2); text-decoration:none; font-weight:800; font-size:14px}
.topnav a{padding:8px 13px; border-radius:999px; border:1px solid transparent}
.topnav a:hover{color:var(--ink); background:rgba(255,255,255,.06)}
.topnav a[aria-current="page"]{color:#fff; background:var(--red-soft); border-color:var(--red-line)}
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:repeat(3,1fr);
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px)); background:rgba(12,8,10,.72); border-top:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%); backdrop-filter:blur(var(--blur)) saturate(150%)}
.tabbar a{display:grid; justify-items:center; gap:3px; padding:6px 4px; border-radius:14px; font-size:11.5px; letter-spacing:.01em}
.tabbar svg{width:22px; height:22px}
.tabbar a[aria-current="page"]{color:#fff}
.tabbar a[aria-current="page"] svg{color:var(--red-hi); filter:drop-shadow(0 0 8px var(--red-glow))}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (min-width:760px){
  .topnav{display:flex}
  .tabbar{display:none}
  body{padding-bottom:0}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
.flinks{display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:10px}
.flinks a{color:var(--ink-2); text-decoration:none; font-weight:700}
.flinks a:hover{color:var(--ink)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.listbox li small{display:block; font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--ink-3); margin-top:2px}

/* ---------- phone page ---------- */
.pcols{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start}
.pcols > *{min-width:0}
@media (min-width:980px){
  .pcols{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); grid-template-rows:auto 1fr; grid-template-areas:"hero games" "sim games"}
  .pcols .hero{grid-area:hero} #mg-card{grid-area:games} #sim-card{grid-area:sim}
}
.g-num.sm{font-size:44px}
.mbar{display:block; height:4px; margin-top:7px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.mbar i{display:block; height:100%; border-radius:3px; background:var(--red-grad)}
.mgt td.fc, .mgt th:not(:first-child){text-align:center}
.mgt td.fc span{min-width:2.6em; text-align:center}
.mgt td.fc small{display:block; font-family:var(--font-mono); font-size:10px; color:var(--ink-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:7.5em; margin-inline:auto}
.mgt td.fc.rec span{outline:1.5px solid currentColor; outline-offset:1px}
.mgt .gname{font-weight:700}
.mgt .tag{display:inline-block; margin-left:6px; font-family:var(--font-mono); font-size:10px; color:var(--ink-3); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:1px 5px; vertical-align:1px}
.mgt .hic{text-align:center; color:var(--ink-3)}
.mgt .hi{font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--red-hi); background:var(--red-soft); border-radius:8px; padding:3px 7px}
.note.small{font-size:12.5px; color:var(--ink-3)}
.simlist{display:grid; gap:8px; margin-top:14px}
.simrow{appearance:none; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; width:100%; cursor:pointer;
  border:1px solid var(--well-line); background:var(--well); color:var(--ink); border-radius:14px; padding:10px 13px; font:inherit; transition:background .15s, border-color .15s}
.simrow:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16)}
.simrow .sn{display:grid; gap:2px; min-width:0}
.simrow .sn b{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.simrow .sn small{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.simrow .sv{font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--state,var(--ink-2)); white-space:nowrap}
.more-link{margin-top:14px; font-weight:800}
.more-link a{text-decoration:none}

/* ---------- rankings ---------- */
.rtabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px}
.rtabs::-webkit-scrollbar{display:none}
.rtabs a{flex:none; text-decoration:none; color:var(--ink-2); font-weight:800; font-size:14px; padding:9px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04)}
.rtabs a:hover{color:var(--ink); background:rgba(255,255,255,.08)}
.rtabs a[aria-current="page"]{color:#fff; background:var(--red-grad); border-color:transparent; box-shadow:0 8px 20px -8px var(--red-glow)}
.rtools{display:grid; gap:10px}
@media (min-width:760px){ .rtools{grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:center} }
.rsearch{position:relative}
.rsearch svg{position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.rsearch input{width:100%; height:46px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--field); color:var(--ink); font:650 15px var(--font-body); padding:0 14px 0 42px}
.rsearch input:focus{border-color:var(--red-line); outline:none; box-shadow:0 0 0 4px var(--red-soft)}
.fchips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px}
.fchips::-webkit-scrollbar{display:none}
.fchip{appearance:none; flex:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--ink-2); font:800 13px var(--font-body); border-radius:999px; padding:7px 12px; cursor:pointer}
.fchip:hover{color:var(--ink)}
.fchip[aria-pressed="true"]{color:#fff; background:var(--red-soft); border-color:var(--red-line)}
.gsearch{margin-top:12px; max-width:360px}
.gsearch input{height:44px}
.rk-count{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); margin-top:12px}
.rk-empty{color:var(--ink-2); padding:14px 4px}
table.rk{width:100%; border-collapse:collapse; font-size:14.5px}
.rk th, .rk td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.06); text-align:right; white-space:nowrap}
.rk thead th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; background:rgba(255,255,255,.04)}
.rk th.l, .rk td.l{text-align:left}
.rk tbody tr:last-child td{border-bottom:0}
.rk tbody tr:hover td{background:rgba(255,255,255,.03)}
.rk .n{font-family:var(--font-mono); color:var(--ink-3); width:2.6em}
.rk .nm{white-space:normal; min-width:150px}
.rk .nm a{color:var(--ink); font-weight:700; text-decoration:none}
.rk .nm a:hover{color:var(--red-hi)}
.rk .nm small{display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin-top:2px}
.rk .nm .tag{display:inline-block; margin-left:6px; font-family:var(--font-mono); font-size:10px; color:#ffdfe3; background:var(--red-soft); border:1px solid var(--red-line); border-radius:6px; padding:1px 5px; vertical-align:1px}
.rk .sc{width:38%; min-width:150px}
.rk .sc .w{display:flex; align-items:center; gap:10px}
.rk .sc .bar{flex:1; height:8px; background:rgba(255,255,255,.07); border-radius:5px; overflow:hidden; min-width:60px}
.rk .sc .bar i{display:block; height:100%; border-radius:5px; background:var(--red-grad)}
.rk .sc b{font-family:var(--font-mono); font-size:13.5px; min-width:4.6em; text-align:right}
.rk .mono{font-family:var(--font-mono); font-size:13px; color:var(--ink-2)}
.rk .go a{font-weight:800; text-decoration:none; font-size:13px}
.rk .cmp{display:none}
.mgt .hi-m{display:none}
@media (max-width:760px){ .rk .xc{display:none} }
@media (max-width:560px){
  .mgt .hic, .mgt th:last-child{display:none}
  .mgt .hi-m{display:inline-block; margin-left:6px; font-size:11px; padding:2px 5px; vertical-align:1px}
  .mgt td.fc{padding-inline:3px}
  .mgt td:first-child{padding-right:4px}
}
@media (max-width:480px){ .rk .go{display:none} .rk th, .rk td{padding:9px 6px} .rk .sc{width:auto; min-width:110px} .rk .sc b{min-width:3.6em} .rk .sc .bar{min-width:34px} .rk .full{display:none} .rk .cmp{display:inline} .rk .nm{min-width:0} }

/* ---------- phones (kept last so it wins the cascade) ---------- */
@media (max-width:640px){
  .intro{padding-block:18px 10px}
  .intro h1{font-size:25px}
  .intro p{font-size:14px}
  .card{padding:15px; border-radius:20px}
  .topin{min-height:54px}
  .gt th, .gt td{padding:9px 7px}
  .gt .limc, .gt th.limh, .gt .yr{display:none}
}
@media (max-width:480px){
  .intro p{display:none}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .osd{grid-template-columns:repeat(2,minmax(0,1fr))}
  .osd.osd3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion: no-preference){
  .g-val{transition:stroke-dasharray .7s cubic-bezier(.2,.8,.2,1), stroke .3s}
  .prow .bar i, .loadbar i{transition:width .45s ease}
  .switch .sw::after{transition:transform .2s}
}

/* ---------- categories hub: masonry columns of glass cards, each a group of links ---------- */
.cat-search{max-width:520px; margin:0 0 18px}
.cats{columns:3 300px; column-gap:16px}
.cat{display:inline-block; width:100%; break-inside:avoid; margin:0 0 16px; padding:18px 18px 8px; vertical-align:top}
.cat-h{display:flex; align-items:center; gap:13px; padding-bottom:12px}
.cat-ic{width:48px; height:48px; flex:none; border-radius:15px; display:grid; place-items:center; color:#fff; background:var(--red-grad); box-shadow:0 12px 26px -10px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.25)}
.cat-ic svg{width:25px; height:25px}
.cat h2{font-size:19px; line-height:1.2; margin:0}
.cat-sub{color:var(--ink-3); font-size:13px; line-height:1.35; margin:3px 0 0}
.cat-list{list-style:none; margin:0; padding:0}
.cat-list li{border-top:1px solid rgba(255,255,255,.07)}
.cat-list a, .cl-row{display:flex; align-items:center; gap:10px; min-height:46px; padding:8px 4px; color:var(--ink); text-decoration:none; font-weight:750; font-size:15px}
.cat-list a{border-radius:10px; transition:background .15s}
.cat-list a:hover{background:rgba(255,255,255,.05)}
.cat-list a::after{content:"→"; color:var(--red-hi); font-weight:800; margin-left:2px}
.cl-n{flex:1; min-width:0}
.cl-c{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); white-space:nowrap}
.soon .cl-n{color:var(--ink-3)}
.cl-soon{font:700 10.5px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--red-hi); border:1px solid var(--red-line); border-radius:999px; padding:3px 9px; white-space:nowrap}