/* letmarble.css — LetMarble 彈珠軌道：只有「板面」（起點｜軌道格子｜杯子｜右邊升降機＋自由玩零件盒＋放彈珠鈕）。
   木框／教練／🌼／回家的路／折線圖／統計全部在 garden-kit.css（class gk-），這裡不要重寫。
   座標：一格 --c；軌道第 y 列在舞台上的 top ＝ (y + --top) × --c（上面留 --top 格放起點）；杯子那一列是 y ＝ h；
   舞台右邊多 --lift 格放螺旋升降機。JS 的 TOP／LIFT 常數要跟這裡一樣。 */

.lm-ref-goal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lm-ref-icons { font-size: 12px; line-height: 1; letter-spacing: -1px; white-space: nowrap; }
.lm-ref-text { font-size: 10px; font-weight: 800; color: #7c5a21; line-height: 1.1; text-align: center; max-width: 58px; overflow-wrap: break-word; }
.lm .gk-road-home { align-items: center; justify-content: center; }
.lm-home { font-size: 18px; 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 { --top: 1.3; --lift: .5; --c: min(66px, calc(600px / (var(--w) + var(--lift))), calc((100vw - 80px) / (var(--w) + var(--lift)))); position: relative; width: calc(var(--c) * (var(--w) + var(--lift)) + 16px); margin: 0 auto; padding: 8px; box-sizing: border-box; border-radius: 18px; background: linear-gradient(180deg, #a06f41, #7c5230); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), 0 4px 10px rgba(60,30,0,.28); }
.lm-stage { position: relative; width: calc(var(--c) * (var(--w) + var(--lift))); height: calc(var(--c) * (var(--h) + 1 + var(--top))); border-radius: 12px; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: radial-gradient(circle, rgba(110,70,30,.26) 0 1.5px, transparent 2.1px) 0 0 / calc(var(--c) / 2) calc(var(--c) / 2), linear-gradient(180deg, #f8e8c8, #ebcf9e);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.14), inset 0 0 44px rgba(120,70,20,.18); }
.lm-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 28% 0%, rgba(255,246,214,.55), transparent 70%), radial-gradient(ellipse 50% 35% at 90% 100%, rgba(255,210,140,.18), transparent 70%); }
.lm-stage:focus-visible { box-shadow: inset 0 3px 8px rgba(0,0,0,.14), 0 0 0 3px #86efac; }

/* 起點：牌子、漏斗口、小閘門、到升降機的軌道 */
.lm-sign { position: absolute; left: calc((var(--x) + .5) * var(--c)); top: 3px; transform: translateX(-50%); white-space: nowrap; font-size: max(9px, calc(var(--c) * .18)); font-weight: 900; color: #7c2d12; background: #fff7ed; border: 2px solid #fdba74; border-radius: 6px; padding: 0 5px; line-height: 1.35; z-index: 3; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.lm-chute { position: absolute; left: calc((var(--x) + .14) * var(--c)); top: calc((var(--top) - .34) * var(--c)); width: calc(var(--c) * .72); height: calc(var(--c) * .34); z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, #b8860b, #f3c969 40%, #b8860b); clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%); opacity: .95; }
.lm-chute::after { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 26%; background: rgba(90,50,10,.45); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.lm-gate { position: absolute; left: calc((var(--x) + .3) * var(--c)); top: calc((var(--top) - .02) * var(--c)); width: calc(var(--c) * .4); height: 4px; border-radius: 2px; background: #7c2d12; z-index: 3; pointer-events: none; transform-origin: 0 50%; transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.lm-stage.is-running .lm-gate { transform: rotate(-70deg); }
.lm-rail { position: absolute; left: calc((var(--x) + .5) * var(--c)); top: calc((var(--top) - .16) * var(--c)); width: calc((var(--w) + var(--lift) / 2 - var(--x) - .5) * var(--c)); height: 4px; border-radius: 2px; background: linear-gradient(180deg, #f3c969, #9a6b12); z-index: 1; pointer-events: none; box-shadow: 0 1px 1px rgba(0,0,0,.2); }
.lm-rail--l { width: calc(var(--c) * 1.3); transform: translateX(-100%); }

/* 右邊的螺旋升降機：玻璃管（蓋在彈珠上面，彈珠看起來在管子裡）＋黃銅螺旋＋頂上的齒輪 */
.lm-lift { position: absolute; left: calc(var(--w) * var(--c)); top: calc((var(--top) - 1.08) * var(--c)); width: calc(var(--lift) * var(--c)); height: calc((var(--h) + 2.06) * var(--c)); z-index: 5; pointer-events: none; }
.lm-lift-tube { position: absolute; left: 4%; right: 4%; top: calc(var(--c) * .42); bottom: 0; border-radius: 999px 999px 6px 6px; background: rgba(224,242,254,.28); border: 2px solid rgba(255,255,255,.9); box-sizing: border-box; overflow: hidden; box-shadow: inset 2px 0 0 rgba(255,255,255,.55), inset -1px 0 0 rgba(0,0,0,.1); }
.lm-lift-screw { position: absolute; top: 0; bottom: 0; left: 22%; right: 22%; opacity: .75;
  background: linear-gradient(162deg, transparent 0 28%, #f3c969 28% 46%, #9a6b12 46% 58%, transparent 58%) 0 0 / 100% 12px repeat-y; }
.lm-lift-screw::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(154,107,18,.7); }
.lm-lift-gear { position: absolute; left: 50%; top: 0; width: calc(var(--c) * .5); height: calc(var(--c) * .5); transform: translateX(-50%); }
.lm-lift-gear svg { width: 100%; height: 100%; display: block; }
.lm-lift.is-on .lm-lift-screw { animation: lm-screw .3s linear infinite; }
.lm-lift.is-on .lm-lift-gear svg { animation: lm-spin 1s linear infinite; }
@keyframes lm-screw { to { background-position: 0 -12px; } }
@keyframes lm-spin { to { rotate: 360deg; } }

/* 格子上的東西 */
.lm-piece { position: absolute; left: calc(var(--x) * var(--c)); top: calc((var(--y) + var(--top)) * var(--c)); width: var(--c); height: var(--c); padding: 0; margin: 0; border: 0; background: none; box-sizing: border-box; z-index: 2; }
.lm-rot { position: absolute; inset: 0; transition: transform .32s cubic-bezier(.3,1.35,.55,1); }
.lm-rot svg { width: 100%; height: 100%; display: block; }
.lm-tap { appearance: none; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; }
.lm-tap:focus-visible { outline: 3px solid #22c55e; outline-offset: -3px; }
.lm-tap:active .lm-rot { scale: .9; }
@media (hover: hover) { .lm-tap:hover { background: rgba(255,255,255,.35); } }
.lm-stage.is-running .lm-tap { cursor: default; }
/* 彈珠敲到：彈一下；自由玩剛放上去：蹦出來 */
.lm-piece.is-hit .lm-rot, .lm-funnel.is-hit svg, .lm-maze.is-hit svg { animation: lm-hit .3s ease-out; }
@keyframes lm-hit { 35% { scale: 1.1; } 70% { scale: .97; } }
.lm-piece.is-new { animation: lm-pop .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes lm-pop { from { scale: .4; opacity: .2; } 60% { scale: 1.12; opacity: 1; } }
/* 能點的都有一顆黃銅旋鈕＋↻（不跟著斜坡轉；翻的時候自己轉一圈） */
.lm-knob { position: absolute; left: 50%; top: 50%; width: calc(var(--c) * .3); height: calc(var(--c) * .3); transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 38% 32%, #fff6c9, #e8b93f 55%, #9a6b12); box-shadow: 0 1px 2px rgba(0,0,0,.35); color: #5b3a12; font-size: max(10px, calc(var(--c) * .2)); font-weight: 900; line-height: 1; }
.lm-split .lm-knob { background: radial-gradient(circle at 38% 32%, #fff, #93c5fd 55%, #1d4ed8); color: #1e3a8a; }
.lm-badge { --b: min(20px, calc(var(--c) * .4)); position: absolute; left: 1px; top: 1px; width: var(--b); height: var(--b); border-radius: 50%; display: none; place-items: center; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); z-index: 1; pointer-events: none; }
.lm-badge svg { width: 60%; height: 60%; display: block; }
.lm-tap.is-good .lm-badge { display: grid; background: var(--gk-good); }
.lm-tap.is-bad .lm-badge { display: grid; background: var(--gk-bad); }
.lm-tap.is-same .lm-badge { display: grid; background: var(--gk-same); }
.lm-tap.is-good { box-shadow: inset 0 0 0 3px var(--gk-good); background: rgba(47,138,80,.1); }
.lm-tap.gk-glow { animation: gk-glow 1s ease-in-out infinite; }
.lm-tap .gk-hand { top: 18%; }
/* 螺旋、漏斗是玻璃，蓋在彈珠上面；迷宮盒在彈珠後面（看得到彈珠在裡面繞） */
.lm-spiral, .lm-funnel { z-index: 5; pointer-events: none; }
.lm-funnel, .lm-maze { width: calc(var(--c) * var(--len, 3)); }
.lm-funnel svg, .lm-maze svg { width: 100%; height: 100%; display: block; }
.lm-maze { z-index: 2; pointer-events: none; }
/* 齒輪鏈子 */
.lm-chains, .lm-trail, .lm-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lm-chains { z-index: 1; }
.lm-chain.is-turn .lm-chain-links { animation: lm-chain .45s linear; }
@keyframes lm-chain { to { stroke-dashoffset: -.44; } }
.lm-fx { z-index: 3; }

/* 黑洞：塞滿自己那一格的紫色星空圓盤；外圈虛線一直往裡縮＝「會吸」；挑食黑洞有顏色外圈＋記號，吃不到正在滾的那顆時睡覺 */
.lm-void { z-index: 2; }
.lm-void svg { width: 100%; height: 100%; display: block; }
.lm-void .lm-void-arms { transform-box: view-box; transform-origin: 50% 50%; animation: lm-spin 5s linear infinite; }
.lm-void::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(167,139,250,.6); pointer-events: none; animation: lm-suck 1.6s ease-in infinite; }
@keyframes lm-suck { from { scale: 1.1; opacity: 0; } 40% { opacity: 1; } to { scale: .5; opacity: 0; } }
.lm-void-badge { position: absolute; right: 3%; top: 3%; min-width: 14px; height: 14px; padding: 0 2px; box-sizing: border-box; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.4); }
.lm-void.is-sleep { opacity: .45; transition: opacity .2s; }
.lm-void.is-sleep .lm-void-arms, .lm-void.is-sleep::after { animation-play-state: paused; }
.lm-void.is-gulp svg { animation: lm-gulp .32s ease-out; }
@keyframes lm-gulp { 45% { scale: 1.25; } }
.lm-trail.is-void polyline, .lm-trail.is-void .lm-trail-x path { stroke: #7c3aed; }
.lm-trail.is-void .lm-trail-x circle { stroke: #7c3aed; }

/* 杯子列 */
.lm-shelf { position: absolute; left: 0; right: 0; top: calc((var(--y) + var(--top) + .78) * var(--c)); height: calc(var(--c) * .24); background: linear-gradient(180deg, #d9975a, #9a5b25); box-shadow: inset 0 2px 0 rgba(255,255,255,.3); z-index: 1; }
.lm-cup { position: absolute; left: calc((var(--x) + .09) * var(--c)); top: calc((var(--y) + var(--top) + .02) * var(--c)); width: calc(var(--c) * .82); height: calc(var(--c) * .82); z-index: 5; pointer-events: none; transform-origin: 50% 100%; }
.lm-cup svg { width: 100%; height: 100%; display: block; }
.lm-cup.is-hit { animation: lm-cup-hop .4s; }
.lm-yard--won .lm-cup.is-full { animation: lm-cup-glow .7s ease-in-out infinite alternate; }
@keyframes lm-cup-hop { 40% { transform: translateY(-9%) scale(1.08); } }
@keyframes lm-cup-glow { to { filter: drop-shadow(0 0 6px #fde047) drop-shadow(0 0 2px #fff); } }
.lm-hole { position: absolute; left: calc((var(--x) + .2) * var(--c)); top: calc((var(--y) + var(--top) + .72) * var(--c)); width: calc(var(--c) * .6); height: calc(var(--c) * .16); border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #1c1008 55%, #5c3a1a); box-shadow: inset 0 2px 3px rgba(0,0,0,.6); z-index: 2; pointer-events: none; }

/* 走錯的路 */
.lm-trail { z-index: 3; opacity: 0; transition: opacity .3s; }
.lm-trail.is-on { opacity: 1; }
.lm-trail polyline { fill: none; stroke: var(--gk-bad); stroke-width: .06; stroke-dasharray: .1 .09; stroke-linecap: round; stroke-linejoin: round; }
.lm-trail-x circle { fill: #fff; stroke: var(--gk-bad); stroke-width: .05; }
.lm-trail-x path { stroke: var(--gk-bad); stroke-width: .06; stroke-linecap: round; }

/* 彈珠：--mx／--my 是格座標（JS 每一格畫面設一次）。玻璃裡的花紋（::before）跟著滾，亮點和記號不轉 */
.lm-marble { position: absolute; left: 0; top: 0; width: calc(var(--c) * .48); height: calc(var(--c) * .48); margin: calc(var(--c) * -.24) 0 0 calc(var(--c) * -.24); border-radius: 50%; z-index: 4; pointer-events: none; overflow: hidden;
  transform: translate(calc(var(--mx, 0) * var(--c)), calc((var(--my, 0) + var(--top)) * var(--c)));
  background: radial-gradient(circle at 33% 28%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 17%), radial-gradient(circle at 50% 55%, var(--m1) 0%, var(--m2) 50%, var(--m3) 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,.35), inset -1px -2px 3px rgba(0,0,0,.22); }
.lm-marble::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; transform: rotate(var(--spin, 0deg));
  background: conic-gradient(from 0deg, transparent 0 9%, rgba(255,255,255,.6) 11% 17%, transparent 19% 42%, var(--m1) 44% 52%, transparent 54% 71%, rgba(255,255,255,.4) 73% 78%, transparent 80%); opacity: .75; }
.lm-marble::after { content: attr(data-sym); position: absolute; inset: 0; display: grid; place-items: center; font-size: max(8px, calc(var(--c) * .19)); line-height: 1; color: rgba(255,255,255,.95); font-weight: 900; text-shadow: 0 0 2px rgba(0,0,0,.5); transition: opacity .15s; }
.lm-face { position: absolute; inset: 6%; opacity: 0; transform: scale(.3); transition: opacity .15s, transform .3s cubic-bezier(.3,1.7,.5,1); }
.lm-face svg { width: 100%; height: 100%; display: block; }
.lm-marble.has-face .lm-face { opacity: 1; transform: none; }
.lm-marble.has-face::after { opacity: 0; }
.lm-marble.is-queue { transition: transform .35s cubic-bezier(.3,1.25,.5,1), opacity .35s; }
.lm-marble.is-instant { transition: none !important; }
.lm-marble.is-lost { opacity: 0; transition: opacity .5s .15s; }
.lm-marble.is-gone { opacity: 0; transition: opacity .18s; }
.lm-marble.is-back { z-index: 3; }   /* 搭升降機回來的從排隊的彈珠後面經過 */
.lm-marble.is-sink { scale: .2; opacity: 0; transition: scale .4s ease-in, opacity .4s ease-in; }
.lm-marble.is-void { scale: .1; opacity: 0; transition: scale .42s ease-in, opacity .42s ease-in; }   /* 被黑洞吸進去：拉長縮小 */
.lm-marble.gk-shake { animation: gk-shake .24s 2; }
.lm-yard--won .lm-marble.is-home { animation: lm-bob .5s ease-in-out infinite alternate; }
@keyframes lm-bob { to { margin-top: calc(var(--c) * -.3); } }

/* 放彈珠鈕：亮亮的一道光掃過去 */
.lm-go { display: flex; justify-content: center; margin: 12px auto 0; }
.lm-go-btn { appearance: none; position: relative; min-width: 180px; height: 54px; padding: 0 24px; border-radius: 18px; border: 3px solid #15803d; background: linear-gradient(180deg, #4ade80, #22c55e); color: #fff; font: 900 19px/1 inherit; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: 0 4px 0 #15803d; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .06s, box-shadow .06s, opacity .15s; overflow: visible; }
.lm-go-btn::before { content: ''; position: absolute; inset: 0; border-radius: 15px; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 48%, transparent 60%) 0 0 / 250% 100% no-repeat; animation: lm-shine 3.4s ease-in-out infinite; }
@keyframes lm-shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.lm-go-text { position: relative; }
.lm-go-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #15803d; }
.lm-go-btn[aria-busy="true"] { background: linear-gradient(180deg, #86efac, #4ade80); }   /* 跑的時候再按＝快轉 */
.lm-go-btn.is-fast, .lm-go-btn[disabled] { opacity: .5; cursor: default; }
.lm-go-btn.is-ready { animation: lm-ready 1.1s ease-in-out infinite; }
.lm-go-btn.is-ready .gk-pad-badge:not(:empty) { display: grid; background: var(--gk-good); }
.lm-go-btn.gk-glow { animation: gk-glow 1s ease-in-out infinite; }
.lm-go-btn .gk-hand { top: auto; bottom: -18px; }
@keyframes lm-ready { 50% { box-shadow: 0 4px 0 #15803d, 0 0 0 8px rgba(74,222,128,.35); } }
.lm .gk-win { position: absolute; top: 8px; bottom: auto; }   /* 放上面：下面的杯子裡有剛滾進去的彈珠 */

/* 自由玩：零件盒、幾顆彈珠、游標框 */
.lm-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 460px; margin: 12px auto 0; }
@media (min-width: 620px) { .lm-tools { grid-template-columns: repeat(8, 1fr); max-width: 660px; } }
.lm-tool { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 5px 2px; border-radius: 12px; border: 2px solid #e5c58c; background: #fff8ea; cursor: pointer; font: 800 11.5px/1.1 inherit; color: #7a4f14; box-shadow: 0 2px 0 #e5c58c; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lm-tool:active { transform: translateY(2px); box-shadow: none; }
.lm-tool[aria-pressed="true"] { background: #fde68a; border-color: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,.3), 0 2px 0 #eab308; }
.lm-tool-ico { width: 32px; height: 32px; display: grid; place-items: center; font-size: 24px; line-height: 1; }
.lm-tool-ico svg { width: 100%; height: 100%; display: block; }
.lm-tool-ico--wide { width: 44px; }
.lm-tool-name { text-align: center; }
.lm-freebar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.lm-freebar .gk-seg button { font-size: 15px; letter-spacing: -1px; }
.lm-cursor { position: absolute; left: calc(var(--x) * var(--c)); top: calc((var(--y) + var(--top)) * var(--c)); width: var(--c); height: var(--c); box-sizing: border-box; border: 3px dashed rgba(234,179,8,.85); border-radius: 10px; z-index: 6; pointer-events: none; background: rgba(253,230,138,.18); }
.lm-cursor.is-edge { border-color: rgba(124,45,18,.5); background: rgba(255,247,237,.35); }
.lm-stage.is-erase .lm-cursor { border-color: rgba(196,86,14,.8); background: rgba(196,86,14,.1); }
.lm--free .gk-stats { display: none; }
.lm--free .lm-stage { cursor: crosshair; }
.lm--free .lm-hole::after { content: '＋'; position: absolute; left: 50%; top: -120%; transform: translateX(-50%); font-size: max(10px, calc(var(--c) * .22)); font-weight: 900; color: rgba(122,79,20,.45); }
.lm-free-btn { background: linear-gradient(180deg, #fef3c7, #fde68a); border-color: #eab308; color: #713f12; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .lm-rot, .lm-marble.is-queue, .lm-gate { transition: none; }
  .lm-void .lm-void-arms, .lm-void::after { animation: none; }
  .lm-go-btn::before, .lm-go-btn.is-ready, .lm-yard--won .lm-cup.is-full, .lm-yard--won .lm-marble.is-home, .lm-cup.is-hit, .lm-chain.is-turn .lm-chain-links,
  .lm-piece.is-hit .lm-rot, .lm-funnel.is-hit svg, .lm-maze.is-hit svg, .lm-piece.is-new, .lm-lift.is-on .lm-lift-screw, .lm-lift.is-on .lm-lift-gear svg { animation: none; }
}