/* Site pages around the arena: nav, landing (parallax), auth, profile, settings and plans. Uses the tokens from arena.css. */

/* page frame: the nav spans the page, content sits in .wrap */
body { padding: 0; margin: 0; }
.wrap { padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
a { color: var(--gold); }

/* ---------- nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(13, 17, 12, .92); backdrop-filter: blur(4px); border-bottom: 2px solid var(--rail); }
.nav-inner { max-width: 1440px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.nav-logo { font: 600 1.5rem/1 var(--f-display); color: var(--gold); text-decoration: none; letter-spacing: .02em; }
.site-nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.site-nav form { margin: 0; }
.site-nav nav a, .nav-link-btn { font: 600 .95rem var(--f-display); color: var(--chalk); text-decoration: none; padding: 6px 10px; border: 2px solid transparent; background: none; box-shadow: none; }
.site-nav nav a:hover, .nav-link-btn:hover { border-color: var(--rail); }
.nav-link-btn:active { transform: none; box-shadow: none; }
.site-nav nav a.on { color: var(--gold); border-bottom-color: var(--gold); }
.site-nav nav a.nav-cta { background: var(--gold); color: var(--night); border-color: var(--gold); box-shadow: 0 3px 0 #9c7d1f; }
.landing .site-nav { background: rgba(18, 10, 36, .78); border-bottom-color: rgba(255, 255, 255, .08); }

/* ---------- shared bits ---------- */
.flash { border: 2px solid var(--kam); color: var(--kam-ink); padding: 8px 12px; margin: 0; }
.eyebrow { font: 500 .75rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.muted { color: var(--dust); margin: 0; }
.hint { color: var(--dust); font-size: .85rem; margin: 0; }
a.btn-go, .btn-ghost { display: inline-block; font: 600 .95rem var(--f-display); padding: 7px 14px; text-decoration: none; text-align: center; }
a.btn-go { color: var(--night); border: 2px solid var(--gold); }
.btn-ghost { color: var(--chalk); background: transparent; border: 2px solid var(--chalk); box-shadow: 0 3px 0 var(--rail); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost:disabled { opacity: .6; cursor: default; color: var(--chalk); border-color: var(--rail); }
.btn-big { font-size: 1.1rem; padding: 10px 22px; }
.page-head { display: flex; gap: 18px; align-items: center; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--chalk); }
.page-head.center { justify-content: center; text-align: center; }
.panel { background: var(--stand); border: 2px solid var(--rail); padding: 18px 20px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 20px; }
.form-stack { display: grid; gap: 14px; }
.form-stack label { display: grid; gap: 6px; }
.form-stack input[type="text"], .form-stack input[type="email"], .form-stack input[type="password"], .form-stack input[type="number"] {
  width: 100%; font: .95rem/1.5 var(--f-mono); color: var(--chalk); background: #0e130d; border: 2px solid var(--rail); padding: 10px 12px; border-radius: 0; }
.form-stack input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.form-stack .check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.form-stack .check input { width: 18px; height: 18px; accent-color: var(--gold); }

/* sprite sheets that aren't the 6x4 fighter layout */
.judge-sprite { --f: 96px; --y: calc(var(--row, 0) * -1 * var(--f)); display: block; width: var(--f); height: var(--f); image-rendering: pixelated; background-repeat: no-repeat;
  background-size: calc(var(--f) * 4) calc(var(--f) * 8); background-position: 0 var(--y); animation: judge-idle .7s steps(2) infinite, float 2.4s ease-in-out infinite; }
@keyframes judge-idle { to { background-position: calc(var(--f) * -2) var(--y); } }
.form-sprite { --f: 168px; display: block; width: var(--f); height: var(--f); image-rendering: pixelated; background-repeat: no-repeat;
  background-size: calc(var(--f) * 3) calc(var(--f) * 2); background-position: calc(var(--i, 0) * -1 * var(--f)) 0; animation: float 2.6s ease-in-out infinite; }
.form-sprite.small { --f: 112px; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* ---------- judge select (arena page): a bench of three seats, and a select screen like the fighters' ---------- */
.judge-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.judge-slot { --c: var(--rail); position: relative; display: grid; justify-items: center; gap: 2px; padding: 14px 10px 12px; min-width: 0; color: var(--chalk); border: 3px solid var(--c);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 40%, transparent), transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--night)), var(--night)); transition: transform .15s, box-shadow .15s; }
.judge-slot:hover { border-color: var(--c); transform: translateY(-2px); box-shadow: 0 3px 0 var(--rail), 0 0 24px -6px var(--c); }
.judge-slot:active { transform: translateY(1px); }
.judge-slot .judge-sprite { --f: 128px; }
.judge-slot .slot-name { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.judge-slot .slot-meta { overflow-wrap: anywhere; text-align: center; }
.seat-tag { position: absolute; top: 8px; left: 8px; font: 600 .95rem var(--f-display); padding: 1px 7px; background: var(--gold); color: var(--night); }
@media (max-width: 640px) { .judge-slot .judge-sprite { --f: 80px; } .judge-stage { gap: 6px; } }
.js-body { display: grid; gap: 16px; padding: 16px; }
.js-seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.js-seat { --c: var(--rail); position: relative; display: grid; justify-items: center; gap: 2px; padding: 26px 10px 12px; text-align: center; cursor: pointer; border: 3px solid var(--rail);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 42%, transparent), transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--night)), var(--night)); }
.js-seat.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 26px -6px var(--gold); }
.js-seat .judge-sprite { --f: 112px; }
.js-seat h3 { font-size: 1.4rem; text-transform: uppercase; }
.js-seat .pv-model { font: 500 .66rem var(--f-mono); color: var(--dust); overflow-wrap: anywhere; margin: 0; }
@media (max-width: 560px) { .js-seat .judge-sprite { --f: 72px; } .js-seat h3 { font-size: 1rem; } }
.judge-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.judge-tile .judge-sprite { --f: 88px; animation: judge-idle .7s steps(2) infinite; animation-play-state: paused; }
.judge-tile.cursor .judge-sprite, .judge-tile:hover .judge-sprite { animation-play-state: running; }
.judge-tile .tile-tag { background: var(--gold); }
.judge-tile.picked { border-color: var(--c); }
#judge-screen .ss-grid[data-seat] .tile.cursor { outline: 3px solid var(--gold); outline-offset: 2px; }
#judge-note.warn, #js-note.warn { color: var(--gold); }

