/* 大坑東宣道小學英語每日點讀打卡 · 共用樣式（點讀同質感） */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FDF6EC; --card:#FFFFFF; --ink:#2D3142; --muted:#8D99AE;
  --blue:#2E6FD8; --blue-soft:#EFF5FF; --blue-line:#BFD6FA;
  --red:#E4574F; --red-soft:#FFF1F2; --green:#2F9E63; --orange:#E67E22;
  --gold:#B7791F; --purple:#7C5CD6; --purple-soft:#F4EFFD;
  --radius:18px; --shadow:0 4px 18px rgba(45,49,66,.08);
}
body{font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);padding:26px 18px 70px;max-width:1120px;margin:0 auto}
button{font-family:inherit}

/* ===== 頁頭（標題與返回同一行，緊湊） ===== */
.back-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:#fff;border:2px solid var(--blue-line);color:var(--blue);font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 2px 8px rgba(46,111,216,.10);transition:all .18s ease}
.back-pill .arrow{display:inline-block;transition:transform .18s ease}
.back-pill:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 5px 14px rgba(46,111,216,.30)}
.back-pill:hover .arrow{transform:translateX(-4px)}
.header-row{display:flex;align-items:center;gap:14px}
header.site{text-align:left;margin:0 0 6px}
header.site .header-row h1{flex:1;text-align:center;font-size:26px;font-weight:800;letter-spacing:.5px;color:var(--ink);line-height:1.25}
header.site .header-row .back-pill{flex:none}
header.site .sub{margin-top:4px;font-size:15px;font-weight:700;color:var(--blue);text-align:center}
header.site .sub2{margin-top:2px;font-size:12px;color:var(--muted);text-align:center}
.toplinks{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:8px 0 0}
.toplinks:empty{display:none}

/* ===== 快速導航（每頁頂部，可跳去各 PART） ===== */
.quicknav{position:sticky;top:0;z-index:30;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;background:var(--bg);padding:8px 2px 10px;margin:6px 0 0;border-bottom:1px dashed #EFE3D2}
.qn-btn{border:2px solid #EDF0F8;background:#fff;color:var(--ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 2px 6px rgba(45,49,66,.06);transition:all .15s}
.qn-btn:hover{border-color:var(--blue-line);color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}

/* ===== 分區 ===== */
.section-title{display:flex;align-items:center;gap:12px;margin:30px 0 6px;scroll-margin-top:64px}
.section-title .badge{background:var(--blue);color:#fff;font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:.5px}
.section-title.purple .badge{background:var(--purple)}
.section-title h2{font-size:21px;font-weight:800}
.section-title .line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--blue-line) 0 8px,transparent 8px 14px)}
.section-title .part-btns{margin-left:auto;display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}

