/* forest-reading.css — 新卜森 v3：因子面板、omen「為什麼」、twist 夥伴五行、咕咕博士 AI 解讀面板。
 * 規格：2026-09-24-quiz-shinbokusen-ai-design.md §5.4、§5.5。
 * 🔴 沿用冒險卡配色（奶油紙底、金邊、深青字、棕色小標），不做全黑底＋橘色按鈕。
 * 🔴 360px 寬不可水平捲動：長句一律 overflow-wrap:anywhere，flex 子項 min-width:0。
 * 為什麼另開一檔：forest.css 已 759 行（上限 800），v3 面板樣式獨立維護。 */

/* ── 因子面板（final 卡「森林怎麼算出這支籤」）── */
.forest-factors{padding:20px 7px 18px;border-bottom:2px dashed #c69d69}
.forest-factors .section-num{display:block}
.forest-factors-group{margin-top:14px}
.forest-factors-group h3{display:flex;align-items:center;gap:8px;margin:0 0 7px;color:#0e6072;font-size:13px;font-weight:950;letter-spacing:1.5px}
.forest-factors-group h3:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#cfa66099,transparent)}
.forest-factor-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.forest-factor{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1.5px solid #ead7aa;border-radius:12px;background:#fffdf5}
.forest-factor-text{flex:1;min-width:0;font-size:14px;line-height:1.55;font-weight:750;color:#244c51;overflow-wrap:anywhere}
.forest-delta{flex:none;min-width:42px;margin-top:1px;padding:1px 8px;border:1.5px solid;border-radius:999px;font-size:13px;font-weight:1000;line-height:1.5;text-align:center;font-variant-numeric:tabular-nums}
.forest-delta.is-pos{border-color:#8cc28f;background:#e1f1dc;color:#2e6a3b}
.forest-delta.is-neg{border-color:#aca2cf;background:#e9e5f4;color:#574b83}
.forest-delta.is-zero{border-color:#d3cdbd;background:#efece4;color:#79746a}
.forest-factors-total{display:flex;justify-content:center;margin-top:14px;padding:10px 12px;border:2px solid #e6bf69;border-radius:14px;background:linear-gradient(120deg,#164b58,#0e6072);color:#fff4c8;font-size:15px;font-weight:950;letter-spacing:.5px;text-align:center;overflow-wrap:anywhere}
.forest-factors-total.omen-mist{background:linear-gradient(120deg,#3a4f63,#4d5e78);border-color:#98b3be}
.forest-factors-scale{margin-top:7px;color:#8a6a45;font-size:12px;font-weight:800;line-height:1.5;text-align:center;overflow-wrap:anywhere}

/* ── 因子面板：「為什麼是這款遊戲」（forest-3.1.0 遊戲選擇明細；spec 2026-09-27-forest-slot-boost §C.9）── */
.forest-pick{margin-top:16px;padding:14px 12px 12px;border:2px solid #e6bf69;border-radius:16px;background:linear-gradient(160deg,#fff9e8,#f1f6e8)}
.forest-pick h3{margin:0 0 6px;color:#0e6072;font-size:13px;font-weight:950;letter-spacing:1.5px}
.forest-pick-lead{margin:0 0 9px;color:#164b58;font-size:15px;font-weight:900;line-height:1.5;overflow-wrap:anywhere}
.forest-pick-tempo,.forest-pick-contrast{margin:10px 0 0;color:#244c51;font-size:13.5px;font-weight:750;line-height:1.6;overflow-wrap:anywhere}
.forest-pick-label{margin:12px 0 6px;color:#a46d3b;font-size:12px;font-weight:1000;letter-spacing:1.2px}
.forest-pick-scores{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.forest-pick-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 10px;border:1.5px solid #dccda6;border-radius:999px;background:#fffdf5;color:#4b6b6a;font-size:12.5px;font-weight:850;overflow-wrap:anywhere}
.forest-pick-chip b{font-weight:1000;font-variant-numeric:tabular-nums}
.forest-pick-chip.is-pick{border-color:#e6bf69;background:#164b58;color:#fff4c8}
.forest-pick-chip.is-contrast{border-color:#aca2cf;background:#e9e5f4;color:#574b83}
.forest-pick-tip{margin-top:9px;color:#8a6a45;font-size:12px;font-weight:800;line-height:1.5;overflow-wrap:anywhere}

/* ── omen 畫面：籤名下方的「為什麼」 ── */
.omen-why{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;max-width:360px;margin:10px auto 0!important;font-size:12px!important;line-height:1.4!important;text-shadow:none!important;animation:omenWhyIn .8s ease-out 2.2s both}
.omen-why-label{width:100%;color:#ffe2a1;font-size:11px;font-weight:900;letter-spacing:1.6px;text-shadow:0 2px 6px #061e2a}
.omen-why-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1.5px solid #ffecb899;border-radius:999px;background:#0b3a47cc;color:#fff8e2;font-size:12.5px;font-weight:850;overflow-wrap:anywhere}
.omen-why-chip b{font-weight:1000;font-variant-numeric:tabular-nums}
.omen-why-chip.is-pos b{color:#c9f2b4}
.omen-why-chip.is-neg b{color:#d8cffb}
.omen-mist .omen-why-chip{background:#26394bcc;border-color:#c3d4dc88}
@keyframes omenWhyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── twist 夥伴卡：「屬火・與你同氣」 ── */
.helper-element{align-self:flex-start;margin-top:3px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent,#e6bf69) 18%,#fffbec);color:#164b58;font-size:11.5px;font-weight:900;line-height:1.5;overflow-wrap:anywhere}

/* ── AI 深度解讀面板 ── */
.forest-ai{margin:18px 0 6px;padding:16px 14px 14px;border:2px solid #cfa660;border-radius:18px;background:linear-gradient(160deg,#eef6ea,#fff7df 70%);box-shadow:inset 0 0 0 3px #fffbecb3,0 4px 0 #cfa66055;color:#244c51}
.forest-ai-head{display:flex;align-items:flex-start;gap:10px}
.forest-ai-head>div{min-width:0}
.forest-ai-mark{flex:none;display:grid;place-items:center;width:34px;height:34px;border:2px solid #e6bf69;border-radius:50%;background:#164b58;color:#ffe591;font-size:16px}
.forest-ai h2{margin:1px 0 3px;color:#164d59;font-size:clamp(19px,5.3vw,23px);line-height:1.3;overflow-wrap:anywhere}
.forest-ai-sub{font-size:13.5px;line-height:1.55;font-weight:750;color:#4b6b6a;overflow-wrap:anywhere}
.fortune-card .forest-ai-btn{min-height:52px;margin:14px 0 2px;font-size:16px}
.forest-ai-btn:disabled{opacity:.6}
.forest-ai-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 6px}
.forest-ai-loading[hidden],.forest-ai-err[hidden],.forest-ai-result[hidden],.forest-ai-time[hidden]{display:none}
.forest-ai-dots{display:flex;gap:7px}
.forest-ai-dots i{width:9px;height:9px;border-radius:50%;background:#3f8a55;animation:aiDot 1.2s ease-in-out infinite}
.forest-ai-dots i:nth-child(2){animation-delay:.18s;background:#e6bf69}
.forest-ai-dots i:nth-child(3){animation-delay:.36s;background:#0e6072}
.forest-ai-loading-text{color:#5d6f5d;font-size:13px;font-weight:800;letter-spacing:.5px;text-align:center;overflow-wrap:anywhere}
.forest-ai-err{margin-top:10px;padding:9px 12px;border:1.5px solid #b9aed8;border-radius:12px;background:#f1eef9;color:#4f4478;font-size:14px;font-weight:800;line-height:1.55;overflow-wrap:anywhere}
.forest-ai-result{margin-top:14px;padding-top:12px;border-top:2px dotted #cfa660}
.forest-ai-headline{margin:0 0 6px;color:#164b58;font-family:"Noto Serif TC","Noto Serif SC","Songti TC","Songti SC",serif;font-size:clamp(20px,5.6vw,25px);line-height:1.38;overflow-wrap:anywhere}
.forest-ai-result h4{margin:14px 0 5px;color:#a46d3b;font-size:12px;font-weight:1000;letter-spacing:1.5px}
.forest-ai-result p{font-size:15px;line-height:1.72;font-weight:720;white-space:pre-line;overflow-wrap:anywhere}
.forest-ai-factors{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.forest-ai-factors li{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-left:4px solid #e6bf69;border-radius:4px 12px 12px 4px;background:#fffdf5}
.forest-ai-chip{align-self:flex-start;padding:1px 9px;border-radius:999px;background:#164b58;color:#fff4c8;font-size:11.5px;font-weight:900;letter-spacing:.4px}
.forest-ai-ftext{font-size:14px;line-height:1.62;font-weight:720;overflow-wrap:anywhere}
.forest-ai-lucky{padding:8px 12px;border-radius:12px;background:#e3f1dd;color:#2e5e3b}
.forest-ai-time{margin-top:10px;color:#8a7a5c;font-size:11.5px!important;font-weight:750!important;text-align:right}
.forest-ai-disclaimer{margin-top:12px;color:#8a6a45;font-size:11.5px;line-height:1.5;font-weight:750;text-align:center;overflow-wrap:anywhere}
@keyframes aiDot{0%,80%,100%{transform:scale(.55);opacity:.45}40%{transform:none;opacity:1}}

html.forest-rm .omen-why,html.forest-rm .forest-ai-dots i{animation-duration:.01ms!important;animation-iteration-count:1!important}
@media(max-height:730px){.omen-why{margin-top:6px!important}.omen-why-chip{padding:3px 9px;font-size:11.5px}}