/* =============================================================
   GAME: Tower of Hanoi
   ============================================================= */
.board-hanoi {
  --bw: min(calc(100vw - 52px), 660px);
  --dh: min(28px, calc(var(--bw) * .062));
  --hn-glow: #9dff5c;
  width: var(--bw);
}
.hn-stage {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc((var(--n) + 2.8) * var(--dh) + 34px); padding: 0 4px; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 100%, rgba(157, 255, 92, .12), transparent 62%);
}
.hn-peg {
  position: relative; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; outline: none;
  border-radius: 14px; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s;
}
.hn-peg:hover { background: rgba(157, 255, 92, .04); }
.hn-peg:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.hn-peg.hn-target { background: rgba(157, 255, 92, .1); box-shadow: inset 0 0 0 2px rgba(157, 255, 92, .5); }
.hn-rod {
  position: absolute; left: 50%; width: 10px; margin-left: -5px; bottom: 20px; height: calc((var(--n) + 1.3) * var(--dh));
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, #4b3a8c, #b9a8ff 45%, #6b55c8);
  box-shadow: 0 0 10px rgba(185, 168, 255, .35);
}
.hn-sel .hn-rod, .hn-target .hn-rod { background: linear-gradient(90deg, #4e8c2c, #dcffc4 45%, #6fc23c); box-shadow: 0 0 16px rgba(157, 255, 92, .7); }
.hn-stack { position: absolute; left: 3px; right: 3px; bottom: 21px; height: calc((var(--n) + 2.4) * var(--dh)); pointer-events: none; }
.hn-disc {
  position: absolute; left: calc((100% - var(--w)) / 2); width: var(--w); height: calc(var(--dh) - 3px);
  bottom: calc(var(--k) * var(--dh)); border-radius: 999px; z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .25)),
    var(--c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, #000), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent), 0 3px 4px rgba(0, 0, 0, .4);
  display: grid; place-items: center;
  transition: bottom .16s ease, box-shadow .16s;
}
.hn-num { font: 800 calc(var(--dh) * .5) / 1 var(--font-body, sans-serif); color: rgba(10, 6, 30, .6); }
.hn-lift { bottom: calc((var(--n) + 1.5) * var(--dh)); box-shadow: 0 0 0 2px #fff, 0 0 22px var(--c), 0 8px 10px rgba(0, 0, 0, .4); }
.hn-drag { z-index: 20; transition: none; box-shadow: 0 0 0 2px #fff, 0 0 24px var(--c), 0 12px 16px rgba(0, 0, 0, .45); cursor: grabbing; }
.hn-base {
  position: absolute; left: 0; right: 0; bottom: 4px; height: 16px; border-radius: 8px; pointer-events: none;
  background: linear-gradient(180deg, #6b55c8, #3a2a7a 60%, #241a52);
  box-shadow: 0 0 0 1px var(--hn-glow), 0 0 22px rgba(157, 255, 92, .3), 0 8px 14px rgba(0, 0, 0, .45);
}
.hn-tag {
  position: absolute; left: 0; right: 0; bottom: 5px; z-index: 2; text-align: center; pointer-events: none;
  font: 800 11px/14px var(--font-body, sans-serif); color: rgba(255, 255, 255, .7);
}
.hn-goal .hn-tag { color: var(--hn-glow); text-shadow: 0 0 6px rgba(157, 255, 92, .9); }
.hn-won .hn-disc { animation: hnwin .5s ease-in-out infinite alternate; }
.hn-won .hn-disc:nth-child(2n) { animation-delay: .25s; }
@keyframes hnwin { to { filter: brightness(1.35); box-shadow: 0 0 0 1px #fff, 0 0 20px var(--c); } }
.hn-dot { background: linear-gradient(180deg, #ff4d6d 0 33%, #ffe14d 33% 66%, #3d9bff 66%); border-radius: 4px; }
.hn-note { color: #c9ffad; }
.hn-best { color: #c9ffad; }