/* ---------- work box helper (arena page) ---------- */
.work-help { display: grid; gap: 6px; margin-top: -6px; }
.work-count { font: 500 .8rem var(--f-mono); color: var(--dust); font-variant-numeric: tabular-nums; }
.work-help.over .work-count { color: var(--hit); }
.work-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.work-notes li { padding: 6px 10px; font-size: .88rem; border-left: 4px solid; background: #0e130d; }
.work-error { border-color: var(--hit); color: #f6b3b3; }
.work-warn { border-color: var(--gold); color: #f1dfa6; }
.work-tips { border: 2px dashed var(--rail); padding: 8px 12px; }
.work-tips summary { cursor: pointer; font: 600 .95rem var(--f-display); color: var(--gold); }
.work-tips ul { margin: 10px 0 2px; padding-left: 18px; display: grid; gap: 6px; color: var(--dust); font-size: .9rem; }
.work-tips strong { color: var(--chalk); }
.work-tips code { font-family: var(--f-mono); color: var(--chalk); }

/* ---------- auth ---------- */
.auth { display: grid; place-items: center; min-height: 72vh; }
.auth-card { width: min(440px, 100%); background: var(--stand); border: 3px solid var(--rail); padding: 26px 24px; display: grid; gap: 14px; box-shadow: 0 6px 0 var(--rail); }
.auth-card h1 { font-size: 2.1rem; color: var(--gold); text-align: center; }
.auth-art { display: grid; place-items: center; }
.auth-lede, .auth-switch { margin: 0; color: var(--dust); text-align: center; }

/* ---------- profile ---------- */
.avatar { --c: var(--rail); flex: none; width: 120px; height: 120px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--c);
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 45%, transparent), transparent 66%), #0e130d; }
.profile-head .avatar { border-color: var(--c, var(--rail)); }
.avatar .sprite { --f: 120px; }
.avatar-initial { font: 600 3.5rem var(--f-display); color: var(--gold); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--stand); border: 2px solid var(--rail); padding: 14px 16px; display: grid; gap: 2px; }
.stat strong { font: 600 1.9rem var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.stat span { font: 500 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dust); }
.fav { display: flex; gap: 12px; align-items: center; }
.fav .sprite { --f: 96px; flex: none; }
.fav strong { display: block; font: 600 1.35rem var(--f-display); color: var(--ink); }

/* ---------- settings ---------- */
.meter-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.meter-head strong { font: 600 2.2rem var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.meter { height: 16px; border: 2px solid var(--rail); background: #0b0f0a; }
.meter i { display: block; height: 100%; background: var(--kam); transition: width .4s steps(10); }
.meter i.warn { background: var(--hit); }
.facts { margin: 0; display: grid; gap: 8px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--rail); padding-bottom: 6px; }
.facts dt { color: var(--dust); }
.facts dd { margin: 0; font-family: var(--f-mono); text-align: right; }
.plan-strip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: 20px; }
@media (max-width: 560px) { .plan-strip { grid-template-columns: minmax(0, 1fr); } }

