/* 版面：標題 → 陣營分頁（黏在頂端）→ 一排兩張卡 → 點卡片跳出大卡、翻面看能力。
 * 白底一套。分頁和按鈕用卡片的黑框；選中分頁換成該陣營的顏色。
 * 大卡的字用卡片寬度（cqw）算，手機上能力說明約 28px、粗體，給長輩看也清楚。 */
:root {
  color-scheme: light;
  --page: #ffffff;
  --ink: #241b15;        /* 頁面文字、黑框 */
  --muted: #7d6d5c;
  --paper: #f5ebdd;      /* 卡片背面的紙色（跟卡面頂板同色） */
  --paper-ink: #241b15;
  --paper-muted: #6f5f4e;
  --frame: #141210;      /* 卡片外框黑邊 */
  --all: #241b15;        /* 分頁選中色：全部 */
  --village: #2f5e52;    /* 村民 */
  --werewolf: #962f2b;   /* 狼人 */
  --third: #6a4a78;      /* 第三方 */
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;   /* 內文一律黑體 */
}

html, body { background: var(--page); color: var(--ink); }
/* hidden 一定要真的藏起來：.viewer 這類有寫 display 的會蓋過瀏覽器內建的 hidden，
 * 變成隱形的一層蓋住整頁、什麼都點不到（claude.ai 會自己補這條，自己的網站要自己寫） */
[hidden] { display: none !important; }
body { font-family: var(--sans); }
html.locked { overflow: hidden; }

.app { max-width: 600px; margin: 0 auto; padding-inline: 16px; padding-block: 0 56px; }

/* ── 標題：一般的大黑字 ── */
.head { padding-block: 30px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.head h1 {
  margin: 0;
  font: 900 clamp(28px, 8.4vw, 36px)/1.2 var(--sans);
  letter-spacing: .12em;
  text-indent: .12em;   /* 字距最後一格補回來，字才會真的置中 */
  color: var(--ink);
  text-wrap: balance;
}
.head p { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }

/* ── 陣營分頁 ── */
.tabs-bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  padding-block: 16px 12px;
  background: var(--page);
}
.tabs-bar::after {   /* 卡片捲到分頁下面時，淡淡收掉 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  background: linear-gradient(var(--page), color-mix(in srgb, var(--page) 0%, transparent));
  pointer-events: none;
}
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--page);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  --c: var(--all);
  flex: 1 0 auto;
  padding: 10px 10px;
  font: 700 18px/1.2 var(--sans);
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.tabs button[data-camp="village"] { --c: var(--village); }
.tabs button[data-camp="werewolf"] { --c: var(--werewolf); }
.tabs button[data-camp="third"] { --c: var(--third); }
.tabs button[aria-pressed="true"] { background: var(--c); color: var(--paper); }
.tabs button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* ── 陣營分段 ── */
.camp-village { --c: var(--village); }
.camp-werewolf { --c: var(--werewolf); }
.camp-third { --c: var(--third); }
.camp-unknown { --c: var(--muted); }
.camps { display: flex; flex-direction: column; gap: 40px; padding-top: 8px; }
.camp-head { display: flex; align-items: center; gap: 12px; }
.camp-head::after { content: ""; flex: 1; height: 2px; background: var(--c); opacity: .35; }
.camp-head h2 {
  margin: 0;
  padding: 6px 18px 7px;
  font: 900 22px/1.2 var(--sans);
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--c);
  border-radius: 999px;
}
.camp-n { font: 700 17px/1.2 var(--sans); color: var(--c); font-variant-numeric: tabular-nums; }
.camp-goal { margin: 12px 0 16px; font: 700 18px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }

/* ── 卡片格子 ── */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3.5% / 2.5%;
  background: var(--frame);
  box-shadow: 0 1px 2px rgba(36, 27, 21, .18), 0 10px 22px rgba(36, 27, 21, .16);
  transition: transform .2s ease;
}
.card:active img { transform: scale(.97); }
.card.away img { visibility: hidden; }   /* 這張正在大卡裡 */
.card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4%; }
@media (hover: hover) {
  .card:hover img { transform: translateY(-4px); }
}

