/* Approved Khallat sketch world: cream paper, black ink, purple and yellow. */
body.khallat-stage-phase { background:#111 !important; color:#111; overflow:hidden !important; }
html body.khallat-stage-phase #app { position:fixed !important; inset:0 !important; width:100% !important; height:100dvh !important; min-height:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; zoom:1 !important; transform:none !important; overflow:hidden !important; }
body.khallat-stage-phase .page-header, body.khallat-stage-phase #top-left-bar, body.khallat-stage-phase #fullscreen-btn { display:none !important; }
html:not(.native) body.khallat-stage-phase[data-theme]:not(.select-phase):not(.lobby-phase) #fullscreen-btn { display:none !important; }
html body.khallat-stage-phase #host-player-switch { display:none !important; }
body.khallat-stage-phase #game-controls { position:fixed !important; inset:auto auto max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)) !important; z-index:80; }
body.khallat-stage-phase #game-controls button { color:#fff8e6; background:#111; border:2px solid #ffe000; border-radius:2px; min-height:36px; }
.kh-stage { --kh-ink:#111; --kh-yellow:#ffe000; --kh-purple:#7600ec; position:absolute; inset:0; overflow:hidden; background:#fffae9 url('/assets/khallat/sketch/tv-play.webp') center/100% 100% no-repeat; color:#111; direction:rtl; font-family:'Cairo',sans-serif; isolation:isolate; }
.kh-stage *, .kh-detail *, .kh-rules-dialog * { box-sizing:border-box; }
.kh-stage button,.kh-detail button,.kh-rules-dialog button { font-family:inherit; cursor:pointer; }
.kh-stage :focus-visible,.kh-detail :focus-visible,.kh-rules-dialog :focus-visible { outline:4px solid #7600ec; outline-offset:4px; }
.kh-stage button:disabled { opacity:.5; cursor:default; }
.kh-primary,.kh-secondary { min-height:48px; border:3px solid #111; border-radius:0; padding:8px 26px; color:#111; background:#ffe000; font-size:clamp(16px,1.7vw,24px); font-weight:900; box-shadow:4px 4px 0 #111; }
.kh-secondary { background:#fffae9; }
.kh-stage .kh-primary,.kh-stage .kh-secondary { border-radius:0 !important; text-shadow:none; }
.kh-primary:active,.kh-secondary:active { transform:translate(2px,2px); box-shadow:2px 2px 0 #111; }
.kh-hud { position:absolute; inset:3% 3% auto; z-index:4; display:flex; justify-content:space-between; align-items:center; height:12%; pointer-events:none; }
.kh-hud-logo { width:clamp(90px,14vw,190px); height:100%; object-fit:contain; }
.kh-hud-ticket { position:absolute; left:50%; transform:translateX(-50%) rotate(-2deg); background:#111; color:#fffae9; padding:8px 18px; font-size:clamp(13px,1.7vw,23px); font-weight:900; }
.kh-hud .answer-timer { margin:0 !important; width:clamp(54px,7vw,88px) !important; height:clamp(54px,7vw,88px) !important; min-width:0 !important; border:4px solid #111 !important; outline:3px solid #ffe000; border-radius:50% !important; background:#ffe000 !important; color:#111 !important; box-shadow:none !important; justify-content:center; padding:0 !important; }
.kh-hud .answer-timer .at-clock,.kh-hud .answer-timer .at-label,.kh-hud .answer-timer .at-track { display:none; }
.kh-hud .answer-timer .at-num { font-size:clamp(22px,3vw,36px); color:#111; }
.kh-blender { position:relative; aspect-ratio:2/3; }
.kh-blender img { display:block; width:100%; height:100%; object-fit:contain; }
.kh-blender-loop { display:none; position:absolute; inset:0; background:url('/assets/khallat/sketch/blender-loop.webp') 0 0/800% 100% no-repeat; }
.kh-blender.is-blending img { visibility:hidden; }
.kh-blender.is-blending .kh-blender-loop { display:block; animation:kh-blend .8s steps(8) infinite; }
@keyframes kh-blend { to { background-position:114.285714% 0; } }
.kh-stage.is-paused * { animation-play-state:paused !important; }
.kh-lobby { background-image:url('/assets/khallat/sketch/tv-lobby.webp'); }
.kh-lobby-art { position:absolute; left:3%; top:5%; width:29%; height:76%; display:flex; flex-direction:column; align-items:center; }
.kh-lobby-art .kh-logo { width:95%; height:26%; object-fit:contain; }
.kh-lobby-art .kh-blender { height:72%; max-width:100%; }
.kh-lobby-main { position:absolute; right:4%; top:5%; width:57%; height:74%; display:flex; align-items:center; flex-direction:column; }
.kh-lobby-main h1 { margin:0 0 2%; font-size:clamp(20px,2.6vw,38px); }
.kh-join-code { background:#ffe000; border:5px solid #111; border-radius:0 !important; box-shadow:7px 7px 0 #111; padding:0 26px; font-size:clamp(34px,5.1vw,74px); font-weight:950; letter-spacing:.14em; line-height:1.45; color:#111; }
.kh-lobby-main p { margin:10px 0 0; font-size:clamp(12px,1.5vw,20px); font-weight:800; }
.kh-join-url { font-size:clamp(10px,1.1vw,15px); color:#51009c; direction:ltr; max-width:100%; overflow-wrap:anywhere; }
.kh-lobby-roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 16px; width:100%; flex:1; min-height:0; overflow:auto; align-content:start; margin-top:8px; }
.kh-person { position:relative; display:flex; flex-direction:column; justify-content:end; align-items:center; min-width:0; }
.kh-person img { width:100%; height:clamp(44px,10vh,105px); object-fit:contain; }
.kh-person strong { font-size:clamp(11px,1.3vw,18px); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kh-empty { grid-column:1/-1; text-align:center; }
.kh-empty img { height:90px; }
.kh-lobby-footer { position:absolute; bottom:4%; left:3%; right:4%; display:flex; justify-content:space-between; align-items:center; direction:ltr; color:#ffe000; gap:16px; font-size:clamp(14px,1.9vw,24px); font-weight:900; }
.kh-lobby-footer>div { display:flex; gap:18px; direction:rtl; }
.kh-lobby-tools { position:absolute; left:14px; top:10px; display:flex; gap:8px; }
.kh-lobby-tools button { background:#111; color:#fff8e6; padding:4px 10px; border:1px solid #ffe000; min-height:32px; font-size:13px; border-radius:0 !important; }
.kh-lobby #lobby-free-note { position:absolute; bottom:0; right:4%; margin:0; color:#fffae9; font-size:10px; }
.kh-question-stage>.kh-blender { position:absolute; left:3%; top:25%; height:52%; width:20%; }
.kh-question { position:absolute; top:24%; right:6%; width:70%; height:44%; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.kh-question h1 { font-size:clamp(24px,4.2vw,64px); line-height:1.5; margin:0; text-wrap:balance; overflow-wrap:anywhere; }
.kh-question p { color:#6900ce; font-size:clamp(15px,2vw,28px); margin:16px 0 0; font-weight:900; }
.kh-roster { position:absolute; bottom:4%; left:4%; right:4%; height:19%; display:flex; align-items:end; gap:12px; }
.kh-roster .kh-person { flex:1; color:#fff; }
.kh-roster { left:max(4%,var(--ph-safe-left,env(safe-area-inset-left))); right:max(4%,var(--ph-safe-right,env(safe-area-inset-right))); bottom:max(4%,var(--ph-safe-bottom,env(safe-area-inset-bottom))); }
.kh-roster .kh-person img { height:clamp(42px,13vh,130px); }
.kh-ready { position:absolute; bottom:22%; left:8%; border:3px solid #111; width:24px; height:24px; border-radius:50%; background:#fffae9; }
.is-done .kh-ready { background:#ffe000; }
.is-done .kh-ready::after { content:'✓'; position:absolute; inset:-2px; text-align:center; color:#111; font-weight:950; }
.kh-progress-count { position:absolute; bottom:23%; left:4%; padding:3px 12px; background:#ffe000; font-weight:900; font-size:clamp(12px,1.5vw,20px); }
.kh-mixing { background-image:url('/assets/khallat/sketch/tv-finale.webp'); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ffe000; }
.kh-mixing h1 { margin:9vh 0 0; font-size:clamp(24px,4vw,60px); }
.kh-mixing .kh-blender { height:58%; }
.kh-mixing p { font-size:clamp(16px,2.4vw,28px); margin:0; color:#fffae9; }
.kh-vote-question { position:absolute; top:17%; right:8%; left:8%; margin:0; font-size:clamp(19px,2.5vw,36px); text-align:center; }
.kh-answer-deck { position:absolute; inset:29% 5% 16%; display:grid; grid-template-columns:repeat(var(--kh-cols),minmax(0,1fr)); grid-auto-rows:max-content; gap:16px; overflow-y:auto; padding:4px 7px 8px; align-content:start; }
.kh-stage .kh-answer-paper { position:relative; height:auto; border:3px solid #111; border-radius:0; background:#fffbed; box-shadow:4px 4px 0 #111; min-width:0; }
.kh-answer-paper { padding:18px 40px 15px 14px; min-height:110px; }
.kh-answer-mark { position:absolute; right:7px; top:8px; font-size:18px; font-weight:900; background:#ffe000; border:2px solid #111; padding:0 7px; }
.kh-answer-text { font-size:clamp(16px,1.8vw,28px); font-weight:900; line-height:1.6; overflow-wrap:anywhere; }
.kh-result-stamp { display:none; color:#6000bd; font-weight:900; font-size:18px; }
.kh-result-author,.kh-result-bonus { display:none; font-size:14px; }
.show-votes .kh-result-stamp,.show-authors .kh-result-author,.show-authors .kh-result-bonus { display:block; }
.show-winner .kh-answer-paper.is-winner { background:#ffe000; }
.kh-vote-footer { position:absolute; bottom:6%; left:6%; right:6%; display:flex; justify-content:space-between; color:#fff; font-weight:900; font-size:clamp(14px,1.8vw,23px); }
.kh-scores { background-image:url('/assets/khallat/sketch/tv-finale.webp'); color:#fffae9; }
.kh-score-sheet { position:absolute; inset:18% 12% 9%; display:flex; flex-direction:column; min-height:0; }
.kh-score-title { text-align:center; font-size:clamp(22px,3vw,44px); font-weight:950; color:#ffe000; }
.kh-score-sub { text-align:center; font-size:clamp(16px,1.8vw,26px); }
.kh-score-list { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; align-content:start; padding:12px 0; }
.kh-score-row { display:flex; align-items:center; gap:12px; border-bottom:1px solid #8a53ad; padding:4px 0; min-width:0; }
.kh-score-avatar { height:clamp(40px,7vh,70px); width:60px; object-fit:contain; border:0; border-radius:0; }
.kh-score-rank { font-size:20px; color:#ffe000; }
.kh-score-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:clamp(13px,1.6vw,22px); font-weight:900; }
.kh-score-value { color:#ffe000; font-size:clamp(16px,2vw,28px); font-weight:900; white-space:nowrap; }
.kh-score-delta { display:block; font-size:12px; color:#fffae9; }
.kh-finale .kh-score-sheet { inset:20% 39% 19% 5%; }
.kh-finale .kh-score-list { grid-template-columns:1fr; gap:4px; padding:0; }
.kh-finale .kh-score-row { background:#fffbed; color:#111; border:3px solid #111; padding:0 12px; flex-direction:row; }
.kh-finale .kh-score-row.is-first { background:#ffe000; }
.kh-finale .kh-score-value,.kh-finale .kh-score-rank,.kh-finale .kh-score-delta { color:#111; }
.kh-finale .kh-score-avatar { height:38px; width:42px; }
.kh-finale .kh-final-actions { position:fixed; bottom:4%; right:5%; left:5%; }
.kh-champions { position:absolute; right:5%; top:15%; width:29%; height:68%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.kh-champions h1 { font-size:clamp(22px,3.3vw,46px); margin:0; color:#ffe000; }
.kh-champion-portraits { flex:1; min-height:0; display:flex; justify-content:center; flex-wrap:wrap; overflow:auto; width:100%; }
.kh-champion-portraits img { max-width:100%; width:clamp(60px,14vw,190px); height:100%; max-height:26vh; object-fit:contain; }
.kh-champions .kh-trophy { position:static; width:100px; height:16vh; }
.kh-champions h2 { margin:0; font-size:clamp(18px,2.5vw,36px); }.kh-champions p { margin:0; font-size:clamp(14px,1.6vw,24px); }
.kh-final-actions { display:flex; justify-content:center; gap:14px; padding-top:10px; }
.kh-final-actions button { min-height:44px; padding:8px 22px; background:#ffe000; color:#111; font-weight:900; border:3px solid #111; font-size:clamp(13px,1.5vw,20px); }
.kh-stage .kh-final-actions button { border-radius:0; text-shadow:none; background:#fffae9; }
.kh-stage .kh-final-actions button:first-child { background:#ffe000; }
.kh-trophy { position:absolute; left:2%; top:28%; width:12%; height:40%; object-fit:contain; }
.kh-rules-steps { display:flex; gap:30px; }
.kh-rules-steps article { flex:1; min-width:0; }
.kh-rules-steps b { display:grid; place-items:center; width:52px; height:52px; background:#ffe000; border:3px solid #111; border-radius:50%; font-size:30px; }
.kh-rules-steps h2 { font-size:clamp(20px,2.4vw,34px); margin:16px 0 6px; }
.kh-rules-steps p { font-size:clamp(15px,1.6vw,22px); line-height:1.9; margin:0; }
.kh-rules>.kh-rules-steps { position:absolute; inset:26% 8% 25%; overflow:auto; }
.kh-rules-start { position:absolute; bottom:10%; right:8%; }
.kh-rules-dialog { width:min(900px,92vw); max-height:90dvh; overflow:auto; border:5px solid #111; padding:32px; color:#111; background:#fffae9; font-family:'Cairo',sans-serif; }
.kh-rules-dialog::backdrop { background:#000b; }
.kh-rules-dialog>.kh-primary { margin-top:24px; }
.kh-detail { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; border:0; padding:0 0 110px; z-index:500; overflow:auto; color:#111; background:#fffae9 url('/assets/khallat/sketch/phone-paper.webp') center/cover fixed; font-family:'Cairo',sans-serif; }
.kh-detail-hero { position:relative; min-height:340px; background:#7100e9 url('/assets/khallat/sketch/tv-finale.webp') center/cover; display:flex; align-items:center; justify-content:center; gap:24px; padding:calc(60px + env(safe-area-inset-top)) 7% 30px; color:#fff9e9; }
.kh-detail-hero>.kh-blender { width:190px; max-height:270px; }
.kh-detail-hero-copy { max-width:460px; }
.kh-detail-hero-copy>img { width:260px; max-width:90%; }
.kh-detail h1 { font-size:clamp(26px,4vw,46px); line-height:1.5; margin:12px 0; }
.kh-detail-back { position:absolute; right:max(20px,env(safe-area-inset-right)); top:calc(14px + env(safe-area-inset-top)); background:#111; border:2px solid #fff9e9; color:#fff9e9; min-height:44px; padding:8px 18px; font-size:17px; }
.kh-detail-body { max-width:1000px; margin:auto; padding:28px; }
.kh-detail-body>h2 { text-align:center; font-size:clamp(28px,4vw,48px); margin:14px 0 24px; }
.kh-detail-demo { display:block; width:100%; max-width:650px; margin:0 auto 32px; border:4px solid #111; background:#7600ec; color:#ffe000; min-height:130px; font-family:inherit; font-size:28px; font-weight:950; }
.kh-detail-demo { display:flex; align-items:center; justify-content:center; gap:30px; background:#7600ec url('/assets/khallat/sketch/tv-finale.webp') center/cover; }
.kh-detail-demo>.kh-blender { height:175px; }
.kh-demo { width:min(800px,94vw); max-height:94dvh; overflow:auto; background:#fffbed url('/assets/khallat/sketch/tv-play.webp') center/100% 100%; color:#111; border:5px solid #111; font-family:'Cairo',sans-serif; padding:30px; text-align:center; }
.kh-demo::backdrop { background:#000b; }
.kh-demo h2 { margin:0; font-size:32px; }.kh-demo h3 { font-size:24px; }.kh-demo>.kh-blender { height:min(35vh,260px); margin:auto; }.kh-demo p { font-size:22px; font-weight:800; }.kh-demo-close { float:left; font-size:14px; padding:4px 10px; }.kh-demo-actions { display:flex; justify-content:space-between; align-items:center; }
.kh-detail-footer { position:fixed; bottom:0; left:0; right:0; z-index:2; background:#111; text-align:center; padding:12px 24px max(12px,env(safe-area-inset-bottom)); }
.kh-detail-footer .kh-primary { width:min(620px,100%); }
.kh-detail button { border-radius:0; text-shadow:none; }
.kh-detail .kh-primary { font-size:22px; }
.kh-detail-footer p { font-size:12px; color:#fffae9; margin:8px 0 0; }
/* Private phone controller. Safe-area and keyboard layout remain in the shared shell. */
body.khallat-player-phase { color:#111; background:#111 !important; }
body.khallat-player-phase .player-header { display:none !important; }
body.khallat-player-phase #app { padding-top:max(8px,env(safe-area-inset-top)) !important; }
body.khallat-player-phase .screen { --khp-ink:#111; --khp-paper:#fffbed; --khp-teal:#ffe000; --khp-rose:#7600ec; border:3px solid #111; border-radius:14px; color:#111; background:#fffbed url('/assets/khallat/sketch/phone-paper.webp') center/100% 100%; }
body.khallat-player-phase .screen-body { background:transparent !important; padding:0; }
body.khallat-player-phase .screen-foot { background:transparent; border:0; }
.khp-shell { width:100%; min-height:100%; box-sizing:border-box; padding:18px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; direction:rtl; color:#111; text-align:right; }
.khp-shell::before { content:''; display:block; width:115px; height:56px; flex-shrink:0; align-self:flex-start; background:url('/assets/khallat/sketch/khallat-logo.webp') center/contain no-repeat; }
.khp-topline { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.khp-step { font-size:13px; font-weight:850; }
.khp-prompt,.khallat-q-text { font-size:clamp(22px,5vw,30px); line-height:1.5; font-weight:950; margin:0; text-wrap:balance; }
.khp-input { min-height:130px; width:100%; box-sizing:border-box; padding:14px; resize:vertical; border:3px solid #111; background:#fffbed; color:#111; font-family:inherit; font-size:20px; }
.khp-primary,.khp-clear { min-height:54px; border:3px solid #111; border-radius:0; box-shadow:4px 4px 0 #111; background:#ffe000; color:#111; font-family:inherit; font-weight:950; font-size:22px; padding:8px 16px; }
.khp-primary:disabled { opacity:.5; }
.khp-compose { border:3px solid #111; background:#fffdf4; box-shadow:3px 4px 0 #111; min-height:110px; padding:12px; }
#answer-box,#word-bank { display:flex; flex-wrap:wrap; gap:7px; direction:rtl; }
#answer-box { min-height:44px; }
.khallat-answer-placeholder { text-align:center; color:#585145; padding:14px; }
.word-pill,.answer-word { min-height:44px; width:auto; border:2px solid #111; border-radius:0; background:#fffbed; color:#111; font-family:inherit; font-weight:900; font-size:18px; padding:6px 11px; box-shadow:2px 3px 0 #111; }
.answer-word { background:#ffe000; }
.khallat-foot { display:flex; gap:12px; margin-top:auto; padding:8px 0; position:sticky; bottom:0; background:#fffbed; }
.khallat-foot .khp-primary { flex:1; }
.khp-clear { background:#fffbed; }
.khp-hint { font-size:13px; margin:0; color:#514637; }
.khp-vote-list { display:flex; flex-direction:column; gap:14px; }
.khp-vote-paper { padding:16px; min-height:70px; border:3px solid #111; border-radius:0; background:#fffbed; color:#111; box-shadow:4px 4px 0 #111; font-family:inherit; font-size:20px; font-weight:900; text-align:right; overflow-wrap:anywhere; }
.khp-wait-inner { margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.khp-wait-inner strong { font-size:32px; }
.khp-seal { color:#111; background:#ffe000; border:4px solid #111; border-radius:50%; width:80px; height:80px; display:grid; place-items:center; font-size:50px; font-weight:950; }
.khp-portrait { width:160px; height:200px; object-fit:contain; }
.khp-wait-inner>.kh-blender { width:150px; }
.khp-action-error { padding:10px; color:#8c1720; font-weight:800; }
.kh-avatar-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:8px; }
.kh-avatar-grid button { position:relative; min-height:110px; background:#fffbed; border:2px solid #111; padding:6px; font-family:inherit; color:#111; }
.kh-avatar-grid button[aria-pressed="true"] { background:#ffe000; outline:3px solid #7600ec; }
.kh-avatar-grid img { width:100%; height:86px; object-fit:contain; }
.kh-avatar-grid strong { display:block; font-size:14px; }
.kh-avatar-grid button:disabled { opacity:.35; }
/* Isolate the approved game from legacy light-theme/carousel overrides. */
body.khallat-player-phase .rxn-fab { display:none !important; }
body.khallat-player-phase #player-settings-btn { top:auto; bottom:max(8px,env(safe-area-inset-bottom)); right:auto; left:8px; width:36px; height:36px; color:#111; background:#fffbed; border:2px solid #111; border-radius:0; box-shadow:none; }
body.khallat-player-phase .khp-shell .answer-timer { background:transparent; color:#514637; border:0; box-shadow:none; padding:0; min-width:0; margin:0; }
body.khallat-player-phase .khp-shell .answer-timer .at-num,body.khallat-player-phase .khp-shell .answer-timer .at-unit { color:#514637; }
body.khallat-player-phase .khp-shell .answer-timer .at-clock,body.khallat-player-phase .khp-shell .answer-timer .at-fill { display:none; }
body.khallat-player-phase .khp-step { background:none; border:0; padding:0; box-shadow:none; color:#111; }
body.khallat-player-phase .khallat-q-header { border:0; }
body.khallat-player-phase .khp-primary { background:#ffe000; color:#111; border:3px solid #111; border-radius:0 !important; box-shadow:4px 4px 0 #111; }
body.khallat-player-phase .khallat-foot { display:grid; grid-template-columns:54px minmax(0,1fr); gap:12px; }
body.khallat-player-phase .khallat-foot .khp-clear { width:54px; padding:0; background:#fffbed; color:#111; border:3px solid #111; border-radius:0 !important; }
body.khallat-player-phase .khallat-foot .khp-primary { width:100%; }
body.khallat-player-phase .khp-compose { border:3px solid #111; border-radius:0; background:#fffdf4; }
body.khallat-player-phase .word-pill,body.khallat-player-phase .answer-word { border:2px solid #111; border-radius:0; background:#fffbed; }
body.khallat-player-phase .answer-word { background:#ffe000; }
body.khallat-player-phase .join-wrap[data-step="avatar"] { display:flex !important; flex-direction:column !important; height:100% !important; overflow:hidden !important; background:#fffbed url('/assets/khallat/sketch/phone-paper.webp') center/100% 100% !important; color:#111; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-hero { display:none !important; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-sheet { flex:1; min-height:0; max-height:100%; position:relative; inset:auto; width:100%; padding:14px; display:flex; flex-direction:column; overflow:auto; background:transparent !important; color:#111; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-step { display:flex; flex-direction:column; min-height:0; flex:1; gap:8px; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-sheet-title { color:#111; font-size:24px; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-sheet-sub { color:#514637; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-btn { background:#ffe000 !important; color:#111 !important; border:3px solid #111; border-radius:0; min-height:48px; flex-shrink:0; text-shadow:none; box-shadow:3px 3px 0 #111; outline:none; font-family:inherit; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-back { color:#111; position:static; flex-shrink:0; align-self:flex-start; background:#fffbed; border:2px solid #111; border-radius:0; text-shadow:none; box-shadow:none; }
body.khallat-player-phase .join-wrap[data-step="avatar"] .join-sheet::before { display:none; }
body.khallat-player-phase .kh-avatar-grid { min-height:0; flex:1; overflow-y:auto; max-height:60dvh; align-content:start; }
body.khallat-player-phase .kh-avatar-grid .avatar-option { display:flex; flex-direction:column; width:100%; height:126px; min-height:126px; border-radius:0; padding:6px; overflow:hidden; transform:none; box-shadow:none; }
body.khallat-player-phase .kh-avatar-grid .avatar-option::before { display:none; }
body.khallat-player-phase .kh-avatar-grid .avatar-option img { display:block; position:static; inset:auto; width:100%; height:86px; object-fit:contain; transform:none; filter:none; }
body.khallat-player-phase .kh-avatar-grid .avatar-option strong { position:static; display:block; color:#111; line-height:1.5; }
.kh-hud .at-unit,.kh-hud .at-fill { display:none; }
.kh-hud-ticket:empty { display:none; }
.kh-hud { left:max(3%,var(--ph-safe-left,env(safe-area-inset-left))); right:max(3%,var(--ph-safe-right,env(safe-area-inset-right))); }
.kh-lobby-footer { left:max(3%,var(--ph-safe-left,env(safe-area-inset-left))); right:max(4%,var(--ph-safe-right,env(safe-area-inset-right))); }
@media (max-height:500px) and (orientation:landscape) {
  .kh-hud { top:3%; height:13%; }.kh-hud-ticket { padding:4px 10px; }
  .kh-lobby-main { top:7%; height:71%; }.kh-lobby-main h1 { font-size:20px; }.kh-join-code { font-size:34px; line-height:1.25; border-width:3px; }.kh-lobby-main p { margin-top:5px; font-size:12px; }.kh-join-url { font-size:10px; }
  .kh-lobby-roster { gap:3px 10px; margin-top:4px; }.kh-lobby-roster .kh-person img { height:9vh; }.kh-person strong { font-size:11px; }
  .kh-lobby-footer { bottom:5%; }.kh-primary,.kh-secondary { min-height:36px; font-size:14px; padding:4px 16px; }.kh-lobby-footer>div { gap:12px; }
  .kh-question h1 { font-size:clamp(21px,3.4vw,36px); }.kh-question p { font-size:15px; margin-top:8px; }.kh-roster { gap:6px; }.kh-ready { width:17px; height:17px; border-width:2px; font-size:12px; }.kh-progress-count { font-size:12px; }
  .kh-answer-deck { gap:9px; inset:28% 4% 20%; }.kh-answer-paper { min-height:62px; padding:9px 32px 8px 8px; }.kh-answer-text { font-size:15px; }.kh-answer-mark { font-size:13px; right:5px; }.kh-result-stamp,.kh-result-author,.kh-result-bonus { font-size:11px; }.kh-vote-question { top:17%; font-size:18px; }
  .kh-score-sheet { inset:17% 13% 12%; }.kh-score-title { font-size:22px; }.kh-score-sub { font-size:13px; }.kh-score-list { gap:2px 20px; padding:4px 0; }.kh-score-avatar { height:32px; width:36px; }.kh-score-row { gap:7px; padding:1px 0; }.kh-score-name { font-size:12px; }.kh-score-value { font-size:16px; }.kh-final-actions button { min-height:36px; padding:4px 14px; font-size:13px; }
}
@media (max-width:600px) and (orientation:portrait) {
  .kh-finale .kh-score-sheet { inset:48% 8% 18%; }.kh-champions { top:15%; right:10%; width:80%; height:31%; }.kh-champion-portraits img { max-height:16vh; }.kh-champions .kh-trophy { display:none; }.kh-finale .kh-score-avatar { height:32px; }
  .kh-lobby-art { height:21%; width:44%; top:4%; left:28%; }.kh-lobby-art .kh-logo { height:55%; }.kh-lobby-art .kh-blender { height:60%; }.kh-lobby-main { right:6%; top:26%; width:88%; height:57%; }.kh-lobby-footer { bottom:3%; flex-direction:column; gap:7px; }.kh-lobby-roster { grid-template-columns:repeat(3,minmax(0,1fr)); }.kh-lobby-tools { z-index:5; }
  .kh-question-stage>.kh-blender { height:24%; top:43%; left:38%; width:24%; }.kh-question { width:86%; right:7%; top:18%; height:28%; }.kh-question h1 { font-size:27px; }.kh-roster { flex-wrap:wrap; height:25%; align-content:end; gap:4px; }.kh-roster .kh-person { flex:1 0 20%; }.kh-roster .kh-person img { height:55px; }.kh-progress-count { bottom:29%; }.kh-hud-ticket { font-size:11px; padding:5px; }
  .kh-answer-deck { grid-template-columns:1fr; inset:26% 5% 14%; }.kh-score-list { grid-template-columns:1fr; }.kh-score-sheet { inset:18% 10% 10%; }.kh-trophy { display:none; }.kh-final-actions { flex-wrap:wrap; gap:7px; }
  .kh-rules-steps { flex-direction:column; gap:24px; }.kh-rules-steps article { position:relative; padding-right:65px; }.kh-rules-steps b { position:absolute; right:0; top:0; }.kh-rules-steps h2 { margin-top:0; }.kh-detail-hero { min-height:280px; gap:0; padding:65px 20px 24px; }.kh-detail-hero>.kh-blender { width:36%; flex-shrink:0; }.kh-detail h1 { font-size:26px; }.kh-detail-hero-copy>img { width:200px; }.kh-detail-body { padding:22px; }.kh-detail-demo { min-height:110px; font-size:24px; }
}
.kh-detail-hero { padding-top:calc(65px + env(safe-area-inset-top)); }
@media (prefers-reduced-motion:reduce) { .kh-blender.is-blending img { visibility:visible; }.kh-blender.is-blending .kh-blender-loop { display:none; }.kh-stage * { animation:none !important; transition:none !important; } }