/* 版面：首頁列縣市與場次；遊戲頁一張卡一句話，先猜查證結果再翻開看出處。候選人依場次資料的順序配色 p1、p2 */
:root{
  --bg:#E9EDF1; --panel:#FFFFFF; --ink:#18202C; --mute:#5B6676; --line:#CBD3DC;
  --p1:#2E5E7A; --p1-soft:#DCE8EF; --p2:#C9481C; --p2-soft:#F7E2D8;
  --yes:#2F7A4C; --part:#B07A12; --no:#A33A3A;
  --display:"Noto Serif TC","Songti TC",serif; --body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12171E; --panel:#1C232D; --ink:#E7ECF2; --mute:#98A3B2; --line:#2F3A47;
  --p1:#7FB3D1; --p1-soft:#1D2D38; --p2:#F07A4E; --p2-soft:#3A241C;
  --yes:#6FC48F; --part:#E3B34E; --no:#E07A7A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12171E; --panel:#1C232D; --ink:#E7ECF2; --mute:#98A3B2; --line:#2F3A47;
  --p1:#7FB3D1; --p1-soft:#1D2D38; --p2:#F07A4E; --p2-soft:#3A241C;
  --yes:#6FC48F; --part:#E3B34E; --no:#E07A7A; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;margin:0}
.wrap{max-width:720px;margin:0 auto;padding:20px 16px 48px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.25}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.04em}
.brand small{font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.08em;margin-left:8px;font-weight:500}
.count{font-family:var(--mono);font-size:13px;color:var(--mute)}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);transition:width .3s}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.seg{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute)}
.card{background:var(--panel);border-radius:14px;padding:18px;border:2px solid var(--line);animation:deal .4s ease-out both;display:flex;flex-direction:column;gap:10px}
.card.p1{border-color:var(--p1)} .card.p2{border-color:var(--p2)}
.who{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.card.p1 .who{color:var(--p1)} .card.p2 .who{color:var(--p2)}
.badge{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--panel);font-family:var(--display);font-weight:900;font-size:15px;flex:none}
.badge.p1{background:var(--p1)} .badge.p2{background:var(--p2)}
.ctx{font-size:14px;color:var(--mute)}
.quote{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.5}
.quote small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--mute);margin-top:4px}
.claim{font-size:15px;padding:8px 12px;border-radius:8px;background:var(--bg)}
.claim b{font-size:12px;color:var(--mute);display:block}
.btn{font:inherit;font-weight:700;border:0;border-radius:10px;padding:12px 18px;cursor:pointer;background:var(--ink);color:var(--panel)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn:focus-visible{outline:3px solid var(--part);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.src{font-size:13px;margin:0;padding-left:1.1em}
.src a{color:var(--p1);word-break:break-all}
.note{font-size:13px;color:var(--mute)}
.hero{display:flex;flex-direction:column;gap:14px}
.hero h1{font-size:32px;font-weight:900}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rules div{font-size:14px;min-width:0}
.rules b{display:block;font-family:var(--display);font-size:16px}
.tally{display:flex;flex-direction:column;gap:12px}
.tl h3{font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.stack{display:flex;height:26px;border-radius:6px;overflow:hidden;font-size:12px;font-weight:700;color:var(--panel)}
.stack span{display:grid;place-items:center;min-width:0}
.stack .yes{background:var(--yes)} .stack .part{background:var(--part)} .stack .no{background:var(--no)}
.list{margin:0;padding-left:1.1em;font-size:14px} .list li{margin:4px 0}
.list .w{font-weight:700}
@keyframes deal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:520px){.rules{grid-template-columns:1fr}.hero h1{font-size:27px}.quote{font-size:17px}}
.county{display:flex;flex-direction:column;gap:10px}
.county h2{font-size:20px}
.dlist{display:flex;flex-direction:column;gap:8px}
.debate{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none}
.debate:hover{border-color:var(--ink)}
.debate b{display:block;font-size:16px}
.debate span{font-size:13px;color:var(--mute)}
.debate .go{font-family:var(--mono);font-size:13px;color:var(--mute);flex:none}
.back{font-size:14px;color:var(--mute);text-decoration:none}
/* 攻防：質問卡（質問者顏色外框）＋依序翻開的回應；講到事實的地方掛查核框 */
.stage{display:flex;justify-content:center;align-items:end;gap:14px;margin:4px 0}
.pod{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;flex:1;max-width:160px}
.pod .badge{width:54px;height:54px;font-size:24px}
.pod .desk{width:100%;height:34px;border-radius:6px 6px 0 0;background:var(--ink);color:var(--panel);font-size:14px;display:grid;place-items:center}
.vs{font-family:var(--display);font-weight:900;font-size:24px;color:var(--mute);padding-bottom:4px}
.ask{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;animation:deal .4s ease-out both}
.ask.p1{border-color:var(--p1)} .ask.p2{border-color:var(--p2)}
.ask .who{color:var(--ink)}
.ask h2{font-size:19px;line-height:1.45}
/* 攻防對話串：p1 在左、p2 在右，頭像在外側，泡泡尖角朝頭像；另一側留白讓一來一回看得出來 */
.seg-d{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute)}
.seg-d::before,.seg-d::after{content:"";flex:1;height:1px;background:var(--line)}
.turns{display:flex;flex-direction:column;gap:14px}
.turn{display:flex;align-items:flex-start;gap:8px;padding-right:9%;animation:deal .4s ease-out both;min-width:0;scroll-margin-top:12px}
.turn.p2{flex-direction:row-reverse;padding-right:0;padding-left:9%}
.turn>.badge{width:40px;height:40px;margin-top:20px}
img.badge{object-fit:cover;background:var(--line);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--line)}
img.badge.p1{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--p1)} img.badge.p2{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--p2)}
.col{min-width:0;display:flex;flex-direction:column;gap:5px}
.turn.p2 .col{align-items:flex-end}
/* 泡泡：圓角＋朝頭像的小尖角（旋轉方塊，沿用泡泡的底色與框線） */
.bub{position:relative;min-width:0;border-radius:18px;padding:12px 14px;border:1px solid transparent;box-shadow:0 1px 2px rgb(0 0 0/.08)}
.bub::before{content:"";position:absolute;top:14px;width:12px;height:12px;background:inherit;border:inherit;rotate:45deg}
.turn.p1 .bub::before{left:-7px;border-top-color:transparent;border-right-color:transparent}
.turn.p2 .bub::before{right:-7px;border-bottom-color:transparent;border-left-color:transparent}
.turn.p1 .bub{background:var(--p1-soft)} .turn.p2 .bub{background:var(--p2-soft)}
.turn.qb .bub{background:var(--panel);border:2px solid var(--line)}
.turn.qb.p1 .bub{border-color:var(--p1)} .turn.qb.p2 .bub{border-color:var(--p2)}
.turn.qb .bub::before{top:13px}
.turn.qb.p1 .bub::before{left:-8px} .turn.qb.p2 .bub::before{right:-8px}
.qb h2{font-size:18px;line-height:1.45}
.turn .h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:700;font-size:13px;padding:0 6px}
.turn.p1 .h{color:var(--p1)} .turn.p2 .h{color:var(--p2);flex-direction:row-reverse}
.turn .kind{font-family:var(--mono);font-size:11px;font-weight:500;padding:1px 7px;border-radius:4px;border:1px solid currentColor;color:var(--mute)}
@media (max-width:520px){.turn{padding-right:5%}.turn.p2{padding-left:5%}.turn>.badge{width:34px;height:34px;margin-top:22px}.bub{padding:11px 12px}}
.turn ul,.ra ul{margin:0;padding-left:1.1em} .turn li{margin:2px 0}
.ra{margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--panel);border-left:3px solid var(--mute)}
.ra-h{font-size:12px;font-weight:700;color:var(--mute);margin-bottom:2px}
.turn .quote{margin-top:8px;font-size:17px}
/* 原話＋附在下方的查核：左側細線從頭像往下連到查核框 */
/* 查核標籤：接在它查的那句話後面，像小按鈕，點開彈窗 */
.chk{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:30px;margin:2px 0;padding:2px 6px 2px 4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;line-height:1.3;vertical-align:middle;cursor:pointer;box-shadow:0 1px 0 var(--line);text-align:left}
.chk b{flex:none;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chk span{min-width:0;max-width:11em;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chk i{flex:none;font-style:normal;font-size:17px;line-height:1;color:var(--mute);padding-right:2px}
.chk.yes{border-color:color-mix(in srgb,var(--yes) 45%,var(--line))} .chk.yes b{color:var(--yes);background:color-mix(in srgb,var(--yes) 14%,transparent)}
.chk.part{border-color:color-mix(in srgb,var(--part) 45%,var(--line))} .chk.part b{color:var(--part);background:color-mix(in srgb,var(--part) 16%,transparent)}
.chk.no{border-color:color-mix(in srgb,var(--no) 45%,var(--line))} .chk.no b{color:var(--no);background:color-mix(in srgb,var(--no) 14%,transparent)}
.chk.unk{border-style:dashed;box-shadow:none;background:transparent} .chk.unk b{color:var(--mute);font-weight:500}
.chk:hover{border-color:var(--mute)} .chk:active{transform:translateY(1px)}
.chk:focus-visible{outline:3px solid var(--part);outline-offset:2px}
.quote .chk{font-family:var(--body)}
.said-l{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.said-l li{display:flex;gap:8px;align-items:flex-start}
.said-l .badge{width:22px;height:22px;font-size:11px;margin-top:3px;flex:none}
.said-l span{min-width:0;font-size:15px}
.ask .chk{background:var(--bg)}
/* 彈窗：手機從底部升起，桌機置中 */
body.lock{overflow:hidden}
#pop{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--ink)}
#pop::backdrop{background:rgba(10,14,20,.5)}
.pop-in{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;max-height:85vh;max-height:85dvh;display:flex;flex-direction:column;background:var(--panel);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.pop-in:focus{outline:none}
.pop-b{overflow-y:auto;padding:20px 16px 8px;display:flex;flex-direction:column;gap:10px}
.pop-f{padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex}
.pop-f .btn{flex:1;min-height:48px}
@media (min-width:640px){.pop-in{top:50%;bottom:auto;transform:translateY(-50%);border-radius:16px;max-height:80vh}}
@media (prefers-reduced-motion:no-preference){#pop[open] .pop-in{animation:up .2s ease-out}}
@keyframes up{from{opacity:0;translate:0 24px}}
.said-q{margin:0;display:flex;gap:8px;align-items:flex-start}
.said-q .badge{width:24px;height:24px;font-size:12px;margin-top:2px}
.said-q span{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.5;min-width:0}
.said-q small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--mute)}
.said-q.unk span{font-family:var(--body);font-weight:500;font-size:15px}
.fact{padding:12px 12px 12px 14px;border-left:3px solid var(--line);background:var(--bg);border-radius:0 10px 10px 0;display:flex;flex-direction:column;gap:8px}
.fact.yes{border-left-color:var(--yes)} .fact.part{border-left-color:var(--part)} .fact.no{border-left-color:var(--no)}
.fact.unk{background:transparent;border-left-style:dashed}
.fact p{margin:0;font-size:15px}
.fact-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.fact-h span{font-size:12px;color:var(--mute)}
.vd{font-size:13px;padding:1px 8px;border-radius:999px;white-space:nowrap}
.vd.yes{color:var(--yes);background:color-mix(in srgb,var(--yes) 14%,transparent)}
.vd.part{color:var(--part);background:color-mix(in srgb,var(--part) 16%,transparent)}
.vd.no{color:var(--no);background:color-mix(in srgb,var(--no) 14%,transparent)}
.vd.unk{color:var(--mute);background:transparent;padding:0}
.fact .src{font-size:13px;margin:0;padding-left:1.1em}
.fact .src li{padding:4px 0}

.dock{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%);display:flex}
.dock .btn{flex:1;min-height:48px}
