/* letegg.css — LetEgg 數蛋：只有「板面」（題目、算式、雞窩／盒子／小雞、籃子、數字卡）。
   木框／教練／🌼／回家的路／統計全部在 garden-kit.css（class gk-），這裡不要重寫。 */

.le-ref-goal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.le-ref-icons { font-size: 15px; line-height: 1; white-space: nowrap; }
.le-ref-text { font-size: 10px; font-weight: 800; color: #7c5a21; line-height: 1.1; text-align: center; max-width: 58px; }
.le .gk-road-home { align-items: center; justify-content: center; }
.le-home { font-size: 16px; line-height: 1; }
.le-lvl button { padding: 0 12px; }
.le-lvl button[disabled] { opacity: .35; cursor: default; }
.le-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; }
.le-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; }
.le-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; }
.le-pick--add { border-color: #86efac; } .le-pick--mul { border-color: #fcd34d; } .le-pick--div { border-color: #93c5fd; }
.le-pick.is-done { background: #fef9c3; border-color: #eab308; }
.le-pick.is-done::after { content: '⭐'; position: absolute; right: -5px; top: -7px; font-size: 12px; }
.le-pick.is-cur { border-color: var(--gk-good); box-shadow: 0 0 0 2px var(--gk-good); }

.le-board { position: relative; width: min(640px, 100%); margin: 0 auto; }
.le-q { margin: 0 auto 6px; max-width: 520px; text-align: center; font-weight: 800; font-size: 16px; color: #5b3a12; line-height: 1.4; }   /* 不要拉到籃子上面，太長就折行 */
.le-eq { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin: 0 0 10px; font-weight: 900; font-size: 30px; color: #334155; font-variant-numeric: tabular-nums; }
.le-eq-ans { display: inline-block; min-width: 1.4em; text-align: center; border-bottom: 4px solid #cbd5e1; color: #94a3b8; }
.le-eq-ans.is-live { color: #b45309; border-color: #f59e0b; }
.le-eq-ans.is-done { color: #15803d; border-color: #22c55e; }
/* 乘法＝連加：[5]+[ ]+[ ]+[ ] = ? */
.le-add { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 4px; margin: -4px 0 10px; font-weight: 900; font-size: 20px; color: #475569; font-variant-numeric: tabular-nums; }
.le-add[hidden] { display: none; }
.le-add-op { padding: 0 2px; }
.le-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; color: #94a3b8; font-size: 22px; }
.le-slot::before { content: '['; color: #64748b; margin-right: 2px; } .le-slot::after { content: ']'; color: #64748b; margin-left: 2px; }
.le-slot.is-on { color: #b45309; }
.le-slot.is-new { animation: le-slot-pop .35s; text-shadow: 0 0 8px #fcd34d; }
@keyframes le-slot-pop { 50% { transform: scale(1.25); } }
.le-slot--sum { color: #94a3b8; min-width: 1.2em; } .le-slot--sum::before, .le-slot--sum::after { content: none; }
/* 直式連加（每包 ≥ 1000）：左欄 +／=，右欄一行一包，靠右對齊 */
.le-add--col { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 6px; row-gap: 0; }
.le-add--col .le-add-op { text-align: right; min-width: 1em; }
.le-add--col .le-slot { justify-content: flex-end; height: 30px; } .le-slot--sum.is-live { color: #b45309; } .le-slot--sum.is-done { color: #15803d; }

/* 草地：窩／盒／小雞在左邊大塊，籃子在右邊 */
.le-scene { display: flex; gap: 10px; align-items: stretch; }
.le-yard { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; padding: 12px 8px; border-radius: 18px; background: radial-gradient(ellipse at 50% 20%, #b9e59a, #7cc45e 75%); border: 6px solid #a86d33; box-shadow: inset 0 0 0 3px #d9a066, 0 4px 0 #7a4a1c; box-sizing: border-box; }
.le-yard--div { flex-direction: column; align-items: center; }
/* 窩：稻草橢圓 + 蛋格 */
.le-nest { position: relative; padding: 14px 12px 10px; border-radius: 50% / 40%; background: radial-gradient(ellipse at 50% 60%, #d9a15c, #a86d33 80%); box-shadow: inset 0 -8px 0 rgba(0,0,0,.12), 0 3px 0 #7a4a1c; }
.le-nest-straw { position: absolute; inset: 4px; border-radius: inherit; border: 3px dashed rgba(255,235,190,.6); pointer-events: none; }
.le-nest-eggs { position: relative; display: grid; gap: 4px 6px; justify-items: center; }
.le-nest--xs .le-nest-eggs { grid-template-columns: repeat(2, auto); }
.le-nest--s .le-nest-eggs { grid-template-columns: repeat(3, auto); }
.le-nest--m .le-nest-eggs { grid-template-columns: repeat(3, auto); }
.le-nest--l .le-nest-eggs { grid-template-columns: repeat(4, auto); }
.le-yard--add .le-nest { max-width: 46%; }
/* 蛋：按鈕，≥ 44px 觸控目標 */
.le-egg { appearance: none; background: none; border: 0; padding: 2px; width: 46px; height: 56px; cursor: pointer; transition: transform .15s, opacity .25s; -webkit-tap-highlight-color: transparent; }
.le-egg-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 1px rgba(0,0,0,.18)); }
.le-egg:hover { transform: translateY(-2px); }
.le-egg.is-bad { cursor: not-allowed; }
.le-egg.is-taken { opacity: 0; transform: translateY(-18px) scale(.6); pointer-events: none; }
.le-egg.gk-glow { animation: gk-glow 1s ease-in-out infinite; border-radius: 50%; }
.le-egg .gk-hand { position: absolute; left: 50%; bottom: -6px; margin-left: -12px; }
.le-egg { position: relative; }
/* 包（第二章）：一包＝一顆更大的蛋，底下一顆小數字；10／100／1000／10000 一級比一級大 */
.le-egg--pack { width: auto; height: auto; padding: 0 2px; }
.le-bundle { position: relative; display: block; width: 58px; height: 70px; }
.le-bundle--100 { width: 70px; height: 84px; }
.le-bundle--1000 { width: 84px; height: 100px; }
.le-bundle--10000 { width: 100px; height: 118px; }
.le-bundle .le-egg-svg { width: 100%; height: 100%; }
.le-bundle-n { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); padding: 1px 7px; border-radius: 10px; background: rgba(255,255,255,.88); border: 1px solid rgba(90,58,18,.35); font-size: 12px; line-height: 1.2; color: #5b3a12; font-variant-numeric: tabular-nums; white-space: nowrap; }
.le-bundle--1000 .le-bundle-n, .le-bundle--10000 .le-bundle-n { font-size: 14px; }
.le-nest--packs { border-radius: 26px; width: 100%; box-sizing: border-box; }
.le-nest--packs .le-nest-eggs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 8px; }   /* 包大小不一，用 flex 排、底對齊 */
.le-yard--add .le-nest--packs { max-width: 48%; }
.le-mini.le-mini--pack { width: 32px; height: 38px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 1px solid rgba(90,58,18,.35); font-size: 10px; font-weight: 900; color: #4a3f36; display: grid; place-items: end center; padding-bottom: 3px; box-shadow: inset -2px -2px 0 rgba(0,0,0,.12); box-sizing: border-box; box-shadow: none; letter-spacing: -.3px; }
.le-board--packs-xl .le-mini--pack { width: 42px; height: 46px; font-size: 11px; }   /* 1000、10000 要寫得下 */
.le-board--packs .le-chick { min-width: 96px; }
.le-board--packs .le-chick-eggs { max-width: 140px; gap: 3px; }
.le-board--packs-xl .le-chick { min-width: 120px; }
.le-board--packs-xl .le-chick-eggs { max-width: 190px; }
.le-board--packs .le-basket { width: 128px; }
.le-board--packs .le-eq { font-size: 26px; }
.le-yard--mul .le-egg--pack { margin: 4px 2px; }
/* 盒子（乘法）：一盒一盒收 */
/* 盒子畫成紙蛋盒：灰米色瓦楞紙、每顆蛋下面一個凹槽（Rex 2026-10-01 的示範圖） */
.le-box { appearance: none; position: relative; border: 3px solid #b9a785; border-radius: 12px 12px 8px 8px; background: linear-gradient(#efe6d4, #dccfb6); padding: 8px 8px 22px; cursor: pointer; box-shadow: inset 0 -6px 0 #c9b995, 0 3px 0 #a3906e; transition: transform .15s, opacity .25s; -webkit-tap-highlight-color: transparent; }
.le-box-eggs { display: grid; gap: 2px; }   /* 幾欄由 JS 設：一盒一排 */
.le-cup { display: block; width: 28px; height: 34px; padding: 0 1px 2px; box-sizing: border-box; background: radial-gradient(ellipse at 50% 78%, #b8a888 48%, transparent 52%); }
.le-cup .le-egg-svg { filter: none; }
.le-box-n { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); min-width: 22px; padding: 1px 6px; border-radius: 8px; background: #fff8ea; border: 1px solid #c9b995; text-align: center; font-weight: 900; font-size: 13px; color: #92400e; }
.le-box.is-taken { opacity: 0; transform: translateY(-18px) scale(.6); pointer-events: none; }
.le-box.gk-glow { animation: gk-glow 1s ease-in-out infinite; }
.le-box .gk-hand { position: absolute; left: 50%; bottom: -8px; margin-left: -12px; }
/* 小雞（除法） */
.le-chicks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.le-chick { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 6px 6px 4px; border-radius: 12px; background: rgba(255,255,255,.55); }
.le-chick-face { font-size: 26px; line-height: 1; }
.le-chick.is-fed .le-chick-face { animation: le-hop .35s; }
@keyframes le-hop { 50% { transform: translateY(-6px); } }
.le-chick-eggs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 14px; max-width: 64px; margin-top: 3px; }
.le-chick-n { font-size: 14px; color: #334155; margin-top: 2px; }
.le-chick-n[hidden] { display: none; }
/* 籃子 */
.le-basket { position: relative; width: 108px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 6px 6px; border-radius: 14px 14px 22px 22px; background: linear-gradient(#e2b56a, #b9823a); border: 3px solid #8a5a22; box-shadow: inset 0 0 0 2px rgba(255,235,190,.35); box-sizing: border-box; }
.le-basket::before { content: ''; position: absolute; left: 22px; right: 22px; top: -14px; height: 24px; border: 4px solid #8a5a22; border-bottom: 0; border-radius: 30px 30px 0 0; }
.le-basket-eggs { display: grid; justify-content: center; align-content: end; gap: 3px; flex: 1; width: 100%; min-height: 40px; }   /* 幾欄由 JS 設：乘法一排＝一盒，其他一排 5 顆 */
.le-mini { display: block; width: 12px; height: 15px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset -2px -2px 0 rgba(0,0,0,.12); }
.le-basket-n { display: none; font-size: 24px; line-height: 1; color: #fff; text-shadow: 0 1px 0 #7a4a1c, 0 0 6px rgba(0,0,0,.3); }
.le-basket--n .le-basket-n { display: block; }
.le-basket-label { font-size: 11px; font-weight: 800; color: #fff4dc; }
.le-basket-lid { display: none; position: absolute; inset: 24px 4px auto; height: 26px; border-radius: 10px; background: linear-gradient(#c9944a, #a86d33); border: 2px solid #7a4a1c; z-index: 2; }
.le-basket--lid .le-basket-lid { display: block; }
.le-basket--lid .le-basket-eggs { visibility: hidden; }
.le-board--div .le-basket { display: none; }
/* 數字卡 */
.le-answer { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.le-answer[hidden] { display: none; }
.le-card { appearance: none; position: relative; min-width: 72px; height: 64px; border-radius: 16px; border: 3px solid #f59e0b; background: #fffbeb; font-family: inherit; font-weight: 900; font-size: 30px; color: #92400e; cursor: pointer; box-shadow: 0 4px 0 #d97706; transition: transform .1s; animation: gk-pop .3s; -webkit-tap-highlight-color: transparent; }
.le-card:active { transform: translateY(3px); box-shadow: 0 1px 0 #d97706; }
.le-card.is-wrong { opacity: .35; border-color: #cbd5e1; box-shadow: 0 4px 0 #94a3b8; color: #64748b; cursor: default; }
.le-card.is-right { background: var(--gd-green); border-color: #15803d; color: #fff; box-shadow: 0 4px 0 #14532d; }
.le-card.gk-glow { animation: gk-glow 1s ease-in-out infinite; }
.le-card .gk-hand { position: absolute; left: 50%; bottom: -10px; margin-left: -12px; }
.le-board--won .le-yard { filter: saturate(1.15); }

@media (max-width: 480px) {
  /* 第二章的包比蛋大：手機上籃子改放到草地下面一整排，包縮小一點 */
  .le-board--packs .le-scene { flex-direction: column; }
  .le-board--packs .le-basket { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 14px 8px 6px; border-radius: 14px 14px 18px 18px; }
  .le-board--packs .le-basket::before { left: 40%; right: 40%; }
  .le-board--packs .le-basket-eggs { flex: 0 1 auto; width: auto; max-width: 70%; min-height: 0; }
  .le-bundle { width: 48px; height: 58px; }
  .le-bundle--100 { width: 58px; height: 70px; } .le-bundle--1000 { width: 68px; height: 82px; } .le-bundle--10000 { width: 80px; height: 96px; }
  .le-nest--packs { padding: 10px 6px 8px; }
  .le-eq { font-size: 26px; }
  .le-egg { width: 40px; height: 48px; }
  .le-basket { width: 84px; }
  .le-nest { padding: 12px 8px 8px; }
}