:root {
  --bg: #050711;
  --panel: rgba(11, 15, 30, .84);
  --panel-2: rgba(18, 23, 43, .7);
  --cyan: #29D8FF;
  --purple: #8A5CFF;
  --pink: #FF4FD8;
  --green: #7CFF72;
  --gold: #FFC65C;
  --light: #F5F7FA;
  --muted: #9aa6ba;
  --dim: #69758a;
  --border: rgba(126, 183, 255, .18);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--light);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 8%, rgba(41,216,255,.10), transparent 27rem),
    radial-gradient(circle at 85% 15%, rgba(255,79,216,.09), transparent 30rem),
    linear-gradient(180deg, #03040a 0%, #070a14 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  line-height: 1.6;
}
button, input { font: inherit; color: inherit; }
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
       background: rgba(126,183,255,.1); padding: .1em .4em; border-radius: 5px; }

.ambient { position: fixed; border-radius: 999px; filter: blur(80px); pointer-events: none; opacity: .13; }
.ambient-a { width: 420px; height: 420px; background: var(--cyan); left: -180px; top: 20%; }
.ambient-b { width: 500px; height: 500px; background: var(--pink); right: -220px; top: 4%; }

.masthead, main { width: min(1080px, calc(100vw - 40px)); margin: 0 auto; position: relative; z-index: 1; }
.masthead { padding: clamp(40px, 7vw, 80px) 0 28px; }
.eyebrow { letter-spacing: .22em; font-size: .7rem; font-weight: 800; color: var(--cyan); margin: 0 0 14px; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 18px; }
.grad { background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
        -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: #aeb9ca; font-size: clamp(1rem, 2vw, 1.15rem); max-width: 58ch; margin: 0 0 22px; }
.privacy { max-width: 62ch; font-size: .92rem; color: var(--muted);
           border-left: 2px solid rgba(124,255,114,.4); padding-left: 14px; margin: 0; }
.privacy strong { color: var(--green); font-weight: 700; }

/* TABS */
.tabs { display: flex; gap: 8px; margin-bottom: -1px; }
.tab {
  border: 1px solid var(--border); border-bottom-color: transparent;
  background: transparent; color: var(--muted); cursor: pointer;
  padding: 12px 22px; border-radius: 14px 14px 0 0; font-weight: 700; transition: .2s;
}
.tab:hover { color: var(--light); }
.tab.is-active { color: var(--light); background: var(--panel);
                 box-shadow: inset 0 2px 0 0 var(--cyan); }
.tab:focus-visible, .go:focus-visible, input:focus-visible, th button:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

.panel { border: 1px solid var(--border); border-radius: 0 18px 18px 18px;
         background: var(--panel); padding: clamp(20px, 3vw, 32px); }

/* FORM */
.form { display: grid; gap: 22px; max-width: 620px; }
.field { display: grid; gap: 8px; }
label { font-weight: 650; font-size: .95rem; }
input[type=password], input[type=text], input[type=number] {
  background: rgba(3,5,12,.6); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; color: var(--light); width: 100%; transition: border-color .2s;
}
input::placeholder { color: var(--dim); }
input:focus { border-color: rgba(41,216,255,.55); }
.num { width: 88px; }
.field-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.help { color: var(--muted); font-size: .85rem; margin: 0; }
.help.inline { flex: 1 1 14rem; min-width: 12rem; }
.help ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 5px; }
.help p { margin: 6px 0; }
.go {
  justify-self: start; cursor: pointer; border-radius: 14px; padding: 14px 26px;
  font-weight: 800; letter-spacing: .01em; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(110deg, rgba(41,216,255,.16), rgba(138,92,255,.2), rgba(255,79,216,.16));
  box-shadow: 0 0 34px rgba(138,92,255,.16); transition: .22s ease;
}
.go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 56px rgba(41,216,255,.24); }
.go:disabled { opacity: .5; cursor: progress; transform: none; }

/* STATUS */
.status:empty { display: none; }
.status { margin-top: 20px; padding: 14px 16px; border-radius: 12px; font-size: .92rem;
          border: 1px solid var(--border); background: var(--panel-2); }
