@import url('fonts/fonts.css');

:root {
 color-scheme: light dark;
 --bg:#f5f1e6; --surface:#fff; --ink:#0e1b2e; --muted:#646c7a; --body-text:#454e5e;
 --gold:#b88c28; --line:#e5ddcc; --strong-line:#cebf9d; --primary:#0e1b2e; --primary-ink:#f5eddb;
 --pattern:rgba(184,140,40,.20); --danger:#a53727; --success:#13865e;
 --player-0:#2256a1; --player-1:#0b8069; --player-2:#d79a19; --player-3:#942b28; --player-4:#0b8294; --player-5:#182432;
 --tile-ink:#fff; --tile-gold:#c39a39; --shadow:0 16px 70px #0e1b2e25; --card-back:#0e1b2e;
}
@media(prefers-color-scheme:dark) {
 :root {--bg:#0e1b2e; --surface:#16263d; --ink:#f4edda; --muted:#a4afc1; --body-text:#c1cad8; --gold:#d3af59; --line:#293c56; --strong-line:#3b4d66; --primary:#d3af59; --primary-ink:#0e1b2e; --pattern:rgba(211,175,89,.14); --danger:#e57359; --success:#27b48c; --player-0:#6f8eee; --player-1:#25b48e; --player-2:#e9ab2b; --player-3:#e57359; --player-4:#39bdca; --player-5:#f4edda; --tile-ink:#0e1b2e; --tile-gold:#d3af59; --shadow:0 16px 70px #0006; --card-back:#1d3150}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,'Noto Sans Arabic',Arial,sans-serif;font-size:15px;line-height:1.5;min-height:100svh;isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--pattern);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 12h32v32H12zM28 5l23 23-23 23L5 28zM0-9l9 9-9 9-9-9zM56-9l9 9-9 9-9-9zM0 47l9 9-9 9-9-9zM56 47l9 9-9 9-9-9z'/%3E%3C/g%3E%3C/svg%3E");mask-size:56px 56px}
button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button{border:0}a{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.15;letter-spacing:-.045em;font-weight:900}h1{font-size:20px}h2{font-size:32px}h3{font-size:28px}svg{display:block}bdi{unicode-bidi:isolate}.muted{color:var(--muted);font-weight:500}.description{color:var(--body-text);font-size:15px;line-height:1.55}.gold{color:var(--gold)}.error{color:var(--danger);margin-top:12px;font-size:13px}.error:empty{display:none}
#header,.screen{max-width:520px;margin-inline:auto}.topbar{min-height:84px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.small-title{font-size:15px;letter-spacing:-.025em}.brand{display:flex;gap:10px;align-items:center}.brand strong{font-size:24px;line-height:1.15;letter-spacing:-1.2px;font-weight:900;white-space:nowrap}.brand strong span{color:var(--gold)}.brand small{display:block;color:var(--gold);font-size:14px;font-weight:700;text-align:start;line-height:1.35}.brand .tile{width:40px;height:40px}.brand-tile .tile-shape{fill:transparent}.brand-tile{position:relative}.brand-tile text{fill:var(--gold)}
.icon-button,.language{border:1px solid var(--strong-line);border-radius:999px;background:var(--surface);font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px}.icon-button{width:44px;flex-shrink:0;font-size:23px;line-height:1}.icon-button.help{color:var(--gold);border-color:var(--gold);font-size:19px}.language{padding:0 12px}.screen{min-height:calc(100svh - 84px);padding:0 20px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.bottom-actions{margin-top:auto;padding-top:24px}.primary,.secondary,.outline{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:60px;padding:14px 18px;border-radius:999px;font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.035em;text-decoration:none}.primary{background:var(--primary);color:var(--primary-ink)}.secondary{background:var(--surface);border:1px solid var(--strong-line);color:var(--ink)}.outline{background:transparent;border:2px solid var(--gold);color:var(--gold)}.wrong{color:var(--danger);border-color:var(--danger)}.action-row{display:flex;gap:10px}.action-row>.primary{flex:1.7}.action-row>.secondary{flex:1}.action-row>.outline{flex:1.3}.text-button{display:block;background:none;margin:20px auto 0;padding:4px 12px;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.tile{width:52px;height:52px;flex-shrink:0;overflow:visible;--tile-color:var(--player-0)}.tile-0,.tile-6{--tile-color:var(--player-0)}.tile-1,.tile-7{--tile-color:var(--player-1)}.tile-2,.tile-8{--tile-color:var(--player-2)}.tile-3,.tile-9{--tile-color:var(--player-3)}.tile-4,.tile-10{--tile-color:var(--player-4)}.tile-5,.tile-11{--tile-color:var(--player-5)}.tile-shape{fill:var(--tile-color);stroke:var(--tile-gold);stroke-width:3}.tile text{font-size:37px;font-weight:900;fill:var(--tile-ink)}.tile-2 text,.tile-8 text{fill:#0e1b2e}.blank-tile .tile-shape{fill:transparent;stroke:var(--danger);stroke-dasharray:5 4}.blank-tile text{fill:var(--danger)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 12px}.players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.player-tile{min-height:96px;padding:12px 6px 9px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font-weight:800;font-size:16px;min-width:0}.player-tile span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-tile .tile{width:49px;height:49px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.setting-row>label,.setting-row>span{font-size:20px;font-weight:900;letter-spacing:-.03em}.setting-row select{appearance:none;max-width:66%;min-width:0;min-height:44px;padding:10px 32px 10px 14px;font-size:14px;font-weight:800;border:1px solid var(--strong-line);border-radius:13px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238b8c88'/%3E%3C/svg%3E") no-repeat right 12px center}.timer-options{display:flex;gap:6px}.timer-options button{border:1px solid var(--strong-line);background:var(--surface);min-width:48px;min-height:44px;padding:8px 10px;border-radius:999px;font-size:15px;font-weight:800}.timer-options button[aria-pressed=true]{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.rosette{width:244px;max-width:100%;margin-inline:auto;overflow:visible}.rosette .tile{width:100px;height:100px}.rosette>circle{fill:var(--surface);stroke:var(--gold);stroke-width:2}.rosette-center rect{fill:var(--surface);stroke:var(--gold);stroke-width:2}.gold-star{fill:var(--gold)}
.private-name{display:flex;align-items:center;gap:10px;min-width:0}.private-name .tile{width:36px;height:36px}.private-name h1{font-size:16px;letter-spacing:-.035em;overflow-wrap:anywhere}.secret-card{position:relative;width:min(100%,340px);aspect-ratio:5/7;margin:auto;display:flex;transform-style:preserve-3d}.card-face{border-radius:24px;border:2px solid var(--gold);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.card-front{position:relative;flex:1;padding:40px 26px;background:var(--surface);box-shadow:var(--shadow)}.card-front::before{content:'';position:absolute;inset:10px;border:1px solid var(--strong-line);border-radius:16px;pointer-events:none}.card-back{position:absolute;inset:0;background:var(--card-back);transform:rotateY(180deg);overflow:hidden}.card-back::before{content:'';position:absolute;inset:0;background-color:var(--tile-gold);opacity:.35;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 12h32v32H12zM28 5l23 23-23 23L5 28zM0-9l9 9-9 9-9-9zM56-9l9 9-9 9-9-9zM0 47l9 9-9 9-9-9zM56 47l9 9-9 9-9-9z'/%3E%3C/g%3E%3C/svg%3E");mask-size:56px 56px;mask-position:center}.card-back>.tile{position:relative;width:96px;height:96px}.card-corner{position:absolute;width:20px;height:20px}.card-corner.top-start{top:22px;inset-inline-start:22px}.card-corner.top-end{top:22px;inset-inline-end:22px}.card-corner.bottom-start{bottom:22px;inset-inline-start:22px}.card-corner.bottom-end{bottom:22px;inset-inline-end:22px}.reveal .bottom-actions{margin-top:0;padding-top:18px}.eyebrow{font-weight:900;letter-spacing:.1em;font-size:12px;color:var(--gold)}.word-symbol{width:28px;height:28px;margin-bottom:14px}.word-symbol .tile-shape{fill:transparent}.secret-word{font-size:40px;letter-spacing:-.05em;line-height:1.1;overflow-wrap:anywhere;max-width:100%;margin:16px 0 20px}.arabic-word{font-family:'Noto Sans Arabic',Inter,sans-serif;font-size:27px;font-weight:800;color:var(--gold);line-height:1.5}.pack-label{margin-top:24px;border:1px solid var(--strong-line);border-radius:999px;padding:3px 10px;color:var(--muted);font-size:13px;font-weight:700}.imposter-card .card-front{gap:16px}.imposter-card .blank-tile{width:100px;height:100px;margin-bottom:0}.imposter-card h2{font-size:28px}.imposter-card .description{font-size:14px}.badge{display:inline-flex;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:900;line-height:1.4}.badge.danger{background:var(--danger);color:var(--bg)}.badge.success{background:var(--success);color:var(--bg)}.imposter-card .badge,.caught-card>.badge{font-size:12px;letter-spacing:.08em}
.ready-content{margin:auto 0;padding-top:28px;text-align:center}.ready-content>h2{font-size:32px}.ready-content>.description{margin-top:12px}
.discussion-content{margin:auto 0;text-align:center;padding-top:18px}.clock-face{position:relative;max-width:304px;margin:0 auto}.timer-rosette{width:100%;max-width:304px}.timer-rosette>circle{fill:var(--bg);stroke-width:1.5}.petal{fill:var(--tile-color);stroke:var(--gold);stroke-width:2}.petal.empty{fill:transparent;stroke:var(--strong-line);stroke-dasharray:5 4}.clock-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}.clock-label strong{font-size:50px;font-weight:900;letter-spacing:-.055em;line-height:1.1;font-variant-numeric:tabular-nums;direction:ltr}.clock-label span{color:var(--gold);font-weight:800;font-size:13px;margin-top:3px}.discussion-content>.description{margin:30px 0 0;font-size:16px}.discussion .bottom-actions{margin-top:0;padding-top:30px}
.voting>h2{font-size:34px;margin:2px 0 8px}.voting>.description{font-size:15px}.vote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.vote{position:relative;min-width:0;min-height:104px;padding:20px 14px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:17px;background:var(--surface);font-size:17px;font-weight:800;text-align:start;transition:transform .15s,border-color .15s}.vote>.tile{width:52px;height:52px}.vote>span{overflow-wrap:anywhere;min-width:0}.vote[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:-3px;transform:rotate(-2deg)}.suspect{display:none;position:absolute;inset-inline-end:12px;top:8px;border:2px solid var(--danger);color:var(--danger);border-radius:5px;padding:0 6px;transform:rotate(8deg);font-size:11px;line-height:1.5;letter-spacing:.08em}.vote[aria-pressed=true]>.suspect{display:block}
.last-chance-content{margin:auto 0;text-align:center;padding-top:24px}.caught-card{padding:28px 20px 30px;background:var(--surface);border:1.5px solid var(--gold);border-radius:23px;display:flex;flex-direction:column;align-items:center;gap:18px}.caught-card>.tile{width:110px;height:110px}.caught-card h2{font-size:30px;overflow-wrap:anywhere;max-width:100%}.caught-card .description{font-size:15px}.last-chance-content>.muted{font-size:14px;margin-top:18px}.judge-label{font-size:14px;font-weight:800;color:var(--gold);text-align:center;margin-bottom:10px}.last-chance .bottom-actions{margin-top:0;padding-top:42px}
.results-content{margin:auto 0;text-align:center}.result-mosaic{max-width:256px;margin:8px auto 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px;border:1.5px solid var(--gold);border-radius:20px;background:var(--surface)}.result-mosaic .tile{width:100%;height:auto}.results-content>h2{font-size:34px;line-height:1.12;margin:12px 0;overflow-wrap:anywhere}.results-content>.description{font-size:15px}.word-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px;margin-top:24px;text-align:start}.word-summary>span{color:var(--muted);font-size:13px;font-weight:700}.word-summary>strong{font-size:20px;font-weight:900;overflow-wrap:anywhere;min-width:0}.word-summary>b{font-size:17px;color:var(--gold);overflow-wrap:anywhere}.results .bottom-actions{padding-top:28px}
dialog{color:var(--ink);background:var(--surface);border:1.5px solid var(--gold);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:var(--shadow);padding:28px 20px;width:min(100%,520px);max-width:100%;max-height:calc(100svh - 24px);position:fixed;inset:auto 0 0;margin:0 auto;overflow:auto}dialog::backdrop{background:#06101f66}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.dialog-heading h2{font-size:27px}.dialog-heading .icon-button{background:var(--bg)}.rules-list{list-style:none;margin:16px 0 44px;padding:0;display:grid;gap:14px}.rules-list li{display:flex;align-items:flex-start;gap:14px}.rules-list .tile{width:36px;height:36px}.rules-list h3{font-size:16px;letter-spacing:-.02em;line-height:1.5}.rules-list p{font-size:14px;line-height:1.5;color:var(--body-text)}#rules>.muted{font-size:13px}
html[dir=rtl] body{font-family:'Noto Sans Arabic',Inter,Arial,sans-serif}html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{letter-spacing:0;line-height:1.5}html[dir=rtl] .brand strong{font-size:26px;letter-spacing:0}html[dir=rtl] .eyebrow{letter-spacing:0}html[dir=rtl] .secret-word{font-size:42px}html[dir=rtl] .arabic-word{font-family:Inter,sans-serif;font-size:23px}html[dir=rtl] .setting-row select{padding-inline:14px 32px;background-position:left 12px center}html[dir=rtl] .clock-label{direction:rtl}
@media(min-width:600px){.screen{padding-inline:28px}.topbar{padding-inline:28px}.player-tile{min-height:112px}.player-tile .tile{width:58px;height:58px}.rosette{width:280px}.clock-face,.timer-rosette{max-width:400px}.secret-word{font-size:48px}}
@media(max-width:360px){.screen{padding-inline:16px}.topbar{padding-inline:16px;gap:6px}.brand{gap:5px}.brand strong{font-size:20px}.brand .tile{width:32px;height:32px}.language{padding:0 8px;font-size:11px}.icon-button{width:40px;min-height:40px}.timer-options{gap:4px}.timer-options button{min-width:42px;padding-inline:8px}.vote{padding-inline:10px;gap:6px;font-size:14px}.vote>.tile{width:42px;height:42px}.primary,.secondary,.outline{font-size:16px}.secret-card{margin-inline:0}}
@media(prefers-reduced-motion:no-preference){.screen{animation:enter .18s ease-out}@keyframes enter{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:none}}.petal{transition:fill .3s,stroke .3s}.secret-card{animation:card-in .9s cubic-bezier(.2,.75,.25,1) both}.card-front>:not(.card-corner){animation:card-content .4s .55s ease-out both}.topbar{animation:fade-in .3s ease-out both}@keyframes card-in{0%{transform:perspective(1200px) translateY(24px) rotateY(180deg) scale(.9)}25%{transform:perspective(1200px) rotateY(180deg)}85%{transform:perspective(1200px) rotateY(-5deg)}100%{transform:perspective(1200px) rotateY(0)}}@keyframes fade-in{from{opacity:0}}@keyframes card-content{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Room flow: retain the existing tile, type and colour system. */
.room-welcome{text-align:center;padding:28px 0}.room-welcome>.tile{width:80px;height:80px;margin:0 auto 20px}.room-welcome h1{font-size:38px;margin-bottom:12px}.room-modes{display:flex;gap:8px;margin:4px 0 20px}.room-modes .secondary{font-size:16px;min-height:52px}.room-modes [aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.room-form{display:grid;gap:10px}.room-form label{font-size:14px;font-weight:800}.room-form input{width:100%;min-width:0;min-height:52px;padding:12px 14px;border:1px solid var(--strong-line);border-radius:13px;background:var(--surface);font-size:18px}.room-form input[aria-invalid=true]{border-color:var(--danger)}.room-form .primary{margin-top:12px}.room-code{font:900 48px Inter,sans-serif;letter-spacing:.12em;margin:14px 0}.room-home>.text-button{margin-top:auto;padding-top:28px;text-align:center}.room-pending .ready-content>.tile{margin:0 auto 20px}


.room-invite{text-align:center;padding:16px 0 24px}.room-invite .room-code{margin:6px 0 14px}.room-invite .secondary{max-width:240px;margin:auto;min-height:46px;font-size:15px}.room-invite [role=status]{font-size:13px;margin-top:10px}.room-invite-link{width:100%;padding:10px;background:var(--surface);border:1px solid var(--gold);border-radius:8px}.room-lobby .section-heading h2{font-size:20px}.room-player{position:relative}.room-player.disconnected{opacity:.45}.room-player small{min-height:18px;color:var(--gold);font-size:11px;text-align:center}.room-remove{position:absolute;inset-inline-end:4px;top:4px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--danger);font-size:22px}.room-start-note{text-align:center;font-size:13px;margin-bottom:14px}.room-lobby .setting-row>strong{font-size:14px;text-align:end;max-width:65%}

.room-card .secret-card{padding:0;background:transparent;color:inherit;text-align:center}.room-card .secret-card>span{width:100%}.room-card-back{position:relative;flex:1;gap:24px;background:var(--card-back);color:var(--primary-ink);overflow:hidden}.room-card-back>.tile{width:100px;height:100px}.room-card-back>span{color:var(--tile-gold);font-weight:800}.room-card-closed{animation:none}.room-card-progress{text-align:center;font-size:13px;margin-top:18px}.room-card .secret-card:focus-visible{outline-offset:6px}

.room-speaker{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:24px}.room-speaker>.tile{width:48px;height:48px}.room-speaker p{text-align:start}.room-speaker strong{display:block;font-size:20px}.room-discussion .bottom-actions>.secondary{margin-bottom:12px}

.room-ballots{margin-top:24px;text-align:start}.room-ballots section+section{margin-top:16px}.room-ballots h3{font-size:18px;margin-bottom:10px}.room-ballots ul{padding:0;list-style:none}.room-ballots li{display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}.room-ballots li>span:first-child,.room-ballots li>strong{flex:1;overflow-wrap:anywhere}.room-ballots li>strong{text-align:end}.room-results .bottom-actions>.secondary{margin-top:12px}

#room-status:empty{display:none}.room-connection,.room-host-notice,.room-missing{padding:12px;margin-bottom:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:center;font-size:14px}.room-connection{color:var(--ink)}.room-host-notice .text-button,.room-missing .text-button{margin-top:8px}

#verification h2{font-size:24px;margin-bottom:12px}.verification-widget{min-height:70px;margin:16px 0}#verification .secondary{font-size:16px;min-height:48px}

button.room-code{background:transparent;border:0;padding:0;cursor:pointer}button.room-code:focus-visible{border-radius:8px}.room-qr-code{text-align:center;font:900 32px Inter,sans-serif;letter-spacing:.12em}.room-qr-svg{background:#fff;color:#000;width:min(100%,280px);padding:8px;margin:18px auto;border-radius:12px}.room-qr-svg svg{width:100%;height:auto;display:block}.room-qr-link{overflow-wrap:anywhere;text-align:center;font-size:12px}