.ag-game-hanoi .hn-scene{--dh:clamp(15px,calc(30vw / (var(--n) + 3)),28px);--label:34px;--baseh:12px;--foot:calc(var(--label) + var(--baseh));width:min(100%,780px);height:calc(var(--foot) + (var(--n) + 2.6) * var(--dh));touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.ag-game-hanoi .hn-base{left:1%;right:1%;bottom:var(--label);height:var(--baseh);background:linear-gradient(180deg,color-mix(in srgb,var(--line) 70%,var(--panel)),color-mix(in srgb,var(--line) 35%,var(--bg)));border-radius:6px;position:absolute;box-shadow:0 10px 20px -12px #000000b3}:root[data-theme=light] .ag-game-hanoi .hn-base{background:linear-gradient(#9aa3c2,#7b84a3)}.ag-game-hanoi .hn-peg{top:0;bottom:0;left:calc(var(--p) * 100% / 3);width:33.3333%;color:var(--ink);cursor:pointer;background:0 0;border:2px solid #0000;border-radius:16px;padding:0;transition:background-color .15s,border-color .15s;position:absolute}.ag-game-hanoi .hn-peg:hover:not(:disabled){background:color-mix(in srgb,var(--cat) 6%,transparent)}.ag-game-hanoi .hn-peg:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.ag-game-hanoi .hn-rod{left:50%;bottom:calc(var(--foot) - 2px);width:10px;height:calc((var(--n) + .9) * var(--dh));background:linear-gradient(90deg,color-mix(in srgb,var(--line) 55%,var(--bg)),color-mix(in srgb,var(--line) 90%,#fff 10%),color-mix(in srgb,var(--line) 55%,var(--bg)));border-radius:6px 6px 0 0;position:absolute;transform:translate(-50%)}:root[data-theme=light] .ag-game-hanoi .hn-rod{background:linear-gradient(90deg,#7b84a3,#b4bbd3,#7b84a3)}.ag-game-hanoi .hn-label{height:var(--label);color:var(--muted);justify-content:center;align-items:center;gap:6px;font-size:.8rem;display:flex;position:absolute;bottom:0;left:0;right:0}.ag-game-hanoi .hn-label b{font-family:var(--display);color:var(--ink);font-size:.95rem}.ag-game-hanoi .hn-label small{background:color-mix(in srgb,var(--cat) 18%,transparent);color:var(--ink);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 7px;font-size:.66rem;font-weight:800}.ag-game-hanoi .hn-peg.is-target .hn-rod{box-shadow:0 0 14px -2px color-mix(in srgb,var(--cat) 70%,transparent)}.ag-game-hanoi .hn-peg.is-source{background:color-mix(in srgb,var(--cat) 8%,transparent)}.ag-game-hanoi .hn-peg.can-drop{border-color:color-mix(in srgb,var(--cat) 35%,transparent);border-style:dashed}.ag-game-hanoi .hn-peg.is-over.can-drop{background:color-mix(in srgb,var(--cat) 14%,transparent);border-color:var(--cat)}.ag-game-hanoi .hn-peg.is-hint-from,.ag-game-hanoi .hn-peg.is-hint-to{border-color:var(--cat);border-style:solid}.ag-game-hanoi .hn-peg.is-hint-to{background:color-mix(in srgb,var(--cat) 12%,transparent)}.ag-game-hanoi .hn-peg.is-hint-from:after,.ag-game-hanoi .hn-peg.is-hint-to:after{background:var(--cat);color:#0b0f26;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;font-size:.66rem;font-weight:800;position:absolute;top:8px;left:50%;transform:translate(-50%)}.ag-game-hanoi .hn-peg.is-hint-from:after{content:"↑"}.ag-game-hanoi .hn-peg.is-hint-to:after{content:"↓"}.ag-game-hanoi .hn-peg.is-bad{animation:.32s hn-bad}.ag-game-hanoi .hn-discs{pointer-events:none;position:absolute;inset:0}.ag-game-hanoi .hn-disc{left:calc((var(--p) * 2 + 1) * 100% / 6);bottom:calc(var(--foot) + var(--i) * var(--dh));width:calc((100% / 3 - 14px) * (.22 + .78 * var(--s) / var(--n)));height:calc(var(--dh) - 3px);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000));border-radius:999px;transition:left .2s cubic-bezier(.3,.7,.3,1),bottom .2s cubic-bezier(.3,.7,.3,1);position:absolute;transform:translate(-50%);box-shadow:0 4px 10px -6px #000000b3,inset 0 -2px #00000026}.ag-game-hanoi .hn-disc.is-lifted{bottom:calc(var(--foot) + (var(--n) + 1.3) * var(--dh));box-shadow:0 14px 22px -10px #000000b3,0 0 0 2px color-mix(in srgb,var(--c) 40%,transparent);z-index:3}.ag-game-hanoi .hn-disc.is-dragging{left:var(--dragx);bottom:var(--dragy);z-index:4;transition:none;transform:translate(-50%,50%)}.ag-game-hanoi .hn-scene.no-anim .hn-disc{transition:none}.ag-game-hanoi .hn-scene.is-solved .hn-peg.is-target .hn-rod{box-shadow:0 0 24px 2px color-mix(in srgb,var(--cat) 80%,transparent)}@keyframes hn-bad{20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}@media (width<=560px){.ag-game-hanoi .hn-disc{width:calc((100% / 3 - 8px) * (.24 + .76 * var(--s) / var(--n)))}.ag-game-hanoi .hn-rod{width:8px}}@media (prefers-reduced-motion:reduce){.ag-game-hanoi .hn-disc{transition:none}.ag-game-hanoi .hn-peg.is-bad{animation:none}}@media (forced-colors:active){.ag-game-hanoi .hn-disc{border:2px solid canvastext}.ag-game-hanoi .hn-rod,.ag-game-hanoi .hn-base{background:canvastext}}