/* ---------- plans ---------- */
.plans { display: grid; gap: 22px; }
.notice { border: 2px dashed var(--gold); color: var(--gold); padding: 10px 14px; margin: 0 auto; max-width: 720px; text-align: center; }
.billing { border: 0; margin: 0; padding: 0; display: flex; justify-content: center; }
.billing label span { display: inline-block; font: 600 1rem var(--f-display); padding: 8px 16px; border: 2px solid var(--rail); cursor: pointer; }
.billing label + label span { border-left: 0; }
.billing label:has(input:checked) span { background: var(--chalk); color: var(--night); border-color: var(--chalk); }
.billing label:has(input:focus-visible) span { outline: 2px solid var(--gold); outline-offset: 2px; }
.billing em { font-style: normal; font: 500 .7rem var(--f-mono); margin-left: 6px; color: var(--kam-ink); }
.billing label:has(input:checked) em { color: #116b48; }
.price-y { display: none; }
.plans:has(input[value="yearly"]:checked) .price-y { display: inline; }
.plans:has(input[value="yearly"]:checked) .price-m { display: none; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 18px; align-items: stretch; margin-top: 8px; }
.tier { position: relative; background: var(--stand); border: 3px solid var(--rail); padding: 24px 20px 20px; display: grid; gap: 10px; grid-template-rows: auto auto auto 1fr auto; }
.tier.featured { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 30px -8px var(--gold); }
.tier-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--night); font: 600 .8rem var(--f-display); padding: 2px 10px; text-transform: uppercase; white-space: nowrap; }
.tier h2 { font-size: 1.7rem; text-transform: uppercase; }
.price { margin: 0; }
.price strong { font: 600 2.5rem var(--f-display); color: var(--gold); }
.price span span { color: var(--dust); margin-left: 4px; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; align-content: start; }
.features li { padding-left: 18px; position: relative; }
.features li::before { content: "◆"; position: absolute; left: 0; top: .25em; color: var(--gold); font-size: .7rem; }
.tier .btn-go, .tier .btn-ghost { width: 100%; }

