.hanoi{--disk-h:30px;--base:28px;--min-levels:6}.hanoi-layout{flex-direction:column;gap:16px;display:flex}.hanoi-pick{order:1}.hanoi-board-col{order:2}.hanoi-side{flex-direction:column;order:3;gap:16px;display:flex}.hanoi-panel{order:1}.hanoi-actions{order:2}@media (width>=900px){.hanoi-assist{grid-template-columns:repeat(3,1fr);gap:8px;margin:0;display:grid}.hanoi-assist button{padding:0 8px}.hanoi-assist>label{grid-column:span 2;justify-content:space-between}.hanoi-assist>button:last-child{grid-column:1/-1}.hanoi{--disk-h:34px;--min-levels:9}.hanoi-layout{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:16px 48px;display:grid}.hanoi-pick{grid-area:1/1}.hanoi-board-col{grid-area:2/1}.hanoi-side{grid-area:2/2;align-self:stretch;min-height:392px}.hanoi-actions{margin-top:auto}.hanoi-actions .primary{flex:100%}}.hanoi-tray{border-radius:var(--radius-lg);background:repeating-linear-gradient(92deg, #5a320f12 0 1px, transparent 1px 7px), repeating-linear-gradient(88deg, #ffebc814 0 2px, transparent 2px 13px), linear-gradient(180deg, var(--wood-1), var(--wood-2));padding:14px;box-shadow:0 18px 30px -18px #000,0 2px #3c1e0559,inset 0 2px #ffffff73,inset 0 -3px #3c1e0540}.hanoi-board{height:calc(max(var(--levels), var(--min-levels)) * var(--disk-h) + var(--base) + 36px);border-radius:var(--radius);background:radial-gradient(ellipse 80% 70% at 30% 12%, #fff6, transparent 70%), linear-gradient(180deg, var(--board-1), var(--board-2));user-select:none;--disk-h:clamp(30px, calc((100svh - var(--header-h) - 2 * var(--page-top) - 62px - 28px - 64px) / max(var(--levels), var(--min-levels))), 44px);position:relative;box-shadow:inset 0 5px 12px #50321452,inset 4px 0 10px -4px #50321438,inset 0 -1px #ffffff80}.hanoi-base{background:repeating-linear-gradient(180deg, #28140517 0 1px, transparent 1px 4px), linear-gradient(180deg, #bd8545 0%, var(--wood-mid) 35%, var(--wood-dark) 100%);pointer-events:none;border-radius:999px;height:18px;position:absolute;bottom:10px;left:10px;right:10px;box-shadow:inset 0 2px #ffebc873,inset 0 -3px #1e0f004d,0 6px 8px -3px #2814008c}.hanoi-peg{top:0;bottom:0;left:calc(100% / var(--pegs) * var(--peg));width:calc(100% / var(--pegs));border-radius:var(--radius-sm);touch-action:none;cursor:pointer;background:0 0;border:0;min-height:0;padding:0;position:absolute}.hanoi-peg:before{content:"";top:14px;left:50%;bottom:calc(var(--base) - 8px);background:linear-gradient(90deg, #6b4220, var(--wood-dark) 12%, #e6b878 38%, #d79f5c 55%, var(--wood-dark) 90%, #5e3a1b);border-radius:999px;width:14px;position:absolute;transform:translate(-50%);box-shadow:4px 0 6px -2px #3c1e054d}.hanoi-peg:focus-visible{outline:3px solid var(--wood-dark);outline-offset:-3px}.hanoi-peg[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--wood-dark);background:#ffffff4d}.hanoi-peg:disabled{opacity:1;cursor:default}.hanoi-disk{left:calc(100% / var(--pegs) * (var(--peg) + .5));bottom:calc(var(--level) * var(--disk-h) + var(--base));width:calc(100% / var(--pegs) * var(--w));height:calc(var(--disk-h) - 4px);background:linear-gradient(180deg, #ffffff4d, #fff0 48%, #0000001f), var(--fill);box-shadow:inset 0 2px 0 #ffffff80, inset 0 -5px 0 #0003, 0 0 0 1.5px var(--wood-dark), 0 6px 8px -3px #3219058c;color:var(--on-disk);font-size:var(--text-14);font-weight:700;line-height:var(--leading-16);pointer-events:none;border-radius:999px;justify-content:center;align-items:center;transition:left .18s,bottom .18s,transform .12s;display:flex;position:absolute;transform:translate(-50%)}.hanoi-disk.is-lifted{transform:translate(-50%,-12px)}.hanoi-disk.is-dragging{z-index:2;transition:none}.hanoi-legal{border:2px dashed var(--wood-dark);pointer-events:none;border-radius:999px;width:34px;height:12px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.hanoi-notch{pointer-events:none;border-radius:50%;width:8px;height:8px;position:absolute;bottom:1px;left:50%;transform:translate(-50%)}.hanoi-notch.from{border:2px solid var(--wood-dark)}.hanoi-notch.to{background:var(--wood-dark)}.hanoi-tray.is-won{box-shadow:0 0 0 3px var(--accent), 0 18px 30px -18px #000, inset 0 2px 0 #ffffff59}.hanoi-tray.is-won .hanoi-disk{animation:80ms ease-out both settle;animation-delay:calc(var(--i,0) * 25ms)}@keyframes settle{0%{transform:translate(-50%,-6px)}to{transform:translate(-50%)}}.hanoi-stats{border-radius:var(--radius);background:var(--surface);margin:0;box-shadow:inset 0 1px #ffffff12,inset 0 -3px #00000040}.hanoi-stats dt{color:var(--muted);font-size:var(--text-14);line-height:var(--leading-24);margin:0}.hanoi-stats dd{font-variant-numeric:tabular-nums;margin:0;font-weight:600}.hanoi-stat-main{grid-template-rows:auto auto;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:space-between;align-items:end;column-gap:16px;padding:12px 20px 14px;display:grid}.hanoi-stat-main dd{font-family:var(--font-display);font-size:var(--text-32);line-height:var(--leading-40)}.hanoi-stat-main dd.hanoi-step{font-size:var(--text-32);line-height:var(--leading-40)}.hanoi-stats{flex-wrap:wrap;display:flex}.hanoi-stat-main{box-sizing:border-box;flex:1 0 100%}.hanoi-stat-main:not(:last-child){border-bottom:1px solid var(--line)}.hanoi-stat-pair{align-items:baseline;gap:8px;padding:10px 0 12px 20px;display:flex}.hanoi-stat-pair:last-child{padding-right:20px}.hanoi-stat-pair dd{font-size:var(--text-16);line-height:var(--leading-24)}.hanoi-seg{border-radius:var(--radius);background:var(--surface);flex-wrap:wrap;padding:3px;display:inline-flex}.hanoi-seg button{border-radius:var(--radius-sm);background:0 0;border:0;min-width:34px;min-height:40px;padding:0 4px}.hanoi-seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 1px #ffffff59,inset 0 -3px #00000038}.hanoi-pick{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.hanoi-seg-pegs{order:1}.hanoi-seg-pegs button{padding:0 12px}.hanoi-pick .sound-toggle{order:2}.hanoi-seg-disks{order:3}.hanoi-shuffle{order:4}.icon-button{justify-content:center;align-items:center;width:44px;padding:0;display:inline-flex}.hanoi-actions{flex-wrap:wrap;gap:8px;display:flex}.hanoi-assist{flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 16px;display:flex}.hanoi-speed{align-items:center;gap:8px;display:flex}.hanoi-speed .hanoi-seg button{padding:0 12px}.hanoi-progress{width:100%;height:12px;accent-color:var(--accent);margin:0 0 8px;display:block}@media (prefers-reduced-motion:reduce){.hanoi-disk,.hanoi-tray.is-won .hanoi-disk{transition:none;animation:none}}@media (width<=480px){.hanoi{--disk-h:26px}.hanoi-tray{padding:10px}.hanoi-seg button{min-width:34px;padding:0 4px}.hanoi-seg-disks{order:3}.hanoi-seg-pegs button{padding:0 12px}}@media (width>=900px){.hanoi-seg-disks{order:2}.hanoi-shuffle{order:3}.hanoi-pick .sound-toggle{order:4}}.hanoi-note{color:var(--muted);font-size:var(--text-14);line-height:var(--leading-24);margin:0}@media (width<=899px){.hanoi-board{--disk-h:30px}}@media (width<=480px){.hanoi-board{--disk-h:26px}}.hanoi-actions button,.hanoi-shuffle{justify-content:center;align-items:center;gap:8px;display:inline-flex}.hanoi .icon{flex:none}.hanoi{touch-action:manipulation}.hanoi-confirm{border-radius:var(--radius);background:var(--surface);padding:16px 20px 20px;box-shadow:inset 0 1px #ffffff12,inset 0 -3px #00000040}.hanoi-confirm h2{font-size:var(--text-24);line-height:var(--leading-32);margin:0 0 4px}.hanoi-confirm p{color:var(--muted);font-size:var(--text-14);line-height:var(--leading-24);margin:0}.hanoi-confirm-actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}