/* Layout: the hub itself — gradient title, glass summary, then every game as a Side Quest card, re-sortable */
:root {
  --bg: #f3f4fa;
  --wash-a: rgba(158,122,242,.16);
  --wash-b: rgba(92,173,102,.14);
  --wash-c: rgba(232,69,94,.12);
  --card: rgba(255,255,255,.86);
  --card-edge: rgba(20,20,40,.07);
  --ink: #15161c;
  --ink-2: #6b6d78;
  --ink-mix: #000;
  --track: rgba(20,20,40,.08);
  --sq-green: #5cad66;
  --sq-purple: #9e7af2;
  --sq-red: #e8455e;
  --flame: #f08a1c;
  --gold: #f5b93a;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #101116; --wash-a: rgba(158,122,242,.2); --wash-b: rgba(92,173,102,.14); --wash-c: rgba(232,69,94,.14);
  --card: rgba(32,33,41,.88); --card-edge: rgba(255,255,255,.08); --ink: #f2f2f6; --ink-2: #a2a4b0; --ink-mix: #fff; --track: rgba(255,255,255,.1);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #101116; --wash-a: rgba(158,122,242,.2); --wash-b: rgba(92,173,102,.14); --wash-c: rgba(232,69,94,.14);
  --card: rgba(32,33,41,.88); --card-edge: rgba(255,255,255,.08); --ink: #f2f2f6; --ink-2: #a2a4b0; --ink-mix: #fff; --track: rgba(255,255,255,.1);
  color-scheme: dark }

* { box-sizing: border-box }
html { color-scheme: light }
body { margin: 0 }
.state { padding: 120px 0; text-align: center; color: var(--ink-2); font-size: 18px; font-weight: 800 }
.num { font-variant-numeric: tabular-nums }
body {
  background: var(--bg);
  background-image: radial-gradient(60rem 30rem at 0% 0%, var(--wash-b), transparent 60%),
                    radial-gradient(50rem 30rem at 100% 10%, var(--wash-a), transparent 60%),
                    radial-gradient(50rem 30rem at 50% 100%, var(--wash-c), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
}
.page { max-width: 1120px; margin: 0 auto; padding-block: 36px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 28px }
.glass { background: var(--card); border: 1px solid var(--card-edge); border-radius: 24px;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(20,20,60,.08) }

.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px }
h1 { margin: 0; font-size: clamp(48px, 9vw, 84px); font-weight: 900; letter-spacing: -.02em; line-height: .95;
  background: linear-gradient(90deg, var(--sq-green), var(--sq-purple) 55%, var(--sq-red));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance }
.sub { margin: 10px 0 0; color: var(--ink-2); font-size: 19px; font-weight: 800 }
.streak { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 18px; font-weight: 900 }
.streak svg { color: var(--flame) }

.summary { padding: 22px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px }
.stat { display: flex; gap: 14px; align-items: center; min-width: 0 }
.badge { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: var(--b, linear-gradient(135deg, var(--sq-green), var(--sq-purple), var(--sq-red))) }
.stat b { display: block; font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums }
.stat span { display: block; color: var(--ink-2); font-size: 14px; font-weight: 800; margin-top: 4px }
.stars { display: flex; gap: 2px; margin-top: 4px }
.stars svg { width: 18px; height: 18px }

.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
h2 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.01em }

.awards { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px }
.award { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.award .top { display: flex; align-items: center; gap: 10px }
.award .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--g); flex: none }
.award .what { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; color: var(--ink-2) }
.award .who { font-size: 20px; font-weight: 900; line-height: 1.1 }
.award .num { font-size: 15px; font-weight: 800; color: var(--gc) }

.pills { display: flex; flex-wrap: wrap; gap: 8px }
.pill { font: inherit; font-size: 15px; font-weight: 900; color: var(--ink); background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 999px; padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .15s }
.pill:hover { transform: translateY(-1px) }
.pill:focus-visible { outline: 3px solid var(--sq-purple); outline-offset: 2px }
.pill[aria-pressed="true"] { color: #fff; border-color: transparent;
  background: linear-gradient(90deg, var(--sq-green), var(--sq-purple), var(--sq-red)) border-box; box-shadow: 0 6px 16px rgba(158,122,242,.35) }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px }
