*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#fff;overflow:hidden;touch-action:none}#app{width:100vw;height:100vh;position:relative}.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.hidden{display:none!important}#title-screen{background:linear-gradient(135deg,#1a1a2e,#16213e)}#title-screen h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(45deg,#f39c12,#e74c3c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#title-screen .subtitle{font-size:1rem;color:#888;margin-bottom:2rem}#title-screen .hint{font-size:.8rem;color:#666;margin-top:2rem}.btn-primary{padding:1rem 3rem;font-size:1.2rem;font-weight:700;border:none;border-radius:50px;background:linear-gradient(45deg,#f39c12,#e74c3c);color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-primary:active{transform:scale(.95)}.btn-secondary{padding:.8rem 2rem;font-size:1rem;font-weight:700;border:2px solid #3498db;border-radius:50px;background:transparent;color:#3498db;cursor:pointer;transition:all .2s;margin-bottom:1rem}.btn-secondary:active{background:#3498db;color:#fff}.btn-secondary.enabled{background:#2ecc71;border-color:#2ecc71;color:#fff}.status{font-size:.9rem;margin-bottom:1rem;min-height:1.2em}.status.success{color:#2ecc71}.status.error{color:#e74c3c}.status.info{color:#3498db}#game-screen{padding:0}#game-canvas{width:100%;height:100%;display:block}#hud{position:absolute;top:0;left:0;right:0;padding:.5rem;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:10}#scoreboard{display:flex;background:#000000b3;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.frame{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.2);min-width:28px}.frame:last-child{border-right:none}.frame-10{min-width:42px}.frame-number{font-size:.6rem;color:#888;text-align:center;padding:2px 0;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.throws{display:flex;justify-content:flex-end;min-height:18px;border-bottom:1px solid rgba(255,255,255,.1)}.throws span{font-size:.7rem;font-weight:700;width:14px;text-align:center;padding:2px 0;color:#fff}.throws span.strike{color:#e74c3c}.throws span.spare{color:#2ecc71}.throws .t1,.frame-10 .throws .t2{border-right:1px solid rgba(255,255,255,.1)}.frame-score{font-size:.8rem;font-weight:700;text-align:center;padding:3px 2px;color:#f39c12;min-height:20px}.frame.current{background:#f39c1233}.frame.completed .frame-score{color:#fff}#speed-gauge{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);width:80%;max-width:300px;height:20px;background:#00000080;border-radius:10px;overflow:hidden;z-index:10}#speed-bar{height:100%;width:0%;background:linear-gradient(90deg,#2ecc71,#f39c12,#e74c3c);transition:width .1s;border-radius:10px}#speed-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5)}#message-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:20;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.1)}}#status-effects{position:absolute;top:70px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:15}.effect-badge{padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);animation:effectPulse .5s ease-in-out infinite alternate}#effect-reverse{background:linear-gradient(45deg,#f06,#f0f);color:#fff}#effect-shrink{background:linear-gradient(45deg,#ff69b4,#ff1493);color:#fff}#effect-giant{background:linear-gradient(45deg,#9b59b6,#8e44ad);color:#fff}#effect-slow{background:linear-gradient(45deg,#00bcd4,#0097a7);color:#fff}#effect-speed{background:linear-gradient(45deg,#ff9800,#f57c00);color:#fff}#effect-slip{background:linear-gradient(45deg,#03a9f4,#0288d1);color:#fff}#effect-chaos{background:linear-gradient(45deg,#e91e63,#c2185b);color:#fff;animation:chaosShake .1s infinite}#effect-shield{background:linear-gradient(45deg,#2196f3,#1976d2);color:#fff}@keyframes effectPulse{0%{transform:scale(1);opacity:1}to{transform:scale(1.05);opacity:.9}}@keyframes chaosShake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}#zone-warning{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;border-radius:10px;font-size:1.5rem;font-weight:700;text-align:center;z-index:18;animation:zoneWarningPulse .3s ease-in-out infinite alternate;pointer-events:none}#zone-warning.shrink-zone{background:#ff69b4cc;border:3px solid #ff1493;color:#fff}#zone-warning.giant-zone{background:#9b59b6cc;border:3px solid #8e44ad;color:#fff}#zone-warning.speed-zone{background:#ff9800cc;border:3px solid #f57c00;color:#fff}#zone-warning.slip-zone{background:#03a9f4cc;border:3px solid #0288d1;color:#fff}#zone-warning.chaos-zone{background:#e91e63cc;border:3px solid #c2185b;color:#fff;animation:chaosShake .1s infinite,zoneWarningPulse .3s ease-in-out infinite alternate}#zone-warning.bomb-zone{background:#ff5722cc;border:3px solid #e64a19;color:#fff}@keyframes zoneWarningPulse{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.1)}}#result-screen{background:#000000e6}#result-scoreboard{position:absolute;top:1rem;left:50%;transform:translate(-50%)}#result-screen h2{font-size:1.5rem;margin-bottom:.5rem}#pins-knocked{font-size:3rem;font-weight:700;margin:.5rem 0;color:#f39c12}#total-score-display{font-size:1.2rem;color:#fff;margin:.5rem 0}#result-total{font-weight:700;color:#f39c12}#next-frame-btn{margin-top:1.5rem}@media(max-width:480px){#title-screen h1{font-size:2rem}#speed-gauge{bottom:1rem;height:16px}.frame{min-width:24px}.frame-10{min-width:36px}.frame-number{font-size:.5rem}.throws span{font-size:.6rem;width:12px}.frame-score{font-size:.65rem;padding:2px 1px}#pins-knocked{font-size:2.5rem}}@media(max-width:360px){.frame{min-width:20px}.frame-10{min-width:30px}.throws span{font-size:.55rem;width:10px}.frame-score{font-size:.6rem}}