/* letshape.css — LetShape 幾何補橋：只有「板面」（河岸＋木橋＋洞＋零件盒＋轉的按鈕）。
   木框／教練／🌼／回家的路／折線圖／統計全部在 garden-kit.css（class gk-），這裡不要重寫。 */

.sh-ref-goal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sh-ref-icons { font-size: 13px; line-height: 1; letter-spacing: -1px; white-space: nowrap; }
.sh-ref-text { font-size: 10px; font-weight: 800; color: #7c5a21; line-height: 1.1; text-align: center; max-width: 58px; overflow-wrap: break-word; }
.sh .gk-road-home { align-items: center; justify-content: center; }
.sh-home { font-size: 18px; line-height: 1; }
.sh-lvl button { padding: 0 12px; }
.sh-lvl button[disabled] { opacity: .35; cursor: default; }
.sh-lvl-label { appearance: none; background: none; border: 0; border-left: 1px solid var(--gd-bd); border-right: 1px solid var(--gd-bd); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; padding: 0 12px; font-weight: 800; font-size: 14.5px; color: #334155; min-width: 86px; justify-content: center; }
.sh-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; width: 100%; max-height: 196px; overflow-y: auto; padding: 8px; box-sizing: border-box; background: #fff8ea; border: 2px solid #e5c58c; border-radius: 14px; }
.sh-pick { appearance: none; position: relative; height: 40px; border-radius: 10px; border: 2px solid #e5c58c; background: #fff; font-weight: 800; font-size: 15px; line-height: 1; font-family: inherit; color: #475569; cursor: pointer; }
.sh-pick.is-done { background: #fef9c3; border-color: #eab308; }
.sh-pick.is-done::after { content: '⭐'; position: absolute; right: -5px; top: -7px; font-size: 12px; }
.sh-pick.is-cur { border-color: var(--gk-good); box-shadow: 0 0 0 2px var(--gk-good); }

.sh-board { position: relative; --c: min(84px, calc((100vw - 56px) / var(--w, 4))); --bank: 60px; }   /* --w/--h 由 build() 設在 board 上，場景和零件盒都繼承 */
/* 場景佔整個木框寬：河橫貫全寬、上下是草岸，木橋從上岸架到下岸——河在橋兩邊都看得到，才像橋 */
.sh-scene { position: relative; width: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 3px 6px rgba(60,30,0,.2), inset 0 0 0 3px rgba(255,255,255,.25), inset 0 -12px 20px rgba(0,0,0,.08);   /* 光從上面來 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0 15q15-12 30 0t30 0' fill='none' stroke='%23bfdbfe' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 60px 30px repeat, #3b82f6; }
.sh-bank { position: relative; height: var(--bank); display: flex; align-items: center; justify-content: center; z-index: 3;
  background: radial-gradient(circle at 18% 60%, #a3e07c 0 5px, transparent 6px), radial-gradient(circle at 78% 30%, #a3e07c 0 4px, transparent 5px), radial-gradient(circle at 55% 75%, #6dbf7a 0 4px, transparent 5px), #7ccf8a; background-size: 110px 60px, 90px 60px, 130px 60px, auto; }
.sh-bank--top { border-bottom: 6px solid #5da868; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.sh-bank--bot { border-top: 6px solid #5da868; box-shadow: 0 -4px 0 rgba(0,0,0,.12); }
.sh-dino { width: 44px; height: 44px; border-radius: 50%; background: url("/assets/img/rexcode-logo.webp") center / cover no-repeat #fff; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.22); box-sizing: border-box; transition: transform 1.4s ease-in-out; z-index: 5; position: relative; }
.sh-scene--won .sh-dino { transform: translateY(calc(var(--c) * var(--h) + var(--bank))); animation: sh-walk .35s steps(2) 4; }
@keyframes sh-walk { 50% { margin-top: -6px; } }
.sh-flag { font-size: 30px; line-height: 1; animation: sh-wave 1.4s ease-in-out infinite; transform-origin: bottom left; }
@keyframes sh-wave { 50% { transform: rotate(-8deg); } }
/* 木橋：橫的木板，比河長一點、伸進兩岸；兩側欄杆（柱子＋橫桿） */
.sh-deck { position: relative; width: calc(var(--c) * var(--w)); height: calc(var(--c) * var(--h)); margin: -10px auto; z-index: 4; outline: none; touch-action: none; user-select: none; -webkit-user-select: none;
  background: repeating-linear-gradient(180deg, #d9a765 0, #d9a765 calc(var(--c) * .48), #b9853f calc(var(--c) * .48), #b9853f calc(var(--c) * .5), #cf9b58 calc(var(--c) * .5), #cf9b58 calc(var(--c) * .98), #a9762f calc(var(--c) * .98), #a9762f var(--c));
  box-shadow: 0 0 0 5px #8a5c34, 0 10px 0 #5a3a1c, 0 10px 0 5px #4a2c12, 0 16px 16px rgba(0,0,0,.35); border-radius: 3px; }   /* 橋板厚度＋橋底陰影 */
/* 欄杆：左右各一根粗木柱，從上岸插到下岸，兩端有柱頭（照 Rex 給的參考圖） */
/* 護欄：每一格一根深色木樁（左亮右暗有立體感），木樁之間是麻花紋的繩子；兩端是岸上的大柱頭 */
.sh-rail { position: absolute; top: calc(var(--bank) * -.55); bottom: calc(var(--bank) * -.55); width: 16px; left: -26px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, #a5713f 0, #a5713f 22px, transparent 22px) 3px calc(var(--c) * .5 - 11px) / 5px var(--c) repeat-y,
    linear-gradient(180deg, #3f2411 0, #3f2411 22px, transparent 22px) 0 calc(var(--c) * .5 - 11px) / 16px var(--c) repeat-y,
    repeating-linear-gradient(160deg, #dcb87c 0, #dcb87c 5px, #a67c45 5px, #a67c45 8px) 5px 0 / 6px 100% repeat-y;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.sh-rail--r { left: auto; right: -26px; }
.sh-rail::before, .sh-rail::after { content: ''; position: absolute; left: -4px; width: 24px; height: 26px; border-radius: 6px; background: linear-gradient(90deg, #3f2411, #8a5c34 40%, #5a3a1c); border: 2px solid #2f1a0a; box-sizing: border-box; }
.sh-rail::before { top: -6px; }
.sh-rail::after { bottom: -6px; }
.sh-deck::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--c) - 2px), rgba(0,0,0,.12) calc(var(--c) - 2px), rgba(0,0,0,.12) var(--c)); }
.sh-deck:focus-visible { box-shadow: 0 0 0 5px #8a5c34, 0 10px 0 #5a3a1c, 0 0 0 9px #86efac; }
.sh-hole, .sh-ghost, .sh-hint { position: absolute; inset: 0; pointer-events: none; }
.sh-hole svg, .sh-ghost svg, .sh-hint svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.sh-ghost { z-index: 3; }
.sh-ghost-fill { fill: rgba(255,255,255,.35); }
.sh-ghost-line { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 18 12; stroke-linecap: round; }
.sh-ghost.is-ok .sh-ghost-fill { fill: rgba(134,239,172,.55); }
.sh-ghost.is-ok .sh-ghost-line { stroke: #16a34a; }
.sh-hint { z-index: 3; animation: sh-blink .9s ease-in-out infinite; }
.sh-hint .sh-ghost-fill { fill: rgba(253,224,71,.45); }
.sh-hint .sh-ghost-line { fill: none; stroke: #facc15; stroke-width: 10; stroke-dasharray: 18 12; stroke-linecap: round; }
@keyframes sh-blink { 50% { opacity: .45; } }

/* 積木：--pw × --ph 格；在洞裡照 --x/--y 擺；在零件盒裡縮成 --tc 一格；拖的時候 position: fixed 跟著手指（不換父層，pointer capture 才不會掉） */
.sh-piece { position: absolute; left: calc(var(--x, 0) * var(--c)); top: calc(var(--y, 0) * var(--c)); width: calc(var(--pw) * var(--c)); height: calc(var(--ph) * var(--c)); z-index: 2; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; outline: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.sh-piece svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; overflow: visible; }
/* 角落的綠色旋轉圖示：零件盒裡才有（點它＝轉一下） */
.sh-rot { position: absolute; right: -7px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center; background: #22a35a; color: #fff; font-size: 13px; font-weight: 900; line-height: 1; border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,.35); z-index: 3; }
.sh-slot .sh-piece:not(.is-drag) .sh-rot { display: grid; }
.sh-piece.is-sel { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.sh-piece:focus-visible { filter: drop-shadow(0 0 0 #facc15) drop-shadow(0 0 4px #facc15); }
.sh-piece.is-pop svg { animation: sh-pop .22s cubic-bezier(.2,.9,.3,1.3); }
@keyframes sh-pop { 40% { transform: scale(1.12); } }
.sh-piece.is-drag, .sh-slot .sh-piece.is-drag { position: fixed; --c: var(--bc); z-index: 60; cursor: grabbing; filter: drop-shadow(0 10px 8px rgba(0,0,0,.35)); transition: none; }
.sh-piece.is-drag svg { transform: scale(1.04); }
.sh-piece.gk-glow { animation: gk-glow 1s ease-in-out infinite; border-radius: 10px; }
.sh-piece .gk-hand { top: auto; bottom: -10px; }
/* 提示徽章：綠色 🏠＝現在就能放、↻＝先轉；橘色 ↩＝放錯了；✓＝放對了 */
.sh-badge { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; color: #fff; font-size: 14px; font-weight: 900; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.4); z-index: 3; }
.sh-badge svg { position: static; width: 13px; height: 13px; inset: auto; }
.sh-piece.has-good .sh-badge { display: grid; background: var(--gk-good); }
.sh-piece.has-bad .sh-badge { display: grid; background: var(--gk-bad); }
.sh-piece.has-ok .sh-badge { display: grid; background: #fff; color: var(--gk-good); border: 2px solid var(--gk-good); box-sizing: border-box; font-size: 12px; }

/* 零件盒 */
.sh-tray { --tc: clamp(34px, calc(var(--c) * .66), 44px); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px 18px; margin: 12px auto 0; padding: 12px 12px 8px; box-sizing: border-box; width: 100%; min-height: 70px; background: #fff8ea; border: 2px solid #e5c58c; border-radius: 16px; }
.sh-board { --c: min(64px, calc((100vw - 76px) / var(--w, 4))); }   /* --w/--h 由 build() 設在 board 上，場景和零件盒都繼承 */
.sh-slot { position: relative; width: calc(var(--pw) * var(--tc)); height: calc(var(--ph) * var(--tc)); margin-bottom: 16px; padding: 5px; border-radius: 8px; border: 2px dashed #d8c39a; box-sizing: content-box; }
.sh-slot:not(:has(.sh-piece:not(.is-drag))) { background: #f7efdf; }
.sh-slot .sh-piece { --c: var(--tc); left: 5px; top: 5px; }
.sh-area { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-size: 12px; font-weight: 900; color: #7c5a21; background: #fff; border: 1px solid #e5c58c; border-radius: 999px; padding: 0 7px; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-ops { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.sh-ops .gd-btn { min-height: 40px; }
.sh-ops .gd-btn[disabled] { opacity: .45; cursor: default; }
.sh-ops:not(.has-flip) .gd-btn:nth-child(3) { display: none; }
.sh-ops .is-good { border-color: var(--gk-good); background: #ecf8ef; box-shadow: 0 3px 0 var(--gk-good); }
.sh-ops .is-bad { border-color: var(--gk-bad); box-shadow: 0 3px 0 var(--gk-bad); }
.sh-ops .is-same { border-color: var(--gk-same); }
.sh-ops .gd-btn.gk-glow { animation: gk-glow 1s ease-in-out infinite; }

.sh .gk-win { position: absolute; top: auto; }
@media (max-width: 480px) { .sh-board { --bank: 52px; } .sh-dino { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .sh-dino { transition: none; } .sh-scene--won .sh-dino, .sh-flag, .sh-hint, .sh-piece.is-pop svg { animation: none; } }