@font-face { font-family: 'Cairo'; font-weight: 400; font-display: swap; src: url(/fonts/cairo-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Cairo'; font-weight: 600 700; font-display: swap; src: url(/fonts/cairo-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Cairo'; font-weight: 800 900; font-display: swap; src: url(/fonts/cairo-arabic-900-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(/fonts/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600 700; font-display: swap; src: url(/fonts/dm-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 800 900; font-display: swap; src: url(/fonts/dm-sans-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-display: swap; src: url(/fonts/playfair-display-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: italic; font-display: swap; src: url(/fonts/playfair-display-latin-700-italic.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 800 900; font-display: swap; src: url(/fonts/playfair-display-latin-900-normal.woff2) format('woff2'); }
:root {
  --ink: #0a0b10;
  --ink2: #12141c;
  --panel: #171a24;
  --panel2: #1f2330;
  --line: #2b3040;
  --text: #ece7dc;
  --muted: #9a9fb0;
  --gold: #d9a441;
  --gold2: #f3cf7a;
  --blood: #e0423a;
  --heal: #35c48d;
  --sky: #4a9ff5;
  --violet: #8d7bff;
  --radius: 16px;
  --display: 'Cairo', 'Playfair Display', Georgia, serif;
  --body: 'Cairo', 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: radial-gradient(1200px 700px at 20% -10%, #1b1e2c 0%, transparent 60%),
              radial-gradient(900px 600px at 110% 110%, #25121a 0%, transparent 55%), var(--ink);
  color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.45;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
h1, h2, h3, .display { font-family: var(--display); font-weight: 700; letter-spacing: .01em; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select { font: inherit; color: var(--text); }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1205;
  box-shadow: 0 6px 24px -8px rgba(217,164,65,.7), inset 0 -2px 0 rgba(0,0,0,.2);
  transition: transform .12s ease, filter .2s ease, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.red { background: linear-gradient(180deg, #ff6b5e, var(--blood)); color: #fff; box-shadow: 0 6px 24px -8px rgba(224,66,58,.8); }
.btn.green { background: linear-gradient(180deg, #5fe0ac, var(--heal)); color: #04170f; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.btn.big { padding: 18px 30px; font-size: 18px; }
.btn.wide { width: 100%; }
.btn .ico { width: 20px; height: 20px; }
.iconbtn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .2s; }
.iconbtn:hover { background: var(--panel2); }
.iconbtn .ico { width: 22px; height: 22px; }
.iconbtn.on { background: var(--gold); color: #1a1205; box-shadow: none; }

/* ---------- Cards & chips ---------- */
.card { background: linear-gradient(180deg, var(--panel), var(--ink2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--panel2); color: var(--muted); }
.chip.town { background: rgba(74,159,245,.14); color: #8cc3ff; }
.chip.mafia { background: rgba(224,66,58,.16); color: #ff8a80; }
.chip.neutral { background: rgba(232,95,208,.14); color: #f39ae5; }
.badge-code { font-family: var(--display); font-size: 22px; letter-spacing: .25em; padding: 6px 14px; border-radius: 10px; background: var(--panel2); color: var(--gold2); }

/* ---------- Icons (base) ---------- */
.ico { display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: currentColor; fill-opacity: .16; }
.ico .hole { fill: var(--ink); stroke: none; }
.still .ico * { animation: none !important; }

/* Mafia: hat tips, eyes glow under the brim */
.ic-mafia, .ic-godfather { color: #e0423a; }
.ic-godfather { color: #ff5a6a; }
.ic-mafia .shadow, .ic-godfather .shadow { fill: currentColor; opacity: .2; stroke: none; animation: shadowPulse 3.2s ease-in-out infinite; }
.ic-mafia .hat, .ic-godfather .hat { transform-origin: 50% 60%; animation: hatTip 3.2s ease-in-out infinite; }
.ic-mafia .band, .ic-godfather .band { fill: currentColor; fill-opacity: .6; }
.ic-mafia .dent, .ic-godfather .dent { stroke-width: 3; opacity: .7; }
.ic-mafia .eyes ellipse { fill: #ff3b30; stroke: none; filter: drop-shadow(0 0 4px #ff3b30); animation: eyeBlink 3.2s ease-in-out infinite; transform-origin: 50% 72px; }
.ic-godfather .rose { fill: #ff2244; stroke: none; }
.ic-godfather .leaf { fill: #35c48d; stroke: none; }
.ic-godfather .ring { color: var(--gold2); stroke: var(--gold2); animation: ringBob 3.2s ease-in-out infinite; }
.ic-godfather .gem { fill: #ff2244; stroke: none; }
.ic-godfather .spark { fill: var(--gold2); stroke: none; transform-origin: 72px 72px; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes hatTip { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-8px) rotate(-10deg); } 82% { transform: translateY(-6px) rotate(-8deg); } }
@keyframes eyeBlink { 0%, 62%, 100% { transform: scaleY(0); opacity: 0; } 70%, 84% { transform: scaleY(1); opacity: 1; } 76% { transform: scaleY(.1); } }
@keyframes shadowPulse { 0%, 60%, 100% { transform: scaleX(1); } 70% { transform: scaleX(.85); } }
@keyframes ringBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes twinkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* Doctor: heartbeat */
.ic-doctor { color: var(--heal); }
.ic-doctor .pulse { transform-origin: 50% 44%; animation: heartbeat 1.4s ease-in-out infinite; }
.ic-doctor .cross { fill: currentColor; stroke: none; }
.ic-doctor .ecg { stroke-dasharray: 160; stroke-dashoffset: 160; animation: ecg 1.4s linear infinite; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.1); } 24% { transform: scale(1.02); } 30% { transform: scale(1.08); } }
@keyframes ecg { 0% { stroke-dashoffset: 160; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Detective: lens sweeps the dossier */
.ic-detective { color: var(--sky); }
.ic-detective .paper { opacity: .55; stroke-width: 3; }
.ic-detective .lens { animation: sweep 3s ease-in-out infinite; }
.ic-detective .glass { fill: currentColor; fill-opacity: .12; stroke-width: 5; }
.ic-detective .handle { stroke-width: 8; }
.ic-detective .glint { stroke: #fff; stroke-width: 3; opacity: .8; animation: glint 3s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-18px, -10px); } 50% { transform: translate(-22px, 12px); } 75% { transform: translate(-4px, 6px); } }
@keyframes glint { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* Bodyguard: shimmer across the shield */
.ic-bodyguard { color: var(--gold); }
.ic-bodyguard .shield { animation: bob 3s ease-in-out infinite; }
.ic-bodyguard .inner { stroke-width: 2.5; opacity: .6; }
.ic-bodyguard .check { stroke-width: 6; stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw 3s ease-in-out infinite; }
.ic-bodyguard .shield > .fill { animation: shieldGlow 3s ease-in-out infinite; }
@keyframes shieldGlow { 0%, 100% { fill-opacity: .12; } 50% { fill-opacity: .4; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes draw { 0%, 20% { stroke-dashoffset: 50; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -50; } }

/* Vigilante: scope rotates and locks */
.ic-vigilante { color: #f07b2f; }
.ic-vigilante .scope { transform-origin: 50% 50%; animation: scope 3s cubic-bezier(.6,0,.3,1) infinite; }
.ic-vigilante .ring2 { stroke-dasharray: 8 6; }
.ic-vigilante .dot { fill: currentColor; stroke: none; animation: dotPulse 3s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes scope { 0% { transform: rotate(0) scale(1.15); } 60% { transform: rotate(90deg) scale(1); } 75% { transform: rotate(90deg) scale(.92); } 100% { transform: rotate(90deg) scale(1.15); } }
@keyframes dotPulse { 0%, 55% { transform: scale(.6); opacity: .5; } 70% { transform: scale(1.8); opacity: 1; } 100% { transform: scale(.6); opacity: .5; } }

/* Mayor: gavel strikes */
.ic-mayor { color: #c9a7ff; }
.ic-mayor .block { fill: currentColor; fill-opacity: .3; }
.ic-mayor .gavel { transform-origin: 72px 74px; animation: gavel 1.8s cubic-bezier(.5,0,.2,1) infinite; }
.ic-mayor .handle { stroke-width: 6; }
.ic-mayor .burst { stroke-width: 3; opacity: 0; animation: burst 1.8s ease-out infinite; }
.ic-mayor .sash { opacity: 0; }
@keyframes gavel { 0%, 100% { transform: rotate(-22deg); } 45% { transform: rotate(-26deg); } 55% { transform: rotate(8deg); } 65% { transform: rotate(4deg); } }
@keyframes burst { 0%, 54% { opacity: 0; transform: scale(.6); transform-origin: 70px 66px; } 60% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.3); } }

/* Villager: lights flicker, chimney smokes */
.ic-villager { color: #9fb3c8; }
.ic-villager .window { fill: #ffcf6a; stroke: #ffcf6a; animation: flicker 4s steps(1) infinite; }
.ic-villager .door { stroke-width: 3; }
.ic-villager .smoke circle { fill: currentColor; fill-opacity: .5; stroke: none; animation: smoke 2.4s ease-out infinite; }
.ic-villager .smoke circle:nth-child(2) { animation-delay: .8s; }
.ic-villager .smoke circle:nth-child(3) { animation-delay: 1.6s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .5; } 50% { opacity: 1; } 72% { opacity: .7; } 74% { opacity: 1; } }
@keyframes smoke { 0% { transform: translate(0, 8px) scale(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(6px, -10px) scale(1.4); opacity: 0; } }

/* Jester: wobble and jingle */
.ic-jester { color: #e85fd0; }
.ic-jester .whole { transform-origin: 50% 85%; animation: wobble 2.2s ease-in-out infinite; }
.ic-jester .half { fill: currentColor; fill-opacity: .45; stroke: none; }
.ic-jester .bell { fill: var(--gold2); stroke: none; animation: jingle .55s ease-in-out infinite alternate; }
.ic-jester .b2 { animation-delay: .2s; } .ic-jester .b3 { animation-delay: .35s; }
.ic-jester .mouth { animation: grin 2.2s ease-in-out infinite; transform-origin: 50% 70px; }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes jingle { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes grin { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.35); } }

/* Serial killer: blade glints, slow swing */
.ic-serial { color: var(--violet); }
.ic-serial .knife { transform-origin: 50% 70%; animation: swing 3.6s ease-in-out infinite; }
.ic-serial .blade { fill: currentColor; fill-opacity: .22; }
.ic-serial .edge { stroke: #fff; stroke-width: 2; opacity: .5; stroke-dasharray: 10 60; animation: edge 1.8s linear infinite; }
.ic-serial .guard, .ic-serial .pommel { fill: currentColor; fill-opacity: .5; }
.ic-serial .glint { fill: #fff; stroke: none; transform-origin: 56px 28px; animation: twinkle 1.8s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes edge { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }

/* UI icons */
.ic-moon { color: #c9d6ff; }
.ic-sun { color: #ffbf47; }
.ic-sun .rays { transform-origin: 50% 50%; animation: spin 14s linear infinite; }
.ic-skull { color: #f2e9dc; }
.ic-heart { color: var(--heal); }
.ic-crown, .ic-trophy { color: var(--gold2); }
.ic-ghost { color: #cfd6e6; animation: float 3s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Avatars / player tiles ---------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #0b0d12; flex: none; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px;
  border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); text-align: center;
  transition: transform .15s ease, border-color .2s, background .2s, box-shadow .2s;
}
.tile .nm { font-weight: 700; font-size: 15px; word-break: break-word; }
.tile.sel { border-color: var(--gold); background: rgba(217,164,65,.1); box-shadow: 0 0 0 4px rgba(217,164,65,.15); transform: translateY(-2px); }
.tile.dead { opacity: .4; filter: grayscale(1); }
.tile:active { transform: scale(.96); }
.tile .mark { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--blood); color: #fff; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }

.pop-in { animation: popIn .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fade-up { animation: fadeUp .5s ease both; }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.shake { animation: shake .45s ease; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); background: #2a1515; color: #ffd1cc; border: 1px solid #5a2626; padding: 12px 18px; border-radius: 12px; z-index: 300; transition: transform .3s ease; max-width: calc(100% - 32px); font-weight: 600; }
#toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Full-screen FX overlay ---------- */
#fx { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
#fx.on { pointer-events: auto; }
#fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 24px; z-index: 2; }
.fx-title { font-family: var(--display); font-size: clamp(30px, 6vw, 72px); line-height: 1.05; text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.fx-sub { font-size: clamp(16px, 2.4vw, 26px); color: #e7dfd0; opacity: .9; max-width: 22em; }
.fx-bg { position: absolute; inset: 0; z-index: 1; }
.fx-in { animation: fxIn .5s ease both; }
.fx-out { animation: fxOut .5s ease both; }
@keyframes fxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxOut { from { opacity: 1; } to { opacity: 0; } }

/* Night */
.bg-night { background: radial-gradient(ellipse at 50% 120%, #1c2a52 0%, #0a0f22 50%, #03040a 100%); animation: nightDrop 1.2s ease both; }
@keyframes nightDrop { from { transform: translateY(-100%); } to { transform: none; } }
.fx-moon { color: #dfe7ff; filter: drop-shadow(0 0 40px rgba(200,215,255,.6)); animation: moonRise 1.6s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes moonRise { from { transform: translateY(160px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: starTw 2s ease-in-out infinite; z-index: 1; }
@keyframes starTw { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.3); } }

/* Morning */
.bg-dawn { background: linear-gradient(0deg, #ff9a3d 0%, #ff6b6b 30%, #3a2a5a 70%, #0b0d1a 100%); animation: dawnRise 1.6s ease both; }
@keyframes dawnRise { from { transform: translateY(100%); } to { transform: none; } }
.fx-sun { animation: sunRise 1.8s cubic-bezier(.2,.8,.2,1) .2s both; filter: drop-shadow(0 0 60px rgba(255,190,70,.9)); }
@keyframes sunRise { from { transform: translateY(220px); } to { transform: none; } }

/* Kill */
.bg-kill { background: radial-gradient(circle at 50% 50%, #3a0508 0%, #0a0003 70%); }
.flash-red { position: absolute; inset: 0; background: #ff1e1e; z-index: 3; animation: flash .6s ease-out both; pointer-events: none; }
.flash-white { position: absolute; inset: 0; background: #fff; z-index: 3; animation: flash .35s ease-out both; pointer-events: none; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.slashes { position: absolute; inset: 0; z-index: 2; }
.slashes path { fill: none; stroke: #ff2b2b; stroke-width: 16; stroke-linecap: round; filter: drop-shadow(0 0 10px #ff0000); stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: slash .35s ease-out forwards; }
.slashes path:nth-child(2) { animation-delay: .12s; }
.slashes path:nth-child(3) { animation-delay: .24s; }
@keyframes slash { to { stroke-dashoffset: 0; } }
.drip { position: absolute; top: -10px; width: 10px; border-radius: 0 0 6px 6px; background: linear-gradient(#9b0000, #ff2b2b); z-index: 2; animation: drip 2.4s ease-in forwards; }
@keyframes drip { from { height: 0; } to { height: 46vh; } }
.namecard { padding: 16px 28px; border-radius: 14px; background: #f1e9da; color: #1b0f0f; font-family: var(--display); font-size: clamp(26px, 5vw, 54px); box-shadow: 0 20px 60px rgba(0,0,0,.6); position: relative; }
.namecard.crack { animation: cardFall 1.4s cubic-bezier(.6,0,.8,.4) 1.2s both; }
.namecard.crack::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 48%, #1b0f0f 49%, #1b0f0f 51%, transparent 52%), linear-gradient(60deg, transparent 58%, #1b0f0f 59%, transparent 60%); opacity: 0; animation: crackIn .2s ease .6s forwards; border-radius: 14px; }
@keyframes crackIn { to { opacity: .8; } }
@keyframes cardFall { 0% { transform: none; } 15% { transform: rotate(-3deg); } 100% { transform: translateY(60vh) rotate(18deg); opacity: 0; } }
.skull-in { animation: skullIn .7s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 0 30px rgba(255,40,40,.6)); }
@keyframes skullIn { from { transform: scale(2.6); opacity: 0; } to { transform: none; opacity: 1; } }
.tomb { animation: tombRise 1s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes tombRise { from { transform: translateY(80px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Save / heal */
.bg-save { background: radial-gradient(circle at 50% 50%, #0d3a2a 0%, #03100b 75%); }
.ring-wave { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 4px solid var(--heal); z-index: 1; animation: ringWave 2s ease-out infinite; }
.ring-wave:nth-child(2) { animation-delay: .5s; } .ring-wave:nth-child(3) { animation-delay: 1s; }
@keyframes ringWave { from { transform: scale(.5); opacity: 1; } to { transform: scale(6); opacity: 0; } }
.bubble { animation: bubbleIn .9s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 40px rgba(53,196,141,.8)); }
@keyframes bubbleIn { from { transform: scale(0); } to { transform: scale(1); } }
.deflect { animation: deflect .5s ease 1.1s both; }
@keyframes deflect { 0% { transform: none; } 30% { transform: scale(1.18); } 100% { transform: none; } }
.blocked-blade { position: absolute; z-index: 3; color: var(--blood); animation: bladeIn 1.4s cubic-bezier(.6,0,.4,1) both; }
@keyframes bladeIn { 0% { transform: translate(-60vw, -40vh) rotate(-40deg); opacity: 0; } 55% { transform: translate(-90px, -50px) rotate(-40deg); opacity: 1; } 70% { transform: translate(-130px, -90px) rotate(-90deg); } 100% { transform: translate(-60vw, -70vh) rotate(-300deg); opacity: 0; } }

/* Shield shatter */
.shard { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 34px solid var(--gold); z-index: 3; animation: shard 1.3s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes shard { from { transform: translate(-50%, -50%) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* Investigate */
.bg-inv { background: radial-gradient(circle at 50% 40%, #0e1d33 0%, #04070d 75%); }
.dossier { width: min(320px, 76vw); padding: 22px; border-radius: 14px; background: #efe6d2; color: #2a2116; position: relative; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); font-family: var(--display); }
.dossier .silh { width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; background: #2a2116; opacity: .85; }
.dossier .who { font-size: 26px; }
.scanbar { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(74,159,245,.55), transparent); animation: scan 1s ease-in-out 3 alternate; }
@keyframes scan { from { top: -30%; } to { top: 100%; } }
.stamp { position: absolute; left: 50%; top: 50%; padding: 8px 18px; border: 6px solid currentColor; border-radius: 10px; font-family: var(--body); font-weight: 900; font-size: 34px; letter-spacing: .12em; transform: translate(-50%, -50%) rotate(-14deg); animation: stamp .45s cubic-bezier(.2,1.6,.4,1) both; background: rgba(239,230,210,.75); }
.stamp.mafia { color: #c4161c; }
.stamp.innocent { color: #198754; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(3.5); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; } }
.fx-lens { position: absolute; z-index: 4; color: var(--sky); animation: lensMove 3s ease-in-out both; }
@keyframes lensMove { 0% { transform: translate(-40vw, 30vh) scale(.6); } 40% { transform: translate(-40px, 0) scale(1.4); } 70% { transform: translate(40px, -10px) scale(1.4); } 100% { transform: translate(40vw, -30vh) scale(.6); opacity: 0; } }

/* Vote / gavel */
.bg-court { background: radial-gradient(circle at 50% 30%, #2a2013 0%, #07060a 75%); }
.spot { position: absolute; left: 50%; top: -20%; width: 70vmin; height: 140%; margin-left: -35vmin; background: radial-gradient(ellipse at 50% 100%, rgba(255,230,170,.25), transparent 60%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); z-index: 1; animation: fxIn 1s ease both; }
.gavel-big { color: var(--gold2); animation: gavelBig 1s cubic-bezier(.6,0,.2,1) both; transform-origin: 80% 80%; }
@keyframes gavelBig { 0% { transform: rotate(-60deg) translateY(-40px); opacity: 0; } 60% { transform: rotate(10deg); opacity: 1; } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
.flipcard { width: min(260px, 66vw); height: min(340px, 86vw); perspective: 1000px; }
.flipcard .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,1.4,.5,1); }
.flipcard.flipped .inner { transform: rotateY(180deg); }
.flipcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; }
.flipcard .back { background: repeating-linear-gradient(45deg, #2a1d10 0 10px, #33240f 10px 20px); border: 3px solid var(--gold); color: var(--gold2); }
.flipcard .front { transform: rotateY(180deg); background: linear-gradient(180deg, #1d2130, #10121a); border: 3px solid var(--rc, var(--gold)); box-shadow: 0 0 60px -10px var(--rc, var(--gold)); }
.elim-stamp { position: absolute; z-index: 5; left: 50%; top: 50%; margin: -40px 0 0 -150px; width: 300px; text-align: center; padding: 8px 18px; border: 6px solid var(--blood); color: var(--blood); font-weight: 900; font-size: clamp(26px, 5vw, 46px); letter-spacing: .12em; border-radius: 10px; transform: rotate(-12deg); animation: stamp2 .4s cubic-bezier(.2,1.6,.4,1) both; background: rgba(10,0,0,.5); }
@keyframes stamp2 { from { transform: rotate(-12deg) scale(3); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.ballot-drop .paper { animation: paperDrop .9s cubic-bezier(.5,0,.6,1) both; }
@keyframes paperDrop { from { transform: translateY(-40px); } 70% { transform: translateY(26px); opacity: 1; } to { transform: translateY(30px); opacity: 0; } }

/* Mayor / win */
.bg-gold { background: radial-gradient(circle at 50% 45%, #3a2a0a 0%, #0a0703 75%); }
.rays-bg { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(rgba(243,207,122,.12) 0 6deg, transparent 6deg 18deg); animation: spin 30s linear infinite; z-index: 1; }
.bg-mafia-win { background: radial-gradient(circle at 50% 60%, #3d0509 0%, #050001 75%); }
.bg-town-win { background: linear-gradient(0deg, #ffb347 0%, #ff7e5f 25%, #2b3a67 70%, #0b0d1a 100%); }
.bg-jester-win { background: radial-gradient(circle at 50% 50%, #3d0f39 0%, #0a020a 75%); }
.bg-serial-win { background: radial-gradient(circle at 50% 50%, #1d1645 0%, #04030c 75%); }
.win-icon { animation: winIcon 1.2s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes winIcon { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
.fx-tap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #fff; opacity: .55; font-size: 14px; z-index: 5; animation: fxIn 1s ease 2s both; }

@media (prefers-reduced-motion: reduce) {
  .ico *, .fx-stage *, .ring-wave, .star { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ---------- App shell: modal dialog + bottom sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 250; background: rgba(4,5,9,.72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fxIn .2s ease both; }
.scrim.sheet-wrap { place-items: end center; padding: 0; }
.dialog { width: 100%; max-width: 400px; background: linear-gradient(180deg, var(--panel), var(--ink2)); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: popIn .3s cubic-bezier(.2,1.3,.4,1) both; }
.dialog h3 { font-size: 22px; }
.dialog p { margin: 0; color: var(--muted); }
.dialog .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sheet { width: 100%; max-width: 560px; max-height: 88dvh; overflow: auto; background: linear-gradient(180deg, #1a1d29, var(--ink2)); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); animation: sheetUp .35s cubic-bezier(.2,1,.3,1) both; }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 14px; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.field { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--ink2); font-size: 18px; outline: none; color: var(--text); }
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217,164,65,.15); }
.code-field { text-transform: uppercase; letter-spacing: .35em; font-family: var(--display); font-size: 28px; text-align: center; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; z-index: 60; box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: popIn .2s ease both; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 10px; text-align: left; font-weight: 600; color: var(--text); text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--panel2); }
.menu .ico { width: 20px; height: 20px; }
.menu .danger { color: #ff8a80; }
.ic-logout, .ic-share, .ic-menu, .ic-home, .ic-scan, .ic-copy, .ic-download, .ic-info { color: currentColor; }

/* Arabic / right-to-left */
[dir=rtl] body { line-height: 1.6; }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] .display { letter-spacing: 0; }
[dir=rtl] .ic-next, [dir=rtl] .ic-back { transform: scaleX(-1); }
[dir=rtl] .menu { right: auto; left: 0; }
[dir=rtl] .menu button, [dir=rtl] .menu a, [dir=rtl] .bigaction { text-align: right; }
[dir=rtl] .tile .mark { right: auto; left: 6px; }
[dir=rtl] .code-field, [dir=rtl] input[type=email] { direction: ltr; }
[dir=rtl] .stamp, [dir=rtl] .elim-stamp { letter-spacing: 0; }
.langbtn { font-weight: 700; }
[dir=rtl] { --display: 'Cairo', system-ui, sans-serif; }