:root { color-scheme:dark; font-family:'Tasleya Plex',Tahoma,Arial,system-ui,sans-serif; background:#0b1020; color:#fff8e8; --yellow:#ffd84d; --cyan:#27d3c3; --pink:#ff5d73; --gold:#ffd373; --muted:#b9c1d6; --line:#35405b; --panel:#161d32; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
button,input,select { font:inherit; }
button { min-height:52px; border:1px solid #485a7a; border-radius:14px; padding:13px 20px; color:inherit; background:#1d2c45; font-weight:700; cursor:pointer; touch-action:manipulation; transition:background .12s,border-color .12s; }
button:hover:not(:disabled):not([aria-disabled="true"]) { background:#293d58; border-color:var(--cyan); }
button:disabled { opacity:.55; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,.button-link:focus-visible { outline:3px solid #fff; outline-offset:4px; }
input[type="radio"]:focus-visible { outline:3px solid #fff; outline-offset:4px; }
button.primary { background:var(--yellow); color:#0b1020; border-color:var(--yellow); }
button.primary:hover:not(:disabled) { background:#ffcc24; }
button.quiet,.return-start { background:transparent!important; color:inherit!important; border-color:var(--line)!important; }
.button-link { display:inline-flex; min-height:52px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:14px; padding:13px 20px; color:inherit; font-weight:700; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
p { line-height:1.8; }
.app { width:min(1280px,100%); margin:auto; padding:0 30px calc(30px + var(--selected-pack-bar-height,0px) + 48px + env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; margin-bottom:28px; border-bottom:1px solid var(--line); }
.live-brand { display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none; }
.live-brand img { width:48px;height:48px;border-radius:14px; }
.live-brand strong { display:block;font:800 25px/1.45 'Tasleya Alexandria',Tahoma,Arial,sans-serif; }
.live-brand small { display:block;color:var(--muted);font-size:12px;margin-top:2px; }
.connection { font-size:12px; color:var(--cyan); border:1px solid #326564; border-radius:99px; padding:8px 12px; white-space:nowrap; }
.connection.offline { color:var(--gold); border-color:#79603a; }
.connection:empty { display:none; }
.kicker { font-size:12px; color:var(--cyan); font-weight:800; margin:0 0 10px; }
.landing { display:grid; grid-template-columns:1.08fr 1fr; gap:60px; align-items:center; padding:24px 0 36px; min-height:590px; }
.hero h1 { font:800 clamp(42px,4.8vw,67px)/1.4 'Tasleya Alexandria',Tahoma,Arial,sans-serif; margin:20px 0; letter-spacing:-1px; }
.hero h1 em { display:block; font-style:normal; color:var(--pink); }
.intro { font-size:20px; color:#c1cbe0; }
.setup-actions { display:flex; gap:12px; margin-top:25px; }
.mode-actions { align-items:stretch; flex-wrap:wrap; }
.mode-actions .host-action { flex:1 1 180px; }
.mode-actions .host-action button { width:100%; }
.solo-action { background:#173c58; border-color:var(--cyan); color:#fff; }
.solo-action:hover,.solo-action:focus-visible { background:#20516f; }
.host-action { display:grid;gap:5px; }
.host-action small { color:var(--muted);text-align:center;font-size:11px; }
.hero .setup-actions button { min-width:170px; min-height:60px; }
.how { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:30px 0 0; padding:0; list-style:none; }
.how li { display:flex; align-items:center; gap:10px; padding:14px 12px; border:1px solid var(--line); border-radius:14px; background:var(--panel); font-size:12px; font-weight:700; }
.how b { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:50%; color:#0a3032; background:var(--cyan); }
.how small { display:block; color:var(--muted); margin-top:6px; font-size:10px; font-weight:400; }
.preview-label { font-size:11px; color:var(--muted); margin-bottom:15px; }
.preview-friends { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:25px; }
.preview-friends>span { display:flex; align-items:center; gap:10px; padding:16px 12px; background:var(--panel); border:1px solid var(--line); border-radius:15px; font-size:13px; font-weight:700; }
.avatar { display:inline-grid; place-items:center; flex-shrink:0; width:48px; height:48px; border-radius:16px; background:#213e4b; border:1px solid #4d7487; font-size:25px; font-weight:800; color:var(--cyan); }
.avatar.pink { background:#45203c; color:#ff94bb; border-color:#805274; }
.avatar.gold { background:#493b22; color:var(--gold); border-color:#81704b; }
.preview-card { padding:27px; border:1px solid #52627d; border-top:4px solid var(--pink); border-radius:24px; background:#1a263e; transform:rotate(-1deg); }
.preview-card h2 { font-size:30px; line-height:1.6; margin:20px 0; }
.preview-card>p:last-child { margin:18px 0 0; color:var(--muted); font-size:12px; }
.preview-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:12px; }
.preview-choices span { padding:15px 12px; border:1px solid #445a77; border-radius:12px; }
.preview-choices .picked { color:var(--cyan); border-color:var(--cyan); background:#112230; }
.setup-card,.show-card,.players-card,.player-status,.lobby-share { background:var(--panel); border:1px solid var(--line); border-radius:24px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.form-layout { display:grid; grid-template-columns:1fr 1fr; gap:55px; padding:38px; max-width:1040px; margin:35px auto; }
.form-copy h1 { font-size:39px; line-height:1.5; margin:10px 0 15px; }
.form-copy>p { color:var(--muted); font-size:16px; }
.form-moment { border-top:1px solid var(--line); padding-top:22px; margin-top:26px; }
.form-moment>span { color:var(--gold); font-size:36px; }
.form-moment h2 { font-size:25px; line-height:1.7; margin:8px 0; }
.form-moment p { font-size:13px; color:var(--muted); }
.form-fields { align-self:center; }
.form-fields label { display:block; font-weight:700; margin-bottom:10px; }
.form-fields input { display:block; width:100%; min-height:57px; padding:13px 15px; background:#0c1427; color:inherit; border:1px solid #62718a; border-radius:12px; margin:0 0 22px; font-size:18px; }
.form-fields button { width:100%; margin-top:10px; }
.form-fields .muted { font-size:12px; }
.pack-browser { padding:0 0 48px; }
.pack-browser-heading { display:flex; justify-content:space-between; align-items:start; gap:24px; margin:8px 0 25px; }
.pack-browser-heading h1 { font:800 clamp(34px,4vw,50px)/1.45 'Tasleya Alexandria',Tahoma,Arial,sans-serif; margin:4px 0; }
.pack-browser-heading p:last-child { color:var(--muted); margin:0; }
.pack-browser-heading .back-button { min-width:110px; }
.scope-selector { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:450px; border:1px solid var(--line); border-radius:16px; padding:5px; margin:0 0 18px; background:#0c1427; }
.scope-selector label { cursor:pointer; }
.scope-selector input { position:absolute; opacity:0; pointer-events:none; }
.scope-selector span { display:grid; place-items:center; min-height:48px; padding:10px 18px; border-radius:11px; font-weight:800; }
.scope-selector input:checked+span { background:var(--yellow); color:#0b1020; }
.scope-selector input:focus-visible+span { outline:3px solid #fff; outline-offset:4px; }
.theme-selector { width:100%; max-width:100%; min-inline-size:0; margin:18px 0 0; padding:0; border:0; }
.theme-selector legend { margin-bottom:10px; color:var(--muted); font-size:13px; font-weight:800; }
.theme-options { width:100%; max-width:100%; display:flex; gap:9px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.theme-option { position:relative; display:grid!important; grid-template-columns:auto auto auto; align-items:center; gap:7px; flex:0 0 auto; min-height:48px; margin:0!important; padding:9px 12px; border:1px solid #52627d; border-radius:14px; background:#0c1427; cursor:pointer; scroll-snap-align:start; }
.theme-option:has(input:checked) { border-color:var(--yellow); background:#21354c; box-shadow:0 0 0 2px var(--yellow); }
.theme-option input { position:absolute; opacity:0; pointer-events:none; }
.theme-option:has(input:focus-visible) { outline:3px solid #fff; outline-offset:3px; }
.theme-option small { color:var(--muted); }
.theme-icon { color:var(--yellow); font-size:19px; }
.pack-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) minmax(190px,.35fr); gap:12px; align-items:end; margin-bottom:18px; }
.pack-toolbar label { display:grid; gap:7px; font-size:13px; font-weight:800; }
.pack-toolbar input,.pack-toolbar select { width:100%; min-height:52px; padding:12px 14px; color:inherit; background:#0c1427; border:1px solid #62718a; border-radius:12px; }
.pack-toolbar select { appearance:auto; }
.pack-selector { margin:0; padding:0; border:0; }
.pack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:2px; }
.pack-option-row { position:relative; min-width:0; scroll-margin-bottom:calc(var(--selected-pack-bar-height,0px) + 32px + env(safe-area-inset-bottom)); }
.pack-option-row .pack-option { height:100%; padding-inline-end:92px; }
.pack-favourite { position:absolute; inset-inline-end:12px; top:12px; width:auto!important; min-height:44px; margin:0!important; padding:8px 10px; border-radius:10px; font-size:12px; background:#18223b; z-index:1; }
.pack-favourite[aria-pressed=true] { color:var(--pink); border-color:var(--pink); }
.pack-option { display:grid!important; grid-template-columns:auto minmax(0,1fr); gap:13px; align-items:start; margin:0!important; padding:16px; border:1px solid #52627d; border-radius:15px; background:#0c1427; cursor:pointer; }
.pack-option:has(input:checked) { border-color:var(--yellow); box-shadow:0 0 0 2px var(--yellow); background:#171c2c; }
.pack-option input { width:20px!important; min-height:20px!important; margin:4px 0 0!important; accent-color:var(--yellow); }
.pack-copy strong,.pack-copy small,.pack-copy b { display:block; }
.pack-copy strong { font-size:17px; line-height:1.55; overflow-wrap:anywhere; }
.pack-copy small { color:var(--cyan); margin-top:3px; }
.pack-copy p { color:var(--muted); font-size:12px; margin:8px 0; }
.pack-copy b { color:var(--gold); font-size:11px; }
.results-heading { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.results-heading p { color:var(--muted); font-size:13px; margin:0; }
.text-button { min-height:44px; padding:7px 10px; border:0; background:transparent; color:var(--cyan); }
.inline-alert,.empty-state { padding:18px; margin:0 0 18px; border:1px solid #9b7041; border-radius:16px; background:#30251d; }
.inline-alert { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.inline-alert p,.empty-state p { color:var(--muted); margin:4px 0 0; }
.inline-alert button { flex-shrink:0; }
.empty-state { text-align:center; border-style:dashed; background:#10182a; }
.pack-toolbar,.results-heading,.inline-alert,.empty-state { scroll-margin-bottom:calc(var(--selected-pack-bar-height,0px) + 32px + env(safe-area-inset-bottom)); }
.empty-state h2 { margin-bottom:6px; }
.selected-pack-bar { position:fixed; inset-inline:max(30px,calc(50vw - 610px)); bottom:max(12px,env(safe-area-inset-bottom)); z-index:5; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; margin:0; padding:14px 16px; border:1px solid #7a6d32; border-radius:18px; background:rgba(17,25,43,.98); box-shadow:0 12px 40px #030711; }
.selected-pack-bar div { min-width:0; }
.selected-pack-bar small,.selected-pack-bar span { display:block; color:var(--muted); font-size:11px; }
.selected-pack-bar strong { display:block; margin:2px 0; overflow-wrap:anywhere; }
#selected-pack-filter-note { margin:4px 0 0; color:var(--gold); font-size:12px; }
.confirmation-card { max-width:620px; margin:35px auto; padding:34px; }
.confirmation-card h1 { font-size:34px; }
.confirmation-card>label { display:block; font-weight:800; margin:24px 0 8px; }
.confirmation-card>input { width:100%; min-height:57px; padding:13px 15px; background:#0c1427; color:inherit; border:1px solid #62718a; border-radius:12px; font-size:18px; }
.confirmation-card>#confirmation-access-copy { margin:12px 0 18px; }
.confirmation-card>button { width:100%; margin-top:10px; }
.confirmation-pack { padding:16px; border:1px solid var(--line); border-inline-start:4px solid var(--yellow); border-radius:14px; background:#0c1427; }
.confirmation-pack small,.confirmation-pack span { display:block; color:var(--muted); font-size:12px; }
.confirmation-pack strong { display:block; margin:5px 0; overflow-wrap:anywhere; }
.recovery-card { max-width:700px; text-align:center; padding:40px; margin:35px auto; }
.recovery-card h1 { font-size:34px; }
.recovery-card p { color:var(--muted); }
.recovery-card .setup-actions { justify-content:center; }
.recovery-icon { display:block; font-size:64px; color:var(--cyan); margin-bottom:18px; }
.message { color:var(--gold); margin:12px 0; text-align:center; overflow-wrap:anywhere; scroll-margin-bottom:calc(var(--selected-pack-bar-height,0px) + 32px + env(safe-area-inset-bottom)); }
.message:empty { display:none; }
#room { display:grid; grid-template-columns:minmax(0,1fr) 270px; grid-template-areas:"show identity" "show players"; grid-template-rows:auto 1fr; gap:18px; align-items:start; }
.show-card { grid-area:show; padding:30px; min-width:0; }
.player-status { grid-area:identity; padding:22px; border-top:3px solid var(--cyan); min-width:0; }
.identity-line { display:flex; align-items:center; gap:12px; }
.identity-line small { color:var(--muted); font-size:11px; }
#identity { margin:5px 0 0; font-size:23px; line-height:1.5; overflow-wrap:anywhere; }
.own-score { font-size:38px; font-weight:900; margin:24px 0 12px; }
.own-score small { font-size:13px; color:var(--muted); font-weight:400; }
.own-score.secret { font-size:18px; line-height:1.7; color:var(--gold); }
#owner-note { font-size:12px; margin:8px 0; }
#owner-note:empty { display:none; }
.room-reference { border-top:1px solid var(--line); padding-top:14px; color:var(--muted); font-size:10px; }
.room-reference b { font-weight:400; letter-spacing:2px; margin-right:8px; }
.show-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:22px; }
#round-title { font-size:17px; line-height:1.5; margin:0; }
.show-heading .kicker { color:var(--muted); font-size:11px; margin-bottom:6px; }
.phase-timer { display:flex; align-items:center; gap:10px; flex-shrink:0; }
#timer-label { font-size:11px; color:var(--muted); margin:0; max-width:110px; }
.timer { display:grid; place-items:center; width:46px; height:46px; border:2px solid var(--cyan); border-radius:50%; font-size:22px; font-weight:800; }
.timer.urgent { border-color:var(--pink); }
.timer[data-answering="false"] { border-color:#7d8ca5; }
.hero-copy { color:var(--muted); line-height:1.8; font-size:15px; }
.hero-copy:empty { display:none; }
.question-meta { font-size:12px; color:var(--gold); margin-bottom:15px; }
.question-title,.preview-title { font-size:clamp(26px,2.65vw,38px); line-height:1.65; margin:12px 0 26px; overflow-wrap:anywhere; }
.media-stage { display:grid; place-items:center; gap:12px; width:100%; margin:0 0 20px; padding:14px; border:1px solid var(--line); border-radius:18px; background:#0c1427; overflow:hidden; }
.media-stage.failed { border-style:dashed; }
.question-image { display:block; width:100%; max-width:760px; max-height:min(46vh,520px); object-fit:contain; border-radius:12px; background:#08101f; }
.question-audio { display:none; }
.audio-play { min-width:min(100%,260px); min-height:58px; }
.media-status,.media-fallback,.media-fallback-clue { margin:0; color:var(--muted); text-align:center; line-height:1.7; }
.media-fallback { color:var(--gold); }
.media-fallback-clue { color:#d8e7e9; font-weight:700; }
.media-retry { min-height:44px; }
.controls,.choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.controls:empty { display:none; }
.answer-button { min-height:76px; padding:18px; text-align:right; font-size:18px; line-height:1.7; overflow-wrap:anywhere; }
.controls.long-answers { grid-template-columns:1fr; }
.answer-button.selected { border:2px solid var(--cyan); background:#16414c; box-shadow:inset -5px 0 var(--cyan); }
.answer-button.selected:after { content:"●"; color:var(--cyan); margin-right:12px; }
.answer-button.selected[data-feedback="ACCEPTED_LOCKED"]:after { content:"✓"; }
.answer-button[aria-disabled="true"] { cursor:default; }
.answer-feedback,.answer-retry,.locked-copy,.centered,.start-button,.no-power,.next-room-note { grid-column:1/-1; }
.answer-feedback { margin:0; color:var(--cyan); font-weight:700; line-height:1.8; }
.answer-feedback:empty { display:none; }
.answer-progress { color:var(--muted); font-size:13px; margin:15px 0 0; }
.answer-progress:empty { display:none; }
.locked-copy { padding:16px; border:1px solid var(--line); border-radius:14px; line-height:1.8; margin:0; }
.waiting-copy,.muted,.centered { color:var(--muted); line-height:1.8; }
.announcement { padding:13px 16px; border:1px solid var(--line); border-radius:14px; font-size:14px; line-height:1.8; }
.announcement.double { border-color:#8a743c; color:var(--gold); }
.announcement.challenge { border-color:#835173; color:#ffadd0; }
.announcement.retry { border-color:#9c5263; color:#ffd0d7; }
.power { min-height:82px; text-align:right; font-size:18px; }
.power.double { border-color:var(--gold); color:var(--gold); }
.power.challenge { border-color:var(--pink); color:#ffc0da; }
.no-power { border-style:dashed; }
.players-card { grid-area:players; padding:20px; min-width:0; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.section-heading h2 { font-size:16px; margin:0; }
#score-note { font-size:11px; color:var(--muted); margin:0; }
.players { display:grid; gap:10px; margin:17px 0 0; padding:0; list-style:none; }
.player { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); min-width:0; }
.player:last-child { border-bottom:0; }
.player .avatar { width:37px; height:37px; font-size:19px; border-radius:12px; }
.player.mine { border-radius:12px; padding:12px; background:#1b3945; border:1px solid #386a76; }
.player.offline .player-detail { color:var(--gold); }
.player-name { font-size:14px; font-weight:700; overflow-wrap:anywhere; flex:1; }
.player-detail { color:var(--cyan); font-size:11px; text-align:left; }
.player-rank { font-size:23px; color:var(--gold); min-width:28px; }
#room[data-state="LOBBY"] { grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr); grid-template-areas:"players share" "players show"; }
#room[data-state="LOBBY"] .player-status { display:none; }
#room[data-state="LOBBY"] .players-card { padding:30px; }
#room[data-state="LOBBY"] .section-heading h2 { font-size:26px; }
#room[data-state="LOBBY"] .player { padding:20px; border-radius:16px; background:#1a2942; border:1px solid var(--line); }
#room[data-state="LOBBY"] .player.mine { background:#1b3945; border-color:#386a76; }
#room[data-state="LOBBY"] .player-name { font-size:20px; }
#room[data-state="LOBBY"] .player .avatar { width:48px; height:48px; font-size:25px; }
#room[data-state="LOBBY"] .show-card { padding:22px; }
#room[data-state="LOBBY"] .show-heading { border:0; margin:0; padding:0; }
#room[data-state="LOBBY"] .hero-copy { margin-bottom:0; }
.lobby-share { grid-area:share; padding:25px; text-align:center; }
.lobby-share h2 { font-size:18px; margin:10px 0; }
#share-code { display:block; color:var(--gold); font-size:46px; letter-spacing:6px; margin:15px 0; }
.lobby-share p { color:var(--muted); font-size:13px; }
.share-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
#room[data-state="STANDINGS"] { grid-template-areas:"players identity" "players show"; }
#room[data-state="STANDINGS"] .players-card { padding:30px; }
#room[data-state="STANDINGS"] .player-name { font-size:22px; }
#room[data-state="STANDINGS"] .player-detail { font-size:21px; color:var(--gold); }
.result-banner { text-align:center; padding:12px 0 26px; margin-bottom:24px; border-bottom:1px solid var(--line); animation:reveal .35s ease both; }
.result-icon { display:grid; place-items:center; width:84px; height:84px; border:2px solid #558b71; background:#184a3c; color:#adf5cc; font-size:45px; border-radius:26px; margin:0 auto 16px; }
.result-banner.wrong .result-icon { border-color:#b96b80; background:#52253a; color:#ffbad0; }
.result-banner.neutral .result-icon { border-color:#9b8554; background:#473923; color:var(--gold); }
.result-banner h2 { font-size:43px; line-height:1.5; margin:10px 0; }
.result-delta { display:block; font-size:40px; font-weight:900; color:var(--gold); margin:12px 0; }
.result-banner .power-consequence { display:block; margin:12px auto 0; padding:13px; border:1px solid #907843; border-radius:12px; width:fit-content; font-size:16px; color:var(--gold); }
.result-question { font-size:20px; color:var(--muted); line-height:1.7; }
.correct-answer-summary { margin:14px 0; padding:13px 15px; border:1px solid #4d9f80; border-radius:13px; background:#123f37; }
.correct-answer-summary bdi { font-weight:900; color:#c7f8db; }
.question-standings { margin:18px 0; text-align:start; }
.question-standings h3 { margin:0 0 10px; }
.question-standings-list { max-height:min(44vh,430px); overflow:auto; overscroll-behavior:contain; list-style:none; margin:0; padding:3px; display:grid; gap:8px; scroll-padding-block:8px; }
.question-standing-row { display:grid; grid-template-columns:34px 42px minmax(120px,1fr) minmax(90px,auto) minmax(82px,auto); align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:#12233b; }
.question-standing-row.mine { border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan); background:#17354a; }
.question-rank { text-align:center; font-size:20px; color:var(--gold); font-variant-numeric:tabular-nums; }
.question-player { min-width:0; display:grid; gap:2px; }
.question-player strong,.question-player small { overflow-wrap:anywhere; }
.question-player small { color:var(--muted); }
.question-player .standing-power { color:var(--gold); }
.question-points,.question-total { display:grid; justify-items:end; font-variant-numeric:tabular-nums; }
.question-points bdi,.question-total bdi { font-weight:900; }
.question-points small,.question-total small { color:var(--muted); font-size:10px; }
.choice { padding:16px; border:1px solid var(--line); border-radius:14px; font-size:17px; line-height:1.8; overflow-wrap:anywhere; }
.choice.correct { border:2px solid #62b98d; background:#16392f; }
.choice.selected-wrong { border:2px solid #cf7a93; background:#382237; }
.choice-mark { display:block; font-size:12px; font-weight:700; color:#d8e7e9; margin-top:7px; }
.own-choice { font-size:15px; line-height:1.8; color:var(--muted); }
.pack-language { color:var(--muted); font-size:12px; }
.study-explanation { margin-top:22px; padding:20px; border:1px solid #907843; border-radius:16px; background:#211e24; }
.study-explanation h3 { color:var(--gold); font-size:17px; margin:0 0 12px; }
.study-explanation p { color:#fff8e8; font-size:16px; line-height:1.75; margin:0; text-align:start; }
.study-explanation p[dir="rtl"] { text-align:right; }
.study-explanation p[dir="ltr"] { text-align:left; }
.study-explanation .study-reference { color:var(--muted); font-size:13px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
#room[data-state="PODIUM"],#room[data-state="ENDED"] { grid-template-areas:"show show" "players identity"; }
#room[data-play-mode="solo"] { grid-template-columns:minmax(0,1fr) 270px; grid-template-areas:"show identity"; }
#room[data-play-mode="solo"] .players-card,#room[data-play-mode="solo"] .lobby-share,#room[data-play-mode="solo"] .room-reference,#room[data-play-mode="solo"] #owner-note { display:none!important; }
#room[data-play-mode="solo"][data-state="PODIUM"],#room[data-play-mode="solo"][data-state="ENDED"] { grid-template-areas:"show identity"; }
#room[data-state="PODIUM"] .show-heading,#room[data-state="PODIUM"] .hero-copy { display:none; }
.trophy { font-size:45px; text-align:center; margin:0; }
.podium-title { text-align:center; font-size:42px; line-height:1.6; margin:12px 0 26px; }
.podium-stage { display:flex; flex-wrap:wrap; align-items:end; justify-content:center; gap:18px; margin:0 auto 28px; max-width:850px; }
.podium-place { text-align:center; flex:1 1 170px; min-width:0; border:1px solid #5e6d86; border-top:4px solid #b7c7df; border-radius:20px 20px 0 0; padding:24px 15px; background:#1c2940; min-height:190px; }
.podium-place.first { background:#443821; border-color:var(--gold); min-height:240px; }
.podium-place.third { min-height:160px; border-color:#bf916d; }
.podium-place h3 { overflow-wrap:anywhere; font-size:24px; margin:14px 0; }
.podium-place p { font-size:25px; font-weight:800; color:var(--gold); margin:0; }
.podium-place small { display:block; margin-bottom:15px; color:var(--muted); }
.personal-finish { text-align:center; padding:20px; border:1px solid #897247; border-radius:15px; color:var(--gold); font-size:22px; line-height:1.7; }
.solo-final-summary { width:min(560px,100%); margin:0 auto 24px; padding:28px; border:1px solid var(--live-line-strong); border-radius:22px; text-align:center; background:linear-gradient(150deg,#0d2d4c,#0a213a); }
.solo-final-score { margin:12px 0; color:var(--gold); font-size:clamp(42px,7vw,70px); font-weight:900; }
.solo-final-score small { font-size:.32em; font-weight:600; }
.solo-final-progress { margin:0; color:var(--muted); font-size:17px; }
.next-room-note { color:var(--muted); font-size:13px; text-align:center; margin:0; }
.site-footer { margin-top:32px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
[hidden] { display:none!important; }
@keyframes reveal { from { opacity:.3; transform:translateY(7px); } to { opacity:1; transform:none; } }
@media(max-width:950px) { .landing { gap:30px; }.preview-friends>span { flex-direction:column; }.how li { flex-direction:column; align-items:flex-start; }#room { grid-template-columns:minmax(0,1fr) 235px; }.form-layout { gap:28px; padding:28px; }.show-card { padding:24px; }.pack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
 .app { padding:0 16px calc(25px + var(--selected-pack-bar-height,0px) + 32px + env(safe-area-inset-bottom)); }.topbar { padding:20px 0; margin-bottom:20px; }.brand { font-size:29px; }.tagline { font-size:10px; max-width:200px; }.connection { font-size:10px; padding:7px; }
 .landing { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:10px 0; gap:35px; }.hero h1 { font-size:43px; margin:18px 0; }.intro { font-size:17px; }.hero .setup-actions button { min-width:0; flex:1; min-height:56px; }.how { margin-top:24px; gap:8px; }.how li { padding:12px 9px; font-size:11px; }.how small { font-size:9px; }.preview-friends>span { flex-direction:row; padding:12px 8px; font-size:10px; gap:7px; }.preview-friends .avatar { width:32px; height:32px; font-size:17px; border-radius:10px; }.preview-card { padding:22px; }.preview-card h2 { font-size:25px; }
 .form-layout { grid-template-columns:1fr; gap:18px; margin:0; padding:24px; }.form-copy h1 { font-size:31px; }.form-copy>p { font-size:14px; margin-bottom:0; }.form-moment { display:none; }.form-fields input { font-size:17px; }.recovery-card { margin:0; padding:28px 20px; }.recovery-card h1 { font-size:29px; }.setup-actions { flex-wrap:wrap; }
 .pack-browser { padding-bottom:32px; }.pack-browser-heading { align-items:center; margin-bottom:18px; }.pack-browser-heading h1 { font-size:32px; }.pack-browser-heading p:last-child { font-size:13px; }.pack-browser-heading .back-button { min-width:0; padding-inline:14px; }.scope-selector { max-width:none; }.pack-toolbar { grid-template-columns:1fr; }.pack-grid { grid-template-columns:1fr; }.inline-alert { align-items:stretch; flex-direction:column; }.inline-alert button { width:100%; }.selected-pack-bar { inset-inline:16px; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px; bottom:max(8px,env(safe-area-inset-bottom)); }.selected-pack-bar .primary { width:auto; min-height:48px; padding-inline:14px; font-size:14px; }.confirmation-card { margin:0; padding:24px; }.confirmation-card h1 { font-size:29px; }
 #room,#room[data-state="LOBBY"],#room[data-state="STANDINGS"],#room[data-state="PODIUM"],#room[data-state="ENDED"],#room[data-play-mode="solo"],#room[data-play-mode="solo"][data-state="PODIUM"],#room[data-play-mode="solo"][data-state="ENDED"] { grid-template-columns:minmax(0,1fr); gap:14px; grid-template-areas:"identity" "show" "players"; }
 #room[data-play-mode="solo"],#room[data-play-mode="solo"][data-state="PODIUM"],#room[data-play-mode="solo"][data-state="ENDED"] { grid-template-areas:"identity" "show"; }
 #room[data-state="LOBBY"] { grid-template-areas:"share" "players" "show"; }#room[data-state="STANDINGS"] { grid-template-areas:"identity" "players" "show"; }
 .player-status { padding:12px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:17px; }.identity-line { gap:9px; }.identity-line small { display:none; }.identity-line .avatar { width:35px; height:35px; font-size:18px; border-radius:11px; }#identity { font-size:17px; margin:0; }.own-score { font-size:25px; margin:0; white-space:nowrap; }.own-score small { font-size:10px; }.own-score.secret { font-size:12px; white-space:normal; max-width:145px; }.room-reference,#owner-note { display:none; }
 .show-card { padding:20px 17px; border-radius:20px; }.show-heading { margin-bottom:18px; padding-bottom:13px; gap:8px; }#round-title { font-size:14px; }.phase-timer { gap:7px; }#timer-label { font-size:10px; max-width:75px; }.timer { width:37px; height:37px; font-size:18px; }.hero-copy { font-size:13px; }.question-title,.preview-title { font-size:25px; line-height:1.65; margin:12px 0 20px; }.question-meta { font-size:11px; }
 .media-stage { padding:10px; margin-bottom:16px; }.question-image { max-height:36vh; }.audio-play { width:100%; }
 .controls,.choices { grid-template-columns:1fr; gap:10px; margin-top:18px; }.answer-button { min-height:62px; padding:13px 15px; font-size:17px; }.answer-feedback { font-size:14px; }.answer-progress { font-size:12px; }.power { font-size:17px; min-height:66px; }
 .players-card { padding:18px; }.lobby-share { padding:23px; }#share-code { font-size:39px; }#room[data-state="LOBBY"] .players-card { padding:20px; }#room[data-state="LOBBY"] .player { padding:14px; }#room[data-state="LOBBY"] .player-name { font-size:17px; }#room[data-state="STANDINGS"] .players-card { padding:20px; }#room[data-state="STANDINGS"] .player-name { font-size:18px; }#room[data-state="STANDINGS"] .player-detail { font-size:17px; }
 .result-banner { padding:5px 0 22px; }.result-banner h2 { font-size:34px; }.result-icon { width:65px; height:65px; font-size:35px; border-radius:21px; }.result-delta { font-size:32px; }.result-question { font-size:17px; }.choice { font-size:16px; }.result-banner .power-consequence { font-size:14px; }.study-explanation { padding:16px; }.study-explanation p { font-size:15px; }
 .podium-title { font-size:30px; }.podium-stage { gap:8px; }.podium-place { flex-basis:85px; padding:18px 7px; min-height:160px; }.podium-place.first { min-height:205px; }.podium-place.third { min-height:140px; }.podium-place .avatar { width:36px; height:36px; font-size:20px; border-radius:12px; }.podium-place h3 { font-size:16px; }.podium-place p { font-size:19px; }.podium-place small { font-size:10px; }.personal-finish { font-size:18px; padding:15px; }
}
@media (max-width: 430px) { .preview-choices { font-size:11px; }.preview-choices span { padding:12px 9px; }.form-layout { padding:22px 18px; }.pack-browser-heading p:last-child { display:none; }.pack-browser-heading h1 { font-size:29px; }.pack-toolbar { grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); }.pack-toolbar input,.pack-toolbar select { padding-inline:10px; }.pack-option-row .pack-option { padding-inline-end:82px; }.pack-copy strong { font-size:16px; }.selected-pack-bar { gap:6px; padding:10px 12px; }.selected-pack-bar strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.5; }.selected-pack-bar span { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }

.result-delta small { font-size:.6em; }

/* Closest estimates share the production show stage and keep native form focus. */
.estimate-form { grid-column:1/-1; width:min(540px,100%); margin-inline:auto; display:grid; gap:14px; text-align:start; }
.estimate-field { display:flex; align-items:center; gap:16px; font-size:24px; }
.estimate-field input { background:#0c1427; color:inherit; border:1px solid #62718a; border-radius:14px; min-width:0; width:100%; font-size:36px; text-align:center; padding:16px; }
.estimate-submit { min-height:62px; font-size:22px; }
.estimate-submit,.answer-submit { touch-action:manipulation; scroll-margin-bottom:calc(18px + env(safe-area-inset-bottom)); }
.estimate-submit[aria-disabled="true"] { opacity:.65; cursor:default; }
.estimate-reveal { text-align:center; }
.reveal-label { color:var(--muted); font-size:20px; margin:8px 0; }
.canonical-estimate { font-size:clamp(36px,5vw,64px); margin:8px 0 14px; }
.closest-summary { font-weight:800; }
.estimate-standings { list-style:none; padding:0; display:grid; gap:10px; }
.estimate-row { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; text-align:start; background:#17233a; }
.estimate-row.mine { outline:2px solid var(--cyan); outline-offset:2px; }
.estimate-row.closest { border-color:#90dfac; background:#183c34; }
.estimate-value { font-size:24px; overflow-wrap:anywhere; }
.estimate-award { font-weight:800; }
@media(max-width:600px) {
 .estimate-field input { font-size:30px; padding:12px; }
 .estimate-row { grid-template-columns:1fr auto; padding:12px; gap:8px; }
 .estimate-award { grid-column:1/-1; }
 .estimate-value { font-size:22px; }
 .question-standing-row { grid-template-columns:28px 38px minmax(0,1fr) auto; gap:8px; padding:10px; }
 .question-standing-row .avatar { width:36px; height:36px; }
 .question-points { grid-column:3; grid-row:2; justify-items:start; }
 .question-total { grid-column:4; grid-row:2; }
}

/* Tasleya Live visual refresh — presentation only; game authority stays server-side. */
:root {
 --live-bg:#061a35;
 --live-bg-deep:#031126;
 --live-panel:#092440;
 --live-panel-raised:#0d2d4c;
 --live-line:#245074;
 --live-line-strong:#3976a0;
 --live-ink:#f8fbff;
 --live-muted:#adc4da;
 --live-yellow:#ffd84d;
 --live-cyan:#27d3c3;
 --live-pink:#ef476f;
 --live-blue:#1d86ed;
 --live-green:#18b982;
 --live-orange:#f6a623;
 --live-shadow:0 22px 65px rgba(0,7,20,.32);
 --yellow:var(--live-yellow);
 --cyan:var(--live-cyan);
 --pink:var(--live-pink);
 --gold:#ffe07c;
 --muted:var(--live-muted);
 --line:var(--live-line);
 --panel:var(--live-panel);
 background:var(--live-bg-deep);
 color:var(--live-ink);
}
body {
 background:
  radial-gradient(circle at 9% 4%,rgba(29,134,237,.19),transparent 32rem),
  radial-gradient(circle at 92% 18%,rgba(39,211,195,.09),transparent 28rem),
  linear-gradient(145deg,var(--live-bg-deep),var(--live-bg) 52%,#082749);
 background-attachment:fixed;
}
body::before {
 content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.24;
 background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
 background-size:32px 32px;
 mask-image:linear-gradient(to bottom,#000,transparent 78%);
}
.app { width:min(1360px,100%); padding-inline:clamp(18px,3vw,46px); }
.topbar { padding:20px 0; margin-bottom:24px; border-color:rgba(103,164,205,.27); }
.live-brand img { width:52px; height:52px; border-radius:15px; box-shadow:0 10px 28px rgba(255,216,77,.13); }
.live-brand strong { font-size:clamp(22px,2vw,28px); }
.live-brand small { color:#c1d3e5; }
.connection { background:rgba(7,36,61,.72); backdrop-filter:blur(10px); }
button { border-color:var(--live-line-strong); background:#123858; border-radius:16px; }
button:hover:not(:disabled):not([aria-disabled="true"]) { background:#174767; }
button.primary { background:linear-gradient(135deg,#ffe36f,var(--live-yellow)); color:#061426; box-shadow:0 10px 24px rgba(255,216,77,.17); }
button:focus-visible,input:focus-visible,select:focus-visible,.button-link:focus-visible { outline-color:var(--live-yellow); }
.setup-card,.show-card,.players-card,.player-status,.lobby-share {
 background:linear-gradient(145deg,rgba(13,45,76,.96),rgba(7,29,54,.98));
 border-color:rgba(75,137,180,.48); box-shadow:var(--live-shadow);
}
.kicker { color:#69e4db; letter-spacing:.02em; }
.landing { min-height:620px; }
.hero h1 { max-width:780px; }
.hero h1 em { color:var(--live-yellow); }
.intro { color:#c3d5e6; }
.preview-card { background:linear-gradient(145deg,#0e365a,#091f3d); border-color:#39739a; border-top-color:var(--live-yellow); transform:rotate(-.35deg); box-shadow:var(--live-shadow); }
.preview-choices span { background:rgba(4,20,40,.45); }
.preview-choices .picked { color:#fff; border-color:var(--live-yellow); background:#30401f; }
.how li,.preview-friends>span { background:rgba(8,36,64,.76); border-color:#2a5d82; }
.how b { background:var(--live-yellow); color:#061426; }

.pack-browser-heading { align-items:center; }
.pack-browser-heading h1 { max-width:760px; }
.scope-selector { margin-inline:auto; width:min(460px,100%); background:#061a33; border-color:#2d6288; border-radius:999px; }
.scope-selector span { border-radius:999px; }
.pack-toolbar { margin-top:24px; }
.pack-toolbar input,.pack-toolbar select,.form-fields input,.confirmation-card>input { background:#06182f; border-color:#3e759b; }
.pack-grid { gap:18px; }
.pack-option-row { min-height:100%; }
.pack-option-row .pack-option { padding:0 0 18px; padding-inline-end:0; overflow:hidden; }
.pack-option {
 position:relative; display:grid!important; grid-template-columns:1fr; gap:0; align-content:start;
 border-color:#2d6288; border-radius:22px; background:linear-gradient(160deg,#0d2d4c,#071c36);
 box-shadow:0 12px 32px rgba(0,7,20,.2); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.pack-option:hover { transform:translateY(-3px); border-color:#5b94ba; }
.pack-option:has(input:checked) { border-color:var(--live-yellow); box-shadow:0 0 0 3px var(--live-yellow),0 18px 48px rgba(0,7,20,.34); background:linear-gradient(160deg,#123656,#09213d); }
.pack-option input { position:absolute; inset-inline-start:16px; top:16px; z-index:2; width:24px!important; height:24px; opacity:0; }
.pack-option:has(input:focus-visible) { outline:3px solid #fff; outline-offset:4px; }
.pack-art {
 position:relative; display:grid; place-items:end start; min-height:150px; padding:18px; overflow:hidden;
 background:
  radial-gradient(circle at 23% 23%,rgba(255,255,255,.2) 0 2px,transparent 3px),
  radial-gradient(circle at 72% 34%,rgba(255,216,77,.38) 0 3px,transparent 4px),
  linear-gradient(135deg,#155d91,#103d6b 58%,#0a2749);
 isolation:isolate;
}
.pack-art::before { content:""; position:absolute; width:150px; aspect-ratio:1; inset:auto -34px -55px auto; border:28px solid rgba(255,255,255,.08); border-radius:50%; }
.pack-art::after { content:""; position:absolute; width:72px; height:72px; inset:16px 18px auto auto; background:linear-gradient(135deg,rgba(255,216,77,.25),transparent); transform:rotate(28deg); border-radius:20px; }
.pack-art[data-palette="1"] { background:linear-gradient(135deg,#6d2a69,#193c70); }
.pack-art[data-palette="2"] { background:linear-gradient(135deg,#146c67,#123a63); }
.pack-art[data-palette="3"] { background:linear-gradient(135deg,#874923,#553260 55%,#18365b); }
.pack-art[data-palette="4"] { background:linear-gradient(135deg,#294c9a,#174772 58%,#082a4a); }
.pack-art[data-palette="5"] { background:linear-gradient(135deg,#335d33,#165b65 58%,#123a63); }
.pack-art-mark { position:relative; z-index:1; display:grid; place-items:center; width:64px; height:64px; border-radius:20px; background:rgba(3,17,38,.72); border:1px solid rgba(255,255,255,.25); color:var(--live-yellow); font:800 30px/1 'Tasleya Alexandria',sans-serif; backdrop-filter:blur(8px); }
.pack-art-caption { position:absolute; z-index:1; inset:auto auto 18px 96px; max-width:calc(100% - 120px); color:#fff; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pack-copy { display:block; padding:20px 20px 0; }
.pack-copy strong { font-size:19px; }
.pack-copy small { color:#72e2d9; font-weight:700; }
.pack-copy p { min-height:3.6em; color:#c0d3e4; font-size:13px; }
.pack-copy b { color:#f8e6a9; font-size:12px; }
.pack-favourite { inset-inline-end:14px; top:14px; background:rgba(3,17,38,.82); border-color:rgba(255,255,255,.35); backdrop-filter:blur(9px); }
.pack-option-row[data-pack-kind="social"] .pack-option { min-height:100%; }
.selected-pack-bar { background:rgba(5,24,46,.96); border-color:#a68d34; backdrop-filter:blur(18px); box-shadow:0 20px 55px rgba(0,7,20,.5); }

#room { grid-template-columns:minmax(0,1fr) 290px; gap:20px; }
.show-card { padding:clamp(22px,3vw,38px); }
.show-heading { border-color:rgba(75,137,180,.38); }
.timer { width:54px; height:54px; border:5px solid rgba(39,211,195,.2); border-top-color:var(--live-cyan); background:#061a33; font-variant-numeric:tabular-nums; box-shadow:0 0 0 1px #2b6c85; }
.timer.urgent { border-color:rgba(239,71,111,.25); border-top-color:var(--live-pink); }
.own-score,#share-code,.player-detail,.player-rank,.result-delta,.canonical-estimate,.estimate-value { font-variant-numeric:tabular-nums; }
.question-meta { display:inline-flex; width:fit-content; padding:7px 11px; border:1px solid #2b6c85; border-radius:999px; background:#07243e; color:#a8e6df; }
.question-meta { align-items:center; gap:6px; }
.question-progress { font-variant-numeric:tabular-nums; }
.question-title { text-wrap:balance; }
.controls,.choices { direction:rtl; gap:14px; }
.answer-button,.choice {
 --answer-accent:var(--live-blue); position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px;
 min-height:96px; padding:18px; text-align:start; border:1px solid color-mix(in srgb,var(--answer-accent) 68%,#fff 8%);
 border-inline-start:7px solid var(--answer-accent); background:linear-gradient(135deg,color-mix(in srgb,var(--answer-accent) 16%,#0a2847),#09233f);
}
.answer-button:nth-of-type(2),.choice:nth-child(2) { --answer-accent:var(--live-pink); }
.answer-button:nth-of-type(3),.choice:nth-child(3) { --answer-accent:var(--live-green); }
.answer-button:nth-of-type(4),.choice:nth-child(4) { --answer-accent:var(--live-orange); }
.answer-index { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--answer-accent); color:#fff; font-size:20px; font-weight:900; box-shadow:inset 0 -2px rgba(0,0,0,.16); }
.answer-copy { min-width:0; overflow-wrap:anywhere; font-size:clamp(17px,1.65vw,21px); font-weight:800; line-height:1.65; }
.answer-copy[dir="ltr"] { text-align:left; unicode-bidi:isolate; }
.answer-button.selected { border-color:var(--live-yellow); background:linear-gradient(135deg,#31442c,#102c48); box-shadow:0 0 0 3px var(--live-yellow); }
.answer-button.selected::after { content:"تم الاختيار"; position:absolute; inset:7px auto auto 9px; color:#fff7c8; margin:0; font-size:10px; font-weight:800; }
.answer-button.selected[data-feedback="ACCEPTED_LOCKED"]::after { content:"تم التسجيل ✓"; }
.answer-button[aria-disabled="true"]:not(.selected) { opacity:.56; }
.answer-feedback { display:flex; align-items:center; gap:9px; min-height:48px; padding:11px 14px; border:1px solid #2e678a; border-radius:13px; background:#08243f; color:#d8e9f7; }
.answer-feedback::before { content:""; width:11px; height:11px; flex:none; border:2px solid #6b9cba; border-top-color:var(--live-yellow); border-radius:50%; }
.answer-feedback[data-state="SELECTED_PENDING"]::before { animation:status-spin .8s linear infinite; }
.answer-feedback[data-state="ACCEPTED_LOCKED"]::before { content:"✓"; display:grid; place-items:center; width:20px; height:20px; border:0; background:var(--live-cyan); color:#04263b; font-size:13px; font-weight:900; }
.answer-progress { width:fit-content; padding:8px 12px; border-radius:999px; background:#071d36; border:1px solid #285876; color:#c7d9e8; }
.result-banner { border:0; border-radius:24px; padding:28px; background:linear-gradient(145deg,#0b5b55,#0d3c4a); }
.result-banner.wrong { background:linear-gradient(145deg,#5b243f,#2b2747); }
.result-banner.neutral { background:linear-gradient(145deg,#55431e,#26344b); }
.practice-result { width:fit-content; margin:12px auto 0; padding:8px 13px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#dceaf4; font-weight:800; }
.result-icon { border-radius:50%; }
.result-choices .choice.correct { --answer-accent:var(--live-green); border:2px solid #82e5b8; background:#123f37; }
.result-choices .choice.selected-wrong { --answer-accent:var(--live-pink); border:2px solid #ff88a5; background:#45233b; }
.choice-mark { grid-column:1/-1; }

#room[data-state="QUESTION_OPEN"] .players-card,#room[data-state="ESTIMATE_OPEN"] .players-card,#room[data-state="QUESTION_LOCKED"] .players-card,#room[data-state="POWER_SELECT"] .players-card { display:none; }
#room[data-state="QUESTION_OPEN"],#room[data-state="ESTIMATE_OPEN"],#room[data-state="QUESTION_LOCKED"],#room[data-state="POWER_SELECT"] { grid-template-rows:auto; }
#room[data-state="LOBBY"] { grid-template-columns:minmax(0,1.25fr) minmax(350px,.85fr); grid-template-areas:"players share" "players show"; }
#room[data-state="LOBBY"] .players { grid-template-columns:repeat(2,minmax(0,1fr)); }
#room[data-state="LOBBY"] .player { min-height:88px; background:linear-gradient(145deg,#103653,#092743); }
#room[data-state="LOBBY"] .player.host { border-color:#9c8130; }
#room[data-state="LOBBY"] .player.host .player-detail { color:var(--live-yellow); }
.lobby-share { padding:0; overflow:hidden; text-align:start; }
.lobby-pack-summary { display:flex; align-items:center; gap:14px; padding:20px; border-bottom:1px solid #2a5b7f; background:linear-gradient(135deg,#123f66,#0c2e50); }
.lobby-pack-art { display:grid; place-items:center; width:64px; height:64px; flex:none; border-radius:18px; background:linear-gradient(135deg,#1d86ed,#105485); color:var(--live-yellow); font:900 32px/1 'Tasleya Alexandria',sans-serif; }
.lobby-pack-summary small { color:#a9c3d9; }
.lobby-pack-summary h2 { margin:3px 0; font-size:18px; }
.lobby-pack-summary p { margin:0; }
.room-invite { padding:22px; text-align:center; }
#share-code { color:var(--live-yellow); font-size:clamp(38px,5vw,58px); letter-spacing:.14em; direction:ltr; unicode-bidi:isolate; }
.player-status { border-top-color:var(--live-yellow); }
.player .avatar { background:linear-gradient(145deg,#155c77,#173a61); border-color:#4982a2; color:#fff; }
.player.offline { opacity:.68; }
.player.offline .avatar { filter:grayscale(1); }
.podium-place { background:linear-gradient(160deg,#133653,#0c243e); }
.podium-place.first { background:linear-gradient(160deg,#715a22,#21354a); }

@keyframes status-spin { to { transform:rotate(360deg); } }
@media(max-width:950px) {
 .pack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #room { grid-template-columns:minmax(0,1fr) 250px; }
 #room[data-state="LOBBY"] { grid-template-columns:minmax(0,1fr) minmax(310px,.8fr); }
 #room[data-state="LOBBY"] .players { grid-template-columns:1fr; }
}
@media(max-width:720px) {
 body { background:linear-gradient(160deg,var(--live-bg-deep),var(--live-bg)); }
 body::before { display:none; }
 .app { padding-inline:14px; }
 .live-brand img { width:44px; height:44px; }
 .live-brand small { display:none; }
 .pack-grid { grid-template-columns:1fr; }
 .pack-art { min-height:128px; }
 .pack-copy p { min-height:0; }
 #room,#room[data-state="LOBBY"],#room[data-state="STANDINGS"],#room[data-state="PODIUM"],#room[data-state="ENDED"],#room[data-play-mode="solo"] { grid-template-columns:minmax(0,1fr); }
 #room[data-state="LOBBY"] { grid-template-areas:"share" "players" "show"; }
 #room[data-state="LOBBY"] .players { grid-template-columns:1fr; }
 .lobby-pack-summary { padding:16px; }
 .room-invite { padding:20px 16px; }
 .show-card { padding:18px 14px; }
 .question-title,.preview-title { font-size:clamp(23px,7.2vw,30px); line-height:1.55; }
 .controls,.choices { grid-template-columns:1fr; }
 .answer-button,.choice { min-height:74px; padding:13px; border-inline-start-width:6px; }
 .answer-index { width:38px; height:38px; border-radius:12px; font-size:18px; }
 .answer-copy { font-size:16px; }
 .result-banner { padding:21px 14px; }
 .result-banner h2 { font-size:31px; }
 #room[data-state="QUESTION_OPEN"] .player-status,#room[data-state="ESTIMATE_OPEN"] .player-status,#room[data-state="QUESTION_LOCKED"] .player-status { order:-1; }
}
@media(max-width:430px) {
 .topbar { margin-bottom:14px; }
 .pack-browser-heading { gap:12px; }
 .pack-browser-heading h1 { font-size:27px; }
 .pack-toolbar { grid-template-columns:1fr; }
 .pack-art-caption { inset-inline-start:94px; }
 .selected-pack-bar { grid-template-columns:minmax(0,1fr) auto; }
 .selected-pack-bar small { display:none; }
 .lobby-pack-art { width:54px; height:54px; }
 #share-code { font-size:36px; }
 .show-heading { align-items:flex-start; }
 .phase-timer { align-items:flex-start; }
 #timer-label { display:none; }
}
@media(max-height:620px) and (min-width:721px) {
 .topbar { padding:12px 0; margin-bottom:14px; }
 .show-card { padding:20px; }
 .question-title { font-size:26px; margin-block:8px 15px; }
 .answer-button { min-height:68px; padding:12px 16px; }
 .answer-index { width:34px; height:34px; }
}
@media(prefers-reduced-motion:reduce) {
 .answer-feedback[data-state="SELECTED_PENDING"]::before { animation:none; border-color:var(--live-yellow); }
 .pack-option:hover { transform:none; }
}

/* Education packs switch the shared engine to an English LTR presentation. */
body[data-language="en"] { direction:ltr; text-align:left; }
body[data-language="en"] :is(.question-title,.result-question,.study-explanation,.study-reference,.pack-copy,.confirmation-pack) { direction:ltr; text-align:left; }
body[data-language="en"] .controls,
body[data-language="en"] .choices { direction:ltr; }
body[data-language="en"] .answer-button,
body[data-language="en"] .power { text-align:left; }
body[data-language="en"] .answer-button.selected::after { content:"Selected"; inset:7px 9px auto auto; }
body[data-language="en"] .answer-button.selected[data-feedback="ACCEPTED_LOCKED"]::after { content:"Recorded ✓"; }
body[data-language="en"] .player-detail { text-align:right; }
body[data-language="en"] .room-reference b { margin-right:0; margin-left:8px; }
body[data-language="en"] .study-explanation { border-inline-start:5px solid var(--live-yellow); }