/* ============ 快樂英文樂園 · 設計系統 ============
   色票: 珊瑚 #FF6B6B ｜ 陽光黃 #FFC93C ｜ 薄荷 #3DCFB6 ｜ 天空藍 #5B8DEF ｜ 果凍紫 #A78BFA
   標題字: Baloo 2 (圓潤童趣) ｜ 內文: Nunito + Noto Sans TC
   簽名元素: 會眨眼、會說話的「小星星老師」吉祥物
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700;800&family=Noto+Sans+TC:wght@400;600;700;900&display=swap');

:root{
  --coral:#FF6B6B;
  --coral-dk:#E8503F;
  --sun:#FFC93C;
  --sun-dk:#F0A400;
  --mint:#3DCFB6;
  --mint-dk:#22B39B;
  --sky:#5B8DEF;
  --sky-dk:#3E6FD1;
  --grape:#A78BFA;
  --grape-dk:#8A67F0;
  --ink:#2D3142;
  --ink-soft:#6B7089;
  --cream:#FFFBF2;
  --card:#FFFFFF;
  --line:#EDEAE1;
  --shadow: 0 6px 0 rgba(45,49,66,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Nunito','Noto Sans TC',sans-serif;
  background:
    radial-gradient(circle at 8% 8%, #FFF3D6 0%, transparent 40%),
    radial-gradient(circle at 92% 15%, #DDF3FF 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, #FFE8E8 0%, transparent 50%),
    var(--cream);
  color:var(--ink);
  min-height:100vh;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,.font-display{ font-family:'Baloo 2','Noto Sans TC',sans-serif; }
button{ font-family:inherit; cursor:pointer; }
.hidden{ display:none !important; }
::selection{ background:var(--sun); }

/* ---------- App shell ---------- */
#app-root{ max-width:900px; margin:0 auto; padding:0 0 90px; min-height:100vh; position:relative; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px;
}
.brand{ display:flex; align-items:center; gap:8px; }
.brand .mascot{ font-size:30px; filter:drop-shadow(0 3px 0 rgba(0,0,0,.06)); }
.brand-text h1{ font-size:17px; margin:0; color:var(--ink); }
.brand-text p{ margin:0; font-size:10.5px; color:var(--ink-soft); font-weight:700; }

/* 右上角：換聲音按鈕 + 金幣/連續天數 */
.topbar-right{ display:flex; align-items:center; gap:8px; }
.voicebtn{
  display:flex; align-items:center; gap:5px;
  border:2px solid #e8dcc2; background:#fff; color:var(--ink);
  border-radius:999px; padding:5px 11px 5px 8px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:12px;
  box-shadow:0 2px 0 #e8dcc2; white-space:nowrap;
}
.voicebtn:active{ transform:translateY(2px); box-shadow:none; }
.voicebtn .ve{ font-size:16px; line-height:1; }
@media (max-width:430px){ .voicebtn .vt{ display:none; } .voicebtn{ padding:5px 9px; } }

