*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #1a1035;--color-bg-light: #2a1f4e;--color-bg-card: #352a5c;--color-primary: #c084fc;--color-primary-dark: #a855f7;--color-secondary: #818cf8;--color-text: #f1f5f9;--color-text-dim: #94a3b8;--color-success: #4ade80;--color-warning: #fbbf24;--color-danger: #f87171;--color-gold: #fcd34d;--font-ui: "Inter", system-ui, -apple-system, sans-serif;--font-display: "Playfair Display", Georgia, serif;--radius: 12px;--radius-sm: 8px}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-ui);background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#game-container{position:fixed;inset:0;z-index:0}#game-canvas{width:100%;height:100%;display:block}#ui-overlay{position:fixed;inset:0;z-index:10;pointer-events:none}.screen{position:absolute;inset:0;display:none;pointer-events:auto}.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center}#loading-screen{background:var(--color-bg);z-index:100}.loading-content{text-align:center}.loading-bar-container{width:200px;height:4px;background:var(--color-bg-light);border-radius:2px;margin:24px auto;overflow:hidden}.loading-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));border-radius:2px;transition:width .3s ease}#loading-text{color:var(--color-text-dim);font-size:14px}#menu-screen{background:linear-gradient(180deg,var(--color-bg) 0%,#0f0a20 100%)}.menu-content{text-align:center;padding:20px}.game-title{font-family:var(--font-display);font-size:clamp(36px,8vw,56px);background:linear-gradient(135deg,var(--color-primary),var(--color-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.game-subtitle{color:var(--color-text-dim);font-size:16px;margin-bottom:48px}.menu-buttons{display:flex;flex-direction:column;gap:12px;width:240px;margin:0 auto}.btn{font-family:var(--font-ui);font-size:16px;font-weight:600;padding:14px 28px;border:none;border-radius:var(--radius);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;min-height:48px}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-secondary));color:#fff;box-shadow:0 4px 15px #a855f766}.btn-primary:active{box-shadow:0 2px 8px #a855f74d}.btn-secondary{background:var(--color-bg-card);color:var(--color-text);border:1px solid rgba(255,255,255,.1)}.btn-icon{background:#ffffff1a;border:none;color:var(--color-text);width:44px;height:44px;border-radius:var(--radius-sm);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.btn-icon:active{background:#fff3}#level-select-screen{background:var(--color-bg)}#level-select-screen.active{justify-content:flex-start}.screen-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;flex-shrink:0}.screen-header h2{font-family:var(--font-display);font-size:24px}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;padding:8px 20px 20px;overflow-y:auto;width:100%;max-width:500px;margin:0 auto}.level-cell{aspect-ratio:1;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;font-size:18px;cursor:pointer;transition:transform .15s ease;position:relative}.level-cell:active{transform:scale(.93)}.level-cell.unlocked{background:var(--color-bg-card);border:1px solid rgba(255,255,255,.1)}.level-cell.current{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-secondary));color:#fff;box-shadow:0 4px 15px #a855f766}.level-cell.locked{background:var(--color-bg-light);color:var(--color-text-dim);cursor:not-allowed;opacity:.5}.level-cell .stars{font-size:10px;margin-top:4px;letter-spacing:2px}#hud{background:transparent}#hud.active{justify-content:flex-start;pointer-events:none}.hud-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;pointer-events:auto;width:100%}.hud-info{display:flex;flex-direction:column;align-items:center;gap:2px}#hud-level{font-weight:600;font-size:16px}#hud-timer{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-gold)}#hud-timer.danger{color:var(--color-danger);animation:pulse 1s ease-in-out infinite}.hud-actions{display:flex;gap:8px}#hud-progress{width:calc(100% - 32px);height:3px;background:#ffffff1a;border-radius:2px;margin:0 16px;pointer-events:none}#hud-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--color-primary),var(--color-success));border-radius:2px;transition:width .3s ease}#pause-screen{background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.pause-content{text-align:center}.pause-content h2{font-family:var(--font-display);font-size:32px;margin-bottom:32px}#complete-screen{background:#000c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.complete-content{text-align:center;padding:20px;max-width:400px;width:100%}.complete-title{font-family:var(--font-display);font-size:32px;background:linear-gradient(135deg,var(--color-gold),var(--color-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px}#complete-image-container{width:200px;height:200px;margin:0 auto 20px;border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 30px #00000080}#complete-image-container img{width:100%;height:100%;object-fit:cover}.complete-stats{display:flex;justify-content:center;gap:24px;margin-bottom:24px}.stat{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:12px;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:24px;font-weight:700;color:var(--color-gold)}.complete-buttons{display:flex;flex-direction:column;gap:12px}#settings-screen{background:var(--color-bg)}#settings-screen.active{justify-content:flex-start}.settings-content{padding:20px;width:100%;max-width:400px}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:16px}.toggle{position:relative;width:52px;height:28px;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:var(--color-bg-light);border-radius:14px;transition:background .3s ease}.toggle-slider:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .3s ease}.toggle input:checked+.toggle-slider{background:var(--color-primary-dark)}.toggle input:checked+.toggle-slider:before{transform:translate(24px)}#preview-overlay{position:fixed;inset:0;z-index:50;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}#preview-image-container{max-width:90vw;max-height:70vh;border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 40px #00000080}#preview-image-container img{width:100%;height:100%;object-fit:contain}.preview-hint{color:var(--color-text-dim);margin-top:16px;font-size:14px}.hidden{display:none!important}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.screen.active{animation:fadeIn .3s ease}@media(min-width:768px){.level-grid{grid-template-columns:repeat(6,80px)}.menu-buttons{width:280px}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-bg-card);border-radius:2px}