:root{--cyan:#50e7ff;--orange:#ff8b38;--ink:#050912;--panel:rgba(8,15,28,.88);--line:rgba(130,210,255,.22)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#03060b;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;touch-action:none;user-select:none}
button{font:inherit;color:inherit}
#game{position:relative;width:100%;height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 35%,#15253b 0,#070c15 45%,#020409 100%)}
#canvas{position:absolute;inset:0;width:100%;height:100%}
.hud{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 14px 8px;background:linear-gradient(#03070dd9,transparent)}
.brand{display:flex;align-items:center;gap:8px;font-size:9px;line-height:1.05;letter-spacing:1.8px;color:#9ba9b9}.brand b{color:#fff}.brand-mark{display:grid;place-items:center;width:33px;height:33px;background:linear-gradient(145deg,var(--cyan),#147498);clip-path:polygon(50% 0,94% 23%,94% 75%,50% 100%,6% 75%,6% 23%);font-weight:900;color:#06111b;font-size:18px}
.stats{display:flex;gap:18px;text-align:center}.stats div{min-width:56px}.stats span,.next-panel>span{display:block;color:#8090a2;font-size:8px;letter-spacing:1.7px;font-weight:800}.stats strong{display:block;font-size:20px;line-height:1.1;font-weight:900;text-shadow:0 0 18px rgba(80,231,255,.35)}
.icon-btn,.zoom-panel button{border:1px solid var(--line);background:#08111dbb;backdrop-filter:blur(8px);border-radius:10px;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.icon-btn{width:38px;height:38px;font-weight:900}
.level-pill{position:absolute;z-index:4;top:75px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:#07101bcc;color:#8c9bab;font-size:9px;letter-spacing:1.2px}.level-pill b{color:var(--cyan)}
.zoom-panel{position:absolute;z-index:5;left:12px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}.zoom-panel button{width:42px;height:42px;font-size:20px}
.next-panel{position:absolute;z-index:5;right:10px;top:50%;transform:translateY(-38%);width:92px;padding:10px 6px;border:1px solid rgba(80,231,255,.2);border-radius:16px;background:linear-gradient(145deg,rgba(9,21,35,.9),rgba(3,8,15,.72));text-align:center;box-shadow:0 18px 50px #0008,0 0 30px rgba(80,231,255,.05);pointer-events:none}
.next-panel canvas{display:block;width:80px;height:62px;margin:3px auto}.next-panel small{font-size:7px;letter-spacing:1.1px;color:var(--cyan);font-weight:900}
.next-panel.ready{animation:readyPulse 1.5s infinite}.next-panel.dragging{border-color:var(--cyan);box-shadow:0 0 32px rgba(80,231,255,.25)}
.combo{position:absolute;z-index:4;left:50%;top:26%;transform:translate(-50%,-50%) scale(.8);opacity:0;color:#fff;font-size:22px;font-weight:1000;font-style:italic;text-shadow:0 0 12px var(--cyan),0 3px #0c6982;transition:.2s}.combo.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.warning{position:absolute;z-index:4;left:50%;bottom:13%;transform:translateX(-50%);opacity:0;color:#ffb65d;font-size:10px;font-weight:900;letter-spacing:1.5px;text-shadow:0 0 14px #f80;transition:.2s}.warning.show{opacity:1}
.overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 32%,rgba(18,38,62,.78),rgba(2,5,10,.96));opacity:0;visibility:hidden;transition:.28s}
.overlay.active{opacity:1;visibility:visible}
.panel{width:min(92vw,430px);padding:34px 24px 24px;border:1px solid rgba(110,205,255,.2);border-radius:28px;background:linear-gradient(145deg,rgba(10,20,34,.96),rgba(4,8,15,.94));text-align:center;box-shadow:0 30px 90px #000,inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(16px)}
.panel.compact{padding-top:28px}
.logo-cube{position:relative;width:74px;height:67px;margin:0 auto 16px;transform:rotate(-5deg)}.logo-cube i{position:absolute;display:block;background:linear-gradient(145deg,#75efff,#147899);filter:drop-shadow(0 0 10px #32badc)}.logo-cube i:nth-child(1){width:52px;height:42px;left:11px;top:0;clip-path:polygon(50% 0,100% 27%,50% 55%,0 27%)}.logo-cube i:nth-child(2){width:52px;height:49px;left:11px;top:13px;clip-path:polygon(0 0,50% 28%,50% 100%,0 72%);background:linear-gradient(#3cbdd6,#116079)}.logo-cube i:nth-child(3){width:52px;height:49px;left:37px;top:13px;clip-path:polygon(0 28%,50% 0,50% 72%,0 100%);background:linear-gradient(#1685a5,#0d4861)}
.eyebrow{margin:0 0 9px;color:var(--cyan);font-size:9px;letter-spacing:3px;font-weight:900}.eyebrow.danger{color:var(--orange)}
h1,h2{margin:0;font-size:clamp(35px,10vw,58px);line-height:.91;letter-spacing:-2.5px;font-weight:1000;font-style:italic}h1 em{color:transparent;-webkit-text-stroke:1px var(--cyan);text-shadow:0 0 24px rgba(80,231,255,.22)}h2{font-size:38px}
.lead{max-width:310px;margin:20px auto 24px;color:#a6b0be;font-size:13px;line-height:1.55}
.primary,.secondary{width:100%;height:54px;margin-top:10px;border-radius:12px;font-size:12px;font-weight:1000;letter-spacing:1.3px;cursor:pointer}
.primary{border:0;background:linear-gradient(120deg,#45e8ff,#159ab9);color:#041015;box-shadow:0 8px 30px rgba(54,210,240,.27)}.primary span{float:right;font-size:23px;line-height:10px}
.secondary{border:1px solid var(--line);background:rgba(255,255,255,.03);color:#c2ccd8}
.micro,.keys{margin:17px 0 0;color:#637285;font-size:8px;letter-spacing:.8px}
.instructions{margin:22px 0;text-align:left}.instructions div{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}.instructions b{display:grid;place-items:center;min-width:34px;height:34px;border:1px solid rgba(80,231,255,.3);border-radius:10px;color:var(--cyan)}.instructions p{margin:0;color:#8f9bac;font-size:11px}.instructions strong{display:block;color:#fff;font-size:10px;letter-spacing:1px}
.result{margin:22px auto 8px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#050a12}.result span{display:block;color:#7d8998;font-size:9px;letter-spacing:2px}.result strong{display:block;color:var(--cyan);font-size:50px;line-height:1}.record{height:20px;color:#ffc46b;font-size:10px;font-weight:900;letter-spacing:1px}
@keyframes readyPulse{50%{transform:translateY(-38%) scale(1.035);border-color:rgba(80,231,255,.55)}}
@media (min-width:700px){.hud{padding:18px 24px}.next-panel{right:28px;width:112px}.next-panel canvas{width:96px;height:70px}.zoom-panel{left:24px}.panel{padding:38px}.level-pill{top:22px}.stats strong{font-size:25px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}