@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700;800&family=Marhey:wght@500;700&display=swap');

/* =====================================================================
   شنو هالرسمة؟ — one paper, one ink, one red.
   Every screen (front door, phones, TV) is the same dotted paper with
   ink-bordered stickers and the red of the doodle car. Almarai reads,
   Marhey shouts. Every colour below comes from these tokens.
   ===================================================================== */
:root{
  --ink:#171717;--paper:#fdfdfd;--paper-2:#f4f4f2;
  --red:#ef2725;--red-ui:#e01f1d;--red-deep:#a91816;--red-tint:#fff0ef;
  --text:#171717;--muted:#5a5a5a;--muted-2:#8a8a8a;
  --line-soft:rgba(23,23,23,.16);
  --shadow-1:0 6px 16px rgba(0,0,0,.08);--shadow-2:0 14px 30px rgba(0,0,0,.12);
  --sticker:5px 5px 0 var(--ink);--sticker-red:5px 5px 0 var(--red);
  --font:'Almarai','Tahoma','Arial',sans-serif;--display:'Marhey','Almarai','Tahoma',sans-serif;
  --dur:.18s;--ease:cubic-bezier(.2,.9,.3,1);
  caret-color:var(--red);scrollbar-width:thin;scrollbar-color:#bdbdbd transparent;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;background:radial-gradient(rgba(23,23,23,.08) 1px,transparent 1.6px) 0 0/24px 24px var(--paper)}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:99px;border:2px solid var(--paper)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:not-allowed;opacity:.5}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
img{max-width:100%}
h1,h2,h3,p{margin:0 0 .5em}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.25;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,4rem);margin-bottom:.35em}
h2{font-size:clamp(1.45rem,3vw,2.4rem)}
h3{font-size:1.1rem;font-weight:800}
p{line-height:1.8}
.muted{color:var(--muted)}
.text-yellow,.text-mint,.text-pink{color:var(--red-ui)}
.timer,.remaining,.reveal-counter,.like-badge,.like-btn,.big-number,.small-score-row b,.point-chip b,.score-num,.room-code,.big-room-code,.mini-count{font-variant-numeric:tabular-nums}