/* ---------- landing ---------- */
.landing-main { display: block; }
.hero { position: relative; height: calc(100svh - 58px); min-height: 580px; overflow: hidden; display: grid; place-items: start center; background: #120a24; }
.hero .layer { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.hero .sky { inset: -10% 0 0; background: linear-gradient(180deg, #120a24 0%, #24113c 30%, #5a1c4c 58%, #b0452e 80%, #f0a03a 100%); }
.hero .stars { bottom: 40%; opacity: .9;
  background: radial-gradient(2px 2px at 24px 30px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 130px 90px, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 210px 40px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 300px 130px, #cfe0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60px 160px, #fff 50%, transparent 51%);
  background-size: 340px 200px; animation: twinkle 4s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .55; } }
.hero .moon { inset: auto; top: 11%; right: 13%; width: 88px; height: 88px; background: radial-gradient(circle at 34% 40%, #e8c98a 0 9px, transparent 10px), radial-gradient(circle at 64% 64%, #e8c98a 0 6px, transparent 7px), #ffecc0;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); filter: drop-shadow(0 0 24px rgba(255, 220, 160, .45)); }
.hero .far { top: 40%; background: #3e1c4e; clip-path: polygon(0 40%, 8% 22%, 16% 38%, 26% 10%, 36% 34%, 44% 18%, 54% 40%, 63% 8%, 72% 30%, 82% 16%, 91% 36%, 100% 20%, 100% 100%, 0 100%); }
.hero .mid { top: 56%; background: #261131; clip-path: polygon(0 30%, 12% 12%, 22% 28%, 35% 6%, 48% 26%, 60% 10%, 72% 30%, 86% 8%, 100% 24%, 100% 100%, 0 100%); }
.hero .near { top: 74%; background: linear-gradient(180deg, #1c0e18, #0f080e); clip-path: polygon(0 16%, 20% 8%, 40% 14%, 50% 10%, 60% 14%, 80% 6%, 100% 14%, 100% 100%, 0 100%); }
.hero .near::before { content: ""; position: absolute; left: 50%; top: 18%; width: min(460px, 70vw); height: 64px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, #2c2232 52%, #ff7a1a 53% 60%, #1c1420 61% 70%, transparent 71%); }
.hero-stage { position: absolute; left: 0; right: 0; bottom: 13%; display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 7vw, 110px); pointer-events: none; }
.hero-stage .sprite { --f: clamp(120px, 15vw, 192px); }
.hero-p2 { transform: scaleX(-1); }
.hero-boss { --f: clamp(140px, 18vw, 228px); margin-bottom: 26px; }
.hero-copy { position: relative; z-index: 2; text-align: center; padding: clamp(28px, 8vh, 90px) 16px 0; }
.hero-copy .eyebrow { color: #ffd27a; }
.hero-copy h1 { font-size: clamp(3.4rem, 12vw, 8rem); line-height: .9; color: var(--gold); text-shadow: 4px 4px 0 #8a2a40, 8px 8px 0 #120a24; }
.tagline { font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: #fff3df; margin: 14px auto 24px; max-width: 34ch; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .btn-ghost { color: #fff3df; border-color: #fff3df; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.scroll-cue { position: absolute; z-index: 2; bottom: 12px; left: 50%; translate: -50% 0; color: var(--gold); text-decoration: none; font-size: 1.4rem; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

.lp-section { padding: clamp(56px, 10vw, 110px) 16px; }
.lp-section.alt { background: var(--stand); border-block: 2px solid var(--rail); }
.lp-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; }
.lp-inner.center { text-align: center; justify-items: center; }
.lp-inner h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); max-width: 24ch; }
.lede { color: var(--dust); max-width: 60ch; margin: 0; font-size: 1.1rem; }
.lp-inner p { margin: 0; }
.split { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 5vw, 60px); }
.split > div + div { display: grid; gap: 12px; }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.steps li { background: var(--stand); border: 2px solid var(--rail); padding: 18px; display: grid; gap: 8px; align-content: start; }
.steps b { font: 600 1.5rem var(--f-display); color: var(--night); background: var(--gold); width: 44px; height: 44px; display: grid; place-items: center; box-shadow: 0 3px 0 #9c7d1f; }
.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--dust); }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mon-card { background: #0e130d; border: 3px solid var(--c); display: grid; gap: 6px; padding-bottom: 14px; text-align: center; align-content: start; }
.mon-art { display: grid; place-items: center; padding: 6px; border-bottom: 3px solid var(--c); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 50%, transparent), transparent 66%), #10160f; }
.mon-art .sprite { --f: 144px; }
.mon-card h3 { font-size: 1.4rem; text-transform: uppercase; }
.mon-card p { margin: 0 12px; font-size: .9rem; color: var(--dust); }
.mon-card .mon-meta { font: 500 .72rem var(--f-mono); color: var(--ink); text-transform: uppercase; letter-spacing: .08em; }
.judges-row { display: flex; gap: 10px; }
.forms-row { display: flex; gap: 10px; flex-wrap: wrap; }

.band { position: relative; overflow: hidden; min-height: 380px; display: grid; place-items: center; padding: 70px 16px; }
.band-layer { position: absolute; inset: -20% 0; will-change: transform; pointer-events: none; }
.b-sky { inset: 0; background: linear-gradient(180deg, #6fbbe8, #c4e6f4 70%); }
.b-hills-far { top: 30%; background: #7ab87a; clip-path: polygon(0 30%, 15% 12%, 30% 26%, 48% 8%, 62% 24%, 80% 6%, 100% 22%, 100% 100%, 0 100%); }
.b-hills { top: 48%; background: #4f9a52; clip-path: polygon(0 22%, 12% 34%, 26% 14%, 42% 30%, 58% 10%, 74% 28%, 90% 12%, 100% 20%, 100% 100%, 0 100%); }
.b-grass { top: 66%; background: repeating-linear-gradient(90deg, #56a344 0 40px, #4e9a3e 40px 80px); clip-path: polygon(0 20%, 100% 8%, 100% 100%, 0 100%); }
.band-quote { position: relative; z-index: 1; margin: 0; max-width: 26ch; text-align: center; font: 600 clamp(1.5rem, 4vw, 2.6rem)/1.15 var(--f-display); color: #10160f;
  background: rgba(255, 255, 255, .86); border: 3px solid #10160f; padding: 16px 22px; box-shadow: 6px 6px 0 #10160f; }
.band-quote em { color: #b42323; font-style: normal; }
.band-lava { min-height: 540px; }
.l-sky { inset: 0; background: linear-gradient(180deg, #1a0610, #461018 45%, #8a2a14 80%, #b4441a); }
.l-peaks { top: 34%; background: #2a1016; clip-path: polygon(0 50%, 10% 30%, 18% 44%, 30% 10%, 38% 36%, 52% 20%, 64% 40%, 74% 6%, 86% 34%, 100% 18%, 100% 100%, 0 100%); }
.l-ground { top: 66%; background: linear-gradient(180deg, #2b2329, #1a1418); clip-path: polygon(0 16%, 100% 8%, 100% 100%, 0 100%); }
.l-ground::after { content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 16px; background: linear-gradient(90deg, #ff6a1a, #ffb020, #ff6a1a); animation: lava-glow 2.6s ease-in-out infinite alternate; }
@keyframes lava-glow { to { opacity: .7; } }
.embers { position: absolute; inset: 0; pointer-events: none; }
.embers i { position: absolute; bottom: -10px; left: var(--x); width: 4px; height: 4px; background: #ffb020; box-shadow: 0 0 6px #ff7a1a; opacity: 0;
  animation: ember var(--d) linear infinite; animation-delay: var(--delay); }
@keyframes ember { 10% { opacity: 1; } 100% { transform: translate(30px, -560px); opacity: 0; } }
.band-content { position: relative; z-index: 1; width: min(1000px, 100%); text-align: center; display: grid; gap: 14px; justify-items: center; }
.band-content h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); color: #fff3df; }
.band-lava .eyebrow { color: #ffb020; }
.arena-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; width: min(760px, 100%); }
.arena-previews figure { margin: 0; background: rgba(16, 22, 15, .9); border: 3px solid var(--rail); text-align: left; }
.arena-previews .arena-art { display: block; }
.arena-previews figcaption { padding: 10px 12px; color: var(--dust); display: grid; gap: 2px; }
.arena-previews figcaption strong { font: 600 1.2rem var(--f-display); color: var(--chalk); text-transform: uppercase; }

.site-footer { border-top: 2px dashed var(--rail); padding: 22px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; color: var(--dust); font-size: .9rem; }
.site-footer span:first-child { font: 600 1.1rem var(--f-display); color: var(--gold); }

/* sections fade up once; only when the script is running, so nothing stays hidden without it */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero .stars, .scroll-cue, .embers i, .l-ground::after, .judge-sprite, .form-sprite { animation: none; }
  .embers { display: none; }
  .judge-sprite { animation: judge-idle 1.4s steps(2) infinite; }
}

/* ---------- dev portal ---------- */
.dev-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.dev-side { display: grid; gap: 20px; align-content: start; }
.dev-select { width: 100%; font: .9rem var(--f-mono); color: var(--chalk); background: #0e130d; border: 2px solid var(--rail); padding: 10px 12px; border-radius: 0; }
.dev-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.dev-missing { color: #ef5b5b; }
@media (max-width: 640px) { .dev-grid { grid-template-columns: 1fr; } }
.dev-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rail); margin: 4px 0 18px; }
.dev-tabs a { font: 600 .95rem var(--f-display); color: var(--dust); text-decoration: none; padding: 8px 14px; border: 2px solid transparent; border-bottom: 0; margin-bottom: -2px; }
.dev-tabs a:hover { color: var(--chalk); }
.dev-tabs a.on { color: var(--gold); border-color: var(--rail); background: var(--stand); }
.dev-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dev-search input { flex: 1 1 220px; font: .9rem var(--f-mono); color: var(--chalk); background: #0e130d; border: 2px solid var(--rail); padding: 8px 10px; border-radius: 0; }
.dev-search input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.dev-table-wrap { overflow-x: auto; }
.dev-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dev-table th { text-align: left; font: 500 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); padding: 8px 10px; border-bottom: 2px solid var(--rail); }
.dev-table td { padding: 10px; border-bottom: 1px dashed var(--rail); vertical-align: middle; }
.dev-table .dev-num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.dev-table .act { text-align: right; white-space: nowrap; }
.dev-table .act button { font-size: .8rem; padding: 4px 10px; }
.dev-table tr.revoked td { opacity: .6; }
.dev-table tr.revoked td.act { opacity: 1; }
.dev-email { display: block; font: .8rem var(--f-mono); color: var(--dust); overflow-wrap: anywhere; }
.dev-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font: 600 .7rem var(--f-mono); letter-spacing: .04em; padding: 2px 6px; border: 1px solid currentColor; white-space: nowrap; }
.tag.admin { color: var(--gold); } .tag.ok { color: #7bd389; } .tag.wait { color: var(--dust); } .tag.revoked { color: #ef5b5b; }
.btn-danger { color: #ef5b5b; background: transparent; border: 2px solid #ef5b5b; box-shadow: 0 3px 0 var(--rail); }
.btn-danger:hover { background: #ef5b5b; color: var(--night, #10160f); }