/* ===== 詞卡組 ===== */
.group{display:flex;align-items:flex-start;gap:14px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-top:14px}
.group-label{flex:0 0 auto;min-width:150px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.group-label .gname{font-size:15px;font-weight:800;color:var(--gold)}
.group-label .gsub{font-size:12px;color:var(--muted)}
.group-label .gbtns{display:grid;grid-template-columns:repeat(2,max-content);gap:6px;align-items:center;justify-content:start}
.playgroup{border:none;background:#EEF2FB;color:var(--blue);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;transition:background .12s;white-space:nowrap}
.playgroup:hover{background:#DCE6FA}
.playgroup.stop{background:#FDECEC;color:var(--red)}
.playgroup.stop:hover{background:#F9DADA}
.words{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.word{position:relative;background:#FAFBFF;border:2px solid #EDF0F8;border-radius:12px;padding:12px 15px 10px;cursor:pointer;font-size:20px;font-weight:700;user-select:none;transition:transform .12s,border-color .12s,background .12s}
.word:hover{border-color:var(--blue-line);background:var(--blue-soft);transform:translateY(-2px)}
.word.playing{background:var(--red-soft);border-color:var(--red);animation:bounce .5s}
@keyframes bounce{0%{transform:scale(1)}35%{transform:scale(1.1)}70%{transform:scale(.97)}100%{transform:scale(1)}}

/* ===== 拼讀卡 ===== */
.ph-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.ph-card{flex:1 1 320px;max-width:100%;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.ph-card .ph-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ph-card .ph-letters{font-size:26px;font-weight:800;color:var(--blue);letter-spacing:1px}
.ph-card .ph-ipa{font-size:14px;color:var(--muted);font-weight:700}
/* 字母組合/音標可點擊聽「發音（音素）」 */
.ph-tok{cursor:pointer;transition:color .12s}
.ph-tok:hover{color:var(--red);text-decoration:underline dotted;text-underline-offset:4px}
.ph-tok.playing{animation:tokBounce .45s ease}
@keyframes tokBounce{0%{transform:scale(1)}35%{transform:scale(1.15)}70%{transform:scale(.96)}100%{transform:scale(1)}}
.ph-btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ph-card .ph-btns{margin-left:auto}
.ph-card .ph-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{background:#FAFBFF;border:2px solid #EDF0F8;border-radius:999px;padding:7px 13px;font-size:15px;font-weight:700;cursor:pointer;transition:all .12s}
.chip b{color:var(--red);font-weight:800}
.chip:hover{border-color:var(--blue-line);background:var(--blue-soft);transform:translateY(-2px)}
.chip.playing{background:var(--red-soft);border-color:var(--red);animation:bounce .5s}

/* ===== 句型 ===== */
.sent-list{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 18px;margin-top:14px}
.sent-bar{display:flex;gap:8px;align-items:center;padding:10px 4px;border-bottom:1px dashed #EEE6D8;flex-wrap:wrap}
.sent-list{scroll-margin-top:76px}
.group-nav{display:flex;flex-wrap:wrap;gap:8px;padding:12px 4px 4px}
.nav-chip{border:2px solid var(--blue-line);background:#fff;color:var(--blue);border-radius:999px;padding:6px 14px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}
.nav-chip:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-2px)}
/* 每個單元一種顏色 */
.nav-chip.c1{border-color:#BFD6FA;background:#EFF5FF;color:#2E6FD8}
.nav-chip.c1:hover{background:#2E6FD8;border-color:#2E6FD8;color:#fff}
.nav-chip.c2{border-color:#B7E4CC;background:#EDFBF3;color:#2F9E63}
.nav-chip.c2:hover{background:#2F9E63;border-color:#2F9E63;color:#fff}
.nav-chip.c3{border-color:#F6D3A8;background:#FFF7EC;color:#C4700F}
.nav-chip.c3:hover{background:#E67E22;border-color:#E67E22;color:#fff}
.nav-chip.c4{border-color:#F5C2BE;background:#FFF1F2;color:#C0392B}
.nav-chip.c4:hover{background:#C0392B;border-color:#C0392B;color:#fff}
.nav-chip.c5{border-color:#D8CCF5;background:#F4EFFD;color:#6B46C1}
.nav-chip.c5:hover{background:#7C5CD6;border-color:#7C5CD6;color:#fff}
.nav-chip.c6{border-color:#AEDDE2;background:#EDF9FA;color:#0E7C86}
.nav-chip.c6:hover{background:#0E9AA7;border-color:#0E9AA7;color:#fff}
.nav-chip.c7{border-color:#EBD6A5;background:#FDF7E7;color:#96690F}
.nav-chip.c7:hover{background:#B7791F;border-color:#B7791F;color:#fff}
.nav-chip.c8{border-color:#F4C0DA;background:#FDF0F7;color:#B83280}
.nav-chip.c8:hover{background:#D6498A;border-color:#D6498A;color:#fff}
.nav-chip.c9{border-color:#C9D0DA;background:#F3F5F8;color:#3E4A5B}
.nav-chip.c9:hover{background:#4A5568;border-color:#4A5568;color:#fff}
.bottom-back{display:flex;justify-content:center;padding:30px 0 46px}
.sent-bar .gname{font-size:15px;font-weight:800;color:var(--gold);margin-right:auto}
.sent{display:flex;align-items:center;gap:12px;padding:12px 10px;border-bottom:1px dashed #EEE6D8;cursor:pointer;border-radius:10px;transition:background .12s}
.sent:last-child{border-bottom:none}
.sent:hover{background:#F2F7FF}
.sent.playing{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red)}
.sent .num{flex:0 0 30px;height:30px;border-radius:50%;background:#FFF3D6;color:#8A6A1F;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sent .en{font-size:19px;font-weight:700;line-height:1.45}
.sent .spk{margin-left:auto;font-size:14px;opacity:.3}
.sent.playing .spk{opacity:1}
.hl{color:var(--red)} .hl-must{color:var(--green)} .hl-q{color:var(--blue)} .hl-ing{color:var(--orange)}

/* ===== 閱讀篇章（段落式） ===== */
.reading{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;margin-top:14px}
.reading .rd-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px dashed #EEE6D8}
.reading .rd-title{font-size:17px;font-weight:800}
.reading .rd-cn{font-size:12px;color:var(--muted)}
.reading .rd-head .ph-btns{margin-left:auto}
.reading .rd-body{padding-top:12px}
.reading .para{font-size:19px;font-weight:700;line-height:2.05;padding:6px 0;border-bottom:1px dashed #F0E9DC}
.reading .para:last-child{border-bottom:none}
.reading .para .sn{cursor:pointer;border-radius:8px;padding:2px 4px;transition:background .12s}
.reading .para .sn:hover{background:#F2F7FF}
.reading .para .sn.playing{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red)}

/* ===== 知識點卡 ===== */
.kp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:14px}
.kp-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.kp-card .kp-name{font-size:16px;font-weight:800;color:var(--purple)}
.kp-card .kp-name .cn{font-size:12px;color:var(--muted);font-weight:500;margin-left:8px}
.kp-card .kp-rule{font-size:13px;color:var(--ink);background:var(--purple-soft);border-radius:10px;padding:8px 12px;line-height:1.6}
.kp-card .kp-exs{display:flex;flex-direction:column;gap:2px}
.kp-card .kp-ex{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px dashed #F0E9DC;cursor:pointer;border-radius:8px;transition:background .12s}
.kp-card .kp-ex:last-child{border-bottom:none}
.kp-card .kp-ex:hover{background:#F6F2FF}
.kp-card .kp-ex.playing{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red)}
.kp-card .kp-ex .en{font-size:15px;font-weight:700;line-height:1.5}
.kp-card .kp-ex .spk{margin-left:auto;font-size:13px;opacity:.3}
.kp-card .kp-ex.playing .spk{opacity:1}
.kp-card .kp-btns{display:flex;gap:6px;flex-wrap:wrap}

/* ===== 狀態條 ===== */
.play-status{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:rgba(45,49,66,.28);color:rgba(255,255,255,.9);font-size:16px;font-weight:600;padding:11px 22px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.10);opacity:0;pointer-events:none;transition:opacity .25s;max-width:90vw;text-align:center;z-index:50}
.play-status.show{opacity:1}

/* ===== 平板（iPad 竖屏等 641–1024px）：卡片内 4 颗按钮收窄一档，保证一行排齐 ===== */
@media (min-width:641px) and (max-width:1040px){
  .playgroup{font-size:11px;padding:4px 9px}
  .kp-card .kp-btns,.ph-card .ph-btns,.reading .rd-head .ph-btns{flex-wrap:nowrap;gap:5px}
  .kp-card{padding:14px 15px}
}

@media (max-width:640px){
  body{padding:14px 10px 56px}
  header.site .header-row{gap:10px}
  header.site .header-row h1{font-size:18px}
  header.site .header-row .back-pill{padding:5px 12px;font-size:12px;gap:5px}
  header.site .sub{font-size:13px;margin-top:3px}
  header.site .sub2{font-size:11px}
  .quicknav{margin-top:4px}

  /* 快速導航：緊湊橫滑 */
  .quicknav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:8px 2px 8px;margin-top:8px}
  .qn-btn{flex:0 0 auto;font-size:12px;padding:5px 10px}

  /* 分區標題：徽章+標題一行，按鈕獨佔一行自動折行（不再出界） */
  .section-title{flex-wrap:wrap;gap:8px;margin:26px 0 4px;scroll-margin-top:64px}
  .section-title .line{display:none}
  .section-title h2{font-size:17px;flex:1;min-width:0}
  .section-title .badge{font-size:11px;padding:3px 10px}
  .section-title .part-btns{width:100%;margin-left:0;justify-content:flex-start;gap:5px}

  /* 所有膠囊按鈕：手機統一縮小一號，一行可容納更多 */
  .playgroup,.ph-card .ph-btns .playgroup{font-size:11px;padding:5px 10px}
  .qn-btn,.nav-chip{font-size:12px;padding:5px 11px}

  /* 詞卡組：標題自佔一行，按鈕流式鋪滿整行（取消 3×2 網格的右側空白） */
  .group{flex-direction:column;gap:10px;padding:12px 12px;margin-top:10px}
  .group-label{flex:none;width:100%;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
  .group-label .gname{font-size:14px}
  .group-label .gsub{font-size:11px}
  .group-label .gbtns{display:flex;flex-wrap:wrap;gap:5px}
  /* 詞卡：更緊湊，一行可排更多字 */
  .words{gap:7px}
  .word{font-size:16px;padding:9px 11px 7px;border-radius:10px}
  .word b{font-size:inherit}

  /* 拼讀卡 */
  .ph-row{gap:10px;margin-top:10px}
  .ph-card{padding:12px 13px}
  .ph-card .ph-letters{font-size:20px}
  .ph-card .ph-words{gap:6px;margin-top:9px}
  .chip{font-size:13px;padding:6px 10px}

  /* 句型 */
  .sent-list{padding:8px 12px;margin-top:10px}
  .sent{padding:10px 6px;gap:9px}
  .sent .num{flex:0 0 24px;height:24px;font-size:12px}
  .sent .en{font-size:15px;line-height:1.5}
  .sent-bar{padding:8px 2px}
  .sent-bar .gname{font-size:14px}
  .group-nav{gap:6px;padding:10px 2px 2px}

  /* 閱讀 */
  .reading{padding:12px 14px;margin-top:10px}
  .reading .para{font-size:15px;line-height:1.9}
  .reading .rd-title{font-size:15px}

  /* 知識點 */
  .kp-grid{grid-template-columns:1fr;gap:10px;margin-top:10px}
  .kp-card{padding:12px 14px;gap:8px}
  .kp-card .kp-rule{font-size:12px;padding:7px 10px}
  .kp-card .kp-ex .en{font-size:14px}

  .bottom-back{padding:20px 0 36px}
  .play-status{font-size:14px;padding:9px 16px}
}