/* 一票之前：像素 RPG 視窗風格。字型為俐方體11號（SIL OFL 1.1，見 assets/fonts/OFL.txt）。
   所有圖案為本站原創的像素圖；沒有外部字型、圖檔或腳本。 */

@font-face {
  font-family: "Cubic 11";
  src: url("fonts/Cubic_11.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0a0a10;
  --bg2: #0e0e16;
  --win: #000;
  --ink: #fff;
  --text: #e8eaf2;
  --mute: #b9bdcc;
  --hair: #4b4f63;
  --stamp: #ff5a4a;
  --mark: #ffe36b;
  --mark-ink: #000;
  --px: "Cubic 11", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", "Source Han Sans TC", sans-serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", "Source Han Sans TC", system-ui, sans-serif;
  --gutter: clamp(14px, 4vw, 32px);
  --measure: 62rem;
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='3' y='0' width='3' height='1'/%3E%3Crect x='1' y='1' width='5' height='1'/%3E%3Crect x='0' y='2' width='2' height='4'/%3E%3Crect x='12' y='0' width='3' height='1'/%3E%3Crect x='12' y='1' width='5' height='1'/%3E%3Crect x='16' y='2' width='2' height='4'/%3E%3Crect x='3' y='17' width='3' height='1'/%3E%3Crect x='1' y='16' width='5' height='1'/%3E%3Crect x='0' y='12' width='2' height='4'/%3E%3Crect x='12' y='17' width='3' height='1'/%3E%3Crect x='12' y='16' width='5' height='1'/%3E%3Crect x='16' y='12' width='2' height='4'/%3E%3Crect x='6' y='0' width='6' height='2'/%3E%3Crect x='6' y='16' width='6' height='2'/%3E%3Crect x='0' y='6' width='2' height='6'/%3E%3Crect x='16' y='6' width='2' height='6'/%3E%3C/g%3E%3C/svg%3E");
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='3' height='1'/%3E%3Crect x='0' y='3' width='4' height='1'/%3E%3Crect x='0' y='4' width='3' height='1'/%3E%3Crect x='0' y='5' width='2' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg) conic-gradient(var(--bg2) 25%, var(--bg) 0 50%, var(--bg2) 0 75%, var(--bg) 0) 0 0 / 8px 8px;
  color: var(--text);
  font: 400 1.0625rem/1.85 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

img, svg { max-width: 100%; }
svg.spr { display: block; max-width: none; image-rendering: pixelated; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.skip { position: absolute; left: var(--gutter); top: -5rem; z-index: 10; background: var(--ink); color: #000; padding: 0.5rem 1rem; }
.skip:focus { top: 0.5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 像素字：標題、選單、按鈕、遊戲文字。24px = 字型 12px 格的兩倍，邊緣最乾淨。 ---------- */

.px, h1, h2, h3, .brand, .site-head nav a, .snd, .btn, .tabs a, .cmd a, .cmd button, .kind, .q, .pick, .mark, .tally, .seal, .wt {
  font-family: var(--px);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: none;
}

h1, h2, h3 { line-height: 1.5; margin: 0; }
h1 { font-size: 36px; }
h2 { font-size: 24px; padding-bottom: 6px; border-bottom: 4px solid var(--ink); margin-top: 48px; margin-bottom: 18px; }
h3 { font-size: 24px; }
p { margin: 0 0 1em; max-width: 44rem; }
.lead { font-size: 1.15rem; max-width: 40rem; }
.muted { color: var(--mute); }
.small { font-size: 0.9rem; }
code { background: #1c1c28; padding: 0.05em 0.4em; }

/* ---------- 視窗：黑底、白框、四角削掉一階 ---------- */

.win, .cand, .kn, .ttl, .sides, .sched, .rules, .tlist, .how, .loading, .err, .card, .npcwin, .miss {
  position: relative;
  border: 12px solid transparent;
  border-image: var(--frame) 6 / 12px stretch;
  background: var(--win);
}
.win { margin: 40px 0 0; padding: 8px 6px 4px; }
h2.wt {
  position: absolute; top: -26px; left: 14px; margin: 0; padding: 0 8px;
  background: var(--win); border: 0; font-size: 24px; line-height: 36px; color: var(--ink);
}

/* ---------- 頁首頁尾 ---------- */

.site-head { background: #000; border-bottom: 4px solid var(--ink); box-shadow: 0 4px 0 #000, 0 8px 0 var(--ink); margin-bottom: 8px; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 20px; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 24px; line-height: 1.5; letter-spacing: 0.04em; }
.brand svg { flex: none; }
.site-head nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.site-head nav a, .snd { position: relative; text-decoration: none; font-size: 24px; line-height: 1.5; padding: 2px 0 2px 0; color: var(--mute); }
.site-head nav a:hover { color: var(--ink); }
.site-head nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -4px 0 var(--stamp); }
.snd { background: none; border: 0; cursor: pointer; font-size: 24px; padding-inline: 0; }
.snd:hover { color: var(--ink); }
.snd[aria-pressed="true"] { color: var(--mark); }

.site-foot { margin-top: 72px; border-top: 4px solid var(--ink); box-shadow: 0 -4px 0 #000, 0 -8px 0 var(--ink); background: #000; font-size: 0.9rem; color: var(--mute); }
.site-foot .wrap { padding-block: 24px 40px; }
.site-foot p { margin: 0 0 0.5rem; max-width: 46rem; }
.site-foot strong { color: var(--ink); }

main { display: block; padding-block: 24px 0; }
main:focus { outline: none; }

.loading, .err { padding: 12px 16px; max-width: 40rem; }
.err strong { color: var(--stamp); }
.err code { background: #1c1c28; }

/* ---------- 出處 ---------- */

.srcs { display: inline; margin-left: 0.25em; }
a.src { display: inline; font: 400 0.78rem/1.4 var(--sans); color: var(--mute); white-space: nowrap; text-decoration: underline dotted; margin-right: 0.35em; }
a.src::before { content: "["; }
a.src::after { content: "]"; }
a.src:hover { color: var(--ink); }
.src.missing { color: var(--stamp); font-size: 0.78rem; font-weight: 700; }

/* ---------- 按鈕、分頁籤 ---------- */

.btn {
  position: relative; display: inline-block; cursor: pointer; text-decoration: none;
  font-size: 24px; line-height: 1.5; color: var(--ink); background: #000;
  border: 4px solid var(--ink); padding: 4px 18px 4px 40px;
}
.btn::before, .cmd a::before, .cmd button::before, .opt::before, .names .pick::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 21px; margin-top: -10px;
  background: var(--cursor) no-repeat center / 12px 21px; visibility: hidden;
}
.btn:hover::before, .btn:focus-visible::before, .cmd a:hover::before, .cmd button:hover::before,
.cmd a:focus-visible::before, .cmd button:focus-visible::before,
.opt:hover:not(:disabled)::before, .opt:focus-visible::before,
.names .pick:hover:not(:disabled)::before, .names .pick:focus-visible::before { visibility: visible; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.btn:hover { background: #1c1c28; }
.btn.ghost { border-color: var(--hair); color: var(--mute); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { background: var(--ink); color: #000; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled::before { visibility: hidden; }
.btn.go { font-size: 24px; padding-block: 8px; }

.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.tabs a { display: block; padding: 2px 14px; border: 4px solid var(--hair); background: #000; text-decoration: none; font-size: 24px; line-height: 1.5; color: var(--mute); }
.tabs a:hover { border-color: var(--ink); color: var(--ink); }
.tabs a[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: #000; }
.tabs .n { font: 400 0.8rem/1 var(--sans); margin-left: 8px; }

.linkbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--mute); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }

/* ---------- 指令選單：▶ 游標在滑過或聚焦的那一列閃爍 ---------- */

.cmd { list-style: none; margin: 0; padding: 0; }
.cmd a, .cmd button {
  position: relative; display: block; width: 100%; text-align: left; text-decoration: none; cursor: pointer;
  background: none; border: 0; color: var(--ink); padding: 6px 12px 6px 44px; font-size: 24px; line-height: 1.5;
}
.cmd a:hover, .cmd button:hover, .cmd a:focus-visible, .cmd button:focus-visible { background: #14141e; }
.cmd a:focus-visible, .cmd button:focus-visible { outline-offset: -3px; }
.cmd small { display: block; font: 400 0.9rem/1.5 var(--sans); color: var(--mute); }
.cmd .locked { color: var(--mute); }
.cmd .locked .spr { opacity: 0.8; }
.cmd .sub { display: flex; align-items: center; gap: 14px; }
.cmd.two { display: grid; grid-template-columns: 1fr; }
@media (min-width: 520px) { .cmd.two { grid-template-columns: 1fr 1fr; } }

/* ---------- 首頁：標題畫面 ---------- */

.wrap.home { max-width: 46rem; }
.title { text-align: center; padding: 20px 8px 14px; margin-top: 12px; }
.title .sub { margin: 0 auto 6px; max-width: none; font: 24px/1.5 var(--px); color: var(--mute); }
.title h1 { font-size: 56px; line-height: 1.25; letter-spacing: 0.06em; margin: 0; text-shadow: 4px 4px 0 #3a3a4c; }
.title .tagline { margin: 6px auto 0; max-width: none; font: 24px/1.5 var(--px); }
.title .audience { margin: 0 auto; max-width: none; color: var(--mute); }
.stage { display: flex; align-items: flex-end; justify-content: center; gap: 28px; margin: 18px 0 0; padding: 0 0 0; border-bottom: 8px solid #2c2c3c; }
.stage .spr { margin-bottom: -2px; }
.stage .bob { animation: bob 1.2s steps(1) infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.count { margin: 14px 0 4px; font: 24px/1.5 var(--px); max-width: none; }
.count span { background: var(--mark); color: var(--mark-ink); padding: 0 8px; margin: 0 4px; }
.when { margin: 0; color: var(--mute); max-width: none; font-size: 0.95rem; }
@media (min-width: 480px) { .title h1 { font-size: 72px; } }
@media (min-width: 760px) { .title h1 { font-size: 96px; } }

.hud { display: flex; align-items: center; gap: 16px; padding: 4px 8px 12px; }
.hud .nm { margin: 0; font: 24px/1.5 var(--px); max-width: none; }
.hud .nm b { font-weight: 400; background: var(--mark); color: var(--mark-ink); padding: 0 8px; margin-left: 4px; }
.hud p { margin: 0; max-width: none; }

/* ---------- 日程、折疊區塊 ---------- */

.sched { margin: 0; padding: 4px 0; list-style: none; }
.sched li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.25rem 1rem; padding: 0.5rem 0.75rem; }
.sched li + li { border-top: 2px dotted var(--hair); }
.sched time { font-weight: 700; }
.sched .today { background: var(--mark); color: var(--mark-ink); }
.sched .today a.src { color: #333; }
@media (max-width: 520px) { .sched li { grid-template-columns: 1fr; } }

.fold { margin-top: 40px; }
.fold > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 6px; border-bottom: 4px solid var(--ink); cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; padding: 0; border: 0; font-size: 24px; }
.fold > summary .sub { margin-right: auto; font-size: 0.9rem; color: var(--mute); }
.fold > summary::after { content: "展開"; font: 24px/1.5 var(--px); color: var(--mute); white-space: nowrap; }
.fold[open] > summary::after { content: "收合"; }
.fold > .inner { margin-top: 20px; }

/* ---------- 候選人 ---------- */

.how { padding: 8px 14px; margin-bottom: 24px; max-width: 46rem; }
.how summary { cursor: pointer; font: 24px/1.5 var(--px); }
.how dl { margin: 12px 0 0; display: grid; grid-template-columns: 6rem 1fr; gap: 0.4rem 1rem; }
.how dt { font-weight: 700; }
.how dd { margin: 0; }
.how p { margin: 12px 0 0; }

.cands { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); align-items: start; }
.cand header { padding: 6px 10px 12px; border-bottom: 4px dotted var(--hair); }
.cand h3 { font-size: 36px; letter-spacing: 0.06em; }
.cand .party { margin: 0.1rem 0 0; font-weight: 700; }
.cand .role { margin: 0; color: var(--mute); font-size: 0.95rem; }
.cand .body { padding: 14px 10px 8px; }
.cand dl.meta { margin: 0 0 1rem; display: grid; grid-template-columns: 4rem 1fr; gap: 0.2rem 0.75rem; font-size: 0.95rem; }
.cand dl.meta dt { font-weight: 700; }
.cand dl.meta dd { margin: 0; }
.cand dl.meta ul { margin: 0; padding-left: 1.1em; }
.cand h4 { font: 400 24px/1.5 var(--px); margin: 1.1rem 0 0.4rem; }
.cand .fill { display: inline-block; font: 400 0.82rem/1.6 var(--sans); color: var(--mute); border: 2px solid var(--hair); padding: 0 0.5em; margin-left: 0.6em; vertical-align: 0.15em; }
.cand .note { font-size: 0.9rem; border-left: 4px solid var(--hair); padding-left: 0.75rem; color: var(--mute); margin: 1rem 0 0; }
.cand .reg { margin: 0; padding-left: 1.2em; font-size: 0.95rem; }
.cand .reg li { margin-bottom: 0.15rem; }
.cand .srcline { margin: 1rem 0 0; font-size: 0.85rem; color: var(--mute); }
.cand .regd { margin-top: 1.1rem; }
.cand .regd > summary { cursor: pointer; font: 24px/1.5 var(--px); }
.cand .regd > .reg, .cand .regd > p { margin-top: 0.5rem; }

.tl { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 4px solid var(--ink); }
.tl li { position: relative; padding: 0 0 0.9rem 0.9rem; }
.tl li::before { content: ""; position: absolute; left: calc(-1.1rem - 10px); top: 0.55em; width: 12px; height: 12px; background: #000; border: 4px solid var(--ink); }
.tl li.on::before { background: var(--stamp); border-color: var(--stamp); }
.tl time { display: block; font-weight: 700; font-size: 0.9rem; }
.tl .t { display: block; line-height: 1.6; }
.tl .why { display: block; font-size: 0.85rem; color: var(--mute); line-height: 1.55; }
.badge { display: inline-block; font: 400 0.74rem/1.5 var(--sans); padding: 0 0.45em; border: 1px solid var(--mute); color: var(--mute); margin-left: 0.4em; vertical-align: 0.1em; white-space: nowrap; }
.badge.calc { background: var(--mark); color: var(--mark-ink); border-color: var(--mark); font-weight: 700; }

/* ---------- 議題 ---------- */

.tlist { display: grid; padding: 0; }
.tlist a { display: block; position: relative; padding: 14px 18px 14px 46px; text-decoration: none; }
.tlist a + a { border-top: 4px dotted var(--hair); }
.tlist a::before { content: ""; position: absolute; left: 16px; top: 22px; width: 12px; height: 21px; background: var(--cursor) no-repeat center / 12px 21px; visibility: hidden; }
.tlist a:hover, .tlist a:focus-visible { background: #14141e; }
.tlist a:hover::before, .tlist a:focus-visible::before { visibility: visible; animation: blink 1s steps(1) infinite; }
.tlist h3 { font-size: 24px; }
.tlist .k { margin: 0.1rem 0 0; font-weight: 700; }
.tlist p { margin: 0; color: var(--mute); max-width: 44rem; }

.crumb { margin: 0 0 1rem; font-size: 0.95rem; }
.tdetail h1 { margin-bottom: 0.4rem; }
.tdetail .kicker { font: 24px/1.6 var(--px); margin: 0 0 1rem; max-width: 40rem; }
.tdetail .summary { max-width: 44rem; border-left: 8px solid var(--ink); padding-left: 1rem; }
.tdetail .asof { font-size: 0.9rem; color: var(--mute); }
.tdetail .blackout { margin: 0 0 1rem; padding: 0.55rem 0.8rem; background: #000; border-left: 8px solid var(--stamp); font-size: 0.9rem; }
.tdetail .cta.first { margin: 0 0 1.25rem; }

.kn { margin: 0; padding: 2px 6px; }
.kn .kr { display: grid; grid-template-columns: 11rem 1fr; gap: 0.25rem 1.25rem; padding: 0.75rem 0.5rem; }
.kn .kr + .kr { border-top: 2px dotted var(--hair); }
.kn dt { font-weight: 700; }
.kn dd { margin: 0; }
.kn .v { font: 24px/1.6 var(--px); }
.kn .v span { background: var(--mark); color: var(--mark-ink); padding: 0 0.25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kn .nt { font-size: 0.92rem; color: var(--mute); margin-top: 0.15rem; }
@media (max-width: 640px) { .kn .kr { grid-template-columns: 1fr; } }

.ttl { list-style: none; margin: 0; padding: 2px 6px; }
.ttl li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.25rem 1rem; padding: 0.6rem 0.5rem; }
.ttl li + li { border-top: 2px dotted var(--hair); }
.ttl time { font-weight: 700; font-size: 0.95rem; }
@media (max-width: 560px) { .ttl li { grid-template-columns: 1fr; } }

.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); padding: 0; }
.side + .side { border-left: 4px dotted var(--hair); }
.side h3 { font-size: 24px; padding: 4px 14px; background: var(--ink); color: #000; }
.side .claim { padding: 0.85rem 1rem; }
.side .claim + .claim { border-top: 2px dotted var(--hair); }
.side .who { font-weight: 700; margin: 0 0 0.2rem; max-width: none; font-size: 0.95rem; }
.side .claim p { margin: 0; font-size: 0.97rem; max-width: none; }
@media (max-width: 700px) { .side + .side { border-left: 0; border-top: 4px dotted var(--hair); } }

.reads { display: grid; gap: 0.75rem; }
.read { background: #000; border: 4px solid var(--hair); padding: 0.75rem 1rem; }
.read p { margin: 0.3rem 0 0; max-width: 46rem; }
.read .badge { margin-left: 0; font-size: 0.8rem; }

.gaps { background: #000; border: 4px dashed var(--hair); padding: 0.75rem 1rem 0.75rem 2.2rem; margin: 0; }
.gaps li { margin: 0.15rem 0; }

.srclist { padding-left: 1.4em; font-size: 0.92rem; }
.srclist li { margin-bottom: 0.3rem; }
.srclist .q { color: var(--mute); }
.cta { margin-top: 2rem; }

/* ---------- 遊戲 ---------- */

.wrap.play { max-width: 40rem; }

.pbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 28px; }
.dots { display: flex; flex-wrap: wrap; gap: 8px; }
.dots i { display: block; width: 20px; height: 20px; border: 4px solid var(--hair); background: #000; }
.dots i.now { border-color: var(--ink); animation: blink 1s steps(1) infinite; }
.dots i.hit { background: var(--stamp); border-color: var(--stamp); }
.dots i.lost { border-style: dashed; border-color: var(--mute); }
.tally { margin: 0; font-size: 24px; line-height: 1.5; white-space: nowrap; }
.tally b { font-weight: 400; background: var(--mark); color: var(--mark-ink); padding: 0 8px; }

.card { padding: 22px 8px 10px; margin-top: 28px; }
.kind { position: absolute; top: -26px; left: 14px; margin: 0; padding: 0 8px; background: var(--win); display: flex; align-items: baseline; gap: 12px; font-size: 24px; line-height: 36px; color: var(--ink); max-width: calc(100% - 28px); }
.kind b { font-weight: 400; }
.kind span { font: 400 0.85rem/1 var(--sans); color: var(--mute); }
.card h2.q { border: 0; margin: 0 0 20px; padding: 0 6px; font-size: 24px; line-height: 1.6; min-height: 3.2em; }
.card h2.q:focus { outline: none; }
.tw .rest { visibility: hidden; }

.pick {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 56px; padding: 8px 12px; overflow: visible;
  font-size: 24px; line-height: 1.5; text-align: center; color: var(--ink); background: #000;
  border: 4px solid var(--hair); cursor: pointer;
}
.pick:hover:not(:disabled) { border-color: var(--ink); background: #14141e; }
.pick:active:not(:disabled) { background: var(--ink); color: #000; }
.pick:disabled { cursor: default; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.pick.is-correct { border-color: var(--stamp); }
.pick.is-wrong { border-style: dashed; border-color: var(--mute); }
.pick.dim { opacity: 0.6; }
.pick .tag { display: block; font: 400 0.9rem/1.5 var(--sans); color: var(--stamp); }
.is-wrong .tag { color: var(--mute); }

svg.ring { position: absolute; overflow: visible; pointer-events: none; max-width: none; }
.ring path, .score path, .seal path, .circle path { fill: none; stroke: var(--stamp); stroke-width: 4; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 100 200; stroke-dashoffset: 0; animation: draw 0.6s steps(14) both; }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opt { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; justify-items: start; text-align: left; padding: 8px 12px 8px 40px; }
.opt::before { left: 12px; }
.bubble { display: grid; place-items: center; width: 40px; height: 40px; border: 4px solid var(--hair); font: 400 24px/1 var(--px); }
.opt:hover:not(:disabled) .bubble, .opt:focus-visible .bubble { border-color: var(--ink); }
.otext { font: 400 24px/1.5 var(--px); }

.tf, .pair, .names { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tf .pick { min-height: 104px; }
.tf .big { font-size: 48px; line-height: 1.3; letter-spacing: 0.1em; }
.pick.cmp { min-height: 176px; justify-content: space-between; padding: 14px 10px; }
.pick.cmp .lab { font-size: 24px; }
.pick.cmp .num { font-size: 24px; line-height: 1.3; }
@media (min-width: 480px) { .pick.cmp .num { font-size: 36px; } }
.slip { margin: 0 0 18px; padding: 12px 16px; border: 4px dashed var(--mute); background: #000; font: 24px/1.6 var(--px); max-width: none; }
.slipk { display: block; margin-bottom: 4px; font: 400 0.85rem/1.5 var(--sans); color: var(--mute); }
.names { gap: 12px; }
.names .pick { min-height: 64px; font-size: 24px; letter-spacing: 0.06em; padding-inline: 36px; }
.names .pick::before { left: 10px; }
.names .pick:disabled { padding-inline: 12px; }

.estv { margin: 0 0 6px; padding: 0 6px; font: 48px/1.3 var(--px); max-width: none; }
.estv output { background: var(--mark); color: var(--mark-ink); padding: 0 8px; }
.estv .unit { font-size: 24px; }
.est { padding: 0 6px; }
.est input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 6px 0 0; background: transparent; cursor: pointer; }
.est input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--ink); }
.est input[type="range"]::-moz-range-track { height: 8px; background: var(--ink); }
.est input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 36px; margin-top: -14px; border: 4px solid var(--ink); background: var(--stamp); border-radius: 0; }
.est input[type="range"]::-moz-range-thumb { width: 24px; height: 28px; border: 4px solid var(--ink); background: var(--stamp); border-radius: 0; }
.ends { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 0.85rem; color: var(--mute); }
.etrack { position: relative; height: 8px; margin: 54px 10px 58px; background: var(--ink); }
.etrack .m { position: absolute; top: -12px; width: 8px; height: 32px; margin-left: -4px; background: var(--ink); }
.etrack .m.ans { background: var(--stamp); }
.etrack em { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 400 24px/1.4 var(--px); }
.etrack .me em { bottom: calc(100% + 4px); }
.etrack .ans em { top: calc(100% + 4px); color: var(--stamp); }
.etrack .lo em { left: 0; transform: none; }
.etrack .hi em { left: auto; right: 0; transform: none; }
.estans { margin: 0 0 14px; padding: 0 6px; font: 36px/1.4 var(--px); max-width: none; }
.estans span { position: relative; display: inline-block; padding: 0 8px; }

.verdict { margin: 22px 6px 6px; border-top: 4px dotted var(--hair); padding-top: 14px; }
.verdict .mark { margin: 0 0 4px; font-size: 36px; line-height: 1.4; color: var(--stamp); }
.verdict.no .mark { color: var(--ink); }
.verdict .lead2 { margin: 0 0 0.2rem; font-weight: 700; }
.verdict .fun { margin: 0 0 0.3rem; font-size: 1.05rem; }
.srcrow { margin: 0 0 0.6rem; line-height: 1.7; }
.srcrow .srcs { margin-left: 0; }
.newstamp { display: inline-block; margin: 0 0 0.7rem; padding: 0.1rem 0.7rem; background: var(--mark); color: var(--mark-ink); font-weight: 700; }
.more { margin: 0 0 0.9rem; }
.more summary { cursor: pointer; font: 24px/1.5 var(--px); }
.more p { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--mute); }
.qnav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1rem; }
.more-link { font-size: 0.95rem; }
.quit { margin-top: 20px; }

.score { font: 400 72px/1.3 var(--px); margin: 4px 0; }
.score span { position: relative; display: inline-block; padding: 0 0.3em; }
.score svg { position: absolute; inset: -0.1em -0.1em; width: calc(100% + 0.2em); height: calc(100% + 0.2em); overflow: visible; max-width: none; }
.score path { stroke-width: 3; animation-duration: 0.9s; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
.miss { list-style: none; margin: 14px 0 0; padding: 4px 8px; }
.miss li { padding: 0.75rem 0.5rem; }
.miss li + li { border-top: 2px dotted var(--hair); }
.miss .qq { font-weight: 700; margin: 0 0 0.2rem; }
.miss p { margin: 0 0 0.2rem; font-size: 0.95rem; }
.bigmore { margin-top: 20px; }
.jump a { display: inline-block; margin: 0 10px 10px 0; padding: 2px 14px; border: 4px solid var(--hair); background: #000; font: 24px/1.5 var(--px); text-decoration: none; }
.jump a:hover { border-color: var(--ink); background: var(--ink); color: #000; }
.shareline { width: 100%; max-width: 36rem; padding: 0.4rem 0.6rem; font: inherit; color: var(--ink); background: #000; border: 4px solid var(--hair); }
.lvup { margin: 0 0 12px; font: 24px/1.5 var(--px); max-width: none; }
.lvup b { font-weight: 400; background: var(--mark); color: var(--mark-ink); padding: 0 8px; }

/* ---------- 集章 ---------- */

.stamps { list-style: none; margin: 0 0 12px; padding: 0 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; max-width: 26rem; }
@media (min-width: 560px) { .stamps { grid-template-columns: repeat(6, 1fr); max-width: none; } }
.stamps li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seal { position: relative; display: grid; place-items: center; width: 88px; height: 88px; padding: 0; border: 4px dashed var(--hair); color: var(--mute); font-size: 24px; line-height: 1.2; text-align: center; }
.stamps .done .seal { border: 4px solid var(--ink); color: var(--ink); }
.seal svg { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); max-width: none; overflow: visible; }
.stamps .fresh .seal path { animation: draw 0.8s steps(14) both; }
.stamps .seal path { animation: none; }
.stamps .fresh .seal path { animation: draw 0.8s steps(14) both; }
.cnt { font-size: 0.85rem; color: var(--mute); }

/* ---------- 拜訪村民 ---------- */

.towns { display: grid; gap: 0; }
.npcs { display: grid; grid-template-columns: 1fr; }
@media (min-width: 520px) { .npcs { grid-template-columns: 1fr 1fr; } }
.cmd .npc { display: flex; align-items: center; gap: 12px; padding-left: 44px; }
.npc .nm { flex: 1; }
.npc .v { font: 400 0.8rem/1 var(--sans); color: var(--mute); border: 2px solid var(--hair); padding: 2px 6px; }
.npcwin { padding: 26px 10px 8px; margin-top: 32px; }
.npcrow { display: flex; align-items: flex-end; gap: 20px; padding: 0 6px 14px; }
.npcrow h1 { font-size: 36px; }
.npcrow p { margin: 0; color: var(--mute); max-width: none; font-size: 0.95rem; }
.msg { margin: 0 6px 14px; padding: 10px 0; border-top: 4px dotted var(--hair); font: 24px/1.6 var(--px); max-width: none; min-height: 3.4em; }
.lockmsg { margin: 8px 6px 10px; padding: 8px 12px; border-left: 8px solid var(--mark); background: #0c0c14; font-size: 0.95rem; max-width: none; }

/* ---------- 編輯準則 ---------- */

.rules { counter-reset: r; list-style: none; margin: 0; padding: 2px 6px; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.5rem; padding: 0.8rem 0.5rem; }
.rules li + li { border-top: 2px dotted var(--hair); }
.rules li::before { content: counter(r); font: 24px/1.7 var(--px); color: var(--mark); }
.rules b { display: block; }
.rules span { display: block; color: var(--mute); font-size: 0.95rem; }
.plain { max-width: 46rem; }
.plain li { margin-bottom: 0.4rem; }
.clog { list-style: none; padding: 0; margin: 0; }
.clog li { margin-bottom: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn::before, .cmd a::before, .cmd button::before, .opt::before, .names .pick::before { opacity: 1; }
}

@media print {
  .site-head nav, .skip, .tabs, .actions, .btn, .pbar { display: none; }
  body { background: #fff; color: #000; }
  .win, .cand, .kn, .ttl, .sides, .sched, .rules, .tlist, .how, .card { border: 2px solid #000; border-image: none; background: #fff; }
}