:root{--indigo:#1e1147;--indigo-raised:#2e1c66;--marigold:#ffb81c;--cream:#fff1cf;--crimson:#c4163f;--teal:#0b7a75;--display:"Lalezar", "IBM Plex Sans Arabic", sans-serif;--body:"IBM Plex Sans Arabic", system-ui, sans-serif;--gutter:1.25rem}body[data-time=night],body:not([data-time]){--bg:var(--indigo);--fg:var(--cream);--muted:#c4b9e6;--accent:var(--marigold);--on-accent:var(--indigo);--line:#6a58a8}body[data-time=day]{--bg:var(--marigold);--fg:var(--indigo);--muted:#47305e;--accent:var(--indigo);--on-accent:var(--marigold);--line:#7b5a1a}body[data-time=blood]{--bg:var(--crimson);--fg:var(--cream);--muted:#ffdcd2;--accent:var(--cream);--on-accent:var(--crimson);--line:#f09a9a}*{box-sizing:border-box;margin:0}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--fg);font-family:var(--body);font-synthesis:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;font-size:1.0625rem;line-height:1.6}body[data-out][data-time=night]{--bg:#2b2838;--fg:#d9d5e3;--muted:#a8a3b8;--accent:#a8a3b8;--on-accent:#2b2838;--line:#55516a}body[data-out][data-time=day]{--bg:#b9ad8f;--fg:#2b2838;--muted:#3f3a4c;--accent:#2b2838;--on-accent:#b9ad8f;--line:#7d735c}body.rising{background:var(--indigo)}#root{z-index:1;max-width:30rem;margin-inline:auto;position:relative}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:disabled{cursor:default}:focus-visible{outline:3px solid var(--fg);outline-offset:2px}ul{padding:0;list-style:none}h2{margin-bottom:.5rem;font-size:1rem;font-weight:600}.sr-only{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--muted)}.home{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 7.5rem) var(--gutter) calc(env(safe-area-inset-bottom) + 2rem);flex-direction:column;gap:1.25rem;display:flex;position:relative;overflow:hidden}.moon{top:-5rem;background:var(--marigold);border-radius:50%;width:12rem;height:12rem;position:absolute;inset-inline-end:-3rem}.logo{font-family:var(--display);color:var(--cream);font-size:clamp(4.5rem,25vw,7.5rem);font-weight:400;line-height:1.05;position:relative}.lede{max-width:34ch;font-size:1.125rem}.field{flex-direction:column;gap:.25rem;font-weight:600;display:flex}.field input{width:100%;min-height:3.25rem;font:inherit;color:var(--fg);background:var(--indigo-raised);border:2px solid var(--line);-webkit-user-select:text;user-select:text;border-radius:4px;padding:0 .875rem;font-size:1.25rem;font-weight:400}.field input[dir=ltr]{text-align:right;letter-spacing:.15em}.join{grid-template-columns:1fr auto;align-items:end;gap:.625rem;display:grid}.button{min-height:3.25rem;font-family:var(--display);border-radius:4px;padding:0 1.5rem;font-size:1.5rem}.button.primary{background:var(--accent);color:var(--on-accent)}.button.outline{border:2px solid}.button.small{min-height:2.75rem;font-family:var(--body);padding:0 .875rem;font-size:1rem;font-weight:600}.button:disabled{opacity:.6}.rules{border-top:2px solid var(--line);margin-top:.5rem;padding-top:.75rem}.rules summary{cursor:pointer;min-height:2.75rem;font-weight:600}.rules p{margin-block:.5rem}.rules dt{font-family:var(--display);color:var(--marigold);margin-top:.5rem;font-size:1.5rem}.resuming{min-height:100dvh;padding:var(--gutter);place-items:center;font-size:1.25rem;display:grid}.screen{flex-direction:column;min-height:100dvh;display:flex;position:relative}.content{padding:1rem var(--gutter) 1.5rem;flex-direction:column;flex:1;gap:1rem;display:flex}.bar{padding:calc(env(safe-area-inset-top) + .75rem) var(--gutter) 0;font-family:var(--display);justify-content:space-between;align-items:baseline;font-size:1.5rem;display:flex}.timer{font-variant-numeric:tabular-nums;font-size:2rem}.timer.urgent{color:var(--crimson)}.timer.big{font-family:var(--display);align-self:flex-start;font-size:clamp(6rem,32vw,9rem);line-height:1}body[data-time=night] .timer.urgent{color:#ff6f8f}.prompt{font-family:var(--display);font-size:clamp(2.75rem,13vw,3.75rem);font-weight:400;line-height:1.15}.action{z-index:2;width:100%;min-height:calc(4.5rem + env(safe-area-inset-bottom));padding:.5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom));font-family:var(--display);text-align:center;background:var(--accent);color:var(--on-accent);font-size:1.75rem;position:sticky;bottom:0}.action:disabled{background:var(--bg);color:var(--muted);box-shadow:inset 0 2px 0 var(--line)}.action.waiting{background:var(--bg);color:var(--muted);box-shadow:inset 0 2px 0 var(--line);place-items:center;font-size:1.25rem;display:grid}.text-button{min-height:2.75rem;color:var(--muted);align-self:flex-start;font-weight:600;text-decoration:underline}.cast{flex-wrap:wrap;gap:.25rem 1.25rem;display:flex}.picker,.lobby-cast{gap:.5rem}.credit{max-width:100%;min-height:3.25rem;font-family:var(--display);overflow-wrap:anywhere;align-items:center;gap:.5rem;font-size:1.625rem;line-height:1.2;display:inline-flex}.credit small{font-family:var(--body);color:var(--muted);font-size:.8125rem;font-weight:600}.credit.out>span{opacity:.6;text-decoration:line-through;text-decoration-thickness:3px}.offline-player>span{opacity:.55}.picker{padding:0 var(--gutter) 1rem}.pick{border:2px solid var(--line);border-radius:4px;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;min-height:3.5rem;padding:.25rem .875rem}.pick[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.pick[aria-pressed=true] small{color:inherit}.pick:disabled:not([aria-pressed=true]){opacity:.45}.pick.skip{border-style:dashed}.lobby-cast .credit{border:2px solid var(--line);border-radius:4px;padding-inline:.75rem}.remove{width:2.75rem;height:2.75rem;font-family:var(--body);color:var(--muted);margin-inline-end:-.625rem;font-size:1.5rem;line-height:1}.room-code{padding-top:env(safe-area-inset-top);justify-content:space-between;align-items:center;gap:.75rem;display:flex}.room-entry{flex-direction:column;flex-shrink:0;align-items:flex-start;gap:.5rem;display:flex}.qr{aspect-ratio:1;border-radius:4px;flex:0 9.5rem;min-width:6rem;padding:0;overflow:hidden}.qr svg,.qr-large svg{width:100%;display:block}.qr-large{text-align:center;width:min(100vw - 2rem,28rem);color:var(--fg);background:var(--bg);border:2px solid var(--line);border-radius:4px;margin:auto;padding:1rem}.qr-large::backdrop{background:#000000bf}.code{font-family:var(--display);color:var(--marigold);font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text;font-size:clamp(4.5rem,24vw,6.5rem);line-height:1.1}.segments{border:2px solid var(--line);border-radius:4px;grid-template-columns:repeat(4,1fr);display:grid}.segments button{min-height:3rem;font-weight:600}.segments button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.hold{touch-action:none;-webkit-touch-callout:none;text-align:start;border:2px dashed var(--line);border-radius:4px;width:100%;display:block}.hold-card{border:0;flex:1;min-height:19rem;display:grid}.card-face{border-radius:4px;flex-direction:column;animation:.16s ease-out card-flip;display:flex}.card-front{padding:1.25rem}.card-back{text-align:center;color:var(--cream);background:var(--indigo-raised);outline:2px solid var(--marigold);outline-offset:-.625rem;justify-content:center;align-items:center;gap:1rem;padding:1.75rem}.card-moon{background:var(--marigold);border-radius:50%;width:5.5rem;height:5.5rem}.card-logo{font-family:var(--display);font-size:clamp(3.25rem,17vw,4.75rem);line-height:1.1}@keyframes card-flip{0%{transform:scaleX(0)}}.hold-strip{bottom:calc(4.75rem + env(safe-area-inset-bottom));z-index:1;min-height:3.5rem;color:var(--muted);background:var(--bg);margin-top:auto;padding:.75rem;font-weight:600;position:sticky}.hold-panel{bottom:calc(9rem + env(safe-area-inset-bottom));z-index:4;width:min(100vw - var(--gutter) * 2, 30rem - var(--gutter) * 2);pointer-events:none;border-radius:4px;max-height:calc(100dvh - 10rem);padding:1rem;position:fixed;left:50%;overflow:hidden;transform:translate(-50%)}[data-role=citizen]{background:var(--teal);color:var(--cream)}[data-role=mafia]{background:var(--crimson);color:var(--cream)}[data-role=doctor]{background:var(--cream);color:var(--indigo)}[data-role=detective]{color:var(--indigo);background:#ffb81c}body[data-time=day] [data-role=detective]{background:var(--indigo);color:var(--marigold)}.role-details{flex-direction:column;gap:.5rem;display:flex}.role-art{aspect-ratio:1;flex-shrink:0;width:min(52vw,12rem)}.role-name{font-family:var(--display);font-size:clamp(4.5rem,26vw,7rem);line-height:1.1}.hold-strip .role-name{font-size:2.5rem}.role-description{font-size:1.125rem;font-weight:400}.role-extra{font-weight:600}.announcement{justify-content:center;overflow-x:clip}.announce-kicker{font-size:1.25rem;font-weight:600;animation:.4s ease-out backwards announce-fade}.announce-kicker.late{animation-delay:.6s}.announce-name{font-family:var(--display);overflow-wrap:anywhere;font-size:clamp(3.75rem,21vw,6.5rem);font-weight:400;line-height:1.1;animation:.45s cubic-bezier(.2,.9,.3,1.2) .5s backwards announce-land}.announce-name.small{font-size:clamp(2.5rem,12vw,3.5rem)}.announce-name.killed,.announce-name.voted{margin-inline:calc(var(--gutter) * -2);padding:.25rem calc(var(--gutter) * 2) .5rem;transform:rotate(-1.5deg)}.announce-name.killed{background:var(--crimson);color:var(--cream)}.announce-name.voted{background:var(--indigo);color:var(--marigold)}.announce-card{border-radius:4px;align-items:center;gap:1rem;padding:.75rem 1rem;animation:.4s ease-out 1.5s backwards announce-rise;display:flex}.announce-card .role-art{width:5.5rem}.announce-role{font-family:var(--display);font-size:clamp(2.75rem,14vw,4rem);line-height:1.1}.dawn .announce-kicker{animation-delay:1s}.dawn .announce-kicker.late{animation-delay:1.8s}.dawn .announce-name{animation-delay:1.4s}.dawn .announce-card{animation-delay:2.3s}@keyframes announce-fade{0%{opacity:0}}@keyframes announce-land{0%{opacity:0;scale:1.5}}@keyframes announce-rise{0%{opacity:0;translate:0 1.5rem}}.tally{border-top:2px solid var(--line);margin-top:1rem;animation:.4s ease-out 1.9s backwards announce-fade}.tally-head{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.tally-count{font-family:var(--display);font-size:1.75rem;line-height:1.2}.tally-bar{background:var(--accent);border-radius:2px;height:.5rem;margin-bottom:.25rem}.tally li{border-bottom:2px solid var(--line);flex-direction:column;padding-block:.5rem;display:flex}.tally strong{font-family:var(--display);font-size:1.375rem;font-weight:400}.winner-poster{padding:calc(env(safe-area-inset-top) + 1.5rem) var(--gutter) 1.5rem;flex-direction:column;gap:.5rem;display:flex;overflow-x:clip}.winner-poster .role-art{width:min(58vw,14rem)}.winner{color:inherit;font-size:clamp(3.75rem,20vw,6rem);animation:.45s cubic-bezier(.2,.9,.3,1.2) backwards announce-land}.mic{flex-direction:column;font-weight:400;display:flex}.mic-next{font-size:1.25rem;font-weight:600}.mic-next.mine{background:var(--accent);color:var(--on-accent);border-radius:4px;align-self:flex-start;padding:.125rem .75rem}.mic-label{font-size:1.5rem;font-weight:600}.mic-name{font-family:var(--display);overflow-wrap:anywhere;font-size:clamp(3.75rem,19vw,6rem);line-height:1.15}.credit.speaking{background:var(--accent);color:var(--on-accent);border-radius:4px;padding-inline:.625rem}.credit.spoken>span{opacity:.5}.final-cast li{border-bottom:2px solid var(--line);justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.375rem;display:flex}.final-name{font-family:var(--display);overflow-wrap:anywhere;font-size:1.625rem;line-height:1.25}.final-role{flex-shrink:0;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:600;display:inline-flex}.role-chip{border-radius:4px;flex-shrink:0;width:2.25rem;height:2.25rem;padding:.125rem;display:block}.role-chip .role-art{width:100%;display:block}.final-cast .out .final-name{text-decoration:line-through;text-decoration-thickness:3px}.recap{flex-direction:column;gap:1rem;margin-top:.5rem;display:flex}.recap h2{font-family:var(--display);margin:0;font-size:2.25rem;font-weight:400;line-height:1.2}.recap h3{font-size:1.125rem;font-weight:600}.recap dl>div{border-bottom:2px solid var(--line);justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.25rem;display:flex}.recap dt{color:var(--muted);flex-shrink:0;font-size:.9375rem}.recap dd{text-align:end;overflow-wrap:anywhere;margin:0;font-weight:600}.ghost{padding-block:2rem}.vote-meter{flex-direction:column;gap:.75rem;display:flex}.vote-count{font-size:1.25rem;font-weight:600}.vote-count strong{font-family:var(--display);font-size:clamp(4.5rem,24vw,6.5rem);font-weight:400;line-height:1}.vote-dots{flex-wrap:wrap;gap:.5rem;display:flex}.vote-dot{border:2px solid var(--fg);border-radius:50%;width:1.25rem;height:1.25rem}.vote-dot.filled{background:var(--fg);animation:.25s cubic-bezier(.2,.9,.3,1.4) vote-pop}@keyframes vote-pop{0%{transform:scale(.4)}}.stats{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 1.5rem) var(--gutter) 2rem;flex-direction:column;align-items:stretch;gap:1.75rem;display:flex}.stats>.button{align-self:flex-start}.stats-login{flex-direction:column;gap:1rem;display:flex}.stat-hero{flex-direction:column;display:flex}.stat-hero strong{font-family:var(--display);color:var(--marigold);font-size:clamp(6rem,32vw,9rem);font-weight:400;line-height:1}.stats h2{font-family:var(--display);margin-bottom:.75rem;font-size:1.75rem;font-weight:400}.stat-summary{grid-template-columns:1fr 1fr;gap:.75rem 1rem;margin-bottom:1.25rem;display:grid}.stat-summary dt{color:var(--muted);font-size:.9375rem}.stat-summary dd{font-family:var(--display);margin:0;font-size:2rem;line-height:1.2}.stat-rows{flex-direction:column;gap:.75rem;margin-bottom:.75rem;display:flex}.stat-rows>li:not(.stat-day){flex-direction:column;gap:.25rem;display:flex}.stat-row-head{justify-content:space-between;gap:1rem;font-size:.9375rem;display:flex}.stat-track{background:var(--indigo-raised);border-radius:4px;height:.625rem;display:block;overflow:hidden}.stat-fill{background:var(--marigold);border-radius:4px;height:100%;display:block}.stat-day{grid-template-columns:3.25rem 1fr 2rem;align-items:center;gap:.75rem;font-size:.9375rem;display:grid}.stat-day-count{text-align:end;font-weight:600}.stat-warning{color:var(--marigold);font-weight:600}.menu-button{top:calc(env(safe-area-inset-top) + .5rem);z-index:3;width:3rem;height:2.75rem;color:var(--muted);place-items:center;display:grid;position:absolute;left:50%;transform:translate(-50%)}.menu-button svg{fill:currentColor;width:1.5rem}.menu{width:min(100vw - 2rem,28rem);max-height:85dvh;color:var(--fg);background:var(--bg);border:2px solid var(--line);border-radius:4px;margin:auto;padding:1.25rem}.menu::backdrop{background:#0009}.menu[open]{flex-direction:column;gap:1.25rem;display:flex}.menu section{flex-direction:column;align-items:flex-start;gap:.5rem;display:flex}.menu h2{font-family:var(--display);margin:0;font-size:1.5rem;font-weight:400}.menu p{font-size:.9375rem}.menu-players{align-self:stretch}.menu-players li{border-bottom:2px solid var(--line);justify-content:space-between;align-items:center;gap:.75rem;padding-block:.375rem;display:flex}.menu-name{overflow-wrap:anywhere;flex-direction:column;font-weight:600;display:flex}.menu-name small{color:var(--muted);font-weight:400}.button.danger{background:var(--crimson);color:var(--cream);flex-shrink:0}.menu-players .button{flex-shrink:0}.night-wait .hold-strip{margin-top:0}.night-scene{width:calc(100% + var(--gutter) * 2);min-height:14rem;margin-inline:calc(var(--gutter) * -1);flex:1 1 0;align-self:stretch;margin-bottom:-1.5rem}.offline{z-index:5;padding:calc(env(safe-area-inset-top) + .375rem) var(--gutter) .375rem;background:var(--crimson);color:var(--cream);font-size:.9375rem;font-weight:600;position:sticky;top:0}.toast{z-index:10;inset-inline:1rem;bottom:calc(env(safe-area-inset-bottom) + 5.5rem);background:var(--cream);max-width:28rem;color:var(--indigo);box-shadow:0 0 0 2px var(--indigo);border-radius:4px;margin-inline:auto;padding:.75rem 1rem;font-weight:600;position:fixed}.sunrise{z-index:0;background:var(--marigold);clip-path:circle(0 at 50% 100%);animation:1.6s cubic-bezier(.3,0,.3,1) forwards sunrise;position:fixed;inset:0}@keyframes sunrise{to{clip-path:circle(150vmax at 50% 100%)}}.after-sunrise{animation:1.6s linear both after-sunrise}@keyframes after-sunrise{0%,55%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
