/* 版面概念：選舉印刷品（Riso 套印）— 螢光粉＋藍雙色錯版、紅色圈選章、貼在牆上的看板。單一配色，刻意不跟隨深色模式。 */
:root{
  color-scheme:light;
  --paper:#ECEEF2;     /* 冷調紙白 */
  --ink:#16141C;       /* 油墨黑 */
  --pink:#FF3D8B;      /* Riso 螢光粉 */
  --blue:#2342F5;      /* Riso 藍 */
  --yellow:#FFE14D;    /* 看板黃 */
  --stamp:#E3242B;     /* 圈選章紅 */
  --mute:#5D5A66;
  --card:#FFFFFF;
  --f-cjk:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-num:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--paper)}
body{margin:0;color:var(--ink);font-family:var(--f-cjk);line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(22,20,28,.07) 1px,transparent 1.2px);background-size:6px 6px}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:980px;margin:0 auto;padding-inline:16px;padding-block:20px 56px}

/* 頂欄 */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:6px 14px}
.logo{font-weight:900;font-size:1.05rem;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.logo i{display:inline-grid;place-items:center;width:28px;height:28px;border:3px solid var(--stamp);border-radius:50%;color:var(--stamp);font-style:normal;font-size:.95rem;transform:rotate(-8deg)}
.dday{font-family:var(--f-num);font-weight:800;font-size:1.05rem;letter-spacing:.04em;background:var(--ink);color:var(--paper);padding:4px 10px;white-space:nowrap}

/* 錯版字 */
.mis{position:relative;display:inline-block;color:var(--ink);text-shadow:3px 2px 0 var(--pink),-3px -2px 0 var(--blue)}
@media (prefers-reduced-motion:no-preference){.mis.jit{animation:jit 3.2s steps(1) infinite}}
@keyframes jit{0%,92%{text-shadow:3px 2px 0 var(--pink),-3px -2px 0 var(--blue)}94%{text-shadow:-4px 3px 0 var(--pink),4px -1px 0 var(--blue)}97%{text-shadow:2px -3px 0 var(--pink),-2px 3px 0 var(--blue)}}

/* 首頁 */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding-block:18px 8px}
@media (max-width:760px){.hero{grid-template-columns:1fr;gap:18px}}
.hero h1{font-size:clamp(2.4rem,7.4vw,4.1rem);line-height:1.08;font-weight:900;margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
.hero p{font-size:1.08rem;margin:0 0 20px;max-width:30em}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.facts span{border:2px solid var(--ink);padding:3px 10px;font-weight:700;font-size:.9rem;background:var(--card)}
.facts b{font-family:var(--f-num);font-size:1.15rem;margin-right:2px}
.go{border:0;background:var(--pink);color:var(--ink);font-weight:900;font-size:1.25rem;padding:16px 34px;box-shadow:6px 6px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.go:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.go:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.wall{position:relative;min-height:340px}
@media (max-width:760px){.wall{min-height:260px}}
.poster{position:absolute;padding:16px 18px;font-weight:900;line-height:1.25;border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(22,20,28,.85);white-space:pre-line;text-align:center}
.poster::before{content:"";position:absolute;top:-12px;left:50%;width:54px;height:18px;margin-left:-27px;background:rgba(255,255,255,.65);border:1px solid rgba(22,20,28,.15);transform:rotate(-4deg)}
.poster .num{position:absolute;right:-14px;top:-14px;width:34px;height:34px;border-radius:50%;border:3px solid var(--stamp);background:var(--card)}
.p1{background:var(--yellow);font-size:clamp(1.3rem,3.6vw,1.9rem);left:2%;top:4%;transform:rotate(-5deg)}
.p2{background:var(--pink);font-size:clamp(1.1rem,3vw,1.5rem);right:2%;top:18%;transform:rotate(4deg)}
.p3{background:var(--blue);color:var(--card);font-size:clamp(1.2rem,3.2vw,1.65rem);left:10%;bottom:6%;transform:rotate(3deg)}
.p4{background:var(--card);font-size:clamp(1rem,2.6vw,1.3rem);right:6%;bottom:2%;transform:rotate(-3deg)}
.note{font-size:.85rem;color:var(--mute);margin-top:22px}
.hero p.note{margin-top:26px}

/* 遊戲 */
.hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hud .chip{font-family:var(--f-num);font-weight:800;font-size:1.25rem;letter-spacing:.03em;border:2px solid var(--ink);padding:2px 10px;background:var(--card);font-variant-numeric:tabular-nums}
.hud .streak{background:var(--yellow)}
.hud .streak.hot{background:var(--pink)}
.hud .sp{flex:1}
.timer{height:10px;border:2px solid var(--ink);background:var(--card);margin-bottom:16px;overflow:hidden}
.timer i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(1)}
.timer.low i{background:var(--stamp)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:760px){.stage{grid-template-columns:1fr;gap:16px}}
.board{position:relative;border:4px solid var(--ink);min-height:300px;display:grid;place-items:center;padding:34px 22px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
@media (max-width:760px){.board{min-height:200px}}
.board::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(22,20,28,.12) 1px,transparent 1.3px);background-size:5px 5px;mix-blend-mode:multiply;pointer-events:none}
.board .num{display:none;position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;border:4px solid var(--stamp);background:var(--card)}
.board .tag{position:absolute;left:14px;top:12px;font-size:.78rem;font-weight:700;letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:1px 8px}
.slogan{position:relative;z-index:1;font-weight:900;text-align:center;line-height:1.3;white-space:pre}
.b-yellow{background:var(--yellow)}.b-pink{background:var(--pink)}.b-blue{background:var(--blue)}.b-blue .slogan{color:var(--card);text-shadow:3px 2px 0 var(--pink)}.b-white{background:var(--card)}
@media (prefers-reduced-motion:no-preference){.board.in{animation:slap .35s cubic-bezier(.2,1.6,.4,1)}}
@keyframes slap{from{transform:scale(1.12) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.ask{font-size:1.25rem;font-weight:900;margin:0 0 10px}
.opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.opt{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) 58px;align-items:stretch;border:3px solid var(--ink);background:var(--card);text-align:left;padding:0;min-height:62px;box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.opt:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:#FFF8CC}
.opt:disabled{cursor:default}
.opt .k{display:grid;place-items:center;border-right:3px solid var(--ink);font-family:var(--f-num);font-weight:900;font-size:1.5rem}
.opt .who{padding:8px 12px;min-width:0}
.opt .who b{display:block;font-size:1.15rem;line-height:1.3}
.opt .who small{color:var(--mute);font-size:.85rem}
.opt .m{display:grid;place-items:center;border-left:3px solid var(--ink)}
.opt.ok{background:var(--yellow)}
.opt.no{background:#E9E7EE}.opt.no .who b{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--stamp)}
.stamp{width:42px;height:42px;border:4px solid var(--stamp);border-radius:50%;display:grid;place-items:center;color:var(--stamp);font-weight:900;font-size:1.35rem;transform:rotate(-10deg);opacity:.92}
@media (prefers-reduced-motion:no-preference){.stamp{animation:stamp .22s ease-out}}
@keyframes stamp{from{transform:rotate(-10deg) scale(1.8);opacity:0}}
.reveal{margin-top:16px;border:3px solid var(--ink);background:var(--card);box-shadow:4px 4px 0 var(--ink)}
.reveal .head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:3px solid var(--ink);font-weight:900}
.reveal .head.good{background:var(--yellow)}.reveal .head.bad{background:var(--pink)}
.reveal .pts{margin-left:auto;font-family:var(--f-num);font-size:1.4rem}
.reveal img{display:block;width:100%;max-height:300px;object-fit:contain;background:#D9DBE1}
.reveal .cap{padding:8px 12px;font-size:.85rem;color:var(--mute)}
.reveal .cap a{color:var(--ink)}
.next{margin-top:14px;width:100%;border:0;background:var(--ink);color:var(--paper);font-weight:900;font-size:1.1rem;padding:14px;box-shadow:4px 4px 0 var(--pink)}

/* 結果 */
.rank{border:4px solid var(--ink);background:var(--yellow);box-shadow:8px 8px 0 var(--ink);padding:24px 22px;position:relative;overflow:hidden}
.rank small{font-weight:700;letter-spacing:.06em}
.rank small,.rank h2{padding-right:110px}
.rank h2{font-size:clamp(2.4rem,9vw,4.4rem);line-height:1.05;margin:4px 0 10px;font-weight:900}
.rank .score{display:flex;gap:18px;flex-wrap:wrap;font-weight:700}
.rank .score b{font-family:var(--f-num);font-size:2.2rem;line-height:1;margin-right:4px;font-variant-numeric:tabular-nums}
.rank .big-stamp{position:absolute;right:-18px;top:-18px;width:150px;height:150px;border:10px solid var(--stamp);border-radius:50%;display:grid;place-items:center;color:var(--stamp);font-size:5rem;font-weight:900;transform:rotate(-14deg);opacity:.85}
@media (max-width:520px){.rank .big-stamp{width:96px;height:96px;font-size:3rem;border-width:7px}.rank small,.rank h2{padding-right:70px}}
.rank p{max-width:26em;margin:12px 0 0;position:relative;z-index:1}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{border:3px solid var(--ink);background:var(--card);font-weight:900;padding:10px 18px;box-shadow:4px 4px 0 var(--ink)}
.btn.pink{background:var(--pink)}
.copied{font-size:.9rem;font-weight:700;align-self:center}
.miss{margin-top:22px}
.miss h3,.vote h3{font-size:1.15rem;margin:0 0 8px}
.miss ul{margin:0;padding-left:1.2em}

/* 投票指南 */
.vote{margin-top:40px;border-top:4px solid var(--ink);padding-top:26px}
.vote h2{font-size:clamp(1.9rem,6vw,3rem);line-height:1.15;margin:0 0 6px;font-weight:900;text-wrap:balance}
.vote .lead{margin:0 0 18px;max-width:36em}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:28px}
@media (max-width:760px){.vgrid{grid-template-columns:1fr}}
.vbox{border:3px solid var(--ink);background:var(--card);padding:14px 16px}
.vbox .big{font-family:var(--f-num);font-weight:900;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.vbox p{margin:6px 0 0;font-size:.95rem}
.vbox ul{margin:6px 0 0;padding-left:1.1em;font-size:.95rem}
.vbox.blue{background:var(--blue);color:var(--card)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
@media (max-width:520px){.cgrid{grid-template-columns:1fr 1fr;gap:8px}.cand{padding:10px}.cand .links a{padding:1px 6px}}
.cand{border:3px solid var(--ink);background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.cand b{font-size:1.15rem}
.cand small{color:var(--mute)}
.cand .links{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cand .links a{font-size:.85rem;font-weight:700;text-decoration:none;border:2px solid var(--ink);padding:1px 8px}
.cand .links a:hover{background:var(--yellow)}
.cand .seen{font-size:.8rem;font-weight:700;background:var(--yellow);align-self:flex-start;padding:0 6px}
.official{display:grid;gap:10px;margin-top:26px}
.official a{display:flex;justify-content:space-between;gap:12px;border:3px solid var(--ink);background:var(--card);padding:12px 14px;text-decoration:none;font-weight:700}
.official a span{color:var(--mute);font-weight:400;font-size:.88rem}
.fine{font-size:.82rem;color:var(--mute);margin-top:18px;max-width:46em}

/* 選區選擇 */
.pick{margin:26px 0 6px}
.pick h2{font-size:1.1rem;margin:0 0 10px;font-weight:900}
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.dist{border:3px solid var(--ink);background:var(--card);text-align:left;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-height:84px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.dist:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.dist b{font-size:1.05rem;line-height:1.25}
.dist small{color:var(--mute);font-size:.82rem;line-height:1.35}
.dist .st{margin-top:auto;font-size:.78rem;font-weight:700;align-self:flex-start;padding:0 6px;border:2px solid var(--ink)}
.dist.open .st{background:var(--yellow)}
.dist.lock{background:#E4E5EA}
.dist.lock .st{border-style:dashed;color:var(--mute)}
.dist[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--pink)}
.dist[aria-pressed="true"] small{color:#C9C7D1}
.dist[aria-pressed="true"] .st{border-color:var(--paper);color:var(--ink)}
.locked-msg{border:3px dashed var(--ink);background:var(--card);padding:14px 16px;margin-top:4px;max-width:34em}
.locked-msg strong{display:block;font-size:1.1rem;margin-bottom:4px}
.meter{height:12px;border:2px solid var(--ink);background:var(--paper);margin:8px 0 6px}
.meter i{display:block;height:100%;background:var(--pink)}
.go:disabled{background:#CFCFD6;box-shadow:6px 6px 0 #8C8A94;cursor:not-allowed;transform:none}

/* 廣告版位：不接候選人、政黨、政治團體廣告 */
.ad{margin-top:30px;border:2px dashed #9A98A3;background:rgba(255,255,255,.6);padding:12px 14px;font-size:.88rem;color:var(--mute);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ad .lbl{font-size:.72rem;letter-spacing:.08em;border:1px solid #9A98A3;padding:0 6px}
.ad a{font-weight:700;color:var(--ink)}

/* 頁尾 */
.foot{margin-top:44px;padding-top:16px;border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.85rem;color:var(--mute)}
.foot a{color:var(--ink);font-weight:700}
.foot .brand{margin-right:auto;font-weight:900;color:var(--ink);text-decoration:none}
.logo a{text-decoration:none}
.poster{max-width:56%}
@media (max-width:760px){.wall{display:none}}

/* 號次 10/23 抽籤後才有內容，有 data-n 才顯示，避免空圈壓到標語 */
.board .num[data-n]{display:grid;place-items:center;font-weight:900}
.board .num[data-n]::before{content:attr(data-n)}

/* TK-5 斷行：段落避免最後一行只剩一兩個字；連結卡在手機上改成上下排 */
.lead,.fine,.note,#heroText,#rankText,.miss li{text-align:justify;text-justify:inter-character}
.official a span{text-align:right;flex-shrink:0;max-width:55%}
@media (max-width:560px){
  .official a{flex-direction:column;align-items:flex-start;gap:2px}
  .official a span{text-align:left;max-width:none}
}

/* TK-11 下一題按鈕：揭曉內容較長時，按鈕固定在畫面底部，不用往下滑 */
.next{position:sticky;bottom:12px;z-index:5}
.pick #heroNote{margin-top:4px}

.reveal .line{margin:0;padding:10px 14px;background:var(--card);border-bottom:3px solid var(--ink);font-weight:700;line-height:1.5}