@font-face { font-family: 'Vazirmatn'; font-weight: 400; font-display: swap; src: url('/fonts/vazirmatn-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-weight: 400; font-display: swap; src: url('/fonts/vazirmatn-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Vazirmatn'; font-weight: 500; font-display: swap; src: url('/fonts/vazirmatn-arabic-500-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-weight: 500; font-display: swap; src: url('/fonts/vazirmatn-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Vazirmatn'; font-weight: 700; font-display: swap; src: url('/fonts/vazirmatn-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-weight: 700; font-display: swap; src: url('/fonts/vazirmatn-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Vazirmatn'; font-weight: 800; font-display: swap; src: url('/fonts/vazirmatn-arabic-800-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-weight: 800; font-display: swap; src: url('/fonts/vazirmatn-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Lalezar'; font-weight: 400; font-display: swap; src: url('/fonts/lalezar-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Lalezar'; font-weight: 400; font-display: swap; src: url('/fonts/lalezar-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --night: #12090f;
  --night-2: #1d1018;
  --night-3: #2a1722;
  --line: rgba(217, 164, 65, 0.22);
  --pom: #a3123a;
  --pom-bright: #e0335c; /* fills and borders; white text goes on --pom (7.8:1) */
  --pom-text: #ff6f8e; /* pomegranate for TEXT on the dark theme (7.4:1 on --night) */
  --dim: #a08b72; /* struck-out / upcoming text, still ≥5:1 on the dark panels */
  --gold: #d9a441;
  --gold-soft: #f0d08a;
  --parchment: #f5e6c8;
  --parchment-2: #e9d3a8;
  --ink: #2a1418;
  --turq: #2fb3a6;
  --text: #f3e7d3;
  --muted: #b8a185;
  --good: #49c28a;
  --bad: #ff5d73;
  --display: 'Lalezar', 'Vazirmatn', serif;
  --body: 'Vazirmatn', Tahoma, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--night);
  color: var(--text);
  /* direction comes from <html dir>, which the language switch sets */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Candle-lit room with a faint girih (Persian star) lattice */
.backdrop {
  background:
    radial-gradient(ellipse 60% 50% at 75% 0%, rgba(224, 51, 92, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 45% at 10% 100%, rgba(217, 164, 65, 0.14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d9a441' stroke-opacity='0.07' stroke-width='1.2'%3E%3Cpath d='M60 8l14 34 34 14-34 14-14 34-14-34-34-14 34-14z'/%3E%3Cpath d='M60 30l9 21 21 9-21 9-9 21-9-21-21-9 21-9z'/%3E%3Cpath d='M0 0l20 20M120 0l-20 20M0 120l20-20M120 120l-20-20'/%3E%3C/g%3E%3C/svg%3E"),
    var(--night);
  min-height: 100vh;
}

.display { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.warn { color: var(--pom-text); }

/* ---------- clue tag: what a clue proves (shared.js clueTag) ---------- */
/* On parchment cards: ink on a faint ink wash. On dark panels: see overrides. */
.ctag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; align-self: flex-start; max-width: 100%;
  font-size: .9rem; font-weight: 500; line-height: 1.5; color: var(--ink); background: rgba(42, 20, 24, .09);
  border: 1px solid rgba(42, 20, 24, .18); border-radius: .5rem; padding: .1rem .55rem; }
.ctag b { font-weight: 800; }
.ctag .art { width: 1.35em; height: 1.35em; vertical-align: -.35em; }
.ctag-alibi { background: rgba(44, 106, 73, .12); border-color: rgba(44, 106, 73, .35); }
.ctag-motive { background: rgba(163, 18, 58, .08); border-color: rgba(163, 18, 58, .3); }
.hidden { display: none !important; }

.avatar {
  display: inline-grid; place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  color: #1a0d12;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.18);
}

.sep { display: inline-block; width: .3em; height: .3em; background: currentColor; opacity: .55; transform: rotate(45deg); margin: 0 .4em; vertical-align: .18em; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .86; } 55% { opacity: .95; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 51, 92, .45); } 50% { box-shadow: 0 0 0 12px rgba(224, 51, 92, 0); } }
/* Emoji portraits sit a little smaller than letters inside the same circle. */
.avatar.pt { font-size: .82em; line-height: 1; }

/* ---------- item art (public/art.js) ---------- */
.art { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.3em; overflow: visible; }
/* Only animated parts measure transforms from their own box; elsewhere SVG
   rotate(a x y) attributes must keep using the viewBox. */
.art :is(.a-flame, .a-glow, .a-steam, .a-glint, .a-shine, .a-sway, .a-blink) { transform-box: fill-box; }
.art.anim .a-flame { transform-origin: 50% 100%; animation: art-flame 1.3s ease-in-out infinite; }
.art.anim .a-glow { transform-origin: center; animation: art-glow 1.3s ease-in-out infinite; }
.art.anim .a-steam { animation: art-steam 2.8s ease-in infinite; }
.art.anim .a-steam.d2 { animation-delay: 1.4s; }
.art.anim .a-glint { animation: art-glint 3.6s ease-in-out infinite; }
.art.anim .a-shine { animation: art-shine 3s ease-in-out infinite; }
.art.anim .a-sway { transform-origin: 50% 0%; animation: art-sway 3.4s ease-in-out infinite; }
.art.anim .a-blink { animation: art-blink 1.8s steps(1) infinite; }
@keyframes art-flame { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.92, 1.08) rotate(-3deg); } 60% { transform: scale(1.06, .95) rotate(2deg); } }
@keyframes art-glow { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes art-steam { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .75; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes art-glint { 0%, 55% { transform: skewX(-25deg) translateX(0); } 85%, 100% { transform: skewX(-25deg) translateX(80px); } }
@keyframes art-shine { 0%, 100% { opacity: .85; } 50% { opacity: .25; } }
@keyframes art-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes art-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .art.anim * { animation: none !important; } }

/* ---------- illustrated faces (public/faces.js) ---------- */
.avatar.has-face { overflow: hidden; padding: 0; }
.avatar .face { width: 100%; height: 100%; display: block; vertical-align: top; }
.avatar .face.pt-art { width: 86%; height: 86%; margin: auto; }
.avatar .face.bust { transform: translateY(4%); }
/* faces blink on the big reveal and spotlight avatars */
.killer-reveal .face .a-eye, .spot-who .face .a-eye, .kr .face .a-eye, .unmask .face .a-eye, .role-head .face .a-eye, .suspect .face .a-eye {
  transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.suspect:nth-child(2n) .face .a-eye { animation-delay: 1.7s; }
.suspect:nth-child(3n) .face .a-eye { animation-delay: 3.1s; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.face .a-sway-w { transform-box: fill-box; transform-origin: center; }
.kr .face .a-sway-w, .killer-reveal .face .a-sway-w { animation: flutter .5s ease-in-out infinite alternate; }
@keyframes flutter { from { transform: scaleX(1); } to { transform: scaleX(.8); } }
@media (prefers-reduced-motion: reduce) { .face .a-eye, .face .a-sway-w { animation: none !important; } }