:root {
  color-scheme: dark;
  --ink: #f7f5ff;
  --muted: #aaa4c3;
  --panel: rgba(31, 25, 52, .82);
  --panel-strong: #211a37;
  --line: rgba(255,255,255,.11);
  --violet: #8d5bff;
  --violet-2: #6d3be2;
  --cyan: #2dd7d0;
  --pink: #ff5da8;
  --green: #54d27a;
  --shadow: 0 24px 70px rgba(7, 4, 18, .42);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #120e20; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: radial-gradient(circle at 50% -15%, #31204f 0, #171126 44%, #100c1c 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; z-index: 0; width: 360px; height: 360px; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; }
.ambient-one { background: var(--violet); left: -170px; top: 28%; }
.ambient-two { background: var(--cyan); right: -200px; bottom: -80px; }

.topbar { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; width: min(1180px, calc(100% - 40px)); margin: 0 auto; min-height: 88px; border-bottom: 1px solid var(--line); }
.brand-zone { display: flex; align-items: center; gap: 14px; }
.brand { border: 0; background: none; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 900 23px/1 ui-rounded, system-ui, sans-serif; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 38px; height: 38px; padding: 8px; transform: rotate(-4deg); border-radius: 11px; background: linear-gradient(145deg, var(--violet), #6330d0); box-shadow: 0 8px 24px rgba(117, 65, 232, .35); }
.brand-mark i { display: block; flex: 1; border-radius: 2px; background: #fff; }
.brand-mark i:nth-child(1) { height: 45%; } .brand-mark i:nth-child(2) { height: 80%; } .brand-mark i:nth-child(3) { height: 62%; }
.brand-divider { width: 1px; height: 34px; background: var(--line); }
.school-mark { display: grid; place-items: center; width: 82px; height: 54px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #fff; box-shadow: 0 7px 22px rgba(4,2,12,.18); }
.school-mark img { display: block; width: 72px; height: 50px; object-fit: contain; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.privacy-pill { display: inline-flex; align-items: center; gap: 8px; color: #c4bed8; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(84,210,122,.12); }

main { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.view { display: none; min-height: calc(100vh - 88px); padding: 56px 0 68px; animation: reveal .35s ease both; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
.hero-copy { max-width: 760px; margin: 16px auto 42px; text-align: center; }
.eyebrow { display: inline-block; color: #a58be9; font-size: 12px; letter-spacing: .16em; font-weight: 800; }
h1, h2, strong { font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
h1 { margin: 18px 0 18px; font-size: clamp(42px, 6vw, 68px); line-height: .98; letter-spacing: -.045em; }
h1 em { color: var(--cyan); font-style: normal; }
.hero-copy p { max-width: 650px; margin: auto; color: var(--muted); font-size: 18px; line-height: 1.6; }

.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: auto; }
.mode-card { position: relative; min-height: 310px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; text-align: left; cursor: pointer; background: var(--panel); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.mode-card::after { content: ""; position: absolute; width: 240px; height: 240px; right: -70px; top: -75px; border-radius: 50%; opacity: .15; }
.group-card::after { background: var(--violet); } .solo-card::after { background: var(--cyan); }
.mode-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.26); }
.mode-icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 28px; border-radius: 18px; font-size: 28px; background: rgba(255,255,255,.08); }
.mode-kicker { display: block; margin-bottom: 7px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.group-card .mode-kicker { color: #b89cff; }
.mode-card strong { display: block; font-size: 27px; }
.mode-card small { display: block; max-width: 310px; min-height: 47px; margin: 8px 0 24px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.card-link { font-size: 14px; font-weight: 700; } .card-link b { margin-left: 8px; color: var(--cyan); }
.feature-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 36px; margin-top: 35px; color: #8e87a4; font-size: 13px; }
.feature-row span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(45,215,208,.1); }

.button { min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 700; }
.button.compact { min-height: 38px; }
.button.primary { background: linear-gradient(135deg, var(--violet), var(--violet-2)); box-shadow: 0 9px 24px rgba(111,60,220,.24); }
.button.secondary { background: rgba(45,215,208,.12); color: #6de6e0; border-color: rgba(45,215,208,.22); }
.button.ghost { background: rgba(255,255,255,.045); border-color: var(--line); }
.button.danger-text { color: #ff8ca8; background: transparent; }
.back { margin-bottom: 34px; padding: 8px 0; border: 0; background: none; color: #afa8c1; cursor: pointer; }

.split-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: stretch; }
.panel, .choice-stack { border: 1px solid var(--line); border-radius: 26px; background: var(--panel); box-shadow: var(--shadow); }
.intro-panel { min-height: 500px; padding: 45px; overflow: hidden; }
.intro-panel h2, .editor-head h2 { margin: 12px 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; }
.intro-panel p { max-width: 500px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.live-illustration { position: relative; height: 235px; margin: 34px auto 0; max-width: 410px; }
.screen { position: absolute; left: 0; top: 10px; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; width: 315px; height: 190px; padding: 52px 20px 20px; border: 7px solid #3a3155; border-radius: 18px; background: #171126; box-shadow: 0 24px 55px rgba(0,0,0,.35); }
.screen::after { content:""; position: absolute; left: 135px; bottom: -32px; width: 50px; height: 32px; background: #3a3155; clip-path: polygon(34% 0,66% 0,80% 100%,20% 100%); }
.screen span { position:absolute; inset:16px 0 auto; text-align:center; font:900 26px ui-rounded, system-ui, sans-serif; }
.screen i { border-radius:6px; } .screen i:nth-of-type(1){background:#e84061}.screen i:nth-of-type(2){background:#2476cf}.screen i:nth-of-type(3){background:#d99c00}.screen i:nth-of-type(4){background:#1e9b36}
.phone { position:absolute; right:10px; bottom:8px; display:grid; place-items:center; width:90px; height:160px; border:6px solid #51466f; border-radius:19px; background:#211a37; transform:rotate(5deg); box-shadow:var(--shadow); }
.phone b { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(84,210,122,.2); color:var(--green); font-size:25px; }
.choice-stack { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.action-card { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 17px; width: 100%; padding: 19px; border: 1px solid var(--line); border-radius: 17px; text-align: left; cursor: pointer; background: rgba(255,255,255,.035); }
.action-card:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.065); }
.action-card span:nth-child(2) strong, .action-card small { display:block; }.action-card strong{font-size:17px}.action-card small{margin-top:4px;color:var(--muted);font-size:13px}
.action-icon { display:grid;place-items:center;width:50px;height:50px;border-radius:14px;font-weight:900;font-size:20px}.action-icon.violet{background:rgba(141,91,255,.17);color:#bc9cff}.action-icon.cyan{background:rgba(45,215,208,.14);color:var(--cyan)}
.join-form { margin-top: 3px; padding: 20px; border-radius: 17px; background: rgba(0,0,0,.17); }
.join-form label { display:block;margin:12px 0 8px;font-weight:700}.join-form label:first-child{margin-top:0}.join-form small{display:block;margin-top:10px;color:var(--muted)}
.name-input{width:100%;min-height:46px;padding:0 15px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#151023}
.code-inputs { display:flex; gap:10px }.code-inputs input { min-width: 0; flex:1; padding:0 15px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#151023; font-size:18px; letter-spacing:.12em; }

#view-group .split-layout[hidden],.live-room[hidden]{display:none}.live-room{max-width:980px;margin:0 auto}.room-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;padding:20px 24px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.room-head h2{margin:5px 0 0;font-size:clamp(26px,4vw,42px)}.room-head h2 strong{color:var(--cyan);letter-spacing:.08em}.host-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.room-panel,.join-guide,.waiting-card,.final-board{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow)}.room-panel h3,.photo-gallery h3{margin:0 0 18px;font:800 20px ui-rounded,system-ui,sans-serif}.button.wide{width:100%;margin-top:20px}.button:disabled{cursor:not-allowed;opacity:.45}.join-guide{display:grid;grid-template-columns:42px 1fr;align-content:center;gap:18px 14px}.join-guide>span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(141,91,255,.18);color:#c9b6ff;font-weight:900}.join-guide p{align-self:center;margin:0;color:var(--muted);line-height:1.45}.join-guide b{color:var(--ink)}.empty-list{padding:28px 10px;text-align:center;color:var(--muted)}.player-list{display:flex;flex-direction:column;gap:8px}.player-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035)}.player-row .rank{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(141,91,255,.15);color:#c6b3fa;font-size:12px;font-weight:800}.player-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-row>b{color:var(--cyan);font-size:13px}.answer-status{color:var(--muted);font-size:12px}.answer-status.done{color:var(--green)}
.group-question-card{display:grid;grid-template-columns:43% 57%;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow)}.group-question-visual{display:grid;place-items:center;min-height:265px;background:#15162d}.group-question-visual svg{display:block;width:100%;height:auto;max-height:285px}.group-question-visual svg text{fill:#d9d3ec;font:700 18px system-ui,sans-serif;letter-spacing:.08em}.group-question-copy{display:flex;flex-direction:column;justify-content:center;padding:38px}.group-question-copy h2{margin:12px 0 0;font-size:clamp(27px,4vw,42px);line-height:1.08}.group-answers button:disabled{cursor:default}.host-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}.host-controls>span{color:var(--muted);font-weight:700}.waiting-card,.final-board{text-align:center}.waiting-card{max-width:620px;margin:40px auto;padding:48px 28px}.waiting-card h3{margin:20px 0 7px;font:800 30px ui-rounded,system-ui,sans-serif}.waiting-card p,.waiting-card small{display:block;color:var(--muted)}.waiting-pulse{display:block;width:66px;height:66px;margin:auto;border:10px solid rgba(45,215,208,.18);border-top-color:var(--cyan);border-radius:50%;animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.photo-upload-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:24px 0 12px;padding:0 20px;border:1px solid rgba(45,215,208,.28);border-radius:12px;background:rgba(45,215,208,.12);color:#7af0ea;cursor:pointer;font-weight:800}.photo-upload-button.uploaded{border-color:rgba(84,210,122,.28);background:rgba(84,210,122,.12);color:#a9f3bc}.photo-upload-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.waiting-answer{margin-top:15px;padding:17px;border:1px solid rgba(141,91,255,.25);border-radius:14px;text-align:center;background:rgba(141,91,255,.12);color:#d4c5fa;font-weight:800}.waiting-answer.reveal{border-color:rgba(84,210,122,.25);background:rgba(84,210,122,.12);color:#bafac9}.final-board{max-width:650px;margin:30px auto}.final-board h2{margin:12px 0 25px;font-size:clamp(36px,5vw,54px)}.final-board .player-list{margin:0 auto 25px;text-align:left}.photo-gallery{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}.photo-gallery>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.photo-gallery figure{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#151023}.photo-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.photo-gallery figcaption{padding:9px 11px;color:var(--muted);font-size:13px}

.quiz-shell { max-width: 920px; margin: auto; }
.quiz-progress { display:flex;align-items:center;gap:18px;margin-bottom:20px;color:#bbb4cd;font-size:13px}.progress-track{flex:1;height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}.progress-track i{display:block;width:33%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .4s}.timer{white-space:nowrap}
.question-card { display:grid;grid-template-columns:45% 55%;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow) }.question-visual{min-height:270px;display:grid;place-items:center;background:#15162d}.question-visual svg{display:block;width:100%;height:auto;max-height:310px}.question-visual svg text{fill:#d9d3ec;font:700 18px system-ui,sans-serif;letter-spacing:.08em}.concept-line,.concept-arrow{fill:none;stroke:#9c8cff;stroke-width:9;stroke-linecap:round}.concept-line.dashed{stroke:#776d92;stroke-width:4;stroke-dasharray:12 12}.concept-world{fill:#56419a;stroke:#b9a8ff;stroke-width:5}.concept-world.alt{fill:#146b78;stroke:#5ce3df}.concept-world.large{stroke-width:7}.concept-core{fill:#f4d35e;stroke:#fff1ab;stroke-width:4}.concept-star{fill:#f4d35e}.concept-wave{fill:none;stroke:#5ce3df;stroke-width:12;stroke-linecap:round}.concept-wave.alt-stroke{stroke:#b99aff}.level-ring{fill:none;stroke-width:26}.ring-one{stroke:#f4d35e}.ring-two{stroke:#5ce3df}.ring-three{stroke:#9c8cff}.ring-four{stroke:#e06c9f}.question-copy{padding:42px}.question-copy h2{margin:12px 0 6px;font-size:clamp(27px,4vw,42px)}.question-copy p{color:var(--muted)}
.answers { display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:15px}.answers button{display:flex;align-items:center;gap:14px;min-height:80px;padding:15px;border:0;border-radius:15px;text-align:left;cursor:pointer;font-weight:700;box-shadow:inset 0 -4px rgba(0,0,0,.18)}.answers button:nth-child(1){background:#cf304e}.answers button:nth-child(2){background:#2675c7}.answers button:nth-child(3){background:#c68f00}.answers button:nth-child(4){background:#29933b}.answers i{display:grid;place-items:center;width:35px;height:35px;font-style:normal}.answers button:disabled{opacity:.42}.answers button.correct{outline:4px solid #bafac9;opacity:1}.answers button.wrong{outline:4px solid #ffc1ce;opacity:1}.feedback{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:16px 18px;border:1px solid rgba(84,210,122,.22);border-radius:14px;background:rgba(84,210,122,.13);color:#bafac9}.feedback[hidden]{display:none}.feedback div{display:flex;flex-direction:column;gap:3px}.feedback div>span{color:#b8cabe;font-size:13px;line-height:1.45}.feedback .button{flex:0 0 auto}.result-card{position:relative;overflow:hidden;margin-top:22px;padding:64px 32px;border:1px solid var(--line);border-radius:24px;text-align:center;background:var(--panel);box-shadow:var(--shadow)}.result-card[hidden]{display:none}.result-card h2{margin:12px 0 6px;font-size:clamp(34px,5vw,52px)}.result-card p{margin:0 0 25px;color:var(--muted);font-size:18px}.result-card p strong{color:var(--cyan)}.result-orbit{display:block;width:90px;height:90px;margin:0 auto 26px;border:8px solid var(--violet);border-radius:50%;box-shadow:0 0 0 14px rgba(45,215,208,.18),0 0 0 27px rgba(141,91,255,.1)}

.editor-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.editor-head h2{margin-bottom:0}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px}.media-editor,.question-editor{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow)}.media-preview{min-height:385px;display:grid;place-items:center;overflow:hidden;border:1px dashed rgba(255,255,255,.2);border-radius:16px;background:rgba(0,0,0,.16)}.media-preview img{width:100%;height:385px;object-fit:cover}.empty-media{display:flex;flex-direction:column;align-items:center;max-width:260px;text-align:center}.empty-media span{font-size:45px}.empty-media strong{margin:10px 0 4px}.empty-media small{color:var(--muted);line-height:1.5}.media-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.upload-label{display:inline-flex;align-items:center}.upload-label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.question-editor>label,.question-editor fieldset>legend{display:block;margin-bottom:9px;font-weight:700}.question-editor textarea{width:100%;min-height:108px;resize:vertical;padding:16px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:rgba(0,0,0,.19);font:700 20px/1.4 ui-rounded,system-ui,sans-serif}.field-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0 18px}.field-row select{padding:9px 13px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#211a37}.question-editor fieldset{margin:0;padding:0;border:0}.question-editor legend{width:100%}.question-editor legend small{float:right;color:var(--muted);font-weight:400}.answer-field{display:grid;grid-template-columns:auto 30px 1fr;align-items:center;gap:5px;margin:9px 0;padding:8px 12px;border-radius:12px}.answer-field.red{background:#a92640}.answer-field.blue{background:#205fa0}.answer-field.amber{background:#9b7000}.answer-field.green{background:#237e34}.answer-field>input:last-child{width:100%;padding:9px 5px;border:0;color:#fff;background:transparent;font-weight:700}.answer-field>input:last-child:focus{outline:1px solid rgba(255,255,255,.45);border-radius:5px}

dialog{width:min(680px,calc(100% - 28px));padding:0;border:1px solid var(--line);border-radius:24px;color:var(--ink);background:#1c162e;box-shadow:0 40px 100px rgba(0,0,0,.68)}dialog::backdrop{background:rgba(8,5,15,.78);backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:21px 24px}.dialog-head h2{margin:5px 0 0}.dialog-head button{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.07);font-size:25px;cursor:pointer}.camera-stage{position:relative;min-height:420px;display:grid;place-items:center;overflow:hidden;background:#08070d}.camera-stage video,.camera-stage canvas{width:100%;height:420px;object-fit:cover}.camera-error{display:flex;flex-direction:column;align-items:center;max-width:330px;text-align:center}.camera-error span{font-size:45px}.camera-error strong{margin:10px}.camera-error small{color:var(--muted);line-height:1.5}.dialog-actions{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}.shutter{width:62px;height:62px;padding:5px;border:3px solid #fff;border-radius:50%;background:transparent;cursor:pointer}.shutter i{display:block;width:100%;height:100%;border-radius:50%;background:#fff}.toast{position:fixed;z-index:100;left:50%;bottom:24px;max-width:calc(100% - 30px);padding:13px 18px;border:1px solid var(--line);border-radius:13px;background:#29213f;box-shadow:var(--shadow);font-weight:700;opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:780px){.topbar{width:calc(100% - 28px);min-height:72px}.privacy-pill{display:none}.view{padding-top:34px;min-height:calc(100vh - 72px)}main{width:calc(100% - 28px)}.mode-grid,.split-layout,.editor-grid{grid-template-columns:1fr}.mode-card{min-height:260px}.feature-row{justify-content:flex-start;padding:0 8px}.intro-panel{min-height:auto;padding:28px}.live-illustration{display:none}.choice-stack{padding:16px}.question-card{grid-template-columns:1fr}.question-visual{min-height:180px}.question-visual svg{max-height:210px}.question-copy{padding:25px}.answers{grid-template-columns:1fr}.answers button{min-height:68px}.feedback{align-items:stretch;flex-direction:column}.feedback .button{width:100%}.quiz-progress .timer{display:none}.editor-head{align-items:center}.editor-head h2{font-size:30px}.media-preview,.media-preview img{min-height:280px;height:280px}.camera-stage,.camera-stage video,.camera-stage canvas{min-height:330px;height:330px}.dialog-actions .button{padding:0 11px;font-size:12px}}
@media(max-width:430px){h1{font-size:39px}.hero-copy p{font-size:16px}.top-actions .button{display:none}.brand-zone{gap:9px}.brand{gap:8px;font-size:20px}.brand-mark{width:34px;height:34px}.brand-divider{height:29px}.school-mark{width:68px;height:46px;border-radius:8px}.school-mark img{width:61px;height:43px}.mode-card{padding:23px}.question-editor{padding:17px}.answer-field{grid-template-columns:auto 22px 1fr}.editor-head .button{padding:0 12px}}
@media(max-width:780px){.room-head{align-items:flex-start;padding:17px}.host-grid,.group-question-card{grid-template-columns:1fr}.join-guide{display:none}.group-question-visual{min-height:180px}.group-question-visual svg{max-height:205px}.group-question-copy{padding:24px}.host-controls{align-items:stretch;flex-direction:column}.host-controls .button{width:100%}.player-row{grid-template-columns:30px minmax(0,1fr) auto}.player-row .answer-status{display:none}.final-board,.waiting-card{padding:34px 18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.room-head h2 strong{white-space:nowrap}.code-sep{user-select:none}
.final-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.reconnect-card{max-width:540px;margin:60px auto;padding:52px 28px;border:1px solid rgba(255,90,90,.22);border-radius:24px;text-align:center;background:rgba(255,60,60,.07);box-shadow:var(--shadow)}.reconnect-card h2{margin:12px 0 8px;font-size:clamp(32px,5vw,48px);color:#ffc1c1}.reconnect-card p{color:var(--muted);margin:0 0 28px}.reconnect-card .button.wide{width:100%;margin-bottom:10px}