.hanoi-game{max-width:820px;margin:0 auto;text-align:center}.hanoi-game [hidden]{display:none!important}.hanoi-setup{display:flex;gap:12px;justify-content:center;align-items:end;flex-wrap:wrap;margin:16px 0}.hanoi-setup label{display:grid;gap:4px;min-width:150px;text-align:left}.hanoi-btn{min-height:44px;padding:.7rem 1rem;border:1px solid #202124;border-radius:10px;background:#f3f4f5;color:#202124;-webkit-text-fill-color:#202124;cursor:pointer}.hanoi-primary{background:#202124;color:#fff;-webkit-text-fill-color:#fff}.hanoi-info{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:10px 0}.hanoi-status{min-height:1.5em;margin:8px}.hanoi-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-height:340px;padding:24px 18px 16px;background:linear-gradient(180deg,#f5ead6,#d9bb89);border:7px solid #78532e;border-radius:18px;box-shadow:0 12px 25px rgba(0,0,0,.2)}.hanoi-peg{position:relative;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;min-width:0;padding:0 4px 22px;cursor:pointer;border:0;background:transparent}.hanoi-peg::before{content:"";position:absolute;bottom:20px;left:50%;width:12px;height:245px;transform:translateX(-50%);border-radius:8px;background:linear-gradient(90deg,#79522f,#b27b42,#704522);box-shadow:2px 2px 4px rgba(0,0,0,.25)}.hanoi-peg::after{content:"";position:absolute;bottom:8px;left:5%;right:5%;height:18px;border-radius:9px;background:linear-gradient(180deg,#a87643,#6d4527);box-shadow:0 4px 6px rgba(0,0,0,.2)}.hanoi-disk{position:relative;z-index:2;height:28px;margin-top:3px;border-radius:15px;border:1px solid rgba(0,0,0,.28);box-shadow:inset 0 4px 5px rgba(255,255,255,.35),0 3px 4px rgba(0,0,0,.22);transition:transform .15s ease}.hanoi-disk.is-selected{transform:translateY(-8px);outline:4px solid #fff;outline-offset:2px}.hanoi-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px}.hanoi-peg.is-target{background:rgba(46,125,50,.08);border-radius:14px}@media(max-width:600px){.hanoi-board{min-height:285px;padding:18px 8px 12px;gap:4px}.hanoi-peg::before{height:200px;width:9px}.hanoi-disk{height:24px}.hanoi-info{gap:16px}}

.hanoi-board{position:relative;overflow:visible}.hanoi-disk-flying{position:absolute!important;z-index:20!important;margin:0!important;pointer-events:none!important;transform-origin:center center;will-change:transform;box-sizing:border-box}.hanoi-peg:disabled{cursor:default}.hanoi-peg:disabled .hanoi-disk{pointer-events:none}



.hanoi-fireworks{position:absolute;z-index:40;left:50%;top:42%;width:10px;height:10px;pointer-events:none;transform:translate(-50%,-50%)}
.hanoi-firework-spark{--angle:0deg;--distance:56px;--delay:0ms;position:absolute;left:4px;top:4px;width:7px;height:7px;border-radius:50%;background:hsl(calc(var(--angle) + 35deg) 85% 55%);box-shadow:0 0 8px rgba(255,255,255,.85);opacity:0;animation:hanoi-firework .9s ease-out var(--delay) forwards}
@keyframes hanoi-firework{0%{opacity:1;transform:rotate(var(--angle)) translateX(0) scale(1)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(.45)}}
@media (prefers-reduced-motion:reduce){.hanoi-firework-spark{animation-duration:.01ms}.hanoi-disk-flying{will-change:auto}}