/* letstack.css — LetStack 河內塔：只有「板面」（柱子＋盤子）。
   木框／教練／🌼／回家的路／折線圖／統計全部在 garden-kit.css（class gk-），這裡不要重寫。 */
.gk.lt { max-width: 560px; }

/* 縮圖與「家」裡的小塔 */
.lt-ref-goal { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 0 0 9px; }
.lt-ref-goal::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 34px; height: 3px; margin-left: -17px; border-radius: 2px; background: #c9a36a; }
.lt-ref-goal i { height: 8px; border-radius: 999px; background: #8b5cf6; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.lt-ref-goal i:nth-child(1), .lt .gk-road-home i:nth-child(1) { background: #60a5fa; }
.lt-ref-goal i:nth-child(2), .lt .gk-road-home i:nth-child(2) { background: #6366f1; }
.lt .gk-road-home i { height: 4px; border-radius: 999px; background: #8b5cf6; }

/* 板面：三根柱子 */
.lt-board {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #d8f0ff 0%, #eaf7e6 62%, #cfe9bd 100%);
  border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 3px 10px rgba(90, 55, 10, .28);
  touch-action: none; outline: none; user-select: none; -webkit-user-select: none;
  --base: 24px;                                   /* 底座高度 */
  --dh: min(40px, (100% - 34px) / 7);             /* 盤子高度：固定除以 7，6 個盤子也塞得下 */
}
.lt-board:focus-visible { box-shadow: inset 0 3px 10px rgba(90,55,10,.28), 0 0 0 3px #86efac; }

.lt-peg { position: absolute; top: 0; bottom: 0; width: calc(100% / 3); left: calc(var(--p) * 100% / 3); cursor: pointer; }
.lt-peg-post {
  position: absolute; left: 50%; bottom: var(--base); width: 14px; margin-left: -7px;
  height: calc(var(--dh) * 6.4); max-height: calc(100% - var(--base) - 10px);
  border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #c2915a, #e0b782 40%, #b57f45);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
}
.lt-peg-base {
  position: absolute; left: 8%; right: 8%; bottom: 0; height: var(--base);
  border-radius: 10px; background: linear-gradient(180deg, #d9a96e, #b9813f);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.lt-peg-lbl { font-size: 13px; font-weight: 900; color: #fff8ea; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* 小房子靠右上角：正中間會和「可以放」的綠色圓標撞在一起 */
.lt-peg-flag { position: absolute; right: 8%; top: 3px; font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.lt-peg.is-goal .lt-peg-base { background: linear-gradient(180deg, #86d9a2, #3f9c62); }
/* 落點區：拿著盤子時，三根柱子的可放／不可放提示畫在這裡 */
.lt-peg-zone {
  position: absolute; left: 6%; right: 6%; bottom: calc(var(--base) - 2px); top: 26px;
  border-radius: 14px; border: 3px solid transparent; pointer-events: none;
}
.lt-peg-badge { position: absolute; left: 50%; top: -14px; margin-left: -13px; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.lt-peg-badge svg { width: 15px; height: 15px; display: block; }
.lt-board--sel .lt-peg:not(.is-sel):hover .lt-peg-zone { border-color: rgba(255,255,255,.7); }
.lt-peg.is-sel .lt-peg-zone { border-color: rgba(255,255,255,.85); border-style: dashed; }
.lt-board--hints .lt-peg.is-good .lt-peg-zone { border-color: var(--gk-good); background: var(--gk-good-soft); }
.lt-board--hints .lt-peg.is-bad  .lt-peg-zone { border-color: var(--gk-bad); }
.lt-board--hints .lt-peg.is-same .lt-peg-zone { border-color: var(--gk-same); }
.lt-board--hints .lt-peg.is-no   .lt-peg-zone { border-color: var(--gk-no); border-style: dashed; }
.lt-board--hints .lt-peg.is-good .lt-peg-badge { display: grid; background: var(--gk-good); }
.lt-board--hints .lt-peg.is-bad  .lt-peg-badge { display: grid; background: var(--gk-bad); }
.lt-board--hints .lt-peg.is-same .lt-peg-badge { display: grid; background: var(--gk-same); }
.lt-board--hints .lt-peg.is-no   .lt-peg-badge { display: grid; background: var(--gk-no); }

/* 盤子 */
.lt-disk {
  position: absolute; left: calc(var(--p) * 100% / 3); width: calc(100% / 3);
  bottom: calc(var(--base) + var(--i) * var(--dh)); height: var(--dh);
  display: flex; align-items: center; justify-content: center;
  transition: left .19s cubic-bezier(.3,.8,.35,1), bottom .19s cubic-bezier(.3,.8,.35,1);
  cursor: pointer; z-index: 2; will-change: left, bottom;
}
.lt-disk.is-lift { bottom: calc(100% - var(--dh) - 4px); z-index: 4; }
.lt-disk-body {
  position: relative; width: var(--w); height: calc(100% - 4px); border-radius: 999px;
  background: var(--dc); display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.45), 0 2px 5px rgba(30,20,60,.25);
  border: 2px solid rgba(255,255,255,.75);
}
.lt-disk.is-lift .lt-disk-body { transform: scale(1.04); box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.45), 0 8px 16px rgba(30,20,60,.3); }
.lt-disk-face { font-size: clamp(11px, 2.6vw, 17px); line-height: 1; }
.lt-disk-num {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #1e1b4b; font-size: 12px; font-weight: 900;
  display: none; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.lt-board--nums .lt-disk-num { display: inline-flex; }
.lt-disk-badge {
  position: absolute; right: 2px; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%;
  display: none; place-items: center; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.lt-disk-badge svg { width: 13px; height: 13px; display: block; }
.lt-board--hints .lt-disk.is-good .lt-disk-badge { display: grid; background: var(--gk-good); }
.lt-board--hints .lt-disk.is-bad  .lt-disk-badge { display: grid; background: var(--gk-bad); }
.lt-board--hints .lt-disk.is-same .lt-disk-badge { display: grid; background: var(--gk-same); }
.lt-board--hints .lt-disk.is-good .lt-disk-body { border-color: var(--gk-good); box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 0 0 0 3px var(--gk-good-soft), 0 2px 5px rgba(30,20,60,.25); }
.lt-board--hints .lt-disk.is-bad  .lt-disk-body { border-color: var(--gk-bad); }
.lt-board--hints .lt-disk.is-same .lt-disk-body { border-color: var(--gk-same); }
.lt-board--won .lt-disk { cursor: default; }

/* 小手提示：哪個子元素發光由遊戲決定 */
.lt-disk.gk-glow .lt-disk-body { animation: gk-glow 1s ease-in-out infinite; }
.lt-peg.gk-glow .lt-peg-zone { animation: gk-glow-zone 1s ease-in-out infinite; }
.lt-disk .gk-hand { top: auto; bottom: -2px; }

@media (max-width: 480px) {
  .lt-board { --base: 20px; --dh: min(32px, (100% - 28px) / 7); }
}
@media (prefers-reduced-motion: reduce) { .lt-disk { transition: none; } }