.card { display: flex; overflow: hidden; border-radius: 26px; background: var(--card); border: 1.5px solid color-mix(in srgb, var(--g) 35%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--g) 18%, transparent); position: relative; animation: pop .45s both; animation-delay: calc(var(--i) * 25ms) }
.art { flex: none; width: 112px; position: relative; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--g) 80%, #fff), var(--g));
  background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,.18) 0 6px, transparent 7px),
                    radial-gradient(circle at 75% 75%, rgba(255,255,255,.12) 0 6px, transparent 7px),
                    linear-gradient(160deg, color-mix(in srgb, var(--g) 78%, #fff), var(--g));
  background-size: 34px 34px, 34px 34px, 100% 100% }
.art svg { width: 46px; height: 46px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)) }
.rank { position: absolute; top: 10px; left: 10px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.92);
  color: color-mix(in srgb, var(--g) 70%, #000); font-size: 14px; font-weight: 900; display: grid; place-items: center }
.rank.medal { background: var(--gold); color: #5a3a00 }
.body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 }
.eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 900; color: color-mix(in srgb, var(--g) 72%, var(--ink-mix)) }
.name { font-size: 24px; font-weight: 900; line-height: 1.05 }
.line { color: var(--ink-2); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.meter { margin-top: 6px; display: flex; flex-direction: column; gap: 5px }
.meter .row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums }
.meter .row em { font-style: normal; color: var(--ink-2) }
.bar { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--g) 16%, var(--track)); overflow: hidden }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--g) 70%, #fff), var(--g));
  width: var(--w); transition: width .6s cubic-bezier(.2,.8,.2,1) }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; padding: 4px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--g) 13%, transparent); color: color-mix(in srgb, var(--g) 72%, var(--ink-mix)) }
.chip svg { width: 14px; height: 14px }
.tag-hard { background: rgba(232,69,94,.14); color: color-mix(in srgb, var(--sq-red) 75%, var(--ink-mix)) }

.archive { padding: 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center }
.archive .badge { width: 64px; height: 64px; border-radius: 18px }
.archive h3 { margin: 0; font-size: 24px; font-weight: 900 }
.archive p { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; font-weight: 700; max-width: 60ch }
.archive .zero { margin-left: auto; font-size: 64px; font-weight: 900; line-height: 1;
  background: linear-gradient(90deg, var(--sq-green), var(--sq-purple), var(--sq-red)); -webkit-background-clip: text; background-clip: text; color: transparent }
.foot { color: var(--ink-2); font-size: 13px; font-weight: 700; text-align: center }

@keyframes pop { from { transform: translateY(8px) scale(.98) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { .card { animation: none } .bar i { transition: none } }
@media (max-width: 900px) { .awards { grid-template-columns: repeat(2, minmax(0,1fr)) } .summary { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.fun { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px }
.tile { padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.tile .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--t) }
.tile b { font-size: 40px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 6px;
  background: var(--t); -webkit-background-clip: text; background-clip: text; color: transparent }
.tile .what { font-size: 17px; font-weight: 900 }
.tile .more { color: var(--ink-2); font-size: 14px; font-weight: 700 }
.charts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px }
.chart { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.chart h3 { margin: 0; font-size: 19px; font-weight: 900 }
.chart .note { margin: -8px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 700 }
.cols { display: flex; align-items: flex-end; gap: 3px; height: 150px; position: relative }
.col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; position: relative; cursor: default }
.col i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--c1), var(--c2)); height: var(--h); min-height: 3px; transition: filter .15s }
.col.dim i { opacity: .45 }
.col:hover i { filter: brightness(1.12) }
.col .tipv { position: absolute; bottom: calc(var(--h) + 8px); font-size: 12px; font-weight: 900; background: var(--ink); color: var(--bg); padding: 3px 7px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 2 }
.col:hover .tipv, .col:focus-visible .tipv { opacity: 1 }
.axis { display: flex; gap: 3px; font-size: 11px; font-weight: 800; color: var(--ink-2) }
.axis span { flex: 1; min-width: 0; text-align: center; overflow: hidden }
@media (max-width: 760px) { .charts { grid-template-columns: 1fr } }
@media (max-width: 460px) { .grid { grid-template-columns: 1fr } .art { width: 92px } .awards { grid-template-columns: 1fr } .summary { grid-template-columns: 1fr } .archive .zero { margin-left: 0 } }
[hidden] { display: none !important }
.content { display: flex; flex-direction: column; gap: 28px }
.col:nth-child(-n+2) .tipv { left: 0 }
.col:nth-last-child(-n+2) .tipv { right: 0 }