:root{--cyan:#36f7ff;--cyan2:#7afcff;--red:#ff3b6b;--bg:#020611;--glass:rgba(5,16,32,.58);--line:rgba(122,252,255,.28);--text:#e8fbff;--muted:#8ea9b8;--gold:#ffe08a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 15%,#07182a 0,#020611 48%,#000 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}button{font:inherit;color:inherit}.game-shell{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#020611;touch-action:none}.game-shell:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 20%,rgba(54,247,255,.10),transparent 27%),radial-gradient(circle at 15% 85%,rgba(255,59,107,.07),transparent 22%);filter:blur(20px);pointer-events:none}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#020611}.hidden{display:none!important}.hud{position:absolute;z-index:5;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;justify-content:space-between;gap:10px;padding:12px;pointer-events:none}.hud-left,.hud-right{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}.hud span,.icon-btn,.chip{border:1px solid var(--line);background:linear-gradient(180deg,rgba(11,31,52,.74),rgba(3,9,19,.48));box-shadow:0 8px 30px rgba(0,0,0,.25),inset 0 0 18px rgba(54,247,255,.05);backdrop-filter:blur(14px);border-radius:999px;padding:8px 11px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#dffcff}.hud b{color:var(--cyan2)}.icon-btn{pointer-events:auto;cursor:pointer;min-width:38px;min-height:36px;padding:8px 10px;transition:.18s transform,.18s border-color,.18s box-shadow}.icon-btn:hover,.primary:hover,.secondary:hover,.pulse-btn:hover,.chip:hover{transform:translateY(-1px);border-color:rgba(122,252,255,.66);box-shadow:0 0 24px rgba(54,247,255,.16),inset 0 0 18px rgba(54,247,255,.06)}.overlay{position:absolute;z-index:6;inset:0;display:grid;place-items:center;padding:22px;pointer-events:auto}.panel{width:min(560px,94vw);border:1px solid rgba(122,252,255,.25);border-radius:28px;padding:28px;background:linear-gradient(180deg,rgba(6,24,43,.76),rgba(2,6,17,.66));box-shadow:0 30px 100px rgba(0,0,0,.65),inset 0 0 50px rgba(54,247,255,.035);backdrop-filter:blur(18px);text-align:center;animation:rise .35s ease both}.panel.wide{width:min(780px,96vw)}@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}.eyebrow{color:var(--cyan);letter-spacing:.24em;text-transform:uppercase;font-size:12px;margin:0 0 10px}.title{font-size:clamp(44px,11vw,76px);line-height:.9;margin:0;text-shadow:0 0 24px rgba(54,247,255,.5),0 0 64px rgba(54,247,255,.14);letter-spacing:.02em}.subtitle{color:#b9d7e4;font-size:15px;line-height:1.5;margin:16px auto 20px;max-width:470px}.button-row{display:grid;gap:11px;margin-top:18px}.primary,.secondary{width:100%;border:1px solid rgba(122,252,255,.34);border-radius:18px;padding:14px 16px;background:linear-gradient(135deg,rgba(23,241,255,.23),rgba(4,18,34,.64));box-shadow:0 10px 35px rgba(0,0,0,.28);cursor:pointer;transition:.16s transform,.16s box-shadow,.16s border-color}.primary{color:#efffff;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.secondary{background:rgba(4,18,34,.48);color:#d6f7ff}.meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:16px}.meta span{border:1px solid rgba(122,252,255,.18);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.03)}.how{text-align:left;display:grid;gap:12px;margin:18px 0}.how p{margin:0;padding:12px 14px;border:1px solid rgba(122,252,255,.16);border-radius:16px;background:rgba(255,255,255,.035);color:#cfe8ef}.leaderboard{margin-top:14px;text-align:left;max-height:52vh;overflow:auto}.leader-row{display:grid;grid-template-columns:44px 1fr 82px 70px;gap:8px;align-items:center;padding:10px 8px;border-bottom:1px solid rgba(122,252,255,.12);font-size:13px}.leader-row:first-child{color:var(--cyan2)}.empty{padding:22px;color:#9fb7c0;text-align:center;border:1px dashed rgba(122,252,255,.18);border-radius:18px}.mobile-controls{position:absolute;z-index:5;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0));display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}.mobile-controls button{pointer-events:auto}.pulse-btn{width:116px;height:116px;border-radius:50%;border:1px solid rgba(122,252,255,.62);background:radial-gradient(circle,rgba(122,252,255,.28),rgba(5,17,32,.78));box-shadow:0 0 45px rgba(54,247,255,.26),inset 0 0 26px rgba(122,252,255,.16);color:#efffff;font-weight:900;letter-spacing:.1em}.chip{min-width:78px;height:54px}.ghost{opacity:.64}.toast{position:absolute;left:50%;top:16%;transform:translateX(-50%);z-index:8;background:rgba(1,8,16,.72);border:1px solid rgba(122,252,255,.28);padding:10px 14px;border-radius:999px;color:#cfffff;box-shadow:0 0 30px rgba(54,247,255,.12);animation:toast 1.45s ease both}@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}@media(max-width:720px){.hud{padding:8px;align-items:flex-start}.hud span{font-size:10px;padding:7px 8px}.hud-left,.hud-right{gap:5px}.icon-btn{min-width:34px;min-height:32px;padding:6px}.panel{padding:22px 18px;border-radius:24px}.subtitle{font-size:14px}.mobile-controls{display:flex}.title{font-size:clamp(42px,14vw,64px)}}@media(pointer:fine){.mobile-controls{display:none!important}}
.rotate-screen{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 16%,rgba(54,247,255,.16),transparent 44%),var(--bg,#020611);color:var(--text,#e8fbff);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@media(orientation:portrait){body.touch-device .rotate-screen{display:flex}}
.rotate-phone{font-size:clamp(56px,18vw,104px);filter:drop-shadow(0 6px 18px rgba(54,247,255,.5));animation:rotateHint 2.2s ease-in-out infinite}
.rotate-title{margin:14px 0 0;font-size:clamp(22px,7vw,36px);font-weight:900;color:var(--cyan2,#7afcff)}
.rotate-sub{margin:8px 0 0;font-size:clamp(13px,4vw,17px);color:var(--muted,#8ea9b8)}
@keyframes rotateHint{0%,45%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}