/* Avalon Together on the web. Tokens mirror Theme.swift and SHPrint. */
:root {
  --ink: #1a302a; --bg: #f5f2e8; --paper: #fffef9; --muted: #5e6b61; --forest: #173b2e; --midnight: #0b211c;
  --gold: #7a571f; --candle: #e0c485; --cream: #faf5e3; --evil: #853640; --rose: #eba3a6; --line: rgba(26,48,41,0.11);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 22px; --card-radius: 24px; --title-weight: 400; --title-font: var(--serif); --eyebrow-font: var(--sans); --eyebrow-tracking: 0.17em;
}
body[data-game="secretHitler"] {
  --ink: #211f1c; --bg: #f0e8d6; --paper: #faf2de; --muted: #615a4d; --forest: #211f1c; --midnight: #171512;
  --gold: #755417; --candle: #d6b054; --cream: #faf2de; --evil: #a13026; --rose: #f29e87; --line: rgba(33,31,28,0.25);
  --radius: 4px; --card-radius: 4px; --title-weight: 800; --title-font: var(--sans); --eyebrow-font: var(--mono); --eyebrow-tracking: 0.12em;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.45 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--gold); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
header.bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
header.bar .mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 500 20px/1 var(--serif); }
header.bar .mark svg { color: var(--gold); }
header.bar .spacer { flex: 1; }
.eyebrow { font: 700 12px/1.2 var(--eyebrow-font); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold); }
.eyebrow.evil { color: var(--evil); }
h1.title { font: var(--title-weight) clamp(34px, 7vw, 44px)/1.1 var(--title-font); letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: pretty; }
p.subtitle { font-size: 20px; line-height: 1.35; color: var(--muted); margin: 0; text-wrap: pretty; }
.paper { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 24px; padding: 28px 0 48px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 18px 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.25); background: var(--candle); color: var(--midnight); font-weight: 600; font-size: 20px; cursor: pointer; }
.btn:disabled { background: var(--line); color: var(--muted); border-color: transparent; cursor: default; }
.btn.quiet { background: var(--paper); color: var(--ink); border: 1px solid var(--line); font-size: 17px; min-height: 60px; }
.btn:active:not(:disabled) { transform: scale(0.985); opacity: 0.85; }
.divider { height: 1px; background: var(--line); }
.muted { color: var(--muted); }
.progress { font-size: 20px; color: var(--muted); }

/* seats and names */
.seal { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); color: var(--gold); }
.seal .ring { display: flex; align-items: center; justify-content: center; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; border: 1px solid rgba(122,87,31,0.3); }
.seal.dark { background: rgba(255,255,255,0.06); color: var(--candle); }
.seal.dark .ring { border-color: rgba(224,196,133,0.45); }
.names { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .names { grid-template-columns: 1fr 1fr; } }
.name { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; cursor: pointer; width: 100%; }
.name .label { flex: 1; font: 400 22px/1.2 var(--title-font); font-weight: var(--title-weight); }
.name:disabled { cursor: default; opacity: 0.6; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; min-height: 44px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; cursor: pointer; }
body[data-game="secretHitler"] .chip { border-radius: 4px; }
.chip .check, .name .check { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--cream); display: flex; align-items: center; justify-content: center; flex: none; }
.person { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 20px; }

/* the card */
.card-stage { perspective: 1400px; width: min(100%, 420px); margin: 0 auto; }
.card { position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform 0.75s ease-in-out; }
.card.flipped { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--card-radius); overflow: hidden; box-shadow: 0 0 0 2px rgba(224,196,133,0.6), 0 24px 48px rgba(11,33,28,0.28); }
.card .face.front { transform: rotateY(180deg); background: var(--midnight); }
.card .face.back { background: radial-gradient(circle at 50% 35%, #1e4b3b, var(--forest) 60%, #12302a); display: flex; align-items: center; justify-content: center; color: var(--cream); }
body[data-game="secretHitler"] .card .face.back { background: radial-gradient(circle at 50% 35%, #2c2925, var(--forest) 62%, #171512); }
.card .back .frame { position: absolute; inset: 14px; border-radius: max(calc(var(--card-radius) - 10px), 2px); border: 1px solid rgba(224,196,133,0.3); }
.card .back .frame.inner { inset: 26px; border-radius: max(calc(var(--card-radius) - 16px), 2px); border-color: rgba(224,196,133,0.14); }
.card .back .pip { position: absolute; color: rgba(224,196,133,0.55); }
.card .back .pip.tl { top: 22px; left: 24px; }
.card .back .pip.br { bottom: 22px; right: 24px; transform: rotate(180deg); }
.card .back .centre { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 36px; text-align: center; }
.card .back .who { font: 400 clamp(30px, 9vw, 44px)/1.1 var(--title-font); font-weight: var(--title-weight); letter-spacing: -0.02em; }
.card .back .eyebrow { color: var(--candle); }
.card .front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .front .foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 24px 24px; display: flex; flex-direction: column; gap: 8px; color: var(--cream); background: linear-gradient(to bottom, rgba(11,33,28,0) 0%, rgba(11,33,28,0.94) 100%); }
body[data-game="secretHitler"] .card .front .foot { background: linear-gradient(to bottom, rgba(33,31,28,0), rgba(33,31,28,0.94)); }
.card .front .foot .eyebrow { color: var(--candle); }
.card .front .foot .role { font: 600 clamp(30px, 8vw, 40px)/1.05 var(--title-font); font-weight: max(600, var(--title-weight)); letter-spacing: -0.02em; text-wrap: pretty; }
.card .front .foot .team { display: flex; align-items: center; gap: 8px; font: 700 20px/1 var(--sans); }
body[data-game="secretHitler"] .card .front .foot .team { font-family: var(--mono); }
.team.good { color: var(--candle); } .team.evil { color: var(--rose); }
.details h3 { margin: 0; font: 600 17px/1.2 var(--sans); color: var(--gold); }
.details p { margin: 0; font-size: 20px; line-height: 1.4; }
.details .known { display: flex; flex-direction: column; gap: 12px; }
.centered { text-align: center; }
.gate .centered { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--candle); }
.notice { padding: 16px 18px; border-radius: 14px; background: rgba(122,87,31,0.08); font-size: 17px; }
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.cast .tile { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--midnight); box-shadow: 0 0 0 1px var(--line); }
body[data-game="secretHitler"] .cast .tile { border-radius: 4px; }
.cast .tile img { width: 100%; height: 100%; object-fit: cover; }
.cast .tile .foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 10px 10px; color: var(--cream); background: linear-gradient(to bottom, rgba(11,33,28,0), rgba(11,33,28,0.9)); display: flex; flex-direction: column; gap: 2px; }
.cast .tile .foot .n { font: 600 16px/1.15 var(--title-font); }
.cast .tile .foot .r { font-size: 12px; opacity: 0.85; }
.rules ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.rules li { font-size: 17px; }
.hidden { display: none !important; }