/* letmatch.css — LetMatch 火柴算式：只有「板面」（一張 SVG 的火柴算式＋下方一行現況）。
   木框／教練／🌼／回家的路／折線圖／統計全部在 garden-kit.css（class gk-），這裡不要重寫。 */

.lm-ref-goal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lm-ref-icons { font-size: 13px; line-height: 1; letter-spacing: -1px; white-space: nowrap; }
.lm-ref-text { font-size: 10px; font-weight: 800; color: #7c5a21; line-height: 1; white-space: nowrap; }
.lm .gk-road-home { align-items: center; justify-content: center; }
.lm-home { font-size: 16px; line-height: 1; }
.lm-lvl button { padding: 0 12px; }
.lm-lvl button[disabled] { opacity: .35; cursor: default; }
.lm-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; }
.lm-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; }
.lm-pick { appearance: none; position: relative; height: 40px; border-radius: 10px; border: 2px solid #e5c58c; background: #fff; font: 800 15px/1 inherit; color: #475569; cursor: pointer; }
.lm-pick.is-done { background: #fef9c3; border-color: #eab308; }
.lm-pick.is-done::after { content: '⭐'; position: absolute; right: -5px; top: -7px; font-size: 12px; }
.lm-pick.is-cur { border-color: var(--gk-good); box-shadow: 0 0 0 2px var(--gk-good); }

.lm-board { position: relative; }
/* 綠色黑板 */
.lm-yard { position: relative; width: min(640px, 100%); margin: 0 auto; padding: 14px 10px 8px; box-sizing: border-box; border-radius: 18px; background: radial-gradient(ellipse at 50% 30%, #2f7a68, #1f5a4c 70%); border: 8px solid #b8722d; box-shadow: inset 0 0 0 3px #d9a066, inset 0 0 40px rgba(0,0,0,.35), 0 4px 0 #8a4f1c, 0 8px 12px rgba(60,30,0,.25); outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.lm-yard:focus-visible { box-shadow: inset 0 0 0 3px #d9a066, 0 0 0 3px #86efac; }
.lm-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* 位置：透明的粗線當點擊區；空位是淡淡的虛線（只有拿起火柴時才看得到） */
.lm-hit { stroke: transparent; stroke-width: 26; stroke-linecap: round; pointer-events: stroke; }
.lm-slot { cursor: pointer; }
.lm-ghost { stroke: rgba(255,255,255,.28); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 9; opacity: 0; transition: opacity .2s; pointer-events: none; }
.lm-yard--picking .lm-slot.is-empty .lm-ghost { opacity: 1; }
.lm-slot.is-on .lm-ghost { opacity: 0 !important; }
/* 火柴：木桿＋紅頭 */
.lm-stick { pointer-events: none; transition: transform .2s, opacity .2s; }
.lm-wood { stroke: #e9c27a; stroke-width: 9; stroke-linecap: round; }
.lm-head { fill: #d63b2f; }
.lm-slot.is-empty .lm-stick { opacity: 0; transform: scale(.6); transform-origin: 50px 80px; }
.lm-slot.is-on .lm-stick { opacity: 1; transform: none; }
.lm-slot.is-picked .lm-stick { opacity: 1; transform: translate(0, -10px); filter: drop-shadow(0 8px 6px rgba(0,0,0,.45)); animation: lm-hover 1s ease-in-out infinite; }
.lm-slot.is-picked .lm-wood { stroke: #fde68a; }
@keyframes lm-hover { 50% { transform: translate(0, -16px); } }
/* 提示色：火柴（沒拿起時）綠＝搬了會近一步；空位（拿起後）綠／橘／灰 */
.lm-slot.is-on.is-good .lm-wood { stroke: #86efac; }
.lm-slot.is-on.is-good .lm-head { fill: var(--gk-good); }
.lm-yard--picking .lm-slot.is-empty.is-good .lm-ghost { stroke: #86efac; stroke-dasharray: none; stroke-width: 8; opacity: 1; }
.lm-yard--picking .lm-slot.is-empty.is-bad .lm-ghost { stroke: #fdba74; opacity: .9; }
.lm-yard--picking .lm-slot.is-empty.is-same .lm-ghost { stroke: rgba(255,255,255,.45); }
/* 小手發光：SVG 裡不能放 emoji 元素，用外框閃 */
.lm-slot.gk-glow .lm-hit { stroke: rgba(253,224,71,.55); animation: lm-glow 1s ease-in-out infinite; }
.lm-slot.gk-glow .lm-ghost { opacity: 1; stroke: #fde047; }
@keyframes lm-glow { 50% { stroke: rgba(253,224,71,.15); } }
.lm-slot.gk-shake { animation: gk-shake .24s; }
/* 等號（黏住） */
.lm-eq-sign .lm-wood { stroke: #cbb07a; }
.lm-eq-sign .lm-head { fill: #9f2f26; }
/* 現況一行 */
.lm-eq { margin: 8px 0 0; text-align: center; font-size: 15px; font-weight: 800; color: #64748b; }
.lm-eq.is-ok { color: var(--gk-good); }
.lm-eq.is-odd { color: #94a3b8; }
.lm-yard--won { animation: lm-win .6s ease-in-out 2; }
@keyframes lm-win { 50% { box-shadow: inset 0 0 0 3px #d9a066, 0 0 0 6px #86efac, 0 8px 12px rgba(60,30,0,.25); } }
.lm .gk-win { position: absolute; top: auto; }
@media (max-width: 480px) { .lm-yard { padding: 8px 4px 4px; border-width: 5px; } .lm-eq { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .lm-stick { transition: none; } .lm-slot.is-picked .lm-stick, .lm-slot.gk-glow .lm-hit, .lm-yard--won { animation: none; } }
/* 拖曳：原位的火柴變淡、跟著手指的那根在最上層、最近的空位亮起來 */
.lm-slot.is-dragging .lm-stick { opacity: .25; animation: none; transform: none; filter: none; }
.lm-drag { pointer-events: none; filter: drop-shadow(0 8px 6px rgba(0,0,0,.45)); }
.lm-drag .lm-wood { stroke: #fde68a; }
.lm-slot.is-drop .lm-ghost { opacity: 1 !important; stroke: #fff; stroke-dasharray: none; stroke-width: 10; }