:root { color-scheme: dark; font-family: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; --ink:#eaf8ec; --green:#72ff9d; --red:#ff5b6e; --gold:#ffd166; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#020706; touch-action:none; }
body { display:grid; place-items:center; }
#app { position:relative; width:min(100vw, 462px); height:min(100dvh, 1000px); aspect-ratio:390/844; overflow:hidden; background:#07110f; box-shadow:0 0 70px #000; }
canvas { position:absolute; inset:0; width:100%; height:100%; }
.screen { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; padding:70px 30px 38px; text-align:center; overflow:hidden; background:radial-gradient(circle at 50% 42%, #173128 0, #07110f 46%, #030807 100%); }
.screen.active { display:flex; }
.screen-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.title-key-art,.ending-key-art { object-position:50% 50%; }
.screen-art-shade { position:absolute; inset:0; pointer-events:none; }
.title-art-shade { background:linear-gradient(180deg,#020706f5 0%,#020706bf 23%,#02070612 46%,#02070635 66%,#020706f5 83%,#020706 100%); }
.ending-art-shade { background:linear-gradient(180deg,#020706ee 0%,#020706aa 23%,#02070608 46%,#02070670 68%,#020706fa 83%,#020706 100%); }
.noise { position:absolute; inset:0; z-index:1; opacity:.14; pointer-events:none; background-image:repeating-linear-gradient(90deg,transparent 0 3px,#86ffae15 4px),repeating-linear-gradient(0deg,transparent 0 5px,#000 6px); }
.eyebrow { z-index:1; margin:0 0 14px; color:#9bc7aa; font:700 11px/1.2 ui-monospace,monospace; letter-spacing:.28em; }
h1 { z-index:1; display:flex; align-items:baseline; gap:0; margin:4px 0 0; font-size:66px; line-height:.9; letter-spacing:-.1em; filter:drop-shadow(0 0 16px #5cff8d55); }
h1 span { color:#dce8e0; font-weight:900; }
h1 strong { color:var(--green); font-size:.62em; letter-spacing:.06em; text-shadow:0 0 16px #72ff9d; }
.english { z-index:1; margin:12px 0 20px; color:#72ff9d; font:600 10px ui-monospace,monospace; letter-spacing:.5em; }
.tagline { z-index:1; font-size:19px; font-weight:800; letter-spacing:.05em; }
.title-lock { position:absolute; top:15%; font-size:260px; color:#6eff9a08; transform:rotate(-9deg); }
.title-art-space { z-index:1; flex:1; width:1px; min-height:250px; }
button { z-index:2; border:0; color:var(--ink); font:800 15px inherit; letter-spacing:.08em; cursor:pointer; }
.primary,.secondary,.ghost { width:min(290px,85%); min-height:52px; margin:6px; border-radius:4px; }
.primary { color:#07110f; background:var(--green); box-shadow:0 0 25px #72ff9d33; }
.secondary { color:var(--green); border:1px solid #72ff9d88; background:#10241e; }
.ghost { color:#a8c3b1; border:1px solid #67817355; background:#0b1714cc; }
.microcopy { margin:15px 0 0; color:#789184; font-size:11px; }
.panel-screen { justify-content:center; background:linear-gradient(#07110feF,#07110fF8); }
.screen > :not(.screen-art):not(.screen-art-shade) { z-index:2; }
.panel-screen h2 { margin:0 0 8px; font-size:30px; }
.panel-screen > p:not(.eyebrow) { color:#aac4b2; line-height:1.8; }
.brief-grid { display:grid; gap:10px; width:290px; margin:32px 0; text-align:left; }
.brief-grid span { display:flex; align-items:center; gap:14px; padding:13px; color:#c9d8cd; border:1px solid #44605266; background:#0b1814; font-size:12px; }
.brief-grid i { display:inline-block; width:22px; height:22px; flex:none; }
.vision-icon { background:conic-gradient(from 145deg,#ff5b6e 0 70deg,transparent 70deg); border-radius:50%; }
.hide-icon { border:2px dashed var(--green); border-radius:5px; }
.hush-icon { border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.receipt { width:280px; margin:28px 0; padding:12px 22px; color:#bcd0c2; border-top:1px dashed #6b8876; border-bottom:1px dashed #6b8876; background:#0d1916; }
.receipt p { display:flex; justify-content:space-between; }.receipt strong { color:var(--ink); }
.ending-mark { margin:28px; padding:22px; color:var(--green); border:2px solid var(--green); font-size:38px; font-weight:1000; letter-spacing:.25em; transform:rotate(-4deg); box-shadow:inset 0 0 22px #72ff9d22,0 0 22px #72ff9d22; }
#endingScreen { justify-content:flex-start; padding-top:74px; }
#endingScreen h2 { text-shadow:0 2px 12px #000; }
#endingScreen .ending-mark { margin-top:auto; margin-bottom:12px; padding:14px 20px; background:#020706aa; backdrop-filter:blur(3px); }
#endingScreen > p:not(.eyebrow) { margin:0 0 8px; color:#d5e5da; text-shadow:0 2px 9px #000; }
#hud { position:absolute; z-index:5; top:0; left:0; width:100%; padding:18px 18px 0; pointer-events:none; }
.hud-row { display:flex; justify-content:space-between; align-items:center; padding-right:42px; color:#dff2e4; font:700 11px ui-monospace,monospace; letter-spacing:.1em; }
#coinLabel { color:var(--gold); }
.presence { display:flex; gap:8px; align-items:center; margin-top:9px; }
.presence label { color:#8da99a; font-size:9px; letter-spacing:.12em; }
.presence div { width:120px; height:5px; overflow:hidden; background:#20362c; }
.presence i { display:block; width:0%; height:100%; background:linear-gradient(90deg,var(--green),var(--gold),var(--red)); transition:width .1s; }
.icon-button { pointer-events:auto; position:absolute; top:11px; right:14px; width:34px; height:34px; color:#a9c3b3; border:1px solid #5f756a77; background:#07110fcc; border-radius:50%; font-size:12px; }
#controls { position:absolute; z-index:6; inset:auto 0 17px 0; height:112px; pointer-events:none; }
.joystick { pointer-events:auto; position:absolute; left:26px; bottom:0; width:100px; height:100px; border:1px solid #a1c7ad44; border-radius:50%; background:#10201b99; }
.joystick i { position:absolute; left:31px; top:31px; width:38px; height:38px; border-radius:50%; background:#c8e3d1aa; box-shadow:0 0 12px #000; }
.hush-button { pointer-events:auto; position:absolute; right:28px; bottom:5px; width:88px; height:88px; border-radius:50%; color:#07110f; background:var(--green); box-shadow:0 0 22px #72ff9d44; }
.hush-button span { display:block; font:1000 20px ui-monospace,monospace; }.hush-button small { display:block; font-size:8px; }
.hush-button.pressed { transform:scale(.94); background:#e7fff0; }
#toast { position:absolute; z-index:8; top:75px; left:50%; transform:translateX(-50%) translateY(-10px); width:max-content; max-width:85%; padding:9px 16px; opacity:0; color:#fff; border:1px solid #ff5b6e99; background:#2b1015e8; font-size:12px; font-weight:800; transition:.2s; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.pause-overlay { position:absolute; z-index:10; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#020807e8; }
.pause-overlay[hidden] { display:none; }.pause-overlay h2 { letter-spacing:.2em; }
@media (max-height:700px) { .screen { padding-top:35px; } .title-art-space { min-height:155px; } h1{font-size:54px}.tagline{margin:8px}.brief-grid{margin:18px 0}.ending-mark{margin:15px} #endingScreen{padding-top:35px} #endingScreen .ending-mark{font-size:30px;padding:10px 16px} }
@media (orientation:landscape) and (max-height:600px) { #app { height:100dvh; width:calc(100dvh * .462); } }