:root{--hud-bg: rgba(3, 12, 22, .52);--hud-border: rgba(112, 244, 255, .42);--hud-text: #d9fbff;--hud-muted: #8ec5cf;--accent-cyan: #53e8ff;--accent-orange: #ffb767;--accent-lime: #b6ff64}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Orbitron,Rajdhani,Trebuchet MS,sans-serif;color:var(--hud-text);background:radial-gradient(circle at 20% 15%,#153847,#07131d 40%,#02050a)}#app{position:fixed;top:0;right:0;bottom:0;left:0}#game-canvas{position:relative;z-index:0;width:100%;height:100%;display:block;touch-action:none}.hud{z-index:12;position:absolute;top:1rem;left:50%;transform:translate(-50%);width:min(92vw,720px);padding:.75rem 1rem;border:1px solid var(--hud-border);border-radius:14px;background:linear-gradient(120deg,#030a13c7,#091b2494);box-shadow:0 0 0 1px #81f7ff1f,0 16px 38px #00000075;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;animation:hud-in .7s ease-out}.hud__scoreline{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:clamp(.9rem,2.1vw,1.1rem);color:var(--hud-text);letter-spacing:.05em}.hud__scoreline strong{color:var(--accent-cyan);text-shadow:0 0 12px rgba(83,232,255,.8)}.hud__bonus{margin-top:.4rem;font-size:clamp(.72rem,1.7vw,.9rem);text-transform:uppercase;letter-spacing:.06em;color:var(--hud-muted)}.overlay{z-index:14;position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1.4rem;pointer-events:none;transition:opacity .35s ease}.overlay--hidden{opacity:0}.overlay__panel{width:min(92vw,560px);padding:1.4rem 1.5rem;border:1px solid rgba(115,241,255,.38);border-radius:18px;background:radial-gradient(circle at 85% 0%,rgba(83,232,255,.17),transparent 45%),linear-gradient(140deg,#02080ee0,#091924c2);box-shadow:0 26px 70px #0000009e,inset 0 0 55px #54e6ff0f;text-align:center;pointer-events:auto;opacity:1;animation:none}.overlay__panel h1,.overlay__panel h2{margin:0;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.overlay__panel h1{color:var(--accent-cyan);font-size:clamp(1.7rem,6vw,2.4rem);text-shadow:0 0 18px rgba(83,232,255,.65)}.overlay__panel h2{color:var(--accent-orange);font-size:clamp(1.4rem,5vw,2rem);text-shadow:0 0 14px rgba(255,183,103,.55)}.overlay__panel p{margin:.85rem 0 0;line-height:1.45;color:#d8f6ff;font-size:clamp(.92rem,2.2vw,1.02rem)}.overlay__panel strong{color:var(--accent-lime)}.overlay__keys{margin-top:1rem;display:grid;gap:.45rem;color:#9fd7e2;font-size:clamp(.82rem,1.9vw,.95rem)}.overlay__button{margin-top:1.1rem;border:1px solid rgba(112,244,255,.52);border-radius:12px;background:linear-gradient(120deg,#104256d9,#0b1c28f2);color:#d9fbff;font-family:inherit;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;padding:.65rem 1.15rem;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease}.overlay__button:hover{transform:translateY(-1px);box-shadow:0 8px 24px #53e8ff38;border-color:#96f5ffcc}.overlay__button:active{transform:translateY(0)}.overlay__toast{min-width:min(88vw,420px);padding:.78rem 1.05rem;border:1px solid rgba(123,255,219,.55);border-radius:12px;background:linear-gradient(130deg,#0a2a24db,#081624cc);color:#d9fff4;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.74rem,1.8vw,.9rem);box-shadow:0 8px 30px #00000073,0 0 18px #60ffd333;pointer-events:none;animation:panel-pop .22s ease-out}@keyframes panel-pop{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes hud-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.overlay__panel--final{position:relative;overflow:hidden;border-color:#ffd7709e;background:radial-gradient(circle at 20% 0%,rgba(255,183,103,.24),transparent 44%),radial-gradient(circle at 85% 100%,rgba(83,232,255,.2),transparent 48%),linear-gradient(140deg,#0a0e1beb,#171f32d6);box-shadow:0 30px 80px #000000a8,0 0 28px #ffc55f3d,inset 0 0 60px #74bfff1a;animation:final-panel-glow 2.8s ease-in-out infinite}.overlay__panel--final h2{color:#ffd38a;text-shadow:0 0 18px rgba(255,190,94,.72)}.overlay__celebration{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.overlay__celebration span{position:absolute;width:8px;height:8px;border-radius:999px;opacity:.78;animation:confetti-rise 2.2s linear infinite}.overlay__celebration span:nth-child(1){left:8%;bottom:-12px;background:#7ee4ff;animation-delay:0s}.overlay__celebration span:nth-child(2){left:24%;bottom:-8px;background:#ffcf7b;animation-delay:.28s}.overlay__celebration span:nth-child(3){left:41%;bottom:-10px;background:#97ff90;animation-delay:.52s}.overlay__celebration span:nth-child(4){left:59%;bottom:-9px;background:#ffd39e;animation-delay:.84s}.overlay__celebration span:nth-child(5){left:77%;bottom:-12px;background:#9ec1ff;animation-delay:1.1s}.overlay__celebration span:nth-child(6){left:92%;bottom:-8px;background:#66f2d2;animation-delay:1.34s}@keyframes final-panel-glow{0%{box-shadow:0 30px 80px #000000a8,0 0 20px #ffc55f33,inset 0 0 48px #74bfff14}50%{box-shadow:0 34px 88px #000000b3,0 0 30px #ffda8559,inset 0 0 66px #74bfff29}to{box-shadow:0 30px 80px #000000a8,0 0 20px #ffc55f33,inset 0 0 48px #74bfff14}}@keyframes confetti-rise{0%{transform:translateY(0) scale(.7);opacity:0}20%{opacity:.85}80%{opacity:.7}to{transform:translateY(-190px) scale(1.15);opacity:0}}