.hanoi-page{background:linear-gradient(#f7f7f9 0%,#e9ecf2 100%);min-height:calc(100vh - 56px);padding:32px 16px 48px}.hanoi-shell{max-width:960px;margin:0 auto;position:relative}.hanoi-header{text-align:center;margin-bottom:24px}.hanoi-header h1{color:#1a2b49;margin:0 0 8px;font-family:Barlow Condensed,sans-serif;font-size:2.5rem;font-weight:700}.hanoi-tagline{color:#4a5568;margin:0;font-size:1rem}.hanoi-hud{background:#fff;border-radius:8px;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;padding:16px;display:grid;box-shadow:0 2px 8px #0000000f}.hanoi-stat{flex-direction:column;align-items:center;gap:4px;display:flex}.hanoi-stat-label{text-transform:uppercase;letter-spacing:.05em;color:#718096;font-size:.75rem;font-weight:600}.hanoi-stat-value{color:#1a2b49;font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:700}.hanoi-stat-value small{color:#718096;font-size:.75rem;font-weight:500}.hanoi-warn{color:#d73f3f;animation:.8s ease-in-out infinite hanoi-pulse}@keyframes hanoi-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.hanoi-board{background:#fff;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:16px;min-height:360px;padding:24px 16px;display:grid;box-shadow:0 2px 8px #0000000f}.hanoi-tower{cursor:pointer;background:0 0;border:2px dashed #0000;border-radius:6px;flex-direction:column;justify-content:flex-end;align-items:center;min-height:320px;padding:8px 4px 0;transition:background .15s,border-color .15s;display:flex;position:relative}.hanoi-tower:hover:not(:disabled){background:#f0f4fa}.hanoi-tower:disabled{cursor:default}.hanoi-tower-selected{background:#eaf2fb;border-color:#3672b9}.hanoi-pole{z-index:0;background:#8a96a8;border-radius:3px 3px 0 0;width:6px;margin-left:-3px;position:absolute;top:8px;bottom:16px;left:50%}.hanoi-disks{z-index:1;flex-direction:column-reverse;align-items:center;width:100%;display:flex;position:relative}.hanoi-disk{color:#fff;border-radius:11px;justify-content:center;align-items:center;height:22px;margin-bottom:2px;font-size:.75rem;font-weight:700;transition:transform .12s;display:flex;box-shadow:inset 0 -2px #0000002e,0 1px 2px #00000026}.hanoi-base{z-index:1;background:#4a5568;border-radius:2px;width:90%;height:8px;margin-top:2px;position:relative}.hanoi-flash{text-align:center;border-radius:6px;margin-top:16px;padding:10px 16px;font-weight:600;animation:1.8s ease-out hanoi-fade}.hanoi-flash-good{color:#2c6a2c;background:#d8f0d8}.hanoi-flash-warn{color:#a04a1f;background:#fde4d4}.hanoi-flash-info{color:#2a5a99;background:#e1edf9}@keyframes hanoi-fade{0%{opacity:0;transform:translateY(-4px)}10%{opacity:1;transform:translateY(0)}85%{opacity:1}to{opacity:0}}.hanoi-overlay{z-index:50;background:#141e3299;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.hanoi-card{background:#fff;border-radius:8px;width:100%;max-width:480px;padding:32px;box-shadow:0 12px 40px #0000004d}.hanoi-card h2{color:#1a2b49;margin:0 0 12px;font-family:Barlow Condensed,sans-serif;font-size:2rem}.hanoi-card p{color:#2d3748;margin:0 0 12px;line-height:1.5}.hanoi-rules{color:#4a5568;margin:0 0 16px;padding-left:20px;font-size:.9rem;line-height:1.5}.hanoi-rules li{margin-bottom:6px}.hanoi-note{color:#718096;font-size:.85rem;font-style:italic}.hanoi-results{text-align:center;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;display:grid}.hanoi-results>div{flex-direction:column;gap:4px;display:flex}.hanoi-results strong{color:#1a2b49;font-size:1.2rem}.hanoi-final-score{color:#d73f3f!important;font-size:2rem!important}.hanoi-btn-primary{color:#fff;cursor:pointer;background:#d73f3f;border:none;border-radius:4px;margin-top:8px;padding:12px 32px;font-size:1rem;font-weight:700;transition:opacity .15s;display:inline-block}.hanoi-btn-primary:hover{opacity:.85}@media (max-width:600px){.hanoi-hud{grid-template-columns:repeat(2,1fr)}.hanoi-stat-value{font-size:1.3rem}.hanoi-board{min-height:280px;padding:16px 8px}.hanoi-tower{min-height:240px}.hanoi-disk{height:18px}.hanoi-results{grid-template-columns:1fr}}