.hanoi-wrap{padding:24px 0 68px}.hanoi-wrap .hanoi-layout{gap:28px}.hanoi-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hanoi-main{display:flex;flex-direction:column;gap:20px}.hanoi-main .hanoi-stage{--wood-light:#ffd982;--wood-mid:#e8aa44;--wood-dark:#b66f1f;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2.4vw,28px);min-height:clamp(270px,42vw,440px);padding:clamp(18px,3vw,34px) clamp(10px,2.2vw,28px) clamp(34px,4vw,54px);overflow:hidden;border:1px solid rgba(182,111,31,.2);border-radius:28px;background:linear-gradient(180deg,#ffffff,#fffdf7 48%,#fff5d7),radial-gradient(circle at 18% 16%,rgba(255,122,26,.18),transparent 26%),radial-gradient(circle at 78% 18%,rgba(0,167,200,.16),transparent 28%);box-shadow:0 24px 60px rgba(75,45,14,.12);touch-action:none}.hanoi-main .hanoi-stage:before{content:"";position:absolute;left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);bottom:clamp(16px,2vw,24px);height:clamp(28px,5vw,46px);border:1px solid rgba(122,73,21,.24);border-radius:12px;background:repeating-linear-gradient(90deg,rgba(122,73,21,.28) 0 2px,transparent 2px 31%),linear-gradient(180deg,#ffe5a6 0,var(--wood-light) 34%,var(--wood-mid) 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(122,73,21,.14),0 10px 20px rgba(101,54,13,.16)}.hanoi-peg-area{position:relative;display:flex;min-width:0;min-height:clamp(220px,36vw,370px);flex-direction:column;align-items:center;padding:clamp(12px,2vw,18px) 4px 0;border:0;border-radius:22px;background:transparent;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}.hanoi-peg-area:active{cursor:grabbing}.hanoi-peg-area:before{content:"";position:absolute;inset:8px 2px clamp(34px,5vw,54px);border-radius:22px;background:rgba(255,255,255,0);transition:background .2s ease,box-shadow .2s ease}.hanoi-peg-area:focus-visible:before,.hanoi-peg-area:hover:before{background:rgba(255,255,255,.52);box-shadow:inset 0 0 0 2px rgba(255,138,0,.22)}.hanoi-peg-area.selected:before{background:rgba(255,245,215,.78);box-shadow:inset 0 0 0 2px rgba(255,122,26,.42),0 16px 32px rgba(255,122,26,.16)}.hanoi-peg-column{position:absolute;top:clamp(14px,2vw,24px);bottom:clamp(46px,6vw,76px);left:50%;z-index:0;width:clamp(10px,1.3vw,16px);transform:translateX(-50%);border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.72),transparent 30% 72%,rgba(122,73,21,.22)),linear-gradient(180deg,#ffe9b6,#ffc764 44%,#d98929);box-shadow:inset -2px 0 0 rgba(122,73,21,.14),0 3px 10px rgba(101,54,13,.18)}.hanoi-discs{position:relative;z-index:2;display:flex;width:100%;max-width:300px;flex:1;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:clamp(3px,.6vw,5px);margin-top:auto;padding-bottom:clamp(29px,5vw,48px)}.hanoi-disc,.hanoi-drag-disc{--disc-color:#ff7a1a;display:flex;align-items:center;justify-content:center;height:clamp(25px,4.5vw,38px);min-width:54px;border:1px solid rgba(37,37,37,.12);border-radius:12px;background:linear-gradient(90deg,rgba(0,0,0,.18) 0 19%,rgba(255,255,255,.46) 42% 54%,rgba(0,0,0,.12) 79% 100%),linear-gradient(180deg,color-mix(in srgb,var(--disc-color) 82%,#ffffff 18%) 0,var(--disc-color) 54%,color-mix(in srgb,var(--disc-color) 76%,#000000 24%) 100%);color:rgba(37,37,37,.72);font-size:clamp(11px,1.5vw,15px);font-weight:900;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.28);box-shadow:inset 0 3px 0 rgba(255,255,255,.36),inset 0 -3px 0 rgba(0,0,0,.13),0 5px 12px rgba(32,22,10,.2);transition:opacity .15s ease,transform .18s ease,filter .18s ease}.hanoi-disc--top{cursor:grab}.hanoi-peg-area.selected .hanoi-disc--top,.hanoi-peg-area:focus-visible .hanoi-disc--top,.hanoi-peg-area:hover .hanoi-disc--top{transform:translateY(-4px);filter:saturate(1.08)}.hanoi-disc--drag-source{opacity:.28;transform:translateY(-6px) scale(.97)}.hanoi-drag-disc{position:fixed;z-index:95;pointer-events:none;transform:translate(-50%,-50%) rotate(-2deg);opacity:.96;box-shadow:inset 0 3px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.14),0 18px 30px rgba(32,22,10,.28)}.hanoi-peg-base{left:9%;right:9%;bottom:clamp(22px,3vw,34px);z-index:1;height:clamp(12px,2.2vw,18px);border:1px solid rgba(122,73,21,.2);background:linear-gradient(90deg,rgba(255,255,255,.66),transparent 45%,rgba(122,73,21,.16)),linear-gradient(180deg,#ffe3a3,#e6a941);box-shadow:0 5px 10px rgba(101,54,13,.16)}.hanoi-peg-base,.hanoi-peg-label{position:absolute;border-radius:999px}.hanoi-peg-label{bottom:clamp(2px,1vw,8px);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#ffffff;color:#9b5a14;font-size:12px;font-weight:900;box-shadow:0 6px 12px rgba(101,54,13,.13)}@media (max-width:900px){.hanoi-stats{grid-template-columns:repeat(2,minmax(120px,1fr))}}@media (max-width:640px){.hanoi-wrap .hanoi-layout{padding:0 10px}.hanoi-main .hanoi-stage{gap:4px;min-height:330px;padding-inline:6px}.hanoi-peg-area{min-height:276px}.hanoi-discs{padding-bottom:42px}.hanoi-disc,.hanoi-drag-disc{min-width:42px;border-radius:10px}}