:root { --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); --ink:#f4f1e8; --acid:#bafc72; --gold:#ffd761; --red:#ff697d; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; position:fixed; background:#090b18; color:var(--ink); font-family:Inter,ui-rounded,system-ui,sans-serif; user-select:none; -webkit-user-select:none; }
button,a { font:inherit; }
#shell { position:fixed; inset:0; overflow:hidden; background:#090b18; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:default; }
.hidden { display:none!important; }
#hud { position:absolute; z-index:5; left:calc(8px + var(--safe-left)); top:calc(8px + var(--safe-top)); width:122px; display:grid; grid-template-columns:1fr 1fr; gap:4px; pointer-events:none; }
#hud>div { min-height:36px; padding:4px 5px; border:1px solid rgba(194,246,211,.15); border-radius:9px; background:rgba(5,8,17,.77); text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.25); backdrop-filter:blur(7px); }
#hud .battery { grid-column:1 / 3; min-height:38px; }
#hud>div:first-child { grid-column:1; grid-row:1; }#hud>div:nth-child(3) { grid-column:2; grid-row:1; }#hud .battery { grid-row:2; }
#hud small,.final small,.stats small { display:block; color:rgba(236,244,237,.52); font-size:9px; font-weight:900; letter-spacing:.13em; }
#hud strong { display:block; margin-top:0; font-size:15px; }
.battery span { display:inline-block; width:67%; height:7px; margin:3px 4px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:8px; vertical-align:middle; background:#151a23; }
.battery i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#69dc82,var(--acid)); box-shadow:0 0 8px rgba(186,252,114,.55); transition:width .14s; }
.battery b { color:var(--acid); font-size:10px; vertical-align:middle; }
.combo,.message { position:absolute; z-index:6; left:50%; translate:-50% 0; pointer-events:none; font-weight:1000; letter-spacing:.1em; text-align:center; text-shadow:0 3px 10px #000; }
.combo { top:calc(73px + var(--safe-top)); color:var(--gold); font-size:11px; }.combo b{font-size:17px;}
.message { top:calc(102px + var(--safe-top)); padding:6px 12px; border:1px solid rgba(186,252,114,.28); border-radius:999px; background:rgba(5,12,12,.78); color:var(--acid); font-size:11px; animation:pop .18s ease-out; }
.exit { position:absolute; z-index:7; right:calc(12px + var(--safe-right)); top:calc(10px + var(--safe-top)); width:42px; height:42px; padding:0 0 3px; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(5,8,17,.76); color:#fff; font-size:25px; }
.overlay { position:absolute; z-index:20; inset:0; display:grid; place-items:center; padding:calc(18px + var(--safe-top)) calc(18px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left)); background:radial-gradient(circle at 50% 40%,rgba(23,45,50,.56),rgba(3,4,11,.89)); backdrop-filter:blur(8px); }
.panel { width:min(410px,100%); max-height:94vh; overflow:auto; padding:24px; border:1px solid rgba(188,232,203,.17); border-radius:24px 24px 18px 18px; background:linear-gradient(155deg,rgba(24,40,43,.97),rgba(9,11,23,.98)); box-shadow:0 28px 75px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.06); text-align:center; }
.logoGhost { position:relative; width:86px; height:81px; margin:0 auto 8px; border-radius:50% 50% 16% 16%; background:linear-gradient(#dfffe0,#8ed3b1); filter:drop-shadow(0 0 18px rgba(151,255,190,.28)); animation:float 2s ease-in-out infinite alternate; }
.logoGhost:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:22px; background:linear-gradient(135deg,transparent 25%,#8ed3b1 26% 50%,transparent 51% 75%,#8ed3b1 76%); background-size:42px 22px; }
.logoGhost i { position:absolute; inset:18px 19px auto; height:31px; border-radius:50%; background:#182b2e; }
.logoGhost span { position:absolute; z-index:2; left:0; right:0; top:17px; color:var(--acid); font-size:23px; letter-spacing:8px; padding-left:8px; }
.eyebrow { margin:12px 0 5px!important; color:var(--acid)!important; font-size:10px; font-weight:1000; letter-spacing:.18em; }
h1 { margin:4px 0 14px; font-size:clamp(40px,13vw,58px); line-height:.84; letter-spacing:-.065em; } h1 span{display:block;color:#96d8b0;}
h2 { margin:8px 0 15px; letter-spacing:.04em; }
.panel p { color:rgba(239,244,239,.7); line-height:1.48; }
.best { display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px; padding:12px 15px; border-radius:13px; background:rgba(0,0,0,.25); }
.best span { color:rgba(255,255,255,.5); font-size:10px; font-weight:900; letter-spacing:.13em; }.best strong{color:var(--gold);font-size:25px;}
.primary,.secondary { display:grid; width:100%; min-height:50px; margin-top:10px; place-items:center; border-radius:14px; font-weight:1000; letter-spacing:.06em; text-decoration:none; cursor:pointer; }
.primary { border:0; background:linear-gradient(#c9ff88,#83d668); color:#102015; box-shadow:0 6px 0 #427d48,0 11px 24px rgba(0,0,0,.28); }.primary:active{translate:0 4px;box-shadow:0 2px 0 #427d48;}
.fullscreenHint { margin:9px 8px 0!important; color:rgba(239,244,239,.5)!important; font-size:11px; line-height:1.35!important; }
.controlSummary { margin:14px 0 4px; padding:9px 10px; border:1px solid rgba(186,252,114,.16); border-radius:11px; background:rgba(186,252,114,.06); color:rgba(217,255,225,.76); font-size:10px; font-weight:1000; letter-spacing:.1em; }
.secondary { border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.045); color:#fff; }
.howList { display:grid; gap:8px; margin:12px 0; text-align:left; }
.howList>div { display:grid; grid-template-columns:31px 1fr; gap:10px; align-items:start; padding:10px; border-radius:12px; background:rgba(0,0,0,.22); }
.howList>div>b { display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(186,252,114,.32); border-radius:50%; color:var(--acid); font-size:13px; }
.howList p { margin:0!important; line-height:1.3!important; }.howList strong{display:block;margin-bottom:3px;color:#eaffee;font-size:10px;letter-spacing:.14em}.howList span{display:block;color:rgba(239,244,239,.68);font-size:12px}
.huntTip { margin:9px 2px!important; padding:8px 10px; border-left:2px solid var(--gold); background:rgba(255,215,97,.055); font-size:11px; text-align:left; line-height:1.4!important; }.huntTip b{color:var(--gold);font-size:9px;letter-spacing:.12em}
#buttonControls { position:absolute; z-index:8; inset:0; display:none; pointer-events:none; }
#buttonControls.visible { display:block; }
#cursorPad { position:absolute; left:calc(20px + var(--safe-left)); bottom:calc(20px + var(--safe-bottom)); width:100px; height:100px; border:3px solid rgba(232,255,240,.55); border-radius:50%; background:radial-gradient(circle,rgba(186,252,114,.07) 0 32%,rgba(5,8,17,.62) 33%); box-shadow:0 6px 22px rgba(0,0,0,.42),inset 0 0 0 8px rgba(255,255,255,.025); pointer-events:auto; touch-action:none; }
#cursorPad::before,#cursorPad::after { content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; border:solid rgba(255,255,255,.45); transform:translate(-50%,-50%) rotate(45deg); }
#cursorPad::before { width:62px; height:0; border-width:1px 0 0; }#cursorPad::after { width:0; height:62px; border-width:0 0 0 1px; }
#cursorKnob { position:absolute; z-index:1; left:50%; top:50%; width:38px; height:38px; translate:-50% -50%; border:2px solid rgba(255,255,255,.68); border-radius:50%; background:linear-gradient(#bafc72,#60a75e); box-shadow:0 4px 11px rgba(0,0,0,.42); }
#lightButton { position:absolute; right:calc(26px + var(--safe-right)); bottom:calc(36px + var(--safe-bottom)); width:70px; height:70px; padding:0; border:2px solid rgba(255,255,255,.65); border-radius:50%; background:linear-gradient(#ffe888,#c9a53d); color:#271e08; box-shadow:0 6px 0 #796421,0 10px 20px rgba(0,0,0,.38); font-size:10px; font-weight:1000; pointer-events:auto; touch-action:none; }
#lightButton span { display:block; font-size:25px; line-height:.8; }#lightButton.pressed { translate:0 4px; box-shadow:0 2px 0 #796421; }
#spaceLight { position:absolute; z-index:8; right:calc(18px + var(--safe-right)); bottom:calc(18px + var(--safe-bottom)); min-width:64px; padding:6px 9px 7px; border:1px solid rgba(255,245,174,.58); border-radius:9px; background:rgba(112,88,22,.72); color:#fff0a4; box-shadow:0 3px 12px rgba(0,0,0,.32); pointer-events:none; opacity:.72; transition:background .08s,box-shadow .08s,opacity .08s,transform .08s; }
#spaceLight kbd,#spaceLight span { display:block; font-family:inherit; font-weight:1000; line-height:1; }
#spaceLight kbd { font-size:9px; letter-spacing:.12em; } #spaceLight span { margin-top:4px; font-size:8px; letter-spacing:.16em; }
#spaceLight.lit { background:#f4c94d; color:#302405; box-shadow:0 0 18px rgba(255,215,97,.72); opacity:1; transform:translateY(2px); }
.desktopDpad { position:absolute; z-index:8; left:calc(18px + var(--safe-left)); bottom:calc(18px + var(--safe-bottom)); width:100px; display:grid; grid-template-columns:repeat(3,30px); grid-template-rows:repeat(2,30px); gap:4px; opacity:.68; pointer-events:none; }
.desktopDpad kbd { display:grid; grid-template-columns:1fr; place-items:center; border:1px solid rgba(232,255,240,.28); border-radius:7px; background:rgba(5,8,17,.7); color:rgba(255,255,255,.74); font:900 10px/1 system-ui; box-shadow:0 3px 9px rgba(0,0,0,.25); transition:background .06s,color .06s,box-shadow .06s,transform .06s; }
.desktopDpad kbd span { font-size:8px; color:rgba(186,252,114,.65); }.desktopDpad [data-direction="up"]{grid-column:2}.desktopDpad [data-direction="left"]{grid-column:1;grid-row:2}.desktopDpad [data-direction="down"]{grid-column:2;grid-row:2}.desktopDpad [data-direction="right"]{grid-column:3;grid-row:2}
.desktopDpad kbd.lit { background:var(--acid); color:#102015; box-shadow:0 0 14px rgba(186,252,114,.62); transform:translateY(2px); }.desktopDpad kbd.lit span{color:#31552d}
@media(pointer:fine){#hud{left:50%;top:calc(10px + var(--safe-top));width:min(430px,calc(100% - 150px));translate:-50% 0;grid-template-columns:92px 1fr 92px;gap:7px}#hud>div{min-height:45px;padding:6px 8px}#hud>div:first-child{grid-column:1;grid-row:1}#hud .battery{grid-column:2;grid-row:1;min-height:45px}#hud>div:nth-child(3){grid-column:3;grid-row:1}#hud small{font-size:9px}#hud strong{font-size:18px}.battery span{width:70%;height:8px}.exit{display:none!important}}
.flashDemo { width:86px; height:86px; margin:0 auto; display:grid; place-items:center; border:2px solid var(--acid); border-radius:50%; box-shadow:0 0 0 12px rgba(186,252,114,.05),0 0 35px rgba(186,252,114,.18); }.flashDemo span{font-size:42px;color:var(--gold);}
.final { margin:14px 0 18px; }.final strong{display:block;color:var(--gold);font-size:56px;line-height:1;}
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.stats div{padding:11px 4px;border-radius:11px;background:rgba(0,0,0,.23);}.stats strong{display:block;margin-bottom:3px;font-size:19px;color:#d9ffe1;}
.newBest { margin:12px 0 2px; color:var(--gold); font-weight:1000; letter-spacing:.12em; animation:pulse .7s ease-in-out infinite alternate; }
#rotate { position:absolute; z-index:40; inset:0; display:grid; place-items:center; padding:20px; background:#090b18; text-align:center; }
#rotate .phone { width:34px; height:58px; margin:0 auto 18px; border:3px solid var(--acid); border-radius:8px; box-shadow:0 0 24px rgba(186,252,114,.25); animation:tilt 1.7s ease-in-out infinite; }
#rotate h3 { margin:0 0 6px; font-size:19px; letter-spacing:.08em; }
#rotate p { margin:0; color:rgba(239,244,239,.65); font-size:13px; }
@keyframes tilt{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@keyframes float{to{transform:translateY(-7px) rotate(2deg)}} @keyframes pulse{to{transform:scale(1.06)}} @keyframes pop{from{transform:scale(.8);opacity:.3}}
@media(pointer:coarse){#game{cursor:default}} @media(max-height:640px){.panel{padding:14px 18px}.logoGhost{width:58px;height:55px}.logoGhost i{inset:12px 13px auto;height:22px}.logoGhost span{top:10px;font-size:17px}h1{font-size:40px}.panel p{margin:7px 0;font-size:12px}.best{margin:9px 0 4px}.primary,.secondary{min-height:43px}.howList{gap:5px;margin:7px 0}.howList>div{padding:7px}.huntTip{margin:6px 2px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important}}