/* ClassQuiz — theme matched to cpp.drmyothida.com (CPP201 / iSTAR) */
:root {
  /* Brand palette (from CPP201 theme.css) */
  --blue-900: #0e2f5c;
  --blue-700: #1b4f9c;
  --blue-600: #2461c0;
  --blue-100: #e8f0fc;
  --green-700: #3f8f2f;
  --green-600: #5cae3c;
  --green-100: #eaf6e4;

  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --text: #16202e;
  --heading: var(--blue-900);
  --muted: #55606f;
  --border: #dbe2ec;
  --accent: var(--blue-700);
  --accent-hover: var(--blue-600);
  --accent-ink: #ffffff;
  --accent-soft: var(--blue-100);
  --good: #2e8b47;
  --good-soft: #e9f7ee;
  --bad: #c0392b;
  --bad-soft: #fdecea;
  --warn: #b9770e;
  --warn-soft: #fdf3e2;
  --term-bg: #10151f;
  --term-text: #e3ecdf;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(16, 32, 64, .08);
  --shadow-md: 0 6px 20px rgba(16, 32, 64, .10);
  --header-h: 72px;

  /* Answer colours (tuned to sit with the navy/green brand) */
  --opt-0: #2461c0;
  --opt-1: #e07a2e;
  --opt-2: #3f8f2f;
  --opt-3: #7a4cc2;
  --opt-4: #c2416b;
  --opt-5: #0e8a8a;

  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 16px/1.55 var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--heading); font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); border: 1px solid var(--border); padding: .05em .35em; border-radius: 4px; }
pre.code { font-family: var(--mono); font-size: .9em; background: var(--term-bg); color: var(--term-text); padding: .85em 1em; border-radius: var(--radius-sm); overflow-x: auto; text-align: left; margin: .5em 0; white-space: pre; border-left: 4px solid var(--green-600); }
pre.code code { background: none; border: 0; padding: 0; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.hidden { display: none !important; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* Eyebrow pill (CPP201 hero style) */
.eyebrow {
  display: inline-block; color: var(--green-700); background: var(--green-100);
  font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}

/* Buttons & inputs */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: inherit; font-weight: 600; font-size: .92rem;
  padding: .55em 1.05em; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--blue-700); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
  user-select: none;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.btn.primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn.accent { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.btn.accent:hover { background: var(--green-700); border-color: var(--green-700); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text); }
.btn.ghost:hover { background: var(--blue-100); }
.btn.sm { padding: .32em .7em; font-size: .82rem; }
.btn.lg { padding: .8em 1.5em; font-size: 1.05rem; }

input[type=text], input[type=password], input[type=search], input:not([type]), select, textarea {
  font: inherit; color: inherit; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6em .75em; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 4.5em; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(36, 97, 192, .18); }
label.field { display: block; margin-bottom: .95rem; }
label.field > span { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 1.15rem 1.3rem; }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--blue-900); color: #fff; padding: .7em 1.15em; border-radius: var(--radius-sm); font-size: .9rem; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; max-width: calc(100% - 32px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: var(--bad); }

/* Site header (CPP201 style: white bar, logo + two-line brand) */
.topbar {
  display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); padding: .5rem 24px;
  background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--blue-900); font-weight: 800; font-size: 1.15rem; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand img { height: 46px; width: auto; display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-title { font-weight: 800; font-size: 1.15rem; color: var(--blue-900); white-space: nowrap; }
.brand-title span, .brand > span:not(.brand-text) { color: var(--green-600); }
.brand-sub { font-size: .78rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.topbar .navlink { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text); font-weight: 600; font-size: .92rem; }
.topbar .navlink:hover { background: var(--blue-100); text-decoration: none; }

.site-footer { border-top: 1px solid var(--border); padding: 22px 24px 30px; color: var(--muted); font-size: .85rem; text-align: center; }

/* Login */
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; }
.login-head { text-align: center; margin-bottom: 1.1rem; }
.login-head img { height: 64px; display: block; margin: 0 auto .6rem; }
.login-head h1 { font-size: 1.35rem; margin: .55rem 0 0; }

