:root {
  --paper: #FBF6EC; --card: #FFFDF8; --ink: #211C16; --sub: #6E6357; --line: #E4DACA;
  --red: #C8281E; --green: #2F7D4F; --gold: #B98A2E;
  --r: 14px;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
#app { max-width: 480px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
button, input { font: inherit; color: inherit; }
.neg { color: var(--red); } .pos { color: var(--green); }

.kicker { margin: 0 0 6px; font-size: 13px; letter-spacing: .18em; color: var(--red); font-weight: 700; }
h1 { font-size: 84px; line-height: 1; margin: 6px 0 16px; font-weight: 900; color: var(--red); letter-spacing: .04em; }
h1 span { font-size: .6em; vertical-align: .35em; }
h2 { font-size: 28px; margin: 4px 0 8px; line-height: 1.3; }
.lead { font-size: 18px; line-height: 1.7; margin: 0 0 20px; }
.label { font-size: 14px; color: var(--sub); font-weight: 700; margin: 16px 0 8px; }
.fine, .best { font-size: 12px; color: var(--sub); line-height: 1.6; }
.best { color: var(--gold); font-weight: 700; font-size: 13px; }
.sub { color: var(--sub); margin: 0 0 14px; }
.lv1 { color: var(--green); } .lv2 { color: var(--gold); } .lv3 { color: #D9631E; } .lv4 { color: var(--red); }

.screen-title { padding-top: 6vh; }
.challenge { background: var(--ink); color: var(--paper); border-radius: var(--r); padding: 14px 16px; margin: 0 0 18px; line-height: 1.6; font-size: 16px; }
.challenge .neg { color: #FF8A7A; } .challenge .pos { color: #8FE0AE; }
.field { display: block; font-size: 14px; color: var(--sub); font-weight: 700; }
.field input { display: block; width: 100%; margin-top: 8px; padding: 14px; border: 2px solid var(--line); border-radius: var(--r); background: var(--card); font-size: 18px; font-weight: 400; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--ink); }

.grid { display: grid; gap: 8px; }
.cities { grid-template-columns: repeat(3, 1fr); }
.camps { grid-template-columns: 1fr 1fr; }
.opt { text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-weight: 700; font-size: 17px; cursor: pointer; min-height: 52px; }
.opt small { display: block; font-weight: 400; font-size: 12px; color: var(--sub); line-height: 1.45; margin-top: 2px; }
.opt.on { border-color: var(--ink); background: #FFF; box-shadow: 0 3px 0 var(--ink); }
.opt:disabled { cursor: default; opacity: .55; } .opt.on:disabled { opacity: 1; }
.opt.camp i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.opt.camp.on { border-color: var(--c); box-shadow: 0 3px 0 var(--c); }
.diff { font-size: 15px; margin: 14px 0 4px; min-height: 1.5em; }

.primary, .ghost, .choice { display: block; width: 100%; min-height: 52px; border-radius: var(--r); cursor: pointer; font-size: 17px; font-weight: 700; }
.primary { background: var(--red); color: #fff; border: 0; margin: 10px 0; box-shadow: 0 3px 0 #85180F; }
.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #85180F; }
.primary.alt { background: var(--ink); box-shadow: 0 3px 0 #000; }
.ghost { background: transparent; border: 2px solid var(--line); margin: 8px 0; }

.intro h2 small { font-size: 15px; color: #fff; background: var(--c); border-radius: 999px; padding: 3px 10px; margin-left: 10px; vertical-align: 5px; }
.facts { display: grid; grid-template-columns: 3.5em 1fr; gap: 10px 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 0; font-size: 17px; }
.facts dt { color: var(--sub); } .facts dd { margin: 0; font-weight: 700; }
.facts small { display: block; font-weight: 400; color: var(--sub); font-size: 13px; line-height: 1.5; }
.rivals { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rivals li { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 10px; padding: 10px 12px; }
.rivals small { display: block; color: var(--sub); font-size: 13px; }
.poll { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--line); }
.poll i { display: block; height: 100%; background: var(--c); transition: width .5s; }
.poll i + i { border-left: 2px solid var(--paper); }
.poll.closed i { filter: grayscale(1) blur(2px); opacity: .5; }
.legend { list-style: none; padding: 0; margin: 8px 0 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.legend li::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; }

.hud { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 6px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.hud .row1 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.hud .day { font-size: 18px; font-weight: 700; } .hud .day b { font-size: 30px; font-weight: 900; color: var(--red); }
.hud .money b { font-size: 22px; }
.hud .vibe { font-size: 13px; color: var(--sub); margin: 6px 0 2px; }
.hud .row2 { display: flex; gap: 12px; font-size: 12px; color: var(--sub); margin: 6px 0 4px; }
.hud .row2 span { flex: 1; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.bar { flex: 1; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; transition: width .4s; }
.bar.b i { background: #7B4FC8; } .bar.o i { background: var(--gold); } .bar.s i { background: var(--green); }
.pips { display: flex; gap: 4px; margin-top: 8px; }
.pips i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.pips i.done { background: var(--ink); } .pips i.now { background: var(--red); }

.ledger { font-size: 14px; background: #F1E9DA; border-radius: var(--r); padding: 10px 14px; margin-bottom: 12px; line-height: 1.6; }
.ledger .n { color: var(--sub); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px; box-shadow: 0 6px 18px rgba(60, 40, 10, .06); animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.card .text { font-size: 19px; line-height: 1.75; margin: 0 0 18px; }
.choice { text-align: left; background: var(--paper); border: 2px solid var(--line); padding: 12px 16px; margin: 10px 0; font-weight: 500; line-height: 1.5; }
.choice:hover { border-color: var(--ink); }
.choice small { display: block; color: var(--gold); font-size: 13px; font-weight: 700; margin-top: 2px; }
.picked { font-size: 14px; color: var(--sub); margin: 0 0 10px; }
.roll { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; margin-bottom: 12px; background: #F6F0E4; border-radius: 12px; padding: 10px; }
.roll.win b { color: var(--green); } .roll.lose b { color: var(--red); }
.die { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ink); color: #fff; font-size: 24px; font-weight: 900; }
.roll.win .die { background: var(--green); } .roll.lose .die { background: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #F0E9DC; }

.screen-count { padding-top: 6vh; }
.count h2 { font-size: 40px; font-weight: 900; }
.dots { display: inline-block; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.tally { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 14px; }
.tally li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who cnt" "bar bar"; gap: 4px 10px; }
.tally .who { grid-area: who; } .tally .who small { color: var(--sub); font-size: 13px; margin-left: 6px; }
.tally .cnt { grid-area: cnt; text-align: right; } .tally .cnt b { font-variant-numeric: tabular-nums; font-size: 18px; }
.tally .cnt small { display: block; color: var(--sub); font-size: 13px; font-variant-numeric: tabular-nums; }
.tally .cbar { grid-area: bar; height: 14px; background: var(--line); border-radius: 7px; overflow: hidden; }
.tally .cbar i { display: block; height: 100%; background: var(--c); border-radius: 7px; }
.tally li.me .who b { font-size: 19px; }
.tally li.me .cbar { height: 18px; }
.stage { font-size: 16px; font-weight: 700; color: var(--red); min-height: 1.5em; }

.end .stamp { display: inline-block; font-size: 64px; font-weight: 900; line-height: 1; padding: 14px 26px; border: 6px double currentColor; border-radius: 18px; transform: rotate(-6deg); margin: 10px 0 14px; animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1); }
.stamp.win { color: var(--red); } .stamp.lose { color: #5B5146; }
@keyframes stamp { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } }
.big { font-size: 20px; margin: 0; } .big b { font-size: 34px; font-weight: 900; }
.calc { color: var(--sub); line-height: 1.6; font-size: 15px; margin: 4px 0; }
.vs { font-size: 16px; background: var(--card); border-radius: var(--r); padding: 12px 14px; border: 1px solid var(--line); }
.badge { background: var(--ink); color: var(--paper); border-radius: var(--r); padding: 16px; margin: 14px 0; }
.badge b { display: block; font-size: 26px; margin-bottom: 4px; } .badge span { color: #CFC4B5; line-height: 1.6; }
.books { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 16px 12px; margin: 14px 0; }
.books div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 15px; }
.books .label + div { border-top: 0; }
.books .sum { font-size: 17px; border-top: 2px solid var(--ink); }
.turning { font-size: 15px; margin: 6px 0; font-weight: 700; line-height: 1.5; }
#shot { width: 100%; border-radius: var(--r); margin: 14px 0 4px; box-shadow: 0 8px 24px rgba(60, 40, 10, .15); }
.share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.life { margin: 16px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.life summary { cursor: pointer; font-weight: 700; }
.life ol { list-style: none; padding: 0; margin: 10px 0 0; }
.life li { padding: 6px 0; border-top: 1px dashed var(--line); line-height: 1.6; }
.life li b { display: inline-block; min-width: 5.6em; color: var(--red); }
.tip { display: block; text-align: center; padding: 14px; border-radius: var(--r); font-weight: 700; text-decoration: none; border: 2px dashed var(--gold); color: var(--gold); margin-top: 12px; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; opacity: 0; transition: .25s; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .card, .end .stamp { animation: none; } .dots { animation: none; } }
.about { max-width: 480px; margin: 8px auto 0; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--sub); font-size: 13px; line-height: 1.75; }
.about h2 { font-size: 15px; margin: 0 0 6px; color: var(--ink); }
.about p { margin: 0 0 10px; }

/* 稀有度與城市標籤 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #F0E9DC; color: var(--sub); }
.tag.city { background: #EAF1FB; color: #2E5AAC; }
.tag.rare { background: #F3E9FF; color: #6B3FB8; }
.tag.legend { background: linear-gradient(90deg, #F6D77A, #E9A93B); color: #4A2E00; }
.card.r-rare { border: 2px solid #B89BE8; box-shadow: 0 6px 22px rgba(107, 63, 184, .18); }
.card.r-legend { border: 2px solid #E2A93A; box-shadow: 0 0 0 4px #FFF3D4, 0 8px 28px rgba(226, 169, 58, .35); }
.gold { color: #B07A1E; }

/* 結局：帳本評價與這局解鎖 */
.books .grade { font-size: 15px; }
.books .grade b { color: var(--red); }
.unlock { background: var(--card); border: 1px dashed #E2A93A; border-radius: var(--r); padding: 12px 14px; margin: 14px 0; font-size: 15px; line-height: 1.6; }
.unlock p { margin: 0 0 6px; }
.dexbtn { margin-top: 4px; }

/* 卡片圖鑑 */
.dex h2 { font-size: 30px; margin-bottom: 10px; }
.dexbar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.dexbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #E2A93A); }
.dexg { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin: 10px 0; }
.dexg summary { cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; }
.dexg summary span { color: var(--sub); font-weight: 400; font-variant-numeric: tabular-nums; }
.dexg ul { list-style: none; padding: 0; margin: 8px 0 0; }
.dexg li { padding: 7px 0; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.5; }
.dexg li em { font-style: normal; font-weight: 700; font-size: 12px; margin-right: 6px; color: #6B3FB8; }
.dexg li.r-legend em { color: #B07A1E; }
.dexg li.locked { color: #B9AE9F; letter-spacing: .1em; }
.dexg li.locked small { display: block; letter-spacing: 0; color: var(--sub); font-size: 12px; }
.dexg li.locked.r-legend small { color: #B07A1E; }

/* 黑招與爆料 */
.bar.r i { background: #8E1D12; }
.hud .row2 .risk { color: #8E1D12; font-weight: 700; }
.choice.dark { border-color: #3A2A2A; background: #F4EEEC; }
.choice small.dk { color: #8E1D12; }
.tag.expose { background: #8E1D12; color: #fff; }
.card.exposed { border: 2px solid #8E1D12; box-shadow: 0 0 0 4px #F6DCD8, 0 8px 24px rgba(142, 29, 18, .25); }

/* 抽出身與每回合行程 */
.birth { background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 16px; margin: 18px 0; line-height: 1.6; overflow-wrap: anywhere; }
.birth.t-poor { border-color: var(--sub); background: #F0EBE3; }
.birth.t-common { border-color: var(--green); background: #EFF7F0; }
.birth.t-rare { border-color: #B89BE8; background: #F6EFFF; }
.birth.t-legend { border-color: var(--gold); background: linear-gradient(135deg, #FFF8DC, #F6D77A); }
.birth .bt { font-size: 13px; color: var(--sub); margin: 0 0 8px; }
.birth .bt span { display: block; font-size: 12px; }
.birth .bn { font-size: 28px; font-weight: 900; margin: 0 0 6px; }
.birth .bd { margin: 0 0 12px; }
.birth .bm { font-size: 14px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.acts { margin: 18px 0; padding-top: 4px; border-top: 1px solid var(--line); }
.actgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.act { min-width: 0; min-height: 52px; padding: 12px 10px; text-align: left; line-height: 1.5; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; overflow-wrap: anywhere; }
.act:hover:enabled { border-color: var(--ink); }
.act:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.act.dark { border-color: #3A2A2A; background: #F4EEEC; }
.act small { display: block; font-size: 12px; margin-top: 4px; }
.act small.cost { color: var(--sub); }
.act small.gain { color: var(--green); }
.act small.why { color: var(--red); }
.act small.dk { color: #8E1D12; font-weight: 700; }
.act:disabled { background: #ECE8E2; border-color: var(--line); color: var(--sub); cursor: not-allowed; }
.act:disabled small { color: var(--sub); }
.actdone { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: 10px 0; font-size: 14px; line-height: 1.6; }
.actdone p { margin: 6px 0; }
.actdone .rl { display: block; font-size: 13px; }
.actdone .chips { margin: 8px 0 0; }
.actdone.dark { border-color: #8E1D12; }
.got { color: #8E1D12; font-weight: 700; line-height: 1.6; background: #F6DCD8; border-radius: 8px; padding: 10px 12px; }
.tag.hosp { background: #E6F2EB; color: var(--green); }
.tag.alert { background: #FFF0CD; color: #805A15; }
.tag.birth { background: #F3E9FF; color: #6B3FB8; }
@media (max-width: 360px) { .act { padding: 10px 8px; font-size: 14px; } .hud .row2 { gap: 6px; } .hud .row2 span { gap: 3px; } }

/* 固定行程欄：手機在畫面底部，寬螢幕固定在右邊 */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 2px solid var(--line); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
.dock .dh { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.dock .dh span { font-weight: 400; color: var(--sub); font-size: 13px; }
.dock .dlog { font-size: 13px; line-height: 1.5; background: #F6F0E4; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; max-height: 62px; overflow: auto; }
.dock .dlog.dark { background: #F6DCD8; }
.dock .dlog .chips { display: inline-flex; margin: 0 0 0 4px; gap: 4px; vertical-align: middle; }
.dock .dlog .chip { font-size: 12px; padding: 2px 8px; }
.dock .dgrid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.dock .act { flex: 0 0 132px; min-height: 0; padding: 8px 10px; font-size: 14px; }
.dock .act.sp { border-color: var(--gold); background: #FFF8E6; }
.dock .act small { margin-top: 2px; font-size: 12px; }
.dock .act small.ud { color: var(--ink); }
.dock .act small.ud span { display: block; color: var(--sub); }
.dock .act small.sc { color: var(--gold); }
body.docked #app { padding-bottom: calc(210px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) {
  .dock { left: calc(50% + 256px); right: auto; top: 16px; bottom: auto; width: 250px; max-height: calc(100dvh - 32px); overflow: auto; border: 2px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: none; }
  .dock .dlog { max-height: none; }
  .dock .dgrid { flex-direction: column; overflow: visible; }
  .dock .act { flex: none; width: 100%; }
  body.docked #app { padding-bottom: 32px; }
}