/* 選聲音的視窗 */
.voice-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  border:2px solid #eee3cf; background:#fffdf7; border-radius:16px;
  padding:11px 12px; margin:8px 0; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--ink);
}
.voice-opt.on{ border-color:var(--sky); background:#eaf6ff; box-shadow:0 3px 0 var(--sky-dk); }
.voice-opt .vo-emoji{ font-size:26px; }
.voice-opt .vo-txt{ flex:1; display:flex; flex-direction:column; gap:2px; }
.voice-opt .vo-txt b{ font-size:15px; }
.voice-opt .vo-txt i{ font-style:normal; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.voice-note{
  margin:10px 2px 2px; padding:9px 11px;
  background:#fff6e2; border:2px solid #f0e2c4; border-radius:12px;
  font-size:11.5px; line-height:1.7; color:var(--ink-soft); text-align:left;
}
.voice-opt .vo-try{
  flex:none; font-size:12px; font-weight:800; color:#fff;
  background:var(--sky); border-radius:999px; padding:6px 10px;
}

.stats-pill{
  display:flex; gap:8px;
}
.pill{
  display:flex; align-items:center; gap:4px;
  background:var(--card); border:2px solid var(--line); border-radius:999px;
  padding:5px 10px; font-weight:800; font-size:13px; box-shadow:var(--shadow);
}
.pill .ic{ font-size:14px; }
.pill.coin{ color:var(--sun-dk); }
.pill.streak{ color:var(--coral-dk); }

/* ---------- bottom nav ---------- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--card); border-top:3px solid var(--line);
  display:flex; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  max-width:900px; margin:0 auto;
}
.navbtn{
  background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 10px; border-radius:14px; color:var(--ink-soft); font-weight:800; font-size:10.5px;
  transition:transform .15s ease;
}
.navbtn .ic{ font-size:21px; }
.navbtn.active{ color:var(--coral-dk); background:#FFF1EE; transform:translateY(-2px); }
.back-to-top{
  position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:calc(82px + env(safe-area-inset-bottom)); z-index:60;
  min-width:62px; height:48px; padding:0 13px; border:2px solid #fff; border-radius:999px;
  background:var(--sky-dk); color:#fff; font-weight:800; font-size:15px; box-shadow:0 5px 14px rgba(45,49,66,.25);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); transition:.2s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.back-to-top:active{ transform:translateY(2px); }

/* ---------- generic layout ---------- */
.view{ padding:6px 16px 20px; animation:fadein .25s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.section-title{ font-size:22px; margin:16px 0 12px; display:flex; align-items:center; gap:8px; }
.section-title .dot{ width:10px;height:10px;border-radius:50%; }

.card{
  background:var(--card); border:2px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow);
}

/* ---------- home ---------- */
.hero{
  background:linear-gradient(135deg, var(--sky) 0%, var(--grape) 100%);
  border-radius:26px; padding:20px 18px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 8px 0 rgba(62,111,209,.25);
}
.hero::after{
  content:"⭐"; position:absolute; font-size:100px; opacity:.15; right:-10px; top:-20px;
}
.hero h2{ font-size:20px; margin:0 0 4px; }
.hero p{ margin:0; font-size:12.5px; opacity:.95; font-weight:700; line-height:1.5; }
.mascot-say{
  display:flex; gap:10px; align-items:flex-start; margin-top:12px;
  background:rgba(255,255,255,.18); border-radius:16px; padding:10px 12px;
}
.mascot-say .m{ font-size:26px; }
.mascot-say .bubble{ font-size:12px; font-weight:700; line-height:1.4; }

.quickgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.quicktile{
  border:none; border-radius:20px; padding:16px 12px; text-align:left; color:#fff;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.quicktile:active{ transform:scale(.97); }
.quicktile .qi{ font-size:28px; }
.quicktile .qt{ font-family:'Baloo 2'; font-size:15px; font-weight:700; }
.quicktile .qd{ font-size:10.5px; opacity:.95; font-weight:700; }
.qt-coral{ background:linear-gradient(135deg,var(--coral),var(--coral-dk)); }
.qt-mint{ background:linear-gradient(135deg,var(--mint),var(--mint-dk)); }
.qt-sun{ background:linear-gradient(135deg,var(--sun),var(--sun-dk)); }
.qt-grape{ background:linear-gradient(135deg,var(--grape),var(--grape-dk)); }

.daily-banner{
  margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#FFF7E0; border:2px dashed var(--sun-dk); border-radius:16px; padding:10px 14px;
}
.daily-banner .txt{ font-size:12px; font-weight:800; color:#8A6200; }
.btn-small{
  background:var(--sun-dk); color:#fff; border:none; border-radius:12px; padding:7px 12px;
  font-weight:800; font-size:11.5px; box-shadow:0 3px 0 #B87A00;
}

/* ---------- category / vocab ---------- */
.catgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(min-width:640px){ .catgrid{ grid-template-columns:repeat(4,1fr);} }
@media(max-width:380px){ .catgrid{ grid-template-columns:repeat(2,1fr);} }
.cattile{
  border:2px solid var(--line); border-radius:20px; background:var(--card); padding:16px 10px;
  text-align:center; box-shadow:var(--shadow); transition:transform .12s ease;
}
.cattile:active{ transform:scale(.96); }
.cattile .ci{ font-size:44px; line-height:1; }
.cattile .cn{ font-weight:800; font-size:18px; margin-top:8px; }
.cattile .cp{ font-size:13px; color:var(--ink-soft); font-weight:700; margin-top:4px; }
.progressbar{ height:6px; background:var(--line); border-radius:6px; margin-top:6px; overflow:hidden; }
.progressbar > i{ display:block; height:100%; background:var(--mint); }

.wordgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px; margin-top:6px; }
.wordcard{
  border:2px solid var(--line); background:var(--card); border-radius:18px; padding:14px 8px;
  text-align:center; box-shadow:var(--shadow); position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.wordcard.learned{ border-color:var(--mint); background:#F1FFFB; }
.wordcard .wi{ font-size:38px; line-height:1; }
.word-picture{
  --word-size:54px;
  width:var(--word-size); height:var(--word-size); flex:0 0 var(--word-size);
  display:inline-grid; place-items:center; position:relative; overflow:hidden;
  border-radius:17px; vertical-align:middle;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 rgba(45,49,66,.12);
}
.word-picture__main,
.word-picture__badge{
  display:block; object-fit:contain; pointer-events:none;
}
.word-picture__main{
  width:70%; height:70%;
  filter:brightness(0) invert(1);
}
.word-picture__badge{
  position:absolute; right:4%; bottom:4%; width:34%; height:34%;
  filter:brightness(0) saturate(100%) invert(91%) sepia(27%) saturate(625%) hue-rotate(352deg) brightness(105%) contrast(103%) drop-shadow(0 1px 1px rgba(45,49,66,.28));
}
.word-picture--sky{ background:linear-gradient(145deg,#79B4FF,#3E6FD1); }
.word-picture--mint{ background:linear-gradient(145deg,#60DFC8,#1E9E89); }
.word-picture--coral{ background:linear-gradient(145deg,#FF9A84,#E8503F); }
.word-picture--sun{ background:linear-gradient(145deg,#FFD86C,#E99B00); }
.word-picture--grape{ background:linear-gradient(145deg,#BEA8FF,#7C5BE0); }
.word-picture--aqua{ background:linear-gradient(145deg,#6FD8EF,#2587B8); }
.word-picture--ink{ background:linear-gradient(145deg,#6B7089,#2D3142); }
.word-picture--card{ --word-size:54px; }
.word-picture--modal{ --word-size:96px; border-radius:26px; margin:0 auto 8px; }
.word-picture--prompt{ --word-size:84px; border-radius:24px; margin:0 auto; }
.word-picture--choice{ --word-size:38px; border-radius:12px; box-shadow:0 3px 0 rgba(45,49,66,.1); }
.word-picture--memory{ --word-size:56px; border-radius:14px; box-shadow:none; }
.word-picture--balloon{ --word-size:50px; border-radius:16px; box-shadow:0 3px 0 rgba(45,49,66,.12); }
.emoji-word{ display:inline-block; line-height:1; }
.emoji-word--prompt{ font-size:1em; }
.emoji-word--balloon{ font-size:44px; }
.wordcard .letter-av{
  width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--grape),var(--grape-dk)); color:#fff; font-family:'Baloo 2';
  display:flex;align-items:center;justify-content:center;margin:0 auto; font-size:24px; box-shadow:0 3px 0 rgba(0,0,0,.12);
}
.wordcard .num-av{
  width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#5B8DEF,#3E6FD1); color:#fff; font-family:'Baloo 2';
  display:flex;align-items:center;justify-content:center;margin:0 auto; font-size:26px; font-weight:800; box-shadow:0 3px 0 rgba(62,111,209,.4);
}
.wordcard .word-av{
  min-width:60px; padding:8px 14px; border-radius:14px;
  background:linear-gradient(135deg,#FFD873,#F0A400); color:#fff; font-family:'Baloo 2';
  display:flex;align-items:center;justify-content:center;margin:0 auto; font-size:20px; font-weight:800;
  box-shadow:0 3px 0 rgba(240,164,0,.4); line-height:1.1; text-align:center;
}
.wordcard .color-dot{
  width:46px;height:46px;border-radius:50%; margin:0 auto; border:3px solid #fff;
  box-shadow:0 0 0 2px var(--line), 0 3px 6px rgba(0,0,0,.12);
}
.wordcard .wt{ font-weight:800; font-size:18px; margin-top:2px; }
.wordcard .wz{ font-size:14px; color:var(--ink-soft); font-weight:700; }
.wordcard .learned-badge{ position:absolute; top:-7px; right:-7px; font-size:18px; }

/* word detail modal */
.modal-back{ position:fixed; inset:0; background:rgba(45,49,66,.5); z-index:100; display:flex; align-items:flex-end; justify-content:center; }
@media(min-width:600px){ .modal-back{ align-items:center; } }
.modal{
  background:#fff; border-radius:24px 24px 0 0; width:100%; max-width:420px; padding:22px 20px 26px;
  text-align:center; animation:slideup .2s ease;
}
@media(min-width:600px){ .modal{ border-radius:24px; } }
@keyframes slideup{ from{ transform:translateY(30px); opacity:0;} to{transform:none;opacity:1;} }
.modal .big-icon{ font-size:60px; }
.modal .big-word{ font-family:'Baloo 2'; font-size:24px; margin:6px 0 2px; }
.modal .kk{ color:var(--sky-dk); font-weight:700; font-size:14px; }
.modal .zh{ color:var(--ink-soft); font-weight:700; margin-top:4px; }
.modal-actions{ display:flex; gap:10px; margin-top:16px; }
.btn{
  flex:1; border:none; border-radius:14px; padding:12px; font-weight:800; font-size:13.5px; color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.15);
}
.btn.speak{ background:var(--sky); box-shadow:0 4px 0 var(--sky-dk); }
.btn.speak.slow{ background:var(--grass, #7ac74f); box-shadow:0 4px 0 var(--grass-dk, #4e9e2e); }
.btn.done{ background:var(--mint); box-shadow:0 4px 0 var(--mint-dk); }
.btn.close-x{ background:var(--line); color:var(--ink-soft); box-shadow:none; flex:0 0 auto; padding:12px 16px; }

/* ---------- games grid ---------- */
.gamegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.gametile{
  border:none; border-radius:22px; padding:22px 18px; text-align:left; color:#fff; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px; min-height:150px; position:relative;
  transition:transform .12s ease;
}
.gametile:active{ transform:scale(.97); }
.gametile .gi{ font-size:52px; line-height:1; }
.gametile .gt{ font-family:'Baloo 2'; font-size:25px; font-weight:800; }
.gametile .gd{ font-size:16px; opacity:.96; font-weight:700; line-height:1.4; }
.gametile .gscore{ position:absolute; top:14px; right:16px; font-size:14px; font-weight:800; background:rgba(255,255,255,.3); border-radius:10px; padding:4px 11px; }

.g1{background:linear-gradient(135deg,#FF9A7A,var(--coral-dk));}
.g2{background:linear-gradient(135deg,#FFD873,var(--sun-dk));}
.g3{background:linear-gradient(135deg,#6BE0CB,var(--mint-dk));}
.g4{background:linear-gradient(135deg,#7FA9FF,var(--sky-dk));}
.g5{background:linear-gradient(135deg,#C4A9FF,var(--grape-dk));}
.g6{background:linear-gradient(135deg,#FF8FA3,#E8507B);}
.g7{background:linear-gradient(135deg,#79E0A6,#26B378);}
.g8{background:linear-gradient(135deg,#8FC7FF,#4A85D8);}
.g9{background:linear-gradient(135deg,#FFC178,#E88A2E);}
.g10{background:linear-gradient(135deg,#4A4E69,#2D3142);}

/* ---------- game play area ---------- */
.gamehead{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.backbtn{
  border:2px solid var(--line); background:#fff; border-radius:12px; padding:6px 10px; font-weight:800;
  font-size:12px; color:var(--ink-soft);
}
.gamehead h2{ margin:0; font-size:16px; flex:1; }
.game-hud{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.hud-chip{ background:var(--card); border:2px solid var(--line); border-radius:10px; padding:5px 10px; font-size:11px; font-weight:800; }

.playbox{
  background:var(--card); border:2px solid var(--line); border-radius:22px; padding:20px 16px; min-height:280px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center;
  position:relative; overflow:hidden;
}
.play-prompt-icon{ font-size:58px; }
.play-prompt-text{ font-family:'Baloo 2'; font-size:24px; }
.play-prompt-sub{ color:var(--ink-soft); font-weight:700; font-size:16px; }

.speakbtn{
  background:var(--sky); color:#fff; border:none; border-radius:50%; width:64px; height:64px; font-size:26px;
  box-shadow:0 4px 0 var(--sky-dk);
}
.speakbtn:active{ transform:translateY(2px); box-shadow:none; }
.phonics-prompt-row{ display:flex; align-items:center; justify-content:center; gap:12px; }
.inline-speakbtn{
  width:46px; height:46px; border:none; border-radius:50%; background:var(--sky); color:#fff;
  font-size:21px; box-shadow:0 3px 0 var(--sky-dk); display:inline-flex; align-items:center; justify-content:center;
}
.inline-speakbtn:active{ transform:translateY(2px); box-shadow:none; }

.choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.choice-btn{
  border:2.5px solid var(--line); background:#fff; border-radius:16px; padding:18px 10px; font-weight:800;
  font-size:20px; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--shadow);
}
.choice-btn .ci{ font-size:34px; }
.choice-btn.correct{ background:#E7FFF6; border-color:var(--mint-dk); }
.choice-btn.wrong{ background:#FFEDED; border-color:var(--coral-dk); }

.letter-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; min-height:54px; }
.letter-slot{ width:46px; height:52px; border:2px dashed var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2'; font-size:26px; }
.letter-slot.filled{ border-style:solid; border-color:var(--sky); background:#EEF3FF; }
.letter-bank{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.letter-tile{
  width:50px;height:54px; border-radius:12px; background:var(--grape); color:#fff; border:none;
  font-family:'Baloo 2'; font-size:26px; box-shadow:0 3px 0 var(--grape-dk);
}
.letter-tile:disabled{ opacity:.25; }
.spell-prompt-wrap{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.spell-audio-actions{ display:flex; flex-direction:column; gap:9px; }
.spell-tool-btn{
  border:none; border-radius:12px; padding:10px 14px; color:#fff; font-weight:800; font-size:15px;
  box-shadow:0 3px 0 rgba(45,49,66,.18);
}
.spell-listen-btn{ background:var(--sky); }
.spell-hint-btn{ background:var(--sun-dk); color:#5F4300; }
.spell-feedback{
  width:100%; min-height:46px; border-radius:12px; padding:10px 14px; background:#F8F6EF;
  color:var(--ink-soft); font-weight:800; line-height:1.45;
}
.spell-feedback.correct{ background:#E7FFF6; color:#117A61; }
.spell-feedback.wrong{ background:#FFEDED; color:#B83A3A; }
.spell-feedback.hint{ background:#FFF7D6; color:#7A5800; }
.spell-page-nav{ width:100%; display:flex; align-items:center; justify-content:center; gap:12px; font-weight:800; }
.spell-nav-btn{
  border:2px solid var(--sky); border-radius:12px; background:#fff; color:var(--sky-dk);
  padding:10px 15px; font-weight:800;
}
.spell-nav-btn:disabled{ opacity:.35; }

.memory-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
.memory-card{
  min-height:126px; border-radius:12px; background:var(--grape); display:flex; align-items:center; justify-content:center;
  padding:8px; font-size:30px; color:#fff; border:none; box-shadow:0 3px 0 var(--grape-dk); overflow:hidden;
}
.memory-card.flipped{ background:#fff; border:2px solid var(--sky); color:var(--ink); box-shadow:none; }
.memory-card.matched{ background:#E7FFF6; border:2px solid var(--mint-dk); color:var(--ink); box-shadow:none; }
.memory-face{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; line-height:1.1; }
.memory-picture{ font-size:34px; min-height:38px; display:flex; align-items:center; justify-content:center; }
.memory-en{ max-width:100%; font-family:'Baloo 2'; font-size:16px; font-weight:800; overflow-wrap:anywhere; }
.memory-en-large{ font-size:19px; }
.memory-zh{ max-width:100%; color:var(--ink-soft); font-size:13px; font-weight:800; overflow-wrap:anywhere; }

.mole-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }
.mole-hole{
  min-height:150px; border-radius:16px; background:#EFE7DA; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; padding:8px; font-weight:800; font-size:16px;
  border:none; overflow:hidden; position:relative;
}
.mole-answer{
  width:100%; flex:1; border:none; background:transparent; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; padding:4px;
}
.mole-visual{ font-size:38px; line-height:1; }
.mole-hole .mole-word{ background:var(--coral); color:#fff; border-radius:10px; padding:7px 4px; width:95%; font-size:16px; animation:popup .18s ease; }
.mole-hole .mole-zh{ color:var(--ink-soft); font-size:14px; font-weight:800; max-width:100%; overflow-wrap:anywhere; animation:popup .18s ease; }
.mole-audio{
  width:38px; height:38px; flex:0 0 38px; border:none; border-radius:50%; background:var(--sky); color:#fff;
  font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 var(--sky-dk);
}
.mole-hole.wrong{ outline:3px solid var(--coral-dk); background:#FFE5E5; }
.mole-hole.wrong .mole-word{ background:var(--coral-dk); }
.mole-hole.correct{ outline:3px solid var(--mint-dk); background:#DFFBF3; }
.mole-hole.correct .mole-word{ background:var(--mint-dk); }
@keyframes popup{ from{ transform:scale(.5); opacity:0;} to{transform:none;opacity:1;} }

.balloon-area{ position:relative; width:100%; height:360px; overflow:hidden; border-radius:18px; background:linear-gradient(#DDF3FF,#F5FCFF); }
.balloon{
  position:absolute; bottom:-100px; width:116px; min-height:112px; padding:14px 8px; border-radius:50% 50% 45% 45%; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  font-weight:800; font-size:18px; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.15);
  animation-name: floatup; animation-timing-function: linear;
}
.balloon-word{ display:block; max-width:100%; line-height:1.05; overflow-wrap:anywhere; word-break:break-word; }
@keyframes floatup{ from{ bottom:-120px; } to{ bottom:105%; } }

.fillblank-sentence{ font-size:20px; font-weight:700; line-height:1.7; background:#F8F6EF; border-radius:14px; padding:16px; }
.fillblank-sentence .blank{ display:inline-block; min-width:70px; border-bottom:3px solid var(--coral); color:var(--coral-dk); font-family:'Baloo 2'; }
.fillblank-zh{ font-size:1em; color:var(--ink-soft); margin-top:10px; line-height:1.7; }

.timerbar{ width:100%; height:10px; background:var(--line); border-radius:6px; overflow:hidden; }
.timerbar > i{ display:block; height:100%; background:var(--sun-dk); transition:width .2s linear; }

.result-panel{ text-align:center; padding:20px 10px; }
.result-panel .ri{ font-size:60px; }
.result-panel h3{ font-size:20px; margin:8px 0 4px; }
.result-panel p{ color:var(--ink-soft); font-weight:700; font-size:13px; }
.reward-chip{ display:inline-flex; align-items:center; gap:6px; background:#FFF7E0; border:2px solid var(--sun-dk); border-radius:999px; padding:6px 14px; font-weight:800; color:#8A6200; margin-top:10px; }

/* ---------- stories ---------- */
.storylist{ display:flex; flex-direction:column; gap:10px; }
.storycard{
  display:flex; align-items:center; gap:12px; background:var(--card); border:2px solid var(--line);
  border-radius:18px; padding:12px 14px; box-shadow:var(--shadow); text-align:left; border:none;
}
.storycard .si{ font-size:30px; }
.storycard .stx{ flex:1; }
.storycard .st{ font-family:'Baloo 2'; font-size:14px; }
.storycard .sz{ font-size:11px; color:var(--ink-soft); font-weight:700; }
.storycard .sdone{ font-size:18px; }

.story-reader{ background:var(--card); border:2px solid var(--line); border-radius:20px; padding:20px 18px; }
.story-sentence{ font-size:20px; font-weight:700; line-height:1.6; padding:10px; border-radius:10px; }
.story-sentence.active{ background:#FFF3D6; }
.story-sentence .szh{ font-size:15px; color:var(--ink-soft); font-weight:700; margin-top:3px; }
.story-nav{ display:flex; gap:10px; margin-top:16px; }

/* ---------- rewards / progress ---------- */
.avatar-box{ text-align:center; padding:18px; }
.avatar-display{ font-size:80px; position:relative; display:inline-block; }
.avatar-display .acc{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:34px; }
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.shop-item{ border:2px solid var(--line); border-radius:14px; padding:10px 4px; background:#fff; text-align:center; font-size:24px; }
.shop-item.owned{ border-color:var(--mint-dk); background:#F1FFFB; }
.shop-item.selected{ border-color:var(--sun-dk); background:#FFF7E0; }
.shop-item .price{ font-size:10px; font-weight:800; color:var(--ink-soft); margin-top:2px; }

.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:10px; margin-top:8px; }
.badge{ text-align:center; opacity:.3; }
.badge.earned{ opacity:1; }
.badge .bi{ font-size:32px; }
.badge .bn{ font-size:9.5px; font-weight:800; margin-top:2px; }

.stat-row{ display:flex; gap:10px; margin-top:10px; }
.statbox{ flex:1; background:var(--card); border:2px solid var(--line); border-radius:16px; padding:12px; text-align:center; }
.statbox .sv{ font-family:'Baloo 2'; font-size:22px; }
.statbox .sl{ font-size:10px; color:var(--ink-soft); font-weight:700; }

/* toast / confetti */
#toast{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:13px; z-index:200; box-shadow:0 6px 16px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(6px); }

.confetti-piece{ position:fixed; top:-10px; z-index:150; font-size:18px; animation:fall linear forwards; pointer-events:none; }
@keyframes fall{ to{ transform:translateY(110vh) rotate(360deg); opacity:.2; } }

@media (max-width:380px){
  .quicktile .qd{ display:none; }
}

/* ============ 考試專區 Exam Zone ============ */
.exam-hero{
  background:linear-gradient(135deg,#2D3142,#4A4E69); color:#fff; border-radius:24px;
  padding:20px 18px; margin-bottom:16px; position:relative; overflow:hidden;
}
.exam-hero::after{ content:"🎓"; position:absolute; font-size:96px; opacity:.12; right:-8px; top:-14px; }
.exam-hero h2{ font-size:22px; margin:0 0 6px; }
.exam-hero p{ margin:0; font-size:12.5px; opacity:.92; font-weight:700; line-height:1.5; }

.examgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:380px){ .examgrid{ grid-template-columns:1fr; } }
.examtile{
  border:none; border-radius:22px; padding:20px 16px; text-align:left; color:#fff; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px; min-height:140px; position:relative; transition:transform .12s ease;
}
.examtile:active{ transform:scale(.97); }
.examtile .ei{ font-size:42px; line-height:1; }
.examtile .et{ font-family:'Baloo 2'; font-size:19px; font-weight:800; }
.examtile .ed{ font-size:11.5px; opacity:.95; font-weight:700; line-height:1.35; }
.exam-toeic{ background:linear-gradient(135deg,#5B8DEF,#3E6FD1); }
.exam-gept{ background:linear-gradient(135deg,#3DCFB6,#22B39B); }
.exam-toefl{ background:linear-gradient(135deg,#A78BFA,#8A67F0); }
.exam-ielts{ background:linear-gradient(135deg,#FF9A7A,#E8503F); }

.exam-detail-card{ background:var(--card); border:2px solid var(--line); border-radius:20px; padding:18px 16px; margin-bottom:14px; box-shadow:var(--shadow); }
.exam-detail-card h3{ font-size:17px; margin:0 0 8px; display:flex; align-items:center; gap:8px; }
.exam-meta{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.exam-meta .row{ font-size:12.5px; line-height:1.5; }
.exam-meta .row b{ color:var(--sky-dk); }
.exam-intro-text{ font-size:13px; line-height:1.65; color:var(--ink); margin-top:6px; }

.structure-table{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.structure-row{ display:flex; gap:10px; align-items:flex-start; background:var(--soft,#F6F7FB); border-radius:12px; padding:10px 12px; }
.structure-row .sr-part{ font-weight:800; font-size:12.5px; min-width:110px; }
.structure-row .sr-skill{ font-size:10px; font-weight:800; color:#fff; background:var(--sky); border-radius:8px; padding:2px 8px; align-self:flex-start; white-space:nowrap; }
.structure-row .sr-desc{ font-size:11.5px; color:var(--ink-soft); font-weight:600; line-height:1.4; flex:1; }
.tips-box{ background:#FFF7E0; border:2px dashed var(--sun-dk); border-radius:14px; padding:12px 14px; margin-top:12px; font-size:12.5px; font-weight:700; color:#8A6200; line-height:1.6; }

.level-tabs{ display:flex; gap:8px; margin:14px 0 12px; }
.level-tab{
  flex:1; border:2px solid var(--line); background:#fff; border-radius:14px; padding:12px 6px; font-weight:800;
  font-size:14px; color:var(--ink-soft); box-shadow:var(--shadow); text-align:center;
}
.level-tab.active{ background:var(--sky); color:#fff; border-color:var(--sky-dk); box-shadow:0 4px 0 var(--sky-dk); }

.exam-wordlist{ display:flex; flex-direction:column; gap:8px; }
.exam-word{
  display:flex; align-items:center; gap:12px; background:var(--card); border:2px solid var(--line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow); text-align:left; width:100%;
}
.exam-word.learned{ border-color:var(--mint); background:#F1FFFB; }
.exam-word .ew-en{ font-family:'Baloo 2'; font-size:23px; font-weight:700; min-width:130px; }
.exam-word .ew-kk{ font-size:16px; color:var(--sky-dk); font-weight:700; flex:1; }
.exam-word .ew-zh{ font-size:17px; color:var(--ink); font-weight:700; }
.exam-word .ew-zh .ew-sense{ display:block; line-height:1.5; }
.exam-word .ew-pos-tag{ display:inline-block; margin-right:6px; padding:1px 7px; border-radius:7px; background:var(--sky); color:#fff; font-style:normal; font-size:11px; font-weight:850; vertical-align:2px; }
.exam-word .ew-audio{ font-size:24px; }

.exam-disclaimer{
  margin:0 0 16px; padding:13px 15px; border:2px solid #F4C95D; border-radius:16px;
  background:#FFF9E9; color:#725300; font-size:12.5px; font-weight:700; line-height:1.6;
}
.exam-start-guide{ margin-top:16px; }
.exam-start-guide p,.exam-helper{ margin:0; color:var(--ink-soft); font-size:13px; font-weight:650; line-height:1.65; }
.exam-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:13px; }
.exam-flow span{ padding:9px 6px; border-radius:11px; background:#EEF5FF; color:var(--sky-dk); text-align:center; font-size:11px; font-weight:800; }
.sr-count{ font-size:10px; color:var(--ink-soft); }
.exam-source{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line); font-size:11px; font-weight:700; }
.exam-source a{ color:var(--sky-dk); text-decoration:none; }
.exam-source span{ color:var(--ink-soft); text-align:right; }

.exam-practice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }
.exam-practice-tile{
  min-height:132px; padding:13px; border:2px solid var(--line); border-radius:15px; background:#fff;
  box-shadow:var(--shadow); text-align:left; display:grid; grid-template-columns:auto 1fr auto;
  grid-template-areas:"icon title skill" "desc desc desc"; gap:6px 8px; align-items:center;
}
.exam-practice-tile:active{ transform:translateY(2px); }
.ept-icon{ grid-area:icon; font-size:25px; }
.ept-title{ grid-area:title; font-size:13px; font-weight:850; color:var(--ink); }
.ept-skill{ grid-area:skill; padding:3px 7px; border-radius:999px; background:#EEF5FF; color:var(--sky-dk); font-size:9px; font-weight:850; }
.ept-desc{ grid-area:desc; color:var(--ink-soft); font-size:11px; font-weight:650; line-height:1.45; }

.exam-vocab-shell{ scroll-margin-top:84px; }
.exam-loading,.exam-error,.exam-empty{ padding:24px 14px; text-align:center; color:var(--ink-soft); font-weight:750; }
.exam-error{ color:#A63A2E; background:#FFF1EF; border-radius:12px; }
.loading-dot{ color:var(--sky); animation:pulse 1s infinite alternate; }
@keyframes pulse{ to{ opacity:.25; } }
.exam-vocab-note{ margin:0 0 12px; padding:9px 11px; background:#F3F7FF; border-radius:11px; color:var(--ink-soft); font-size:11px; font-weight:750; line-height:1.5; }
.exam-progress-card{ padding:13px; background:linear-gradient(135deg,#EEF6FF,#F7F2FF); border-radius:15px; }
.exam-progress-top{ display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.exam-progress-top span{ color:var(--ink-soft); font-weight:750; text-align:right; }
.exam-progress-track{ height:10px; margin:9px 0 7px; border-radius:999px; overflow:hidden; background:#DDE5F1; }
.exam-progress-track i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sky),var(--mint)); transition:width .25s ease; }
.exam-progress-tip{ color:var(--ink-soft); font-size:10.5px; font-weight:650; line-height:1.4; }
.exam-level-tabs{ overflow-x:auto; padding:2px 1px 6px; }
.exam-level-tabs .level-tab{ min-width:120px; }
.level-tab small{ display:block; margin-top:3px; font-size:9px; opacity:.9; }
.exam-vocab-controls{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(128px,.7fr) auto; gap:8px; margin:10px 0 12px; }
.exam-search{ display:flex; align-items:center; gap:7px; min-height:43px; padding:0 11px; border:2px solid var(--line); border-radius:13px; background:#fff; }
.exam-search input{ width:100%; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:13px; font-weight:700; }
.exam-topic-label{ display:flex; align-items:center; gap:5px; padding:0 9px; border:2px solid var(--line); border-radius:13px; background:#fff; color:var(--ink-soft); font-size:10px; font-weight:800; }
.exam-topic-label select{ min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-weight:800; }
.exam-daily-btn{ border:2px solid #F4C95D; border-radius:13px; background:#FFF9E9; color:#725300; padding:0 12px; font-weight:850; white-space:nowrap; }
.exam-daily-btn.active{ background:var(--sun); border-color:var(--sun-dk); }
.exam-result-summary{ margin:4px 0 9px; color:var(--ink-soft); font-size:11px; font-weight:800; }

.exam-word{ justify-content:space-between; }
.exam-word-main{ min-width:0; flex:1; display:grid; grid-template-columns:minmax(105px,.75fr) auto minmax(120px,.75fr) minmax(150px,1fr); gap:4px 10px; align-items:center; }
.exam-word .ew-en{ min-width:0; overflow-wrap:anywhere; }
.exam-word .ew-pos{ padding:2px 6px; border-radius:7px; background:#F2F3F6; color:var(--ink-soft); font-size:9px; font-weight:800; text-align:center; }
.exam-word .ew-topic{ grid-column:1/-1; color:var(--ink-soft); font-size:9.5px; font-weight:650; }
.exam-word-actions{ display:flex; align-items:center; gap:5px; }
.exam-word-actions button{ min-height:38px; border:0; border-radius:10px; font-weight:850; }
.exam-word-actions .ew-audio,.exam-word-actions .ew-fav{ width:40px; padding:0; background:#F2F7FF; }
.exam-word-actions .ew-fav{ color:#B68A00; font-size:23px; }
.exam-word-actions .ew-fav.active{ background:#FFF3B8; }
.exam-word-actions .ew-learn{ min-width:72px; padding:0 9px; background:var(--mint); color:#155E52; font-size:11px; }
.exam-word.learned .ew-learn{ background:#DFF8F1; }
.exam-pager{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:14px; }
.exam-pager button{ min-width:94px; padding:10px; border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-weight:850; }
.exam-pager button:disabled{ opacity:.4; }
.exam-pager span{ color:var(--ink-soft); font-size:11px; font-weight:800; }
.exam-page-jump{ display:flex; align-items:center; gap:6px; }
.exam-page-jump select{ padding:9px 10px; border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-size:13px; font-weight:850; }

.exam-practice-card{ position:relative; padding:20px 17px; margin-bottom:14px; border:2px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.practice-skill-tag{ display:inline-block; padding:4px 9px; border-radius:999px; background:#EEF5FF; color:var(--sky-dk); font-size:10px; font-weight:850; }
.practice-desc{ margin:9px 0 14px; color:var(--ink-soft); font-size:12px; font-weight:700; }
.practice-scene{ margin:12px 0; padding:24px; border-radius:18px; background:linear-gradient(135deg,#EEF6FF,#FFF5DF); text-align:center; font-size:54px; }
.practice-passage{ margin:12px 0; padding:15px; border-left:5px solid var(--sky); border-radius:10px; background:#F7F9FC; color:var(--ink); font-family:'Baloo 2',sans-serif; font-size:16px; font-weight:650; line-height:1.65; }
.practice-prompt{ margin:13px 0; color:var(--ink); font-family:'Baloo 2',sans-serif; font-size:20px; font-weight:800; line-height:1.45; }
.practice-play{ padding:10px 14px; border:0; border-radius:12px; background:var(--sky); color:#fff; font-weight:850; }
.practice-choices{ display:grid; gap:9px; margin-top:15px; }
.practice-choice{ padding:13px; border:2px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); text-align:left; font-size:14px; font-weight:750; line-height:1.45; }
.practice-choice.correct{ border-color:#24B89D; background:#E8FFF8; }
.practice-choice.wrong{ border-color:#EF6C5B; background:#FFF0ED; }
.practice-fill{ display:flex; gap:8px; margin-top:14px; }
.practice-fill input{ flex:1; min-width:0; padding:12px; border:2px solid var(--line); border-radius:12px; font-size:16px; font-weight:750; }
.practice-fill button,.practice-response-actions button{ padding:11px 14px; border:0; border-radius:12px; background:var(--sky); color:#fff; font-weight:850; }
.practice-guide{ padding:11px 12px; border-radius:12px; background:#FFF7E0; color:#7E5A00; font-size:12px; font-weight:750; line-height:1.55; }
.practice-response textarea{ width:100%; margin-top:11px; padding:12px; border:2px solid var(--line); border-radius:12px; resize:vertical; font:inherit; font-size:14px; line-height:1.5; }
.practice-response-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:9px; }
.practice-feedback{ min-height:28px; margin-top:14px; font-size:14px; font-weight:850; }
.practice-hud{ display:flex; gap:9px; margin:0 0 13px; }
.practice-hud .hud-chip{ padding:7px 13px; border-radius:999px; background:#fff; border:2px solid var(--line); color:var(--ink); font-size:13px; font-weight:850; }
.practice-next-wrap{ display:flex; justify-content:flex-end; margin-top:12px; }
.practice-next{ padding:12px 22px; }
.practice-summary{ text-align:center; padding:18px 6px; }
.practice-summary-icon{ font-size:56px; }
.practice-summary h3{ margin:10px 0 6px; font-size:22px; }
.practice-summary-score{ font-size:16px; font-weight:800; color:var(--ink); }
.practice-summary-score b{ color:var(--sky-dk); font-size:22px; }
.practice-summary-tip{ margin:6px 0 12px; color:var(--ink-soft); font-size:13px; font-weight:750; }
.practice-summary .primary{ margin-top:10px; }

/* 錯題本、模擬測驗、錄音、路徑 */
.exam-tools-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.exam-tool-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:15px 16px; border:2px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); text-align:left; }
.exam-tool-btn .etb-icon{ font-size:26px; }
.exam-tool-btn .etb-title{ font-size:17px; font-weight:850; color:var(--ink); }
.exam-tool-btn .etb-sub{ font-size:11px; font-weight:750; color:var(--ink-soft); }
.exam-tool-wrong{ background:linear-gradient(135deg,#FFF5F2,#fff); }
.exam-tool-mock{ background:linear-gradient(135deg,#EFF7FF,#fff); }
.exam-breadcrumb{ margin:0 0 10px; padding:9px 12px; border-radius:11px; background:#FFF9E8; color:var(--ink); font-size:12px; font-weight:750; line-height:1.6; }
.exam-breadcrumb b{ color:#8A6400; }
.exam-breadcrumb .crumb-tip{ color:var(--ink-soft); font-weight:700; }
.wrongbook-empty{ text-align:center; padding:26px 16px; }
.wb-empty-icon{ font-size:48px; margin-bottom:8px; }
.wrongbook-list{ display:flex; flex-direction:column; gap:9px; margin-top:11px; }
.wrongbook-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border:2px solid var(--line); border-radius:13px; background:#FAFBFC; }
.wb-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.wb-type{ font-size:11px; font-weight:850; color:var(--ink-soft); }
.wb-prompt{ font-size:13px; font-weight:750; color:var(--ink); overflow-wrap:anywhere; }
.wb-retry{ flex:0 0 auto; padding:9px 13px; border:0; border-radius:11px; background:var(--coral); color:#fff; font-weight:850; }
.mock-timer.urgent{ background:#FFE5E5 !important; color:#C0392B; }
.mock-level{ margin:8px 0; font-size:15px; font-weight:800; color:var(--ink); line-height:1.6; }
.mock-level small{ color:var(--ink-soft); font-weight:700; }
.mock-summary-actions{ display:flex; justify-content:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.practice-record{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.practice-rec{ padding:11px 14px; border:0; border-radius:12px; background:var(--coral); color:#fff; font-weight:850; }
.practice-rec.recording{ background:#C0392B; animation:recpulse 1s infinite; }
.practice-audio{ flex:1; min-width:180px; height:38px; }
.practice-record-tip{ margin-top:7px; color:var(--ink-soft); font-size:11px; font-weight:750; }
@keyframes recpulse{ 0%,100%{opacity:1;} 50%{opacity:.65;} }
@media(max-width:700px){
  .exam-tools-row{ grid-template-columns:1fr; }
  .wrongbook-row{ flex-direction:column; align-items:stretch; }
  .wb-retry{ width:100%; }
}

@media(max-width:700px){
  .exam-flow{ grid-template-columns:repeat(2,1fr); }
  .exam-source{ align-items:flex-start; flex-direction:column; }
  .exam-source span{ text-align:left; }
  .exam-vocab-controls{ grid-template-columns:1fr 1fr; }
  .exam-search{ grid-column:1/-1; }
  .exam-daily-btn{ min-height:43px; }
  .exam-word{ align-items:stretch; flex-direction:column; }
  .exam-word-main{ grid-template-columns:minmax(95px,.8fr) auto minmax(110px,1fr); }
  .exam-word .ew-zh{ grid-column:1/-1; }
  .exam-word-actions{ justify-content:flex-end; }
}

@media(max-width:430px){
  .exam-practice-grid{ grid-template-columns:1fr; }
  .exam-level-tabs{ margin-left:-3px; margin-right:-3px; }
  .exam-vocab-controls{ grid-template-columns:1fr; }
  .exam-search{ grid-column:auto; }
  .exam-topic-label,.exam-daily-btn{ min-height:43px; }
  .exam-word-main{ grid-template-columns:minmax(90px,1fr) auto; }
  .exam-word .ew-kk,.exam-word .ew-zh,.exam-word .ew-topic{ grid-column:1/-1; }
  .exam-word .ew-en{ font-size:22px; }
  .exam-word .ew-kk{ font-size:14px; }
  .exam-word .ew-zh{ font-size:16px; }
  .exam-pager{ gap:7px; }
  .exam-pager button{ min-width:78px; padding:9px 6px; }
  .practice-fill{ flex-direction:column; }
  .practice-response-actions{ flex-direction:column; }
}

/* ============================================================
   💻 電腦專用設定（螢幕寬 ≥ 1024px 才生效）
   手機與平板完全不受影響，維持原本大小
   ============================================================ */
@media (min-width: 1024px){
  /* 中間那條變寬：900 → 1200px，內容更飽滿 */
  #app-root{ max-width: 1200px; }
  .bottomnav{ max-width: 1200px; }

  /* 遊戲卡片：字與圖再放大、一排 3 個更好逛 */
  .gamegrid{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .gametile{ min-height: 180px; padding: 26px 22px; }
  .gametile .gi{ font-size: 60px; }
  .gametile .gt{ font-size: 30px; }
  .gametile .gd{ font-size: 18px; }

  /* 單字分類卡：一排 4 個、字放大 */
  .catgrid{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .cattile .ci{ font-size: 52px; }
  .cattile .cn{ font-size: 21px; }
  .cattile .cp{ font-size: 15px; }

  /* 單字卡：字放大 */
  .wordgrid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
  .wordcard .wi{ font-size: 48px; }
  .word-picture--card{ --word-size:68px; border-radius:20px; }
  .wordcard .wt{ font-size: 22px; }
  .wordcard .wz{ font-size: 16px; }
  .wordcard .color-dot{ width: 60px; height: 60px; }
  .wordcard .letter-av{ width: 60px; height: 60px; font-size: 30px; }

  /* 遊戲進行中：選項按鈕、提示字放大 */
  .play-prompt-text{ font-size: 30px; }
  .play-prompt-sub{ font-size: 20px; }
  .play-prompt-icon{ font-size: 72px; }
  .choice-btn{ font-size: 24px; padding: 22px 12px; }
  .choice-btn .ci{ font-size: 42px; }

  /* 氣球爆破：桌機版圖片與英文約放大為原本兩倍 */
  .balloon-area{ height:520px; }
  .balloon{ width:188px; min-height:176px; padding:20px 12px; gap:10px; font-size:30px; }
  .word-picture--balloon{ --word-size:82px; border-radius:23px; }
  .emoji-word--balloon{ font-size:74px; }
  .balloon-word--long{ font-size:23px; }

  /* 故事、考試單字放大 */
  .story-sentence{ font-size: 24px; }
  .story-sentence .szh{ font-size: 17px; }
  .fillblank-sentence{ font-size: 24px; }
  .exam-word .ew-en{ font-size: 27px; }
  .exam-word .ew-kk{ font-size: 18px; }
  .exam-word .ew-zh{ font-size: 20px; }

  /* 考試選單一排 4 個 */
  .examgrid{ grid-template-columns: repeat(4, 1fr); }

  /* 標題再大一點 */
  .section-title{ font-size: 26px; }
  .brand-text h1{ font-size: 21px; }
}