/* Dashboard layout */
.layout { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - var(--header-h)); }
.sidebar { border-right: 1px solid var(--border); background: var(--surface); padding: 1.1rem .8rem; }
.sidebar h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--green-700); margin: .25rem .55rem .6rem; }
.course-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text); cursor: pointer; font-weight: 600; font-size: .95rem;
}
.course-link:hover { background: var(--blue-100); text-decoration: none; }
.course-link.active { background: var(--blue-700); color: #fff; }
.course-link .count { font-size: .75rem; color: var(--muted); }
.course-link.active .count { color: rgba(255,255,255,.8); }
.main { padding: 1.5rem 1.75rem 3rem; min-width: 0; max-width: 1180px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 1rem; padding-bottom: .5rem; }
.tab { padding: 8px 14px; border: none; background: none; font: inherit; font-weight: 600; font-size: .95rem; color: var(--text); cursor: pointer; border-radius: var(--radius-sm); }
.tab:hover { background: var(--blue-100); }
.tab.active { background: var(--blue-700); color: #fff; }

.live-banner { background: var(--green-100); border: 1px solid #c6e6b8; color: var(--green-700); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; font-weight: 600; }
.dot-live { width: 9px; height: 9px; border-radius: 50%; background: var(--green-600); display: inline-block; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.list { display: flex; flex-direction: column; gap: .65rem; }
.item { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; transition: border-color .15s, box-shadow .15s, transform .1s; }
.item:hover { border-color: var(--blue-600); box-shadow: var(--shadow-md); }
.item .title { font-weight: 700; color: var(--blue-900); }
.item .meta { font-size: .82rem; color: var(--muted); }
.item .actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: .2em .65em; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); vertical-align: middle; }
.badge.live { background: var(--good-soft); color: var(--good); border-color: transparent; }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--blue-900); background: var(--surface-2); position: sticky; top: 0; }
table.data tbody tr:hover td { background: #fafcff; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.ok { color: var(--good); font-weight: 700; }
.no { color: var(--bad); font-weight: 700; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(14, 47, 92, .35); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: 100%; max-width: 440px; box-shadow: var(--shadow-md); }

/* Editor */
.editor-wrap { max-width: 880px; margin: 0 auto; padding: 1.5rem 16px 6rem; }
.q-card { padding: 1rem 1.15rem; margin-bottom: .9rem; border-left: 4px solid var(--blue-700); }
.q-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.q-num { font-weight: 800; color: var(--green-700); min-width: 2.2em; }
.q-head select { width: auto; padding: .3em .5em; font-size: .85rem; }
.opt-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.opt-row .letter { width: 1.9em; height: 1.9em; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; }
.opt-row input[type=radio] { width: 1.15em; height: 1.15em; accent-color: var(--green-600); flex: none; margin: 0; }
.opt-row.correct input[type=text] { border-color: var(--green-600); background: var(--green-100); }
.correct-hint { font-size: .78rem; color: var(--muted); margin: .2rem 0 .5rem; }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: .75rem 16px; z-index: 10; box-shadow: 0 -4px 14px rgba(16,32,64,.05); }
.savebar .inner { max-width: 880px; margin: 0 auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Option colours */
.c0 { background: var(--opt-0); } .c1 { background: var(--opt-1); } .c2 { background: var(--opt-2); }
.c3 { background: var(--opt-3); } .c4 { background: var(--opt-4); } .c5 { background: var(--opt-5); }

/* Presenter */
body.present { background: var(--bg); }
.p-top { display: flex; align-items: center; gap: 1rem; padding: .45rem 24px; min-height: 64px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; }
.p-top .brand img { height: 40px; }
.p-join { font-size: 1.05rem; }
.p-join b { font-size: 1.35rem; letter-spacing: .08em; color: var(--blue-700); font-variant-numeric: tabular-nums; }
.p-stat { font-size: .95rem; color: var(--muted); background: var(--surface-2); padding: .25em .75em; border-radius: 999px; }
.p-stat b { color: var(--blue-900); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.stage { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.5rem 7rem; }
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; margin-top: 1rem; }
.lobby .howto { font-size: 1.6rem; line-height: 1.4; color: var(--text); }
.lobby .url { font-size: 2rem; font-weight: 700; word-break: break-all; color: var(--blue-900); }
.lobby .bigcode { font-size: 5rem; font-weight: 800; letter-spacing: .1em; color: var(--blue-700); line-height: 1.1; font-variant-numeric: tabular-nums; }
.qr-box { background: #fff; padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); width: min(340px, 40vw); }
.qr-box svg { display: block; width: 100%; height: auto; }
.names { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.name-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .3em .45em .3em .9em; font-weight: 600; color: var(--blue-900); display: inline-flex; align-items: center; gap: .25em; box-shadow: var(--shadow); animation: pop .25s ease-out; }
.name-chip button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .3em; border-radius: 999px; }
.name-chip button:hover { color: var(--bad); background: var(--bad-soft); }
@keyframes pop { from { transform: scale(.8); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.p-qnum { font-weight: 700; color: var(--green-700); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; display: flex; gap: .75rem; align-items: center; }
.phase-pill { font-size: .75rem; padding: .25em .8em; border-radius: 999px; font-weight: 700; letter-spacing: .04em; }
.phase-waiting { background: var(--surface-2); color: var(--muted); }
.phase-open { background: var(--good-soft); color: var(--good); }
.phase-closed { background: var(--warn-soft); color: var(--warn); }
.phase-revealed { background: var(--blue-100); color: var(--blue-700); }
.p-qtext { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.25; margin: .4rem 0 1.5rem; color: var(--blue-900); }
.p-qtext pre.code { font-size: clamp(.9rem, 1.5vw, 1.25rem); font-weight: 400; }
.bars { display: flex; flex-direction: column; gap: .8rem; }
.bar-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 5.5rem; gap: .8rem; align-items: center; transition: opacity .3s; }
.bar-row .letter { width: 2.6rem; height: 2.6rem; border-radius: var(--radius-sm); color: #fff; font-weight: 800; font-size: 1.2rem; display: grid; place-items: center; }
.bar-main { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 3.4rem; overflow: hidden; box-shadow: var(--shadow); }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; opacity: .2; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.bar-label { position: relative; padding: .65rem 1rem; font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 600; }
.bar-count { text-align: right; font-size: 1.35rem; font-weight: 800; color: var(--blue-900); font-variant-numeric: tabular-nums; }
.bar-count small { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.bars.revealed .bar-row.wrong { opacity: .38; }
.bars.revealed .bar-row.right .bar-main { border: 3px solid var(--green-600); box-shadow: 0 0 0 4px var(--green-100); }
.bars.revealed .bar-row.right .bar-label::after { content: "  ✓ Correct"; color: var(--green-700); font-weight: 800; font-size: .8em; }
.bars.hide-results .bar-fill { width: 0 !important; }
.bars.hide-results .bar-count { visibility: hidden; }

.controls { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: .75rem 24px; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; z-index: 10; box-shadow: 0 -4px 14px rgba(16,32,64,.05); }
.controls .hint { font-size: .8rem; color: var(--muted); }
.mini-qr { position: fixed; right: 1.25rem; top: 5rem; width: 150px; background: #fff; padding: 8px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); text-align: center; font-weight: 700; font-size: .95rem; color: var(--blue-900); z-index: 5; }
.mini-qr svg { width: 100%; display: block; }
.leader { max-width: 640px; margin: 1rem auto 0; }
.leader-row { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .75rem; align-items: center; padding: .75rem 1.1rem; font-size: 1.25rem; border-bottom: 1px solid var(--border); }
.leader-row:last-child { border-bottom: none; }
.leader-row:nth-child(1) .rank { color: #c99a06; }
.leader-row .rank { font-weight: 800; color: var(--muted); }
.leader-row .score { font-weight: 800; color: var(--blue-700); font-variant-numeric: tabular-nums; }
.conn { font-size: .8rem; padding: .2em .6em; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-weight: 700; }

/* Student */
body.student { background: var(--bg); }
.s-topbar { justify-content: center; }
.s-wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; }
.s-hero { text-align: center; margin-bottom: 1.25rem; }
.s-hero h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); margin: .8rem 0 .35rem; }
.s-hero p { color: var(--muted); margin: 0; }
.s-head { display: flex; align-items: center; gap: .5rem; padding: .25rem 0 1rem; font-size: .9rem; color: var(--muted); }
.s-head b { color: var(--blue-900); }
.s-center { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: .5rem; padding: 2rem 0; }
.s-center .big { font-size: 1.6rem; font-weight: 800; color: var(--blue-900); }
.code-input { font-size: 2rem !important; text-align: center; letter-spacing: .2em; font-weight: 700; color: var(--blue-900); font-variant-numeric: tabular-nums; }
.s-qnum { font-size: .8rem; font-weight: 700; color: var(--green-700); text-transform: uppercase; letter-spacing: .06em; }
.s-qtext { font-size: 1.3rem; font-weight: 700; margin: .3rem 0 1rem; line-height: 1.35; color: var(--blue-900); }
.choices { display: flex; flex-direction: column; gap: .65rem; }
.choice {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  font: inherit; font-size: 1.08rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
  padding: .85rem .95rem; cursor: pointer; min-height: 3.6rem; box-shadow: var(--shadow);
  transition: border-color .12s, background .12s, transform .05s;
}
.choice:hover:not(:disabled) { border-color: var(--blue-600); }
.choice:active { transform: scale(.99); }
.choice .letter { width: 2.1rem; height: 2.1rem; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; font-weight: 800; }
.choice .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.choice.selected { border-color: var(--blue-700); background: var(--blue-100); }
.choice.selected::after { content: "✓"; color: var(--blue-700); font-weight: 900; font-size: 1.2rem; }
.choice:disabled { cursor: default; }
.choices.locked .choice:not(.selected) { opacity: .55; }
.choices.revealed .choice.right { border-color: var(--green-600); background: var(--green-100); opacity: 1; }
.choices.revealed .choice.right.selected::after { color: var(--green-700); }
.choices.revealed .choice.selected.wrongpick { border-color: var(--bad); background: var(--bad-soft); }
.choices.revealed .choice.selected.wrongpick::after { content: "✗"; color: var(--bad); }
.s-status { margin-top: 1rem; text-align: center; font-weight: 600; padding: .75rem; border-radius: var(--radius); }
.s-status.info { background: var(--surface-2); color: var(--muted); }
.s-status.good { background: var(--good-soft); color: var(--good); }
.s-status.bad { background: var(--bad-soft); color: var(--bad); }
.spinner { width: 34px; height: 34px; border: 4px solid var(--blue-100); border-top-color: var(--blue-700); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto .5rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.q-layout.long .p-qtext { font-size: clamp(1.25rem, 2.3vw, 1.85rem); }
.q-layout.long .bar-main { min-height: 3rem; }
.q-layout.long .bar-label { padding: .5rem 1rem; }

/* Presenter: questions with a code block sit side by side with the answers on wide screens */
@media (min-width: 1000px) {
  .q-layout.has-code { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .q-layout.has-code .p-qtext { font-size: clamp(1.3rem, 2vw, 1.75rem); margin-bottom: 0; }
  .q-layout.has-code .p-qtext pre.code { font-size: clamp(.85rem, 1.1vw, 1.1rem); }
  .q-layout.has-code .bars { margin-top: 2.6rem; }
  .q-layout.has-code { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .q-layout.has-code .p-qtext { font-size: clamp(1.1rem, 1.55vw, 1.4rem); }
  .q-layout.has-code .bar-row { grid-template-columns: 2.4rem minmax(0, 1fr) 3.8rem; gap: .6rem; }
  .q-layout.has-code .bar-label { font-size: clamp(.95rem, 1.25vw, 1.2rem); padding: .55rem .85rem; line-height: 1.45; }
  .q-layout.has-code.tall .p-qtext pre.code { font-size: clamp(.72rem, .88vw, .85rem); padding: .6rem .85rem; }
}
/* Code inside answer options: keep tokens together, wrap only when a line is too long */
.bar-label code, .choice .txt code { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  :root { --header-h: 62px; }
  .topbar { padding: .45rem 16px; gap: .6rem; }
  .brand img { height: 38px; }
  .brand-sub { display: none; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--border); padding: .75rem 16px; }
  #courseList { display: flex; flex-wrap: wrap; gap: .25rem; }
  .main { padding: 1rem 16px 3rem; }
  .item { flex-direction: column; align-items: stretch; gap: .5rem; }
  .item .actions { justify-content: flex-start; }
  .p-top { padding: .45rem 16px; }
  .lobby { grid-template-columns: 1fr; text-align: center; }
  .qr-box { margin: 0 auto; width: min(300px, 80vw); }
  .lobby .bigcode { font-size: 3.2rem; }
  .stage { padding: 1rem 16px 9rem; }
  .bar-row { grid-template-columns: 2.2rem minmax(0, 1fr) 4rem; gap: .5rem; }
  .mini-qr { display: none; }
  .controls { padding: .75rem 16px; }
}

/* Wrap long code lines on phones instead of scrolling sideways */
.s-qtext pre.code, .choice pre.code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; }