* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --night: #070A0F; --panel: #0E131A; --line: rgba(230,237,242,.14); --frost: #E6EDF2; --dim: rgba(230,237,242,.62);
  --steel: #8FA9BD; --ember: #FF8A3D; --ember2: #FFB86B; --ink: #0B0D10;
  --display: "League Gothic", "Oswald", Impact, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html, body { background: var(--night); color: var(--frost); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100%; }
body { max-width: 480px; margin: 0 auto; position: relative; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--ember2); }
.d { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .005em; }
.m { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
[hidden] { display: none !important; }

/* HUD */
.hud { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: linear-gradient(180deg, rgba(7,10,15,.85), rgba(7,10,15,0)); }
.brand { color: var(--dim); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button { padding: 6px 12px; color: var(--dim); }
.lang button.on { background: var(--frost); color: var(--ink); }

.view { display: none; min-height: 100svh; }
.view.on { display: block; }
.pad { padding: 64px 16px calc(96px + var(--safe-b)); }

/* landing */
#landing { position: relative; overflow: hidden; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.9); }
.scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,15,.1) 20%, rgba(7,10,15,.92) 78%); }
.landing-body { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 80px 20px 120px; gap: 14px; }
.hero { font-size: 72px; }
.hero span, .hero b { display: block; }
.hero b { font-weight: 400; font-size: 200px; line-height: .8; color: var(--frost); }
.status { color: var(--ember2); font-size: 13px; }
.count { color: var(--frost); font-size: 20px; letter-spacing: .08em; }
.lead { color: var(--dim); max-width: 34ch; }
.cta { display: grid; gap: 10px; margin-top: 8px; }
.foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px calc(14px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 10px; color: var(--dim); }

.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 54px; padding: 0 22px; border-radius: 999px;
  font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.btn.primary { background: var(--ember); color: var(--ink); box-shadow: 0 10px 40px -10px rgba(255,138,61,.7); }
.btn.primary:active { transform: scale(.97); }
.btn.ghost { border: 1px solid rgba(230,237,242,.35); }
.btn.wide { width: 100%; margin-top: 18px; }
.link { display: block; margin: 22px auto 0; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }

/* setup */
.kicker { color: var(--ember2); margin-bottom: 8px; }
.title { font-size: 64px; margin-bottom: 10px; }
.note { color: var(--dim); font-size: 14px; margin-bottom: 18px; }
.levels { display: grid; gap: 12px; }
.level { text-align: left; padding: 18px; border-radius: 20px; background: var(--panel); border: 2px solid var(--line); }
.level.on { border-color: var(--ember); background: linear-gradient(160deg, rgba(255,138,61,.16), var(--panel) 60%); }
.level .d { font-size: 38px; }
.level .tag { color: var(--ember2); margin: 2px 0 10px; }
.level ul { list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--dim); }
.level li b { color: var(--frost); font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; }

/* today */
.today-head { display: grid; gap: 12px; margin-bottom: 16px; }
.pill { justify-self: start; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ember2); color: var(--ember2); }
.dayline { display: flex; align-items: flex-end; gap: 12px; }
.day { font-size: 110px; line-height: .8; white-space: nowrap; flex: none; }
.dayline .sub { color: var(--dim); padding-bottom: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.stats div { background: var(--panel); border-radius: 16px; padding: 12px; display: grid; gap: 2px; color: var(--dim); font-size: 10px; }
.stats b { font-size: 40px; color: var(--frost); }
.banner { background: rgba(255,138,61,.12); border: 1px solid rgba(255,138,61,.4); color: var(--ember2); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { padding: 8px 14px; border-radius: 999px; color: var(--dim); border: 1px solid var(--line); }
.tabs button.on { background: var(--frost); color: var(--ink); border-color: var(--frost); }
.quests { display: grid; gap: 10px; }
.quest { display: grid; grid-template-columns: 1fr 56px; align-items: center; gap: 12px; text-align: left; padding: 16px; border-radius: 20px;
  background: var(--panel); border: 2px solid var(--line); transition: background .25s, border-color .25s; min-height: 92px; }
.quest .m { color: var(--ember2); margin-bottom: 4px; }
.quest .d { font-size: 28px; line-height: 1; }
.quest .ck { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(230,237,242,.3); position: relative; transition: all .25s; }
.quest.done { border-color: var(--ember); background: linear-gradient(120deg, rgba(255,138,61,.22), var(--panel) 70%); }
.quest.done .ck { background: var(--ember); border-color: var(--ember); animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.quest.done .ck::after { content: ""; position: absolute; left: 20px; top: 11px; width: 12px; height: 24px; border: solid var(--ink); border-width: 0 5px 5px 0; rotate: 45deg; }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }
.locked { text-align: center; padding: 34px 16px; border: 1px dashed var(--line); border-radius: 20px; display: grid; gap: 10px; }
.locked .d { font-size: 40px; }

/* map */
.grid { display: grid; gap: 6px; margin: 6px 0 14px; }
.row { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 5px; align-items: center; }
.row .m { font-size: 10px; color: var(--dim); letter-spacing: .06em; }
.c { display: inline-block; aspect-ratio: 1; border-radius: 6px; background: rgba(230,237,242,.06); border: 1px solid rgba(230,237,242,.08); }
.legend .c { width: 12px; vertical-align: -2px; margin: 0 2px 0 8px; }
.c.l1 { background: rgba(255,138,61,.28); } .c.l2 { background: rgba(255,138,61,.5); } .c.l3 { background: rgba(255,138,61,.75); } .c.l4 { background: var(--ember); box-shadow: 0 0 12px rgba(255,138,61,.5); }
.c.sh { background: var(--steel); opacity: .6; }
.c.fut { opacity: .35; } .c.pre { opacity: .15; }
.c.now { outline: 2px solid var(--frost); outline-offset: 1px; }
.row.fin { grid-template-columns: 44px 1fr; }
.row.fin .c { aspect-ratio: auto; height: 36px; }
.legend { color: var(--dim); font-size: 10px; }

/* tab bar */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 15; display: none;
  grid-template-columns: 1fr 1fr; padding: 8px 16px calc(8px + var(--safe-b)); gap: 8px; background: rgba(7,10,15,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.tabbar.on { display: grid; }
.tabbar button { padding: 14px; border-radius: 14px; color: var(--dim); }
.tabbar button.on { color: var(--frost); background: var(--panel); }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 40; background: var(--night); display: flex; animation: fade .3s ease-out; }
.overlay .bg { filter: brightness(.6) saturate(1.1); }
.overlay-body { position: relative; margin-top: auto; width: 100%; max-width: 480px; margin-inline: auto; padding: 24px 20px calc(40px + var(--safe-b)); display: grid; gap: 12px; }
.overlay .big { font-size: 96px; animation: rise .5s cubic-bezier(.2,1,.3,1); }
.overlay .sub { color: var(--ember2); font-size: 13px; }
.teaser { color: var(--dim); }
.overlay.ep { background: radial-gradient(70% 40% at 50% 45%, rgba(255,138,61,.25), transparent 70%), var(--night); }
.overlay.ep .overlay-body { margin-block: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(1.1); } }
dialog { margin: auto; border: 0; background: #000; width: 100%; max-width: 480px; max-height: 100svh; }
dialog::backdrop { background: rgba(0,0,0,.9); }
dialog video { width: 100%; max-height: 90svh; display: block; }
dialog .btn { position: absolute; top: 10px; right: 10px; min-height: 40px; background: rgba(0,0,0,.5); }
.toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%); z-index: 50; background: var(--frost); color: var(--ink);
  padding: 12px 18px; border-radius: 999px; white-space: nowrap; animation: fade .2s; }
