@font-face { font-family: "Science Gothic"; src: url("fonts/science-gothic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 200%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
:root { --ink: #fff; --dim: rgba(255,255,255,.62); --line: rgba(255,255,255,.28); --gold: #ffd27a; --d: "Science Gothic", "Avenir Next Condensed", sans-serif; --m: "Martian Mono", ui-monospace, monospace; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #05030a; color: var(--ink); overflow: hidden; font-family: var(--m); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
body.play, body.play * { cursor: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.6vh, 28px); padding: max(20px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom)); text-align: center; animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(5,3,10,.34) 0%, rgba(5,3,10,.1) 50%, rgba(5,3,10,.55) 100%); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } }

h1 { font-family: var(--d); font-weight: 800; font-stretch: 180%; font-size: clamp(44px, 9.4vw, 170px); line-height: .82; letter-spacing: .02em; display: flex; align-items: flex-start; justify-content: center; mix-blend-mode: plus-lighter; text-shadow: 0 0 60px rgba(255,255,255,.35); }
h1 span { background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 em { font-style: normal; font-stretch: 60%; font-weight: 300; font-size: .34em; margin: .12em 0 0 .14em; width: 1.5em; height: 1.5em; line-height: 1.42em; border: 2px solid #fff; border-radius: 50%; animation: breathe 5.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.14); box-shadow: 0 0 44px rgba(255,255,255,.55), inset 0 0 22px rgba(255,255,255,.35); } }
.tag { font-family: var(--d); font-stretch: 150%; font-weight: 300; text-transform: uppercase; letter-spacing: .62em; margin-right: -.62em; font-size: clamp(10px, 1.25vw, 17px); margin-top: 1.6em; color: #fff; text-shadow: 0 1px 14px #000, 0 0 30px rgba(0,0,0,.8); }

#voyages { display: flex; gap: clamp(8px, 1.2vw, 18px); flex-wrap: wrap; justify-content: center; max-width: 1120px; }
.voy { width: clamp(210px, 26vw, 340px); padding: 11px 15px 10px; text-align: left; border: 1px solid var(--line); border-radius: 3px; background: rgba(8,5,16,.5); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); transition: border-color .25s, background .25s, transform .25s; position: relative; }
.voy b { display: block; font-family: var(--d); font-stretch: 140%; font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.voy i { font-style: normal; display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 3px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voy p { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.8); min-height: 3em; }
.voy small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .08em; color: var(--dim); }
.voy:hover { border-color: rgba(255,255,255,.6); }
.voy[aria-pressed="true"] { border-color: #fff; background: rgba(255,255,255,.14); transform: translateY(-4px); }
.voy[aria-pressed="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: #fff; box-shadow: 0 0 14px #fff; }

#go { font-family: var(--d); font-stretch: 170%; font-weight: 700; text-transform: uppercase; letter-spacing: .5em; font-size: clamp(14px, 1.5vw, 20px); padding: 17px 34px 17px calc(34px + .5em); border: 1px solid #fff; border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, color .2s, box-shadow .2s; animation: pulse 2.6s ease-in-out infinite; }
#go:hover, #go:focus-visible { background: #fff; color: #05030a; box-shadow: 0 0 60px rgba(255,255,255,.6); outline: 0; }
#go[disabled] { opacity: .55; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 34px rgba(255,255,255,.4); } }
#how { font-size: 11px; line-height: 1.9; color: #fff; max-width: 780px; padding: 8px 18px; border-radius: 3px; background: rgba(8,5,16,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#how kbd, #keys kbd { font: inherit; border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; margin: 0 2px; background: rgba(0,0,0,.3); }
#title footer { position: absolute; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 8px 26px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 10px; letter-spacing: .04em; color: var(--dim); padding: 0 16px; }
#soft { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 10px; color: #fff; }
#soft[aria-pressed="true"] { background: #fff; color: #05030a; }

#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 12px rgba(0,0,0,.75); }
#hud .tl { position: absolute; left: max(22px, env(safe-area-inset-left)); top: max(18px, env(safe-area-inset-top)); }
#h-name { font-family: var(--d); font-stretch: 140%; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
#h-act { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }
#hud .tr { position: absolute; right: max(22px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); text-align: right; }
#h-score { font-family: var(--d); font-stretch: 150%; font-weight: 700; font-size: clamp(22px, 2.6vw, 38px); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#h-mult { font-size: 11px; letter-spacing: .12em; color: var(--dim); }
#h-x { color: #fff; display: inline-block; margin-right: 10px; font-weight: 700; }
#h-x.pop { animation: pop .45s cubic-bezier(.2,2.2,.3,1); color: var(--gold); }
@keyframes pop { from { transform: scale(2.1); } }
#h-realm { position: absolute; left: 0; right: 0; top: 17%; text-align: center; font-family: var(--d); font-stretch: 160%; font-weight: 300; font-size: clamp(18px, 3.1vw, 46px); letter-spacing: .3em; text-transform: uppercase; opacity: 0; mix-blend-mode: plus-lighter; }
#h-realm.show { animation: realm 4.2s ease-out both; }
@keyframes realm { 0% { opacity: 0; letter-spacing: .9em; filter: blur(12px); } 16% { opacity: 1; filter: blur(0); } 72% { opacity: 1; } 100% { opacity: 0; letter-spacing: .34em; } }
#h-msg { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font-family: var(--d); font-stretch: 150%; font-weight: 700; font-size: clamp(15px, 2.1vw, 30px); letter-spacing: .34em; text-transform: uppercase; opacity: 0; }
#h-msg.show { animation: msg 1.25s ease-out both; }
#h-msg.big { font-size: clamp(26px, 5.2vw, 78px); top: 58%; color: var(--gold); mix-blend-mode: plus-lighter; }
#h-msg.bad { color: #ff6f91; }
@keyframes msg { 0% { opacity: 0; transform: scale(1.5); filter: blur(8px); } 14% { opacity: 1; transform: none; filter: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
#h-hint { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); max-width: min(88vw, 640px); padding: 11px 20px; font-size: 12px; line-height: 1.7; text-align: center; border: 1px solid var(--line); border-radius: 3px; background: rgba(8,5,16,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .6s; }
#h-hint.show { opacity: 1; }
#hud .bar { position: absolute; left: max(22px, env(safe-area-inset-left)); right: max(22px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); height: 2px; background: rgba(255,255,255,.2); }
#h-prog { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; box-shadow: 0 0 10px #fff; }
#h-flow { position: absolute; left: 0; bottom: 7px; height: 1px; background: var(--gold); box-shadow: 0 0 10px var(--gold); transition: width .3s; }

#pause::before, #eveil::before { background: rgba(5,3,10,.66); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
h2 { font-family: var(--d); font-stretch: 170%; font-weight: 800; font-size: clamp(34px, 6.5vw, 100px); letter-spacing: .1em; text-transform: uppercase; line-height: .95; mix-blend-mode: plus-lighter; }
#keys, #e-stats { display: grid; grid-template-columns: auto auto; gap: 9px 26px; font-size: 12px; text-align: left; }
#keys dt, #e-stats dt { color: var(--dim); text-align: right; }
#e-stats { grid-template-columns: repeat(4, auto); }
#e-stats dd { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.row button { border: 1px solid var(--line); border-radius: 999px; padding: 12px 24px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; transition: background .2s, color .2s; }
.row button:first-child { border-color: #fff; }
.row button:hover, .row button:focus-visible { background: #fff; color: #05030a; outline: 0; }
.over { font-size: 11px; letter-spacing: .6em; text-transform: uppercase; color: var(--dim); margin-right: -.6em; }
#e-line { font-size: 13px; color: rgba(255,255,255,.85); max-width: 520px; line-height: 1.7; }
#e-trip { font-family: var(--d); font-stretch: 140%; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: var(--dim); }
#e-score { font-family: var(--d); font-stretch: 150%; font-weight: 700; font-size: clamp(30px, 4.6vw, 64px); font-variant-numeric: tabular-nums; color: var(--gold); }
#e-score small { display: block; font-family: var(--m); font-weight: 400; font-size: 10px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; margin-top: 4px; }

#loading { position: fixed; left: 50%; bottom: 46%; transform: translateX(-50%); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--dim); text-align: center; transition: opacity .6s; white-space: nowrap; }
#loading i { display: block; height: 1px; background: #fff; margin: 12px auto 0; width: 0; max-width: 220px; transition: width .2s; }
#loading.gone { opacity: 0; pointer-events: none; }
#mute { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
@media (max-height: 900px) { h1 { font-size: clamp(40px, min(9.4vw, 17vh), 150px); } .screen { gap: clamp(8px, 1.7vh, 20px); } .tag { margin-top: 1em; } }
@media (max-height: 560px) { h1 { font-size: clamp(40px, 15vh, 110px); } .voy p, #how { display: none; } .tag { margin-top: .8em; } }
@media (prefers-reduced-motion: reduce) { .screen, #go, h1 em { animation: none; } }