/* =====================================================================================
   COLD: zwart, bloedrood en goud, in de stijl van een typemachine. Mobiel eerst.
   Alle persoonlijke pagina's gebruiken dezelfde opbouw, zodat je van buitenaf niet kunt
   zien wie de moordenaar is. Alleen de rolonthulling kleurt per rol (bloed, rood, groen).
   Lettertypes: Special Elite (Apache 2.0) en Courier Prime (OFL), zie static/fonts.
   ===================================================================================== */
@font-face { font-family: "Special Elite"; src: url("fonts/special-elite-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --bg: #0b0a0a;            /* het zwart van het logo */
  --bg-2: #141111;
  --card: #161213;
  --card-2: #211b1c;
  --line: #33292a;
  --text: #ece6dc;          /* de "bot"-kleur van de letters */
  --muted: #a39a91;
  --accent: #c9a24b;        /* goud */
  --accent-light: #e6c77c;
  --accent-dark: #8f6d22;
  --accent-ink: #1a1206;
  --red: #b3262a;           /* bloedrood, voor nadruk */
  --blood: #7d161a;         /* diep rood, voor vlakken */
  --blood-deep: #3d0b0e;
  --green: var(--accent);   /* "klaar" is goud */
  --leaf: #4fae6f;          /* groene gloed van de getuige (alleen bij de rolonthulling) */
  --paper: #ebe1cc;         /* getypt papier */
  --paper-ink: #231a12;
  --blue: var(--accent-light);
  --purple: var(--text);
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --press: 0 4px 0 rgba(0, 0, 0, .55);
  --type: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;   /* koppen: getypt, met inkt */
  --body: "Courier Prime", "Courier New", Courier, monospace;                    /* lopende tekst */
  --mono: var(--body);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* ook voor knoppen en kaarten met een eigen display */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 16.5px/1.55 var(--body);
  font-synthesis: none;  /* Special Elite heeft geen vet of cursief: liever echt dan nagemaakt */
  background:
    radial-gradient(1100px 600px at 110% -15%, rgba(125, 22, 26, .28), transparent 60%),
    radial-gradient(900px 520px at -25% 5%, rgba(125, 22, 26, .14), transparent 60%),
    radial-gradient(800px 500px at 50% 125%, rgba(201, 162, 75, .1), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
/* Een vleugje korrel, als oud papier onder de lamp */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
           calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
body.has-tabbar .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; font-family: var(--type); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 .75em; }
a { color: var(--accent); }

.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.pre { white-space: pre-line; }
.big { font-size: 2.6rem; font-weight: 700; }
.okay { color: var(--green); }

/* --- Bovenbalk ------------------------------------------------------------------------ */
.topbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.topbar .logo { width: 34px; height: auto; flex: 0 0 auto; display: block; }
.topbar .title { flex: 1; min-width: 0; font-family: var(--type); font-weight: 400; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.net { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.net::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(201, 162, 75, .6); animation: ping 2.4s infinite; }
.net.net-off { color: var(--red); }
.net.net-off::before { background: var(--red); animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(201, 162, 75, .55); } 70% { box-shadow: 0 0 0 9px rgba(201, 162, 75, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0); } }

/* --- Kaarten ------------------------------------------------------------------------------ */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%), var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 14px;
  box-shadow: var(--shadow);
  animation: rise .45s cubic-bezier(.2, .8, .2, 1) both;
}
.card.inner { background: var(--card-2); box-shadow: none; }
.card.glow { border-color: rgba(201, 162, 75, .55); box-shadow: 0 0 0 1px rgba(201, 162, 75, .15), 0 14px 40px rgba(201, 162, 75, .1); }
.wrap > *:nth-child(2) { animation-delay: .04s; }
.wrap > *:nth-child(3) { animation-delay: .08s; }
.wrap > *:nth-child(4) { animation-delay: .12s; }
.wrap > *:nth-child(5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font: 400 .8rem/1 var(--type); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.eyebrow .icon { width: 15px; height: 15px; }

/* Icoontjes (Lucide, static/icons.svg): dunne lijnen in de tekstkleur */
.icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; vertical-align: -.22em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 12px;
  border-radius: 50%; border: 1px solid rgba(201, 162, 75, .45); background: rgba(201, 162, 75, .06); color: var(--accent);
  vertical-align: middle; margin-right: 10px; }
.scene-icon .icon { width: 26px; height: 26px; stroke-width: 1.6; }
.center .scene-icon, .scene-icon:only-child { margin-left: auto; margin-right: auto; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }

.alert { background: rgba(179, 38, 42, .16); border: 1px solid var(--red); border-radius: 12px; padding: 10px 12px; }
.notice { background: rgba(201, 162, 75, .09); border: 1px solid rgba(201, 162, 75, .5); border-radius: 12px; padding: 10px 12px; }
.stamp {
  display: inline-block; padding: 3px 10px; border: 2px solid currentColor; border-radius: 4px;
  font: 400 .78rem/1.2 var(--type); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-6deg);
}