.status.error { border-color: rgba(255,79,216,.45); background: rgba(255,79,216,.08); }
.status.error strong { display: block; color: #ff9ee6; margin-bottom: 4px; }
.status .hint { color: var(--muted); }

/* RESULTS */
.results { margin-top: 28px; }
.who { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.who img { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--border); }
.who h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.who p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 24px; }
.tile { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--panel-2); }
.tile b { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.tile span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.tile.accent b { color: var(--cyan); }
.tile.gold b { color: var(--gold); }

.notices { margin: 0 0 18px; display: grid; gap: 8px; }
.notices p { margin: 0; padding: 11px 14px; font-size: .87rem; color: #ffd9a8;
             background: rgba(255,138,61,.09); border: 1px solid rgba(255,138,61,.35);
             border-radius: 11px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.toolbar input { max-width: 260px; }
.toolbar .spacer { flex: 1; }
.ghost { background: transparent; border: 1px solid var(--border); border-radius: 10px;
         padding: 9px 14px; cursor: pointer; color: var(--muted); font-size: .85rem; transition: .2s; }
.ghost:hover { color: var(--light); border-color: rgba(41,216,255,.45); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .9rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid rgba(126,183,255,.09); }
thead th { position: sticky; top: 0; background: #0b0f1e; color: var(--muted);
           font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
th button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
            font: inherit; text-transform: inherit; letter-spacing: inherit; }
th button:hover { color: var(--light); }
th.sorted button { color: var(--cyan); }
tbody tr:hover { background: rgba(126,183,255,.045); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.game { display: flex; align-items: center; gap: 10px; }
.game img, .game-img { width: 28px; height: 28px; border-radius: 6px; flex: none; background: #11162a; }
.game img { object-fit: cover; }
/* Shown when a platform gives us no cover art: the title's first letter. */
.game-img { display: grid; place-items: center; border: 1px solid var(--border);
            color: var(--dim); font-size: .74rem; font-weight: 800; }
.game a { color: var(--light); text-decoration: none; }
.game a:hover { color: var(--cyan); }
.tag { font-size: .68rem; color: var(--dim); border: 1px solid var(--border);
       border-radius: 5px; padding: 1px 5px; }
.plat { color: var(--cyan); font-weight: 800; }
.bar { position: relative; height: 5px; border-radius: 3px; background: rgba(126,183,255,.14); min-width: 54px; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px;
         background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.bar.full i { background: linear-gradient(90deg, var(--gold), var(--green)); }
.muted { color: var(--dim); }
.more { text-align: center; color: var(--muted); font-size: .85rem; padding: 14px; }

/* ---------- OVERVIEW ---------- */

/* Categorical series colours, validated against the #0b0f1e chart surface:
   CVD deutan dE 13.4, normal-vision dE 22.1 — both above the required floor.
   The brand cyan was too light for a dark surface and was stepped down. */
:root {
  --series-steam: #00A3CC;
  --series-psn: #8A5CFF;
  --surface-chart: #0b0f1e;
}

.tab.is-new { box-shadow: inset 0 2px 0 0 var(--green); }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty h2 { color: var(--light); font-size: 1.2rem; margin: 0 0 8px; }

.card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface-chart);
        padding: 20px; margin-bottom: 18px; position: relative; }
.card h3 { margin: 0 0 4px; font-size: 1rem; letter-spacing: -.01em; }
.chart-note { color: var(--muted); font-size: .82rem; margin: 6px 0 14px; max-width: 70ch; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; font-size: .82rem; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Stacked bar: 2px surface gap keeps adjacent fills from touching. */
.stack { display: flex; gap: 2px; height: 22px; border-radius: 5px; overflow: hidden; }
.stack-seg { height: 100%; border-radius: 2px; }
.stack-labels { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px;
                font-size: .85rem; color: var(--muted); }
.stack-labels b { color: var(--light); font-variant-numeric: tabular-nums; }

.barlist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; }
.barlist li { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 3fr) auto;
              align-items: center; gap: 12px; }
.barlist-name { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .88rem; }
.barlist-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist-track { height: 10px; background: rgba(126,183,255,.09); border-radius: 3px; }
.barlist-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; }
.barlist-track i.single { background: linear-gradient(90deg, var(--series-steam), var(--series-psn)); }
.barlist-value { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums;
                 white-space: nowrap; }

.lead-trait { margin: 10px 0 14px; font-size: 1.05rem; }
.lead-trait b { color: var(--cyan); }
.traits { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trait-head { display: flex; align-items: center; gap: 12px; font-size: .92rem; }
.trait-head .bar { flex: 1; max-width: 200px; }
.trait-evidence { display: block; color: var(--muted); font-size: .83rem; margin-top: 3px; }

.highlights { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
              margin-bottom: 18px; }
.highlight { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--panel-2); }
.highlight-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.highlight-body { display: flex; align-items: center; gap: 11px; margin-top: 10px; }
.highlight-body b { display: block; font-size: .95rem; line-height: 1.3; }
.highlight-body span { color: var(--muted); font-size: .8rem; }

.tooltip { position: absolute; transform: translate(-50%, -100%); pointer-events: none;
           background: #05070f; border: 1px solid var(--border); border-radius: 8px;
           padding: 7px 10px; font-size: .8rem; white-space: nowrap; z-index: 50;
           box-shadow: 0 8px 24px rgba(0,0,0,.5); }

@media (max-width: 620px) {
  .barlist li { grid-template-columns: 1fr auto; }
  .barlist-track { grid-column: 1 / -1; }
}

/* HOW */
.how { margin: 56px 0 70px; }
.how h2 { font-size: 1.4rem; letter-spacing: -.02em; }
.how-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.how-grid h3 { font-size: .95rem; color: var(--cyan); margin: 0 0 6px; }
.how-grid p { color: var(--muted); font-size: .9rem; margin: 0; }
.foot { color: var(--dim); font-size: .85rem; margin-top: 36px;
        border-top: 1px solid var(--border); padding-top: 20px; }

.boot-error {
  background: #3a0b22; color: #ffd9f2; border-bottom: 1px solid rgba(255,79,216,.5);
  padding: 14px 20px; font-size: .92rem; font-weight: 600; position: relative; z-index: 500;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 560px) {
  .tab { padding: 11px 16px; font-size: .95rem; }
  .panel { border-radius: 0 14px 14px 14px; }
}