/* ── 大卡 ── */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 只有底和按鈕淡入淡出；卡片本身不透明，看起來是同一張卡飛過來 */
.viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--page) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.viewer::before, .v-bar { opacity: 0; transition: opacity .28s ease; }
.viewer.in::before, .viewer.in .v-bar { opacity: 1; }
.v-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px 8px 6px; }
.v-bar { flex: none; display: flex; gap: 10px; width: 100%; max-width: 640px; margin-inline: auto; padding: 8px 16px 16px; box-sizing: border-box; }
.v-bar .pill { flex: 1 1 0; min-width: 0; padding-inline: 6px; }
.viewer:focus { outline: none; }

.pill {
  padding: 13px 22px;
  font: 700 20px/1.2 var(--sans);
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--ink);
  background: var(--page);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pill.primary { color: var(--paper); background: var(--ink); }
.pill:disabled { opacity: .28; cursor: default; }
.pill:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pill:not(:disabled):active { transform: scale(.97); }

.fly { position: relative; transform-origin: 0 0; }   /* 大小由 app.js 依畫面算 */
.fly.anim { transition: transform .46s cubic-bezier(.3, .7, .2, 1); }

.big {
  container-type: inline-size;   /* 背面的字跟著大卡寬度縮放（cqw） */
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1800px;
  -webkit-tap-highlight-color: transparent;
}
.big:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 4%; }

.inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.3, .7, .2, 1);
}
.big[aria-pressed="true"] .inner { transform: rotateY(180deg); }
.viewer.instant .inner { transition: none; }

.face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3.5% / 2.5%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 2px 4px rgba(36, 27, 21, .2), 0 22px 48px rgba(36, 27, 21, .24);
}
.front { object-fit: cover; background: var(--frame); }

/* 背面：黑邊＋紙色，標題緞帶用這張卡自己的緞帶色 */
.back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqw;
  padding: 6cqw 5cqw 5cqw;
  background: var(--paper);
  border: 3cqw solid var(--frame);
  box-shadow: inset 0 0 0 1.4cqw var(--paper), inset 0 0 0 1.8cqw var(--ribbon), 0 2px 4px rgba(36, 27, 21, .2), 0 22px 48px rgba(36, 27, 21, .24);
  color: var(--paper-ink);
  overflow: hidden;
}
/* 背面標題：一條平的色塊，顏色是這張卡自己的緞帶色 */
.ribbon { flex: none; align-self: stretch; }
.rb-text {
  display: block;
  padding: 2.2cqw 3cqw 2.6cqw;
  text-align: center;
  font: 900 9.4cqw/1.2 var(--sans);
  letter-spacing: .12em;
  text-indent: .12em;
  white-space: nowrap;
  color: var(--paper);
  background: var(--ribbon);
  border-radius: 1.6cqw;
}
.tags {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  font-size: 6.4cqw;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--paper-muted);
}
.camp-pill {   /* 背面的陣營：陣營色標籤，跟上面分頁同色 */
  padding: .6cqw 3.2cqw .8cqw;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--c);
  border-radius: 999px;
}
.lines {
  flex: 1;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  padding-inline: 2.4cqw;
  padding-top: 2cqw;
  border-top: 2px solid color-mix(in srgb, var(--ribbon) 40%, transparent);
  overflow-y: auto;
}
.lines p { margin: 0; font-size: 8.4cqw; font-weight: 700; line-height: 1.42; }
.lines p.todo { color: var(--paper-muted); }
.adv-btn {   /* 背面空白處的「進階玩法」：按了換第二頁 */
  flex: none;
  padding: 1.8cqw 6cqw 2.1cqw;
  font: 900 6.8cqw/1.2 var(--sans);
  letter-spacing: .08em;
  color: var(--paper-ink);
  background: var(--paper);
  border: .6cqw solid var(--paper-ink);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.adv-btn:active { transform: scale(.97); }
.adv-btn:focus-visible { outline: .8cqw solid var(--ribbon); outline-offset: .8cqw; }
.count { flex: none; font-size: 6.4cqw; font-weight: 700; color: var(--paper-muted); font-variant-numeric: tabular-nums; }
.count:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .inner, .fly.anim, .viewer::before, .v-bar, .tabs button, .card img { transition: none; }
}