/* ---- Controls ---- */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red-ui);color:#fff;border-radius:16px;padding:16px 26px;font-weight:800;font-size:1.05rem;line-height:1.2;text-decoration:none;box-shadow:0 5px 0 var(--red-deep),0 10px 18px rgba(0,0,0,.18);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}
.primary:hover{transform:translateY(-1px);background:var(--red);box-shadow:0 6px 0 var(--red-deep),0 14px 22px rgba(0,0,0,.18)}
.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-deep),0 6px 10px rgba(0,0,0,.15)}
button.primary:disabled{box-shadow:none;transform:none;background:#d9b6b5;color:#fff}
.outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:11px 18px;font-weight:800;text-decoration:none;transition:background var(--dur),border-color var(--dur)}
.outline:hover{background:var(--red-tint)}
.tiny{padding:7px 12px;font-size:.84rem;border-radius:11px}
.large{font-size:1.15rem;padding:19px 30px}
.wide{width:100%}
.quiet-button{color:var(--muted);padding:10px}
.quiet-link{color:var(--ink);text-align:center;display:block;margin:12px auto 0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--red)}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--red-tint);border:1.5px solid rgba(239,39,37,.4);padding:7px 13px;color:var(--red-deep);font-size:.86rem;font-weight:800;line-height:1.2;white-space:nowrap}
.tag.green{background:#fff;color:var(--ink);border-color:var(--ink)}
.card-title{font-size:.86rem;font-weight:800;color:var(--red-deep)}
.box{background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink)}
.big-emoji{font-size:4.6rem;line-height:1.2;display:block;margin-bottom:12px}
.toast{position:fixed;z-index:100;bottom:24px;left:50%;transform:translate(-50%,16px);background:#fff;color:var(--ink);border:2.5px solid var(--red);padding:12px 20px;min-width:220px;max-width:calc(100% - 30px);text-align:center;border-radius:14px;font-weight:800;opacity:0;transition:opacity .25s,transform .25s var(--ease);pointer-events:none;box-shadow:var(--shadow-2)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.double-banner{display:inline-flex;align-items:center;gap:6px;background:var(--red-ui);color:#fff;font-weight:900;border-radius:999px;padding:8px 14px;font-size:.9rem;box-shadow:0 3px 0 var(--red-deep);white-space:nowrap}

/* ---- Brand: the hand-lettered title from the logo, in every header ---- */
.brand{display:inline-block;line-height:0}
.brand-wordmark{display:block;height:44px;width:auto}
.tv-head .brand-wordmark{height:40px}

/* ---- TV ---- */
.tv-body{min-height:100vh;overflow-x:hidden}
.tv-app{min-height:100vh;max-width:1500px;margin:auto;display:flex;flex-direction:column;padding:22px clamp(20px,4.5vw,72px) 18px}
.tv-head,.tv-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}
.tv-head{margin-bottom:22px}
.head-actions{display:flex;gap:8px;align-items:center}
.live-badge{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px;font-weight:700}
.live-badge i{width:9px;height:9px;background:var(--red);border-radius:50%;display:block}
.live-badge.online i{background:var(--ink)}
.tv-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 0}
.tv-footer{color:var(--muted);font-size:.78rem;margin-top:16px}
.intro-card{text-align:center;align-self:center;max-width:700px}
.intro-card .sticker{font-size:5.5rem}
.intro-card p{color:var(--muted);font-size:1.15rem}
.loader{margin:22px auto;width:36px;height:36px;border:4px solid rgba(23,23,23,.15);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.lobby-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:28px;align-items:stretch}
.lobby-main{padding:32px 36px 28px}
.lobby-main h1{max-width:780px}
.lobby-description{font-size:1.1rem;color:#3f3f3f;max-width:60ch}
.room-label{font-size:.85rem;color:var(--muted);font-weight:800;margin-top:14px}
.room-code{font-weight:800;letter-spacing:.12em;direction:ltr;text-align:right;font-size:clamp(3rem,7vw,6rem);color:var(--red-ui);line-height:1.15;margin:4px 0 2px}
.join-link{display:block;color:var(--ink);font-family:Arial,sans-serif;direction:ltr;text-align:right;word-break:break-all;font-size:1rem;margin:4px 0 16px}
.step-text{margin:0 0 6px;color:var(--ink)}
.joined-header{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px;gap:8px}
.joined-header h3{margin:0}
.avatars{display:flex;flex-wrap:wrap;gap:10px;min-height:74px}
.avatar-chip{display:flex;align-items:center;gap:9px;background:#fff;padding:8px 13px;border-radius:14px;font-weight:800;border:2px solid var(--ink)}
.avatar-dot{background:var(--red);height:28px;width:28px;display:grid;place-items:center;border-radius:9px;color:#fff;font-weight:900;transform:rotate(-7deg)}
.avatar-chip.offline{opacity:.4}
.lobby-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.round-control{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);background:#fff;padding:10px 15px;border-radius:14px;font-weight:800}
.round-control select{background:transparent;border:none;color:var(--ink);font-weight:800}
.host-tip{margin-top:12px;color:var(--muted);font-size:.82rem}
.qr-panel{padding:28px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--ink);position:relative;overflow:hidden}
.qr-panel h2{font-size:1.8rem;margin-bottom:2px}
.qr-panel p{font-size:.95rem;max-width:30ch;color:var(--muted)}
.qr-panel img{width:min(75%,300px);aspect-ratio:1;object-fit:contain;border:3px solid var(--ink);border-radius:18px;box-shadow:var(--sticker-red);margin:14px 0 20px;background:#fff}
.qr-panel .phone-emoji{font-size:2.6rem}
.qr-panel .outline{margin-top:14px}
.waiting-orbs{display:flex;justify-content:center;gap:8px}
.waiting-orbs i{height:9px;width:9px;background:var(--red);border-radius:50%;animation:popdot 1.1s infinite}
.waiting-orbs i:nth-child(2){animation-delay:.2s}.waiting-orbs i:nth-child(3){animation-delay:.4s}
@keyframes popdot{50%{opacity:.25;transform:translateY(-7px)}}

.game-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
.progress-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.progress-title .phase-label{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--red-ui)}
.progress-title .counter{color:var(--muted);font-size:.9rem;font-weight:700}
.timer,.remaining{background:var(--red-ui);color:#fff;font-weight:900;direction:ltr}
.timer{min-width:100px;text-align:center;padding:14px 22px;border-radius:18px;font-size:2rem}
.remaining{font-size:1.1rem;border-radius:100px;padding:9px 14px}
.timer.danger,.remaining.expiring{background:#fff;color:var(--red-ui);box-shadow:inset 0 0 0 2px var(--red-ui);animation:urgent .7s infinite alternate}
@keyframes urgent{to{transform:scale(1.05)}}
.phase-card{padding:28px 30px;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:360px}
.phase-card h1{margin-bottom:8px}
.phase-card p{color:var(--muted);font-size:1.12rem;max-width:60ch}
.draw-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;width:100%;max-width:940px;margin:26px auto}
.draw-status{padding:22px 10px;text-align:center;background:#fff;border-radius:18px;border:2px solid var(--ink);transition:background .3s,border-color .3s}
.draw-status .emoji{font-size:2.6rem;display:block;margin-bottom:8px;line-height:1.2}
.draw-status strong{font-size:1.05rem}
.draw-status small{display:block;margin-top:6px;color:var(--muted)}
.draw-status.done{border-color:var(--red-ui);background:var(--red-tint)}
.drawing-stage{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:28px;align-items:start;flex:1}
.art-timer-wrap{width:100%;min-width:0}
.artwork-container{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:12px;display:flex;justify-content:center;align-items:center;min-height:400px;box-shadow:6px 6px 0 var(--red);position:relative}
.artwork-container img,.art-canvas{width:100%;max-height:min(62vh,540px);aspect-ratio:640/440;object-fit:contain;border-radius:12px;background:#fff;display:block}
.artwork-container .art-empty{font-size:4rem;color:var(--muted);text-align:center}
.paper-sticker{position:absolute;bottom:-20px;right:5%;background:var(--red-ui);color:#fff;padding:10px 18px;font-weight:800;border-radius:12px;transform:rotate(-4deg);box-shadow:var(--shadow-1);display:inline-flex;align-items:center;gap:6px}
.sticker-avatar{width:28px;height:28px;border-radius:8px;background:#fff;object-fit:contain}
.art-details{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;min-width:0}
.art-details h1{font-size:clamp(2.2rem,4vw,3.8rem)}
.art-details p{max-width:44ch;color:var(--muted)}
.display-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;width:100%;margin-top:8px}
.display-option{background:#fff;border:2px solid var(--ink);border-radius:15px;padding:16px 18px;text-align:center;font-weight:800;font-size:clamp(.9rem,1.4vw,1.15rem);min-height:65px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.mini-count{background:#fff;border:2px solid var(--ink);padding:8px 15px;border-radius:12px;color:var(--ink);font-weight:800}
.reveal-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;margin-top:10px;width:100%}
.point-chip{background:#fff;border:2px solid var(--ink);padding:10px;border-radius:13px;text-align:center;font-size:.9rem;font-weight:800}
.point-chip b{display:block;color:var(--red-ui);direction:ltr;margin-top:3px;font-size:1.05rem}
.score-layout{width:min(100%,880px);margin:0 auto;text-align:center}
.score-list{display:grid;gap:10px;text-align:right;margin:22px 0}
.score-row{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;background:#fff;border:2px solid var(--ink);border-radius:16px}
.score-row:first-child{background:var(--red-tint);border-color:var(--red-ui)}
.score-rank{font-size:1.35rem;font-weight:900;margin-left:14px}
.score-user{display:flex;align-items:center;font-weight:800;gap:8px}
.score-num{font-size:1.2rem;font-weight:800;direction:ltr}
.score-row:first-child .score-num{color:var(--red-deep)}
.host-controls{display:flex;justify-content:center;gap:10px;margin-top:24px}

/* ---- The reveal: one card per title, the truth in red ---- */
.reveal-title{margin:4px 0 12px}
.reveal-cards{display:grid;gap:12px;width:100%}
.reveal-card{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:14px 18px;text-align:right;display:grid;gap:8px}
.reveal-card.correct{background:var(--red-tint);border-color:var(--red-ui);box-shadow:var(--sticker-red)}
.reveal-card.pending{opacity:.65;border-style:dashed;display:flex;justify-content:space-between;align-items:center}
.reveal-card-text{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.9rem);font-weight:700;line-height:1.35}
.reveal-card.correct .reveal-card-text{color:var(--red-ui)}
.reveal-card-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.95rem;color:var(--muted)}
.reveal-card .who{font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.reveal-card .pts{color:var(--red-ui);font-weight:900}
.voters{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.voter{display:inline-flex;align-items:center;gap:4px}
.chip-avatar{width:26px;height:26px;border-radius:8px;background:#fff;border:1.5px solid var(--red);vertical-align:middle;object-fit:contain}
.reveal-counter{font-weight:900;direction:ltr;background:var(--red-ui);color:#fff;border-radius:999px;padding:4px 12px}
.pop{animation:pop-in .5s var(--ease)}
@keyframes pop-in{from{opacity:0;transform:translateY(14px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.best-bluff{margin:18px auto 0;max-width:620px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:18px 22px;box-shadow:var(--sticker);text-align:center;display:grid;gap:8px;justify-items:center}
.best-bluff-text{font-family:var(--display);font-size:clamp(1.3rem,3vw,2.2rem);font-weight:700;color:var(--red-ui);display:inline-flex;align-items:center;gap:8px}
.best-bluff small{color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.like-king{background:var(--red-ui);color:#fff}
.like-king .card-title,.like-king .best-bluff-text{color:#fff}
.like-king small{color:#ffd9d8}
.like-badge{display:inline-flex;align-items:center;gap:4px;background:var(--red-ui);color:#fff;border-radius:999px;padding:3px 9px;font-size:.85rem;font-weight:900;margin-inline-start:8px;direction:ltr;vertical-align:middle}

/* ---- Phone ---- */
.phone-body{min-height:100vh;overflow-x:hidden}
.phone-shell{max-width:660px;margin:auto;min-height:100svh;display:flex;flex-direction:column;padding:16px clamp(16px,5vw,26px) 12px}
.phone-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:6px}
.mini-status{color:var(--red-ui);font-size:.85rem;font-weight:800}
.mini-status.online{color:var(--ink)}
.phone-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px}
.phone-main>.double-banner{align-self:center}
.phone-footer{text-align:center;font-size:.76rem;color:var(--muted);margin:16px 0 2px}
.welcome-card{text-align:center;padding:4px 4px 12px}
.welcome-card h1{font-size:2.4rem}
.welcome-car{display:block;width:min(70%,240px);height:auto;margin:0 auto 6px}
.form-panel{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:22px 18px;box-shadow:var(--sticker)}
.field{display:block;color:var(--ink);font-weight:800;margin-bottom:8px}
.text-input{width:100%;background:#fff;color:var(--ink);font-size:1.15rem;padding:14px 16px;border:2px solid var(--ink);border-radius:14px;margin-bottom:16px;transition:border-color var(--dur)}
.text-input:focus{border-color:var(--red);outline:none}
.text-input::placeholder{color:var(--muted-2)}
.text-input.room-input{text-align:center;letter-spacing:.14em;direction:ltr;font-size:1.8rem;font-weight:800;text-transform:uppercase}
.join-extra{display:grid;gap:12px;margin-top:8px}
.phone-wait{text-align:center;padding:24px 14px}
.phone-wait .large-graphic{font-size:5rem;display:block;margin-bottom:10px;line-height:1.1}
.phone-wait h2{font-size:1.8rem}
.phone-wait p{color:var(--muted)}
.players-mini{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:12px 0}
.players-mini span{background:#fff;border:2px solid var(--ink);border-radius:100px;padding:6px 12px;font-size:.9rem;font-weight:800}
.phone-title{font-size:1.8rem;line-height:1.3;margin:2px 0 6px}
.phone-phase-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.phone-phase-title h2{margin:0}
.prompt-card{background:var(--red-ui);color:#fff;border-radius:20px;padding:16px 14px;text-align:center;box-shadow:0 6px 0 var(--red-deep),0 12px 22px rgba(0,0,0,.18);transform:rotate(-1deg)}
.prompt-card .overline{font-size:.82rem;font-weight:700;opacity:.92}
.prompt-card h2{font-size:clamp(1.4rem,6.5vw,2.1rem);margin:6px 0 2px;color:#fff}
.drawing-tools{display:flex;justify-content:space-between;gap:9px;align-items:center;flex-wrap:wrap;margin:10px 0 2px}
.swatches{display:flex;gap:10px;align-items:center}
.swatch{-webkit-tap-highlight-color:transparent;width:44px;height:44px;border-radius:13px;border:4px solid #fff;box-shadow:0 0 0 2px var(--ink);transform:rotate(-6deg);transition:transform var(--dur),box-shadow var(--dur)}
.swatch.active{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--red);transform:rotate(4deg) scale(1.05)}
.swatch.ink-one{background:var(--ink)}.swatch.ink-two{background:var(--red)}
.tools-end{display:flex;gap:7px}
.tool-btn{border:2px solid var(--ink);color:var(--ink);background:#fff;padding:10px 14px;border-radius:12px;font-weight:800;font-size:.9rem}
.paint-board{position:relative;border-radius:18px;border:3px solid var(--ink);overflow:hidden;background:#fff;box-shadow:var(--sticker-red);width:100%;aspect-ratio:640/440;margin-bottom:12px}
.paint-board canvas{width:100%;height:100%;display:block;cursor:crosshair}
.paint-board,.paint-board *,.avatar-pad,.avatar-pad *{touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
.guess-art{width:100%;border-radius:16px;max-height:45vh;object-fit:contain;background:#fff;display:block;border:3px solid var(--ink);box-shadow:var(--sticker-red)}
.small-art{max-height:28vh;margin-bottom:8px}
.phone-options{display:grid;grid-template-columns:1fr;gap:10px}
.vote-option{border:2px solid var(--ink);background:#fff;border-radius:16px;color:var(--ink);padding:15px 16px;text-align:right;font-weight:800;min-height:56px;font-size:1.07rem;display:flex;align-items:center;gap:10px;transition:border-color var(--dur),background var(--dur)}
.vote-option:disabled{opacity:.4}
.vote-option:hover:not(:disabled),.vote-option:active:not(:disabled){border-color:var(--red-ui);background:var(--red-tint)}
.vote-option strong{background:var(--red-ui);color:#fff;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9px;flex-shrink:0;direction:ltr}
.phone-note{color:var(--muted);font-size:.9rem;margin:0;line-height:1.7}
.intermission{padding:22px 16px;text-align:center;background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:var(--sticker)}
.intermission .emoji{display:block;font-size:4.2rem;margin:6px 0 10px;line-height:1.1}
.intermission h2{font-size:1.8rem}
.intermission .big-number{font-size:2rem;color:var(--red-ui);font-weight:800;margin:8px 0}
.result-line{font-size:1.15rem;font-weight:800;line-height:1.7;margin:6px 0}
.reveal-personal{margin-top:6px}
.small-scores{text-align:right;display:flex;flex-direction:column;gap:8px;margin:12px 0}
.small-score-row{display:flex;justify-content:space-between;padding:10px 15px;background:#fff;border-radius:12px;border:2px solid var(--ink);font-weight:800}
.small-score-row.me{border-color:var(--red-ui);background:var(--red-tint)}
.small-score-row b{color:var(--red-ui);direction:ltr}
.small-score-row>span,.score-user{display:flex;align-items:center;gap:6px}
.reveal-list{display:grid;gap:9px;margin:10px 0}
.reveal-row{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px 14px;text-align:right}
.reveal-row.correct{background:var(--red-tint);border-color:var(--red-ui)}
.reveal-row.pending{opacity:.6;border-style:dashed}
.reveal-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.reveal-row-text{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.4}
.reveal-row.correct .reveal-row-text{color:var(--red-ui)}
.reveal-row small{display:block;margin-top:5px;color:var(--muted);line-height:1.6}
.reveal-row small b{display:block;color:var(--red-ui)}
.like-list{display:grid;gap:8px;margin-top:10px}
.like-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 14px;font-weight:800;line-height:1.4}
.like-btn{border:2px solid var(--red);background:#fff;color:var(--red-ui);border-radius:999px;padding:7px 12px;font-weight:900;font-size:1rem;min-width:58px;flex-shrink:0;direction:ltr;transition:transform var(--dur) var(--ease),background var(--dur)}
.like-btn:active{transform:scale(.92)}
.like-btn.liked,.like-btn:disabled{background:var(--red-ui);color:#fff;opacity:1}

/* Avatar: draw yourself before you join */
.avatar-screen{text-align:center;display:flex;flex-direction:column;gap:10px}
.avatar-screen h2{font-size:1.7rem;margin:6px 0 0}
.avatar-screen p{margin:0 0 2px;font-size:.92rem;color:var(--muted)}
.avatar-pad{width:min(100%,290px);aspect-ratio:1;align-self:center;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:var(--sticker-red);overflow:hidden;margin:6px auto 10px}
.avatar-pad canvas{width:100%;height:100%;display:block;cursor:crosshair}
.avatar-toolbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.avatar-toolbar .swatches{margin-left:auto}.avatar-toolbar .swatch{width:40px;height:40px}
.player-avatar,.mini-player-avatar,.draw-avatar{width:48px;height:48px;border-radius:14px;background:#fff;object-fit:contain;display:inline-grid;place-items:center;color:var(--ink);border:2px solid var(--red);transform:rotate(-4deg);flex-shrink:0;font-weight:900}
.mini-player-avatar{width:34px;height:34px;border-radius:9px;margin-inline-end:6px;vertical-align:middle}
.draw-avatar{width:62px;height:62px}
.name-with-avatar{display:inline-flex;align-items:center;gap:6px}

/* Phone lobby: code, share, friends */
.change-room{margin-top:16px}
.big-room-code{font-size:clamp(2.7rem,11vw,4.2rem);font-weight:800;color:var(--red-ui);letter-spacing:.16em;line-height:1.1;margin:2px 0 6px;direction:ltr}
.share-row{display:grid;gap:10px;margin:12px 0 4px}
.join-link-box{width:100%;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:12px;font-family:Arial,sans-serif;font-size:.95rem;text-align:center;direction:ltr}
.join-link-box:focus{border-color:var(--red);outline:none}
.owner-controls{display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:16px}

/* Countdown under the picture or the drawing surface */
.countdown-below{display:flex;flex-direction:column;gap:7px;margin:9px 0 16px;direction:rtl;max-width:100%;text-align:right}
.countdown-text{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.89rem;font-weight:800;color:var(--ink)}
.countdown-text .remaining{font-size:1.02rem;min-width:69px;text-align:center;padding:8px 13px}
.countdown-track{height:14px;width:100%;border-radius:999px;background:rgba(23,23,23,.12);overflow:hidden;direction:ltr}
.countdown-fill{height:100%;width:100%;background:var(--red);border-radius:999px;transition:width .18s linear,background .18s ease}
.countdown-fill.running-out{background:var(--ink)}
.tv-countdown{margin-top:17px}
.tv-countdown .countdown-track{height:18px}
.phase-card .tv-countdown{max-width:min(100%,740px);margin:18px auto 6px}

/* ---- Home: the front door ---- */
.home-body{min-height:100svh}
.home-wrap{max-width:600px;padding:34px 20px 56px;margin:auto;text-align:center}
.home-logo-card{display:flex;align-items:center;justify-content:center;margin:0 auto 6px;width:min(100%,520px)}
.home-logo-card img{display:block;width:100%;height:auto;object-fit:contain}
.home-tag{color:var(--red-deep);font-weight:800}
h1.home-tag{font-family:inherit;font-size:1rem;line-height:1.6;margin:0}   /* the page's one heading for Google; looks like the old tag line */
.home-description{color:#3f3f3f;max-width:40ch;margin:4px auto 22px;font-size:1.05rem}
.home-options{display:grid;gap:12px;text-align:right}
.home-option{display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:center;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);padding:16px;border-radius:20px;box-shadow:var(--sticker);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.home-option:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.home-option:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.home-option b{font-size:1.15rem;grid-column:2}
.home-option small{font-size:.88rem;color:#565656;grid-column:2;margin-top:3px}
.home-option-icon{grid-row:1/span 2;display:grid;place-items:center;border-radius:14px;background:var(--red-tint);width:56px;height:56px;color:var(--red);transform:rotate(-6deg)}
.home-option-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.home-red{background:var(--red-ui);color:#fff}
.home-red small{color:#ffe0df}
.home-red .home-option-icon{background:#fff;color:var(--red)}
.home-tv{background:var(--paper-2)}
.home-footnote{margin-top:30px;color:#565656;font-size:.86rem}

/* ---- Responsive ---- */
@media(max-width:900px){
  .lobby-layout,.drawing-stage{grid-template-columns:1fr}
  .qr-panel img{width:215px}
  .tv-app{padding:18px}
  .art-details{text-align:center;align-items:center}
  .artwork-container{min-height:280px}
  .tv-head{flex-wrap:wrap}
  .tv-footer{font-size:.68rem}
  .phase-card{min-height:260px}
  .score-layout h1{font-size:2.6rem}
}
@media(max-width:600px){
  .home-logo-card{max-width:250px;margin-bottom:22px}
  .countdown-track{height:12px}
}
@media(max-width:540px){
  .tv-head .brand-wordmark{height:32px}
  .head-actions{gap:5px}.head-actions .tiny{font-size:.7rem;padding:8px}
  .live-badge{display:none}
  .lobby-main{padding:22px}
  .room-code{font-size:3.1rem}
  .tv-app{padding:13px}
  .tv-footer{gap:8px}
  .display-options{grid-template-columns:1fr}
  .drawing-stage{gap:14px}
  .lobby-main h1{font-size:2rem}
  .host-controls{flex-direction:column}.host-controls button{width:100%}
  .phone-shell{padding-left:14px;padding-right:14px}
  .phone-header{margin-bottom:8px}
  .phone-footer{margin-top:9px}
  .home-wrap{padding-top:22px}
  .home-option{padding:14px 13px}
  .avatar-screen h2{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){
  .pop,.waiting-orbs i,.timer.danger,.remaining.expiring,.loader{animation:none}
  .primary,.home-option,.swatch,.like-btn{transition:none}
}

/* ---- Titles as stickers: numbered, slightly tilted, popping in one by one ---- */
.title-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;width:100%;margin:8px 0 14px}
.title-card{position:relative;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:16px 18px;box-shadow:var(--sticker);transform:rotate(var(--tilt,0deg));font-family:var(--display);font-size:clamp(1.15rem,2vw,1.7rem);font-weight:700;line-height:1.3;display:flex;align-items:center;gap:12px;text-align:right;color:var(--ink);width:100%}
.title-num{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--red-ui);color:#fff;display:grid;place-items:center;font-family:var(--font);font-weight:900;font-size:1rem;direction:ltr;box-shadow:0 2px 0 var(--red-deep)}
.title-text{flex:1;min-width:0;overflow-wrap:anywhere}
.title-card .like-badge{margin-inline-start:0}
button.title-card{cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}
button.title-card:hover:not(:disabled){transform:rotate(var(--tilt,0deg)) translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
button.title-card:active:not(:disabled){transform:rotate(var(--tilt,0deg)) translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
button.title-card:disabled{opacity:.35}
button.title-card.chosen{opacity:1;background:var(--red-tint);border-color:var(--red-ui);box-shadow:5px 5px 0 var(--red-ui)}
.phone-options .title-card{font-size:1.2rem;padding:14px 16px}
.own-title{background:var(--paper-2);border:2px dashed var(--ink);border-radius:14px;padding:10px 14px;font-weight:800;color:var(--muted);font-size:.95rem;line-height:1.5}
.own-title b{color:var(--ink)}
.title-pending{opacity:.6;border:2px dashed var(--ink);border-radius:14px;padding:12px 14px;text-align:center;font-weight:800}
.like-row .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--red-ui);color:#fff;font-size:.85rem;margin-inline-end:6px;direction:ltr}
.sound-hint{font-size:.78rem;color:var(--red-deep);font-weight:800}
@media(max-width:900px){.title-grid{grid-template-columns:1fr}}
.reveal-row-text .title-num,.reveal-card-text .title-num{display:inline-grid;vertical-align:middle;width:28px;height:28px;font-size:.85rem;margin-inline-end:4px}
/* ---- 5+ players: compact reveal cards so the truth stays on the TV screen ---- */
.reveal-cards.many{gap:8px}
.reveal-cards.many .reveal-card{padding:9px 14px;gap:3px;border-radius:14px}
.reveal-cards.many .reveal-card-text{font-size:clamp(1.05rem,1.75vw,1.45rem);line-height:1.3}
.reveal-cards.many .reveal-card-meta{font-size:.86rem;gap:5px 10px}
.reveal-cards.many .chip-avatar{width:22px;height:22px}
.reveal-cards.crowd{grid-template-columns:repeat(2,minmax(0,1fr))}
.reveal-cards.crowd .reveal-card.pending{grid-column:1/-1}
.like-row .num{margin-left:10px;margin-right:0}
/* ---- Final screen on the TV: awards side by side, compact rows for 5+ players ---- */
.night-awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;width:100%;margin:14px auto 0;align-items:stretch}
.night-awards .best-bluff{margin:0;max-width:none}
.score-list.many{gap:7px;margin:14px 0}
.score-list.many .score-row{padding:8px 18px}
.score-list.many .mini-player-avatar{width:30px;height:30px}
.score-layout.final .big-emoji{font-size:3.4rem;margin-bottom:4px}
.score-layout.final h1{margin-bottom:0}
.score-layout.final .host-controls{margin-top:16px}
/* ---- Every player gets a marker colour: lobby chips, avatar frames, drawing cards ---- */
.avatar-chip,.players-mini>span{background:var(--pc-tint,#fff);border-color:var(--pc-line,var(--ink))}
.avatar-dot{background:var(--pc-line,var(--red))}
.player-avatar,.mini-player-avatar,.draw-avatar,.chip-avatar{border-color:var(--pc-line,var(--red))}
.draw-status{border-color:var(--pc-line,var(--ink))}
.draw-status.done{border-color:var(--pc-line,var(--red-ui));background:var(--pc-tint,var(--red-tint))}
.voters.self,.self-vote{color:var(--red-ui);font-weight:800}
/* ---- Hand-drawn icons instead of system emoji (static/assets/emo/) ---- */
.emo{display:inline-block;height:1.3em;width:auto;vertical-align:-.3em;margin:0 .06em}
.big-emoji .emo,.sticker .emo,.large-graphic .emo,.phone-emoji .emo,.intermission .emoji .emo,.draw-status .emoji .emo,.art-empty .emo{height:1em;vertical-align:baseline;margin:0}
.score-rank .emo{height:1.5em;vertical-align:middle}
.double-banner .emo,.card-title .emo{height:1.25em}
/* ---- Phone header: a smaller wordmark leaves room for the game ---- */
.phone-header .brand-wordmark{height:31px}
/* ---- Likes are a thumbs-up sticker with the count above it ---- */
.like-btn{position:relative;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:16px;padding:5px 10px;min-width:56px;min-height:44px;display:inline-grid;place-items:center;overflow:visible}
.like-btn .thumb{height:30px;filter:grayscale(1);opacity:.45;transition:transform var(--dur) var(--ease),opacity var(--dur),filter var(--dur)}
.like-btn.liked,.like-btn:disabled{background:var(--red-tint);border-color:var(--red-ui);color:var(--ink);opacity:1}
.like-btn.liked .thumb,.like-btn:disabled .thumb{filter:none;opacity:1;transform:rotate(-8deg) scale(1.08)}
.like-count{position:absolute;top:-11px;left:50%;transform:translateX(-50%);min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;background:var(--red-ui);color:#fff;border:2px solid #fff;border-radius:999px;font-size:.78rem;font-weight:900;direction:ltr;box-shadow:0 0 0 1.5px var(--red-ui)}
.like-badge{position:relative;display:inline-flex;align-items:center;background:none;color:var(--ink);padding:0;margin-inline-start:8px;margin-top:6px;overflow:visible}
.like-badge .thumb{height:1.9em;vertical-align:middle;margin:0}
.like-badge .like-count{top:-9px;left:auto;right:-10px;transform:none;min-width:20px;height:20px;font-size:.72rem}
.emo.off{filter:grayscale(1);opacity:.45}
/* ---- Who answered: avatars land around the drawing, no names (Drawful style) ---- */
.artwork-container img.answered-avatar{position:absolute;width:66px;height:66px;max-height:none;aspect-ratio:auto;border-radius:16px;background:#fff;border:3px solid var(--pc-line,var(--red));object-fit:contain;box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--tilt,-6deg));z-index:2}
.answered-avatar.pop{animation:stamp .5s var(--ease)}
@keyframes stamp{from{opacity:0;transform:rotate(var(--tilt,-6deg)) scale(2)}60%{opacity:1;transform:rotate(var(--tilt,-6deg)) scale(.92)}to{opacity:1;transform:rotate(var(--tilt,-6deg)) scale(1)}}
.answered-avatar[data-slot="0"]{top:-26px;left:-22px;--tilt:-8deg}
.answered-avatar[data-slot="1"]{top:-26px;right:-22px;--tilt:7deg}
.answered-avatar[data-slot="2"]{top:40%;left:-32px;--tilt:-5deg}
.answered-avatar[data-slot="3"]{top:40%;right:-32px;--tilt:6deg}
.answered-avatar[data-slot="4"]{bottom:-26px;left:-22px;--tilt:5deg}
.answered-avatar[data-slot="5"]{top:-30px;left:calc(50% - 33px);--tilt:-4deg}
.answered-avatar[data-slot="6"]{bottom:-28px;left:30%;--tilt:8deg}
@media(max-width:900px){.artwork-container img.answered-avatar{width:48px;height:48px}}
/* ---- Characters stand free: no boxes or frames around the drawn avatars, just a white die-cut halo ---- */
.player-avatar,.mini-player-avatar,.draw-avatar,.chip-avatar{background:transparent;border:0;box-shadow:none;border-radius:0;transform:none;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff)}
.player-avatar{width:56px;height:56px}
.draw-avatar{width:64px;height:64px}
.mini-player-avatar{width:40px;height:40px;margin-inline-end:4px}
.chip-avatar{width:30px;height:30px}
.player-avatar.no-art,.mini-player-avatar.no-art{background:#fff;border:2px solid var(--pc-line,var(--red));border-radius:12px;filter:none}
/* ---- Like counts: a plain red number beside the thumb, no bubble (it covered the thumb) ---- */
.like-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px}
.like-btn .like-count,.like-badge .like-count{position:static;transform:none;background:none;border:0;box-shadow:none;color:var(--red-ui);font-size:1.1rem;line-height:1;min-width:0;height:auto;padding:0;font-weight:900}
.like-badge{align-items:center;gap:3px;margin-top:0}
.like-badge .like-count{font-size:1rem}
/* ---- Connection dot: the drawn green circle (red-shifted while reconnecting) ---- */
.emo.dot{height:15px;width:15px;vertical-align:-2px;margin:0 2px}
.emo.dot.off{filter:hue-rotate(240deg) saturate(1.3)}
.live-badge{gap:4px}
/* ---- Solid player colours: cards filled with the player's colour, text that reads on it ---- */
.avatar-chip,.players-mini>span{background:var(--pc,#fff);color:var(--pc-ink,var(--ink));border-color:var(--ink)}
.avatar-chip.offline{opacity:.45}
.draw-status.done{background:var(--pc,var(--red-tint));border-color:var(--ink);color:var(--pc-ink,var(--ink))}
.draw-status.done strong,.draw-status.done small{color:inherit}
.paper-sticker{background:var(--pc,var(--red-ui));color:var(--pc-ink,#fff)}
/* ---- Solid cards: no black frame (border = card colour), and a white disc under the character so its real colours show ---- */
.avatar-chip,.players-mini>span{border-color:var(--pc-line,var(--ink))}
.draw-status.done{border-color:var(--pc-line,var(--ink))}
.avatar-chip .player-avatar,.players-mini>span .mini-player-avatar,.draw-status.done .draw-avatar{background:#fff;border-radius:50%;padding:4px;filter:none;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.avatar-chip .player-avatar{width:58px;height:58px}
.players-mini>span .mini-player-avatar{width:42px;height:42px}
.draw-status.done .draw-avatar{width:66px;height:66px}
/* ---- Home buttons: Fares's drawn icons (they carry their own card frame) ---- */
.home-option{grid-template-columns:64px 1fr}
.home-option-icon,.home-red .home-option-icon{background:none;width:64px;height:64px;transform:rotate(-4deg)}
.home-option-icon img{width:64px;height:64px;object-fit:contain;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
.home-red .home-option-icon img{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)}
/* ---- Room between the logo and the words under it ---- */
.home-logo-card{margin-bottom:18px}
.home-description{margin-top:8px}
/* ---- Home: the logo sits a little lower, with a clear gap before the words ---- */
.home-wrap{padding-top:44px}
.home-logo-card{margin-bottom:44px}
@media(max-width:600px){
  .home-wrap{padding-top:40px}
  .home-logo-card{margin-bottom:62px}
}
/* ---- Join page: a smaller car with breathing room above and below ---- */
.welcome-card{padding-top:26px}
.welcome-car{width:min(48%,165px);margin:0 auto 10px}
.welcome-card h1{margin-top:0}
/* ---- Someone is drawing their character: a dashed ghost chip in the lobby ---- */
.avatar-chip.arriving{background:#fff;color:var(--muted);border:2px dashed var(--ink);gap:10px}
.avatar-chip.arriving b{display:block;color:var(--ink);font-size:.98rem}
.avatar-chip.arriving small{display:block;font-size:.78rem;line-height:1.3}
.emo.arriving-pen{height:34px;animation:scribble 1.1s ease-in-out infinite}
@keyframes scribble{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(8deg) translateY(-3px)}}
.players-mini>span.arriving{background:#fff;color:var(--muted);border:2px dashed var(--ink)}
.players-mini>span.arriving small{font-size:.75rem}
.players-mini>span.arriving .emo{height:1.4em}
/* ---- Reveal waits for the host ---- */
.host-hint{margin:-4px 0 10px;color:var(--muted);font-weight:700}
.host-controls .primary.pulse{animation:pulse-btn 1.4s ease-in-out infinite}
@keyframes pulse-btn{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* ---- The next button stays in view while the host scrolls through a long reveal ---- */
.host-controls.sticky{position:sticky;bottom:12px;z-index:5;padding:8px 0}
.host-controls.sticky .primary{box-shadow:0 6px 0 var(--red-deep),0 10px 24px rgba(0,0,0,.18)}
/* ---- TV: red X restarts the game (after a confirm) ---- */
.reset-btn{width:38px;height:38px;border-radius:50%;background:var(--red-ui);color:#fff;border:2px solid var(--ink);font-weight:900;font-size:1.05rem;line-height:1;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.reset-btn:hover{transform:rotate(90deg)}
.modal{position:fixed;inset:0;background:rgba(23,23,23,.45);display:grid;place-items:center;z-index:60;padding:20px}
.modal[hidden]{display:none}
.modal-box{background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:var(--sticker);padding:28px 30px;max-width:520px;text-align:center}
.modal-box h2{margin:0 0 8px}
.modal-box p{color:var(--muted);margin:0 0 18px}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* ---- Phone: personal sound switch beside the connection dot ---- */
.phone-header{gap:10px}
.phone-sound{position:relative;background:none;border:0;padding:2px;margin-inline-start:auto;line-height:0;cursor:pointer}
.phone-sound .emo{height:26px;width:auto;margin:0;transition:filter var(--dur),opacity var(--dur)}
.phone-sound.off .emo{filter:grayscale(1);opacity:.45}
.phone-sound .off-mark{display:none;position:absolute;right:-5px;bottom:-4px;width:15px;height:15px;border-radius:50%;background:var(--red-ui);color:#fff;font-style:normal;font-size:9px;font-weight:900;line-height:15px;text-align:center;border:1.5px solid #fff}
.phone-sound.off .off-mark{display:block}
/* ---- Phone header: from the left, X · speaker · connection ---- */
.phone-head-actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto;flex-direction:row}
.phone-sound{margin-inline-start:0}
.reset-btn.small{width:30px;height:30px;font-size:.9rem;box-shadow:1.5px 1.5px 0 var(--ink)}
.modal-box .modal-actions .wide{width:100%}
/* ---- Next button: on the right, under the drawing, never over the cards ---- */
.host-controls.sticky{justify-content:flex-start;padding-inline-start:clamp(8px,2vw,24px)}
/* ---- Phone standings with rank circles (1, 2, 3…) ---- */
.standings-title{display:block;text-align:center;margin:16px 0 8px}
.rank-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:.9rem;font-weight:900;direction:ltr;margin-inline-end:6px;flex-shrink:0}
.rank-num.r1{background:var(--red-ui);box-shadow:0 0 0 3px var(--red-tint)}
.small-score-row.me .rank-num{outline:2px solid var(--ink);outline-offset:1px}

/* rank digits stay white even inside score rows */
.small-score-row .rank-num{color:#fff}
/* ---- «شلون تلعب؟» ---- */
.howto-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:14px auto 0;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:9px 18px;font-weight:900;font-size:1rem;box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-family:inherit}
.howto-btn.tiny{width:30px;height:30px;padding:0;margin:0;font-size:1.05rem;box-shadow:1.5px 1.5px 0 var(--ink)}
.howto-box{position:relative;text-align:right;max-width:560px;max-height:90vh;overflow:auto}
.howto-box h2{text-align:center;margin:4px 0 14px}
.howto-close{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--ink);font-weight:900;cursor:pointer}
.howto-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:step}
.howto-steps li{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:start;background:var(--paper-2,#fafafa);border:2px solid var(--ink);border-radius:16px;padding:12px 14px}
.howto-steps .emo{height:42px;width:42px;margin:4px 0 0}
.howto-steps b{display:block;font-family:var(--display);font-size:1.15rem;margin-bottom:2px}
.howto-steps span{color:var(--muted);line-height:1.6;font-size:.95rem}
.howto-foot{text-align:center;color:var(--muted);margin:14px 0 12px;font-weight:700}
/* ---- How-to-play: fits a phone, OK button always reachable ---- */
.howto-box{padding:22px 18px 14px;display:flex;flex-direction:column}
.howto-box #howToOk{position:sticky;bottom:0;margin-top:4px;box-shadow:0 5px 0 var(--red-deep),0 -12px 16px #fff}
@media(max-width:600px){
  .howto-box{max-height:92vh;padding:20px 14px 12px;border-radius:20px}
  .howto-box h2{font-size:1.6rem;margin-bottom:10px}
  .howto-steps{gap:8px}
  .howto-steps li{grid-template-columns:40px 1fr;gap:10px;padding:9px 11px;border-radius:13px}
  .howto-steps .emo{height:34px;width:34px;margin-top:2px}
  .howto-steps b{font-size:1.05rem}
  .howto-steps span{font-size:.86rem;line-height:1.5}
  .howto-foot{margin:10px 0 8px;font-size:.88rem}
}
/* ---- Phone header: X · ? · speaker · connection, all the same size; a smaller «متصل» ---- */
.phone-head-actions{gap:10px}
.phone-head-actions .mini-status{font-size:.74rem;display:inline-flex;align-items:center;gap:4px}
.phone-head-actions .mini-status .emo.dot{height:13px;width:13px;margin:0}
.phone-head-actions .howto-btn.tiny,.phone-head-actions .reset-btn.small{width:30px;height:30px;flex-shrink:0}
.phone-head-actions .phone-sound .emo{height:24px}
/* ---- «شلون تلعب؟» button: right under the options, question mark on the left ---- */
.howto-btn{margin:18px auto 0}
.howto-btn .q{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red-ui);color:#fff;font-size:.95rem;font-weight:900}
.home-footnote{margin-top:18px}
/* the first page gets the same header strip as the game pages: the speaker sits at its left end and scrolls with the page */
.home-header{min-height:31px;margin-bottom:6px}.home-header .phone-head-actions{margin-inline-start:auto}
/* the two pills under the home options: «شلون تلعب؟» and «ليش سوّينا اللعبة؟» */
.home-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}.home-links .howto-btn{margin:0}
.why-box p{margin:0 0 12px;line-height:1.85;font-size:1.02rem;text-align:start}.why-box p .emo{height:1.2em;width:auto;vertical-align:-0.25em;margin:0 2px}
.why-box .why-big{font-weight:900;font-size:1.12rem;color:var(--red-ui);text-align:center;margin:4px 0 16px}
/* the first page starts right under the status bar, like the game pages */
.home-wrap{padding-top:12px}@media (min-width:700px){.home-wrap{padding-top:24px}}.home-header{margin-bottom:2px}
/* Fares: the logo sits closer to the words under it (half the old gap) */
.home-logo-card{margin-bottom:22px}@media(max-width:600px){.home-logo-card{margin-bottom:31px}}
/* ---- The first page as a view inside the phone app ---- */
.home-view{padding:0 0 6px;max-width:none}
/* Fares: no bar and no speaker on the first page; the sound switch lives on the game pages */
.home-mode .phone-header{display:none}
.home-view{margin-top:auto;margin-bottom:auto}
/* ---- Fares: the first two phone screens fit the phone without scrolling ---- */
@media(max-width:600px){
  .phone-shell{padding-top:10px;padding-bottom:8px}
  .phone-header{margin-bottom:4px}
  .phone-footer{margin:8px 0 0;font-size:.72rem}
  /* Fares 17 Oct: the first page looked small with empty space above and below. Every size now grows with the
     phone's height (svh), from the old sizes on a small phone up to a cap on a big one, and the cards take the full width. */
  .home-view{width:100%}
  .home-view .home-logo-card{max-width:none;width:auto;height:clamp(120px,25svh,240px);margin:0 auto clamp(6px,1.6svh,14px)}
  .home-view .home-logo-card img{width:auto;height:100%;max-width:100%}
  .home-view .home-tag{font-size:clamp(.95rem,2.75svh,1.25rem)}
  .home-view .home-description{font-size:clamp(.92rem,2.55svh,1.15rem);margin:2px auto clamp(8px,1.6svh,14px);max-width:34ch;line-height:1.45}
  .home-view .home-options{gap:clamp(8px,1.6svh,13px)}
  .home-view .home-option{--icon:clamp(48px,7.8svh,60px);padding:clamp(9px,1.4svh,13px) clamp(10px,3vw,16px);border-radius:18px;grid-template-columns:var(--icon) 1fr;column-gap:clamp(8px,2.6vw,12px)}
  .home-view .home-option-icon,.home-view .home-red .home-option-icon{width:var(--icon);height:var(--icon)}
  .home-view .home-option-icon img{width:100%;height:100%}
  .home-view .home-option b{font-size:clamp(1rem,2.85svh,1.3rem)}
  .home-view .home-option small{font-size:clamp(.7rem,3.2vw,.92rem);margin-top:0;line-height:1.35;text-wrap:balance}
  .home-view .home-links{margin-top:clamp(10px,1.8svh,16px);gap:10px}
  .home-view .home-links .howto-btn{padding:clamp(6px,1.3svh,10px) clamp(12px,3.6vw,18px);font-size:clamp(.88rem,2.5svh,1.08rem)}
  .home-view .home-links .howto-btn .q{width:clamp(20px,3.3svh,26px);height:clamp(20px,3.3svh,26px);font-size:clamp(.8rem,2.1svh,.95rem)}
  .home-view .home-footnote{margin-top:clamp(8px,1.6svh,14px);font-size:clamp(.76rem,2.1svh,.95rem)}
  .phone-main{gap:8px;justify-content:flex-start}
  .phone-main>:first-child{margin-top:auto}.phone-main>:last-child{margin-bottom:auto}   /* centred when there is room, never clipped when there is not */
  .welcome-card{padding:0 4px 4px}
  .welcome-car{width:auto;height:min(17svh,130px);margin:0 auto 4px}
  .welcome-card h1{font-size:1.9rem;margin:0 0 4px}
  .welcome-card .muted{font-size:.9rem;margin:0;line-height:1.5}
  .form-panel{padding:12px 12px 10px;border-radius:16px}
  .field{margin-bottom:5px;font-size:.92rem}
  .text-input{padding:9px 12px;margin-bottom:9px;font-size:1.02rem;border-radius:12px}
  .text-input.room-input{font-size:1.35rem;padding:7px 12px}
  .form-panel .primary.large{padding:11px 16px;font-size:.98rem;border-radius:13px}
  .join-extra{gap:6px;margin-top:6px}
  .join-extra .outline{padding:8px 14px;font-size:.92rem}
  .join-extra .quiet-link{margin:4px auto 0;font-size:.88rem}
}
@media(max-width:600px) and (max-height:660px){.home-view .home-footnote{display:none}.home-view .home-options{gap:6px}}
/* hidden must win over display rules (the phone main is display:flex): going back to the first page hides the join form */
[hidden]{display:none!important}
/* Fares: the phone says whose drawing it is (for the laughs), in the artist's colour */
.artist-tag{display:inline-flex;align-items:center;gap:6px;background:var(--pc,var(--red-ui));color:var(--pc-ink,#fff);margin-inline-start:6px}.artist-tag .mini-player-avatar{width:22px;height:22px;border-radius:6px;background:#fff;margin:0}
/* writing screen: no repeated title; the artist chip and the drawing number get the row */
.phone-phase-title.chips-only{justify-content:flex-start;gap:10px;flex-wrap:wrap}.chips-only .tag{font-size:1.02rem;padding:8px 14px}.chips-only .artist-tag{margin-inline-start:0}.chips-only .artist-tag .mini-player-avatar{width:26px;height:26px}
/* 1.6, like Drawful: a handed-in drawing shows on the TV right away */
.draw-status.has-art{padding:8px 8px 10px}.draw-status .draw-thumb{display:block;width:100%;max-height:96px;aspect-ratio:640/440;object-fit:contain;background:#fff;border-radius:10px;margin:0 0 6px;animation:pop-in .45s ease both}.draw-status.has-art strong{display:inline-flex;align-items:center;gap:6px}.draw-status.has-art .mini-player-avatar{width:22px;height:22px;border-radius:6px;background:#fff;margin:0}
/* ---- 1.6 reveal, like Drawful: one card on stage at a time ---- */
.spot-intro{text-align:center;padding:30px 10px}.spot-intro h2{font-size:clamp(2.2rem,4vw,3.4rem);margin:8px 0}.spot-intro p{color:var(--muted);font-size:1.2rem}
.spotlight{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:6px 0;animation:spot-in .45s ease both}
.spot-count{font-weight:800;color:var(--red-ui);font-size:1.15rem}
.spot-title{font-family:var(--display);font-size:clamp(2rem,3.3vw,3.1rem);line-height:1.3;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:14px 24px;box-shadow:6px 6px 0 var(--ink);transform:rotate(-1.2deg);max-width:100%}
.spotlight.correct .spot-title{border-color:#1fa65a;box-shadow:6px 6px 0 #1fa65a}
.spot-voters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:1.2rem;font-weight:800}
.spot-voters .voter{display:inline-flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:5px 14px 5px 8px}
.spot-voters .chip-avatar{width:34px;height:34px}
.spot-voters.self{color:var(--red-ui)}
.pop-seq{animation:pop-in .45s ease both;animation-delay:var(--d,0s)}
.spot-stamp{font-family:var(--display);font-size:clamp(1.7rem,2.8vw,2.6rem);color:#fff;background:var(--red-ui);border-radius:16px;padding:10px 22px;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;transform:rotate(-3deg);animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both;box-shadow:4px 4px 0 var(--ink)}
.spot-stamp.robot{background:#3a3a3a}.spot-stamp.truth{background:#1fa65a}
.spot-stamp small{font-family:var(--font);font-size:1.05rem;display:inline-flex;align-items:center;gap:6px}
.spot-stamp b{font-family:var(--font);font-size:1.1rem;background:#fff;color:var(--ink);border-radius:999px;padding:4px 14px}
.spot-stamp .chip-avatar{width:36px;height:36px;background:#fff;border-radius:10px}
.spot-streak{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1.2rem;animation:pop-in .45s ease .35s both}.spot-streak b{color:var(--red-ui)}
.voters.streak{font-weight:800;color:var(--red-ui)}
@keyframes stamp{from{transform:scale(2.2) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes spot-in{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.spotlight,.spot-stamp,.pop-seq,.spot-streak{animation:none}}
/* ---- 1.6 end, like Drawful: standings, then the winner, then the likes ---- */
.winner-reveal h1{font-size:clamp(2.4rem,4.4vw,3.8rem)}
.winners{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.winner{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--pc,var(--red-ui));color:var(--pc-ink,#fff);border:3px solid var(--ink);border-radius:26px;padding:22px 38px;box-shadow:6px 6px 0 var(--ink);animation:stamp .6s cubic-bezier(.2,1.6,.4,1) both}
.winner-avatar{width:150px;height:150px;object-fit:contain;background:#fff;border-radius:28px}
.winner strong{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.2}.winner b{font-size:1.35rem}
.likes-list .score-row.king{background:var(--red-tint,#fdeceb);border-color:var(--red-ui)}
.likes-final .best-bluff{max-width:640px;margin:16px auto 0}
/* the likes screen fits the TV with its button */
.likes-final>.big-emoji .emo{height:54px;width:auto}.likes-final h1{font-size:clamp(2rem,3.4vw,2.8rem);margin:4px 0 12px}
.likes-final .score-list{gap:8px}.likes-final .score-row{padding:8px 18px;min-height:0}
.likes-final .best-bluff{margin-top:12px;padding:12px 18px}.likes-final .host-controls{margin-top:12px}
/* the winner on the phone: the TV's card, smaller */
.winner-phone .winners{gap:12px;margin:10px 0}.winner-phone .winner{padding:14px 22px;border-radius:20px}
.winner-phone .winner-avatar{width:96px;height:96px;border-radius:20px}.winner-phone .winner strong{font-size:2rem}.winner-phone .winner b{font-size:1.05rem}
/* Fares: «رسمة فلان» sits under the drawing frame, never on the drawing */
.art-frame-wrap{display:flex;flex-direction:column;align-items:flex-start}
.art-frame-wrap .artwork-container{width:100%}
.art-frame-wrap .paper-sticker{position:static;margin:14px 5% 0 0;align-self:flex-start}
/* under the reveal: where everyone stands right now */
.reveal-points.standings{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:7px}.standings .point-chip{padding:7px 9px}
.standings .point-chip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:8px;row-gap:1px;text-align:start;align-items:center;border-color:var(--pc-line,var(--ink))}
.standings .point-chip .rank-num{grid-row:1 / span 3;margin:0}
.standings .point-chip .pc-name{font-weight:800}
.standings .point-chip b{margin:0;direction:ltr;text-align:start}
.standings .point-chip small{color:var(--muted);font-weight:700;font-size:.78rem}
/* the three loading dots get room under the time bar */
.phase-card .waiting-orbs{margin-top:18px}
/* Fares: the drawing hint sits centred under the button and wraps instead of running off the screen */
.draw-hint{text-align:center;max-width:32ch;margin:6px auto 0;line-height:1.6;white-space:normal}
/* 1.6.1: the reveal spotlight on the phone (same as the TV, phone sized) */
.spot-phone{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:16px;box-shadow:5px 5px 0 var(--ink);gap:12px;align-items:stretch}
.spot-phone .spot-count{font-size:.95rem}
.spot-phone .spot-title{font-size:1.55rem;padding:10px 16px;box-shadow:4px 4px 0 var(--ink);align-self:flex-start}
.spot-phone.correct .spot-title{box-shadow:4px 4px 0 #1fa65a}
.spot-phone .spot-voters{font-size:1rem;gap:7px}.spot-phone .spot-voters .voter{padding:4px 10px 4px 6px}.spot-phone .spot-voters .mini-player-avatar{width:26px;height:26px;margin:0}
.spot-phone .spot-stamp{font-size:1.35rem;padding:8px 14px;align-self:flex-start}.spot-phone .spot-stamp b{font-size:.9rem}.spot-phone .spot-stamp small{font-size:.9rem}
.spot-phone .spot-streak{font-size:1rem}
.spot-art{max-height:22vh;margin-top:10px}
/* Fares: the owner's note sits a little under its button, and «كل العناوين» stays on one line */
.owner-note{margin-top:14px;text-align:center}
.phone-title.one-line{white-space:nowrap;flex:1}
/* Fares: the artist chip stays inside the screen; a long name gets «…» */
.phone-phase-title{flex-wrap:wrap;row-gap:8px}
.phone-phase-title .artist-tag{max-width:min(62vw,240px);min-width:0}
.artist-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* ---- 1.6.1 points race: rows slide to their new place, bars grow, scores count up ---- */
.race-step{font-weight:800;color:var(--red-ui);font-size:1.25rem;margin:0 0 6px;text-align:center}
.race-board{--row:66px;position:relative;height:calc(var(--rows) * var(--row));width:min(100%,880px);margin:8px auto 0}
.race-row{position:absolute;inset-inline:0;top:0;height:calc(var(--row) - 10px);transform:translateY(calc(var(--i) * var(--row)));transition:transform .75s cubic-bezier(.3,1.25,.5,1);
  display:grid;grid-template-columns:auto auto minmax(90px,auto) 1fr auto auto;align-items:center;gap:12px;background:#fff;border:2px solid var(--pc-line,var(--ink));border-radius:16px;padding:0 16px}
.race-row .race-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.race-row .rank-num{margin:0}
.race-row .chip-avatar,.race-row .mini-player-avatar{width:38px;height:38px;margin:0;border-radius:10px;background:#fff}
.race-bar{height:20px;border-radius:999px;background:rgba(23,23,23,.08);overflow:hidden}
/* Fares 18 Oct: the bar is the player's own card colour, outlined in its deep shade so it shows on the grey track */
.race-bar i{display:block;height:100%;background:var(--pc,var(--red-ui));box-shadow:inset 0 0 0 2.5px var(--pc-line,var(--ink));border-radius:999px;transition:width .9s ease}
.race-score{font-size:1.3rem;min-width:84px;text-align:start;direction:ltr;font-variant-numeric:tabular-nums}
.race-gain{color:var(--red-ui);font-weight:900;min-width:64px;direction:ltr;text-align:start}
.race-gain.pop-gain{animation:pop-in .5s ease both}
.race-tease{font-weight:800;color:var(--red-ui)}
/* the race on the phone */
.race-phone .race-board{--row:54px}
.race-phone .race-row{grid-template-columns:auto auto 1fr auto auto;gap:7px;padding:0 10px 8px}
.race-phone .race-bar{position:absolute;inset-inline:10px;bottom:6px;height:5px}
.race-phone .race-bar i{background:var(--pc-line,var(--red-ui));box-shadow:none}   /* a 5px line on the phone: the deep shade, or it vanishes */
.race-phone .race-score{font-size:1.05rem;min-width:0}.race-phone .race-gain{min-width:0;font-size:.85rem}
.race-phone .race-row .mini-player-avatar{width:30px;height:30px}
/* 1.6.3: typing a title on the phone keeps the drawing in view above the keyboard */
.typing .guess-art{max-height:24vh}
.typing .countdown-below{margin:4px 0 6px}
.typing #playerMain{padding-bottom:45vh}
/* 1.6.3: the race bar on the phone sits well under the names and numbers */
.race-phone .race-board{--row:64px}
.race-phone .race-row{padding:0 10px 16px;align-items:center}
.race-phone .race-bar{bottom:7px;height:5px}
/* 1.6.3: when the stamp lands only the stamp animates; the card stays put (no second slide-in) */
.spotlight.stamped{animation:none}
/* ---- /how-to-play: the page Google reads about the game (Fares, 18 Oct 2026) ---- */
.article-page{max-width:680px;margin:0 auto;padding:20px 16px 48px}
.article-logo{display:block;width:min(70%,300px);margin:6px auto 14px}.article-logo img{display:block;width:100%;height:auto}
.article-page h1{font-size:clamp(1.5rem,6vw,2.1rem);text-align:center;margin:0 0 10px}
.article-lead{font-size:1.05rem;line-height:1.85;color:#3f3f3f;text-align:center;margin:0 auto 18px;max-width:46ch}
.article-cta{display:block;text-align:center;text-decoration:none;margin:18px 0}
.article-card{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:var(--sticker);padding:16px 18px;margin:18px 0}
.article-card h2{font-size:1.3rem;margin:0 0 8px;color:var(--red-ui)}
.article-card h3{font-family:inherit;font-size:1.02rem;font-weight:800;margin:14px 0 2px}
.article-card p{margin:0;line-height:1.8}
.article-card ol,.article-card ul{margin:0;padding-inline-start:22px;line-height:1.9}
.article-card a,.howto-foot a{color:var(--red-ui);font-weight:700}
.article-foot{text-align:center;color:var(--muted);font-size:.9rem;margin-top:22px}