/* HeyRound! — visual layer only. Realtime, scoring, and MQTT stay in app.js/core.mjs. */
:root {
  /* Shared presentation contract with motion.mjs; no controller-specific overrides. */
  --motion-press:120ms;
  --motion-select:160ms;
  --motion-lift:140ms;
  --motion-reorder:220ms;
  --motion-swipe:190ms;
  --motion-sheet:260ms;
  --motion-page:240ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);
  --ink:#202147;
  --ink-muted:#606983;
  --night:#17183c;
  --violet:#6555f5;
  --violet-deep:#5141dc;
  --yellow:#ffcf55;
  --pink:#ff7099;
  --mint:#53dfc4;
  --blue:#61a5fc;
  --hairline:#e5e7f4;
  color:var(--ink);
  background:#f7f7fc;
  font-family:Inter,"Noto Sans Thai",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body {background:radial-gradient(ellipse 60% 35% at 98% 0%,#edeaff 0%,transparent 80%),radial-gradient(ellipse 38% 30% at 0% 32%,#eaf8ff 0%,transparent 80%),#f7f7fc;}
button,textarea,input,select {font-family:inherit;}
/* Replace the platform tap flash only on controls; keyboard focus stays visible. */
:where(button,a,input,textarea,select,label,[role="button"]) {-webkit-tap-highlight-color:transparent;}
button,a,[role="button"] {touch-action:manipulation;}
button {user-select:none;-webkit-user-select:none;}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible) {outline:none;}
:is(button,a,input,select,textarea,[role="button"]):focus-visible {outline:3px solid var(--violet-deep);outline-offset:3px;}
input:not([type=radio]):focus,select:focus,textarea:focus {border-color:var(--violet);box-shadow:0 0 0 3px #eeeaff;}
input[type=radio]:focus {box-shadow:none;border-radius:50%;}
input,textarea,select {border:1.5px solid #e1e3ef;border-radius:13px;color:var(--ink);background:#fff;}
::selection {background:#d9d3ff;color:var(--night);}
h1,h2,h3 {letter-spacing:-.04em;}
.shell {max-width:1260px;min-height:100vh;padding:21px 36px 28px;display:flex;flex-direction:column;}
.topbar {padding:7px 0 28px;gap:18px;}
.brand {min-height:44px;display:inline-flex;gap:10px;align-items:center;letter-spacing:-.06em;border:0;background:transparent;padding:8px 0;text-align:left;cursor:pointer;font-size:1.4rem;color:var(--night);}
.brand-word {display:block;line-height:1;font-weight:950;letter-spacing:-.06em;font-size:clamp(1.25rem,2.5vw,1.62rem);}
.brand-word span {color:var(--violet);}
.brand-word b {color:var(--pink);font-weight:1000;}
.brand-mark {display:grid;grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);gap:3px;transform:rotate(-9deg);}
.brand-mark i {display:block;background:var(--violet);border-radius:3px;}
.brand-mark i:nth-child(2) {background:var(--yellow);border-radius:100% 100% 2px 100%;}
.brand-mark i:nth-child(3) {background:var(--pink);border-radius:100% 2px 100% 100%;}
.brand-mark i:nth-child(4) {background:var(--mint);}
.header-kicker {font-size:.69rem;font-weight:900;letter-spacing:.13em;color:#8889a5;}
.top-actions {gap:12px;}
.pill {background:#eeeefe;border-color:#e3e0fa;color:#574db4;}
.pill.online {background:#e7f8f2;border-color:#bdeedc;color:#20795d;}
.pill.offline {background:#fff2dc;border-color:#ffe1a5;color:#966112;}
.btn {font-weight:850;border-radius:13px;min-height:46px;padding:13px 21px;transition:transform var(--motion-press) var(--motion-ease),box-shadow var(--motion-press) var(--motion-ease),background-color var(--motion-press) var(--motion-ease);}
@media (hover:hover) and (pointer:fine) {
  .btn:not(:disabled):hover {filter:none;transform:translateY(-2px);box-shadow:0 7px 19px rgba(101,85,245,.16);}
}
.btn:not(:disabled):active {transform:translateY(1px) scale(.99);box-shadow:none;}
.btn.primary {background:var(--violet);color:#fff;box-shadow:0 7px 0 #4f41be;}
@media (hover:hover) and (pointer:fine) {
  .btn.primary:not(:disabled):hover {background:var(--violet-deep);box-shadow:0 8px 0 #4233ab;}
}
.btn.primary:not(:disabled):active {box-shadow:0 2px 0 #4233ab;}
.btn.sm {min-height:44px;}
.btn.secondary {background:#eae7ff;color:#4f3ed3;}
.btn.ghost {background:#fff;color:#565979;border:1.5px solid #dfdfed;}
.btn.copy {color:#5042d6;border-color:#dedafa;background:#fff;}
.card {border:1px solid #e6e6f1;border-radius:23px;box-shadow:0 12px 35px rgba(25,24,68,.045);}
.eyebrow {font-size:.72rem;font-weight:900;letter-spacing:.16em;color:var(--violet);}
.footer-note {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:54px;color:#8c8eaa;font-size:.7rem;font-weight:700;letter-spacing:.03em;}
.footer-note span:first-child {color:#707190;font-weight:900;letter-spacing:.1em;}
.footer-note span span {color:var(--pink)!important;}

/* Home — split game poster + clear player/host choice. */
.hero {grid-template-columns:1.14fr .86fr;gap:clamp(25px,6vw,80px);min-height:645px;align-items:center;padding:12px 0 30px;}
.hero-copy {position:relative;max-width:660px;}
.hero-pill {display:inline-flex;align-items:center;gap:9px;background:#ebe8ff;padding:11px 15px;border-radius:999px;color:#5847d8;font-size:.72rem;}
.live-dot {width:8px;height:8px;background:#f4648c;border-radius:50%;box-shadow:0 0 0 4px #ffcfdd;}
.hero h1 {margin:23px 0 19px;font-size:clamp(3.35rem,6.1vw,6rem);line-height:1.02;letter-spacing:-.078em;color:var(--night);}
.hero h1 span {color:var(--violet);}
.hero p {font-size:1.075rem;line-height:1.8;color:#646c88;max-width:530px;}
.hero-chips {display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.hero-chips span {border-radius:999px;border:1px solid #e6e3f6;padding:9px 12px;font-weight:800;color:#68688e;font-size:.8rem;background:#fff;}
.hero-stage {margin:42px 8px 0 0;background:var(--night);color:#fff;padding:19px 22px 22px;border-radius:22px;max-width:440px;box-shadow:14px 16px 0 #e5dfff;position:relative;transform:rotate(-2deg);}
.hero-stage-top {display:flex;justify-content:space-between;color:#c5c0fa;font-size:.65rem;letter-spacing:.17em;font-weight:900;}
.hero-stage-top span:last-child {color:var(--mint);}
.hero-stage-question {font-size:1.28rem;font-weight:900;letter-spacing:-.04em;margin:20px 0;}
.hero-stage-answers {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.hero-stage-answers i {font-style:normal;font-weight:1000;text-align:center;padding:12px 0;border-radius:10px;background:var(--violet);}
.hero-stage-answers i:nth-child(2){background:#4798ed;}.hero-stage-answers i:nth-child(3){background:var(--yellow);color:var(--night);}.hero-stage-answers i:nth-child(4){background:var(--pink);}
.hero-stage-spark {position:absolute;font-size:2.5rem;color:var(--yellow);}
.spark-a {right:-24px;top:-21px;}.spark-b {left:-24px;bottom:-28px;color:var(--pink);}
.choice-stack {gap:18px;align-content:center;}
.choice-intro h2 {font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12;color:var(--night);margin:9px 0 6px;}
.choice-intro p {font-size:.93rem;color:var(--ink-muted);margin:0 0 10px;}
.role-card {min-height:118px;padding:22px 23px;background:#fff;border:2px solid #eceaf5;border-radius:21px;box-shadow:0 8px 0 #eceaf7;transition:transform var(--motion-press) var(--motion-ease),border-color var(--motion-press) var(--motion-ease),box-shadow var(--motion-press) var(--motion-ease);}
@media (hover:hover) and (pointer:fine) {
  .role-card:hover {background:#fff;transform:translateY(-3px);box-shadow:0 11px 0 #e1dff4;}
}
.role-card:active {transform:translateY(2px);box-shadow:0 3px 0 #e1dff4;}
.role-card.player-card {background:var(--violet);border-color:var(--violet);box-shadow:0 8px 0 #4c3bb4;}
@media (hover:hover) and (pointer:fine) {
  .role-card.player-card:hover {background:#5b4be7;box-shadow:0 11px 0 #4c3bb4;}
}
.role-card.player-card .role-text b,.role-card.player-card .role-text small {color:#fff;}
.role-icon {display:flex;align-items:center;justify-content:center;width:62px;height:62px;flex-shrink:0;border-radius:18px;padding:0;font-size:1.85rem;background:#eae8ff;color:#6152d2;}
.player-card .role-icon {background:#fff2bf;transform:rotate(-9deg);}
.role-text {flex:1;min-width:0;}
.role-text b {font-weight:950;color:var(--night);font-size:1.23rem;letter-spacing:-.035em;}
.role-text small {font-size:.83rem;color:var(--ink-muted);}
.cta-arrow {float:right;font-weight:900;opacity:.8;}
.join-hint {text-align:center;color:#9998b1;font-size:.69rem;letter-spacing:.13em;font-weight:900;margin-top:4px;}

/* Host Studio — functional density, with the question chooser always accessible. */
.section-title h1,.section-title h2 {color:var(--night);letter-spacing:-.047em;}
.section-title h1 {font-size:clamp(1.75rem,3vw,2.4rem);}
.section-title p {color:#81829d;line-height:1.55;}
.builder-heading {margin-top:16px;margin-bottom:26px;}
.builder-heading h1 {margin:8px 0 0;}
.title-spark {color:var(--pink);font-size:.7em;}
.builder {grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start;}
.sidebar {padding:21px;position:sticky;top:20px;}
.sidebar > .eyebrow {margin-bottom:14px;}
.sidebar .question-list {max-height:390px;overflow-x:hidden;overflow-y:auto;padding-right:3px;}
.q-list-row {gap:3px;}
.q-list-item {background:#f7f7fc;border:1.5px solid transparent;color:#5d627f;transition:background-color var(--motion-select) var(--motion-ease),border-color var(--motion-select) var(--motion-ease);}
.q-list-item.active {background:#edeaff;border-color:#b4acff;color:#483ec3;}
@media (hover:hover) and (pointer:fine) {
  .q-list-item:hover {background:#f1efff;}
}
.handle {color:#9e9ab7;}
.q-swipe-stage {display:flex;flex:1;align-items:center;gap:3px;min-width:0;}
.q-swipe-stage .q-list-item {min-width:0;}
.q-summary {min-width:0;flex:1;}
.mobile-builder-header,.mobile-builder-dock,.mobile-q-number,.mobile-swipe-delete,.native-sheet-backdrop,.mobile-builder-hint {display:none;}
.builder-add-label {font-size:.78rem;font-weight:900;color:#81829d;margin:14px 0 10px;}
.builder-add {gap:8px;}
.builder-add .btn {justify-content:flex-start;min-height:40px;font-size:.85rem;}
.editor {padding:28px 30px 31px;}
.editor .section-title {margin-bottom:28px;}
.editor .section-title h2 {font-size:1.75rem;margin-top:6px;}
.editor .option-field {background:#fafaff;border-color:#e7e7f4;}
.editor .option-head input[type=radio] {accent-color:var(--violet);}
.editor .dynamic-choice {display:grid;grid-template-columns:68px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:10px 11px;min-height:70px;}
.dynamic-choice .option-head {position:relative;display:flex;gap:8px;margin:0;align-items:center;min-height:44px;}
.dynamic-choice .option-head input {height:22px;width:22px;min-height:0;flex:none;margin:0;cursor:pointer;}
.dynamic-choice .option-head label {font-weight:900;font-size:1rem;margin:0;cursor:pointer;min-height:44px;display:flex;align-items:center;}
.dynamic-choice .option-head label::before {content:'';position:absolute;inset:0;}
.dynamic-choice {transition:background-color var(--motion-select) var(--motion-ease),border-color var(--motion-select) var(--motion-ease);}
.dynamic-choice:has(input[type=radio]:checked) {background:#eeebff;border-color:#b4acff;}
.choice-letter {display:grid;place-items:center;width:38px;height:36px;background:#efecff;border-radius:10px;color:#584bcc;font-weight:900;}
.dynamic-choice > input {min-width:0;min-height:48px;}
.remove-choice {display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;color:#b54b66;background:#fff0f3;font-size:1.75rem;line-height:1;}
.add-choice,.handle,.brand,.remove-choice,.mobile-add-question,.mobile-back-questions,.native-sheet-choice,.native-sheet-heading button,.mobile-swipe-delete button,.native-undo-toast button {transition:background-color var(--motion-press) var(--motion-ease),opacity var(--motion-press) var(--motion-ease);}
:is(.add-choice,.handle,.brand,.remove-choice,.mobile-add-question,.mobile-back-questions,.native-sheet-choice,.native-sheet-heading button,.mobile-swipe-delete button,.native-undo-toast button):active:enabled {filter:brightness(.94);}
.q-list-item:active {background:#e9e5ff;}
.remove-choice:disabled {visibility:hidden;}
.choice-controls {grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 1px;}
.choice-controls span,.choice-note {font-size:.8rem;color:var(--ink-muted);font-weight:750;margin:0;}
.add-choice {background:#f0edff;color:#5546c9;border:1px solid #dbd5ff;border-radius:13px;padding:12px 17px;min-height:46px;font-weight:850;}
.choice-validation {grid-column:1/-1;color:#bb435e;font-size:.85rem;font-weight:750;margin:0;}
.choice-note {grid-column:1/-1;}
.editor .hint {background:#f3f1ff;border-color:#e5e0ff;color:#6c659d;}
.editor-tools .btn {min-height:44px;}
.tag {background:#edeaff;color:#5e50c9;}
.preview-block {background:#fff;}
.preview-layout > *, .room-layout > * {min-width:0;}
.question-big,.answer-choice > span,.explanation,.roster-name,.waiting-card p,.player-identity,.rank-name,.winner h1 {overflow-wrap:anywhere;}

/* Join / waiting */
.join-layout {display:grid;grid-template-columns:1fr minmax(350px,500px);align-items:center;gap:clamp(34px,7vw,100px);min-height:610px;padding:20px 4% 55px;}
.join-intro h1 {color:var(--night);font-size:clamp(3.7rem,6vw,6.3rem);line-height:1.03;letter-spacing:-.075em;margin:26px 0 17px;}
.join-intro h1 span {color:var(--violet);}
.join-intro p {font-size:1.05rem;color:var(--ink-muted);line-height:1.8;max-width:480px;}
.join-confetti {color:var(--yellow);font-size:3.5rem;letter-spacing:1rem;margin-top:24px;transform:rotate(-8deg);}
.join-confetti span {color:var(--pink);}
.join-card {max-width:none;margin:0;padding:36px;box-shadow:12px 14px 0 #e6e1ff;border:2px solid #ece9fb;}
.join-card-head {text-align:center;margin:0 0 28px;}
.join-card-head h2 {color:var(--night);font-size:2rem;letter-spacing:-.05em;margin:8px 0 0;}
.join-icon {display:flex;align-items:center;justify-content:center;margin:0 auto 17px;width:64px;height:64px;font-size:2rem;border-radius:20px;background:#f0edff;transform:rotate(-8deg);}
.join-card .btn.primary {font-size:1.1rem;min-height:54px;margin-top:4px;}
.join-card input {font-weight:650;border-radius:13px;min-height:52px;}
.join-card #pin {font-size:1.7rem;letter-spacing:.2em;font-weight:950;}
.join-card-foot {color:#a0a0b5;text-align:center;letter-spacing:.12em;font-size:.69rem;font-weight:850;margin:27px 0 0;}
.waiting-card {max-width:520px;margin:75px auto;padding:45px 35px;}
.waiting-card .eyebrow {line-height:1.5;}
.waiting-card h1 {color:var(--night);font-size:2.2rem;margin:12px 0;}
.waiting-card p {line-height:1.7;}
.waiting-illustration {display:grid;place-items:center;width:100px;height:100px;border-radius:50%;background:#f0edff;font-size:3.3rem;margin:30px auto 15px;}
.waiting-dots {display:flex;align-items:center;justify-content:center;gap:8px;margin:26px auto;}
.waiting-dots i {display:block;width:9px;height:9px;background:var(--violet);border-radius:50%;}
.waiting-dots i:nth-child(2){background:var(--pink);}.waiting-dots i:nth-child(3){background:var(--mint);}

/* Lobby — projectable PIN, QR, and participant area. */
.lobby-heading {margin-top:10px;margin-bottom:27px;}
.lobby-heading h1 {margin:6px 0 0;}
.participant-pill {background:#e8fff5;color:#18816b;border-color:#c6f1e3;}
.room-layout {grid-template-columns:1fr 1fr;gap:23px;align-items:start;}
.lobby-pin-card {background:var(--night);color:#fff;border:0;box-shadow:12px 12px 0 #e7e2ff;}
.lobby-pin-card .eyebrow {color:#b0a8ff;}
.lobby-pin-card .room-pin {color:#fff;font-size:clamp(3.8rem,6.6vw,6.4rem);letter-spacing:.1em;font-weight:1000;font-variant-numeric:tabular-nums;}
.lobby-pin-card .btn.copy {background:var(--yellow);color:var(--night);border:0;font-weight:850;}
.lobby-pin-card .qr {border:8px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.12);}
.lobby-pin-card .muted {color:#d0ceea;}
.lobby-pin-card .divider {background:#414064;}
.lobby-pin-card .btn.primary {min-width:220px;}
.lobby-small {margin:19px 0 0;color:#b8b5d4;font-size:.78rem;}
.lobby-players-card {min-height:490px;}
.lobby-players-card .section-title h2 {margin:8px 0 0;}
.room-roster {gap:10px;}
.roster-name {background:#f0efff;color:#4f48a8;border:1px solid #e5e0ff;padding:10px 13px;font-weight:800;}
.roster-name span {font-size:.5rem;color:#52cdb1;margin-right:8px;vertical-align:middle;}
.lobby-empty strong {display:block;color:var(--night);}
.lobby-empty p {font-size:.85rem;color:var(--ink-muted);}
.lobby-players-card .hint {background:#f5f3ff;border-color:#e8e5fc;color:#777197;}

/* In-game stage and feedback — question/scoring logic is unchanged. */
.game-shell {max-width:950px;margin:8px auto 32px;width:100%;}
.game-card {padding:clamp(24px,4vw,45px);border-radius:26px;box-shadow:0 14px 40px rgba(26,24,68,.07);}
.game-top .eyebrow {font-size:.83rem;letter-spacing:.11em;}
.round-divider {color:#bdb8e3;margin:0 6px;}
.game-top .pill {margin-top:8px;}
.game-card .question-big {color:var(--night);font-size:clamp(1.8rem,3.5vw,2.7rem);letter-spacing:-.045em;line-height:1.3;margin:24px 0 23px;}
.live-banner,.phase-banner {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-radius:12px;padding:10px 14px;margin-bottom:23px;font-weight:900;font-size:.75rem;letter-spacing:.08em;}
.live-banner {background:#efeaff;color:#5a48d7;}
.live-banner span {color:#8075a2;font-size:.77rem;font-weight:700;letter-spacing:0;}
.reveal-banner {background:#fff0f5;color:#a42c60;}
.timer {width:70px;height:70px;background:var(--night);color:#fff;border:5px solid #d9d6ff;font-size:1.55rem;border-radius:20px;box-shadow:4px 4px 0 #dad5ff;}
.timer.warn {background:#ff7d61;border-color:#ffe4da;color:var(--night);box-shadow:4px 4px 0 #ffcfbd;}
.time-progress {height:7px;border-radius:999px;background:#e8e7fa;overflow:hidden;margin:-6px 0 22px;}
.time-progress span {display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--violet));border-radius:999px;transition:width .2s linear;}
.game-choices {gap:13px;}
.game-choices .answer-choice {position:relative;overflow:hidden;min-height:100px;padding:18px 46px 18px 22px;background:#f0edff;border:2px solid #dfd9ff;color:#383071;font-size:1.08rem;line-height:1.4;font-weight:800;transition:transform var(--motion-press) var(--motion-ease),box-shadow var(--motion-select) var(--motion-ease),border-color var(--motion-select) var(--motion-ease),background-color var(--motion-select) var(--motion-ease);}
.game-choices .answer-choice:nth-child(2) {background:#eaf3ff;border-color:#d6e9ff;color:#1d538b;}
.game-choices .answer-choice:nth-child(3) {background:#fff7dc;border-color:#ffeab6;color:#76551c;}
.game-choices .answer-choice:nth-child(4) {background:#fff0f4;border-color:#ffdae3;color:#863852;}
.game-choices .answer-choice strong {background:var(--violet);color:#fff;width:42px;height:42px;font-size:1.05rem;border-radius:12px;flex-shrink:0;}
.game-choices .answer-choice:nth-child(2) strong {background:#408ee7;color:var(--night);}
.game-choices .answer-choice:nth-child(3) strong {background:#f4bc35;color:#62430f;}
.game-choices .answer-choice:nth-child(4) strong {background:#f27293;color:var(--night);}
@media (hover:hover) and (pointer:fine) {
  .game-choices .answer-choice:hover:enabled {transform:translateY(-3px);box-shadow:0 6px 0 #d1caec;border-color:#a49af7;}
}
.game-choices .answer-choice:active:enabled {transform:translateY(0);box-shadow:none;}
.game-choices .answer-choice.selected {border-color:var(--violet);box-shadow:inset 0 0 0 1px var(--violet);}
.game-choices .answer-choice.selected:after {content:'•';position:absolute;right:12px;top:10px;border-radius:50%;background:var(--violet);color:#fff;width:25px;height:25px;display:grid;place-items:center;font-size:1.1rem;}
.game-choices .answer-choice.selected[data-answer-state=acknowledged]:after {content:'✓';font-size:.85rem;}
.game-choices .answer-choice.correct,.game-choices .answer-choice:nth-child(n).correct {background:#ddf8ea;border-color:#43b889;color:#176e4b;box-shadow:none;}
.game-choices .answer-choice.correct strong {background:#2da66f;color:var(--night);}
.game-choices .answer-choice.correct:after {content:'✓';position:absolute;right:12px;top:10px;background:#2da66f;color:#fff;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;}
.game-choices .answer-choice.wrong,.game-choices .answer-choice:nth-child(n).wrong {background:#ffebee;border-color:#ed7790;color:#963247;box-shadow:none;}
.game-choices .answer-choice.wrong strong {background:#e96181;color:var(--night);}
.game-choices .answer-choice.wrong:after {content:'✕';position:absolute;right:12px;top:10px;background:#e96181;color:#fff;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;}
.game-choices .answer-choice:disabled {opacity:1;cursor:default;}
.player-scorebar {display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;gap:14px;}
.player-identity {min-width:0;background:#fff;border:1px solid #e6e4f5;border-radius:999px;padding:10px 15px;color:#555b7b;font-weight:800;}
.score-current {white-space:nowrap;background:var(--night);color:#d5d4fc;padding:10px 16px;border-radius:999px;font-size:.86rem;}
.score-current b {color:var(--yellow);font-size:1.1rem;font-variant-numeric:tabular-nums;}
.feedback {background:#e3f8ec;border:1px solid #bdebd2;color:#23734e;border-radius:15px;padding:16px 19px;line-height:1.55;}
.feedback.waiting {background:#eeedff;border-color:#dcd8ff;color:#5045a7;}
.feedback.warn,.feedback.incorrect {background:#fff0ed;border-color:#ffd6cb;color:#a44e45;}
.explanation {background:#f6f4ff;border:1px solid #ece8ff;border-radius:15px;color:#5d5986;padding:20px;}
.explanation b {display:block;color:#4e43b3;margin-bottom:8px;}
.host-answer-summary .stat {background:#f3f1ff;color:#696293;}
.host-answer-summary .stat strong {color:var(--night);font-size:1.7rem;}
.progress-track {background:#eceafb;height:9px;}
.progress-fill {background:var(--mint);}
.host-toolbar {justify-content:flex-end;margin:28px 0 0;}
.rank-intro {color:var(--ink-muted);margin-top:-5px;margin-bottom:24px;}
.rank-list {gap:10px;}
.rank-row {background:#f5f5fc;padding:15px 18px;border:1px solid #eeeef7;border-radius:15px;}
.rank-row.rank-1 {background:#fff7df;border-color:#ffe7a4;}
.rank-row.rank-2 {background:#f2f1ff;border-color:#dfdcf6;}
.rank-row.rank-3 {background:#fff0ed;border-color:#fbe0d9;}
.rank-number {font-size:1.5rem;flex:0 0 40px;color:#746c9e;}
.rank-name {min-width:0;color:var(--night);}
.rank-score {font-variant-numeric:tabular-nums;color:#4b42b5;white-space:nowrap;}
.rank-score small {font-size:.72rem;color:var(--ink-muted);}
.winner {background:radial-gradient(circle at 5% 10%,rgba(255,207,85,.22),transparent 35%),radial-gradient(circle at 90% 95%,rgba(255,112,153,.18),transparent 40%),var(--night);border-radius:22px;padding:55px 28px;}
.winner .eyebrow {color:var(--yellow);}
.winner h1 {font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.3;margin:18px 0 8px;}
.winner .score-big {color:var(--mint);font-size:clamp(2.5rem,5vw,4.2rem);}
.winner p {color:#d6d2f4;}

/* Pointer reorder and removal effects are visual-only, outside document flow. */
.q-list-row {overflow-anchor:none;}
.q-swipe-stage .handle {touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;}
.q-swipe-stage .handle:active {cursor:grabbing;}
.q-list-row.touch-dragging .q-swipe-stage {opacity:0;}
  .q-drag-ghost {position:fixed;display:flex;align-items:center;gap:0;z-index:90;pointer-events:none;background:#fff;border:2px solid #aea3ff;border-radius:17px;box-shadow:0 18px 36px rgba(64,49,167,.27);will-change:transform;}
  .q-drag-ghost .handle {order:2;width:44px;height:54px;display:grid;place-items:center;flex:0 0 44px;padding:0;font-size:1rem;}
  .q-drag-ghost .q-list-item {order:1;display:flex;align-items:center;gap:12px;flex:1;border:0;background:#fff;padding:12px;min-height:76px;}
  .q-drag-ghost .mobile-q-number {display:grid;}
@media (min-width:851px) {
  .q-drag-ghost .mobile-q-number {display:none;}
  .q-drag-ghost .q-list-item {padding:12px;min-height:0;}
}
  .q-drag-ghost .q-desktop-index {display:none;}
@media (max-width:980px) {
  .shell {padding:18px 25px 25px;}
  .hero {min-height:0;gap:45px;padding:35px 0;}
  .hero h1 {font-size:clamp(3rem,6vw,4.6rem);}
  .hero-stage {margin-top:35px;}
  .builder {grid-template-columns:270px minmax(0,1fr);}
  .join-layout {gap:30px;padding:25px 0;}
}
@media (max-width:850px) {
  .hero {grid-template-columns:1fr;gap:45px;}
  .hero-copy {max-width:760px;}
  .hero-stage {max-width:410px;}
  .choice-stack {grid-template-columns:1fr 1fr;}
  .choice-intro,.join-hint {grid-column:1/-1;}
  .builder,.room-layout,.preview-layout {grid-template-columns:1fr;}
  .builder .sidebar {order:0;position:static;}
  .builder .editor {order:1;}
  .question-list {display:grid!important;overflow:visible!important;max-height:none!important;grid-template-columns:minmax(0,1fr)!important;gap:9px;padding:0;}
  .q-list-row {position:relative;min-width:0;overflow:hidden;border-radius:17px;isolation:isolate;touch-action:pan-y;background:#f4f2ff;}
  .q-list-row .q-swipe-stage {position:relative;z-index:1;gap:0;width:100%;background:#fff;border:1.5px solid #e7e7f5;border-radius:16px;transition:transform var(--motion-swipe) var(--motion-ease);}
  .q-list-row.is-swiped .q-swipe-stage {transform:translateX(-82px);}
  .q-list-row .q-swipe-stage.is-swiping {transition:none;will-change:transform;}
  .q-list-row.touch-dragging {background:#e9e4ff;outline:2px dashed #9889f4;outline-offset:-2px;z-index:3;}
  .q-swipe-stage .handle {order:2;width:44px;height:54px;display:grid;place-items:center;flex:0 0 44px;padding:0;touch-action:none;font-size:1rem;}
  .q-swipe-stage .q-list-item {order:1;display:flex;align-items:center;gap:12px;min-height:81px;flex:1;border:0;background:transparent;padding:12px;}
  .q-swipe-stage .q-list-item.active {background:#f8f7ff;color:var(--ink);}
  .q-swipe-stage .q-list-item b {white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;font-size:.92rem;}
  .q-swipe-stage .q-list-item small {display:block;margin-top:3px;color:#8584a5;}
  .mobile-q-number {display:grid;place-items:center;flex:0 0 38px;height:38px;background:#efecff;border-radius:12px;color:#5748cb;font-size:.78rem;font-weight:950;}
  .q-desktop-index {display:none;}
  .mobile-swipe-delete {display:grid;position:absolute;right:0;top:0;bottom:0;width:82px;background:#d8485f;place-items:center;visibility:hidden;opacity:0;pointer-events:none;}
  .q-list-row.is-swiping .mobile-swipe-delete,.q-list-row.is-swiped .mobile-swipe-delete {visibility:visible;opacity:1;}
  .q-list-row.is-swiped .mobile-swipe-delete {pointer-events:auto;}
  .mobile-swipe-delete .trash-icon {width:23px;height:23px;pointer-events:none;}
  .q-swipe-stage .q-list-item {user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  .mobile-swipe-delete button {height:100%;width:100%;border:0;background:transparent;color:#fff;font-weight:900;font-size:.88rem;}
  .q-list-row button:focus-visible {outline-offset:-4px;}
  .mobile-swipe-delete button:focus-visible {outline-color:#fff;}
  .mobile-swipe-delete button:disabled {opacity:.4;}
  .builder-heading {display:none;}
  .mobile-builder-shell {position:relative;min-height:50vh;}
  .mobile-builder-header {display:flex;align-items:center;gap:12px;justify-content:space-between;position:sticky;top:0;z-index:6;padding:15px 2px 16px;margin:-4px 0 11px;background:linear-gradient(180deg,#f7f7fc 85%,rgba(247,247,252,.93));}
  .mobile-builder-kicker {font-size:.67rem;color:#8a83aa;font-weight:950;letter-spacing:.13em;}
  .mobile-builder-header h1 {margin:3px 0 0;font-size:clamp(1.4rem,5vw,1.72rem);line-height:1.2;color:var(--night);letter-spacing:-.05em;}
  .mobile-builder-header h1 span {color:#8d8ba6;font-size:.78em;}
  .mobile-add-question {min-height:46px;padding:0 17px;border:0;border-radius:13px;background:var(--violet);color:#fff;font-weight:900;white-space:nowrap;box-shadow:0 4px 0 #4b3daf;}
  .mobile-back-questions {width:46px;height:46px;flex:0 0 46px;border:1.5px solid #e4e1f5;background:#fff;border-radius:15px;color:#5b50ba;font-size:1.4rem;font-weight:800;}
  .mobile-saved-mark {font-size:.7rem;white-space:nowrap;color:#4c8b72;font-weight:800;margin-left:auto;}
  .mobile-builder-header:has(.mobile-back-questions) {justify-content:flex-start;}
  .mobile-builder-shell.pane-list .builder .editor,.mobile-builder-shell.pane-editor .builder .sidebar {display:none;}
  .mobile-builder-shell .sidebar,.mobile-builder-shell .editor {width:100%;position:static;order:unset;}
  .mobile-builder-shell .sidebar {padding:20px;}
  .mobile-builder-shell .editor {padding:22px;}
  .mobile-builder-shell .sidebar .eyebrow {display:none;}
  .mobile-builder-shell .sidebar > .row.space {gap:7px;}
  .mobile-builder-shell .sidebar .tag {font-size:.65rem;}
  .mobile-builder-hint {display:block;font-size:.75rem;line-height:1.6;color:var(--ink-muted);margin:11px 0 0;}
  .mobile-builder-shell .builder-add-label,.mobile-builder-shell .builder-add {display:none;}
  .mobile-builder-shell.pane-editor .editor .section-title {margin-bottom:20px;}
  .mobile-builder-shell.pane-editor .editor .section-title .eyebrow {display:none;}
  .mobile-builder-shell.pane-editor .editor .section-title h2 {font-size:1.3rem;margin:0;}
  .mobile-builder-shell .editor-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .mobile-builder-shell .options-grid {grid-template-columns:1fr;}
  .mobile-builder-shell input,.mobile-builder-shell textarea,.mobile-builder-shell select {font-size:16px;min-height:48px;}
  .mobile-builder-shell textarea {min-height:110px;}
  .mobile-builder-shell .option-field {border-radius:16px;}
  .mobile-builder-shell .dynamic-choice {grid-template-columns:57px minmax(0,1fr) 44px;gap:7px;padding:9px 10px;min-height:66px;}
  .mobile-builder-shell .option-head {min-height:44px;}
  .mobile-builder-dock {display:grid;grid-template-columns:1fr 1.2fr;gap:9px;position:sticky;z-index:5;bottom:0;margin:18px -4px -10px;padding:13px 4px max(13px,env(safe-area-inset-bottom));background:rgba(247,247,252,.96);border-top:1px solid #e4e2f1;backdrop-filter:blur(16px);}
  .mobile-builder-shell.pane-editor .mobile-builder-dock {display:none;}
  .mobile-builder-dock .btn {min-height:50px;padding:10px;font-size:.88rem;}
  .native-sheet-backdrop {display:flex;position:fixed;inset:0;z-index:40;align-items:flex-end;justify-content:center;background:rgba(21,21,48,.48);padding-top:30px;}
  .native-sheet {background:#fff;border-radius:25px 25px 0 0;width:min(100%,600px);max-height:min(calc(var(--sheet-viewport,100dvh) - 30px),780px);overflow-y:auto;padding:9px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -16px 60px rgba(24,20,65,.15);overscroll-behavior:contain;}
  .native-sheet-grip {margin:0 auto 13px;width:40px;height:5px;border-radius:99px;background:#d7d6e4;}
  .native-sheet-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;}
  .native-sheet-heading h2 {font-size:1.22rem;margin:0;color:var(--night);}
  .native-sheet-heading button {height:44px;width:44px;border:0;border-radius:13px;background:#f1f0f8;color:#66647e;font-size:1.05rem;}
  .native-sheet-options {display:grid;gap:9px;}
  .native-sheet-choice {display:flex;align-items:center;gap:13px;width:100%;min-height:67px;text-align:left;background:#f7f7fc;border:1px solid #ececf5;border-radius:17px;padding:12px 15px;color:var(--night);}
  .native-sheet-choice > span:nth-child(2) {flex:1;min-width:0;}
  .native-sheet-choice b {display:block;font-size:.96rem;}
  .native-sheet-choice small {display:block;color:var(--ink-muted);font-weight:650;margin-top:4px;}
  .native-sheet-icon {width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;background:#e9e5ff;border-radius:12px;color:#5848d5;font-size:1.25rem;font-weight:900;}
  .native-sheet-choice.destructive {background:#fff3f5;border-color:#ffe3e8;color:#b63d55;}
  .native-sheet-choice.destructive .native-sheet-icon {background:#ffe1e8;color:#c84260;}
  .native-sheet-choice:disabled {opacity:.42;}
  body:has(.native-sheet-backdrop) {overflow:hidden;}
  .native-undo-toast {position:fixed;z-index:45;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(calc(100% - 32px),420px);background:var(--night);color:#fff;border-radius:15px;padding:13px 17px;font-size:.9rem;font-weight:800;box-shadow:0 15px 35px rgba(20,19,57,.22);}
  .native-undo-toast button {min-height:44px;border:0;background:transparent;padding:6px 2px;color:var(--yellow);font-weight:950;white-space:nowrap;}
  .q-list-item {width:100%;}
  .builder-add {grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
  .builder-add .btn {font-size:.78rem;padding:10px;justify-content:center;}
  .join-layout {grid-template-columns:1fr;max-width:570px;margin:0 auto;gap:24px;}
  .join-intro h1 {font-size:4.3rem;}
  .join-intro p {margin-bottom:0;}
  .join-confetti {display:none;}
  .lobby-players-card {min-height:260px;}
}
@media (max-width:600px) {
  .shell {padding:12px 16px max(20px,env(safe-area-inset-bottom));min-height:100dvh;}
  .role-host.step-builder .footer-note {display:none;}
  .topbar {padding:6px 0 18px;}
  .brand-word {font-size:1.4rem;}
  .header-kicker {display:none;}
  .top-actions {justify-content:flex-end;}
  .top-actions .pill {font-size:.64rem;padding:5px 7px;}
  .home-link {font-size:.74rem!important;}
  .footer-note {display:block;text-align:center;line-height:1.7;padding-top:50px;}
  .footer-note > span {display:block;}
  .hero {padding:18px 0 30px;gap:32px;}
  .hero h1 {font-size:clamp(3rem,12vw,4.2rem);}
  .hero p {font-size:.94rem;}
  .hero-chips span {font-size:.74rem;}
  .hero-stage {transform:rotate(-1deg);margin:36px 5px 0 0;box-shadow:7px 9px 0 #e5dfff;padding:17px;}
  .hero-stage-question {font-size:1.08rem;}
  .hero-stage-spark {font-size:1.8rem;}.spark-a {right:-13px;top:-15px;}.spark-b {left:-15px;bottom:-16px;}
  .choice-stack {display:grid;grid-template-columns:1fr;gap:15px;}
  .choice-intro,.join-hint {grid-column:auto;}
  .choice-intro h2 {font-size:2rem;}
  .role-card {min-height:105px;padding:18px;}
  .role-icon {width:53px;height:53px;}
  .role-text b {font-size:1.05rem;}
  .section-title {align-items:flex-start;gap:15px;}
  .section-title h1 {font-size:1.85rem;}
  .builder-heading {margin-top:10px;}
  .builder-actions {width:100%;display:grid;grid-template-columns:1fr 1.2fr;}
  .builder-actions .btn {font-size:.8rem;padding:10px 8px;}
  .sidebar,.editor,.pad {padding:20px;}
  .editor-grid {grid-template-columns:1fr 1fr;}
  .builder-add {grid-template-columns:1fr;}
  .builder-add .btn {justify-content:flex-start;}
  .join-layout {padding:30px 0 20px;}
  .join-intro h1 {font-size:clamp(3.2rem,12vw,4.6rem);margin:16px 0;}
  .join-intro p {font-size:.92rem;}
  .join-card {padding:24px;box-shadow:7px 9px 0 #e6e1ff;}
  .join-card-head h2 {font-size:1.9rem;}
  .join-card #pin {font-size:1.5rem;}
  .waiting-card {margin:30px auto;padding:30px 23px;}
  .lobby-heading {margin-top:4px;}
  .lobby-pin-card {box-shadow:7px 7px 0 #e7e2ff;}
  .lobby-pin-card .room-pin {font-size:clamp(3rem,13vw,4.9rem);}
  .preview-block {padding:24px;}
  .game-shell {margin:0 auto 25px;}
  .game-card {padding:20px;}
  .game-card .question-big {font-size:clamp(1.55rem,6vw,2.05rem);margin:17px 0 22px;}
  .game-choices {grid-template-columns:1fr;gap:11px;}
  .game-choices .answer-choice {min-height:75px;padding:12px 46px 12px 14px;font-size:.99rem;}
  .game-choices .answer-choice strong {height:40px;width:40px;}
  .timer {width:61px;height:61px;border-radius:17px;font-size:1.35rem;}
  .live-banner {font-size:.69rem;padding:10px 11px;}
  .live-banner span {font-size:.69rem;}
  .feedback {padding:13px 15px;font-size:.9rem;}
  .rank-row {padding:12px;gap:8px;}
  .rank-score {font-size:.91rem;}
  .winner {padding:37px 17px;}
  .player-scorebar {margin:3px 0 12px;}
  .player-identity,.score-current {padding:8px 10px;font-size:.75rem;}
  .role-player .join-card input {font-size:16px;min-height:54px;}
  .role-player .game-card {border-radius:21px;box-shadow:0 6px 24px rgba(24,24,68,.055);}
  .role-player .game-choices .answer-choice {min-height:78px;border-radius:18px;touch-action:manipulation;}
  .role-player .game-choices .answer-choice:active:enabled {transform:scale(.992);}
  .mobile-builder-shell .editor-tools .btn {min-height:46px;}
}
@media (prefers-reduced-motion:reduce) {
  .waiting-dots i {animation:none;opacity:1;}
  *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}