/* UI layer only: no state, content or game rules. */
@font-face{font-family:Jammatna;src:url('fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Jammatna;src:url('fonts/Tajawal-Bold.ttf') format('truetype');font-weight:700 900;font-display:swap}
:root{font-family:Jammatna,Tahoma,Arial,sans-serif;color:#543923;background:#efdbbd;--saudi-green:#174e39;--soft-cream:#fff4e2;--muted-gold:#d2ad70;--lobby-ease:cubic-bezier(.22,.75,.3,1)}
body,body.home-view{background:#efdbbd;isolation:isolate;position:relative;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));min-height:100svh}
body:before,body.home-view:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(180deg,#412c2608 0px,#efdbbd08 360px,#efdbbdbb 700px,#efdbbd 1080px),url('jammatna-evening-v4.webp');background-position:center top;background-size:auto,auto 1050px;background-repeat:no-repeat}
.sadu-edge{display:none}
main,body.home-view main{display:flex;flex-direction:column;width:min(100%,820px);max-width:820px;margin:auto}
body.home-view main{width:min(100%,1120px);max-width:1120px}
.utility,body.home-view .utility{order:0;display:flex;justify-content:center;flex-wrap:wrap;gap:7px;width:100%;max-width:100%;padding:0;margin:0 auto 14px;border:0;border-radius:0;background:none;box-shadow:none}
.utility .small-btn,body.home-view .utility .small-btn{flex:0 1 auto;min-width:0;min-height:44px;padding:11px 15px;background:#fff5e9f5;border:1px solid #dcc29c;color:#68452c;box-shadow:0 3px 10px #36201616;border-radius:30px;font-size:14px;font-weight:700;line-height:1.4}
.utility .small-btn[aria-pressed=true],body.home-view .utility .small-btn[aria-pressed=true]{background:#e1f1e5;border-color:#95b9a3;color:#18543b}
.utility .small-btn#tv{font-size:13px;padding-inline:13px}
.utility .small-btn .fx-control-icon{width:19px;height:19px;margin-inline-end:5px}
.utility #sound[aria-pressed=true] .fx-control-icon{filter:sepia(1) hue-rotate(70deg) saturate(2)}
#brand,body.home-view #brand{display:block;order:1;width:min(100%,480px);text-align:center;margin:6px auto 26px;padding:0;animation:lobby-logo-in 420ms var(--lobby-ease) both}
#brand h1{margin:0;line-height:1}
#brand .identity-logo{display:block;width:100%;height:auto;pointer-events:none}
#brand>p{display:table;padding:10px 30px 12px;background:linear-gradient(135deg,#ffe8bdf5,#efd1a5f5);border:1px solid #d8ad78;border-radius:13px;color:#53391d;font-size:clamp(23px,3.5vw,31px);line-height:1.5;margin:-8px auto 0;box-shadow:0 5px 12px #57331b1a;font-weight:700}
#app,body.home-view #app{order:2;min-width:0}
.offline-status,body.home-view .offline-status{order:4;color:#624d33;font-size:14px}
footer,body.home-view footer{order:5;color:#73563a;border-top:1px solid #c8a67966}
#storageWarning{order:4}
body.playing #brand{display:none}
body.playing:before{background-image:linear-gradient(#efdbbddd,#efdbbd 680px),url('jammatna-evening-v4.webp')}
body.playing main{max-width:900px}
button,input,select{font-family:inherit}
h2,h3{font-weight:700;overflow-wrap:anywhere}
p,.caption{overflow-wrap:anywhere}
.panel,dialog{background:#fff4e5f5;border:1px solid #ebd4b4;border-radius:26px;box-shadow:0 8px 24px #68421a10}
.primary,body.home-view .home-start{background:linear-gradient(135deg,#226249,#103e2c);color:#fff5e2;border:1px solid #aa8e57;border-radius:24px;box-shadow:0 6px 15px #183c2b24;text-shadow:none;font-weight:700}
.primary:disabled{box-shadow:none}
.secondary{background:#fff4e0;color:#654a2b;border:1px solid #ddc49b;box-shadow:0 3px 10px #6d4a1710;border-radius:22px}
.back{color:#4d593e;background:#fff2dcd9;border:1px solid #d4bc96;border-radius:24px;width:fit-content;padding:12px 20px}
.section-intro{display:flex;align-items:center;gap:14px;min-width:0;background:#fff1dff5;border:1px solid #fff7eb;border-radius:27px;min-height:118px;padding:12px 14px;margin-bottom:16px;box-shadow:0 8px 24px #5a33152b;animation:lobby-up 380ms var(--lobby-ease) both}
.section-intro-icon{display:grid;place-items:center;background:#f3dfbf;border:1px solid #e4c79c;border-radius:50%;width:62px;height:62px;flex:none}
.section-intro-icon .section-icon{width:34px;height:34px;filter:brightness(.55) sepia(.7)}
.section-intro-copy{flex:1;min-width:0}
.section-intro h2{font-size:clamp(22px,4vw,31px);color:#234c35;margin:0 0 5px;line-height:1.5}
.section-intro p{font-size:16px;color:#806045;margin:0;line-height:1.6}
.section-intro-art{width:116px;height:100px;flex:none;background-color:#ddc097;background-image:url('jammatna-categories-v3.webp');background-repeat:no-repeat;background-size:300% 200%;border-radius:20px;overflow:hidden;display:grid;place-items:center}
.artwork-religion{background-position:0 0}.artwork-sports{background-position:50% 0}.artwork-culture{background-position:100% 0}.artwork-scientists{background-position:0 100%}.artwork-speed{background-position:50% 100%}.artwork-mix{background-position:100% 100%}
.section-intro-art .section-icon{visibility:hidden}
.section-intro-art.artwork-funny,.section-intro-art.artwork-challenge,.section-intro-art.artwork-memories,.section-intro-art.artwork-know{background-image:none;background-color:#e8cda1}
.section-intro-art.artwork-funny .section-icon,.section-intro-art.artwork-challenge .section-icon,.section-intro-art.artwork-memories .section-icon,.section-intro-art.artwork-know .section-icon{visibility:visible;filter:brightness(.65)}
.lobby-shell{background:#fff2e0f5;border:1px solid #fff7e9;border-radius:28px;box-shadow:0 10px 28px #7950261a;overflow:hidden;min-width:0}
.players-panel,.difficulty-panel,.session-options{padding:22px;min-width:0}
.players-panel h3,.difficulty-panel h3{font-size:23px;margin:0 0 5px;color:#573a24}
.players-panel>.caption,.difficulty-panel>.caption{font-size:16px;margin:0 0 18px;color:#84654b}
.lobby-shell .count-options,.home-view .home-count .count-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.lobby-shell .count-options button,.home-view .home-count .count-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:90px;background:#fff7eaf2;color:#61452b;border:1px solid #efdcbe;border-radius:20px;font-size:21px;line-height:1.2;padding:13px 7px;font-weight:700;box-shadow:0 5px 14px #ae85551a;transition:transform 200ms var(--lobby-ease),background-color 200ms,border-color 200ms}
.player-glyph{width:29px;height:29px;pointer-events:none;opacity:.9}
.lobby-shell .count-options [aria-pressed=true],.home-view .home-count .count-options [aria-pressed=true]{border:1px solid #cfa76d;background:#fdefd6;color:#4e341e;outline:0;box-shadow:0 0 0 3px #fff9ef,0 0 0 4px #d8b174,0 5px 13px #71532d26;transform:translateY(-2px)}
.lobby-shell .count-options #customCountBtn[aria-pressed=true],.home-view .home-count #customCountBtn[aria-pressed=true]{background:#23533d;color:#fff5df;box-shadow:0 0 0 1px #bfa56f,0 4px 12px #25483022}
#customCountBtn[aria-pressed=true] .player-glyph{filter:brightness(0) invert(1)}
.custom-stepper{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid #edd4ad;background:#fff7eac7;border-radius:22px;padding:14px;margin:18px 0}
.custom-copy{display:grid;gap:4px;flex:1;min-width:100px}
.custom-copy strong{font-size:21px}.custom-copy span{font-size:14px;color:#8c6d50}
.stepper{display:flex;direction:ltr;align-items:center;gap:12px;justify-content:center;flex:1;min-width:195px}
.stepper button{display:grid;place-items:center;border:1px solid #e0c7a1;background:#dfc29b;color:#634326;border-radius:50%;width:44px;height:44px;min-height:44px;flex:none;font-size:29px;padding:0;line-height:1}
.stepper button:disabled{opacity:.35}
.stepper output{display:grid;place-items:center;min-height:50px;min-width:60px;max-width:100px;flex:1;border-radius:15px;background:#f7e5cb;color:#4a3423;font-size:26px;font-weight:700;border:1px solid #ead2b1}
.player-names-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 13px;flex-wrap:wrap}
.player-names-title h3{font-size:18px;margin:0}.player-names-title>span{font-size:14px;color:#8c7058}
.players{display:grid;gap:10px;max-height:390px;overflow:auto;padding:4px;scrollbar-width:thin;scrollbar-color:#b49670 #f5e5cb}
.player-input{display:flex;gap:10px;align-items:center;background:#fffaf1;border:1px solid #ebd8b8;border-radius:20px;min-height:62px;padding:7px 12px;box-shadow:0 3px 8px #a5835510;animation:lobby-up 380ms var(--lobby-ease) both;animation-delay:var(--player-delay,0ms)}
.player-input:focus-within{border-color:#6b9478;box-shadow:0 0 0 3px #26724612}
.player-input>.player-number{width:36px;height:36px;border-radius:50%;background:#eee0c9;color:#795736;flex:none;font-size:16px;display:grid;place-items:center}
.player-input input{width:100%;min-width:0;flex:1;background:transparent;border:0;padding:9px 2px;min-height:44px;box-shadow:none;font-size:18px;color:#4d3928}
.player-input input:focus-visible{outline:0}
.player-input>.player-edit-icon{font-size:20px;color:#a58a68;background:none;width:auto;height:auto;border-radius:0;flex:none}
.difficulty-panel{border-top:1px solid #e5cfad}
.difficulty-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:17px 0 14px}
.difficulty-card{min-width:0;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:6px;min-height:118px;border:1px solid #f3e1c5;background:#fff7e9;border-radius:21px;color:#6b4c31;padding:14px 5px;box-shadow:0 4px 11px #95743a15;font-weight:700;transition:transform 200ms var(--lobby-ease),background-color 200ms,border-color 200ms}
.difficulty-card strong{font-size:18px;line-height:1.4}.difficulty-card small{font-size:14px;line-height:1.4;direction:ltr;color:inherit}
.difficulty-card[aria-pressed=true]{background:#1e543c;color:#fff4dc;border-color:#b59a67;box-shadow:0 5px 14px #234e3429;transform:translateY(-2px)}
.difficulty-mark{height:28px;display:grid;place-items:center;line-height:1;font-size:33px;margin-bottom:3px}
.level-bars{display:flex;align-items:flex-end;gap:4px;height:24px;direction:ltr}
.level-bars i{display:block;width:7px;height:11px;border-radius:4px;background:currentColor;opacity:.18}
.level-bars i:nth-child(2){height:17px}.level-bars i:nth-child(3){height:24px}.level-bars .lit{opacity:1}
.difficulty-card[aria-pressed=true] .difficulty-mark{animation:lobby-mark-in 320ms var(--lobby-ease)}
.difficulty-panel .difficulty-note{font-size:14px;margin:5px 0 0;color:#8b7158}
.fine-difficulty{margin-top:13px}
.fine-difficulty summary{font-size:14px;color:#6d604b;padding:10px 0;cursor:pointer}
.fine-difficulty select{margin-top:8px}
.session-options{border-top:1px solid #e5cfad;padding-top:6px}
.lobby-secondary>summary{font-size:17px;font-weight:700;cursor:pointer;padding:17px 0;min-height:48px;color:#5e432b}
.session-options fieldset{margin:5px 0 16px}
.segmented label{background:#fff9ed;border:1px solid #e4cfad;border-radius:20px;padding:13px;min-width:0}
.segmented label:has(input:checked){background:#e8eee0;border:1px solid #7f9d7e;padding:13px}
input,select{border-radius:18px;background:#fff8eb;border-color:#dfcba9}
.lobby-begin{display:flex;align-items:center;justify-content:center;gap:17px;min-height:86px;border-radius:27px;font-size:clamp(25px,4.8vw,35px);margin:22px 0 15px;position:relative;overflow:hidden;padding:17px 35px;animation:lobby-button-in 420ms var(--lobby-ease) both}
.begin-play{display:grid;place-items:center;width:51px;height:51px;border-radius:50%;background:#fff1d2;color:#174f37;font-size:25px;padding-inline-start:4px;flex:none;box-shadow:0 3px 8px #102d242c}
.lobby-begin:before,.lobby-begin:after{content:'';position:absolute;top:5px;bottom:5px;width:12px;background:repeating-linear-gradient(45deg,#eddbba 0 4px,#974b39 4px 7px,#244c39 7px 10px,#e7ce9f 10px 13px);opacity:.7;pointer-events:none}
.lobby-begin:before{right:5px}.lobby-begin:after{left:5px}
.lobby-begin:active{transform:scale(.97)}
.question-card{background:#fff5e5fa;border-color:#ddc9a7;box-shadow:0 8px 20px #61432212}
.question-card h2{color:#4b3a29}.player-title strong{color:#28533c}
.option{background:#fff9ed;border:1px solid #dfc9a4;border-radius:20px;color:#5b452d;box-shadow:0 3px 10px #9a733411}
.option span{background:#eddfc5;color:#6f4a2e}
.finish-btn{border:1px solid #bd8a70;background:#fff1e4;color:#8b4932;border-radius:21px}
.rank,.score-chip{background:#fff7e7;border-color:#ddc9a7}.score-chip.current{background:#25583e;border-color:#25583e}
/* Preserve the section grid and all home navigation; share the new identity once. */
body.home-view .home-welcome{padding:0 10px 28px;min-height:0;gap:0}
body.home-view .home-start{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:16px;width:min(100%,510px);max-width:100%;height:auto;min-height:86px;padding:16px 35px;font-size:28px;margin:0}
body.home-view .home-play-symbol{width:51px;height:51px;background:#fff1d2;color:#174f37;box-shadow:none;font-size:26px}
body.home-view .home-top-actions{position:static;margin:0 auto 18px;width:fit-content;border-radius:25px;order:0;background:#fff1dcd9}
body.home-view .home-top-actions button{width:auto;padding:10px 17px;font-size:22px}
body.home-view .home-count{margin:20px auto;background:#fff2e0f5;padding-inline:20px;border-color:#f0dab6;max-width:620px}
body.home-view .home-more>summary{font-size:17px;color:#59432a}
.home-category-grid{min-width:0}
body.tv-mode main,body.tv-mode.playing main{width:100%;max-width:1500px}
body.tv-mode #brand{max-width:340px;margin-block:0 16px}
body.tv-mode .utility .small-btn{font-size:15px}
@media(min-width:900px){.players{grid-template-columns:1fr 1fr}.section-intro{padding:14px 20px}.lobby-shell .players-panel,.lobby-shell .difficulty-panel,.lobby-shell .session-options{padding-inline:30px}.home-view #brand{max-width:490px}}
@media(min-width:1100px){body.tv-mode.setup-view .lobby-shell{display:grid;grid-template-columns:1.1fr 1fr;align-items:start}body.tv-mode.setup-view .players-panel{grid-column:1;grid-row:1/span 2}body.tv-mode.setup-view .difficulty-panel,body.tv-mode.setup-view .session-options{grid-column:2;border-top:0;border-inline-start:1px solid #e5cfad}body.tv-mode.setup-view .players{grid-template-columns:1fr;max-height:500px}}
@media(max-width:540px){body,body.home-view{padding-inline:max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-left))}.utility,body.home-view .utility{gap:6px;margin-bottom:5px}.utility .small-btn,body.home-view .utility .small-btn{font-size:14px;padding:10px 11px;min-height:44px}.utility .small-btn#tv{font-size:13px;min-height:44px;padding-block:8px}#brand,body.home-view #brand{width:min(100%,365px);margin:8px auto 22px}#brand>p{font-size:25px;padding:7px 24px 10px;margin-top:-7px}.section-intro{min-height:108px;padding:10px;gap:10px;border-radius:24px}.section-intro-icon{width:44px;height:44px}.section-intro-icon .section-icon{width:27px;height:27px}.section-intro h2{font-size:24px}.section-intro p{font-size:15px;line-height:1.6}.section-intro-art{width:88px;height:88px;border-radius:17px}.players-panel,.difficulty-panel,.session-options{padding:20px 16px}.players-panel h3,.difficulty-panel h3{font-size:23px}.lobby-shell .count-options,.home-view .home-count .count-options{gap:8px}.lobby-shell .count-options button,.home-view .home-count .count-options button{min-height:84px;border-radius:17px;font-size:20px;padding:11px 4px}.custom-stepper{padding:12px;gap:10px}.custom-copy{min-width:70px}.custom-copy strong{font-size:20px}.custom-copy span{font-size:13px}.stepper{min-width:165px;gap:9px}.stepper button{width:44px;height:44px;min-height:44px}.stepper output{min-width:56px}.difficulty-cards{gap:8px}.difficulty-card{padding:12px 3px;min-height:112px;border-radius:18px}.difficulty-card strong{font-size:17px}.difficulty-card small{font-size:14px}.player-input{padding:7px 10px}.lobby-begin{min-height:82px;font-size:29px;margin-top:18px;padding-inline:26px}.home-view .home-start{font-size:27px}.home-view .home-section-heading h2{font-size:21px}.session-options .segmented label{font-size:16px}.session-options .segmented small{font-size:13px}.section-intro-copy{min-width:0}}
@media(max-width:350px){.section-intro-art{width:66px;height:80px}.section-intro{gap:7px}.section-intro h2{font-size:21px}.section-intro-icon{width:38px;height:38px}.players-panel,.difficulty-panel,.session-options{padding-inline:12px}.stepper{min-width:150px}.stepper button{width:44px;height:44px;min-height:44px}.difficulty-card strong{font-size:16px}.difficulty-card small{font-size:13px}.utility .small-btn,body.home-view .utility .small-btn{font-size:13px;padding:10px}.custom-copy span{font-size:13px}}
@keyframes lobby-logo-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes lobby-up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes lobby-button-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes lobby-mark-in{from{opacity:.5;transform:scale(.88)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Quiet live scenery: compositor-only movement; controls stay on their own layer. */
.home-ambience{position:absolute;inset:0 0 auto;height:1100px;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.home-ambience[hidden]{display:none}
.ambience-scene{position:absolute;inset:0 -8px;background-image:linear-gradient(180deg,#412c2608 0px,#efdbbd08 360px,#efdbbdbb 700px,#efdbbd 1080px),url('jammatna-evening-v4.webp');background-position:center top;background-size:auto,auto 1050px;background-repeat:no-repeat;transform:translate3d(var(--ambience-x,0px),var(--ambience-y,0px),0);transition:transform 380ms ease-out}
body.home-view:before{background-image:none}
.ambience-glow{position:absolute;display:block;width:160px;height:200px;margin:-100px 0 0 -80px;border-radius:50%;background:radial-gradient(ellipse,#ffd47a66 0%,#ffb84720 34%,transparent 68%);opacity:.28;animation:lantern-breathe 5.8s ease-in-out infinite alternate}
.glow-lantern-one{left:calc(50% - 685px);top:245px}
.glow-lantern-two{left:calc(50% - 520px);top:315px;animation-delay:-2.8s}
.glow-courtyard{left:48%;top:490px;width:280px;height:250px;opacity:.12;animation-delay:-1.6s;background:radial-gradient(ellipse,#ffca6a30,transparent 68%)}
.ambience-paused .ambience-glow{animation-play-state:paused;opacity:.12}
body.home-view .home-start{position:relative;isolation:isolate;transition:transform 180ms ease,box-shadow 220ms ease,border-color 220ms ease}
body.home-view .home-start:active{transform:scale(.97);box-shadow:0 2px 7px #183c2b30}
body.home-view .home-start .home-play-symbol{transition:transform 180ms ease,background-color 180ms ease,box-shadow 180ms ease}
body.home-view .home-start:active .home-play-symbol{transform:scale(.86) rotate(-7deg);background:#ffe2a7;box-shadow:0 0 0 6px #fff0d51c}
body.home-view .home-start:focus-visible{outline:3px solid #ffe3a0;outline-offset:5px}
@media(hover:hover){body.home-view .home-start:hover:not(:active){transform:translateY(-2px);border-color:#e0bf80;box-shadow:0 9px 22px #183c2b40}body.home-view .home-start:hover:not(:active) .home-play-symbol{transform:scale(1.07);box-shadow:0 0 0 5px #fff0d512}}
@keyframes lantern-breathe{from{opacity:.18;transform:scale(.96)}to{opacity:.43;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.ambience-scene{transform:none;transition:none}.ambience-glow{animation:none;opacity:.12}body.home-view .home-start,body.home-view .home-start .home-play-symbol{transition:none;transform:none!important}}

/* Automatic slow camera movement lives on a separate layer from pointer parallax. */
.ambience-scene{background:none}
.ambience-backdrop{position:absolute;inset:-14px;transform-origin:50% 38%;background-image:linear-gradient(180deg,#412c2608 0px,#efdbbd08 360px,#efdbbdbb 700px,#efdbbd 1080px),url('jammatna-evening-v4.webp');background-position:center top;background-size:auto,auto 1050px;background-repeat:no-repeat;animation:majlis-camera-drift 18s ease-in-out infinite alternate;will-change:transform}
.ambience-paused .ambience-backdrop{animation-play-state:paused;will-change:auto}
@keyframes majlis-camera-drift{from{transform:translate3d(-7px,-3px,0) scale(1.025)}to{transform:translate3d(7px,5px,0) scale(1.075)}}
@media(prefers-reduced-motion:reduce){.ambience-backdrop{animation:none;transform:none;will-change:auto}}

/* The duplicate shortcut pill is removed from the home layout and focus order. */
body.home-view .home-top-actions{display:none}

/* Independent scene objects replace the baked-in originals; no whole-image zoom. */
.ambience-backdrop{inset:0;animation:none;transform:none;will-change:auto}
.ambience-objects{display:none;position:absolute;top:0;left:50%;width:1536px;height:1024px;transform:translateX(-50%) scale(1.025390625);transform-origin:50% 0}
.scene-ready .ambience-backdrop{background-image:url('jammatna-scene-plate-v2.webp');background-size:auto 1050px}
.scene-ready .ambience-objects{display:block}
.scene-ready .ambience-scene:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#412c2608 0px,#efdbbd08 360px,#efdbbdbb 700px,#efdbbd 1080px);pointer-events:none}
.scene-object{position:absolute;display:block;background-image:url('jammatna-scene-objects-v1.webp');background-size:1536px 1024px;background-repeat:no-repeat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;will-change:transform}
.scene-lantern-one{left:20px;top:95px;width:170px;height:380px;background-position:-20px -95px;clip-path:polygon(20% 0,75% 0,75% 25%,95% 30%,95% 78%,75% 99%,22% 99%,0 78%,0 30%,20% 25%);transform-origin:48% 8%;animation-name:majlis-lantern-sway;animation-duration:5.8s}
.scene-lantern-two{left:205px;top:235px;width:115px;height:250px;background-position:-205px -235px;transform-origin:43% 4%;animation-name:majlis-lantern-sway;animation-duration:6.8s;animation-delay:-2.2s}
.scene-palm-left{left:100px;top:0;width:650px;height:440px;background-position:-100px 0;clip-path:polygon(0 0,100% 0,100% 100%,32% 100%,12% 62%,0 60%);transform-origin:30% 30%;animation-name:majlis-palm-breeze;animation-duration:8s;animation-delay:-1.6s}
.scene-palm-right{left:1100px;top:0;width:436px;height:420px;background-position:-1100px 0;transform-origin:92% 18%;animation-name:majlis-palm-breeze;animation-duration:9.5s;animation-delay:-4s}
.scene-fire{left:1250px;top:455px;width:286px;height:220px;background-position:-1250px -455px;transform-origin:50% 78%;animation-name:majlis-fire-dance;animation-duration:2.3s;animation-direction:normal}
.scene-ember{position:absolute;left:1380px;top:590px;width:3px;height:5px;border-radius:50%;background:#ffd396;box-shadow:0 0 6px #ffb852;opacity:0;animation:majlis-ember-rise 4.5s ease-out infinite}
.ember-two{left:1350px;animation-delay:-1.8s;animation-duration:5.7s}.ember-three{left:1410px;animation-delay:-3.5s;animation-duration:6.5s}
.ambience-paused .scene-object,.ambience-paused .scene-ember{animation-play-state:paused;will-change:auto}
@keyframes majlis-lantern-sway{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}}
@keyframes majlis-palm-breeze{from{transform:rotate(-.55deg) skewX(-.25deg)}to{transform:rotate(.55deg) skewX(.25deg)}}
@keyframes majlis-fire-dance{0%,100%{transform:scale(1,.96) skewX(-1deg);opacity:.88}28%{transform:scale(.98,1.04) skewX(1.3deg);opacity:1}58%{transform:scale(1.02,.98) skewX(-.6deg);opacity:.92}80%{transform:scale(.99,1.06) skewX(.8deg);opacity:1}}
@keyframes majlis-ember-rise{0%,12%,100%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:.65}75%{transform:translate(-12px,-70px) scale(.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.scene-ready .ambience-objects{display:none}.scene-ready .ambience-scene:after{display:none}.scene-ready .ambience-backdrop{background-image:linear-gradient(180deg,#412c2608 0px,#efdbbd08 360px,#efdbbdbb 700px,#efdbbd 1080px),url('jammatna-evening-v4.webp');background-size:auto,auto 1050px}.scene-object,.scene-ember{animation:none;will-change:auto}}

/* Occlusion holes keep the hanging lanterns out of the palm's animation layer. */
.scene-palm-left{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 585 380'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H585V380H0Z M0 95H45V380H0Z M60 235H175V380H60Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 585 380'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H585V380H0Z M0 95H45V380H0Z M60 235H175V380H60Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* The mark moves once on entry; its tagline stays still. */
#brand,body.home-view #brand{animation:none}
.brand-logo-button{display:block;position:relative;width:100%;padding:0;margin:0;min-height:0;border:0;border-radius:24px;background:none;box-shadow:none;line-height:0;animation:brand-arrive 550ms cubic-bezier(.22,.8,.25,1) both;transform-origin:50% 60%}
.brand-logo-art{display:block;position:relative;pointer-events:none}
.brand-logo-button:focus-visible{outline:2px solid #c9a567;outline-offset:4px}
.brand-logo-button:active{transform:scale(.97)}
.logo-sheen{position:absolute;inset:0;overflow:hidden;-webkit-mask:url('jammatna-logo-diriyah-v1.webp') center/contain no-repeat;mask:url('jammatna-logo-diriyah-v1.webp') center/contain no-repeat}
.logo-sheen:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffe9ab05 41%,#fff4d08c 49%,#ffe4a71a 56%,transparent 63%);transform:translateX(-110%);animation:brand-glint 1s ease-in-out 600ms 1 both}
@keyframes brand-arrive{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes brand-glint{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.display-hint{order:0;text-align:center;font-size:14px;line-height:1.6;padding:7px 12px;margin:0 0 8px;background:#fff1dce8;border-radius:14px;color:#68452c}
.display-hint[hidden]{display:none}
@media(orientation:landscape){body.tv-mode{min-height:100dvh;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}body.tv-mode main,body.tv-mode.playing main,body.tv-mode.home-view main{width:100%;max-width:none;min-height:calc(100dvh - 24px)}body.tv-mode #app{flex:1}body.tv-mode.home-view .home-category-grid{grid-template-columns:repeat(6,minmax(0,1fr))}body.tv-mode.home-view .home-extra-grid>.tile-wrap:first-child{grid-column:2}body.tv-mode.home-view .home-extra-grid>.tile-wrap:last-child{grid-column:auto}}
@media(orientation:landscape) and (max-height:600px){body.tv-mode #brand,body.tv-mode.home-view #brand{width:220px;max-width:28vw;margin:0 auto 12px}body.tv-mode #brand>p{font-size:20px;padding:3px 20px}body.tv-mode .utility{gap:5px;margin-bottom:6px}body.tv-mode .utility .small-btn{font-size:13px;padding:8px 12px}body.tv-mode.home-view .home-start{min-height:64px;font-size:25px;padding-block:9px}body.tv-mode.home-view .home-play-symbol{width:42px;height:42px;font-size:23px}body.tv-mode .home-section-heading{margin-block:10px 18px}}
@media(prefers-reduced-motion:reduce){.brand-logo-button{animation:none}.logo-sheen{display:none}.brand-logo-button:active{transform:none}}

.tv-guide{width:min(94vw,620px);max-height:88dvh;overflow-y:auto;padding:clamp(20px,4vw,32px);border:1px solid #d0b07a;border-radius:26px;background:#fff4e2;color:#543923}
.tv-guide h2{text-align:center;color:#174e39;margin-bottom:12px}
.tv-guide-intro{font-size:16px;line-height:1.8}
.cast-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}
.cast-devices button{border:1px solid #d8c39d;border-radius:15px;background:#f6e7cf;color:#69482b;font-size:16px;font-weight:700;padding:9px 5px;min-width:0}
.cast-devices button[aria-pressed=true]{background:#174e39;color:#fff4e2;border-color:#174e39;box-shadow:0 3px 8px #174e3920}
.tv-guide-steps{background:#fffaf0;border:1px solid #e6d4b4;border-radius:19px;padding:12px 8px;margin-bottom:14px}
.tv-guide-steps ol{padding-inline-start:28px;padding-inline-end:12px;margin:0}
.tv-guide-steps li{padding:6px 0;font-size:16px;line-height:1.8}
.tv-guide-steps li::marker{color:#174e39;font-weight:bold}
.tv-guide-note{font-size:14px;line-height:1.8;color:#785d3d;margin:10px 0}
.tv-guide #prepareTV{margin-top:12px}.tv-guide #closeTV{margin-top:10px}
#showTV{display:inline-flex;align-items:center;justify-content:center;gap:6px}
@media(max-width:350px){.cast-devices{gap:5px}.cast-devices button{font-size:14px}}

/* Phone art direction keeps moving objects INSIDE the visible center crop. */
@media(max-width:700px){
 .scene-lantern-one{left:calc(50% - 190px);top:-30px;scale:.62;animation-name:phone-lantern-sway;animation-duration:4.8s}
 .scene-lantern-two{left:calc(50% + 50px);top:-12px;scale:.7;animation-name:phone-lantern-sway;animation-duration:5.7s}
 .scene-palm-left{left:calc(50% - 370px);top:-80px;scale:.7;animation-name:phone-palm-breeze;animation-duration:6.8s}
 .scene-palm-right{left:calc(50% + 15px);top:-40px;scale:.7;animation-name:phone-palm-breeze;animation-duration:8.2s}
 .glow-lantern-one{left:calc(50% - 105px);top:105px;width:130px;height:170px}
 .glow-lantern-two{left:calc(50% + 100px);top:100px;width:110px;height:150px}
}
@keyframes phone-lantern-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes phone-palm-breeze{from{transform:rotate(-1.5deg) skewX(-.45deg)}to{transform:rotate(1.5deg) skewX(.45deg)}}

/* Complete frond silhouettes have their own atlas: no lantern holes or polygon cuts. */
.scene-palm-left,.scene-palm-right{background-image:url('jammatna-scene-palms-v2.webp');clip-path:none;-webkit-mask:none;mask:none}
@media(orientation:landscape) and (max-width:1200px){
 .scene-lantern-one{left:calc(50% - 50vw + 24px);top:-55px;scale:.65;animation-name:phone-lantern-sway;animation-duration:5.2s}
 .scene-lantern-two{left:calc(50% + 50vw - 140px);top:-20px;scale:.7;animation-name:phone-lantern-sway;animation-duration:6s}
 .scene-palm-left{left:calc(50% - 50vw - 130px);top:-100px;scale:.6;animation-name:phone-palm-breeze;animation-duration:7.2s}
 .scene-palm-right{left:calc(50% + 50vw - 320px);top:-110px;scale:.6;animation-name:phone-palm-breeze;animation-duration:8.6s}
 .glow-lantern-one{left:75px;top:90px;width:140px;height:160px}
 .glow-lantern-two{left:calc(100% - 75px);top:90px;width:120px;height:150px}
}

/* Individuals / two-team lobby, sharing the existing warm card treatment. */
.play-style{margin-block:20px}.play-style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block:12px 18px}.play-style-options button{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:112px;border:1px solid #cdb38a66;border-radius:22px;background:#fff7e9;color:#52391f;padding:14px}.play-style-options button[aria-pressed=true]{background:#174d3c;color:#fff5df;box-shadow:0 4px 15px #39220d18;border-color:#bd985d}.play-style-options small{font-size:.78rem;color:inherit}.play-style-options button[aria-pressed=true] img{filter:brightness(0) invert(1)}.team-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.team-names label{display:block;min-width:0;font-size:.9rem}.team-names input{width:100%;min-width:0;box-sizing:border-box;margin-top:6px;border:1px solid #cdb38a66;border-radius:16px;background:#fff9ef;padding:12px;color:#52391f;font:inherit}.team-player-row{min-width:0}.team-player-row .player-input{width:100%;box-sizing:border-box}.team-assignment{display:flex;align-items:center;gap:8px;padding:4px 12px 12px;font-size:.8rem}.team-assignment select{min-width:0;flex:1;width:auto;padding:9px;border-radius:14px;margin:0;font:inherit}.team-badge{display:inline-block;font-size:.85rem!important;background:#e2eddf;color:#174d3c;padding:5px 14px;border-radius:20px;margin-top:6px}.question-timer{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;margin-block:10px;color:#174d3c;background:#fff3dd;border-radius:20px;font-variant-numeric:tabular-nums}.question-timer strong{font-size:1.7rem}.timeout-note{border-color:#ba754b}.team-names input:focus-visible,.team-assignment select:focus-visible{outline:3px solid #b78e52;outline-offset:3px}

.football-media{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;max-width:100%;margin:20px auto 4px;padding:18px;border-radius:24px;border:1px solid #c8ab7955;background:linear-gradient(145deg,#fffdf7,#f5e8d0);overflow:hidden}.football-media img{width:min(100%,260px);height:clamp(160px,29vh,260px);object-fit:contain;display:block}.football-media.player img{image-rendering:auto}.football-media figcaption{font-size:.8rem;color:#796348}.football-media.crest img{padding:10px;box-sizing:border-box}.football-media.flag img{width:min(100%,260px);height:150px}.question-card:has(.football-media){padding-block:24px}.question-card:has(.football-media) h2{font-size:clamp(1.2rem,3.4vw,1.8rem)}@media(orientation:landscape) and (max-height:600px){.football-media img{height:130px}.football-media{padding:10px;margin-top:10px}.football-media.flag img{height:100px}}

.football-setup{padding:22px 24px;border-bottom:1px solid #cdb38a44}.football-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-block:14px}.football-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:100px;padding:14px 10px;border:1px solid #cdb38a66;border-radius:20px;background:#fff7e9;color:#52391f;font:inherit;transition:transform .2s,background .2s,box-shadow .2s}.football-options button[aria-pressed=true]{background:#174d3c;color:#fff5df;border-color:#bd985d;box-shadow:0 4px 15px #39220d18}.football-options button small{font-size:.77rem;line-height:1.55}.football-options button:active{transform:scale(.97)}.football-options button:focus-visible{outline:3px solid #b78e52;outline-offset:3px}

.football-options.football-regions{grid-template-columns:repeat(3,minmax(0,1fr))}.football-regions button{min-height:60px;padding:10px 6px;font-size:.92rem}.football-context{font-size:.78rem;line-height:1.7;color:#796348;margin:10px 0 0}.football-media.player img{max-width:100%;object-fit:contain}
/* Reviewed SVG viewports conceal clues without changing the source image. */
.football-media .clue-viewport{display:block;width:min(100%,280px);height:auto;max-height:230px;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.football-media.eyes{min-height:150px;padding:24px 16px;gap:22px;background:linear-gradient(140deg,#f8f0de,#e8d5b0)}
.football-media .eyes-window{border-radius:16px;box-shadow:0 5px 16px #42291622;max-height:100px}
.football-media .crest-window{min-height:100px;max-width:220px}
@media(orientation:landscape) and (max-height:600px){.football-media.eyes{min-height:100px;padding:14px;gap:12px}.football-media .eyes-window{max-height:75px}.football-media .crest-window{max-height:130px}}

/* Edge-to-edge TV canvas; safe-area spacing belongs to controls, never the background. */
body.tv-mode{width:100%;min-height:100vh;min-height:100dvh;padding:0;background-color:#efdbbd;overflow-x:clip}
body.tv-mode main,body.tv-mode.home-view main,body.tv-mode.playing main{width:100%;max-width:none;min-height:100vh;min-height:100dvh;margin:0;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
body.tv-mode:before{position:fixed;inset:0;background-size:cover;background-position:center;min-height:100dvh}
body.tv-mode .ambience-scene{position:fixed;inset:0;width:100%;height:100%;min-height:100dvh;background-color:#efdbbd}
body.tv-mode .ambience-backdrop{background-size:cover;background-position:center}
body.tv-mode #app{flex:1;min-width:0;width:100%}
body.tv-mode .screen{min-width:0;width:100%}
body.tv-mode .display-hint{max-width:100%;margin-inline:auto}
@media(orientation:landscape){
 body.tv-mode main,body.tv-mode.home-view main,body.tv-mode.playing main{padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 body.tv-mode .home-start{max-width:none;width:100%}
 body.tv-mode.playing .screen:has(.question-card){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(16px,2vw,40px)}
}

/* The community shortcut reserves its own row, so it never overlaps home controls. */
.community-bar{display:none;order:-1;align-self:stretch;justify-content:flex-start;width:100%;margin:0 0 10px;direction:rtl}
body.home-view .community-bar{display:flex}
.community-link{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:48px;padding:9px 14px;border:1px solid #cdb38a88;border-radius:22px;background:#fff5e9f5;color:#174e39;text-decoration:none;box-shadow:0 3px 12px #36201616;transition:transform 180ms ease,box-shadow 180ms ease,background-color 180ms ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.community-discord{width:25px;height:25px;flex:none}.community-copy{display:flex;flex-direction:column;gap:2px;line-height:1.3}.community-copy strong{font-size:15px}.community-copy small{font-size:11px;color:#7b6446}.community-arrow{font-size:18px;opacity:.65}
.community-link:focus-visible{outline:3px solid #b78e52;outline-offset:4px}.community-link:active{transform:scale(.97);box-shadow:0 1px 5px #36201620}
@media(hover:hover){.community-link:hover{background:#e7f0e5;box-shadow:0 5px 16px #174e3920;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.community-link{transition:none}.community-link:active,.community-link:hover{transform:none}}

/* The approved logo includes its own tagline. Retain accessible text without duplication. */
#brand>p,body.home-view #brand>p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;box-shadow:none}