*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f172a;--bg-surface: #1e293b;--bg-card: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--accent: #3b82f6;--accent-hover: #2563eb;--success: #22c55e;--danger: #ef4444;--radius: 10px;--radius-sm: 6px}html,body{height:100dvh;overflow:hidden;background:var(--bg)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text);display:flex;justify-content:center;align-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:600px;height:100dvh;display:flex;flex-direction:column;padding:12px;position:relative;overflow:hidden}.screen{display:none;flex-direction:column;flex:1;animation:fadeIn .2s ease}.screen.active{display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.title-screen{justify-content:center;align-items:center;gap:32px;position:relative}.title-bg-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;pointer-events:none;z-index:0}.title-screen>*:not(.title-bg-canvas){position:relative;z-index:1}.title-logo{font-size:48px;font-weight:900;letter-spacing:-2px;text-align:center}.title-logo .color{display:inline-block}.title-subtitle{color:var(--text-muted);font-size:16px;text-align:center;margin-top:4px}.title-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px}.btn{padding:14px 24px;border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;transition:transform .1s,background .15s;text-align:center}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-surface);color:var(--text)}.btn-secondary:hover{background:var(--bg-card)}.btn-small{padding:8px 16px;font-size:14px}.level-select-screen{gap:16px}.level-header{display:flex;justify-content:space-between;align-items:center}.level-header h2{font-size:22px;font-weight:800}.total-stars{color:var(--text-muted);font-size:14px}.total-stars .star-icon{color:#eab308}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;overflow-y:auto;flex:1;padding:4px;-webkit-overflow-scrolling:touch}.level-btn{aspect-ratio:1;border:none;border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text);font-size:18px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .1s}.level-btn:active{transform:scale(.95)}.level-btn.locked{opacity:.3;cursor:default}.level-btn.locked:active{transform:none}.level-stars{font-size:10px;letter-spacing:1px;line-height:1}.level-stars .earned{color:#eab308}.level-stars .empty{color:var(--text-muted);opacity:.4}.level-back{margin-top:8px}.game-screen{gap:0}.game-topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px}.game-topbar-left{display:flex;align-items:center;gap:12px}.game-back-btn{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:4px 8px}.game-level-label{font-size:16px;font-weight:700}.game-difficulty{font-size:12px;color:var(--text-muted)}.game-score-wrap{text-align:right}.game-score{font-size:22px;font-weight:800;color:var(--accent)}.game-shots{font-size:11px;color:var(--text-muted)}.game-canvas-container{flex:1;position:relative;overflow:hidden;border-radius:var(--radius);background:#0003}#game-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.result-overlay{position:absolute;inset:0;background:#0f172aed;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:10;animation:fadeIn .3s ease;padding:24px}.result-overlay.active{display:flex}.result-title{font-size:36px;font-weight:900}.result-title.win{color:var(--success)}.result-title.lose{color:var(--danger)}.result-stars{font-size:48px;letter-spacing:8px}.result-stars .earned{color:#eab308}.result-stars .empty{color:var(--text-muted);opacity:.3}.result-info{color:var(--text-muted);font-size:16px;text-align:center}.result-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.settings-row+.settings-row{border-top:1px solid var(--bg-card)}.toggle{width:48px;height:28px;border-radius:14px;background:var(--bg-card);border:none;cursor:pointer;position:relative;transition:background .2s}.toggle.on{background:var(--accent)}.toggle:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s}.toggle.on:after{transform:translate(20px)}@media(max-width:380px){.title-logo{font-size:36px}.level-grid{gap:6px}}@media(min-width:601px){#app{max-width:600px}}@media(max-height:500px){#app{padding:6px}.game-topbar{padding-bottom:2px}}.level-grid::-webkit-scrollbar{width:4px}.level-grid::-webkit-scrollbar-thumb{background:var(--bg-card);border-radius:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}