/* letsort.css — LetSort 彩球分類：只有「板面」（試管＋球）。
   木框／教練／🌼／回家的路／折線圖／統計全部在 garden-kit.css（class gk-），這裡不要重寫。 */
.gk.so { max-width: 560px; }

/* 縮圖與「家」裡的三支小試管 */
.so-ref-goal { display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 0 0 10px; }
.so-ref-goal i { width: 11px; height: 34px; border-radius: 0 0 6px 6px; border: 2px solid #d9b77f; border-top: 0; }
.so .gk-road-home { flex-direction: row; align-items: flex-end; gap: 2px; }
.so .gk-road-home i { width: 22%; height: 70%; border-radius: 0 0 4px 4px; }
.so-ref-goal i:nth-child(1), .so .gk-road-home i:nth-child(1) { background: #ef4444; }
.so-ref-goal i:nth-child(2), .so .gk-road-home i:nth-child(2) { background: #3b82f6; }
.so-ref-goal i:nth-child(3), .so .gk-road-home i:nth-child(3) { background: #facc15; }

/* 板面：試管架。球的大小 --bs 由 JS 依板面寬度算（試管 5～8 根都要塞得下） */
.so-board {
  position: relative; width: 100%; height: calc(var(--bs) * 5 + 66px);
  background: linear-gradient(180deg, #fdf3e1 0%, #f7e6c8 70%, #e9cf9f 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;
  --bs: 40px; --base: 30px; --T: 5;
}
.so-board:focus-visible { box-shadow: inset 0 3px 10px rgba(90,55,10,.28), 0 0 0 3px #86efac; }
.so-board::after { content: ''; position: absolute; left: 3%; right: 3%; bottom: 8px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #d9a96e, #b9813f); }
.so-tube { position: absolute; top: 0; bottom: 0; width: calc(100% / var(--T)); left: calc(var(--t) * 100% / var(--T)); cursor: pointer; }
.so-tube-glass {
  position: absolute; left: 50%; bottom: var(--base); width: calc(var(--bs) + 8px); margin-left: calc(var(--bs) / -2 - 4px);
  height: calc(var(--bs) * 4 + 10px); box-sizing: border-box;
  border: 3px solid rgba(255,255,255,.95); border-top-width: 0; border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 45%, rgba(255,255,255,.4));
  box-shadow: 0 2px 6px rgba(90,55,10,.18);
}
.so-tube-glass::before { content: ''; position: absolute; left: -2px; right: -2px; top: -4px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.95); box-shadow: 0 1px 3px rgba(90,55,10,.2); }
.so-tube-lbl { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; z-index: 1; font-size: 11.5px; font-weight: 900; color: #fff8ea; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.so-tube-badge { position: absolute; left: 50%; top: calc(100% - var(--base) - var(--bs) * 4 - 44px); margin-left: -12px; width: 24px; height: 24px; border-radius: 50%; display: none; place-items: center; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); z-index: 5; }
.so-tube-badge svg { width: 14px; height: 14px; display: block; }
.so-tube.is-sel .so-tube-glass { border-style: dashed; }
.so-tube.is-done .so-tube-glass { border-color: #86d9a2; background: rgba(134,217,162,.25); }
.so-board--hints .so-tube.is-good .so-tube-glass { border-color: var(--gk-good); background: var(--gk-good-soft); }
.so-board--hints .so-tube.is-bad  .so-tube-glass { border-color: var(--gk-bad); }
.so-board--hints .so-tube.is-same .so-tube-glass { border-color: var(--gk-same); }
.so-board--hints .so-tube.is-no   .so-tube-glass { border-color: var(--gk-no); border-style: dashed; }
.so-board--hints .so-tube.is-good .so-tube-badge { display: grid; background: var(--gk-good); }
.so-board--hints .so-tube.is-bad  .so-tube-badge { display: grid; background: var(--gk-bad); }
.so-board--hints .so-tube.is-same .so-tube-badge { display: grid; background: var(--gk-same); }
.so-board--hints .so-tube.is-no   .so-tube-badge { display: grid; background: var(--gk-no); }

/* 球：顏色之外一定配符號（色盲也分得出來；提示的綠／橘是外圈＋圖示，不和球色搶） */
.so-ball {
  position: absolute; left: calc((var(--t) + .5) * 100% / var(--T)); margin-left: calc(var(--bs) / -2);
  bottom: calc(var(--base) + 5px + var(--i) * var(--bs)); width: var(--bs); height: var(--bs);
  transition: left .19s cubic-bezier(.3,.8,.35,1), bottom .19s cubic-bezier(.3,.8,.35,1);
  z-index: 2; cursor: pointer; will-change: left, bottom;
}
.so-ball.is-lift { bottom: calc(var(--base) + var(--bs) * 4 + 22px); z-index: 4; }
.so-ball-body {
  position: absolute; inset: 2px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%), var(--bc);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), 0 2px 5px rgba(30,20,60,.28);
  border: 2px solid rgba(255,255,255,.7); box-sizing: border-box;
  color: rgba(255,255,255,.95); font-size: calc(var(--bs) * .42); font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.so-ball-sym { display: none; }
.so-board--syms .so-ball-sym { display: block; }
.so-ball-badge { position: absolute; right: -3px; top: -3px; width: clamp(14px, calc(var(--bs) * .44), 20px); height: clamp(14px, calc(var(--bs) * .44), 20px); border-radius: 50%; display: none; place-items: center; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 1; }
.so-ball-badge svg { width: 62%; height: 62%; display: block; }
.so-board--hints .so-ball.is-good .so-ball-badge { display: grid; background: var(--gk-good); }
.so-board--hints .so-ball.is-bad  .so-ball-badge { display: grid; background: var(--gk-bad); }
.so-board--hints .so-ball.is-same .so-ball-badge { display: grid; background: var(--gk-same); }
.so-board--hints .so-ball.is-good .so-ball-body { border-color: var(--gk-good); box-shadow: 0 0 0 3px var(--gk-good-soft), 0 2px 5px rgba(30,20,60,.28); }
.so-board--hints .so-ball.is-bad  .so-ball-body { border-color: var(--gk-bad); }
.so-board--won .so-ball { cursor: default; }

/* 小手提示 */
.so-ball.gk-glow .so-ball-body { animation: gk-glow 1s ease-in-out infinite; }
.so-tube.gk-glow .so-tube-glass { animation: gk-glow-zone 1s ease-in-out infinite; }
.so-ball .gk-hand { top: auto; bottom: -8px; }
.so-tube > .gk-hand { top: calc(100% - var(--base) - var(--bs) * 4 - 50px); }
@media (prefers-reduced-motion: reduce) { .so-ball { transition: none; } }