/* name */
.namebox { display: grid; gap: 8px; margin: 6px 0 26px; }
.namebox .d { font-size: 34px; }
.namebox input { font: 400 32px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--frost); background: var(--panel);
  border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; outline: none; width: 100%; }
.namebox input:focus { border-color: var(--ember); }
.namebox input::placeholder { color: rgba(230,237,242,.3); }
.namebox .m { color: var(--dim); font-size: 10px; }

.namebox #why { font: 400 16px/1.3 system-ui, sans-serif; text-transform: none; padding: 12px 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 10px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); font-size: 14px; }
.chips button.on { border-color: var(--ember); color: var(--ember2); background: rgba(255,138,61,.12); }
.whyline { color: var(--ember2); font-size: 11px; line-height: 1.5; }

/* story recap */
.story { background: #000; }
.story .card { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; overflow: hidden; }
.story .card.on { opacity: 1; }
.story .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.1); transform: scale(1.12); }
.story .card.on video { animation: push 3.4s linear forwards; }
.story .card .scrim { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(7,10,15,.9) 85%); }
.card-body { position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; padding: 20px 20px calc(48px + var(--safe-b)); display: grid; gap: 10px; }
.card-body .kicker { margin: 0; }
.card-body .huge { font-size: 150px; line-height: .8; color: var(--frost); }
.card-body .huge.ember { color: var(--ember); text-shadow: 0 0 40px rgba(255,138,61,.45); }
.card-body .t2 { font-size: 64px; line-height: .88; }
.card-body .lbl { color: var(--ember2); font-size: 13px; }
.card.on .a1 { animation: rise .55s cubic-bezier(.2,1,.3,1) .05s both; }
.card.on .a2 { animation: rise .55s cubic-bezier(.2,1,.3,1) .35s both; }
.card.on .a3 { animation: rise .55s cubic-bezier(.2,1,.3,1) .65s both; }
.card.on .a4 { animation: rise .55s cubic-bezier(.2,1,.3,1) .95s both; }
.card-body .btns { display: grid; gap: 10px; margin-top: 8px; }
@keyframes push { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.st-bars { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.st-bars i b { display: block; height: 100%; width: 0; background: #fff; }
.st-bars i.done b { width: 100%; }
.st-bars i.run b { animation: fill var(--dur, 3.34s) linear forwards; }
@keyframes fill { to { width: 100%; } }
.st-x { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.35); font-size: 16px; }
.st-cover { position: absolute; inset: 0; z-index: 2; background: var(--night); display: flex; }

/* recap strip (story card 3) */
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.strip .c { border-radius: 8px; display: grid; place-items: center; font: 400 10px var(--mono); color: rgba(230,237,242,.7); }
.strip .c.l4 { color: var(--ink); }
.row button.m { text-align: left; color: var(--ember2); text-decoration: underline; text-underline-offset: 3px; }
.testbar { position: fixed; bottom: calc(82px + var(--safe-b)); white-space: nowrap; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 6px;
  background: #FFD84D; color: var(--ink); border-radius: 999px; padding: 4px; font-size: 11px; }
.testbar span { padding: 0 6px; }
.testbar button { background: var(--ink); color: #FFD84D; border-radius: 999px; padding: 6px 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }