/* ── 手機版面（720px 以下）＋各寬度共用的減框線、筆順切換 ──
   電腦、平板版面不變；手機改成像 App：上面一條細標題列，學生自學的功能列固定在螢幕底部。 */

/* 卡片裡的小方塊不再加框線，用淺底色分組就好（框太多畫面很擠）；「下一個」、已得到的徽章保留框線 */
.report-stats > div, .task, .badge { border-color: transparent; }

/* 詞條頁筆順：多字詞一次看一個字，上面點字切換 */
.wd-stroke-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wd-side .wd-stroke-pick { justify-content: center; }
.wd-stroke-pick button { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 8px; font-size: 1.25rem; font-weight: 600;
  background: var(--c-161a24); color: var(--c-94a3b8); border: 1.5px solid var(--c-2d3548); }
.wd-stroke-pick button:hover { border-color: var(--c-4f8ef7); }
.wd-stroke-pick button[aria-selected="true"] { border-color: var(--c-4f8ef7); color: var(--c-7dd3fc); background: rgba(79, 142, 247, .12); }

/* 連連看：英文意思很長時按鈕跟著長高，不讓字跑出框外 */
.self-main .pl-match button { height: auto; min-height: 64px; }

.self-nav .nav-more, .nav-scrim { display: none; }

@media (max-width: 720px) {
  /* 1. 細的頂端列：小 logo＋標題，右邊只有圖示的按鈕；往下捲時固定在最上面 */
  body { padding-top: 0; }
  .header-row { position: sticky; top: 0; z-index: 200; flex-wrap: nowrap; align-items: center; gap: 6px;
    width: calc(100% + 24px); margin: 0 -12px 14px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: rgba(var(--ov), .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--c-2d3548); }
  .site-logo { height: 34px; filter: none; }
  .brand { flex: 1 1 auto; min-width: 0; }
  h1 { font-size: 1.05rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .subtitle { display: none; }
  .role-chip { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .role-chip svg.ic { width: 20px; height: 20px; vertical-align: 0; }

  /* 2. 自學功能列固定在螢幕底部：學習的 5 項＋「更多」（設定和查詢工具收在「更多」展開的面板） */
  body:has(#page-self.active) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .self-nav { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 160; width: auto;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--c-2d3548); border-radius: 0;
    background: rgba(var(--ov), .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .self-nav .nav-groups, .self-nav > [data-g], .self-nav.g-tools > [data-g] { display: none; }
  .self-nav > [data-g="learn"]:not(.nav-set), .self-nav.g-tools > [data-g="learn"]:not(.nav-set), .self-nav > .nav-more { display: flex; }
  .self-nav button { flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 1px;
    font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; border-radius: 10px; }
  .self-nav button span { width: auto; }
  .self-nav button svg.ic { width: 22px; height: 22px; }
  .self-nav button.on { background: none; }
  .self-nav button.on svg.ic { color: var(--c-7dd3fc); }
  /* 「更多」展開：設定＋查詢工具排在功能列上方，每排 3 個 */
  .self-nav.more-open { padding-top: 12px; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(5, 8, 15, .3); }
  .self-nav.more-open > .nav-set, .self-nav.more-open > [data-g="tools"] { display: flex; order: -1; grid-column: span 2;
    flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 48px; margin: 0 0 4px; padding: 8px 10px;
    font-size: .82rem; white-space: normal; text-align: left; background: var(--c-161a24); }
  .self-nav.more-open > .nav-set { border-radius: 10px; }
  .self-nav.more-open > [data-sec="home"] { grid-column-start: 1; }   /* 底部那排從新的一排開始 */
  .self-nav.more-open ~ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 155; background: rgba(5, 8, 15, .45); }

  /* 3. 練習畫面：佔滿一個螢幕，底部按鈕列一直貼在螢幕下緣（題目長也按得到） */
  .self-quiz { min-height: calc(100dvh - 90px); overflow: clip; padding: 16px 16px 0 !important; }
  .pl-foot { position: sticky; bottom: 0; z-index: 5; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pl-body { gap: 14px; padding: 20px 0 24px; }
  /* 5. 題目說明縮小，讓題目本身比較突出 */
  .pl-ask { font-size: 1.05rem; line-height: 1.5; }
  .pl-qside .pl-ask { font-size: 1rem; }
  /* 官方題庫「完成段落」每小題 A–F 六個選項：按鈕平分一排，不撐寬版面 */
  .pl-official { grid-template-columns: minmax(0, 1fr); }
  .pl-offrow b { width: 44px; flex: 0 0 auto; }
  .self-main .pl-offrow button { flex: 1 1 0; width: auto; min-width: 0; max-width: 52px; }

  /* 4. 詞條頁：筆順放在解釋後面；動畫等比例縮小（教育部畫面 300×520，授權標示在最下面不能裁） */
  .wd-side { order: 1; }
  .wd-stroke-row { justify-content: center; }
  .wd-stroke-row .hw-cell { width: 246px; height: 427px; }
  .wd-stroke-row .hw-cell iframe { transform: scale(.82); transform-origin: 0 0; }
}