:root{--bg-primary: #0c0a09;--bg-secondary: #1c1917;--bg-tertiary: #292524;--bg-elevated: #44403c;--text-primary: #fafaf9;--text-secondary: #a8a29e;--text-muted: #78716c;--accent-gold: #fbbf24;--accent-gold-dark: #d97706;--accent-success: #22c55e;--accent-error: #ef4444;--accent-info: #3b82f6;--peg-color: #a8a29e;--base-color: #57534e;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(251, 191, 36, .3);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px}[data-theme=light]{--bg-primary: #f5f5f4;--bg-secondary: #e7e5e4;--bg-tertiary: #d6d3d1;--bg-elevated: #a8a29e;--text-primary: #1c1917;--text-secondary: #44403c;--text-muted: #78716c;--accent-gold: #d97706;--accent-gold-dark: #b45309;--accent-success: #16a34a;--accent-error: #dc2626;--accent-info: #2563eb;--peg-color: #78716c;--base-color: #a8a29e;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .15);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .2);--shadow-glow: 0 0 20px rgba(217, 119, 6, .2)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}*:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px}*{margin:0;padding:0;box-sizing:border-box}html{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem;max-width:480px;margin:0 auto}#loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;transition:opacity .3s ease}.loading-tower{position:relative;width:80px;height:120px}.loading-peg{position:absolute;left:50%;bottom:0;width:8px;height:100px;background:var(--peg-color);border-radius:4px;transform:translate(-50%)}.loading-disk{position:absolute;left:50%;height:14px;border-radius:7px;transform:translate(-50%);animation:disk-drop .6s ease-out forwards;opacity:0}.disk-1{width:50px;background:var(--accent-gold);bottom:10px;animation-delay:.1s}.disk-2{width:65px;background:var(--accent-gold-dark);bottom:26px;animation-delay:.25s}.disk-3{width:80px;background:#92400e;bottom:42px;animation-delay:.4s}@keyframes disk-drop{0%{opacity:0;transform:translate(-50%) translateY(-40px) scale(.9)}60%{opacity:1;transform:translate(-50%) translateY(5px) scale(1.02)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.loading-text{margin-top:2rem;font-size:1.1rem;color:var(--text-secondary);letter-spacing:.1em;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.header{width:100%;text-align:center;margin-bottom:1rem}.header-top{display:flex;justify-content:flex-end;gap:.5rem;margin-bottom:.5rem}.lang-switch,.help-btn,.stats-btn,.audio-toggle,.theme-toggle{padding:.4rem .8rem;border:1px solid var(--bg-tertiary);background:var(--bg-secondary);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;transition:all .2s}.audio-toggle,.theme-toggle{padding:.4rem .5rem;font-size:1rem}.theme-toggle{font-size:1.1rem}.help-btn{padding:.4rem .7rem;font-weight:600}.lang-switch:hover,.help-btn:hover,.stats-btn:hover,.audio-toggle:hover,.theme-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--accent-gold)}.audio-toggle[aria-pressed=false]{opacity:.5}.header h1{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--accent-gold),#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.stats-bar{width:100%;margin-bottom:1rem;padding:.75rem 1rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--bg-tertiary)}.stats-row{display:flex;justify-content:space-around;align-items:center;gap:.5rem}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:60px}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.stat-value{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}.stars-display{display:flex;gap:.1rem}.stars-display .star{font-size:.9rem;color:var(--text-muted);opacity:.3}.stars-display.has-stars .star.filled{color:var(--accent-gold);opacity:1}.game-board{display:flex;justify-content:center;align-items:flex-end;gap:.5rem;width:100%;padding:1rem .5rem 0;min-height:280px;margin-bottom:1.5rem}.peg-container{position:relative;width:100px;height:260px;cursor:pointer;transition:all .25s ease;border-radius:var(--radius-md)}.peg-container:hover{background:#ffffff05}.peg-container.lifting-from{background:#fbbf2414;box-shadow:inset 0 0 30px #fbbf241a}.peg-container.lifting-from .peg-rod{background:var(--accent-gold);box-shadow:0 0 15px var(--accent-gold)}.peg-container.valid-target{background:#22c55e14;box-shadow:inset 0 0 30px #22c55e26;animation:valid-pulse 1.5s ease-in-out infinite}@keyframes valid-pulse{0%,to{box-shadow:inset 0 0 20px #22c55e1a}50%{box-shadow:inset 0 0 40px #22c55e33}}.peg-container.valid-target .peg-rod{background:var(--accent-success)}.peg-container.invalid-target{opacity:.6}.peg-container.hint-source .peg-rod{animation:hint-flash .5s ease-in-out 3}.peg-container.hint-target{background:#3b82f626}@keyframes hint-flash{0%,to{background:var(--peg-color)}50%{background:var(--accent-info);box-shadow:0 0 20px var(--accent-info)}}.peg-rod{position:absolute;bottom:24px;left:50%;width:10px;height:220px;background:var(--peg-color);border-radius:5px;transform:translate(-50%);transition:all .25s ease;z-index:1}.peg-base{position:absolute;bottom:0;left:0;right:0;height:24px;background:linear-gradient(180deg,var(--base-color),#292524);border-radius:var(--radius-sm);z-index:2;box-shadow:var(--shadow-md)}.disk-stack{position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:100%;height:220px;z-index:3}.disk{position:absolute;left:50%;transform:translate(-50%);border-radius:var(--radius-sm);box-shadow:0 3px 6px #0006,inset 0 1px #ffffff26,inset 0 -2px #0003;transition:all .2s ease;cursor:pointer}.disk:hover{filter:brightness(1.15);transform:translate(-50%) scale(1.03);box-shadow:0 5px 12px #00000080,inset 0 1px #fff3,0 0 20px #fbbf2433}.disk.lifted{animation:lift-up .25s ease-out forwards;box-shadow:0 15px 35px #00000080,inset 0 1px #ffffff4d,0 0 30px #fbbf2466;z-index:100}@keyframes lift-up{0%{transform:translate(-50%) translateY(0) scale(1)}30%{transform:translate(-50%) translateY(-10px) scale(.98)}to{transform:translate(-50%) translateY(-40px) scale(1.08)}}@keyframes place-down{0%{transform:translate(-50%) translateY(-40px) scale(1.08)}60%{transform:translate(-50%) translateY(5px) scale(1.02)}to{transform:translate(-50%) translateY(0) scale(1)}}.disk-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.7rem;font-weight:700;color:#0009;pointer-events:none;-webkit-user-select:none;user-select:none}.disk.placing{animation:place-down .3s cubic-bezier(.34,1.56,.64,1)}.disk[draggable=true]{cursor:grab}.disk.dragging{opacity:.5;cursor:grabbing}.peg-container.drag-over{background:#22c55e33!important;box-shadow:inset 0 0 30px #22c55e4d!important}.peg-container.drag-over .peg-rod{background:var(--accent-success)}.game-area{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:1rem}.status-hint{width:100%;padding:.75rem 1rem;margin-top:.75rem;background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:var(--radius-md);text-align:center;font-size:.95rem;color:var(--text-secondary);transition:all .2s ease;min-height:44px;display:flex;align-items:center;justify-content:center}.status-hint.placing{background:#22c55e1a;border-color:var(--accent-success);color:var(--accent-success)}.status-hint.victory{background:#fbbf241a;border-color:var(--accent-gold);color:var(--accent-gold);font-weight:600}.keyboard-hint{display:flex;justify-content:center;gap:2rem;margin-top:.5rem;padding:.25rem 0}.keyboard-hint span{font-size:.75rem;color:var(--text-muted);background:var(--bg-tertiary);padding:.15rem .5rem;border-radius:var(--radius-sm);font-family:monospace}.difficulty-bar{display:flex;gap:.25rem;padding:.25rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--bg-tertiary);margin-bottom:1rem}.diff-btn{padding:.5rem .9rem;border:none;background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s;white-space:nowrap}.diff-btn:hover:not(:disabled){color:var(--text-primary);background:var(--bg-tertiary)}.diff-btn:disabled{opacity:.4;cursor:not-allowed;position:relative}.diff-btn .diff-stars{font-size:.6rem;color:var(--accent-gold);margin-left:.25rem}.diff-btn .lock-icon{font-size:.7rem;margin-left:.25rem}.star{font-size:1.2rem;color:var(--text-muted);opacity:.3;transition:all .3s ease}.star.filled{color:var(--accent-gold);opacity:1}.star.active{animation:star-pulse 1.5s ease-in-out infinite}.star.pop{animation:star-pop .5s cubic-bezier(.34,1.56,.64,1)}@keyframes star-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes star-pop{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0)}}.star-label{font-size:.75rem;color:var(--text-muted)}.diff-btn.active{background:var(--accent-gold);color:var(--bg-primary);font-weight:600}.best-record{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;font-size:.85rem}.record-box{display:flex;flex-direction:column;align-items:center;gap:.2rem}.record-label{color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.record-value{color:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums}.bottom-controls{display:flex;gap:.75rem;width:100%;justify-content:center}.control-btn{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem 1.2rem;border:1px solid var(--bg-tertiary);background:var(--bg-secondary);color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;min-width:70px}.control-btn .icon{font-size:1.2rem}.control-btn .label{font-size:.75rem;font-weight:500}.control-btn:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--accent-gold);transform:translateY(-2px)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.cooldown{position:relative;overflow:hidden}.control-btn.cooldown:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent-gold);animation:cooldown-progress 5s linear forwards}@keyframes cooldown-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.undo-btn:hover:not(:disabled){border-color:var(--accent-info)}.hint-btn:hover{border-color:var(--accent-success)}.reset-btn:hover{border-color:var(--accent-error)}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0c0a09f2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1.5rem}.tutorial-overlay.hidden{display:none}.tutorial-content{background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:var(--radius-lg);padding:2rem;max-width:360px;width:100%;text-align:center}.tutorial-content h2{font-size:1.4rem;margin-bottom:1.5rem;color:var(--accent-gold)}.tutorial-steps{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.tutorial-step{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:var(--radius-md);background:var(--bg-tertiary);opacity:.5;transition:all .3s}.tutorial-step.active{opacity:1;background:var(--bg-elevated);border:1px solid var(--accent-gold)}.step-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:50%;font-weight:700;font-size:.85rem;color:var(--text-secondary)}.tutorial-step.active .step-number{background:var(--accent-gold);color:var(--bg-primary)}.step-text{text-align:left;font-size:.9rem;color:var(--text-secondary)}.tutorial-step.active .step-text{color:var(--text-primary)}.tutorial-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.tutorial-demo-hint{font-size:.85rem;color:var(--text-muted);margin-bottom:1rem;text-align:center}.demo-indicator{position:fixed;top:20%;left:50%;transform:translate(-50%) translateY(-20px);background:var(--accent-gold);color:var(--bg-primary);padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;font-size:1rem;opacity:0;pointer-events:none;transition:all .3s ease;z-index:9998;box-shadow:0 4px 12px #0000004d}.demo-indicator.show{opacity:1;transform:translate(-50%) translateY(0)}.tooltip-hint{position:fixed;background:var(--bg-elevated);color:var(--text-primary);padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:.85rem;white-space:nowrap;opacity:0;transform:translate(-50%) translateY(-4px);transition:all .2s ease;pointer-events:none;z-index:10000;border:1px solid var(--bg-tertiary);box-shadow:var(--shadow-md)}.tooltip-hint:before{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);border-width:0 5px 5px;border-style:solid;border-color:transparent transparent var(--bg-elevated)}.tooltip-hint.show{opacity:1;transform:translate(-50%) translateY(0)}.tutorial-btn{padding:.75rem 1.5rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;border:none}.tutorial-btn.secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--bg-tertiary)}.tutorial-btn.secondary:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tutorial-btn.primary{background:var(--accent-gold);color:var(--bg-primary)}.tutorial-btn.primary:hover{background:#f59e0b;transform:translateY(-1px)}.rules-modal,.victory-modal,.stats-modal,.confirm-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}.rules-modal.hidden,.victory-modal.hidden,.stats-modal.hidden,.confirm-modal.hidden{display:none}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:var(--radius-lg);padding:1.5rem;max-width:360px;width:100%;z-index:1;text-align:center}.rules-content h2,.victory-content h2{font-size:1.3rem;margin-bottom:1rem;color:var(--text-primary)}.rules-list{list-style:none;text-align:left;margin-bottom:1.5rem}.rules-list li{padding:.6rem 0 .6rem 1.5rem;position:relative;color:var(--text-secondary);font-size:.9rem;border-bottom:1px solid var(--bg-tertiary)}.rules-list li:last-child{border-bottom:none}.rules-list li:before{content:"•";position:absolute;left:.5rem;color:var(--accent-gold);font-weight:700}.modal-close,.play-again-btn{padding:.8rem 2rem;background:var(--accent-gold);color:var(--bg-primary);border:none;border-radius:var(--radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.modal-close:hover,.play-again-btn:hover{background:#f59e0b;transform:translateY(-2px)}.victory-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}.victory-actions .play-again-btn,.victory-actions .next-level-btn{padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;border:none}.victory-actions .play-again-btn{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--bg-elevated)}.victory-actions .play-again-btn:hover{background:var(--bg-elevated);transform:translateY(-2px)}.victory-actions .next-level-btn{background:var(--accent-gold);color:var(--bg-primary)}.victory-actions .next-level-btn:hover{background:#f59e0b;transform:translateY(-2px)}.victory-actions .next-level-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.victory-icon{font-size:4rem;margin-bottom:.5rem;animation:trophy-bounce .6s ease-out}@keyframes trophy-bounce{0%{transform:scale(0) rotate(-20deg)}50%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0)}}.victory-message{color:var(--text-secondary);margin-bottom:1rem;line-height:1.6}.victory-message strong{color:var(--text-primary)}.new-record-badge{display:inline-block;background:linear-gradient(135deg,var(--accent-gold),#f59e0b);color:var(--bg-primary);padding:.4rem 1rem;border-radius:2rem;font-weight:700;font-size:.8rem;margin-bottom:1rem;animation:badge-pop .5s ease-out}.new-record-badge.hidden{display:none}@keyframes badge-pop{0%{transform:scale(0)}70%{transform:scale(1.1)}to{transform:scale(1)}}.fireworks{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;border-radius:var(--radius-lg)}.firework{position:absolute;width:6px;height:6px;border-radius:50%;animation:firework-burst 1.2s ease-out forwards}@keyframes firework-burst{0%{transform:scale(1);opacity:1}to{transform:scale(25);opacity:0}}.fullscreen-fireworks{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;overflow:hidden}.fullscreen-fireworks.hidden{display:none}.firework.fullscreen{position:absolute;width:8px;height:8px;border-radius:50%;animation:firework-burst 1.5s ease-out forwards}.stats-modal .modal-content{max-width:420px;max-height:80vh;overflow-y:auto}.stats-summary{display:flex;justify-content:space-around;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:1rem}.summary-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.summary-value{font-size:1.5rem;font-weight:700;color:var(--accent-gold)}.summary-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.stats-grid{display:flex;flex-direction:column;gap:.5rem}.stats-row{display:grid;grid-template-columns:1fr 40px 50px 60px 50px;gap:.5rem;align-items:center;padding:.5rem .75rem;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:.85rem}.stats-row.locked{opacity:.5}.stats-diff{font-weight:500;color:var(--text-primary)}.stats-count{color:var(--text-muted);font-size:.75rem;text-align:center}.stats-best-stars{color:var(--accent-gold);font-size:.9rem;text-align:center}.stats-best-time,.stats-best-moves{color:var(--text-secondary);font-size:.75rem;text-align:center;font-variant-numeric:tabular-nums}.stats-close{margin-top:1rem;width:100%;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);color:var(--text-primary);font-weight:500;cursor:pointer;transition:all .2s}.stats-close:hover{background:var(--bg-elevated);border-color:var(--accent-gold)}.confirm-modal .modal-content{max-width:360px;text-align:center}.confirm-message{font-size:1rem;color:var(--text-primary);margin-bottom:1.5rem;line-height:1.5}.confirm-actions{display:flex;gap:.75rem;justify-content:center}.confirm-btn{padding:.6rem 1.5rem;border:1px solid var(--bg-tertiary);border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;min-width:100px}.confirm-btn.secondary{background:var(--bg-secondary);color:var(--text-secondary)}.confirm-btn.secondary:hover{background:var(--bg-tertiary);color:var(--text-primary)}.confirm-btn.primary{background:var(--accent-gold);color:var(--bg-primary);border-color:var(--accent-gold)}.confirm-btn.primary:hover{background:#f59e0b;border-color:#f59e0b}@media (max-width: 400px){.game-board{min-height:240px}.peg-container{width:85px;height:220px}.peg-rod{height:180px}.diff-btn{padding:.45rem .6rem;font-size:.8rem}.control-btn{padding:.6rem 1rem;min-width:60px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}