/* NullTorch — congregate scoreboard + wall
   Palette: Rosé Pine Dawn (light) / Rosé Pine Moon (dark) */

:root {
  color-scheme: light;
  --base: #faf4ed;      --surface: #fffaf3;   --overlay: #f2e9de;
  --text: #575279;      --subtle: #797593;    --muted: #9893a5;
  --love: #b4637a;      --gold: #ea9d34;      --rose: #d7827e;
  --pine: #286983;      --foam: #56949f;      --iris: #907aa9;
  --hl: #dfdad9;
  --edge: #e0d7c9;
  --shadow: 0 1px 2px rgba(87,82,121,.05), 0 8px 24px rgba(87,82,121,.08);
  --shadow-lg: 0 2px 6px rgba(87,82,121,.08), 0 18px 48px rgba(87,82,121,.14);
  --bar-track: rgba(87,82,121,.09);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --base: #232136;      --surface: #2a273f;   --overlay: #393552;
  --text: #e0def4;      --subtle: #908caa;    --muted: #6e6a86;
  --love: #eb6f92;      --gold: #f6c177;      --rose: #ea9a97;
  --pine: #3e8fb0;      --foam: #9ccfd8;      --iris: #c4a7e7;
  --hl: #44415a;
  --edge: #393552;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.3), 0 18px 48px rgba(0,0,0,.5);
  --bar-track: rgba(224,222,244,.10);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --base: #232136;      --surface: #2a273f;   --overlay: #393552;
    --text: #e0def4;      --subtle: #908caa;    --muted: #6e6a86;
    --love: #eb6f92;      --gold: #f6c177;      --rose: #ea9a97;
    --pine: #3e8fb0;      --foam: #9ccfd8;      --iris: #c4a7e7;
    --hl: #44415a;
    --edge: #393552;
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.3), 0 18px 48px rgba(0,0,0,.5);
    --bar-track: rgba(224,222,244,.10);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, color-mix(in srgb, var(--foam) 8%, transparent), transparent 60%),
    var(--base);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: clip;
  transition: background-color .25s ease, color .25s ease;
}
h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.12; margin: 0 0 .4rem; letter-spacing: -.015em; }
h2 { font-size: 1.3rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
p { margin: .4rem 0; }
a { color: var(--pine); }
code { font: .92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--overlay); border-radius: 5px; padding: .08em .35em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 3.5vw, 32px); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--iris); color: var(--base); padding: .5em 1em; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--base) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge); }
.head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.torch { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--gold) 45%, transparent)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.wordmark { font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }
.tagline { font-size: .68rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.theme-toggle { appearance: none; border: 1px solid var(--edge); background: var(--surface); color: var(--subtle); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .15s ease, color .15s ease; }
.gh-link { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--edge); background: var(--surface); color: var(--subtle); border-radius: 10px; flex: none; transition: transform .15s ease, color .15s ease; }
.gh-link:hover { color: var(--gold); transform: translateY(-1px); }
.gh-link svg { width: 18px; height: 18px; }
.theme-toggle:hover { color: var(--gold); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; }
html:not([data-theme="dark"]) .icon-moon, html[data-theme="dark"] .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .icon-sun { display: none; }
  html:not([data-theme]) .icon-moon { display: block; }
}
.theme-toggle:focus-visible, .btn:focus-visible, a:focus-visible, .frame-veil:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }

/* main */
main { padding-top: clamp(28px, 6vw, 64px); padding-bottom: 20px; }
.hero { max-width: 780px; margin-bottom: clamp(22px, 4vw, 40px); }
.hero h1 { margin-top: clamp(10px, 2.5vw, 24px); }
.lede { color: var(--subtle); font-size: .95rem; }
.lede em { color: var(--rose); font-style: normal; font-weight: 600; }
.lede strong { color: var(--love); }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; }
.stat { background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); animation: rise .4s ease both; }
.stat b { display: block; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; }
.stat span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stat.foam b { color: var(--foam); }
.stat.love b { color: var(--love); }
.stat.pine b { color: var(--pine); }
.stat.gold b { color: var(--gold); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* containment strip — anti-cheat design, hero-adjacent */
.containment { margin-top: clamp(14px, 3vw, 24px); }
.containment-rule { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.containment-rule::before { content: "◆"; color: var(--love); margin-right: 8px; font-size: .6rem; }
.containment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.containment-grid .cell { background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); animation: rise .4s ease both; }
.containment-grid .cell:nth-child(2) { animation-delay: .08s; }
.containment-grid .cell:nth-child(3) { animation-delay: .16s; }
.containment-grid .cell b { display: block; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.02em; color: var(--iris); margin-bottom: 4px; }
.containment-grid .cell:nth-child(2) b { color: var(--gold); }
.containment-grid .cell:nth-child(3) b { color: var(--pine); }
.containment-grid .cell span { font-size: .8rem; color: var(--subtle); line-height: 1.45; }

/* chapters */
.chapter { margin-top: clamp(26px, 4.5vw, 44px); }
.chapter-head { max-width: 720px; margin-bottom: 16px; }
.chapter-no { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }

/* scoreboard */
.scoreboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.srow.card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 18px;
  padding: 16px; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.srow.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.srow.card.champ {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--edge));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), var(--shadow-lg);
}
.scard-head { display: flex; align-items: center; gap: 12px; }
.srank { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; background: var(--overlay); color: var(--subtle); }
.srank.r1 { background: color-mix(in srgb, var(--gold) 24%, var(--surface)); color: var(--gold); }
.srank.r2 { background: color-mix(in srgb, var(--foam) 22%, var(--surface)); color: var(--foam); }
.srank.r3 { background: color-mix(in srgb, var(--iris) 20%, var(--surface)); color: var(--iris); }
.swho { min-width: 0; }
.swho b { display: block; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swho small { color: var(--muted); font-size: .74rem; }
.pill { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; margin-left: 6px; }
.pill.dq { background: color-mix(in srgb, var(--love) 18%, transparent); color: var(--love); }


.sbars { display: grid; gap: 6px; min-width: 0; }
.bar-row { display: grid; grid-template-columns: 74px 1fr 44px; align-items: center; gap: 8px; }
.bar-label { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.bar-row .track { height: 12px; border-radius: 99px; background: var(--bar-track); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.bar-row .fill.con { background: linear-gradient(90deg, var(--iris), var(--pine)); }
.bar-row .fill.mech { background: linear-gradient(90deg, var(--foam), var(--pine)); }
.bar-row .fill.des { background: linear-gradient(90deg, var(--gold), var(--rose)); }
.bar-row .fill.spd { background: linear-gradient(90deg, var(--pine), var(--foam)); }
.bar-row .fill.time { background: linear-gradient(90deg, var(--foam), var(--iris)); }
.bar-row .fill.frug { background: linear-gradient(90deg, var(--gold), var(--rose)); }
.bar-row .fill.price { background: linear-gradient(90deg, var(--muted), var(--subtle)); }
.bar-row .fill.eleg { background: linear-gradient(90deg, var(--iris), var(--rose)); }
.bar-val { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--subtle); }

.stiers { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--bar-track); }
.tseg { height: 100%; }

.sscore {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1;
  font-weight: 900; font-size: 1.6rem; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--iris), var(--pine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sscore small {
  display: block; font-weight: 700; font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  margin-top: 4px;
}

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .74rem; color: var(--muted); }
.legend i { display: inline-block; width: 20px; height: 8px; border-radius: 99px; margin-right: 6px; vertical-align: 0; }
.l-con { background: linear-gradient(90deg, var(--iris), var(--pine)); }
.l-mech { background: linear-gradient(90deg, var(--foam), var(--pine)); }
.l-des { background: linear-gradient(90deg, var(--gold), var(--rose)); }
.l-spd { background: linear-gradient(90deg, var(--pine), var(--foam)); }
.l-time { background: linear-gradient(90deg, var(--foam), var(--iris)); }
.l-frug { background: linear-gradient(90deg, var(--gold), var(--rose)); }
.l-price { background: linear-gradient(90deg, var(--muted), var(--subtle)); }
.l-eleg { background: linear-gradient(90deg, var(--iris), var(--rose)); }
.l-tier { background: linear-gradient(90deg, var(--foam), var(--pine), var(--iris), var(--gold), var(--rose), var(--love)); }

/* gap */
.gap-chart { background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(12px, 2.5vw, 24px); overflow: hidden; }
.gap-chart svg { width: 100%; height: auto; display: block; }
.work-chart { background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(12px, 2.5vw, 24px); overflow: hidden; }
.work-chart svg { width: 100%; height: auto; display: block; }

/* exhibits */
.sort-pick { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.sort-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: 4px; }
.sort-btn {
  appearance: none; border: 1px solid var(--edge); background: var(--surface); color: var(--subtle);
  font: inherit; font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sort-btn:hover { color: var(--text); border-color: var(--muted); }
.sort-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--iris) 18%, var(--surface)); border-color: var(--iris); color: var(--iris);
}
.sort-btn:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.exhibits { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.exhibit { background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.exhibit:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.exhibit-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.exhibit-top b { font-size: .95rem; }
.exhibit-rank { margin-left: auto; font-size: .7rem; color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.badge { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.badge.pass { background: color-mix(in srgb, var(--pine) 16%, transparent); color: var(--pine); }
.badge.fail { background: color-mix(in srgb, var(--love) 18%, transparent); color: var(--love); }
.badge.pending { background: var(--overlay); color: var(--muted); }
.frame-box { position: relative; aspect-ratio: 16 / 10; background: var(--overlay); border-block: 1px solid var(--edge); }
.exhibit-frame { position: absolute; inset: 0; width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; background: var(--base); pointer-events: none; }
.frame-veil { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--subtle); font: inherit; font-size: .82rem; font-weight: 600; }
.frame-veil span { background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--edge); border-radius: 999px; padding: 7px 16px; box-shadow: var(--shadow); backdrop-filter: blur(4px); transition: color .15s ease, transform .15s ease; }
.frame-veil:hover span { color: var(--pine); transform: translateY(-1px); }
.exhibit-meta { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; flex-wrap: wrap; }
.exhibit-meta .m { font-size: .74rem; color: var(--subtle); }
.exhibit-meta .m b { color: var(--text); font-variant-numeric: tabular-nums; }
.exhibit-actions { margin-left: auto; display: flex; gap: 6px; }
.btn { appearance: none; border: 1px solid var(--edge); background: var(--surface); color: var(--subtle); font: inherit; font-size: .74rem; font-weight: 700; padding: 6px 11px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.btn:hover { color: var(--pine); border-color: var(--pine); transform: translateY(-1px); }
.exhibit.none { border-style: dashed; opacity: .75; }
.exhibit.none .frame-box { display: grid; place-items: center; color: var(--muted); font-size: .82rem; aspect-ratio: 16 / 6; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--base) 78%, transparent); backdrop-filter: blur(6px); display: flex; flex-direction: column; padding: clamp(10px, 2.5vw, 28px); }
.modal[hidden] { display: none; }
.modal-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--text); font-weight: 700; }
.modal-actions { margin-left: auto; display: flex; gap: 8px; }
.modal iframe { flex: 1; width: 100%; border: 1px solid var(--edge); border-radius: 14px; background: var(--base); box-shadow: var(--shadow-lg); }

/* footer */
.site-foot { border-top: 1px solid var(--edge); margin-top: clamp(26px, 5vw, 48px); }
.foot-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding-top: 18px; padding-bottom: 22px; font-size: .8rem; color: var(--subtle); }
.credit { color: var(--muted); }
.credit strong { color: var(--iris); }

.empty { border: 1px dashed var(--edge); border-radius: 14px; padding: 26px; text-align: center; color: var(--muted); font-size: .88rem; }

@media (max-width: 900px) {
  .scoreboard { grid-template-columns: 1fr; }
  .stiers { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 560px) {
  .srow.card { padding: 12px; }
  .exhibits { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 60px 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}