/* ═══════════════════════════════════════════════════════════════
   🧭 wt-style.css — 詞陣尋跡 v0.1

   色系沿用 MomoLens 的森林蜜桃（Forest Peach 定案，不另立一套）。
   手機優先：所有尺寸先假設 390px 寬的手機，桌機只是「留白變多」。

   🔴 版面上的兩條硬規則（有真瀏覽器探針在量）：
     ① document 永不橫向捲動——要捲的是詞陣自己那個框（黃金庫 U124／A98）
     ② 每一格的**實際可點面積**不因造型縮小：六角形彼此密鋪，
        整個盤面沒有任何一塊「按了不算」的死角（工單 §16）
   ═══════════════════════════════════════════════════════════════ */

:root {
    --forest-deep: #2D4A3E;
    --forest-main: #4A6655;
    --forest-light: #6B8F71;
    --forest-pale: #E8F0E8;
    --peach-deep: #D4845A;
    --peach-main: #E8A87C;
    --peach-light: #F5D0B5;
    --peach-pale: #FFF5EE;
    --correct: #22C55E;
    --wrong: #EF4444;
    --warning: #F59E0B;
    --ink: #2b2b2b;
    --muted: #6b7a70;
    --line: #ded8ce;
    --paper: #FAF7F2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    /* 🔴 document 不准橫向捲（U124）：要捲的是指定的內容器 */
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
    background: linear-gradient(160deg, var(--forest-pale) 0%, var(--peach-pale) 100%);
    background-attachment: fixed;
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.wt-wrap {
    /* 🔴 A209：寬螢幕不要留一大圈空白。
       第一版我寫死 980px，結果教室互動白板在 125% 縮放（3072px）下
       **整個畫面只用掉 30%**——詞陣縮在中間一小塊，後排根本看不到。
       而我自己的探針當時是綠的，因為它只量「有沒有溢出」、沒量「用了幾成」
       （黃金庫 A176／常踩坑 #34、#124，我親手再犯一次）。

       ⚠️ 也不要寫成 min(2600px, 94vw)——那讓**手機**反而少了 6% 寬度
       （盤面因此多溢出 33px）。寬螢幕的留白要由 padding 給，
       不要從最窄的那一端身上拿。 */
    max-width: 2600px;
    margin: 0 auto;
    padding: 0 clamp(6px, 2.5vw, 28px) 48px;
}

/* 教師端是**表單**，不需要跟著螢幕一起變寬（行長太長反而難填）。
   要吃滿螢幕的是投影出去的那一面：詞陣。 */
#lens-wordtrail-teacher { max-width: 980px; margin: 0 auto; }

/* ───────── 頂條 ───────── */
.wt-top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px clamp(6px, 2.5vw, 28px);
    background: linear-gradient(135deg, var(--forest-deep), var(--forest-main));
    color: #fff;
}
.wt-top h1 { font-size: 1.05rem; font-weight: 700; margin-right: auto; letter-spacing: .5px; }
.wt-top h1 small { display: block; font-size: .68rem; opacity: .8; font-weight: 400; letter-spacing: 0; }
.wt-top a, .wt-top button {
    font: inherit; font-size: .82rem; color: #fff; background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
    padding: 6px 12px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.wt-top button:hover, .wt-top a:hover { background: rgba(255,255,255,.26); }

/* ───────── 分頁 ───────── */
.wt-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--line); margin: 14px 0 18px;
}
.wt-tab {
    font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted);
    background: none; border: none; border-bottom: 3px solid transparent;
    padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.wt-tab[aria-selected="true"] { color: var(--forest-deep); border-bottom-color: var(--peach-deep); }

.wt-panel[hidden] { display: none !important; }

/* ───────── 卡片與表單 ───────── */
.wt-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(45,74,62,.06);
}
.wt-card h2 { font-size: 1rem; color: var(--forest-deep); margin-bottom: 6px; }
.wt-card .wt-hint { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }

textarea, input[type="text"], input[type="number"], select {
    font: inherit; width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper);
    color: var(--ink);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.9; }

.wt-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wt-row > label { flex: 1 1 160px; min-width: 0; font-size: .82rem; color: var(--muted); }
.wt-row > label > span { display: block; margin-bottom: 4px; font-weight: 600; }

