@font-face{font-family:MM;src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:MM;src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700 1000;font-style:normal;font-display:swap}
:root{color-scheme:dark;background:#080c13;color:#f4f8ff;font-family:MM,Tahoma,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{min-height:100vh;min-height:100dvh}
main{width:100%;height:100%;padding:max(3vh,env(safe-area-inset-top)) 5vw max(2.5vh,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#brand{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;font-size:clamp(17px,2vw,32px);line-height:1.4;letter-spacing:.13em;color:#e5c77e;direction:ltr}
#brandLogo{display:block;width:clamp(120px,18vw,280px);height:clamp(120px,18vw,280px);max-width:24vh;max-height:24vh;object-fit:contain;border:0;border-radius:0;box-shadow:none}
#brand span{display:block;font-size:clamp(10px,1vw,16px);letter-spacing:.22em;margin-top:5px;color:#b9a675}
section{width:100%;margin:auto 0}section[hidden]{display:none}
h1{margin:.35em 0;font-size:clamp(20px,min(3vw,4vh),42px);font-weight:400}
#code{font-size:clamp(48px,min(13vw,21vh),220px);line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:#e5c77e}
#digits{font-family:inherit;font-size:min(27vw,40vh);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;color:#a5f0ee}
#digits.low{color:#ffad55}#digits.done{color:#ff6975}
p{margin:.4em 0;font-size:clamp(14px,min(2.2vw,3vh),30px);line-height:1.5}.small,#network{font-size:clamp(13px,min(1.6vw,2.2vh),22px);color:#bcc7d6}
#state{font-size:clamp(17px,2vw,30px);margin:.6em 0 0;min-height:1.5em}#network{min-height:1.8em;margin:0 0 8px}
button{border:1px solid #586273;border-radius:12px;background:#131d2c;color:#e3eaf5;font:inherit;font-size:clamp(15px,1.25vw,22px);padding:10px 22px;min-height:44px;cursor:pointer}button:focus-visible{outline:3px solid #e5c77e}
:fullscreen #fullscreen{display:none}
@media(max-width:600px) and (orientation:portrait){main{padding-inline:6vw}#brand{gap:14px;font-size:19px}#brand span{font-size:11px}#fullscreen{min-width:150px}#pairing .small{max-width:28em;margin:.5em auto}}
@media(max-height:480px){main{padding:2vh 4vw}#brand{gap:4px;font-size:16px}#brand span{font-size:10px;margin-top:2px}#brandLogo{width:18vh;height:18vh;max-height:none;max-width:none}button{min-height:36px;padding:5px 16px}#code{font-size:min(13vw,20vh)}#network{margin:0}#state{margin:.2em 0 0;font-size:16px}}
@media(max-height:360px){#brand{flex-direction:row;gap:12px;font-size:14px}#brandLogo{width:14vh;height:14vh}#code{font-size:18vh}#network{min-height:1.2em}}

.victory{position:relative;isolation:isolate;--win:#eac373;padding:3vh 2vw;color:var(--win)}.victory.mafia{--win:#ff7f83}.victory.citizen{--win:#75e1d4}.victory>*{position:relative;z-index:1}.victory #winnerEnglish{font-size:clamp(13px,2vw,28px);letter-spacing:.26em;color:var(--win)}.victory #winnerTitle{font-size:clamp(32px,min(7vw,10vh),120px);font-weight:800;color:#fff7ea;line-height:1.5;margin:2vh 0;text-shadow:0 0 3vw color-mix(in srgb,var(--win),transparent 60%)}.victoryHalo{position:absolute;inset:-8vh 10%;z-index:0;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--win),transparent 83%),transparent 65%);animation:victoryGlow 6s ease-in-out infinite;pointer-events:none}.victoryStars{font-size:clamp(25px,4vw,70px);letter-spacing:.8em;padding-inline-start:.8em;animation:victoryStars 8s ease-in-out infinite}.victoryLine{height:2px;width:60%;margin:3vh auto;background:linear-gradient(90deg,transparent,var(--win),transparent);animation:victoryGlow 6s ease-in-out infinite}.victorySignature{font-size:clamp(12px,1.5vw,22px);letter-spacing:.4em;opacity:.7}@keyframes victoryGlow{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}@keyframes victoryStars{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-1vh)}}@media(prefers-reduced-motion:reduce){.victoryHalo,.victoryStars,.victoryLine{animation:none}}@media(max-height:420px){.victory{padding:0}.victory #winnerTitle{margin:1vh 0}.victoryLine{margin:1vh auto}.victoryStars{font-size:4vh}}

@media(max-height:640px) and (orientation:portrait){#brandLogo{width:104px;height:104px}#brand{gap:8px;font-size:17px}.victory{padding:1vh 1vw}.victory #winnerTitle{font-size:clamp(26px,8vw,32px)}.victoryStars{font-size:23px}.victoryLine{margin:2vh auto}}

/* Corner fireworks stay behind the public logo and winner text. */
main{isolation:isolate}main>#brand,main>section,main>#network,main>#fullscreen{position:relative;z-index:1}
#celebration{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}#celebration[hidden]{display:none}
.victoryFlash{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 45%,#fff7dc99,transparent 75%)}
.victoryEnter .victoryFlash{animation:victoryArrivalLight .9s ease-out both}.victoryEnter #winnerTitle{animation:victoryImpact .85s cubic-bezier(.16,1,.3,1) both}
.victory.mafia .victoryHalo{background:radial-gradient(ellipse,#ef47584a,#d7983120 45%,transparent 70%)}.victory.citizen .victoryHalo{background:radial-gradient(ellipse,#4cebdc44,#5799ff20 45%,transparent 70%)}
.victoryHalo,.victoryLine{animation-duration:2.6s}.victoryStars{animation-duration:2.4s}
@keyframes victoryArrivalLight{0%{opacity:0}12%{opacity:.68}100%{opacity:0}}
@keyframes victoryImpact{0%{opacity:0;transform:scale(.84) translateY(18px)}48%{opacity:1;transform:scale(1.045) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
@media(prefers-reduced-motion:reduce){.victoryEnter .victoryFlash,.victoryEnter #winnerTitle,.victoryHalo,.victoryLine,.victoryStars{animation:none}.victoryFlash{display:none}}

#messageCard{overflow-wrap:anywhere;white-space:pre-wrap;color:#fff5db}#messageText{margin:0;line-height:1.7}.messageBanner{margin:0 0 2vh;padding:1.5vh 2vw;border:1px solid #74613a;border-radius:14px;background:#19170fe8}.messageBanner #messageText{font-size:clamp(17px,2.7vw,38px)}.messageFull{margin:auto 0;padding:3vh 2vw}.messageFull #messageText{font-size:clamp(25px,min(5vw,6vh),76px);font-weight:700}

#messageCard.messageBanner{position:fixed;left:5vw;right:5vw;bottom:max(12vh,85px);width:auto;margin:0;padding:10px 16px;background:#19170ff5}#messageCard.messageBanner #messageText{font-size:clamp(13px,min(2.3vw,2.6vh),28px)}body.hasDisplayBanner #state{visibility:hidden}@media(max-height:640px) and (orientation:portrait){body.hasDisplayFull #brandLogo{width:82px;height:82px}body.hasDisplayFull .messageFull #messageText{font-size:22px}}

/* Public game stages reuse the same TV, without private night presentation. */
.gameDisplay #brand{flex-direction:row;gap:16px;font-size:clamp(14px,1.5vw,25px)}.gameDisplay #brandLogo{width:clamp(60px,9vw,130px);height:clamp(60px,9vw,130px);max-height:14vh}.gameDisplay #digits{font-size:min(24vw,28vh)}#gameDay,#gameRound{color:#c6b27d;font-size:clamp(14px,2vw,26px)}#gameLabel{font-size:clamp(22px,3vw,48px);color:#e8d5a7}#gameSpeaker{font-size:clamp(28px,5vw,76px);line-height:1.4;margin:.3em 0;color:#f9f6ed;overflow-wrap:anywhere}#gamePeople{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:1000px;margin:.6em auto}#gamePeople span{padding:.25em .7em;border-radius:12px;background:#1a2330;color:#b9c4d3;font-size:clamp(14px,2.2vw,30px)}#gamePeople .active{background:#193f3c;color:#99eee1;box-shadow:inset 0 0 0 1px #4fb8ac}@media(max-height:480px){.gameDisplay #brandLogo{width:10vh;height:10vh}.gameDisplay #digits{font-size:24vh}#gameLabel{font-size:4vh}#gameSpeaker{font-size:6vh}#gamePeople{margin:.2em auto}#gamePeople span{font-size:3vh}}
.gameDisplay main{justify-content:flex-start}.gameDisplay #brandLogo{width:10vh;height:10vh;max-height:80px}.gameDisplay #timer:not([hidden]){flex:1;min-height:0;margin:0;display:flex;flex-direction:column;justify-content:center}.gameDisplay #digits{font-size:min(24vw,26vh)}.gameDisplay #gameLabel{font-size:clamp(20px,3.8vh,42px);margin:.12em 0}.gameDisplay #gameSpeaker{font-size:clamp(25px,6vh,68px);margin:.12em 0}.gameDisplay #gamePeople{margin:.3em auto}.gameDisplay #gamePeople span{font-size:clamp(14px,3vh,28px)}.gameDisplay #gameDay,.gameDisplay #gameRound{margin:.1em 0;font-size:clamp(14px,2.7vh,24px)}.gameDisplay #state{margin:.2em 0 0;font-size:clamp(14px,2.8vh,24px)}

#gameAnnouncement{font-size:clamp(21px,min(3.8vw,5vh),64px);line-height:1.9;margin:2vh auto;max-width:1100px;max-height:52vh;overflow:auto;overflow-wrap:anywhere;color:#f5ead0;text-wrap:balance}.announcementDisplay #gameSpeaker:empty,.announcementDisplay #gameRound:empty{display:none}.announcementDisplay #gameLabel{color:#d9bd79}.announcementDisplay.denseAnnouncement #gameAnnouncement{font-size:clamp(15px,min(2.5vw,3vh),32px);line-height:1.8}@media(max-width:600px){#gameAnnouncement{font-size:clamp(20px,5.5vw,30px);line-height:2}.announcementDisplay.denseAnnouncement #gameAnnouncement{font-size:17px}}

/* Large landscape displays: triple the compact in-game logo; leave phones compact. */
@media(min-width:800px) and (min-height:500px) and (orientation:landscape){
 .gameDisplay #brandLogo{width:min(30vh,240px);height:min(30vh,240px);max-width:none;max-height:none}
}
#gameAnnouncement .displayPlayerName,.gameDisplay #gameSpeaker,.gameDisplay #gamePeople span{color:#83e9df;font-weight:700}

/* Clear public phase hierarchy; timer digits and announcement body stay unchanged. */
.gameDisplay #gameDay{font-size:clamp(22px,3.8vh,44px);font-weight:700;line-height:1.5;color:#f3ce7c}
.gameDisplay #gameLabel{font-size:clamp(28px,5.5vh,66px);font-weight:700;line-height:1.55;color:#fff0d4}
.gameDisplay.nightDisplay #gameLabel{color:#b6d2ff}
@media(max-height:480px){.gameDisplay #gameDay{font-size:clamp(17px,4vh,24px)}.gameDisplay #gameLabel{font-size:clamp(23px,5.5vh,32px)}}

/* Public phase illustrations and results. No role artwork or game controls. */
[hidden]{display:none!important}
#phaseVisual svg{width:clamp(60px,12vh,150px);height:clamp(60px,12vh,150px);color:#eac476;margin:1vh auto}
.dayTransition{background:radial-gradient(ellipse at center,#40321b,#080c13 75%)}.nightTransition{background:radial-gradient(ellipse at center,#172643,#080c13 75%)}.nightTransition #phaseVisual svg{color:#b6d2ff}
.chaosDisplay{background:radial-gradient(ellipse at 50% 55%,#342345,#080c13 80%)}.chaosDisplay #gameLabel{color:#e1b6ff}.chaosDisplay #gamePeople{max-width:1100px}
.chaosChoice{display:flex;justify-content:center;align-items:center;gap:2vw;width:100%;padding:.5vh 1vw;color:#91eee1;font-size:clamp(22px,4.5vh,50px)}.chaosChoice .choiceArrow{background:transparent!important;color:#eac476!important}
.chaosDisplay #brandLogo{width:18vh;height:18vh}.chaosDisplay #gamePeople{gap:.6vh 1vw}.chaosDisplay #gamePeople>span{font-size:clamp(20px,3.5vh,38px)}.chaosDisplay .chaosChoice{font-size:clamp(20px,3.8vh,42px);padding:.2vh 1vw}.chaosDisplay .chaosChoice span{padding:0 .5em!important;border:0!important;font-size:inherit!important}
.gameDisplay #gamePeople span{padding:.4em 1em;background:linear-gradient(145deg,#1b2b37,#101c26);border:1px solid #37515d;font-size:clamp(20px,4vh,42px)}.gameDisplay #gamePeople .active{background:#163e38;border-color:#73debd;color:#b1ffe3}
.nightExitCards{display:flex;justify-content:center;flex-wrap:wrap;gap:2vw}.nightExitCard{flex:1 1 230px;max-width:650px;padding:1.5vh 2vw;background:linear-gradient(150deg,#301b25,#151a25);border:1px solid #90505b;border-radius:18px}.nightExitCard h2{font-size:clamp(28px,6vh,68px);line-height:1.4;margin:0 0 1vh}.exitCauses{display:flex;flex-wrap:wrap;justify-content:center;gap:1vh 2vw}.exitCause{display:flex;align-items:center;gap:.5em;font-size:clamp(18px,3vh,34px)}.exitCause svg{width:1.5em;height:1.5em;flex-shrink:0}.mafiaCause{color:#ff9aa1}.sniperCause{color:#9ee9ec}.nightExitCard .exitOutcome{font-size:clamp(18px,3vh,34px)}.closedWill{color:#f7bf71;font-weight:700}.sniperPraise{color:#9ce6bf}.nightExitCard p{margin:.5vh 0}
#voteResultOverlay{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5vw;text-align:center;background:#301019f5;pointer-events:none}#voteResultOverlay.noticeStay{background:#0e3228f5}#voteResultOverlay h1{font-size:clamp(36px,9vh,110px);font-weight:700;color:#fff3df;overflow-wrap:anywhere}#voteResultOverlay p{font-size:clamp(28px,6vh,72px);color:#ffabb1}#voteResultOverlay.noticeStay p{color:#a0f2cb}#voteResultOverlay .noticeHint{font-size:clamp(20px,3.5vh,40px);color:#e9d8b6}
@media(max-height:500px){#phaseVisual svg{width:10vh;height:10vh}.gameDisplay #gamePeople span{font-size:clamp(17px,4vh,26px)}.nightExitCard{padding:1vh 2vw}.nightExitCard h2{font-size:6vh}}

/* Persistent public results: a clean full screen instead of a flash over the previous view. */
.stayAnnouncement{background:radial-gradient(ellipse at center,#14513c,#06150f 78%)}
.stayAnnouncement #gameLabel{color:#a9f5cf}
.stayAnnouncement #gameAnnouncement{padding:3vh 4vw;border:2px solid #3fbf8a;border-radius:24px;background:#0b2e22d9;font-size:clamp(24px,5vh,60px);line-height:1.6}
.stayAnnouncement #gameAnnouncement .displayPlayerName{color:#d4ffe9}
.expelAnnouncement{background:radial-gradient(ellipse at center,#4a1820,#12070a 78%)}
.expelAnnouncement #gameLabel{color:#ffb4b4}
.expelAnnouncement #gameAnnouncement{padding:3vh 4vw;border:2px solid #b44a55;border-radius:24px;background:#2c0e14d9;font-size:clamp(24px,5vh,60px);line-height:1.6}
.expelAnnouncement #gameAnnouncement .displayPlayerName{color:#ffd9d9}
.dayStartAnnouncement #gameAnnouncement{max-width:1100px;margin:2vh auto 0;padding:3vh 4vw;border:1px solid #8a6d2f;border-radius:24px;background:linear-gradient(150deg,#2a2112,#12100b);font-size:clamp(24px,4.6vh,56px);line-height:1.7}
.dayStartAnnouncement #gameAnnouncement .displayPlayerName{font-size:1.3em;color:#ffd77a}
.defendersDisplay #gamePeople{gap:2vh 2vw;margin-top:2vh}
.defendersDisplay #gamePeople span,.gameDisplay.defendersDisplay #gamePeople span{padding:1.4vh 3vw;border:2px solid #b44a55;border-radius:20px;background:linear-gradient(150deg,#3a141b,#160a0d);color:#ffe1e1;font-size:clamp(28px,6vh,72px);font-weight:700}
/* v819 — TV messages at about twice the size; long texts step down so they still fit. */
.messageFull #messageText{font-size:clamp(50px,min(10vw,12vh),152px)}
#messageCard.messageBanner{padding:2vh 2.5vw;border-width:2px}
#messageCard.messageBanner #messageText{font-size:clamp(26px,min(4.6vw,5.2vh),56px);font-weight:700;line-height:1.5}
.messageFull.messageLong #messageText{font-size:clamp(34px,min(6.5vw,8vh),104px)}
.messageFull.messageVeryLong #messageText{font-size:clamp(25px,min(5vw,6vh),76px)}
#messageCard.messageBanner.messageLong #messageText{font-size:clamp(20px,min(3.4vw,3.9vh),42px)}
@media(max-height:640px) and (orientation:portrait){body.hasDisplayFull .messageFull #messageText{font-size:30px}}
/* Make room for the larger banner so it never covers the timer digits. */
body.hasDisplayBanner #digits{font-size:min(20vw,28vh)}
body.hasDisplayBanner.gameDisplay #digits{font-size:min(16vw,18vh)}
body.hasDisplayBanner #timer{padding-bottom:calc(max(12vh,85px) + 16vh)}
/* v823 — full-screen message templates and effects. Timer is hidden while a full message shows. */
#messageEffects{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#messageEffects[hidden]{display:none}
#messageCard{position:relative;z-index:1}
#messageCard [hidden]{display:none!important}
#messageArt img{width:min(26vh,30vw);height:min(26vh,30vw);border-radius:50%;box-shadow:0 0 0 2px #b8892e66,0 1.5vh 6vh #000a}
#messageKicker{margin:0 0 1vh;font-size:clamp(20px,3.6vh,44px);color:#ffb4a8;font-weight:700}
#messageTitle{margin:0 0 1.5vh;font-size:clamp(40px,min(8vw,10vh),130px);line-height:1.35;color:#ffd77a;text-shadow:0 0 4vh #d8ae5255}
.messageFull:not(.tpl-text) #messageText{font-size:clamp(30px,min(5.6vw,7vh),96px);color:#fff5db}
.messageFull.tpl-birthday #messageTitle{font-size:clamp(46px,min(9vw,11vh),150px);background:linear-gradient(90deg,#ffd77a,#ff8fb1,#7fe7ff,#ffd77a);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:birthdayShine 4s linear infinite}
.messageFull.tpl-birthday #messageText{font-size:clamp(44px,min(8vw,10vh),140px);font-weight:700;color:#fff}
@keyframes birthdayShine{to{background-position:200% 0}}
#messageNames{list-style:none;margin:2vh auto 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4vh 3vw;max-width:1500px;counter-reset:seat;text-align:right;direction:rtl}
#messageNames li{counter-increment:seat;display:flex;align-items:center;gap:1.5vw;padding:1vh 2vw;border:1px solid #6e5725;border-radius:2vh;background:#17140fcc;font-size:clamp(22px,min(3.4vw,4.4vh),58px);font-weight:700;color:#fff5db}
#messageNames li::before{content:counter(seat);display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;border-radius:50%;background:#2a2218;color:#ffd77a;font-size:.8em}
#messageNames.manyNames{grid-template-columns:repeat(3,minmax(0,1fr))}
#messageStats{list-style:none;margin:2vh auto 0;padding:0;display:grid;gap:1.6vh;max-width:1300px;counter-reset:rank;direction:rtl}
#messageStats li{counter-increment:rank;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2vw;padding:1.4vh 2.4vw;border:1px solid #6e5725;border-radius:2.4vh;background:#17140fcc;font-size:clamp(24px,min(3.8vw,5vh),66px);color:#fff5db;text-align:right}
#messageStats li::before{content:counter(rank,persian);display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;background:#2a2218;color:#ffd77a;font-weight:800}
#messageStats li:nth-child(1){border-color:#f1d58a;background:linear-gradient(90deg,#3a2c12cc,#17140fcc);font-size:clamp(30px,min(4.6vw,6vh),80px)}
#messageStats li:nth-child(1)::before{background:linear-gradient(180deg,#f7df9c,#d8ae52);color:#140f06}
#messageStats li:nth-child(2)::before{background:#c9ced6;color:#15171a}
#messageStats li:nth-child(3)::before{background:#c7894f;color:#1a0f06}
#messageStats b{font-weight:800}
#messageStats span{color:#ffd77a;font-weight:700;direction:rtl}
#messageStats.loyalCard li{grid-template-columns:1fr;justify-items:center;text-align:center;padding:3vh 4vw;row-gap:.5vh;line-height:1.3;font-size:clamp(44px,min(8vw,11vh),140px)}
#messageStats.loyalCard li::before{display:none}
#messageStats.loyalCard span{font-size:.45em}
#messageNames.manyNames li{font-size:clamp(18px,min(2.6vw,3.4vh),44px);padding:.8vh 1.4vw}
#messageCountdown{margin:1vh 0;font-size:clamp(70px,min(18vw,24vh),300px);font-weight:700;line-height:1.1;color:#a5f0ee;font-variant-numeric:tabular-nums}
#messageCountdown.done{color:#ff8a7a}
.fxGlow #messageTitle,.fxGlow #messageText{animation:messageGlow 2.6s ease-in-out infinite}
.fxGlow #messageArt img{animation:messageGlowRing 2.6s ease-in-out infinite}
@keyframes messageGlow{0%,100%{text-shadow:0 0 2vh #d8ae5233}50%{text-shadow:0 0 6vh #ffd77acc,0 0 1.5vh #fff3}}
@keyframes messageGlowRing{0%,100%{box-shadow:0 0 0 2px #b8892e66,0 0 3vh #d8ae5233}50%{box-shadow:0 0 0 3px #ffd77a,0 0 9vh #ffd77aaa}}
@media(prefers-reduced-motion:reduce){.fxGlow #messageTitle,.fxGlow #messageText,.fxGlow #messageArt img,.messageFull.tpl-birthday #messageTitle{animation:none}}
body.messageHidesBrand #brand{display:none}
#messageNames li::before{content:counter(seat,persian)}
#messageNames.manyNames{gap:1.2vh 2vw}
#messageNames.manyNames li{font-size:clamp(18px,min(2.5vw,3.6vh),46px);padding:.9vh 1.3vw}