:root{color-scheme:dark;--bg:#0b0b0f;--fg:#d8d8e0;--o:#ff7a1a;--g:#39ff88;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
body.flick{filter:invert(1)}
#p404{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
#p404 h1{font-size:clamp(90px,28vw,220px);margin:0;font-weight:800;letter-spacing:-.04em;line-height:1}
#p404 h2{margin:0 0 8px;font-weight:600}
#sub{max-width:420px;color:#9a9aa8;margin:0 0 24px;min-height:3em}
button{font:inherit;cursor:pointer}
#home{background:#3b6cf6;color:#fff;border:0;border-radius:8px;padding:12px 22px}
body.glitch h1{animation:gl .5s infinite steps(2);color:var(--o)}
body.glitch #sub{color:#ff4d4d}
@keyframes gl{0%{text-shadow:4px 0 #0ff,-4px 0 #f0f;transform:skew(0)}50%{text-shadow:-6px 2px #0ff,6px -2px #f0f;transform:skew(6deg) translateX(8px)}100%{text-shadow:2px 0 #0ff,-2px 0 #f0f;transform:skew(-4deg)}}
#term{position:fixed;left:0;right:0;bottom:0;height:62%;background:rgba(0,0,0,.94);border-top:1px solid var(--g);color:var(--g);font:15px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:none;flex-direction:column}
#log{flex:1;overflow:auto}
#log div{margin:2px 0}
.opt{display:block;width:100%;text-align:left;background:none;border:1px solid #1d7a45;color:var(--g);border-radius:6px;padding:10px 12px;margin:6px 0;font:inherit}
.opt:hover,.opt:active{background:#0e2b1b}
#in{display:flex;gap:8px;margin-top:8px}
#in span{color:var(--o)}
#cmd{flex:1;background:none;border:0;outline:0;color:var(--g);font:inherit}
#c{position:fixed;inset:0;width:100%;height:100%;display:none;touch-action:none}
#hud{position:fixed;left:0;right:0;bottom:0;display:none;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}
#hud *{pointer-events:auto}
#mn{font-size:clamp(28px,7vw,48px);font-weight:800;color:var(--o);margin:0}
#mt{margin:0;color:#c9c9d6}
#btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
#btns button{background:var(--o);color:#190a00;border:0;border-radius:8px;padding:11px 18px;font-weight:700}
#btns button.alt{background:#2a2a35;color:#fff}
