/* Quiz Whiz's table: the board, the side column and the Your move card, on
   the room's structure (games/room/room.css), from the tokens in
   quiz-whiz.css; and the waiting room's library picker (setup.js).

   Steadiness first: the board is as big as the height allows and never
   changes size; the Your move card keeps its place at the foot of the side
   column; what comes and goes (the destinations, the die, the spotlight)
   is drawn on the board. The board is drawn in its own unit, --k (a
   704-wide board's pixel), so its rim scales as one object. One light, up
   to the left: the rim, the spaces and the tokens cast shadows; the floor
   is recessed (FRAME, "Depth"). UI is flat: panels cast none. */

/* ── the frame ───────────────────────────────────────────────────────── */
.felt.quiz { position: relative; height: calc(100dvh - 2 * var(--frame)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.felt.quiz.docked { grid-template-columns: minmax(0, 1fr) 320px; }
.quiz .logdock { min-height: 0; display: flex; flex-direction: column; }
.quiz .logdock:empty { display: none; }
.quiz .logdock .gamelog { flex: 1; }
.quiz .tablemain { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.quiz .gamelog.drawer { position: absolute; z-index: 30; right: 14px; top: 64px; bottom: 24px; width: min(360px, calc(100% - 28px)); box-shadow: -10px 10px 30px rgba(0, 0, 0, .45); }
.quiz .logbtn.on { background: var(--pick-tint); box-shadow: var(--pick-ring); }
.quiz .bar .tools .stop.unseen { visibility: hidden; }
.quiz .bar .more svg { display: block; }
.quiz .bar .title { font: var(--display-weight) var(--t-bar, 17px)/1.2 var(--display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.quiz .qtgame { color: var(--marquee); text-shadow: 0 0 10px rgba(255, 210, 63, .45); }
.quiz .qtwhere { font: 500 var(--t-bar, 17px)/1.2 var(--ui-font); color: #c9c0e6; letter-spacing: 0; }

.quiz .stagebox { flex: 1; min-height: 0; min-width: 0; container-type: size; }
.quiz .stage {
  --sw: clamp(340px, calc(100cqw - 720px), 520px);
  --bw: min(calc(100cqw - var(--sw) - 16px), 100cqh);
  height: 100%; display: grid; gap: 16px; grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--bw) var(--sw); justify-content: center;
}
.quiz .boardcol { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.quiz .side { display: flex; flex-direction: column; gap: 16px; min-height: 0; min-width: 0; }
.quiz .qflex { display: none; }
.quiz .side > .qmove { margin-top: auto; }

/* ── the board: a lit stage object in a chrome rim of marquee bulbs ──── */
.qboard { --k: calc(var(--bw, 704px) / 704); position: relative; width: var(--bw, 100%); aspect-ratio: 1; flex: none; }
.qrim {
  position: absolute; inset: 0; box-sizing: border-box; padding: max(2px, calc(3 * var(--k))); border-radius: calc(30 * var(--k));
  background: linear-gradient(145deg, #f7f4ff, #9d95b8 28%, #e9e5f6 52%, #6c6487 78%, #cfc9e2);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5), 0 22px 44px rgba(0, 0, 0, .55);
}
.qrim-in {
  height: 100%; box-sizing: border-box; padding: calc(13 * var(--k)); border-radius: calc(27 * var(--k));
  background: radial-gradient(circle, var(--bulb) 0 calc(2.2 * var(--k)), rgba(255, 206, 120, .5) calc(3.4 * var(--k)), transparent calc(5.5 * var(--k))) calc(-6.67 * var(--k)) calc(-6.67 * var(--k)) / calc(26.346 * var(--k)) calc(26.346 * var(--k)),
    linear-gradient(180deg, #24164a, #140a2c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .6);
}
.qfloor {
  position: relative; height: 100%; border-radius: calc(14 * var(--k)); overflow: hidden;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .05) 38%, transparent 46%), radial-gradient(ellipse at 20% 16%, rgba(255, 255, 255, .12), transparent 42%), radial-gradient(ellipse at 50% 50%, #2b1952, #170c31 68%, #0e0721);
  box-shadow: 0 0 0 max(1.5px, calc(2 * var(--k))) #d8d2ea, inset 0 3px 12px rgba(0, 0, 0, .75);
}
.qsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qplate {
  position: absolute; right: calc(22 * var(--k)); bottom: calc(20 * var(--k)); padding: 5px 9px; border-radius: 4px;
  background: linear-gradient(180deg, #d9d4ea, #8e87a8); color: #2a2244; font: 700 12px/1 var(--ui-font); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 1px 0 #fff; white-space: nowrap; pointer-events: none;
}
.qmarq { font-family: var(--display); }
.qmarqsub { font: 700 12.5px var(--ui-font); letter-spacing: 2px; }
.qbulb { fill: var(--bulb); }
.qtinit { font-family: var(--ui-font); font-weight: 800; fill: var(--seat-ink, #111); }
.qbedge { stroke: #0b0618; stroke-width: 1.5; stroke-linejoin: round; }
.qbadge .qbedge { stroke: #cfc8e6; }
.qbglow { opacity: .35; filter: blur(5px); }
.qdest .qdesthit { fill: transparent; }
.qdest .qdestring { fill: none; stroke: var(--turn); stroke-width: 3; opacity: .45; stroke-dasharray: 6 6; }
.qdest.mine { cursor: pointer; }
.qdest.mine .qdestring { opacity: 1; stroke-dasharray: none; stroke-width: 4; filter: drop-shadow(0 0 6px rgba(45, 226, 200, .8)); }
.qdest.mine.hover .qdestring, .qdest.mine:hover .qdestring, .qdest.mine:focus-visible .qdestring { stroke-width: 7; fill: rgba(45, 226, 200, .18); }
.qdest:focus { outline: none; }
.qtoken.up circle:first-child { animation: qpulse 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes qpulse { 50% { opacity: .15; } }
.qboard.quick { display: none; }

/* a quick game: the players' podiums where the board would be */
.quickgame .boardcol { gap: 16px; justify-content: center; }
.quickgame .boardcol .qsixpanel { width: var(--bw); box-sizing: border-box; }
.qpodiums { width: var(--bw); flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; align-content: center; }
.qpodiums[hidden] { display: none; }
.qpodium {
  position: relative; border-radius: 18px; padding: 22px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #2b1952, #170c31); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 3px rgba(0, 0, 0, .5), 0 16px 30px rgba(0, 0, 0, .45);
  border: 2px solid #b9b2cf;
}
.qpodium.up { border-color: var(--turn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 2px var(--turn), 0 0 24px rgba(45, 226, 200, .3), 0 16px 30px rgba(0, 0, 0, .45); }
.qpodname { display: flex; align-items: center; gap: 8px; font: 600 16px/1.2 var(--ui-font); max-width: 100%; }
.qpodname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qpodfig { font: 800 var(--t-figure)/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.qpodfig small, .qfig small { font: 500 13px/1 var(--ui-font); color: var(--soft); }

/* ── the side column ─────────────────────────────────────────────────── */
.quiz .qchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: none; }
.qchip {
  height: 56px; box-sizing: border-box; border-radius: 12px; background: var(--panel); border: var(--panel-edge);
  display: flex; align-items: center; gap: 10px; padding: 0 14px 0 12px; min-width: 0;
}
.qchip.up { border-color: var(--turn); box-shadow: 0 0 0 1px var(--turn), 0 0 18px rgba(45, 226, 200, .28); }
.qcname { flex: 1; min-width: 0; font: 600 16px/1.2 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcname .soft { font-weight: 400; }
.qchip .qbadge, .qchip .seatmark { flex: none; }
.qfig { font: 800 var(--t-figure)/1 var(--ui-font); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; white-space: nowrap; }

.quiz .qpanel { flex: none; padding: 14px 18px; border-radius: var(--panel-radius); background: var(--panel); border: var(--panel-edge); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qh { margin: 0; font: var(--display-weight) var(--t-heading)/1.2 var(--display); color: var(--ink); }
.qhrow { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.qnote { margin: 0; font-size: var(--t-note); line-height: 1.4; color: var(--soft); }
.qnote b { color: var(--ink); font-weight: 700; }
.qflexgap { flex: 1; }

/* the question */
.quiz .qquestion.has { min-height: 236px; }
.quiz .qquestion { flex: 0 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; box-sizing: border-box; border-top: 4px solid var(--c, rgba(244, 240, 255, .3)); }
.qribbon { display: flex; align-items: center; gap: 8px; min-height: 24px; min-width: 0; }
.qkick { font: 700 12px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ci, var(--soft)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qfor { font-size: 13px; color: var(--soft); white-space: nowrap; }
.qpill { flex: none; font: 600 13px/1 var(--ui-font); border: 1.5px solid color-mix(in srgb, var(--ci, #fff) 60%, transparent); color: var(--ink); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.qtext { margin: 0; font: 600 24px/1.3 var(--ui-font); text-wrap: pretty; }
.qsixpanel { gap: 10px; }
.qwait { margin: 0; font-size: var(--t-body); line-height: 1.45; color: var(--soft); }
.qfield { display: flex; flex-direction: column; gap: 6px; }
.qlabel { font: 600 16px/1.2 var(--ui-font); color: #d8d0f2; }
.qanswer { height: 48px; box-sizing: border-box; font: 500 20px/1 var(--ui-font); }
.qanswering { font-size: var(--t-body); }
.qout { display: flex; flex-direction: column; gap: 10px; }
.qsaid { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: var(--t-body); line-height: 1.5; }
.qsaid dt { color: var(--soft); }
.qsaid dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.qright { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.qrightword { font: 400 28px/1 var(--display); color: var(--good); text-shadow: 0 0 14px rgba(123, 216, 74, .45); }
.qrightans { font: 600 20px/1.2 var(--ui-font); }
.qmiss { margin: 0; font: 600 var(--t-body)/1.2 var(--ui-font); color: var(--bad); }
.qfact { margin: 0; font-size: var(--t-note); line-height: 1.45; color: var(--soft); }
.qvotes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font: 500 14px/1 var(--ui-font); }
.qvote { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed rgba(244, 240, 255, .4); color: #d8d0f2; white-space: nowrap; }
.qvote.yes { background: rgba(123, 216, 74, .16); border: 1.5px solid rgba(123, 216, 74, .55); color: var(--ink); }
.qvote.yes svg { color: var(--good); }
.qvote.no { background: rgba(255, 155, 179, .12); border: 1.5px solid rgba(255, 155, 179, .5); color: var(--ink); }
.qvote.no svg { color: var(--bad); }
.qvote.quiet { border: 0; padding: 0 4px; color: var(--soft); }
.qcount { margin-left: auto; font: 800 16px/1 var(--ui-font); font-variant-numeric: tabular-nums; color: var(--turn); }

/* the six */
.qsixlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.qsixlist li { display: flex; align-items: center; gap: 10px; min-height: 26px; min-width: 0; }
.qsixname { font: 400 15px/1.2 var(--ui-font); color: #d8d0f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qsixlist li.lit .qsixname { font-weight: 700; color: var(--ink); }
.qsixlist .qcat { flex: none; }
.qsixlist .qcat:not(.lit) { opacity: .5; }
.qsixlist li.lit .qcat { filter: drop-shadow(0 0 5px currentColor); }
.qtick { display: inline-flex; color: var(--turn); }
.qcat.q0 { color: var(--cat-0); } .qcat.q1 { color: var(--cat-1); } .qcat.q2 { color: var(--cat-2); }
.qcat.q3 { color: var(--cat-3); } .qcat.q4 { color: var(--cat-4); } .qcat.q5 { color: var(--cat-5); }

/* ── the Your move card ──────────────────────────────────────────────── */
.quiz .qmove { flex: none; border-radius: 12px; padding: 16px; background: rgba(6, 2, 18, .55); border: var(--panel-edge); display: flex; flex-direction: column; gap: 12px; min-height: 118px; box-sizing: border-box; justify-content: center; }
.quiz .qmove.yours { border: 2px solid var(--turn); box-shadow: 0 0 24px rgba(45, 226, 200, .22); }
.qsay { margin: 0; font-size: var(--t-body); line-height: 1.4; }
.quiz .qmove.yours .qsay b { color: var(--turn); }
.qacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.qacts .btn .house-key { margin-left: 2px; }
.qacts.qdests, .qacts.qpicks { justify-content: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.qacts .qdestbtn, .qacts .qpickbtn { justify-content: flex-start; gap: 8px; padding-inline: 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.qacts .qdestbtn svg, .qacts .qpickbtn svg { flex: none; }
.qdname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qdtag { margin-left: auto; flex: none; font: 700 12px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--turn); }
.qenter { display: block; }

/* ── the payoff: a light switching on (the house's strong band) ──────── */
.qbanner { --bc: var(--turn); }
.qbanner.q0 { --bc: var(--cat-0); } .qbanner.q1 { --bc: var(--cat-1); } .qbanner.q2 { --bc: var(--cat-2); }
.qbanner.q3 { --bc: var(--cat-3); } .qbanner.q4 { --bc: var(--cat-4); } .qbanner.q5 { --bc: var(--cat-5); }
.qbanner.final { --bc: var(--marquee); }
.qbanner .house-announce-band {
  background: linear-gradient(90deg, #1c0a36, #41104f 30%, #4c1257 50%, #41104f 70%, #1c0a36); color: #efeaff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 -1px 0 #cfc8e6, 0 1px 0 #cfc8e6; padding: 34px var(--gutter, 24px) 38px; gap: 32px; text-align: left;
}
/* (the band's two rows of marquee bulbs) */
.qbanner .house-announce-band::before, .qbanner .house-announce-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background: radial-gradient(circle, var(--bulb) 0 2.2px, rgba(255, 206, 120, .5) 3.4px, transparent 5px) 0 0 / 22px 8px;
}
.qbanner .house-announce-band::before { top: 8px; }
.qbanner .house-announce-band::after { bottom: 8px; background-position: 11px 0; }
.qbanner .house-announce-text { justify-items: start; }
.qbanner .house-announce-kicker { color: #7ff0de; opacity: 1; }
.qbanner .house-announce-title { font-size: clamp(28px, 5.5vw, 46px); color: color-mix(in srgb, var(--bc) 50%, #fff); text-shadow: 0 0 18px color-mix(in srgb, var(--bc) 60%, transparent); }
.qbanner .house-announce-sub { color: #efeaff; font-size: 18px; }
.qbanner .qbadge { overflow: visible; }
.qbanner .qbadge .qbglow { opacity: .5; filter: blur(10px); }
.qbanner .qbadge .qbedge { stroke: #f4f0ff; stroke-width: 1.2; }
@media (max-width: 640px) {
  .qbanner .house-announce-band { gap: 14px; padding: 26px 16px 30px; }
  .qbanner .house-announce-art .qbadge { width: 64px; height: 64px; }
  .qbanner .house-announce-sub { font-size: 15px; }
}

/* ── the waiting room: the library and its six (setup.js) ───────────── */
.qsix { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qsetrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.qsetrow .label { font-size: var(--t-label); font-weight: 600; }
.qsetrow small { font-size: var(--t-note); }
.qlibs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.qlib { min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1.5px solid rgba(244, 240, 255, .35); background: transparent; color: var(--ink); font: 500 14px/1 var(--ui-font); cursor: pointer; white-space: nowrap; }
.qlib.on { background: var(--pick-tint); box-shadow: var(--pick-ring); font-weight: var(--pick-weight); border-color: transparent; }
.qlib:disabled { cursor: default; }
.qslots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.qslot {
  width: 100%; min-height: 72px; box-sizing: border-box; border-radius: 10px; padding: 10px 10px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 2px solid var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 18%, transparent); color: var(--ink); font: inherit;
}
button.qslot { cursor: pointer; }
.qslot.picked { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 0 2px var(--c), 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.qslothead { display: flex; align-items: center; gap: 6px; }
.qslotn { font: 700 12px/1 var(--ui-font); color: #cfc7ea; }
.qslotname { font: 600 15px/1.2 var(--ui-font); overflow-wrap: anywhere; }
.qgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; }
.qgh { margin: 0 0 6px; font: 700 12px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.qgroup ul { list-style: none; margin: 0; padding: 0; }
.qpick { width: 100%; min-height: 30px; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 4px; margin: 0 -4px; border-radius: 6px; color: #d8d0f2; font: 400 14px/1.2 var(--ui-font); text-align: left; cursor: pointer; }
span.qpick { cursor: default; }
.qpick.in { color: var(--ink); font-weight: 700; }
button.qpick:hover { background: rgba(244, 240, 255, .08); }
.qdot { flex: none; width: 10px; height: 10px; margin: 0 1px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(207, 199, 234, .5); }
.qthemegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.qthemecat { border-radius: 10px; padding: 12px 14px; background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(244, 240, 255, .16); }
.qthemehead { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.qthemecat p { margin: 4px 0 0; font-size: var(--t-note); line-height: 1.4; }
.qthemenote, .qseed { margin: 0; font-size: var(--t-note); line-height: 1.4; }

/* ── the result ──────────────────────────────────────────────────────── */
.qresult { list-style: none; margin: 0; padding: 0; }
.qresult li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid rgba(244, 240, 255, .10); }
.qresult .qrname { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qresult .qrnote { font-size: var(--t-note); color: var(--soft); white-space: nowrap; }
.qresult li.won .qfig { color: var(--turn); }
.qemblem { display: flex; justify-content: center; }
.qlogcat { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

/* ── a narrow computer or a tablet upright: the board over the column ── */
@media (max-aspect-ratio: 6/5) and (min-width: 641px) {
  .quiz .stage { --bw: min(100cqw, calc(100cqh * .52), 704px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .quiz .boardcol { flex: none; width: var(--bw); }
  .quiz .side { flex: 1 1 0; width: min(100%, 704px); }
  .quiz .qsixpanel { display: none; }
  .quiz .qquestion, .quiz .qquestion.has { min-height: 0; }
  .quiz .qchips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── phones ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .felt.quiz { height: 100dvh; gap: 0; }
  .quiz .tablemain { gap: 6px; }
  .felt.quiz .bar .tools { display: none; }
  .felt.quiz .bar .more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .quiz .qtwhere { display: none; }
  .quiz .stage { --bw: min(100cqw, 100cqh - 330px); display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .quiz .side { display: contents; }
  .quiz .qchips { order: 1; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
  .quiz .boardcol { order: 2; align-self: center; }
  .quiz .qquestion, .quiz .qquestion.has { order: 3; min-height: 0; padding: 14px; gap: 10px; }
  .quiz .qsixpanel { display: none; }
  .quiz .qflex { order: 4; }
  .quiz .qmove { order: 5; min-height: 0; padding: 14px; }
  .qchip { height: 44px; padding: 0 6px; gap: 5px; justify-content: center; }
  .qchip .qcname { display: none; }
  .qchip .seatmark { width: 20px; height: 20px; }
  .qchip .qbadge { width: 22px; height: 22px; }
  .qchip .qfig { font-size: 18px; min-width: 0; }
  .qchip .qfig small { display: none; }
  .qtext { font-size: 19px; }
  .qfor { display: none; }
  .qkick { white-space: normal; line-height: 1.2; }
  .qanswer { height: 48px; font-size: 18px; }
  .qfield .qlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* (answering, the board steps aside: the question and the keyboard need the room) */
  .felt.quiz.typing .boardcol { display: none; }
  .quiz .qpodiums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .qpodium { padding: 12px 6px 10px; gap: 6px; border-radius: 12px; }
  .qpodium .qbadge { width: 56px; height: 56px; }
  .qpodname { font-size: 14px; }
  .qacts.qdests, .qacts.qpicks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qacts .qdestbtn, .qacts .qpickbtn { font-size: 15px; padding-inline: 10px; gap: 6px; white-space: normal; text-align: left; line-height: 1.15; }
  .qdname { overflow: visible; }
}
@media (max-width: 640px) and (max-height: 720px) {
  .quiz .stage { --bw: min(100cqw, 100cqh - 300px); gap: 8px; }
  .qfact { display: none; }
}

/* phones on their side: the board at the left, as tall as the screen */
@media (max-height: 520px) {
  #app { padding: 0; }
  .felt.quiz {
    height: 100dvh; border: 0; border-radius: 0; gap: 0;
    padding: max(4px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }
  .felt.quiz .bar .tools { display: none; }
  .felt.quiz .bar .more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; }
  .quiz .tablemain { gap: 2px; }
  .quiz .stage { --sw: min(400px, calc(100cqw - 260px)); --bw: min(calc(100cqw - var(--sw) - 12px), 100cqh); gap: 12px; display: grid; grid-template-columns: var(--bw) var(--sw); }
  .quiz .side { gap: 8px; overflow: auto; }
  .quiz .qchips { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
  .qchip { height: 40px; padding: 0 8px; gap: 6px; justify-content: center; }
  .qchip .qfig small { display: none; }
  .qchip .qfig { min-width: 0; }
  .qchip .qcname { display: none; }
  .quiz .qsixpanel { display: none; }
  .quiz .qquestion, .quiz .qquestion.has { min-height: 0; padding: 12px; gap: 8px; }
  .qtext { font-size: 17px; }
  .qfact { display: none; }
  .quiz .qmove { min-height: 0; padding: 12px; }
}

/* (on a small board the marquee's small words and the tokens' initials
   would be under 12px: they step aside, the shapes and colors still say who) */
@media (max-width: 640px), (max-height: 520px) {
  .qmarqsub, .qtinit { display: none; }
}

@media (pointer: coarse) {
  .felt.quiz .bar .btn { min-height: 44px; }
  .qpick { min-height: 44px; }
  .qlib { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .qtoken.up circle:first-child { animation: none; }
}