/* --- Knoppen ------------------------------------------------------------------------------ */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 10px 18px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--text);
  font: inherit; font-weight: 700; letter-spacing: .03em; text-decoration: none; cursor: pointer;
  box-shadow: var(--press); touch-action: manipulation;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.button:active, button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.button.primary, button.primary {
  background: linear-gradient(180deg, var(--accent-light), var(--accent) 55%, #b48a33); border-color: #a07c2c; color: var(--accent-ink);
  box-shadow: 0 4px 0 #6f5317;
}
.button.primary:active, button.primary:active { box-shadow: 0 1px 0 #6f5317; }
.button.danger, button.danger { border-color: var(--red); color: var(--red); background: transparent; box-shadow: none; }
.button.small, button.small { min-height: 38px; padding: 5px 12px; font-size: .9rem; border-radius: 11px; }
.button.block, button.block { display: flex; width: 100%; }
button[disabled], .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.6); }
form .block, form .row { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; }
form.inline { display: inline; }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

/* --- Formulieren -------------------------------------------------------------------------- */
label { display: block; font-weight: 700; margin: 10px 0 6px; }
input[type="text"], input[type="password"], input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; min-height: 50px; padding: 10px 14px;
  border-radius: 14px; border: 2px solid var(--line);
  background: #0c0e14; color: var(--text); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 162, 75, .18); }
