:root{font-family:Inter,ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;color:#fff;background:#100b19;--ink:#171022;--orange:#ff7a38;--yellow:#ffc42f;--teal:#23d4c4}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 20%,#392046,#0d0914 72%)}button,input{font:inherit}.game-frame{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.78vw);margin:auto;overflow:hidden;background:#21152e;box-shadow:0 0 80px #000b;touch-action:none;-webkit-user-select:none;user-select:none}.topbar{position:absolute;z-index:30;top:0;left:0;right:0;height:96px;display:grid;grid-template-columns:1fr 1.05fr 1fr;align-items:start;padding:10px 12px;pointer-events:none;background:linear-gradient(#120c1ce8,#120c1caa,transparent)}.brand{width:125px;height:76px;object-fit:contain;justify-self:center;filter:drop-shadow(0 4px 2px #0008)}.stat{min-width:0;padding:9px 11px;background:linear-gradient(145deg,#20152d,#100b19);border:2px solid #69476f;border-radius:12px;box-shadow:0 5px 12px #0008}.stat-right{text-align:right}.stat small{display:block;font-size:10px;font-weight:900;letter-spacing:.6px}.stat strong{display:block;color:var(--yellow);font-size:22px;line-height:1}.sound{pointer-events:auto;position:absolute;right:9px;top:74px;width:37px;height:37px;border:2px solid #fff9;border-radius:11px;background:linear-gradient(#ffca40,#f4881f);font-size:17px}.canvas-wrap,canvas{position:absolute;inset:0;width:100%!important;height:100%!important}.overlay{position:absolute;z-index:50;inset:0;display:none;align-items:center;justify-content:center;padding:22px;background:#100a18d6;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.overlay.show{display:flex}.menu-card,.end-card{width:100%;max-width:360px;text-align:center;padding:24px 20px;border:2px solid #ffbb2e;border-radius:25px;background:linear-gradient(155deg,#241631f5,#100b19f5);box-shadow:0 20px 60px #000c,inset 0 1px #fff2}.eyebrow{font-size:11px;color:var(--yellow);font-weight:1000;letter-spacing:2px}.menu-card h1,.end-card h2{margin:8px 0 3px;font-size:31px;line-height:.95;text-transform:uppercase;text-shadow:0 3px #000}.menu-card p{margin:10px auto 5px;color:#f6dfcd;max-width:280px;font-size:14px}.hero-badge{height:205px;display:flex;align-items:center;justify-content:center}.hero-badge:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(#ffcf62,#f2773b55 60%,transparent 62%)}.hero-badge img{position:relative;width:180px;height:190px;object-fit:contain;filter:drop-shadow(0 12px 8px #0009)}.primary,.secondary{border:0;border-radius:13px;font-weight:1000;text-transform:uppercase;cursor:pointer;touch-action:manipulation}.primary{width:100%;padding:15px;background:linear-gradient(#ffd44e,#ff8b22);color:#241328;box-shadow:0 5px #ae461c,0 9px 15px #0007}.primary:disabled{filter:grayscale(.5);opacity:.65}.secondary{padding:12px 18px;background:#fff1;color:#fff;border:1px solid #fff4}.instructions{display:block;margin-top:18px;color:#e7d9e8;font-weight:800}.countdown{position:absolute;z-index:60;inset:0;display:none;place-items:center;font-size:94px;font-weight:1000;color:#fff;text-shadow:0 6px #7d241b,0 0 30px #ffc329}.countdown.show{display:grid}.countdown.pop{animation:countPop .65s both}@keyframes countPop{0%{transform:scale(1.8);opacity:0}35%{transform:scale(.9);opacity:1}to{transform:scale(1);opacity:1}}.hud-intro .stat,.hud-intro .brand{animation:hudPulse .46s infinite alternate}@keyframes hudPulse{to{filter:drop-shadow(0 0 14px #ffc329) brightness(1.35);transform:scale(1.04)}}.toast{position:absolute;z-index:40;top:116px;left:50%;transform:translate(-50%,-20px) scale(.8);opacity:0;padding:9px 17px;border-radius:999px;background:#191020e8;border:2px solid var(--yellow);font-weight:1000;white-space:nowrap;transition:.2s}.toast.show{opacity:1;transform:translate(-50%) scale(1)}.toast.bad{border-color:#ff5b55;color:#ffaaa6}.result{display:flex;gap:7px;align-items:baseline;justify-content:center;margin:12px}.result strong{font-size:42px;color:var(--yellow)}.result small{font-weight:900}.end-card form{display:grid;gap:10px}.end-card input{width:100%;padding:13px;text-align:center;border:2px solid #ffc42f;border-radius:12px;background:#0d0914;color:#fff;font-weight:900}.save-message{min-height:22px;color:#ffd46a;font-weight:800;font-size:12px}.ranking{margin:12px 0;padding:11px;border-radius:14px;background:#0b0711aa;border:1px solid #ffffff20}.ranking h3{margin:0 0 6px;color:#ffca39;font-size:12px}.ranking ol{list-style-position:inside;margin:0;padding:0;max-height:150px;overflow:auto;text-align:left}.ranking li{display:flex;justify-content:space-between;padding:5px;border-bottom:1px solid #ffffff12;font-size:12px}.ranking li:before{counter-increment:list-item;content:counter(list-item) ".";color:#ffbe2f;margin-right:7px}.ranking li span{flex:1}.end-card{max-height:92vh;overflow:auto}@media(max-height:700px){.topbar{height:76px}.brand{height:58px}.hero-badge{height:145px}.hero-badge img{width:135px;height:145px}.menu-card h1{font-size:25px}.menu-card{padding:18px}.sound{top:57px}}.game-frame{--yellow:#ffcc36}.menu-brand,.end-brand{display:block;width:156px;height:82px;object-fit:contain;margin:-8px auto 5px;filter:drop-shadow(0 5px 4px #0009)}.end-brand{width:132px;height:68px;margin:-12px auto 4px}