.wt-btn {
    font: inherit; font-weight: 600; font-size: .9rem;
    padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--forest-main), var(--forest-deep));
    color: #fff; white-space: nowrap; flex: 0 0 auto;
}
.wt-btn.ghost {
    background: #fff; color: var(--forest-deep); border: 1.5px solid var(--line);
}
.wt-btn.peach { background: linear-gradient(135deg, var(--peach-main), var(--peach-deep)); }
.wt-btn:disabled { opacity: .45; cursor: not-allowed; }
.wt-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ───────── 檢核報告 ───────── */
.wt-report { font-size: .85rem; margin-top: 12px; }
.wt-report .wt-ok { color: var(--forest-deep); font-weight: 600; }
.wt-report ul { list-style: none; margin-top: 8px; }
.wt-report li {
    padding: 7px 10px; border-radius: 8px; margin-bottom: 5px;
    background: var(--peach-pale); border-left: 3px solid var(--peach-deep);
}
.wt-report li.warn { background: #FFF8E6; border-left-color: var(--warning); }
/* schema 層的提醒（例如「這張情境圖沒有跟著題包送過來」）——
   靜靜略過的話，老師會以為那一題本來就沒有圖。 */
.wt-report .wt-warn {
    background: #FFF8E6; border-left: 4px solid var(--warning);
    padding: 8px 10px; border-radius: 6px; margin-top: 8px; line-height: 1.6;
}

.wt-items { list-style: none; margin-top: 10px; font-size: .85rem; }
.wt-items li {
    display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
    padding: 8px 0; border-bottom: 1px dashed var(--line);
}
.wt-items b { font-size: 1rem; letter-spacing: 2px; color: var(--forest-deep); }
.wt-items .m { flex: 1 1 200px; min-width: 0; color: var(--muted); }
.wt-items .badge {
    font-size: .72rem; padding: 2px 8px; border-radius: 999px;
    background: var(--forest-pale); color: var(--forest-deep);
}
.wt-items .badge.svg { background: var(--peach-light); color: #7a3f22; }
.wt-items input[type="text"] { flex: 0 0 150px; width: 150px; font-size: .8rem; padding: 5px 8px; }

/* ───────── 學生端 ───────── */
.wt-stage-head {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: .82rem; color: var(--muted); margin-bottom: 10px;
}
.wt-progress {
    flex: 1 1 120px; min-width: 0; height: 8px; border-radius: 999px;
    background: var(--forest-pale); overflow: hidden;
}
.wt-progress i { display: block; height: 100%; background: var(--peach-deep); transition: width .3s; }

.wt-cue {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; margin-bottom: 14px;
}
.wt-cue-label { font-size: .74rem; color: var(--peach-deep); font-weight: 700; letter-spacing: 1px; }
.wt-cue-text {
    font-family: "Noto Serif TC", serif; font-size: 1.12rem; line-height: 1.9;
    color: var(--forest-deep); margin-top: 6px;
    /* 要讀的文字才鎖行長，容器不鎖（黃金庫 A209／常踩坑 #35） */
    max-width: 34em;
}
.wt-cue-target {
    font-family: "Noto Serif TC", serif; font-size: 1.5rem; letter-spacing: 6px;
    color: var(--forest-deep); margin-top: 8px;
}
.wt-cue-media { margin-top: 10px; border-radius: 10px; overflow: hidden; background: var(--paper); }
.wt-cue-img { width: 100%; height: auto; display: block; }
.wt-cue-error { font-size: .85rem; color: #8a2b2b; background: #fdecec; padding: 10px; border-radius: 8px; }
/* 詞義答錯的回饋——**跟題面分開的一格**，所以原情境不會被它洗掉 */
.wt-cue-feedback {
    margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px;
    background: #fdecec; color: #8a2b2b; border-left: 4px solid #c96a6a;
    font-size: clamp(.9rem, .9vw, 1.35rem); line-height: 1.65;
}

.wt-choices { display: grid; gap: 8px; margin-top: 12px; }
.wt-choice {
    font: inherit; text-align: left; font-size: .95rem; line-height: 1.7;
    padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line);
    background: #fff; cursor: pointer; color: var(--ink);
    /* 手機上的可點高度：一行也不能少於 44px */
    min-height: 48px;
}
.wt-choice:hover { border-color: var(--forest-light); background: var(--forest-pale); }
.wt-choice.miss { border-color: var(--wrong); background: #fdecec; }

/* ───────── 詞陣 ───────── */
.wt-boardwrap {
    /* 🔴 盤面大於容器時，捲的是這個框、不是整頁（U55：不外漏） */
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 6px;
}
.wt-board {
    display: block; height: auto; margin: 0 auto; touch-action: manipulation;
    /* 盤面是接近正方形的六邊形：螢幕再寬，它的大小其實是**高度**決定的。
       沒有這一條的話，寬螢幕上盤面會長到超出視窗、變成整頁要捲。 */
    max-height: min(72dvh, 900px);
}
.wt-cell { cursor: pointer; }
.wt-cell polygon {
    fill: var(--paper); stroke: #e6ded2; stroke-width: 2;
    transition: fill .12s, stroke .12s;
}
.wt-cell text {
    font-family: "Noto Serif TC", serif; font-weight: 600;
    fill: var(--forest-deep); text-anchor: middle; dominant-baseline: central;
    pointer-events: none; user-select: none;
}
.wt-cell:hover polygon { fill: var(--forest-pale); }
.wt-cell.picked polygon { fill: var(--forest-main); stroke: var(--forest-deep); }
.wt-cell.picked text { fill: #fff; }
.wt-cell.hint-area polygon { fill: #FFF4DF; stroke: var(--warning); }
.wt-cell.hint-node polygon { fill: var(--peach-light); stroke: var(--peach-deep); stroke-width: 4; }
.wt-cell.shake polygon { fill: #fdecec; stroke: var(--wrong); }
.wt-trail { fill: none; stroke: var(--forest-main); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }

.wt-feedback {
    min-height: 26px; margin-top: 10px; font-size: .88rem; font-weight: 600;
    color: var(--forest-deep);
}
.wt-feedback.bad { color: #a33; }

.wt-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ───────── 本題結果／結束診斷 ───────── */
.wt-result h2 { font-size: 1.15rem; color: var(--forest-deep); }
.wt-result .term { font-family: "Noto Serif TC", serif; font-size: 1.7rem; letter-spacing: 8px; }
.wt-result .fb { margin-top: 8px; font-size: .9rem; color: var(--muted); max-width: 34em; }

.wt-diag { display: grid; gap: 12px; grid-template-columns: 1fr; }
.wt-diag section {
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.wt-diag h3 { font-size: .92rem; color: var(--forest-deep); margin-bottom: 4px; }
.wt-diag p { font-size: .86rem; color: var(--ink); }
.wt-diag .thin { color: var(--muted); font-style: normal; }
.wt-note {
    font-size: .78rem; color: var(--muted); margin-top: 12px; line-height: 1.8;
    border-top: 1px dashed var(--line); padding-top: 10px;
}

/* ───────── 預覽 ───────── */
.wt-preview-legend { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.wt-preview-legend b { color: var(--forest-deep); }

/* 🖥️ 夠寬又夠高的螢幕（教室白板、桌機）：題面放左邊、詞陣放右邊。
   這樣寬度才用得掉——而且投影時「要讀的那句話」跟「要找的詞陣」同時看得到，
   老師不必捲來捲去。窄螢幕維持一欄（手機優先）。 */
@media (min-width: 1180px) and (min-height: 620px) {
    .wt-play-cols { display: flex; gap: clamp(16px, 2vw, 32px); align-items: flex-start; }
    /* 🔴 題面欄有**上限**：3072px 的教室白板上，36% ＝ 905px 拿去裝一行字
       （實測 905×148），右邊的詞陣卻被高度上限卡住——畫面「沒有溢出」，
       但中間空掉一大塊。行長上限本來就該鎖在文字上、不是讓欄位一直長
       （黃金庫 A209／常踩坑 #35）。是**看截圖**才發現的，四視窗斷言全綠。 */
    .wt-play-cols > .wt-cue { flex: 0 1 clamp(320px, 34%, 620px); min-width: 0; margin-bottom: 0; }
    .wt-play-cols > .wt-gridcol { flex: 1 1 auto; min-width: 0; }
    /* 螢幕很高時讓詞陣也長高一點——900px 的上限在 1588px 的白板上只用掉 57%。
       （手機／矮視窗不受影響：這一條在 min-height 620 的媒體查詢裡。） */
    .wt-board { max-height: min(78dvh, 1200px); }
    /* 投影時字要夠大（黃金庫 A176 §3：教室現場的螢幕要單獨想過） */
    .wt-cue-text { font-size: clamp(1.12rem, 1.1vw, 2.2rem); }
    .wt-choice { font-size: clamp(.95rem, .95vw, 1.5rem); }
}

/* 桌機以上：診斷三欄並排（手機仍是一欄，先做手機） */
@media (min-width: 720px) {
    .wt-diag { grid-template-columns: repeat(3, 1fr); }
    .wt-diag .wt-diag-wide { grid-column: 1 / -1; }
}

/* 🎞 尊重「減少動態」：不強迫播放動畫，但題目照樣作答得完（工單 §13） */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}