@font-face{font-family:Saye Arabic;src:url("noto-sans-arabic.ttf") format("truetype");font-display:swap}
:root{--bg:#10121c;--panel:#171b2a;--line:#343c53;--red:#f03e56;--cyan:#52d6db}
body{font-family:Vazirmatn,"Saye Arabic",Tahoma,sans-serif;background:#10121c;color:#f7f7fa}
.shell{max-width:540px}
.topbar{border-bottom:1px solid #2b3144;margin-bottom:16px}
.brand{color:#fff;text-decoration:none}
.brand-mark{box-shadow:none;background:#aa243c}
.brand-mark svg{width:27px}
.hero{min-height:385px;border-radius:16px;padding-top:200px;background:linear-gradient(0deg,#101321 14%,#101321ee 40%,transparent 75%),url("hero.webp") center 36%/cover no-repeat}
.panel,.feature,.feature:nth-child(n),.stat,.vote-choice,.input,.select,.floating{background:#191e2e;color:#f7f7fa;border-color:#343d54;box-shadow:none}
.btn{text-decoration:none;line-height:1.7}
.btn.primary,.btn.cyan{background:#c52142;color:#fff;box-shadow:none}
.btn.ghost{background:#171b2a}
.role-card,.role-card.spy{background:#191e2e;border-color:#47526e}
.role-card.spy{border-color:#a94659}
.role-card:not(.spy) .role-icon{color:#52d6db}
.bottom{background:#141827;border-color:#343d54}
.line-icon{width:22px;height:22px;vertical-align:middle}
.role-icon .line-icon{width:50px;height:50px}
.notice{color:#ffc7ce;overflow-wrap:anywhere}
.notice:empty{display:none}
.chatlog{max-height:48dvh;overflow:auto;overflow-wrap:anywhere}
.chatlog p{margin:.4rem 0;padding:.45rem;border-bottom:1px solid #31394d}
.chatlog b{color:#7be0e3;margin-inline-end:.5em}
.roster{list-style:none;padding:0}
.roster li{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;border-bottom:1px solid #363e53}
details+details{border-top:1px solid #343d54;margin-top:.85rem;padding-top:.75rem}
summary{cursor:pointer;font-weight:700}
.online-options{display:grid;gap:10px}
@media(min-width:850px){body:has(#online) .shell{max-width:770px}.online-options{grid-template-columns:1fr 1fr}.shell:has(.hero){max-width:920px}}
.hero-actions{display:grid;gap:.6rem;max-width:440px}
.attendance{margin:0 0 1rem;border:1px solid #343d54;border-radius:13px;padding:12px;display:flex;flex-wrap:wrap;gap:12px}
.attendance label{font-size:.9rem}
.shell{width:min(100%,520px);padding-inline:20px}
.shell:has(.hero){width:min(100%,520px)}
.topbar{min-height:66px}
.hero{min-height:0;padding:0 0 14px;background:none;border:0;box-shadow:none;border-radius:13px}
.hero::before{content:"";position:static;display:block;width:100%;aspect-ratio:496/344;background:linear-gradient(0deg,#10121c 0%,transparent 21%),url("hero.webp") center/cover}
.hero h1{font-size:clamp(1.35rem,5.2vw,1.85rem);margin:0 0 14px;text-align:center}
.hero-actions{margin-inline:auto;gap:13px;max-width:none}
.btn{border-radius:14px;font-weight:800;min-height:44px}
.btn.primary{background:linear-gradient(100deg,#e92d51,#de2343);color:#fff}
.group-list{margin:14px 0}
.team-row{color:#fff;width:100%;display:flex;align-items:center;text-align:start;gap:12px;cursor:pointer}
.team-row strong,.team-row small{display:block}
.team-row small{color:#b4bed1}
.group-avatars{display:flex;flex-wrap:wrap;gap:4px;margin-inline-start:auto}
.illustrated.role-card{padding:0;overflow:hidden;margin:24px 0;background:#171b28}
.illustrated.role-card>img{width:100%;display:block;aspect-ratio:352/206;object-fit:cover}
.illustrated .role-body{padding:16px 22px 22px}
.illustrated h1,.illustrated h2{font-size:clamp(1.55rem,6vw,2rem);margin:12px 0}
.illustrated>button{margin-bottom:16px}
.secret-word{font-size:1.35rem;font-weight:800}
.handoff,.discussion{display:grid;text-align:center;justify-items:center;gap:14px;padding:24px 0}
.handoff h1,.discussion h1{font-size:1.55rem;margin:0}
.handoff p,.discussion p{margin:0;color:#bcc6da}
.handoff-mark{display:flex;align-items:center;gap:14px;margin:34px 0 16px;color:#6be1df}
.handoff-mark .avatar{border:3px solid #db3450}
.handoff-mark svg,.discussion .line-icon{width:40px;height:40px}
.round-clock{width:min(65vw,245px);aspect-ratio:1;display:grid;place-items:center;border:10px solid #3b465d;border-top-color:#56d6dc;border-right-color:#56d6dc;border-radius:50%;font-size:clamp(2.3rem,9vw,3.5rem);font-weight:900;font-variant-numeric:tabular-nums}
.section-banner,#app:is([data-view=vote],[data-view=tie],[data-view=guess],[data-view=result])::before,#online:is([data-view=vote],[data-view=guess],[data-view=result])::before{display:block;border-radius:13px;background:#171a29 url("banner-finale.webp") center/cover}
#app:is([data-view=vote],[data-view=tie],[data-view=guess],[data-view=result])::before,#online:is([data-view=vote],[data-view=guess],[data-view=result])::before{content:"";aspect-ratio:392/133;margin-bottom:18px}
.section-banner{padding:26px 15px;margin-bottom:15px;background-image:linear-gradient(90deg,#101321aa,#101321f5 65%),url("banner-library.webp")}
.vote-choice{min-height:58px;border-radius:12px}
.vote-choice.selected{background:#482133;border-color:#d34b65}
.bottom:empty{display:none}
@media(min-width:850px){body:has(#online) .shell{width:min(100%,770px)}}