/* Who is the Traitor? — extra styles on top of /style.css */
:root { --faith: #5fb8ff; --traitor: #e0423a; --cloak: #2a1030; }
body.tr {
  background: radial-gradient(1100px 700px at 15% -10%, #24142e 0%, transparent 60%),
              radial-gradient(900px 600px at 110% 110%, #2a0f14 0%, transparent 55%), var(--ink);
}
.tr-title { font-family: var(--display); font-weight: 900; line-height: .95; }
.tr-title span { color: var(--traitor); font-style: italic; }

/* Playfair's old-style figures look like letters ("0" vs "o"): use lining figures for numbers. */
.pot b, .stagepot, .timer, .val, .badge-code, .fx-title, .bigname, h1, h2 { font-variant-numeric: lining-nums tabular-nums; }
.peek { white-space: nowrap; }
#potchip { white-space: nowrap; padding: 4px 8px; }

/* ---------- Icons ---------- */
.ic-t-traitor { color: #ff6b5e; }
.ic-t-traitor .cloak { animation: cloakSway 4s ease-in-out infinite; transform-origin: 50px 88px; }
.ic-t-traitor .cloak > .fill { fill: #5a1730; fill-opacity: .55; }
.ic-t-traitor .hood { fill: #07050a; stroke-width: 3; }
.ic-t-traitor .seam { stroke-width: 2.5; opacity: .6; }
.ic-t-traitor .eyes ellipse { fill: #ff3b30; stroke: none; filter: drop-shadow(0 0 4px #ff3b30); animation: eyeGlow 3.2s ease-in-out infinite; transform-origin: 50px 48px; }
.ic-t-traitor .dagger .blade { fill: #e8e8f0; fill-opacity: .9; stroke-width: 2; }
.ic-t-traitor .dagger { stroke: #e8e8f0; animation: daggerPeek 3.2s ease-in-out infinite; transform-origin: 74px 82px; }
.ic-t-traitor .shadow { fill: #000; opacity: .35; stroke: none; }
@keyframes cloakSway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes eyeGlow { 0%, 40%, 100% { opacity: 1; transform: scaleY(1); } 44% { transform: scaleY(.1); } 48% { transform: scaleY(1); } 70% { opacity: .35; } }
@keyframes daggerPeek { 0%, 55%, 100% { transform: translate(0, 0) rotate(0); } 65%, 85% { transform: translate(-4px, -6px) rotate(-8deg); } }

.ic-t-faithful { color: var(--faith); }
.ic-t-faithful .f1 { fill: #ffb23e; stroke: #ffb23e; stroke-width: 2; }
.ic-t-faithful .f2 { fill: #fff3c4; stroke: none; }
.ic-t-faithful .flame { transform-origin: 50px 44px; animation: flameFlick 1.4s ease-in-out infinite; }
.ic-t-faithful .glow circle { fill: #ffb23e; fill-opacity: .12; stroke: none; animation: glowPulse 1.4s ease-in-out infinite; transform-origin: 50px 30px; }
@keyframes flameFlick { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(.94, 1.06) rotate(-3deg); } 50% { transform: scale(1.04, .95) rotate(2deg); } 75% { transform: scale(.97, 1.04) rotate(-1deg); } }
@keyframes glowPulse { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }

.ic-t-chest { color: var(--gold2); }
.ic-t-chest .coins circle { fill: #f3cf7a; fill-opacity: 1; stroke: #9a6b12; stroke-width: 2.5; animation: coinHop 1.8s ease-in-out infinite; }
.ic-t-chest .coins circle:nth-child(2) { animation-delay: .25s; } .ic-t-chest .coins circle:nth-child(3) { animation-delay: .5s; }
.ic-t-chest .lid { animation: lidPop 1.8s ease-in-out infinite; transform-origin: 14px 46px; }
.ic-t-chest .lock { fill: #f3cf7a; fill-opacity: .9; stroke-width: 2.5; }
@keyframes coinHop { 0%, 100% { transform: translateY(6px); } 40% { transform: translateY(-6px); } }
@keyframes lidPop { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-7deg); } }

.ic-t-table { color: #c9a77a; }
.ic-t-table .seats { animation: spin 24s linear infinite; transform-origin: 50px 50px; }
.ic-t-table .seats circle { fill: currentColor; fill-opacity: .35; }
.ic-t-table .fl { fill: #ffb23e; stroke: #ffb23e; stroke-width: 2; transform-origin: 50px 42px; animation: flameFlick 1.2s ease-in-out infinite; }

.ic-t-scroll { color: #f1e1bf; }
.ic-t-scroll .paper { animation: bob 3s ease-in-out infinite; }
.ic-t-scroll .seal circle { fill: #b0172a; stroke: #ff6b5e; }
.ic-t-scroll .seal { animation: heartbeat 1.8s ease-in-out infinite; transform-origin: 66px 74px; }
.ic-t-scroll .seal path { stroke: #ffd1cc; stroke-width: 2.5; }

.ic-t-vault { color: #b9c4d6; }
.ic-t-vault .dial { animation: dialSpin 4s cubic-bezier(.5,0,.3,1) infinite; transform-origin: 50px 50px; }
@keyframes dialSpin { 0% { transform: rotate(0); } 30% { transform: rotate(140deg); } 55% { transform: rotate(40deg); } 80%, 100% { transform: rotate(270deg); } }

.ic-t-gem { color: #ff6b8a; }
.ic-t-gem .gemg { animation: bob 2.6s ease-in-out infinite; }
.ic-t-gem .spark { fill: #fff; stroke: none; animation: twinkle 2s ease-in-out infinite; transform-origin: 82px 16px; }
.val.gemv .ic-t-gem { color: var(--gc); }
.val.gemv .ic-t-gem .fill { fill-opacity: .55; }

.ic-t-map { color: #e2c48a; }
.ic-t-map .route { stroke-dasharray: 5 6; animation: march 1.2s linear infinite; stroke-width: 3; }
.ic-t-map .x { stroke: #ff6b5e; stroke-width: 5; animation: heartbeat 1.6s ease-in-out infinite; transform-origin: 72px 26px; }
@keyframes march { to { stroke-dashoffset: -22; } }

.ic-t-hourglass { color: var(--gold2); }
.ic-t-hourglass .glass { animation: hgFlip 5s ease-in-out infinite; transform-origin: 50px 50px; }
.ic-t-hourglass .sand { fill: var(--gold2); fill-opacity: .8; stroke: none; }
.ic-t-hourglass .drop { stroke-dasharray: 3 4; animation: march .6s linear infinite; }
@keyframes hgFlip { 0%, 80% { transform: rotate(0); } 92%, 100% { transform: rotate(180deg); } }

.ic-t-crystal { color: #c9a7ff; }
.ic-t-crystal > .fill { animation: shieldGlow 2.4s ease-in-out infinite; }
.ic-t-crystal .mist circle { fill: #e9dcff; stroke: none; animation: orbit 3s linear infinite; transform-origin: 50px 46px; }
.ic-t-crystal .mist circle:nth-child(2) { animation-duration: 4s; } .ic-t-crystal .mist circle:nth-child(3) { animation-duration: 2.4s; animation-direction: reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }

.ic-t-cup { color: #e2c48a; }
.ic-t-cup .steam path { stroke-width: 3; opacity: .7; animation: steam 2.4s ease-in-out infinite; }
.ic-t-cup .steam path:nth-child(2) { animation-delay: .8s; }
@keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .8; } 100% { transform: translateY(-8px); opacity: 0; } }

.ic-t-dagger { color: #e8e8f0; }
.ic-t-dagger .knife { animation: swing 1.8s ease-in-out infinite; transform-origin: 50px 60px; }

.ic-t-shield { color: var(--heal); }
.ic-t-shield .sh { animation: bob 3s ease-in-out infinite; }
.ic-t-shield .check { stroke-width: 6; stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw 3s ease-in-out infinite; }

.ic-t-dbl { color: var(--gold2); }
.ic-t-dbl .b2 { animation: bob 2.4s ease-in-out infinite; }
.ic-t-dbl .x2 { stroke: #ff8a80; stroke-width: 5; }

/* ---------- FX backgrounds ---------- */
.bg-cloak { background: radial-gradient(circle at 50% 55%, #3a0d26 0%, #0a0208 75%); }
.bg-mission { background: radial-gradient(circle at 50% 45%, #2b2310 0%, #090704 75%); }
.bg-faith { background: radial-gradient(circle at 50% 45%, #0e2a48 0%, #03070d 75%); }
.chestbig { animation: winIcon 1s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 0 50px rgba(243,207,122,.6)); }
.unfurl { animation: unfurl 1s cubic-bezier(.2,1.3,.4,1) both; filter: drop-shadow(0 0 40px rgba(224,66,58,.6)); }
@keyframes unfurl { from { transform: scaleY(.1) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cloakrow { gap: 4px; align-items: flex-end; }

/* ---------- Pot ---------- */
.pot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(243,207,122,.16), rgba(217,164,65,.05)); border: 1px solid rgba(243,207,122,.35); }
.pot .ico { width: 46px; height: 46px; flex: none; }
.pot b { font-family: var(--display); font-size: 28px; color: var(--gold2); line-height: 1; }
.pot small { display: block; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.pot.bump b { animation: potBump .8s cubic-bezier(.2,1.6,.4,1); }
@keyframes potBump { 0% { transform: scale(1); } 40% { transform: scale(1.3); color: #fff; } 100% { transform: scale(1); } }

/* ---------- Sides ---------- */
.chip.faithful { background: rgba(95,184,255,.15); color: #8fd0ff; }
.chip.traitor { background: rgba(224,66,58,.18); color: #ff8a80; }
.chip.goldc { background: rgba(243,207,122,.15); color: var(--gold2); }

/* ---------- Mission values ---------- */
.val { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; }
.val.digit { font-family: var(--display); min-width: 1.4em; padding: 0 .2em; border-radius: 10px; background: #0d0f16; border: 2px solid #3a4256; color: var(--gold2); font-variant-numeric: tabular-nums; }
.val.word { font-family: var(--display); padding: .1em .5em; border-radius: 10px; background: #2a2114; border: 2px solid #6b5228; color: #f1e1bf; }
.val.gemv b { color: var(--gc); font-size: .8em; }
.val.q { color: var(--muted); font-family: var(--display); min-width: 1.4em; border-radius: 10px; border: 2px dashed #3a4256; }
.val.sm { font-size: 16px; } .val.md { font-size: 26px; } .val.lg { font-size: 54px; }
.val.word.lg { font-size: 38px; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.slot { padding: 12px 10px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.slot .lbl { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.slot .marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.mk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.mk.ok { background: rgba(53,196,141,.2); color: #7ee2b8; }
.mk.no { background: rgba(224,66,58,.2); color: #ff8a80; }
.mk.wait { background: var(--panel2); color: var(--muted); }

.clue { border-radius: 20px; padding: 18px; background: linear-gradient(160deg, #2a2114, #15110a); border: 2px solid #6b5228; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; position: relative; overflow: hidden; }
.clue::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px); pointer-events: none; }
.clue small { color: #c9a77a; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; font-size: 12px; }
.ask { border-color: var(--line); background: linear-gradient(180deg, var(--panel), var(--ink2)); }
.ask small { color: var(--gold2); }

.keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
.keypad button, .gempad button, .wordpad button { border-radius: 14px; background: var(--panel2); border: 1.5px solid var(--line); padding: 12px 4px; font-weight: 900; transition: transform .12s, border-color .2s, background .2s; }
.keypad button { font-family: var(--display); font-size: 26px; }
.keypad button.sel, .gempad button.sel, .wordpad button.sel { border-color: var(--gold); background: rgba(217,164,65,.16); transform: translateY(-2px); }
.gempad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.gempad button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
.wordpad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
.wordpad button { font-family: var(--display); font-size: 18px; padding: 14px 6px; }
.sabo { border-radius: 14px; padding: 12px; border: 1.5px dashed rgba(224,66,58,.5); background: rgba(224,66,58,.06); display: flex; align-items: center; gap: 10px; }
.sabo .ico { width: 34px; height: 34px; flex: none; }

/* ---------- Vote reveal ---------- */
.reveals { display: flex; flex-direction: column; gap: 8px; }
.rv { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 18px; animation: rvIn .5s cubic-bezier(.2,1.4,.4,1) both; }
.rv .arrow { color: var(--muted); }
.rv .x2 { font-weight: 900; color: #ff8a80; }
@keyframes rvIn { from { transform: translateX(-30px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.bigname { font-family: var(--display); font-size: clamp(30px, 5vw, 60px); line-height: 1.05; }
.sidebadge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 999px; font-family: var(--display); font-size: 28px; font-weight: 900; }
.sidebadge .ico { width: 56px; height: 56px; }
.sidebadge.faithful { background: rgba(95,184,255,.12); color: #8fd0ff; border: 2px solid rgba(95,184,255,.5); }
.sidebadge.traitor { background: rgba(224,66,58,.14); color: #ff8a80; border: 2px solid rgba(224,66,58,.6); }

/* ---------- Items held by a player ---------- */
.items { display: flex; gap: 8px; flex-wrap: wrap; }
.item { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.item .ico { width: 32px; height: 32px; flex: none; }
.item.shield { border-color: rgba(53,196,141,.5); }
.item.dbl { border-color: rgba(243,207,122,.5); }
.item.seer { border-color: rgba(201,167,255,.5); }

/* ---------- Game picker card (links between the two games) ---------- */
.gamecard { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; text-decoration: none; color: inherit; border: 1.5px solid #5a1730; background: linear-gradient(135deg, #2a0f1f, #120a12); position: relative; overflow: hidden; }
.gamecard .ico { width: 62px; height: 62px; flex: none; }
.gamecard b { font-size: 19px; display: block; }
.gamecard small { color: var(--muted); font-size: 14px; }
.gamecard .new { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 900; letter-spacing: .12em; padding: 3px 8px; border-radius: 6px; background: var(--traitor); color: #fff; }
[dir=rtl] .gamecard .new { right: auto; left: 12px; }
.gamecard.mafia { border-color: #6b2027; background: linear-gradient(135deg, #2a1015, #120b0e); }

[dir=rtl] .rv { flex-direction: row; }
[dir=rtl] .rv .arrow { transform: scaleX(-1); }