:root { color-scheme: dark; --bg:#111315; --panel:#1a1e22; --line:#59616a; --text:#f3efe0; --muted:#aab3bb; --blue:#70b7ff; --yellow:#ffd166; --green:#78dc9a; }
.session-toolbar { display:flex; align-items:stretch; position:sticky; top:0; z-index:5; background:#111820; }
.session-toolbar .session-tabs { flex:1; }
#exit-training { flex:none; align-self:center; margin:4px 8px; padding:8px; font:inherit; white-space:nowrap; }
#exit-training-dialog { color:var(--text); background:var(--panel); border:1px solid var(--yellow); border-radius:12px; width:min(480px,calc(100vw - 40px)); box-sizing:border-box; padding:24px; font:inherit; }
#exit-training-dialog::backdrop { background:#000b; }
.exit-training-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.exit-training-actions button { padding:10px 16px; font:inherit; }
@media(max-width:480px) { #exit-training { font-size:11px; margin:4px; padding:8px 5px; } }
.custom-tab-focus[hidden],.custom-tab-page[hidden],.activity-head[hidden],#pressure-focus[hidden] { display:none; }
#pressure-focus { position:relative; width:min(100%,calc((100dvh - var(--session-tabs-height,45px) - 24px) * 16 / 9)); margin:auto; }
#pressure-focus .custom-slide { width:100%; margin:0; }
#pressure-focus .pressure-clock { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:65%; cursor:grab; touch-action:none; user-select:none; z-index:1; }
#pressure-focus .pressure-clock.dragging { cursor:grabbing; }
#pressure-focus .pressure-clock:hover,#pressure-focus .pressure-clock:focus-visible { outline:1px dashed #ffcf55; outline-offset:2px; }
#pressure-focus .custom-tab-page { min-height:0; }
#pressure-focus>p { text-align:center; }
body.pressure-active #prompt,body.pressure-active #activity,body.pressure-active #status { display:none; }
body.pressure-active .activity-focus { padding:0; min-width:0; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:radial-gradient(circle at 50% -20%,#283341 0,#111315 48%); color:var(--text); font:16px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
body { display:grid; place-items:start center; padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); }
main { width:min(1080px,100%); }
.brand { display:flex; align-items:center; justify-content:space-between; margin:0 0 18px; color:var(--muted); font-size:12px; letter-spacing:.14em; }
.brand a { color:#aaff00; font-size:19px; font-weight:800; text-decoration:none; text-shadow:0 0 12px rgba(170,255,0,.3); }
.panel { padding:clamp(20px,5vw,36px); border:2px solid var(--yellow); background:rgba(18,22,27,.96); box-shadow:0 24px 80px rgba(0,0,0,.55); }
.panel h1 { margin:0 0 12px; color:#fff; font-size:clamp(24px,6vw,40px); line-height:1.15; }
.panel p { color:var(--muted); }
#join-form { display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px; }
input,button,select { min-height:48px; border:1px solid var(--line); border-radius:5px; color:#fff; background:#101419; font:inherit; }
input,select { width:100%; padding:10px 12px; }
#code { text-align:center; font-size:clamp(24px,8vw,42px); font-weight:800; letter-spacing:.18em; }
button { padding:9px 16px; cursor:pointer; }
button:hover,button:focus-visible { border-color:var(--blue); background:#243a4e; outline:none; }
button:disabled { cursor:default; opacity:.55; }
.activity-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.session-tabs { display:flex; min-width:0; align-items:end; gap:3px; padding:4px 5px 0; overflow-x:auto; border-bottom:1px solid #59616a; }
.session-tab-shell { display:flex; flex:0 0 auto; align-items:stretch; height:32px; }
.session-tab { flex:0 0 auto; min-width:105px; min-height:31px; padding:4px 12px; border-bottom:0; border-radius:4px 4px 0 0; color:var(--muted); background:#20262c; white-space:nowrap; }
.session-tab-shell .session-tab { min-width:88px; border-right:0; border-radius:4px 0 0 0; }
.session-tab-close { width:26px; min-height:31px; padding:0; border-left:0; border-bottom:0; border-radius:0 4px 0 0; color:var(--muted); background:#20262c; font-size:17px; line-height:1; }
.session-tab[aria-selected="true"],.session-tab-shell:has(.session-tab[aria-selected="true"]) .session-tab-close { position:relative; top:1px; border-color:#78838e; color:#fff; background:#101419; }
.session-tab.private { color:#d9a8ff; }
.session-tab.unread::after { display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:#ff8f87; content:""; }
.session-layout { display:grid; min-height:500px; grid-template-columns:minmax(0,1fr) clamp(180px,22vw,260px); align-items:stretch; gap:0; background:#101419; }
.activity-focus { min-width:0; padding:20px; border-right:1px solid #59616a; background:rgba(18,22,27,.96); }
.chat-focus { display:grid; min-width:0; min-height:500px; grid-template-rows:minmax(0,1fr) auto; border-right:1px solid #59616a; background:#101419; }
.activity-focus[hidden],.chat-focus[hidden] { display:none; }
.session-hud { display:grid; min-width:0; min-height:0; }
.session-hud[hidden] { display:none; }
.session-layout.presentation-only { grid-template-columns:minmax(0,1fr); grid-template-rows:1fr; }
.session-hud > section { border:1px solid #414951; background:#101419; }
.participant-toggle { display:flex; width:100%; min-height:35px; align-items:center; justify-content:space-between; padding:8px 10px; border:0; border-bottom:1px solid #414951; border-radius:0; color:#9bcfff; background:#101419; font-size:11px; letter-spacing:.14em; text-align:left; cursor:default; }
.participant-toggle strong { display:grid; min-width:23px; height:19px; place-items:center; padding:0 5px; border:1px solid #46525d; border-radius:9px; color:var(--green); font-size:10px; letter-spacing:0; }
.hud-roster { display:grid; min-height:0; grid-template-rows:auto minmax(0,1fr); }
.participant-list { min-height:0; margin:0; padding:7px; overflow-y:auto; list-style:none; scrollbar-color:#59616a #101419; }
.participant-list li { padding:6px 8px; overflow:hidden; color:#fff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; cursor:default; }
.participant-list li:hover { color:#9bcfff; background:#20262c; }
.participant-list li.self { color:var(--green); }
.participant-list li::before { margin-right:7px; color:#59616a; content:"•"; }
.participant-list li.self::before { color:var(--green); }
.participant-list .empty { color:var(--muted); font-size:12px; white-space:normal; }
.chat-transcript { min-height:0; overflow-x:hidden; overflow-y:auto; padding:10px 12px 18px; background:#101419; scrollbar-color:#59616a #101419; }
.chat-message { display:grid; width:100%; min-width:0; grid-template-columns:70px minmax(0,1fr); gap:7px; padding:2px 3px; border-radius:2px; overflow-wrap:anywhere; }
.chat-message:hover { background:#20262c; }
.chat-message time { color:#7d8791; font-size:11px; user-select:none; }
.chat-message .message-content { min-width:0; color:#fff; font-size:12px; white-space:pre-wrap; }
.chat-message strong { color:#9bcfff; }
.chat-message.own strong { color:var(--green); }
.chat-message.private strong { color:#d9a8ff; }
.chat-empty { margin:auto; color:var(--muted); font-size:12px; text-align:center; }
.chat-form { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; padding:8px 10px; border-top:1px solid #414951; }
.chat-form > span { color:var(--green); font-weight:800; }
.chat-form input,.chat-form button { min-height:38px; }
.chat-form input { padding:6px 8px; font-size:12px; }
.chat-form button { padding:5px 8px; font-size:11px; }
.phase,.room-code { padding:4px 8px; border:1px solid var(--blue); color:#9bcfff; font-size:11px; letter-spacing:.12em; }
.room-code { border-color:var(--line); color:var(--muted); }
.activity-countdown { width:17ch; min-width:17ch; flex:0 0 17ch; margin:0; overflow:visible; color:var(--yellow); font:7px/7px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:0; white-space:pre; text-align:center; }
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-top:24px; }
.choices button { min-height:76px; font-size:20px; font-weight:800; }
.choices button.selected { border-color:var(--green); background:#21402c; box-shadow:0 0 0 1px rgba(120,220,154,.3); }
.storm-form { display:flex; gap:9px; margin-top:22px; }
.storm-form input { flex:1; min-width:0; }
.sort-zones { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:22px; }
.sort-zone { min-height:150px; padding:9px; border:1px dashed var(--blue); background:#13191f; transition:border-color .12s,background .12s; }
.sort-zone h3 { margin:0 0 9px; color:#9bcfff; font-size:13px; }
.sort-zone.drag-over { border-color:var(--yellow); background:#24251d; }
.sort-item { display:block; width:100%; min-height:44px; margin:0 0 7px; padding:8px; text-align:left; color:#fff; background:#292f35; border:1px solid #59616a; touch-action:manipulation; }
.sort-item:hover,.sort-item:focus-visible { border-color:var(--yellow); background:#353b41; }
.sort-item.dragging { border-color:var(--yellow); box-shadow:0 5px 18px rgba(0,0,0,.45); }
.submit-sort { width:100%; margin-top:16px; border-color:var(--blue); background:#244766; }
.results { display:grid; gap:8px; margin-top:18px; }
.result { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:10px; border:1px solid #414951; background:#15191e; }
.result strong { color:var(--yellow); }
.result em { grid-column:1 / -1; color:#9bcfff; font-size:12px; font-style:normal; }
.result.named-sort { grid-template-columns:auto minmax(0,1fr); }
.result.named-sort strong { color:#9bcfff; }
.idea { padding:11px; border:1px solid #414951; background:#20262c; overflow-wrap:anywhere; }
.idea strong { display:block; margin-bottom:4px; color:#9bcfff; }
.response-fields,.quiz-fields { display:grid; gap:12px; margin-top:22px; }
.response-fields label,.quiz-question { display:grid; gap:7px; color:var(--muted); }
.response-fields textarea { min-height:90px; resize:vertical; padding:10px 12px; border:1px solid var(--line); border-radius:5px; color:#fff; background:#101419; font:inherit; }
.expertise-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.expertise-tags button { width:auto; min-height:34px; padding:5px 12px; border-color:var(--cyan); color:var(--cyan); background:#10242a; }
.quiz-options,.match-grid { display:grid; gap:6px; }
.quiz-options label,.match-grid label { display:flex; align-items:center; gap:8px; color:var(--text); }
.quiz-options input,.match-grid input { width:auto; min-height:0; }
.question-list { display:grid; gap:8px; margin-top:14px; }
.question-list button { display:grid; grid-template-columns:1fr auto; gap:10px; text-align:left; }
.draw-brushes { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:16px auto 8px; }
.draw-brushes button { width:30px; min-height:30px; padding:0; font-size:20px; line-height:1; }
.draw-brushes button.selected { border-color:#ffd166; color:#ffd166; }
.draw-grid { --draw-cell:min(18px,calc((100vw - 64px)/20)); display:grid; grid-template-columns:repeat(20,var(--draw-cell)); grid-template-rows:repeat(20,var(--draw-cell)); width:max-content; max-width:100%; margin:12px auto 20px; border:1px solid var(--line); touch-action:none; }
.draw-grid button { width:var(--draw-cell); min-height:var(--draw-cell); padding:0; overflow:hidden; border:0; border-right:1px solid #343b42; border-bottom:1px solid #343b42; border-radius:0; color:#f3efe0; background:#20262c; font:var(--draw-cell)/var(--draw-cell) Menlo,Monaco,monospace; }
.introduction-builder { display:grid; justify-items:center; gap:14px; }
.avatar-canvas { --avatar-cell:min(17px,calc((100vw - 72px)/24)); --avatar-row:calc(var(--avatar-cell) * 1.6667); position:relative; width:calc(var(--avatar-cell) * 24); height:calc(var(--avatar-row) * 18); overflow:hidden; border:1px solid var(--line); background:#101419; }
.avatar-layer-stack { position:absolute; z-index:1; pointer-events:none; }
.avatar-layer { position:absolute; inset:0 auto auto 0; margin:0; color:#fff; background:transparent; font-family:Menlo,Monaco,monospace; font-size:calc(var(--avatar-cell) * 1.6667); font-weight:400; line-height:var(--avatar-row); letter-spacing:0; white-space:pre; pointer-events:none; }
.avatar-layer-shade { z-index:0; color:#000; opacity:.34; }
.avatar-layer-blended { z-index:1; opacity:.82; }
.avatar-categories { display:flex; max-width:100%; flex-wrap:wrap; justify-content:center; gap:5px; }
.avatar-categories button { width:auto; min-height:34px; padding:5px 9px; font-size:12px; }
.avatar-categories button.selected,.avatar-options button.selected { border-color:var(--yellow); background:#39351f; }
.avatar-options { display:grid; width:100%; grid-template-columns:repeat(auto-fit,minmax(106px,1fr)); gap:6px; }
.avatar-options > button { display:grid; min-height:128px; place-items:center; padding:3px; overflow:hidden; }
.avatar-option-preview { position:relative; width:96px; height:120px; overflow:hidden; }
.avatar-option-preview-stage { --avatar-cell:12px; --avatar-row:calc(var(--avatar-cell) * 1.6667); position:relative; width:288px; height:360px; transform:scale(.333333); transform-origin:top left; }
.avatar-option-preview-stage .avatar-layer { font-size:calc(var(--avatar-cell) * 1.6667); line-height:var(--avatar-row); }
.avatar-colors { display:grid; grid-template-columns:repeat(8,32px); gap:6px; justify-content:center; }
.avatar-colors button { width:32px; min-height:32px; padding:4px; background:var(--swatch); box-shadow:inset 0 0 0 3px #101419; }
.avatar-colors button.selected { border-color:var(--yellow); box-shadow:inset 0 0 0 3px #101419,0 0 0 2px var(--yellow); }
.submit-introduction { width:100%; border-color:var(--blue); background:#244766; }
.avatar-result { --avatar-cell:9px; }
.columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.column,.group { min-height:100px; padding:10px; border:1px solid #414951; background:#15191e; }
.column h3,.group h3 { margin:0 0 8px; color:#9bcfff; }
.card-draw { display:grid; justify-items:center; gap:14px; padding:18px 0; text-align:center; }
.playing-card { display:grid; width:96px; height:136px; align-content:space-between; margin:0 auto 12px; padding:9px; color:#111; background:#f7f2e7; border:3px solid #fff; border-radius:8px; box-shadow:3px 3px 0 #59616a; }
.playing-card strong { color:#111; font-size:29px; line-height:1; }
.playing-card span { color:#111; white-space:pre-line; text-align:center; font-size:25px; line-height:1.15; }
.playing-card.red span { color:#b51a00; }
.participant-card { width:130px; height:182px; padding:12px; }
.participant-card strong { font-size:38px; }
.participant-card span { font-size:58px; }
.group-members { color:#fff; text-align:center; overflow-wrap:anywhere; }
.card-group-members { display:grid; gap:4px; text-align:center; }
.card-group-members strong { color:var(--yellow); font-size:20px; }
.card-group-members span { color:#fff; overflow-wrap:anywhere; }
.impostor-waiting .impostor-privacy-warning { max-width:560px; margin:22px auto 0; color:#ff4545; font-size:1.1em; font-weight:700; line-height:1.5; }
.impostor-privacy-warning strong { color:#ff3030; font-size:1.1em; font-weight:900; }
.impostor-reveal { position:relative; display:grid; min-height:360px; place-items:center; align-content:center; gap:10px; margin-top:18px; padding:34px 20px; overflow:hidden; border:2px solid #647184; background:radial-gradient(circle at 50% 36%,#263446 0,#111820 58%,#080b0f 100%); box-shadow:inset 0 0 70px rgba(0,0,0,.75); text-align:center; }
.impostor-reveal::before { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.025) 6px); content:""; pointer-events:none; }
.impostor-reveal.is-impostor { border-color:#ff554f; background:radial-gradient(circle at 50% 36%,#721d25 0,#25090d 58%,#090305 100%); box-shadow:inset 0 0 80px rgba(0,0,0,.8),0 0 30px rgba(255,55,55,.18); }
.impostor-emblem { display:grid; width:92px; height:92px; place-items:center; border:4px solid #9bcfff; border-radius:48% 48% 40% 40%; color:#9bcfff; font-size:56px; font-weight:900; line-height:1; transform:rotate(-2deg); }
.is-impostor .impostor-emblem { border-color:#ff716b; color:#ff716b; text-shadow:0 0 18px rgba(255,80,75,.7); }
.impostor-reveal > span { color:var(--muted); font-size:12px; letter-spacing:.24em; }
.impostor-reveal > strong { position:relative; color:#b7dcff; font-size:clamp(44px,12vw,76px); line-height:1; letter-spacing:.08em; text-shadow:0 4px 0 #183047; }
.impostor-reveal.is-impostor > strong { color:#ff716b; text-shadow:0 4px 0 #5b0b10,0 0 24px rgba(255,70,65,.45); }
.impostor-reveal p { position:relative; max-width:430px; margin:8px 0 0; color:#d7dce2; }
.pair-chat { display:grid; gap:12px; margin-top:16px; border:1px solid #414951; background:#101419; }
.pair-heading { display:grid; gap:3px; padding:12px 14px; border-bottom:1px solid #414951; background:#171c21; }
.pair-heading span { color:var(--muted); font-size:11px; letter-spacing:.14em; }
.pair-heading strong { color:#9bcfff; font-size:18px; }
.pair-transcript { display:flex; min-height:170px; max-height:300px; flex-direction:column; gap:7px; overflow:auto; padding:4px 14px 12px; }
.pair-message { display:grid; align-self:start; max-width:88%; gap:2px; padding:7px 9px; border-left:2px solid var(--blue); background:#20262c; overflow-wrap:anywhere; }
.pair-message.own { align-self:end; border-right:2px solid var(--green); border-left:0; background:#1c3025; }
.pair-message strong { color:#9bcfff; font-size:11px; }
.pair-message.own strong { color:var(--green); }
.pair-message span { color:#fff; }
.pair-empty { margin:auto; color:var(--muted); text-align:center; }
.pair-composer { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px; border-top:1px solid #414951; background:#15191e; }
.pair-composer > span { color:var(--green); font-weight:800; }
.pair-composer input { min-height:42px; }
.pair-composer button { min-height:42px; }
.pair-ended { padding:10px 14px; border-top:1px solid #414951; color:var(--muted); text-align:center; }
.marquee { overflow:hidden; }.marquee-track { display:flex; width:max-content; gap:20px; animation:portraits 24s linear infinite; }
@keyframes portraits { from { transform:translateX(min(0px,100vw)); } to { transform:translateX(calc(-100% + min(640px,90vw))); } }
.portrait { display:grid; gap:7px; justify-items:center; color:#9bcfff; }.portrait-grid { display:grid; grid-template-columns:repeat(20,7px); }.portrait-grid i { display:grid; width:7px; height:7px; place-items:center; overflow:hidden; color:#f3efe0; background:#20262c; font:8px/7px Menlo,Monaco,monospace; font-style:normal; }
.status { min-height:1.5em; margin:18px 0 0; color:var(--green) !important; }
.waiting { padding:26px 0; color:var(--muted); text-align:center; }
.presentation-focus { min-width:0; padding:16px; background:#0e1114; align-self:start; }
.presentation-focus #presentation-slide { display:block; width:100%; aspect-ratio:16/9; border:0; pointer-events:none; background:#000; }
.presentation-focus [hidden],.presentation-focus #presentation-slide[hidden] { display:none; }
.presentation-focus p { color:var(--muted); text-align:center; }
.dot-voting-toolbar { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:12px 0; margin-bottom:10px; background:#15191e; border-bottom:1px solid #59616a; }
.dot-voting-toolbar input { min-width:0; width:100%; font-size:16px; }
.dot-voting-toolbar strong { color:var(--green); }
.dot-voting-summary { grid-column:1/-1; color:var(--muted); font-size:12px; }
.dot-voting-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); align-items:stretch; gap:10px; }
.dot-voting-card { min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:12px; border:1px solid #59616a; border-radius:6px; background:#191e24; }
.dot-voting-card.has-votes { border-color:#ffd166; background:#29291f; }
.dot-voting-card[hidden] { display:none; }
.dot-voting-card p { margin:0 0 12px; color:#edf1f3; overflow-wrap:anywhere; font-size:14px; line-height:1.4; }
.dot-voting-controls { display:grid; grid-template-columns:1fr 44px 30px 44px; align-items:center; gap:4px; }
.dot-voting-controls button { min-width:44px; min-height:44px; padding:0; font-size:22px; }
.dot-voting-controls strong { text-align:center; color:#ffd166; }
.dot-voting-number { color:var(--muted); font-size:12px; }
.dot-voting-empty { padding:20px 0; color:var(--muted); }
.error { color:#ff8f87 !important; }
/* Workshop chrome: keep the slide clean while giving activities their own stage. */
body:has(#activity-panel:not([hidden])) main { width:100%; max-width:1600px; }
#join-panel { width:min(520px,100%); margin:6vh auto; border:1px solid #596f7e; border-top:3px solid #8de5bb; border-radius:16px; background:linear-gradient(145deg,#213039,#111c26 65%); }
#join-panel h1 { letter-spacing:-.04em; }
#join-panel p { line-height:1.7; }
#join-form input { background:#101923; border-color:#617685; border-radius:9px; }
#join-form button { color:#10212a; background:#8de5bb; border-color:#8de5bb; font-weight:800; border-radius:9px; }
.session-tabs { padding:8px 8px 0; gap:6px; background:#111c26; border-color:#435767; }
.session-tab[aria-selected="true"] { color:#a8f0ce; border-color:#6b9c89; background:#172c2b; }
.session-tab:focus-visible { outline:2px solid #a8f0ce; outline-offset:-3px; }
.activity-focus { background:linear-gradient(160deg,#16232e,#101923 60%); }
.activity-focus h1 { letter-spacing:-.035em; line-height:1.22; margin-bottom:20px; }
.activity-head .phase { border-radius:20px; padding:6px 10px; background:#1b3041; }
.activity-head .room-code { border-radius:5px; }
.chat-empty { max-width:340px; padding:32px; line-height:1.8; }
.chat-empty::before { content:'[ >_ ]'; display:block; margin-bottom:16px; color:#8de5bb; font-size:25px; }
#status:not(:empty) { padding:12px 16px; border-left:3px solid #8de5bb; background:#1d3035; color:#d9f0e6; border-radius:4px 8px 8px 4px; font-size:13px; line-height:1.6; }
@media(min-width:521px) { .panel.activity-shell { padding:20px; border:1px solid #596f7e; border-top:3px solid #8de5bb; border-radius:14px; } }
@media (max-width:780px) {
  body { padding:12px; }
  .panel { padding:20px; }
  .session-layout { min-height:0; grid-template-columns:1fr; grid-template-rows:minmax(420px,1fr) auto; }
  .activity-focus,.chat-focus { border-right:0; border-bottom:1px solid #59616a; }
  .chat-focus { height:min(64dvh,620px); min-height:420px; }
  .session-hud { min-height:35px; }
  .participant-toggle { min-height:44px; cursor:pointer; }
  .participant-toggle:hover,.participant-toggle:focus-visible { border-color:#414951; background:#20262c; }
  .session-hud:not(.expanded) .participant-list { display:none; }
  .session-hud.expanded .participant-toggle::before { content:"▾"; }
  .session-hud:not(.expanded) .participant-toggle::before { content:"▸"; }
  .participant-toggle span { margin-right:auto; padding-left:7px; }
  .participant-list { max-height:30dvh; padding:6px 8px 10px; }
  .participant-list li { min-height:42px; padding:11px 8px; }
}
@media (max-width:520px) {
  body { display:block; padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom)); }
  main { width:100%; }
  .brand { padding:0 10px; }
  .panel.activity-shell { padding:0; border-right:0; border-left:0; box-shadow:none; }
  .activity-head { min-height:48px; margin:0; padding:8px 10px; }
  .activity-countdown { transform:scale(.82); }
  .phase,.room-code { padding:3px 6px; font-size:10px; }
  .session-tabs { padding:5px 7px 0; scroll-snap-type:x proximity; }
  .session-tab-shell { height:41px; scroll-snap-align:start; }
  .session-tab { min-width:92px; min-height:40px; scroll-snap-align:start; }
  .session-tab-shell .session-tab { min-width:76px; }
  .session-tab-close { width:34px; min-height:40px; }
  .activity-focus { padding:18px 14px; overflow-x:hidden; }
  .activity-focus h1 { font-size:clamp(23px,8vw,34px); }
  .chat-focus { height:calc(100dvh - 208px); min-height:390px; }
  .chat-transcript { padding:9px 8px 16px; }
  .chat-message { grid-template-columns:58px minmax(0,1fr); gap:5px; }
  .chat-message time { font-size:10px; }
  .chat-message .message-content { font-size:12px; }
  .chat-form { position:sticky; bottom:0; grid-template-columns:auto minmax(0,1fr) auto; gap:5px; padding:7px; background:#15191e; }
  .chat-form input { min-width:0; padding:6px; font-size:16px; }
  .chat-form button { padding:5px 9px; }
  #join-panel { margin:0 8px; }
  #join-form { grid-template-columns:1fr; }
  .storm-form { display:grid; }
  .sort-zones { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sort-zone { min-height:120px; }
  .choices { grid-template-columns:1fr; }
}

/* Joined rooms put content first: no branding card or outer frame. */
body.room-joined { display:block; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.room-joined main { width:100%; max-width:none; }
body.room-joined .panel.activity-shell { padding:0; border:0; border-radius:0; box-shadow:none; min-height:100dvh; background:#101419; }
body.room-joined .session-tabs { position:sticky; top:0; z-index:5; background:#111820; min-height:44px; padding:4px 8px 0; }
body.room-joined .session-tab { min-height:40px; }
body.room-joined .session-layout { min-height:calc(100dvh - var(--session-tabs-height,45px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
body.room-joined .chat-focus { height:calc(100dvh - var(--session-tabs-height,45px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
body.room-joined .presentation-focus { padding:12px; display:flex; flex-direction:column; align-items:center; }
body.room-joined .presentation-focus[hidden] { display:none; }
/* Fit both axes, leaving breathing room below the slide even on wide screens. */
body.room-joined .presentation-focus #presentation-slide,
body.room-joined .presentation-focus canvas[aria-label="Presentation standby static"] {
  width:min(100%,calc((100dvh - var(--session-tabs-height,45px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px) * 16 / 9)) !important;
  flex:none;
}
body.room-joined .activity-head { padding:8px 16px; margin:0; }
.custom-tab-focus { min-width:0; background:#080c11; }
.custom-tab-page { display:flow-root; min-height:calc(100dvh - var(--session-tabs-height,45px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.custom-tab-page>iframe { display:block; width:100%; height:calc(100dvh - var(--session-tabs-height,45px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border:0; background:#fff; }
.custom-tab-page>p { padding:20px; }
.custom-slide { width:min(calc(100% - 24px),calc((100dvh - var(--session-tabs-height,45px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 80px) * 16 / 9)); min-width:0; margin:12px auto; }
@media(max-width:780px) { body.room-joined .chat-focus { height:calc(100dvh - 90px); } }