.code-form input { font: 800 1.6rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.code-form button { margin-top: 12px; width: 100%; }

/* Keuzes als grote tikvlakken */
.choices { display: grid; gap: 10px; margin: 8px 0 4px; }
.choices.scale { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.choices label { margin: 0; font-weight: 600; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px;
  min-height: 54px; padding: 10px 12px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--card-2);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.choices label:active span { transform: scale(.96); }
.choices input:checked + span {
  background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: var(--accent-ink); border-color: #a07c2c;
  animation: picked .35s cubic-bezier(.2, 1.6, .4, 1);
}
.choices input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 2px; }
@keyframes picked { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
.choices.scale span { font: 800 1.2rem/1 var(--mono); }
.scale-ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }
fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
legend { font-weight: 800; font-size: 1.1rem; padding: 0; margin-bottom: 6px; }

/* Vragenlijst: één vraag tegelijk (alleen met JavaScript) */
.quiz-progress { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; font: 700 .8rem var(--mono); color: var(--muted); }
.quiz-progress .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.quiz-progress .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blood), var(--accent)); transition: width .35s ease; }
.quiz.stepped fieldset { display: none; }
.quiz.stepped fieldset.current { display: block; animation: slidein .35s cubic-bezier(.2, .8, .2, 1); }
.quiz.stepped .quiz-submit { display: none; }
.quiz.stepped.at-end .quiz-submit { display: flex; }
.quiz-back { background: none; border: 0; box-shadow: none; color: var(--muted); min-height: 36px; padding: 4px 0; font-weight: 700; }
@keyframes slidein { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

/* --- Avatars ------------------------------------------------------------------------------ */
.avatar {
  --hue: 40;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: hsl(var(--hue) 48% var(--light, 46%)); color: var(--ink, #f3ede4);
  font: 800 .9rem/1 var(--mono); text-transform: uppercase;
  box-shadow: 0 0 0 3px var(--card);
}
.avatar.ready::after {
  content: ""; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1206' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2px var(--card);
  animation: pop .4s cubic-bezier(.2, 1.6, .4, 1);
}
.avatar.new { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.avatars { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.avatars .avatar { width: 34px; height: 34px; font-size: .78rem; }
.avatars .avatar:not(.ready) { filter: grayscale(.85) brightness(.75); }
@keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.people { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.people li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.people li .name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; font: 700 .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag.state-klaar { color: var(--green); border-color: var(--green); }
.tag.state-ingevuld { color: var(--accent); border-color: var(--accent); }
.tag.type-moordenaar { color: var(--red); border-color: var(--red); }
.tag.type-getuige { color: var(--accent); border-color: var(--accent); }
.tag.type-verdachte { color: var(--text); border-color: var(--text); }

/* --- Ga verder ---------------------------------------------------------------------------- */
.proceed .next { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; margin-bottom: 8px; }
.proceed .next .icon { color: var(--accent); }
.proceed .next strong { color: var(--text); }
.go {
  --pct: 0%;
  position: relative; overflow: hidden; min-height: 64px !important; font-size: 1.2rem !important; letter-spacing: .01em;
}
.go::before {
  content: ""; position: absolute; inset: 0; width: var(--pct); background: rgba(0, 0, 0, .14);
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.go:not([disabled]) { animation: nudge 2.8s ease-in-out infinite; }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-1.5deg) scale(1.02); } 96% { transform: rotate(1.5deg) scale(1.02); } }
.waiting-me { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; }
.waiting-me .big-check { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(201, 162, 75, .14); border: 2px solid var(--accent); color: var(--accent); animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.waiting-me .big-check .icon { width: 30px; height: 30px; stroke-width: 2.4; }
.dots { display: inline-flex; gap: 5px; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.progress { height: 10px; border-radius: 999px; background: var(--card-2); overflow: hidden; margin: 6px 0 10px; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--accent)); transition: width .5s ease; }

/* --- Tabbladen onderin (zoals een app), zonder JavaScript (radioknoppen) -------------------- */
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabbar {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom)); width: min(532px, calc(100% - 20px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px;
  background: rgba(20, 16, 16, .88); border: 1px solid var(--line); border-radius: 22px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.tabbar label {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px;
  border-radius: 16px; font-size: .78rem; font-weight: 700; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.tabbar label .icon { width: 23px; height: 23px; }
.tabbar label:active { transform: scale(.94); }
.panel { display: none; }
#tab-spel:checked ~ .tabbar label[for="tab-spel"],
#tab-dossier:checked ~ .tabbar label[for="tab-dossier"],
#tab-geheim:checked ~ .tabbar label[for="tab-geheim"] { background: var(--accent); color: var(--accent-ink); }
#tab-spel:checked ~ .panels .panel-spel,
#tab-dossier:checked ~ .panels .panel-dossier,
#tab-geheim:checked ~ .panels .panel-geheim { display: block; animation: rise .3s ease both; }

/* --- Het geheime deel: vaste hoogte, eerst verborgen ---------------------------------------- */
.vault-cover, .vault { height: 62vh; min-height: 380px; }
.vault-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: repeating-linear-gradient(45deg, #1b1516 0 14px, #161112 14px 28px); }
.vault-cover .lock { color: var(--accent); animation: bob 3s ease-in-out infinite; }
.vault-cover .lock .icon { width: 54px; height: 54px; stroke-width: 1.4; }
.vault { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vault[hidden], .vault-cover[hidden] { display: none; }
.vault .block { border-bottom: 1px dashed var(--line); padding: 12px 0; }
.vault .block:last-of-type { border-bottom: 0; }
.vault .block h3 { font: 400 .8rem/1.2 var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.role-badge { display: inline-flex; align-items: center; gap: 10px; font: 400 1.3rem/1.2 var(--type); }
.role-badge .icon { color: var(--accent); }

.chat-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.chat-list li { background: var(--card-2); border-radius: 14px 14px 14px 4px; padding: 7px 11px; animation: rise .25s ease both; }
.chat-list li .who { font-size: .75rem; color: var(--muted); display: block; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; }
.chat-form button { flex: 0 0 auto; }

/* --- Aanwijzingen als bewijsstukken --------------------------------------------------------- */
.clues { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.clue {
  position: relative; padding: 16px 14px 12px; border-radius: 6px;
  background: #e9dfca; color: #2a1d14; font-size: .98rem; font-family: var(--body);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transform: rotate(-.6deg);
}
.clue:nth-child(even) { transform: rotate(.7deg); }
.clue::before { content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; margin-left: -35px;
  background: rgba(201, 162, 75, .7); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.clue .meta { display: block; font: 700 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #7a6033; margin-bottom: 4px; }
.clue.personal { background: #efe2cf; box-shadow: inset 4px 0 0 var(--blood), 0 8px 20px rgba(0, 0, 0, .35); }
.clue.personal .meta { color: var(--blood); }
.clue.is-new { animation: dropin .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.clue.is-new::after { content: "NIEUW"; position: absolute; right: 10px; top: 8px; color: var(--red);
  border: 2px solid var(--red); border-radius: 5px; padding: 1px 6px; font: 800 .65rem/1.2 var(--mono); letter-spacing: .14em; transform: rotate(8deg); }
@keyframes dropin { 0% { opacity: 0; transform: translateY(-30px) rotate(-8deg) scale(1.08); } 100% { opacity: 1; transform: rotate(-.6deg); } }

.twist { border-color: var(--red); background: linear-gradient(135deg, rgba(125, 22, 26, .45), rgba(125, 22, 26, .12)); animation: shake .7s ease both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

/* --- Timer als ring ---------------------------------------------------------------------- */
.timer-ring { position: relative; width: 132px; height: 132px; margin: 6px auto 12px; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring .track { stroke: var(--card-2); }
.timer-ring .fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s ease; }
.timer-ring.low .fill { stroke: var(--red); }
.timer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 800 1.9rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.timer.done { color: var(--red); animation: blink 1s infinite; }

/* --- Stemmen ------------------------------------------------------------------------------ */
.vote .choices span { justify-content: flex-start; }
.vote .choices span .avatar { width: 32px; height: 32px; font-size: .72rem; box-shadow: none; }
.vote .choices input:checked + span::after { content: "VERDACHT"; margin-left: auto; padding: 1px 7px; border: 2px solid currentColor; border-radius: 5px;
  font: 800 .62rem/1.3 var(--mono); letter-spacing: .12em; transform: rotate(-6deg); animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }

.results { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.results li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.results li .bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.results li .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--red)); animation: grow 1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Onthulling ------------------------------------------------------------------------- */
.lineup { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.lineup li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card-2);
  animation: flipin .6s cubic-bezier(.2, 1.2, .4, 1) both; }
.lineup li .who { flex: 1; min-width: 0; }
.lineup li .who strong { display: block; }
.lineup li.culprit { background: linear-gradient(135deg, rgba(125, 22, 26, .6), rgba(125, 22, 26, .2)); border: 2px solid var(--red);
  box-shadow: 0 0 30px rgba(179, 38, 42, .4); }
.lineup li.culprit .stamp { color: var(--red); }
@keyframes flipin { from { opacity: 0; transform: perspective(500px) rotateX(-80deg); } to { opacity: 1; transform: none; } }

/* --- Meldingen (toast) en confetti -------------------------------------------------------- */
.toast {
  position: fixed; z-index: 50; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translate(-50%, -150%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700;
  box-shadow: var(--shadow); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); white-space: nowrap;
}
.toast.show { transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* --- Startpagina ---------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: step; }
.steps li { display: flex; align-items: center; gap: 12px; }
.steps li::before { counter-increment: step; content: counter(step); flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font-weight: 900; }

table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th, table.list td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
details summary { cursor: pointer; font-weight: 700; }
details[open] summary { margin-bottom: 8px; }

/* --- Ontwikkelpagina's (alleen lokaal of op de testserver) ---------------------------------- */
.dev-banner { background: #3a2d10; color: #f3d99a; border-radius: 10px; padding: 6px 10px; font-size: .85rem; margin-bottom: 10px; }
body.dev-wide .wrap { max-width: none; }
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.qr-card { background: #fff; color: #111; border-radius: 12px; padding: 10px; text-align: center; }
.qr-card svg { width: 100%; height: auto; }
.qr-card .code { font: 700 1.1rem/1.2 var(--mono); letter-spacing: .12em; }
.qr-card a { color: #333; font-size: .8rem; }
.table-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 5; }
.phones { display: flex; flex-wrap: wrap; gap: 14px; }
.phone { width: 300px; }
.phone header { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .85rem; margin-bottom: 4px; }
.phone header select { min-height: 30px; padding: 2px 6px; width: auto; font-size: .8rem; border-width: 1px; }
.phone .screen { width: 300px; height: 600px; overflow: hidden; border-radius: 26px; border: 4px solid #3a3f52; background: var(--bg); }
.phone iframe { width: 375px; height: 750px; border: 0; transform: scale(.8); transform-origin: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}


/* =====================================================================================
   Merk: naamlogo en beginscherm
   ===================================================================================== */
.brand-hero { text-align: center; padding: 22px 0 4px; }
.brand-hero h1 { margin: 0; line-height: 0; }
.brand-hero .wordmark { display: block; width: min(78vw, 340px); height: auto; margin: 0 auto; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6)); animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.brand-hero .tagline { margin: -4px 0 0; padding-right: 6px; text-align: right; width: min(78vw, 340px); margin-left: auto; margin-right: auto;
  font: 400 1.15rem/1.2 var(--type); color: var(--text); opacity: .9; letter-spacing: .02em; }

.name-screen { text-align: center; padding: 6px 0 0; }
.name-screen label.name-question { display: block; margin: 26px 0 16px; font: 400 2.1rem/1.15 var(--type); color: var(--text); }
.pill-input { position: relative; max-width: 360px; margin: 0 auto; }
.pill-input input[type="text"] {
  height: 72px; padding: 0 72px 0 28px; border-radius: 999px; text-align: center;
  border: 1px solid rgba(201, 162, 75, .35); color: var(--text); font-size: 1.15rem;
  background: radial-gradient(120% 140% at 50% 0%, #6b1519 0%, #4a0e12 55%, #330a0c 100%);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .45), 0 10px 30px rgba(61, 11, 14, .55);
}
.pill-input input[type="text"]::placeholder { color: rgba(236, 230, 220, .6); }
.pill-input input[type="text"]:focus { border-color: var(--accent); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .45), 0 0 0 4px rgba(201, 162, 75, .2); }
.pill-input button {
  position: absolute; right: 8px; top: 8px; width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
}
.pill-input.code input[type="text"] { font: 700 1.5rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; }
.pill-input button .icon { width: 26px; height: 26px; stroke-width: 2.4; }
.name-screen .hint { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.name-screen .alert { max-width: 360px; margin: 14px auto 0; }

/* --- Het lege dossier (illustratie) ------------------------------------------------------ */
.dossier-art { display: block; width: min(86vw, 360px); height: auto; margin: 34px auto 8px; overflow: visible;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .65)); animation: hover-float 6s ease-in-out infinite; cursor: pointer; }
.dossier-art .cover { transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.3, 1.3, .4, 1); }
.dossier-art:hover .cover, .dossier-art.open .cover { transform: perspective(600px) rotateX(18deg) translateY(-6px); }
.dossier-art .stamp-art { transform-origin: 272px 142px; animation: stamp-in .7s .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.dossier-art .name-line { font-family: var(--type); font-size: 18px; fill: #2a1d14; }
.dossier-art .name-line.empty { fill: #a08c6c; }
.dossier-art .stamp-text { font-family: var(--type); }
.dossier-art .label-title { font-family: var(--type); font-size: 21px; letter-spacing: 3px; fill: #2a1d14; }
.dossier-art .label-small { font-family: var(--type); font-size: 11px; letter-spacing: 1px; fill: #5b4630; }
@keyframes hover-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes stamp-in { from { opacity: 0; transform: scale(2.2) rotate(-22deg); } to { opacity: .9; transform: scale(1) rotate(-12deg); } }

.landing .card { text-align: left; }


/* =====================================================================================
   Typemachine-effect (app.js): elke letter verschijnt los, met een knipperende cursor
   ===================================================================================== */
/* Verborgen tot app.js de tekst klaarzet; laadt het script niet, dan verschijnt de tekst na 2,5 s alsnog. */
[data-typewriter]:not(.tw) { visibility: hidden; animation: tw-fallback 0s 2.5s forwards; }
@keyframes tw-fallback { to { visibility: visible; } }
.tw .ch { opacity: 0; }
.tw .ch.on { opacity: 1; animation: ink .28s ease-out; }
.tw.typed .ch { opacity: 1; }
.tw .ch.cur { position: relative; }
.tw .ch.cur::after { content: ""; position: absolute; left: 100%; top: .12em; bottom: .02em; width: 2px; margin-left: 2px;
  background: currentColor; animation: caret .9s steps(1) infinite; }
@keyframes ink { from { opacity: .15; text-shadow: 0 0 6px currentColor; } to { opacity: 1; text-shadow: none; } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* =====================================================================================
   Rolonthulling: verzegeld dossier, getypte rol, daarna de verdachten
   ===================================================================================== */
.reveal { position: relative; text-align: center; padding-top: 6px; }
.reveal .eyebrow { justify-content: center; }
.reveal-step.enter { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.reveal-flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, transparent 25%, var(--flash, rgba(0, 0, 0, 0)) 100%); }
.reveal[data-role="getuige"] { --glow: 79, 174, 111; --flash: rgba(79, 174, 111, .42); --role-ink: #2c7448; }
.reveal[data-role="verdachte"] { --glow: 179, 38, 42; --flash: rgba(179, 38, 42, .5); --role-ink: #9a1d21; }
.reveal[data-role="moordenaar"] { --glow: 125, 22, 26; --flash: rgba(90, 10, 14, .82); --role-ink: #7a1014; }
.reveal.revealed .reveal-flash { animation: flash 1.8s ease-out both; }
.reveal[data-role="moordenaar"].revealed .reveal-flash { animation: flash-stay 2.4s ease-out both; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flash-stay { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: .45; } }

/* Stap 1: het verzegelde dossier */
.sealed-file {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: min(78vw, 290px); aspect-ratio: 3 / 4; min-height: 0; margin: 22px auto 6px; padding: 26px 18px 22px;
  border-radius: 6px 14px 14px 6px; border: 1px solid #4d3a1e; color: var(--accent);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35) 0 10px, transparent 10px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #2c2218, #16100c 75%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .65), inset 0 0 0 7px rgba(201, 162, 75, .07);
  animation: breathe 3.4s ease-in-out infinite;
}
.sealed-file:active { transform: scale(.98); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.sealed-file:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
.sealed-file .file-label { font: 400 1rem/1 var(--type); letter-spacing: .32em; text-transform: uppercase;
  padding: 6px 10px; border: 2px solid var(--red); color: var(--red); transform: rotate(-4deg); }
.wax-seal { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #c9353a, #8e161b 52%, #4c0a0d 100%);
  box-shadow: 0 0 0 5px rgba(125, 22, 26, .55), 0 0 0 9px rgba(76, 10, 13, .35), 0 10px 26px rgba(0, 0, 0, .6), inset 0 -6px 14px rgba(0, 0, 0, .45); }
.wax-seal img { width: 54px; height: auto; opacity: .8; filter: sepia(1) saturate(.6) brightness(.85) drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.sealed-file .file-hint { font: 400 .95rem/1.2 var(--type); color: var(--muted); letter-spacing: .06em; }
.sealed-file.opening { animation: file-open .9s cubic-bezier(.6, 0, .4, 1) forwards; }
.sealed-file.opening .wax-seal { animation: seal-break .55s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes breathe { 0%, 100% { box-shadow: 0 26px 60px rgba(0, 0, 0, .65), 0 0 0 rgba(179, 38, 42, 0); }
  50% { box-shadow: 0 30px 64px rgba(0, 0, 0, .65), 0 0 40px rgba(179, 38, 42, .28); } }
@keyframes seal-break { 40% { transform: scale(1.15) rotate(-8deg); } 100% { transform: scale(1.6) rotate(18deg); opacity: 0; } }
@keyframes file-open { 0% { transform: none; opacity: 1; } 100% { transform: perspective(700px) rotateX(64deg) translateY(-40px); opacity: 0; } }

/* Stap 2: het getypte vel met de rol */
.role-sheet {
  position: relative; overflow: hidden; width: min(88vw, 340px); margin: 16px auto 12px; padding: 44px 20px 26px;
  border-radius: 3px; background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(90, 64, 30, .09) 27px 28px),
    radial-gradient(120% 90% at 50% 0%, #f1e8d5, var(--paper) 60%, #ddd0b4);
  color: var(--paper-ink); box-shadow: 0 26px 60px rgba(0, 0, 0, .6); transform: rotate(-1deg);
  transition: box-shadow 1s ease;
}
.role-sheet .sheet-stamp { position: absolute; top: 12px; right: 12px; color: var(--red); opacity: .8; transform: rotate(7deg); }
.role-sheet .sheet-line { margin: 4px 0 10px; font: 400 1.15rem/1.4 var(--body); }
.role-sheet .role-line { margin: 0; min-height: 3.3rem; }
.role-name { display: inline-block; white-space: nowrap; font: 400 2.55rem/1.15 var(--type); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink);
  transition: color .6s ease; }
.role-name.tw .ch.on { display: inline-block; animation: strike .26s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes strike { from { opacity: 0; transform: translateY(-6px) scale(1.7); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.role-sheet .role-icon { margin-top: 8px; color: var(--role-ink); opacity: 0; transform: scale(.6); transition: opacity .5s .2s ease, transform .5s .2s cubic-bezier(.2, 1.6, .4, 1); }
.role-sheet .role-icon .icon { width: 46px; height: 46px; stroke-width: 1.6; }
.reveal.revealed .role-icon { opacity: 1; transform: none; }
.reveal.revealed .role-name { color: var(--role-ink); }
.reveal[data-role="getuige"].revealed .role-sheet,
.reveal[data-role="verdachte"].revealed .role-sheet { animation: role-glow 2.6s ease-in-out infinite; }
@keyframes role-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--glow), .55), 0 0 34px 6px rgba(var(--glow), .45), 0 0 90px 24px rgba(var(--glow), .18); }
  50% { box-shadow: 0 0 0 2px rgba(var(--glow), .8), 0 0 50px 12px rgba(var(--glow), .6), 0 0 130px 40px rgba(var(--glow), .28); }
}
.reveal[data-role="moordenaar"].revealed .role-sheet { animation: shake .6s ease both; box-shadow: 0 0 0 2px rgba(125, 22, 26, .8), 0 0 70px 14px rgba(125, 22, 26, .55); }

/* Bloed: alleen zichtbaar bij de moordenaar */
.blood { position: absolute; left: 0; top: 0; width: 100%; height: 72%; pointer-events: none; opacity: 0; }
.role-sheet .sheet-line, .role-sheet .role-line, .role-sheet .role-icon, .role-sheet .sheet-stamp { position: relative; z-index: 1; }
.role-sheet .sheet-stamp { position: absolute; }
.reveal[data-role="moordenaar"].revealed .role-name,
.reveal[data-role="moordenaar"].revealed .sheet-line { text-shadow: 0 0 3px var(--paper), 0 0 8px var(--paper), 0 0 16px var(--paper); }
.blood .drip, .blood .splat { transform-box: fill-box; }
.blood .drip { transform-origin: 50% 0; transform: scaleY(0); }
.blood .splat { transform-origin: 50% 50%; transform: scale(0); }
.reveal[data-role="moordenaar"].revealed .blood { opacity: 1; }
.reveal[data-role="moordenaar"].revealed .blood .band { animation: soak .5s ease-out both; }
.reveal[data-role="moordenaar"].revealed .blood .drip { animation: drip 2.8s cubic-bezier(.55, 0, .3, 1) forwards; animation-delay: var(--d, 0s); }
.reveal[data-role="moordenaar"].revealed .blood .splat { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes soak { from { opacity: 0; } to { opacity: 1; } }
@keyframes drip { 0% { transform: scaleY(0); } 25% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }

.dossier-reveal { margin-top: 6px; }
.dossier-reveal p { margin-bottom: 6px; }
.dossier-number { font: 400 5.2rem/1 var(--type); color: var(--accent); margin: 2px 0 6px; text-shadow: 0 0 30px rgba(201, 162, 75, .4); }
.dossier-reveal:not([hidden]) .dossier-number { animation: stamp-down .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.dossier-reveal .primary { margin-top: 14px; }
@keyframes stamp-down { from { opacity: 0; transform: scale(2) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* Stap 3: de verdachten op een rij, zoals bij de politie */
.lineup-wall {
  list-style: none; margin: 18px 0 18px; padding: 22px 12px 14px; position: relative;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 18px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: repeating-linear-gradient(180deg, transparent 0 23px, rgba(236, 230, 220, .07) 23px 24px), #121010;
}
.mugshot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.mugshot .avatar { width: 70px; height: 70px; border-radius: 8px; font-size: 1.35rem; box-shadow: 0 0 0 3px #0b0a0a, 0 10px 20px rgba(0, 0, 0, .55); }
.mugshot .placard { display: block; max-width: 100%; padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #0b0a0a; color: var(--text); border: 1px solid #3a3030; font: 700 .82rem/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.reveal.js .mugshot:not(.shot) { opacity: 0; }
.mugshot.shot { animation: mug-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.mugshot.shot::after { content: ""; position: absolute; inset: -8px -4px; border-radius: 10px; background: #fff; pointer-events: none; animation: camera .5s ease-out forwards; }
@keyframes mug-in { from { opacity: 0; transform: translateY(-14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes camera { from { opacity: .9; } to { opacity: 0; } }
.to-personal { margin-top: 4px; transition: opacity .5s ease, transform .5s ease; }
.reveal.js .to-personal.pending { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.to-personal button { font-size: .95rem; letter-spacing: 0; }
.to-personal .icon { width: 20px; height: 20px; }

/* De persoonlijke pagina: nog een tijdelijke invulling, die per moordspel verschilt */
.placeholder { border-style: dashed; border-color: rgba(201, 162, 75, .45); background: rgba(201, 162, 75, .04); box-shadow: none; }

/* =====================================================================================
   Telefoon-zaken: keuzescherm, stemming, uitslag, rollenkaart, homepagina van een spel
   ===================================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stamp.type-moordenaar { color: var(--red); }
.stamp.type-verdachte { color: var(--accent); }
.stamp.type-getuige { color: var(--leaf); }

.who-card { text-align: center; padding: 10px 0 4px; }
.who-card .eyebrow { justify-content: center; }
.who-card h1 { font-size: 2.1rem; margin-bottom: 4px; }
.who-title { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); margin: 0 0 6px; }

/* Twee ronde opties, zoals app-iconen */
.choices-round { display: flex; justify-content: center; gap: clamp(22px, 9vw, 52px); margin: 18px 0 24px; }
.round-option { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text); text-decoration: none; width: 120px; }
.round-icon { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; color: var(--accent-light);
  background: radial-gradient(circle at 35% 28%, #3a2f2a, #161213 62%, #0b0a0a);
  box-shadow: 0 0 0 2px rgba(201, 162, 75, .55), 0 0 0 7px rgba(201, 162, 75, .08), 0 18px 40px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .06);
  transition: transform .15s ease, box-shadow .2s ease; }
.round-icon .icon { width: 44px; height: 44px; stroke-width: 1.5; }
.round-option:hover .round-icon { box-shadow: 0 0 0 2px var(--accent), 0 0 30px rgba(201, 162, 75, .3), 0 18px 40px rgba(0, 0, 0, .6); }
.round-option:active .round-icon { transform: scale(.94); }
.round-label { font: 400 1.02rem/1.2 var(--type); text-align: center; letter-spacing: .02em; }

/* Stemmen op een verdachte */
.suspect-options { display: grid; gap: 10px; margin: 6px 0 14px; }
.suspect-options label { margin: 0; }
.suspect-options input { position: absolute; opacity: 0; pointer-events: none; }
.suspect-options label > span { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--card-2); cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
.suspect-options label:active > span { transform: scale(.98); }
.suspect-options input:checked + span { border-color: var(--red); background: linear-gradient(135deg, rgba(125, 22, 26, .5), rgba(125, 22, 26, .15)); }
.suspect-options input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 2px; }
.opt-text { display: flex; flex-direction: column; }
.opt-text small { color: var(--muted); }
.vote-progress { margin-top: 10px; }
.defense { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 12px; }
.defense .timer { position: static; font-size: 2.6rem; }

/* De uitslag */
.verdict-card h2 { font-size: 1.7rem; }
.verdict-card.solved { border-color: rgba(79, 174, 111, .6); box-shadow: 0 0 0 1px rgba(79, 174, 111, .2), 0 18px 50px rgba(79, 174, 111, .12); }
.verdict-card.escaped { border-color: rgba(179, 38, 42, .7); box-shadow: 0 0 0 1px rgba(179, 38, 42, .25), 0 18px 50px rgba(125, 22, 26, .3); }
.verdict-card h3 { font: 400 .85rem/1.2 var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 16px 0 6px; }
.tally { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.tally li { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr auto; align-items: center; gap: 10px; }
.t-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.t-name .stamp { font-size: .62rem; transform: rotate(-4deg); }
.t-bar { height: 10px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.t-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--red)); animation: grow 1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.tally li.top .t-name { color: var(--accent-light); }
.vote-rows { list-style: none; margin: 0 0 10px; padding: 0; }
.vote-rows li { border-top: 1px dashed var(--line); padding: 10px 0; }
.vote-rows .vr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vote-rows .vr-head .stamp { font-size: .62rem; margin-left: auto; }
.vote-rows li.winner .vr-head strong { color: var(--accent-light); }
.vr-votes { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; font-size: .9rem; }
.vr-votes dt { display: inline; color: var(--muted); }
.vr-votes dt::after { content: ": "; }
.vr-votes dd { display: inline; margin: 0; }
.vr-votes .icon { color: var(--leaf); width: 16px; height: 16px; vertical-align: -3px; }
.card.paper { background: var(--paper); color: var(--paper-ink); border-color: #cdbf9e; }
.card.paper .eyebrow { color: var(--blood); }
.secret-row { border-top: 1px dashed var(--line); padding: 10px 0; }
.secret-row summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.secret-row .stamp { font-size: .62rem; margin-left: auto; }
.paper-letter { margin-top: 10px; padding: 16px; border-radius: 6px; background: var(--paper); color: var(--paper-ink); font-family: var(--body); }

/* De rollenkaart: een getypt dossierblad */
.role-card-sheet { position: relative; margin: 6px 0 18px; padding: 26px 20px 22px; border-radius: 4px; color: var(--paper-ink);
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(90, 64, 30, .08) 27px 28px),
              radial-gradient(120% 90% at 50% 0%, #f1e8d5, var(--paper) 60%, #ddd0b4);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55); }
.role-card-sheet header { padding-right: 96px; }
.role-card-sheet header .eyebrow { display: block; padding-right: 34px; }  /* ruimte voor de schuine stempel */
.role-card-sheet .eyebrow { color: var(--blood); }
.role-card-sheet h1 { color: var(--paper-ink); margin-bottom: 2px; }
.rc-title { margin: 0 0 8px; color: #5b4630; font-style: italic; }
.rc-stamp { position: absolute; top: 22px; right: 14px; font-size: .85rem; transform: rotate(8deg); opacity: .85; }
.rc-intro { font-size: 1.02rem; }
.rc-section { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(90, 64, 30, .35); }
.rc-section h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; color: var(--paper-ink); margin-bottom: 6px; }
.rc-section.secret { padding: 12px 12px 6px; margin-top: 18px; border: 2px solid rgba(163, 32, 31, .5); border-radius: 4px; background: rgba(163, 32, 31, .05); }
.rc-section.secret h2 { color: #8e1418; }
.rc-section ul { margin: 0; padding-left: 20px; }
.rc-section li { margin-bottom: 4px; }
.rc-foot { margin-top: 20px; font-size: .85rem; color: #6b5a44; text-align: center; font-style: italic; }

/* Homepagina van een spel en Coming soon */
.game-home h2 { margin-bottom: 8px; }
.status-line { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.status-line .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.status-line .status-verlopen, .status-line .status-niet_geactiveerd { background: var(--muted); box-shadow: none; }
.coming-soon { text-align: center; }
.coming-soon h1 { margin: 18px 0 8px; }
.coming-soon p { color: var(--muted); max-width: 420px; margin-left: auto; margin-right: auto; }
.soon-stamp { margin-top: 18px; color: var(--red); font-size: 1rem; padding: 6px 14px; }

/* --- Beheer: menu, bestellingen en codes per spel ---------------------------------------- */
.mono { font-family: var(--mono); letter-spacing: .06em; }
.admin-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.admin-tile { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; margin: 0; }
.admin-tile .icon { width: 28px; height: 28px; color: var(--accent); }
.admin-tile:hover { border-color: rgba(201, 162, 75, .6); }
.order { border-top: 1px dashed var(--line); padding: 14px 0; }
.order-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pdf-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pdf-links .button, .pdf-links button { min-height: 34px; }
.filter-row { justify-content: flex-start; }
.filter-row > * { flex: 0 0 auto; }
.code-group summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.code-group table { margin-top: 8px; }