/* Components (decision 49: "Mokiz Soft", Tailwind + daisyUI in spirit; replaces the 3D look of decisions 40/42).
   Rules of the look: flat fills, 1px borders in --border, soft shadows (--shadow-1/2), rounded corners, weight 600
   for headings/buttons (800 only for big numbers), no gloss, no raised edges, no text shadows. Motion stays
   small (a lift of 1px, a 0.97 press). Game pieces keep their colors (answer tiles need color + shape). */

/* ================= base components ================= */

/* ---------- cards (daisyUI card) ---------- */
.card {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: var(--space-5); box-shadow: var(--shadow-1);
}
.card > h2 { font-size: var(--fs-2); }
.card.wide { grid-column: 1 / -1; }
.card .card { box-shadow: none; background: var(--surface-2); border-color: transparent; padding: var(--space-4); }
@media (max-width: 560px) { .card { padding: var(--space-4); border-radius: var(--radius-m); } }

/* ---------- buttons (daisyUI btn): flat, a 1px lift on hover, a small press ---------- */
.btn {
  --btn: var(--surface-2); --btn-text: var(--text); --btn-border: var(--border);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; min-width: 46px; padding: 0 var(--space-5);
  background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn-border); border-radius: 10px;
  font-weight: var(--w-strong); font-size: var(--fs-1); line-height: 1.2; cursor: pointer; text-decoration: none; user-select: none;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, transform var(--dur) ease, box-shadow var(--dur) ease;
}
.btn:hover:not([disabled]) { filter: brightness(0.97); }
.btn:active:not([disabled]) { transform: scale(0.97); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { --btn: var(--c-orange); --btn-text: #fff; --btn-border: var(--c-orange); box-shadow: 0 1px 2px rgba(249, 115, 22, 0.25); }
.btn-primary:hover:not([disabled]) { --btn: #ea580c; --btn-border: #ea580c; filter: none; }
.btn-secondary { --btn: var(--c-purple); --btn-text: #fff; --btn-border: var(--c-purple); }
.btn-secondary:hover:not([disabled]) { --btn: #4f46e5; --btn-border: #4f46e5; filter: none; }
.btn-ghost { --btn: transparent; --btn-text: var(--text); --btn-border: var(--border); }
.btn-ghost:hover:not([disabled]) { --btn: var(--surface-2); filter: none; }
.btn-danger { --btn: var(--bad-bg); --btn-text: #fff; --btn-border: var(--bad-bg); }
.btn-sm { min-height: 36px; min-width: 36px; padding: 0 var(--space-3); font-size: var(--fs-0); border-radius: var(--radius-s); }
.btn[aria-pressed="true"] { --btn: var(--c-orange-100); --btn-text: var(--c-orange-700); --btn-border: #fdba74; }

/* ---------- badges (daisyUI badge) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-0); font-weight: 500; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.chip-ok { color: var(--ok); border-color: #bbf7d0; background: var(--ok-soft); }
.chip-bad { color: var(--bad); border-color: #fecaca; background: var(--bad-soft); }
.chip-warn { color: var(--warn); border-color: #fde68a; background: var(--warn-soft); }

/* ---------- forms (daisyUI input-bordered) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-0); color: var(--text-muted); font-weight: 500; }
.field input, .field select, .field textarea, .name-form input {
  min-height: 46px; padding: 0 var(--space-3); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.field textarea { padding: var(--space-2) var(--space-3); }
.field input:focus, .field select:focus, .field textarea:focus, .name-form input:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.field-error { color: var(--bad); font-size: var(--fs-0); font-weight: 500; min-height: 1.3em; }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--c-orange); }

.kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--space-4); align-items: center; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.log {
  margin: 0; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-s);
  max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.center { text-align: center; }
.big-count { font-size: var(--fs-4); font-weight: var(--w-heavy); letter-spacing: 0.01em; min-width: 3ch; text-align: center; line-height: 1.1; }
.big-note { font-size: var(--fs-2); font-weight: var(--w-strong); }
.big-pin { font-size: var(--fs-4); font-weight: var(--w-heavy); letter-spacing: 0.16em; }

/* ---------- the navbar ---------- */
.user-name { font-weight: var(--w-strong); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.topbar .btn-ghost { --btn-border: transparent; }
.topbar .btn-ghost:hover:not([disabled]) { --btn: var(--surface-2); }
.topbar .chip { background: var(--surface-2); }
.topbar .q-badge { font-size: 0.7rem; color: var(--text-muted); }
.topbar .avatar { box-shadow: 0 0 0 1px var(--border); border-radius: 50%; }
@media (max-width: 600px) {
  .topbar { gap: 4px; padding: 6px var(--space-3); }
  .topbar .q-badge, .topbar .user-name { display: none; }
  .topbar .btn-sm { min-height: 34px; min-width: 36px; padding: 0 8px; }
  .brand { font-size: var(--fs-1); }
  .brand img { width: 28px; height: 28px; }
}

/* ---------- toasts (daisyUI alert, dark) ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-2); z-index: 50; }
.toast { background: #1f2430; color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); box-shadow: var(--shadow-3); font-weight: 500; animation: toast-in var(--dur) ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- avatars ---------- */
.avatar { display: inline-block; flex: none; }
.avatar-char { --av: var(--c-purple); position: relative; display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--av) 22%, var(--surface)); }
.avatar-char img { position: absolute; left: 6%; top: 6%; width: 88%; height: 120%; object-fit: cover; object-position: 50% 0; pointer-events: none; }
.avatar-drawn { position: relative; display: inline-block; }
.avatar-drawn svg { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); pointer-events: none; }
.avatar-preview { display: grid; place-items: center; padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-m); }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-2); }
.char-pick { position: relative; aspect-ratio: 1; min-height: 64px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; overflow: hidden; transition: border-color var(--dur) ease; }
.char-pick svg { width: 100%; height: auto; pointer-events: none; }
.char-pick:hover:not([disabled]) { border-color: var(--border-strong); }
.char-pick[aria-pressed="true"] { border-color: var(--c-orange); box-shadow: 0 0 0 2px var(--c-orange); }
.swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.swatch[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- mascot and scene pictures ---------- */
.mascot { display: block; width: clamp(96px, 20vw, 160px); height: auto; margin: 0 auto; animation: mascot-bob 3.2s ease-in-out infinite; }
.mascot-sm { width: clamp(64px, 12vw, 96px); }
@keyframes mascot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.scene { display: block; width: 100%; height: auto; border-radius: var(--radius-l); }
.wide-scene .scene { aspect-ratio: 1408 / 360; object-fit: cover; object-position: 50% 35%; max-height: 240px; }

/* ---------- home: the join hero ---------- */
.hero-join { position: relative; overflow: hidden; text-align: center; padding: 0 0 var(--space-6); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); max-width: 680px; margin: 0 auto; }
.hero-banner { display: block; width: 100%; aspect-ratio: 1408 / 640; object-fit: cover; object-position: 50% 30%; }
.hero-body { padding: 0 var(--space-5); margin-top: var(--space-4); position: relative; }
.hero-badge { display: none; }
.hero-title { display: block; margin: 0 0 var(--space-1); font-size: var(--fs-3); font-weight: var(--w-strong); color: var(--text); }
.hero-tagline { color: var(--text-muted); margin: 0 0 var(--space-4); }
.hero-form { max-width: 560px; margin: 0 auto; }
.pin-input { font-size: var(--fs-3); letter-spacing: 0.3em; text-align: center; font-weight: var(--w-heavy); }
.pin-input-hero {
  font-size: 2rem; letter-spacing: 0.3em; text-align: center; font-weight: var(--w-heavy); min-height: 64px; width: 100%;
  padding: var(--space-2); border-radius: var(--radius-m); border: 1px solid var(--border-strong); color: var(--text); background: var(--surface);
}
.pin-input-hero:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.pin-input-hero::placeholder { color: var(--border-strong); }
.hero-form .field label { text-align: left; }
.join-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; text-align: left; }
.join-fields-member { grid-template-columns: 1fr; }
.join-fields .field { min-width: 0; }
.join-fields .field > input:not(.pin-input-hero) { width: 100%; min-height: 54px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-m); color: var(--text); background: var(--surface); }
.member-join-hint { display: flex; align-items: center; gap: var(--space-2); min-height: 54px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-2); }
.btn-hero { width: 100%; min-height: 54px; font-size: var(--fs-2); }
.home-extra { text-align: center; color: var(--text-muted); }
.home-extra a { color: var(--c-orange-700); }
.home-page { align-items: center; }
.home-account { width: min(100%, 680px); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.home-account .home-extra { margin: 0 0 var(--space-3); }
.home-auth-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.home-auth-actions .btn { min-height: 48px; }
.home-quick-links { justify-content: center; }
@media (max-width: 560px) { .join-fields { grid-template-columns: 1fr; } }

/* ---------- answer tiles: shape + color (no letter), flat ---------- */
.answer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.answer {
  --tile: #f97316; --tile-text: #fff;
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
  min-height: 80px; padding: var(--space-3) var(--space-4);
  background: var(--tile); color: var(--tile-text); border: 0; border-radius: var(--radius-l);
  font-weight: var(--w-strong); font-size: var(--fs-2); cursor: pointer; text-align: left;
  transition: transform var(--dur) ease, filter var(--dur) ease, opacity var(--dur) ease, box-shadow var(--dur) ease;
}
.answer:hover:not([disabled]) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.answer:active:not([disabled]) { transform: scale(0.98); }
.answer svg { width: 30px; height: 30px; fill: currentColor; flex: none; opacity: 0.95; }
.answer-image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-s); flex: none; background: rgba(255, 255, 255, 0.3); }
.answer-text { font-weight: var(--w-strong); }
.answer[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--tile); }
:is(.answer, .stage-bar)[data-i="1"] { --tile: #8b5cf6; }
:is(.answer, .stage-bar)[data-i="2"] { --tile: #10b981; }
:is(.answer, .stage-bar)[data-i="3"] { --tile: #f59e0b; --tile-text: #1f2430; }
:is(.answer, .stage-bar)[data-i="4"] { --tile: #f43f5e; }
:is(.answer, .stage-bar)[data-i="5"] { --tile: #3b82f6; }
.answer[disabled] { cursor: default; opacity: 1; }
.answer-correct { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--ok-bg); animation: pop 400ms ease-out; }
.answer-correct::after { content: "\2713"; margin-left: auto; font-size: 1.4em; }
.answer-wrong { opacity: 0.45; }
.answer-wrong::after { content: "\2717"; margin-left: auto; font-size: 1.4em; }
@keyframes pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* ---------- timers ---------- */
.timer { position: relative; width: 96px; height: 96px; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .bg { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.timer .fg { fill: none; stroke: var(--c-orange); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: 0; }
.timer.running .fg { animation: timer-run var(--timer-s, 10s) linear forwards; }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: var(--w-heavy); font-size: var(--fs-3); }
@keyframes timer-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 276.46; } }

/* ---------- lists and rows ---------- */
.room-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.player-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.player { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-m); overflow-wrap: anywhere; animation: pop 300ms ease-out; }
.player-text { flex: 1; min-width: 0; line-height: 1.25; }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-strong); }
.player-text .muted { font-size: var(--fs-0); }
.player .team-move { flex: none; max-width: 8em; min-height: 34px; font-size: var(--fs-0); }
.board-row { display: grid; grid-template-columns: 3ch 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-s); }
.board-row.me { background: var(--c-orange-100); box-shadow: inset 0 0 0 1px #fdba74; }
.board-rank { font-weight: var(--w-strong); color: var(--text-muted); }
.board-score { font-weight: var(--w-strong); }
.qbuilder-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-m); }
.qbuilder-opt { display: flex; align-items: center; gap: var(--space-2); }
.qbuilder-opt input:not([type=radio]) { flex: 1; min-height: 42px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-s); }
.qbuilder-opt input[type=radio] { width: 22px; height: 22px; accent-color: var(--ok-bg); }
.qbank-picker-list { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.qr-box { display: flex; justify-content: center; padding: var(--space-3); background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-m); width: fit-content; margin: 0 auto; }
.qr-code { display: block; }
.question-image { max-width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--radius-m); display: block; margin: 0 auto var(--space-3); }
.quiz-progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.quiz-progress > div { height: 100%; background: var(--ok-bg); transition: width var(--dur) ease; }
.quiz-qcard { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; text-align: center; }
.quiz-qtext { font-size: var(--fs-2); font-weight: var(--w-strong); line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- segmented control / tabs (daisyUI tabs-boxed) ---------- */
.seg { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--space-1) var(--space-3) 0; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.seg:empty { display: none; }
.seg-btn { flex: 1 1 auto; min-height: 38px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-weight: 500; font-size: var(--fs-0); line-height: 1.2; cursor: pointer; }
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: var(--w-strong); box-shadow: var(--shadow-1); }
.seg-light { margin: 0; align-self: flex-start; }

/* ================= the teacher home ================= */
.teacher-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.teacher-hero-art { width: clamp(80px, 13vw, 120px); height: auto; border-radius: var(--radius-l); }
.teacher-hero-text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.teacher-hero h1 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.8rem); overflow-wrap: anywhere; }
.teacher-hero .avatar-char, .teacher-hero .avatar { box-shadow: 0 0 0 1px var(--border); border-radius: 50%; }
.teacher-welcome { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.teacher-welcome h1 { flex: 1; }
.teacher-profile-cta { min-height: 44px; font-weight: var(--w-strong); }
.shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.shortcut { display: flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border-radius: 10px; color: var(--text); font-weight: 500; text-align: center; text-decoration: none; background: var(--surface); border: 1px solid var(--border); transition: background-color var(--dur) ease; }
.shortcut:hover { background: var(--surface-2); }
.shortcut-icon { font-size: 1.1rem; }
.create-title { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0; }
.create-card form { counter-reset: step; }
.step-label { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--w-strong); font-size: var(--fs-1); color: var(--text); }
.step-label::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-orange-100); color: var(--c-orange-700); font-size: var(--fs-0); }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--space-3); }
/* a mode = a daisyUI card: white, a soft tint of the mode color behind the character, a ring when picked */
.mode-card {
  --mode: #f97316;
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0;
  padding: 0 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-l); cursor: pointer;
  background: var(--surface); color: var(--text); text-align: left; overflow: hidden;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}
.mode-live_quiz { --mode: #f97316; } .mode-team_quiz { --mode: #3b82f6; } .mode-drop_arena { --mode: #f43f5e; }
.mode-ladder_quest { --mode: #10b981; } .mode-dice { --mode: #8b5cf6; }
.mode-coop_boss { --mode: #db2777; } .mode-coop_rescue { --mode: #ea580c; } .mode-coop_escape { --mode: #4f46e5; }
.mode-coop_tower { --mode: #0891b2; } .mode-coop_defense { --mode: #65a30d; }
.mode-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.mode-card[aria-pressed="true"] { border-color: var(--mode); box-shadow: 0 0 0 2px var(--mode); }
.mode-card[aria-pressed="true"]::after {
  content: "\2713"; position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mode); color: #fff; font-size: 0.9rem; font-weight: var(--w-strong);
}
.mode-art { position: relative; display: block; height: 108px; margin-bottom: var(--space-2); overflow: hidden; background: color-mix(in srgb, var(--mode) 12%, var(--surface)); }
.mode-art img { position: absolute; left: 50%; bottom: -24%; width: 66%; height: auto; transform: translateX(-50%); transition: transform 250ms ease; }
.mode-card:hover .mode-art img, .mode-card[aria-pressed="true"] .mode-art img { transform: translateX(-50%) translateY(-4px); }
.mode-icon { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); font-size: 1.1rem; box-shadow: var(--shadow-1); }
.mode-name { padding: 0 var(--space-3); font-size: var(--fs-1); font-weight: var(--w-strong); line-height: 1.3; }
.mode-desc { padding: 0 var(--space-3); font-size: var(--fs-0); line-height: 1.4; color: var(--text-muted); }
.field-big input { min-height: 54px; font-size: var(--fs-2); }
.create-options { align-items: flex-end; gap: var(--space-4); }
.btn-create { width: 100%; min-height: 54px; font-size: var(--fs-2); border-radius: var(--radius-m); }
.coop-divider { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.coop-divider span { font-weight: var(--w-strong); font-size: var(--fs-1); }
.coop-divider small { color: var(--text-muted); }
.plan-mode-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-0); }
.quota-panel { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.quota-copy { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-2); min-width: 0; }
.quota-copy .quota-status { overflow-wrap: anywhere; }
.quota-icon { grid-row: span 2; font-size: 1.4rem; }
.quota-hint { grid-column: 2; margin: 0; font-size: var(--fs-0); }
@media (max-width: 560px) {
  .teacher-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .teacher-hero .row, .teacher-welcome { justify-content: center; }
  .teacher-profile-cta { margin: 0 auto; }
  .shortcuts { width: 100%; grid-template-columns: 1fr; }
  .quota-panel { align-items: flex-start; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .mode-art { height: 84px; }
  .mode-desc { display: none; }
}

/* ================= the teacher monitor ================= */
.join-banner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; text-align: left; }
.join-banner .join-how { color: var(--text-muted); }
.join-banner .join-url { font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--c-orange-700); overflow-wrap: anywhere; }
.join-pin-label { font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-0); }
.join-banner .big-pin { font-size: clamp(2.4rem, 6.5vw, 4.2rem); letter-spacing: 0.1em; color: var(--text); line-height: 1; }
@media (max-width: 640px) { .join-banner { grid-template-columns: 1fr; text-align: center; } }
.lobby-count { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--surface-3); color: var(--c-purple-700); font-weight: var(--w-strong); }
/* the room card during a game: a slim bar under the stage; closing is a small quiet button in the corner */
.room-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); text-align: left; }
.room-bar h1 { font-size: var(--fs-1); margin: 0; }
.room-bar .big-count { font-size: var(--fs-1); min-width: 0; }
.room-bar .row { justify-content: flex-end !important; }
.card:has(> .room-close) { position: relative; }
.room-close { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; --btn: transparent; --btn-text: var(--text-muted); --btn-border: var(--border); font-weight: 500; }
.room-close:hover:not([disabled]) { --btn-text: var(--bad); --btn-border: #fecaca; --btn: var(--bad-soft); }
.card:has(> .room-close) > h1 { padding: 0 7.5rem; }
.room-bar .room-close { position: static; order: 9; }
.room-bar > h1 { padding: 0 !important; }
@media (max-width: 640px) {
  .room-close { position: static; align-self: flex-end; order: -1; }
  .card:has(> .room-close) > h1 { padding: 0; }
}
/* team mode on the monitor: the teams side by side, one column each */
.player-list.team-board { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.team-column { list-style: none; grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-left: 4px solid var(--team, var(--border)); background: var(--surface-2); border-radius: var(--radius-m); }
.team-board .team-column { grid-column: auto; min-width: 0; border-left: 0; border-top: 4px solid var(--team, var(--border)); }
.team-board .team-column .player-list { grid-template-columns: minmax(0, 1fr); }
.team-board .team-column .player { background: var(--surface); min-width: 0; padding: var(--space-1) var(--space-2); }
.team-board .player-text .muted { display: none; }
.team-board .team-move { max-width: 6.5em; }
.team-move { min-height: 34px; margin-left: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-s); padding: 0 var(--space-2); }

/* ---------- the stage: the teacher's big screen during a game ---------- */
.stage { display: flex; flex-direction: column; gap: var(--space-4); color: var(--on-bg); }
.stage .muted { color: var(--on-bg-muted); }
.stage-head { font-weight: 500; color: var(--text-muted); display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.stage-q {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); font-weight: var(--w-strong); line-height: 1.3; text-align: center; color: var(--text);
  padding: var(--space-5) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-2);
  overflow-wrap: anywhere; animation: pop 350ms ease-out;
}
.stage-mid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); }
.stage-image { display: block; max-width: 100%; max-height: 38vh; margin: 0 auto; object-fit: contain; border-radius: var(--radius-m); border: 1px solid var(--border); background: #fff; }
.stage-timer { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--surface); color: var(--c-orange-700); font-size: 2.4rem; font-weight: var(--w-heavy); border: 6px solid var(--c-orange); }
.stage-stat { text-align: center; min-width: 110px; padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.stage-stat .muted { color: var(--text-muted); }
.stage-stat-n { font-size: 2.2rem; font-weight: var(--w-heavy); line-height: 1; color: var(--text); }
.stage-ready { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--text); }
.stage-grid .answer { min-height: 100px; font-size: clamp(1.15rem, 2.3vw, 1.7rem); }
.stage-reveal .answer:not(.answer-correct) { opacity: 0.4; }
.stage-answer { text-align: center; font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--ok); padding: var(--space-3); border-radius: var(--radius-m); background: var(--ok-soft); border: 1px solid #bbf7d0; animation: pop 350ms ease-out; }
.stage-bars { display: flex; justify-content: center; align-items: flex-end; gap: var(--space-4); height: 180px; padding: var(--space-3); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); }
.stage-bar-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--space-1); height: 100%; width: 72px; }
.stage-bar-n { font-weight: var(--w-strong); font-size: var(--fs-2); color: var(--text); }
.stage-bar { --tile: #f97316; width: 100%; min-height: 8px; background: var(--tile); border-radius: var(--radius-s) var(--radius-s) 0 0; animation: grow 500ms ease-out; transform-origin: bottom; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.stage-read-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.stage-read-bar > div { height: 100%; background: var(--c-orange); animation: read-drain linear forwards; }
@keyframes read-drain { to { width: 0; } }
.stage .btn-primary { min-height: 52px; font-size: var(--fs-2); }
.stage a { color: var(--c-orange-700); }
.stage-scores .stage-q { background: var(--surface); }
.stage-board .stage-head { font-size: var(--fs-1); }
@media (max-width: 520px) {
  .stage-mid { grid-template-columns: auto auto; justify-content: space-between; }
  .stage-mid > :nth-child(2) { grid-column: 1 / -1; order: 3; }
}

/* ---------- the 3-2-1 after "start" ---------- */
.intro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 56vh; text-align: center; color: var(--text); padding: var(--space-5); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.intro .mascot { width: clamp(100px, 22vw, 170px); }
.intro-title { font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--text-muted); }
.intro-num { font-size: clamp(5.5rem, 22vw, 11rem); font-weight: var(--w-heavy); line-height: 1; color: var(--c-orange); animation: intro-beat 1s ease-in-out infinite; }
@keyframes intro-beat { 0% { transform: scale(0.7); opacity: 0.3; } 30% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- the leaderboard after each question ---------- */
.scoreboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sb-row { display: grid; grid-template-columns: 2.5ch auto minmax(6ch, 1fr) 2fr auto 5ch; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-m); font-size: clamp(1rem, 1.9vw, 1.35rem); border-left: 4px solid var(--team, var(--border)); animation: sb-in 400ms ease-out both; }
.sb-row:nth-child(2) { animation-delay: 60ms; } .sb-row:nth-child(3) { animation-delay: 120ms; } .sb-row:nth-child(4) { animation-delay: 180ms; } .sb-row:nth-child(5) { animation-delay: 240ms; }
.sb-first { background: #fffbeb; border-color: #fde68a; }
.sb-rank { font-weight: var(--w-strong); text-align: center; color: var(--text-muted); }
.sb-first .sb-rank { color: #b45309; }
.sb-name { font-weight: var(--w-strong); overflow-wrap: anywhere; }
.sb-bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.sb-bar > span { display: block; height: 100%; background: var(--c-orange); border-radius: 999px; transition: width 700ms ease; }
.sb-score { font-weight: var(--w-strong); text-align: right; }
.sb-gain { color: var(--ok); font-weight: 500; font-size: var(--fs-0); }
@keyframes sb-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .sb-row { grid-template-columns: 2.5ch auto 1fr auto; } .sb-bar, .sb-gain { display: none; } }

/* ---------- the final board: podium, emoji over each avatar, poses ---------- */
.stage-final { position: relative; }
.stage-final > * { position: relative; z-index: 1; }
.podium-wrap { position: relative; padding-top: var(--space-5); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: var(--space-2); }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: clamp(70px, 16vw, 150px); text-align: center; color: var(--text); animation: podium-rise 700ms ease-out both; }
.podium-name { font-weight: var(--w-strong); overflow-wrap: anywhere; line-height: 1.2; }
.podium-score { color: var(--text-muted); font-weight: 500; }
.podium-step { width: 100%; display: grid; place-items: start center; padding-top: var(--space-2); border-radius: var(--radius-m) var(--radius-m) 0 0; color: #fff; font-size: var(--fs-3); font-weight: var(--w-heavy); }
.podium-1 .podium-step { height: 170px; background: #f59e0b; }
.podium-2 .podium-step { height: 130px; background: #94a3b8; }
.podium-3 .podium-step { height: 100px; background: #d97706; opacity: 0.85; }
.podium-4 .podium-step, .podium-5 .podium-step { height: 70px; background: #a5b4fc; }
.podium-1 { animation-delay: 900ms; }
.podium-2 { animation-delay: 600ms; }
.podium-3 { animation-delay: 300ms; }
.podium-1 .avatar-char, .podium-1 .avatar { box-shadow: 0 0 0 3px #f59e0b; border-radius: 50%; }
.fb-standing { display: inline-block; line-height: 0; }
@keyframes podium-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.fb-player { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-m); border-left: 4px solid var(--team, var(--border)); flex-wrap: wrap; }
.fb-rank { font-weight: var(--w-strong); color: var(--text-muted); min-width: 2.5ch; }
.fb-name { flex: 1 1 5em; min-width: 5em; font-weight: var(--w-strong); overflow-wrap: anywhere; }
.fb-sub { margin-left: auto; color: var(--text-muted); font-size: var(--fs-0); }
.fb-av { position: relative; display: inline-block; line-height: 0; }
.fb-emoji { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); font-size: 2rem; line-height: 1; animation: fb-pop 2.6s ease-out forwards; pointer-events: none; z-index: 3; }
@keyframes fb-pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.5); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
.pose-jump { animation: pose-jump 0.9s ease-in-out infinite; }
.pose-dance { animation: pose-dance 0.8s ease-in-out infinite; }
.pose-spin { animation: pose-spin 1.4s linear infinite; }
.pose-cheer { animation: pose-cheer 0.7s ease-in-out infinite; }
@keyframes pose-jump { 0%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(-16px); } }
@keyframes pose-dance { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes pose-spin { to { transform: rotate(360deg); } }
@keyframes pose-cheer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.reaction-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.reaction-btn { min-width: 52px; min-height: 52px; font-size: 1.7rem; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: transform var(--dur) ease, background-color var(--dur) ease; }
.reaction-btn:hover:not(:disabled) { background: var(--surface-2); transform: translateY(-1px); }
.reaction-btn:active:not(:disabled) { transform: scale(0.95); }
.reaction-btn:disabled { opacity: 0.4; cursor: default; }
.pose-btn { min-height: 44px; }

/* ---------- teams ---------- */
.team-0 { --team: #f43f5e; } .team-1 { --team: #3b82f6; } .team-2 { --team: #10b981; }
.team-3 { --team: #d97706; } .team-4 { --team: #8b5cf6; } .team-5 { --team: #f97316; }
.team-6 { --team: #ec4899; } .team-7 { --team: #0ea5e9; } .team-8 { --team: #65a30d; } .team-9 { --team: #64748b; }
.team-badge { display: inline-grid; place-items: center; border-radius: 50%; background: var(--team); color: #fff; font-weight: var(--w-strong); flex: none; }
.team-standings { display: flex; flex-direction: column; gap: var(--space-2); }
.team-standings .board-row { border-left: 4px solid var(--team); }
.team-standings-big .board-row { font-size: var(--fs-2); padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--team); border-radius: var(--radius-m); }
.team-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); max-width: 640px; width: 100%; margin: 0 auto; }
.team-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  aspect-ratio: 1; min-width: 0; min-height: 44px; padding: var(--space-2); border: 1px solid color-mix(in srgb, var(--team) 35%, transparent); border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--team, var(--c-purple)) 12%, var(--surface)); color: var(--text);
  cursor: pointer; font-weight: var(--w-strong); font-size: var(--fs-1); line-height: 1.2; text-align: center; overflow-wrap: anywhere;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease;
}
.team-choice::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--team); margin-bottom: var(--space-1); }
.team-choice > span:not(.muted):not(.team-badge) { font-size: var(--fs-2); color: var(--text); }
.team-choice .muted { color: var(--text-muted); font-size: var(--fs-0); font-weight: 500; }
.team-choice .team-badge { display: none; }
.team-choice:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.team-choice:active { transform: scale(0.98); }
.team-choice[aria-pressed="true"] { background: var(--team); border-color: var(--team); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--team); }
.team-choice[aria-pressed="true"] > span, .team-choice[aria-pressed="true"] .muted { color: #fff !important; }
.team-choice[aria-pressed="true"]::before { background: #fff; }
.team-choice[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 8px; right: 12px; font-size: 1.2rem; color: #fff; }
@media (max-width: 560px) { .team-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }

/* ---------- Challenge ---------- */
.qualified-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.qualified-list li { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: var(--w-strong); animation: pop 300ms ease-out both; }
.ql-place { color: var(--c-orange-700); }
.rules-box { background: var(--surface-3); box-shadow: none; border-color: transparent; }
.rules-box ul { margin: 0; padding-left: 1.2em; }

/* ---------- room page (student) ---------- */
.name-form { align-items: center; justify-content: center; }
.name-form input { max-width: 14em; min-height: 42px; }
.name-form label { font-size: var(--fs-0); color: var(--text-muted); }
.you-are-in { font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--ok); }
.card .card .row > .big-count:first-child { display: inline-grid; place-items: center; min-width: 58px; height: 58px; padding: 0 var(--space-3); border-radius: 999px; background: var(--surface); border: 4px solid var(--c-orange); color: var(--c-orange-700); font-size: var(--fs-2); }

/* ---------- reports ---------- */
.table-scroll { overflow-x: auto; }
.report-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-0); }
.report-table caption { text-align: left; font-weight: var(--w-strong); padding: var(--space-2) 0; font-size: var(--fs-1); }
.report-table th, .report-table td { border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap; }
.report-table th { background: var(--surface-2); font-weight: var(--w-strong); }
.report-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }

/* ---------- sound / music toggles and the wallet in the navbar ---------- */
.topbar .sound-toggle { font-size: 1.05rem; padding: 0 8px; }
.topbar .sound-toggle[aria-pressed="false"] { opacity: 0.5; }
.wallet-top { text-decoration: none; font-weight: var(--w-strong); white-space: nowrap; }
.topbar .wallet-top { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.topbar .sound-toggle[aria-pressed="true"] { --btn: transparent; --btn-text: var(--text); --btn-border: transparent; }

/* ================= effects made in code (core/client/fx.js) ================= */
.fx-confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.fx-confetti i { position: absolute; display: block; border-radius: 2px; opacity: 0; animation: fx-fall 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) forwards; }
.fx-confetti i:nth-child(3n) { border-radius: 50%; }
@keyframes fx-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
.fx-shake { animation: fx-shake 0.45s ease-in-out; }
@keyframes fx-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.fx-pop { animation: pop 400ms ease-out; }

/* ================= a 3D die (core/client/dice.js) ================= */
.dice3d { --half: calc(var(--dice) / 2); display: block; width: var(--dice); height: var(--dice); margin: var(--space-3) auto; perspective: calc(var(--dice) * 6); flex: none; }
.board-moves .dice3d { display: inline-block; margin: 0 2px 0 0; }
.dice-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.dice-show-1 { transform: rotateX(-16deg) rotateY(22deg); }
.dice-show-2 { transform: rotateX(-16deg) rotateY(22deg) rotateY(-90deg); }
.dice-show-3 { transform: rotateX(-16deg) rotateY(22deg) rotateX(-90deg); }
.dice-show-4 { transform: rotateX(-16deg) rotateY(22deg) rotateX(90deg); }
.dice-show-5 { transform: rotateX(-16deg) rotateY(22deg) rotateY(90deg); }
.dice-show-6 { transform: rotateX(-16deg) rotateY(22deg) rotateY(180deg); }
.dice-face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 12%; border-radius: 20%; background: #ffffff; backface-visibility: hidden; box-shadow: inset 0 0 0 1px #e5e7eb, inset 0 -3px 6px rgba(15, 23, 42, 0.08); }
.dice-f1 { transform: translateZ(var(--half)); }
.dice-f6 { transform: rotateY(180deg) translateZ(var(--half)); }
.dice-f2 { transform: rotateY(90deg) translateZ(var(--half)); }
.dice-f5 { transform: rotateY(-90deg) translateZ(var(--half)); }
.dice-f3 { transform: rotateX(90deg) translateZ(var(--half)); }
.dice-f4 { transform: rotateX(-90deg) translateZ(var(--half)); }
.pip { width: 70%; height: 70%; margin: auto; border-radius: 50%; background: #1f2430; }
.dice-f1 .pip { width: 88%; height: 88%; background: #f43f5e; }
.pip-off { visibility: hidden; }
.dice-roll .dice-cube { animation: dice-tumble 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes dice-tumble { 0% { rotate: 1 0.6 0.2 1080deg; translate: 0 calc(var(--dice) * -0.9); } 55% { translate: 0 0; } 70% { translate: 0 calc(var(--dice) * -0.18); } 100% { rotate: 1 0.6 0.2 0deg; translate: 0 0; } }
.dice { font-size: var(--fs-2); font-weight: var(--w-strong); }

/* ================= board games ================= */
.gameboard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); color: var(--text); }
.gb-grid { position: relative; display: grid; gap: 3px; }
.gb-cell { position: relative; min-height: 58px; padding: 3px 5px; border-radius: 8px; background: #fbf8f4; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.8rem; }
.gb-cell:nth-child(even) { background: #f3eee8; }
.gameboard-compact { padding: var(--space-2); }
.gameboard-compact .gb-cell { min-height: 34px; font-size: 0.65rem; }
.gb-n { position: relative; z-index: 1; font-weight: var(--w-strong); color: var(--text-muted); }
.gb-sp { position: relative; z-index: 1; font-weight: var(--w-strong); font-size: 0.78em; }
.gb-ladder { background: #dcfce7 !important; } .gb-snake { background: #ffe4e6 !important; }
.gb-boost { background: #dbeafe !important; } .gb-trap { background: #ffedd5 !important; } .gb-portal { background: #ede9fe !important; }
.gb-zone-forest { box-shadow: inset 0 -3px 0 #22c55e; } .gb-zone-river { box-shadow: inset 0 -3px 0 #3b82f6; } .gb-zone-castle { box-shadow: inset 0 -3px 0 #a16207; }
.gb-finish { background: #fef3c7 !important; }
.gb-mine { outline: 2px solid var(--c-orange); outline-offset: -2px; }
.gb-tokens { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0 2px; margin-top: auto; }
.gb-token { position: relative; display: inline-flex; flex-direction: column; align-items: center; line-height: 0; transition: transform 300ms ease; }
/* a name tag above each character (decision 50) */
.gb-tag { display: block; max-width: 7.5em; margin-bottom: 1px; padding: 1px 6px; border-radius: 999px; background: rgba(31, 36, 48, 0.82); color: #fff; font-size: 0.66rem; font-weight: var(--w-strong); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-me .gb-tag { background: var(--c-orange); }
.gameboard-big .gb-tag { font-size: 0.75rem; }
.gb-me { z-index: 3; }
.gb-more { font-size: 0.7em; font-weight: var(--w-strong); }
.gb-start { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.bq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(210px, 1fr); gap: var(--space-4); align-items: start; }
.bq-ranking .sb-row { grid-template-columns: 2.5ch auto 1fr auto; font-size: 1rem; }
.bq-ranking .sb-gain { grid-column: 3 / -1; }
.board-moves { margin: 0; padding: var(--space-3) var(--space-3) var(--space-3) 2em; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-1); background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-m); }
.board-moves li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 760px) { .bq-layout { grid-template-columns: 1fr; } }
/* the drawn ladders, snakes and jump arrows */
/* the drawn ladders and snakes sit faded BEHIND the numbers and the players (decision 50: they covered everything) */
.gb-paths { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.gb-paths * { vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }
.gb-rail { stroke: #a16207; stroke-width: 6; }
.gb-rung { stroke: #d97706; stroke-width: 4; }
.gb-ladder-art { opacity: 0.4; }
.gb-snake-art { opacity: 0.35; }
.gb-snake-body { stroke: #22c55e; stroke-width: 12; }
.gb-snake-spots { stroke: #bbf7d0; stroke-width: 4; stroke-dasharray: 2 12; }
.gb-snake-head { stroke: #15803d; stroke-width: 22; }
.gb-jump-line { stroke-width: 4; stroke-dasharray: 8 7; }
.gb-jump-end { stroke-width: 12; }
.gb-jump-boost * { stroke: #3b82f6; } .gb-jump-trap * { stroke: #ea580c; } .gb-jump-portal * { stroke: #8b5cf6; }
.gameboard-compact .gb-rail { stroke-width: 3; } .gameboard-compact .gb-rung { stroke-width: 2; }
.gameboard-compact .gb-snake-body { stroke-width: 6; } .gameboard-compact .gb-snake-spots { stroke-width: 2; stroke-dasharray: 1 7; }
.gameboard-compact .gb-snake-head { stroke-width: 12; } .gameboard-compact .gb-jump-line { stroke-width: 2; } .gameboard-compact .gb-jump-end { stroke-width: 7; }
/* the projected teacher board: bigger squares, no tilt (a calm, flat board) */
.gameboard-big { padding: var(--space-4); }
.gameboard-big .gb-grid { gap: 4px; }
.gameboard-big .gb-cell { min-height: clamp(78px, 10vh, 104px); font-size: 1rem; border-radius: 10px; }
.gameboard-big .gb-sp { font-size: 0.85em; }
.gameboard-big .gb-rail { stroke-width: 7; } .gameboard-big .gb-rung { stroke-width: 5; }
.gameboard-big .gb-snake-body { stroke-width: 13; } .gameboard-big .gb-snake-spots { stroke-width: 4; stroke-dasharray: 3 16; }
.gameboard-big .gb-snake-head { stroke-width: 24; }
.gameboard-big .gb-start { font-size: var(--fs-1); }
.container:has(.gameboard-big) { max-width: 1500px; }

/* ================= co-op raids (games/coop_quest/client/raidView.js, decision 52) ================= */
.coop-big { font-size: var(--fs-3); font-weight: var(--w-strong); }
.raid-start { align-items: flex-end; flex-wrap: wrap; }
.field-inline { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.field-inline .input { width: auto; min-height: 44px; }
.raid-me { flex-wrap: wrap; gap: 6px; margin-left: auto; }
.chip-hot { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.raid-hit { border-color: var(--ok); }
.raid-hit-num { margin: 0; font-size: clamp(2.6rem, 12vw, 4rem); font-weight: 800; color: var(--ok); line-height: 1; animation: raid-pop-in 0.35s ease-out; }
.raid-hit-1 .raid-hit-num { color: #d97706; }
.raid-hit-2 .raid-hit-num { color: #ea580c; font-size: clamp(3rem, 15vw, 5rem); }
.raid-ko-card { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.raid-ko-icon, .raid-final-icon { margin: 0; font-size: 3.4rem; line-height: 1; }
.raid-ko-count { color: var(--bad); }
@keyframes raid-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes raid-hurt { 0% { transform: translateX(0); filter: brightness(2.2) saturate(0); } 40% { transform: translateX(-10px) scale(0.96); } 70% { transform: translateX(8px); } 100% { transform: translateX(0); filter: none; } }
@keyframes raid-down { to { transform: rotate(80deg) translateY(30%) scale(0.8); opacity: 0.35; filter: grayscale(1); } }
@keyframes raid-pop { 0% { opacity: 0; transform: translateY(10px) scale(0.6); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-90px) scale(1); } }
@keyframes raid-pop-in { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes raid-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes raid-blink { 50% { opacity: 0.6; } }

/* ================= code-drawn characters (core/client/paperdoll.js) ================= */
.paperdoll { display: block; overflow: visible; }
.paperdoll.pd-bust { overflow: hidden; }
.paperdoll .pd-limb, .paperdoll .pd-head, .paperdoll .pd-body { transform-box: fill-box; }
.paperdoll .pd-arm-l, .paperdoll .pd-arm-r, .paperdoll .pd-leg-l, .paperdoll .pd-leg-r { transform-origin: 50% 0; }
.paperdoll .pd-head { transform-origin: 50% 90%; }
.paperdoll .pd-body { transform-origin: 50% 100%; }
.pd-pose-idle .pd-body { animation: pd-breathe 2.6s ease-in-out infinite; }
.pd-pose-idle .pd-head { animation: pd-tilt 3.2s ease-in-out infinite; }
.pd-pose-wave .pd-arm-r { animation: pd-wave 0.9s ease-in-out infinite; }
.pd-pose-wave .pd-head { animation: pd-tilt 1.8s ease-in-out infinite; }
.pd-pose-cheer .pd-arm-l { transform: rotate(150deg); animation: pd-cheer-l 0.6s ease-in-out infinite; }
.pd-pose-cheer .pd-arm-r { transform: rotate(-150deg); animation: pd-cheer-r 0.6s ease-in-out infinite; }
.pd-pose-cheer .pd-body { animation: pd-hop 0.6s ease-in-out infinite; }
.pd-pose-jump .pd-body { animation: pd-jump 0.9s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
.pd-pose-jump .pd-arm-l { animation: pd-cheer-l 0.9s ease-in-out infinite; }
.pd-pose-jump .pd-arm-r { animation: pd-cheer-r 0.9s ease-in-out infinite; }
.pd-pose-dance .pd-body { animation: pd-sway 0.8s ease-in-out infinite; }
.pd-pose-dance .pd-arm-l { animation: pd-swing 0.4s ease-in-out infinite alternate; }
.pd-pose-dance .pd-arm-r { animation: pd-swing 0.4s ease-in-out infinite alternate-reverse; }
.pd-pose-walk .pd-leg-l, .pd-pose-walk .pd-arm-r { animation: pd-step 0.5s ease-in-out infinite alternate; }
.pd-pose-walk .pd-leg-r, .pd-pose-walk .pd-arm-l { animation: pd-step 0.5s ease-in-out infinite alternate-reverse; }
.pd-pose-walk .pd-body { animation: pd-bob 0.25s ease-in-out infinite alternate; }
@keyframes pd-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.02); } }
@keyframes pd-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pd-wave { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-115deg); } }
@keyframes pd-cheer-l { 0%, 100% { transform: rotate(150deg); } 50% { transform: rotate(125deg); } }
@keyframes pd-cheer-r { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-125deg); } }
@keyframes pd-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pd-jump { 0%, 100% { transform: translateY(0) scaleY(1); } 15% { transform: translateY(0) scaleY(0.9); } 50% { transform: translateY(-40px) scaleY(1.04); } 85% { transform: translateY(0) scaleY(0.95); } }
@keyframes pd-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes pd-swing { from { transform: rotate(40deg); } to { transform: rotate(-40deg); } }
@keyframes pd-step { from { transform: rotate(28deg); } to { transform: rotate(-28deg); } }
@keyframes pd-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
/* decision 61: hi-end shine (auras, glowing wings and crowns): soft layers pulse, sparkles twinkle, rays turn,
   flames flicker. With animations off everything still shows, standing still. */
.paperdoll .pd-glow, .paperdoll .pd-twinkle, .paperdoll .pd-spin, .paperdoll .pd-flicker, .paperdoll .pd-float, .paperdoll .pd-flash { transform-box: fill-box; transform-origin: center; }
.paperdoll .pd-glow { animation: pd-glow 2.4s ease-in-out infinite; }
.paperdoll .pd-twinkle { animation: pd-twinkle 1.6s ease-in-out infinite; }
.paperdoll .pd-spin { animation: pd-spin 14s linear infinite; }
.paperdoll .pd-flicker { transform-origin: 50% 100%; animation: pd-flicker 0.45s ease-in-out infinite alternate; }
.paperdoll .pd-float { animation: pd-float 3s ease-in-out infinite; }
.paperdoll .pd-flash { animation: pd-flash 1.3s steps(2, jump-none) infinite; }
@keyframes pd-glow { 0%, 100% { opacity: 0.75; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes pd-twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.55); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes pd-spin { to { transform: rotate(360deg); } }
@keyframes pd-flicker { from { transform: scaleY(0.94); } to { transform: scaleY(1.05); } }
@keyframes pd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pd-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .paperdoll .pd-glow, .paperdoll .pd-twinkle, .paperdoll .pd-spin, .paperdoll .pd-flicker, .paperdoll .pd-float, .paperdoll .pd-flash { animation: none; }
}
html[data-motion="reduced"] .paperdoll :is(.pd-glow, .pd-twinkle, .pd-spin, .pd-flicker, .pd-float, .pd-flash) { animation: none; }
/* the #/characters prototype page */
.pd-dress { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--space-4); align-items: start; }
.pd-stage { display: grid; place-items: center; min-height: 300px; border-radius: var(--radius-l); background: var(--surface-2); }
.pd-slot-name { min-width: 3.5em; }
.pd-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); }
.pd-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; font-weight: 500; font-size: var(--fs-0); transition: border-color var(--dur) ease, box-shadow var(--dur) ease; }
.pd-pick:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.pd-field { position: relative; height: 320px; border-radius: var(--radius-l); overflow: hidden; outline-offset: 4px; background: #d9f99d; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.pd-walker { position: absolute; transition: left 30ms linear, top 30ms linear; }
.pd-tree { position: absolute; font-size: 3rem; pointer-events: none; }
.pd-pad { display: grid; grid-template-columns: repeat(4, 56px); gap: var(--space-2); justify-content: center; }
@media (max-width: 640px) { .pd-dress { grid-template-columns: 1fr; } }

/* ================= wardrobe / shop / wallet (decision 47) ================= */
.wardrobe { display: grid; grid-template-columns: minmax(260px, 330px) 1fr; gap: var(--space-4); align-items: start; }
.wardrobe-preview { position: sticky; top: 72px; }
.wardrobe-stage { min-height: 270px; }
.wardrobe-name { font-weight: var(--w-strong); font-size: var(--fs-2); }
.wardrobe-poses { justify-content: center; gap: 4px; }
.wardrobe-poses .btn { min-width: 42px; padding: 0 8px; font-size: 1.15rem; }
.wallet-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.wallet-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border-radius: 999px; font-weight: var(--w-strong); font-size: var(--fs-1); background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.wallet-gems { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.wardrobe-tabs { flex-wrap: wrap; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); }
.shop-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: var(--space-2) var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; font-weight: 500; font-size: var(--fs-0); transition: border-color var(--dur) ease, box-shadow var(--dur) ease; }
.shop-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.shop-tile svg { pointer-events: none; }
/* decision 61: hi-end (gem) things sparkle on their tile; the redeem and exchange boxes under the preview */
.shop-hiend { border-color: color-mix(in srgb, #8b5cf6 35%, var(--border)); background: color-mix(in srgb, #8b5cf6 6%, var(--surface)); }
.shop-hiend::after { content: '\2728'; position: absolute; top: 4px; right: 6px; font-size: 0.85rem; }
.wardrobe-extra { border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-2) var(--space-3); background: var(--surface-2); }
.wardrobe-extra summary { cursor: pointer; font-weight: var(--w-strong); min-height: 32px; display: flex; align-items: center; }
.wardrobe-extra form input { flex: 1 1 140px; min-width: 0; text-transform: uppercase; }
.exchange-packs .btn { flex: 1 1 auto; }
.shop-wearing { border-color: var(--c-orange); box-shadow: 0 0 0 2px var(--c-orange); }
.shop-locked svg { filter: saturate(0.6); opacity: 0.85; }
.shop-tile-name { text-align: center; line-height: 1.25; overflow-wrap: anywhere; font-weight: var(--w-strong); }
.shop-tile-state { font-size: 0.78rem; color: var(--text-muted); }
.shop-price-coins { color: #b45309; }
.shop-price-gems { color: #1d4ed8; }
.shop-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.4); }
.shop-confirm { max-width: 420px; width: 100%; box-shadow: var(--shadow-3); animation: pop 250ms ease-out; }
.wardrobe-starters { max-width: 720px; margin: 0 auto; }
@media (max-width: 760px) { .wardrobe { grid-template-columns: 1fr; } .wardrobe-preview { position: static; } }

/* ---------- gems: packs and pay pages (decision 48) ---------- */
.gem-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.gem-pack { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-2); border: 1px solid #bfdbfe; border-radius: var(--radius-l); cursor: pointer; background: #eff6ff; color: #1d4ed8; font-weight: var(--w-strong); transition: box-shadow var(--dur) ease, transform var(--dur) ease; }
.gem-pack:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.gem-pack-icon { font-size: 1.8rem; }
.gem-pack-gems { font-size: var(--fs-2); }
.gem-pack-price { font-size: var(--fs-3); color: var(--text); }
.gem-link { width: 100%; min-height: 42px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: var(--fs-0); }
.pay-qr { width: min(280px, 80vw); height: auto; border-radius: var(--radius-m); background: #fff; border: 1px solid var(--border); }
.pay-adult { text-align: left; max-width: 420px; }

/* ================= reduced motion / low quality ================= */
@media (prefers-reduced-motion: reduce) {
  .mascot, .intro-num, .sb-row, .qualified-list li, .podium-col, .stage-read-bar > div, .answer-correct, .stage-q, .stage-bar, .player, .stage-answer,
  .dice-roll .dice-cube, .fx-shake, .fx-pop,
  .raid-boss, .raid-boss-hit, .raid-pop, .raid-hit-num, .raid-castle-low .raid-castle, .raid-timer-low { animation: none; }
  .pose-jump, .pose-dance, .pose-spin, .pose-cheer { animation: none; outline: 2px dashed var(--c-orange); outline-offset: 2px; border-radius: 50%; }
  .fb-emoji { animation: none; opacity: 1; transform: translateX(-50%); }
  .sb-bar > span, .gb-token { transition: none; }
  .fx-confetti { display: none; }
  .raid-boss-down { animation: none; opacity: 0.35; filter: grayscale(1); }
  .raid-defense .raid-boss { transition: none; }
  .paperdoll * { animation: none !important; }
}
html[data-motion="reduced"] :is(.mascot, .intro-num, .sb-row, .podium-col, .player, .dice-roll .dice-cube) { animation: none; }
html[data-q="low"] :is(.mascot, .raid-boss, .dice-roll .dice-cube) { animation: none; }
html[data-q="low"] .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
html[data-q="low"] :is(.gb-paths, .gb-token) { filter: none; }
html[data-q="low"] .paperdoll * { animation-duration: 0s !important; }

/* ================= profile (decision 50) ================= */
.profile-page { max-width: 760px; margin: 0 auto; }
.profile-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.profile-head h1 { margin: 0; }
.profile-menu { position: sticky; top: 64px; z-index: 4; display: flex; gap: var(--space-1); overflow-x: auto; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-1); }
.profile-menu-item, .profile-menu > a { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-s); color: var(--text); background: transparent; font: inherit; font-size: var(--fs-0); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.profile-menu-item:hover, .profile-menu > a:hover { border-color: var(--border); background: var(--surface-2); }
.profile-section { scroll-margin-top: 124px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.field textarea { min-height: 84px; resize: vertical; }
.field-hint { font-size: var(--fs-0); }
.plan-badge { display: inline-flex; align-items: center; padding: 2px 12px; border-radius: 999px; font-weight: var(--w-strong); font-size: var(--fs-0); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.plan-plus { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.plan-premium { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.plan-now { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); }
.plan-card { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.plan-card p { margin: var(--space-2) 0 0; font-size: var(--fs-0); }
.plan-current { border-color: var(--c-orange); box-shadow: 0 0 0 1px var(--c-orange); }
@media (max-width: 560px) { .profile-head { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ================= admin (decision 51) ================= */
.site-banner { padding: var(--space-2) var(--space-4); background: #fffbeb; color: #92400e; border-bottom: 1px solid #fde68a; text-align: center; font-weight: 500; }
.site-banner[hidden] { display: none; }
.admin-page { max-width: 1280px; margin: 0 auto; }
.container:has(.admin-page) { max-width: 1320px; }
.admin-tabs { flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.stat-card { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.stat-n { font-size: var(--fs-3); font-weight: var(--w-heavy); line-height: 1.2; }
.stat-sub { font-size: var(--fs-0); }
.admin-search input { flex: 1 1 260px; min-height: 42px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: 10px; }
.admin-search select, .admin-tool select, .admin-tool input { min-height: 38px; padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-s); }
.admin-table { background: var(--surface); }
.admin-table td { vertical-align: top; }
.admin-row { cursor: pointer; }
.admin-row:hover td { background: var(--c-orange-100) !important; }
.admin-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.admin-tool { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-2); }
.admin-tool h3 { margin: 0; font-size: var(--fs-1); }
.admin-tool input { width: 100%; }
.admin-tool .row input { width: 6.5em; flex: none; }
.admin-small { font-size: var(--fs-0); margin: 0; }
.admin-danger { --btn-text: var(--bad); }
.admin-detail { max-width: 360px; white-space: normal !important; overflow-wrap: anywhere; font-size: 0.8rem; color: var(--text-muted); }
.admin-chip { margin-left: 6px; }
.admin-user details summary { cursor: pointer; font-weight: var(--w-strong); padding: var(--space-1) 0; }

/* ================= decision 56: join in two steps, teacher home, plans, ads, start bar, bigger stage ================= */
/* home: PIN first, then (guests) the nickname */
.join-step { gap: var(--space-3); }
.join-step-label { font-weight: var(--w-strong); font-size: var(--fs-1); color: var(--text); }
.name-input-hero { width: 100%; min-height: 64px; padding: 0 var(--space-3); font-size: 1.5rem; font-weight: var(--w-strong); text-align: center; border-radius: var(--radius-m); border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); }
.name-input-hero:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.join-found { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.join-room-title { font-size: var(--fs-2); font-weight: var(--w-strong); color: var(--text); overflow-wrap: anywhere; }
.join-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--space-3); }
.join-dots span { width: 28px; height: 6px; border-radius: 999px; background: var(--border); transition: background-color var(--dur) ease; }
.join-dots[data-step="1"] span:first-child, .join-dots[data-step="2"] span { background: var(--c-orange); }

/* teacher home: one big "new room" button, four equal shortcuts */
.teacher-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.btn-hero-create { min-height: 64px; font-size: clamp(1.2rem, 2.6vw, 1.5rem); border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
.shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shortcut { flex-direction: column; gap: 4px; min-height: 76px; padding: var(--space-2); font-size: var(--fs-0); }
.shortcut-icon { font-size: 1.5rem; }
.create-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.mode-locked { cursor: not-allowed; }
.mode-locked .mode-art { filter: grayscale(0.85); opacity: 0.6; }
.mode-locked .mode-name, .mode-locked .mode-desc { opacity: 0.6; }
.mode-locked:hover { transform: none; box-shadow: none; }
.mode-lock { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--text); color: var(--surface); font-size: 0.75rem; font-weight: var(--w-strong); }
.quota-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.quota-empty { border-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 7%, var(--surface)); }
@media (max-width: 560px) {
  .shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-hero-create { width: 100%; }
  .quota-panel { flex-direction: column; align-items: stretch; }
  .quota-actions > * { flex: 1; }
}

/* the start button of a room: big, pinned to the bottom of the screen while the teacher builds the questions */
.start-bar {
  position: sticky; bottom: var(--space-2); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-3);
}
.start-ready { border-color: var(--ok); }
.start-bar-info { font-size: var(--fs-1); color: var(--text); }
.start-bar .raid-start { flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.start-bar .btn-primary { min-height: 68px; min-width: min(100%, 280px); padding: 0 var(--space-6); font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: var(--w-strong); border-radius: var(--radius-m); }
.start-ready .btn-primary:not(:disabled) { background: var(--ok); border-color: var(--ok); animation: start-glow 1.8s ease-in-out infinite; }
@keyframes start-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.35); } 50% { box-shadow: 0 0 0 8px rgba(21, 128, 61, 0); } }
@media (max-width: 560px) { .start-bar .btn-primary, .start-bar .raid-start { width: 100%; } }

/* the projected question: bigger text, the picture in the middle and large */
.stage-q { font-size: clamp(1.9rem, 4.6vw, 3.6rem); padding: var(--space-5); }
.stage-image { height: clamp(220px, 46vh, 600px); width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; box-shadow: var(--shadow-2); }
.stage-reading .stage-image, .stage-reveal .stage-image { height: clamp(200px, 40vh, 520px); }
.stage-mid { grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(110px, auto); justify-items: center; }
.stage-timer { width: 128px; height: 128px; font-size: 3rem; }
.stage-stat-n { font-size: 2.8rem; }
@media (max-width: 520px) { .stage-image { height: auto; max-height: 40vh; } }

/* profile: one folded row per setting */
.profile-settings { padding: 0; overflow: hidden; }
.profile-acc { display: block; border-bottom: 1px solid var(--border); }
.profile-acc:last-child { border-bottom: 0; }
.profile-acc > summary, .profile-acc-link { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; color: var(--text); text-decoration: none; }
.profile-acc > summary::-webkit-details-marker { display: none; }
.profile-acc > summary:hover, .profile-acc-link:hover { background: var(--surface-2); }
.profile-acc-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--surface-2); font-size: 1.2rem; }
.profile-acc-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.profile-acc-text .muted { font-size: var(--fs-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-acc-chev { font-size: 1.6rem; color: var(--text-muted); transition: transform var(--dur) ease; }
.profile-acc[open] .profile-acc-chev { transform: rotate(90deg); }
.profile-acc[open] > summary { background: var(--surface-2); }
.profile-acc-body { padding: var(--space-4); border-top: 1px solid var(--border); }
.profile-form { scroll-margin-top: 124px; }

/* ads: nothing and no space while off; a small labelled box at the bottom of a page while on */
.ad-slot { display: none; }
.ad-slot[data-ad-active="true"] { display: block; width: min(100%, 728px); margin: var(--space-4) auto 0; padding-top: var(--space-1); border-top: 1px solid var(--border); }
.ad-label { display: block; font-size: 0.7rem; color: var(--text-muted); text-align: center; letter-spacing: 0.05em; }
.ad-dev { display: grid; place-items: center; min-height: 90px; border: 1px dashed var(--border-strong); border-radius: var(--radius-s); color: var(--text-muted); font-size: var(--fs-0); background: var(--surface-2); }
.ad-fake { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.72); }
.ad-fake-card { width: min(100%, 420px); padding: var(--space-5); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-3); }
.ad-fake-art { font-size: 3.5rem; }
.ad-fake-count { font-size: 2.4rem; font-weight: var(--w-heavy); color: var(--c-orange-700); }
@media (prefers-reduced-motion: reduce) { .start-ready .btn-primary { animation: none; } }

/* poses on the final board (decision 56): a badge with the picked pose, and my own character on my phone */
.fb-av { position: relative; }
.fb-av[data-pose]::after, .react-me[data-pose]::after {
  content: attr(data-pose); position: absolute; right: -6px; bottom: 2px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); font-size: 1rem; line-height: 1;
}
.fb-grid .fb-av[data-pose]::after { width: 22px; height: 22px; font-size: 0.75rem; right: -8px; bottom: -4px; }
.react-me { position: relative; display: inline-block; min-height: 130px; line-height: 0; }
.react-note { min-height: 1.4em; }
.pose-btn[aria-pressed="true"] { border-color: var(--c-orange); box-shadow: 0 0 0 2px var(--c-orange); }
/* animations off (Windows "animation effects" off / reduced motion): the pose still shows, standing still */
@media (prefers-reduced-motion: reduce) {
  .paperdoll.pd-pose-jump .pd-arm-l, .paperdoll.pd-pose-cheer .pd-arm-l { transform: rotate(150deg) !important; }
  .paperdoll.pd-pose-jump .pd-arm-r, .paperdoll.pd-pose-cheer .pd-arm-r { transform: rotate(-150deg) !important; }
  .paperdoll.pd-pose-jump .pd-body { transform: translateY(-8px) !important; }
  .paperdoll.pd-pose-dance .pd-body { transform: rotate(8deg) !important; }
  .paperdoll.pd-pose-dance .pd-arm-l { transform: rotate(40deg) !important; }
  .paperdoll.pd-pose-dance .pd-arm-r { transform: rotate(-40deg) !important; }
  .paperdoll.pd-pose-wave .pd-arm-r { transform: rotate(-130deg) !important; }
  .react-me.pose-spin, .fb-av.pose-spin { transform: rotate(-12deg); }
}

/* ================= co-op raid battle scene (decision 56): a small game world drawn in code ================= */
.raid-scene { position: relative; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "head side" "field side" "castle side"; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-l); color: #fff; background: #1e1b4b; border: 1px solid #2e2766; overflow: hidden; }
.raid-scene.raid-defense { background: #14314f; border-color: #1e3a5f; }
.raid-compact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "field" "castle"; padding: var(--space-2); gap: var(--space-2); border-radius: var(--radius-m); }
.raid-head { grid-area: head; display: flex; align-items: center; gap: var(--space-3); }
.raid-hp-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.raid-boss-name { font-weight: 700; font-size: var(--fs-0); letter-spacing: 0.04em; color: #fde68a; }
.raid-timer { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; line-height: 1; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.raid-compact .raid-timer { font-size: 1.2rem; padding: 4px 10px; }
.raid-timer-low { color: #fecaca; background: rgba(220, 38, 38, 0.5); animation: raid-blink 1s infinite; }
.raid-hits { font-weight: 600; opacity: 0.85; white-space: nowrap; }
.raid-compact .raid-hits { display: none; }
.raid-bar { position: relative; height: 26px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 0.35); overflow: hidden; }
.raid-bar-castle { grid-area: castle; }
.raid-compact .raid-bar { height: 20px; }
.raid-bar-fill { position: absolute; inset: 0 auto 0 0; background: #ef4444; transition: width 0.5s ease-out; }
.raid-bar-hp .raid-bar-fill { background: linear-gradient(180deg, #f87171, #dc2626); }
.raid-bar-castle .raid-bar-fill { background: linear-gradient(180deg, #4ade80, #16a34a); transition: width 0.25s linear; }
.raid-castle-low .raid-bar-castle .raid-bar-fill { background: #ef4444; }
.raid-bar-text { position: relative; display: block; text-align: center; line-height: 22px; font-weight: 700; font-size: var(--fs-0); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.raid-compact .raid-bar-text { line-height: 16px; font-size: 0.75rem; }

/* the field: sky, ground, the boss on the right, the heroes on the left (defense: the castle behind them) */
.raid-field { grid-area: field; position: relative; height: clamp(280px, 50vh, 480px); border-radius: var(--radius-m); overflow: hidden; }
.raid-compact .raid-field { height: 210px; }
.raid-sky { position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, #312e81 0%, #6d28d9 70%, #a855f7 100%); }
.raid-ground { position: absolute; inset: 62% 0 0 0; background: linear-gradient(180deg, #44403c 0%, #292524 100%); border-top: 3px solid #1c1917; }
.raid-ground::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(0, 0, 0, 0.18) 60px 64px); }
.raid-defense .raid-sky { background: linear-gradient(180deg, #38bdf8 0%, #7dd3fc 70%, #bae6fd 100%); }
.raid-defense .raid-ground { background: linear-gradient(180deg, #4d7c0f 0%, #365314 100%); border-top-color: #3f6212; }
.raid-rage .raid-sky { background: linear-gradient(180deg, #450a0a 0%, #991b1b 70%, #dc2626 100%); transition: background 1s; }
.raid-heroes, .raid-fx { position: absolute; inset: 0; pointer-events: none; }
.raid-fx { z-index: 40; }

/* the boss */
.raid-boss { position: absolute; right: 3%; bottom: 8%; z-index: 5; width: clamp(170px, 30%, 320px); animation: raid-float 3s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)); user-select: none; }
.raid-compact .raid-boss { width: 40%; right: 2%; }
.raid-defense .raid-boss { right: auto; left: 62%; width: clamp(140px, 24%, 260px); transition: left 1s linear; }
.raid-compact.raid-defense .raid-boss { width: 32%; }
.boss-svg { display: block; width: 100%; height: auto; overflow: visible; }
.boss-svg .boss-wings, .boss-svg .boss-arm-l, .boss-svg .boss-arm-r, .boss-svg .boss-head { transform-box: fill-box; }
.boss-svg .boss-wings { transform-origin: center 70%; animation: boss-flap 1.6s ease-in-out infinite; }
.boss-svg .boss-arm-r { transform-origin: 30% 10%; animation: boss-swing 2.4s ease-in-out infinite; }
.boss-svg .boss-head { transform-origin: 50% 90%; animation: boss-nod 3s ease-in-out infinite; }
.raid-rage .raid-boss { filter: drop-shadow(0 0 20px rgba(248, 113, 113, 0.95)); animation-duration: 1.2s; }
.raid-rage .boss-pupil { fill: #dc2626; }
.raid-boss-hit .boss-svg { animation: raid-hurt 0.35s ease-out; }
.raid-boss-attack .boss-svg { animation: boss-lunge 0.5s ease-in-out; }
.raid-boss-down { animation: raid-down 1.2s forwards; }

/* the castle (defense) */
.raid-castle { position: absolute; left: 1%; bottom: 6%; z-index: 4; width: clamp(130px, 21%, 230px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); }
.raid-compact .raid-castle { width: 28%; }
.castle-svg { display: block; width: 100%; height: auto; overflow: visible; }
.castle-cracks, .castle-fire { display: none; }
.raid-castle[data-level="1"] .castle-cracks-1, .raid-castle[data-level="2"] .castle-cracks-1, .raid-castle[data-level="2"] .castle-cracks-2,
.raid-castle[data-level="3"] .castle-cracks, .raid-castle[data-level="3"] .castle-fire { display: inline; }
.castle-svg .castle-flag { transform-box: fill-box; transform-origin: left center; animation: castle-flag 1.2s ease-in-out infinite; }
.castle-svg .castle-fire { animation: raid-blink 0.5s infinite; }
.raid-castle-shake { animation: raid-shake 0.35s ease-in-out 2; }

/* the heroes: every player's own drawn character */
.raid-hero { position: absolute; transform: translate(-50%, -100%) scale(var(--s, 1)); transform-origin: 50% 100%; display: flex; flex-direction: column-reverse; align-items: center; animation: hero-in 0.5s ease-out both; }
.raid-hero::before { content: ""; position: absolute; bottom: -4px; left: 50%; width: 70%; height: 10px; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
.raid-doll { position: relative; display: block; line-height: 0; transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease; }
.raid-tag { max-width: 90px; margin-bottom: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-hero-me .raid-tag { background: var(--c-orange); }
.raid-hero-me::before { background: rgba(249, 115, 22, 0.55); box-shadow: 0 0 12px rgba(249, 115, 22, 0.9); }
.raid-hero-hot .raid-doll::after { content: "\1F525"; position: absolute; top: -6px; right: -8px; font-size: 1rem; line-height: 1; animation: raid-blink 0.8s infinite; }
.raid-hero-attack .raid-doll { animation: hero-lunge 0.45s ease-out; }
.raid-ko-stars { position: absolute; top: -4px; left: 50%; display: none; transform: translateX(-50%); font-size: 1.1rem; line-height: 1; animation: ko-spin 1s linear infinite; }
.raid-hero-ko .raid-doll { transform: rotate(-80deg) translate(-20%, 20%); filter: grayscale(1); opacity: 0.6; }
.raid-hero-ko .raid-ko-stars { display: block; }
.raid-hero-ko .raid-tag { opacity: 0.6; }
.raid-more { position: absolute; left: 2%; bottom: 3%; z-index: 30; padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); font-size: 0.8rem; font-weight: 600; }
.raid-more:empty { display: none; }

/* the effects: bolts, sparks, the boss's claw, damage numbers */
.raid-shot { position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff 0 30%, #fde047 45%, #f97316 100%); box-shadow: 0 0 10px 3px rgba(253, 224, 71, 0.8); }
.raid-shot-1 { width: 24px; height: 24px; background: radial-gradient(circle, #fff 0 30%, #7dd3fc 50%, #2563eb 100%); box-shadow: 0 0 14px 5px rgba(125, 211, 252, 0.9); }
.raid-shot-2 { width: 32px; height: 32px; background: radial-gradient(circle, #fff 0 30%, #f0abfc 50%, #c026d3 100%); box-shadow: 0 0 20px 8px rgba(240, 171, 252, 0.95); }
.raid-spark { position: absolute; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); border: 4px solid #fde047; animation: spark 0.5s ease-out forwards; }
.raid-spark-1 { border-color: #7dd3fc; }
.raid-spark-2 { border-color: #f0abfc; border-width: 6px; }
.raid-slash { position: absolute; width: 70px; height: 70px; transform: translate(-50%, -50%) rotate(-30deg); border-radius: 50%; border-top: 7px solid #ef4444; border-right: 3px solid transparent; animation: slash 0.55s ease-out forwards; }
.raid-pop { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.6); animation: raid-pop 1.5s ease-out forwards; white-space: nowrap; }
.raid-pop small { font-size: 0.55em; color: #fde68a; }
.raid-pop em { font-style: normal; font-size: 0.45em; font-weight: 600; opacity: 0.9; }
.raid-crit-1 { color: #7dd3fc; font-size: clamp(1.8rem, 3.8vw, 2.8rem); }
.raid-crit-2 { color: #f0abfc; font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.raid-pop-me { color: #86efac; }
.raid-compact .raid-pop { font-size: 1.1rem; }
.raid-shake { animation: raid-shake 0.3s ease-in-out 2; }

/* the side panel on the projector: top damage */
.raid-side { grid-area: side; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.08); }
.raid-side h3 { margin: 0; font-size: var(--fs-1); }
.raid-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.raid-row { display: flex; align-items: center; gap: var(--space-2); padding: 4px 8px; border-radius: var(--radius-s); background: rgba(0, 0, 0, 0.2); }
.raid-row-ko { opacity: 0.5; }
.raid-rank { min-width: 1.4em; font-weight: 800; color: #fde68a; }
.raid-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.raid-streak { font-weight: 700; color: #fdba74; }
.raid-dmg { font-weight: 800; font-variant-numeric: tabular-nums; }
.raid-kos .muted { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 900px) { .raid-scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "field" "castle" "side"; } }

@keyframes boss-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.9) translateY(4px); } }
@keyframes boss-swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes boss-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes boss-lunge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-26%) scale(1.06); } }
@keyframes castle-flag { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.8); } }
@keyframes hero-in { from { opacity: 0; transform: translate(-50%, -140%) scale(var(--s, 1)); } to { opacity: 1; transform: translate(-50%, -100%) scale(var(--s, 1)); } }
@keyframes hero-lunge { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(24px) translateY(-8px) scale(1.08); } }
@keyframes ko-spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes spark { from { opacity: 1; width: 20px; height: 20px; } to { opacity: 0; width: 90px; height: 90px; } }
@keyframes slash { from { opacity: 1; transform: translate(-50%, -50%) rotate(-60deg) scale(0.6); } to { opacity: 0; transform: translate(-50%, -50%) rotate(40deg) scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .raid-boss, .boss-svg *, .raid-hero, .raid-hero-attack .raid-doll, .raid-ko-stars, .raid-shake, .raid-castle-shake, .raid-spark, .raid-slash, .castle-svg * { animation: none !important; }
  .raid-shot { display: none; }
}
html[data-q="low"] :is(.boss-svg *, .castle-svg *, .raid-hero) { animation: none; }

/* the raid sky: a moon and stars over the dragon, a sun and clouds over the castle */
.raid-sky::before { content: ""; position: absolute; top: 12%; left: 44%; width: 54px; height: 54px; border-radius: 50%; background: #fef3c7; box-shadow: 0 0 30px 8px rgba(254, 243, 199, 0.45); }
.raid-sky::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #fff 0 1.5px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px); background-size: 90px 70px, 53px 41px; background-position: 10px 8px, 30px 25px; opacity: 0.7; }
.raid-defense .raid-sky::before { left: auto; right: 8%; background: #fde047; box-shadow: 0 0 40px 14px rgba(253, 224, 71, 0.55); }
.raid-defense .raid-sky::after { inset: 14% auto auto 30%; width: 90px; height: 28px; border-radius: 999px; background: #fff; background-image: none; opacity: 0.9; box-shadow: 60px 22px 0 -4px #fff, 170px -6px 0 2px #fff, 250px 26px 0 -6px #fff; }
.raid-rage .raid-sky::before { background: #fca5a5; box-shadow: 0 0 40px 14px rgba(248, 113, 113, 0.6); }
.raid-compact .raid-sky::before { width: 32px; height: 32px; }
.raid-tag { font-size: 0.68rem; }

/* ================= map games (games/map_quest, decision 58) ================= */
.mode-map_run { --mode: #0ea5e9; }
.mode-map_egg { --mode: #eab308; }
.mode-map_treasure { --mode: #b45309; }
.mq-view { position: relative; width: 100%; line-height: 0; background: #1f1a26; border-radius: var(--radius-m); overflow: hidden; touch-action: none; }
.mq-follow { height: min(58vh, 520px); }
.mq-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }
.mq-fit .mq-canvas { height: auto; }
.mq-stage { position: relative; }
.mq-stage-big { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-2); }
.mq-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, 0.45); z-index: 5; line-height: normal; }
.mq-play { display: flex; flex-direction: column; gap: var(--space-2); }
.mq-hud { display: flex; flex-direction: column; gap: 6px; }
.mq-run-top, .mq-egg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mq-timer { margin-left: auto; min-width: 2.4em; text-align: center; padding: 2px 10px; border-radius: 999px; background: var(--text); color: var(--surface); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.mq-egg-top .mq-timer { margin-left: 0; }
.mq-lives { font-size: 1rem; }
.mq-run-q { font-size: clamp(1.05rem, 4.4vw, 1.4rem); font-weight: var(--w-strong); line-height: 1.35; }
.mq-run-hint { font-size: var(--fs-0); color: var(--text-muted); font-weight: 600; }
.mq-run-hint-big { font-size: var(--fs-2); text-align: center; color: var(--text); }
.mq-run-result { padding: 6px 12px; border-radius: var(--radius-s); font-weight: var(--w-strong); text-align: center; }
.mq-run-result.good { background: var(--ok-soft); color: var(--ok); }
.mq-run-result.bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.mq-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mq-legend .answer { min-height: 44px; padding: 6px 10px; font-size: var(--fs-0); }
.mq-team-count { padding: 2px 10px; border-radius: 999px; border: 2px solid var(--c); font-weight: var(--w-strong); background: var(--surface); }
.mq-team-count.mine { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.mq-actions { display: flex; justify-content: center; min-height: 56px; }
.mq-act { min-height: 56px; min-width: min(100%, 320px); font-size: var(--fs-2); }
.mq-hot { animation: start-glow 1.2s ease-in-out infinite; }
.mq-act-hint { align-self: center; }
.mq-emojis { display: flex; justify-content: center; gap: 6px; }
.mq-emoji { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 1.3rem; cursor: pointer; }
.mq-joy { position: absolute; left: 14px; bottom: 14px; z-index: 4; width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); border: 2px solid rgba(255, 255, 255, 0.55); touch-action: none; display: grid; place-items: center; }
.mq-joy-knob { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .mq-joy { display: none; } }
.mq-modal { position: absolute; inset: 0; z-index: 6; display: grid; align-items: end; padding: var(--space-2); background: rgba(15, 23, 42, 0.35); line-height: normal; }
.mq-q-card { display: flex; flex-direction: column; gap: var(--space-2); max-height: 100%; overflow: auto; padding: var(--space-3); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-3); }
.mq-q-duel { border: 3px solid #f97316; }
.mq-q-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mq-q-count { min-width: 2.2em; text-align: center; font-size: var(--fs-2); font-weight: var(--w-heavy); color: var(--c-orange-700); }
.mq-q-text { font-size: var(--fs-2); font-weight: var(--w-strong); text-align: center; }
.mq-q-card .question-image { max-height: 22vh; }
/* the teacher's projector */
.mq-thud { display: flex; flex-direction: column; gap: var(--space-3); }
.mq-banner { display: flex; align-items: center; gap: var(--space-4); }
.mq-banner .stage-q { flex: 1; margin: 0; }
.mq-q-image { max-height: 22vh; max-width: 30%; border-radius: var(--radius-m); border: 1px solid var(--border); background: #fff; object-fit: contain; }
.mq-reading { border-color: var(--border-strong); color: var(--text-muted); }
.mq-legend-big .answer { min-height: 72px; }
.mq-legend-cell { display: flex; flex-direction: column; gap: 4px; }
.mq-count { text-align: center; font-weight: var(--w-strong); }
.mq-teams { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.mq-team-card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); border: 3px solid var(--c, var(--border)); background: var(--surface); }
.mq-team-eggs { font-size: var(--fs-3); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.mq-center { --c: #f59e0b; }
.mq-top { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mq-top li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.mq-top .raid-rank { color: var(--c-orange-700); }
.mq-preview-box { display: grid; gap: var(--space-2); }
.mq-preview { width: 100%; height: auto; max-height: 260px; object-fit: contain; image-rendering: pixelated; border-radius: var(--radius-m); background: #1f1a26; }
@media (max-width: 560px) { .mq-banner { flex-direction: column; } .mq-q-image { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mq-hot { animation: none; } }
.mq-fit { background: transparent; display: flex; justify-content: center; }
.mq-fit .mq-canvas { border-radius: var(--radius-l); }
.mq-q-big { font-size: clamp(1.4rem, 3vw, 2.3rem); padding: var(--space-3) var(--space-4); }
.mq-live .stage-timer { width: 92px; height: 92px; font-size: 2.2rem; flex: 0 0 auto; }
.mq-legend-big .answer { min-height: 56px; }
.mq-live .mq-thud { gap: var(--space-2); }
/* Challenge: out of the game (decision 59) */
.arena-out { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.arena-out-title { margin: 0; font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: var(--w-heavy); color: var(--bad); }
/* map previews in the builder (decision 59): every map the game may pick */
.mq-previews { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mq-preview-item { margin: 0; display: grid; gap: 4px; }
.mq-preview-item figcaption { font-size: var(--fs-0); font-weight: 600; color: var(--text-muted); text-align: center; }
.mq-preview { image-rendering: auto; }
.mq-view { background: #2d3a4a; }

/* raid counter-attacks and big attacks (decision 59) */
.raid-bar-lag { position: absolute; inset: 0 auto 0 0; background: #fde68a; transition: width 0.9s ease-in 0.35s; }
.raid-fireball { position: absolute; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 40%, #fff7c2 0 18%, #fdba74 35%, #ef4444 70%, rgba(239, 68, 68, 0) 72%); box-shadow: 0 0 18px 8px rgba(249, 115, 22, 0.75); z-index: 41; }
.raid-rock { width: 26px; height: 22px; border-radius: 45% 55% 50% 40%; background: #8b7d6b; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.35); }
.raid-boom { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fff7c2 0 25%, #fb923c 45%, rgba(239, 68, 68, 0.6) 70%, transparent 72%); animation: raid-boom 0.6s ease-out forwards; z-index: 42; }
@keyframes raid-boom { to { width: 110px; height: 110px; opacity: 0; } }
.raid-ko-pop { color: #fca5a5; font-size: clamp(1.4rem, 3vw, 2rem); }
.raid-hero-knock .raid-doll { animation: hero-knock 0.55s ease-out; }
@keyframes hero-knock { 0% { transform: translateX(0); filter: none; } 25% { transform: translateX(-22px) translateY(-10px) rotate(-18deg); filter: brightness(1.6) saturate(0.4) sepia(1) hue-rotate(-40deg); } 100% { transform: translateX(0); filter: none; } }
.raid-hero-flinch .raid-doll { animation: hero-flinch 0.5s ease-out; }
@keyframes hero-flinch { 0%, 100% { transform: none; } 30% { transform: translateY(-14px) scale(0.94); } 60% { transform: translateY(0) scale(1.03); } }
.raid-flash::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 60px 20px rgba(239, 68, 68, 0.55); animation: raid-flash 0.5s ease-out forwards; z-index: 50; }
@keyframes raid-flash { from { opacity: 1; } to { opacity: 0; } }
.raid-boss-charge .boss-svg { animation: boss-charge 0.7s ease-in; }
@keyframes boss-charge { 0% { transform: none; filter: none; } 70% { transform: scale(1.12) translateY(-6px); filter: drop-shadow(0 0 22px rgba(253, 224, 71, 0.95)) brightness(1.25); } 100% { transform: scale(0.96) translateY(4px); filter: none; } }
.raid-wave { position: absolute; width: 40px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid rgba(196, 181, 253, 0.9); box-shadow: 0 0 20px rgba(167, 139, 250, 0.8); animation: raid-wave 0.9s ease-out forwards; z-index: 39; }
.raid-wave-rage { border-color: rgba(252, 165, 165, 0.95); box-shadow: 0 0 24px rgba(239, 68, 68, 0.9); }
@keyframes raid-wave { to { width: 1400px; height: 360px; opacity: 0; border-width: 1px; } }
.raid-debris { position: absolute; width: 10px; height: 8px; border-radius: 2px; background: #a8a29e; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25); animation: raid-debris 0.9s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; z-index: 41; }
@keyframes raid-debris { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.raid-arrow { width: 26px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #a16207 0 70%, #e5e7eb 70%); box-shadow: none; }
.raid-arrow.raid-shot-1, .raid-arrow.raid-shot-2 { height: 5px; box-shadow: 0 0 10px 3px rgba(125, 211, 252, 0.9); }
.raid-lightning { position: absolute; top: 0; width: 18px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fef9c3 20%, #fde047 60%, #ffffff); clip-path: polygon(40% 0, 70% 0, 50% 35%, 80% 35%, 30% 100%, 45% 50%, 15% 50%); animation: raid-zap 0.45s steps(3) forwards; z-index: 43; filter: drop-shadow(0 0 8px #fde047); }
@keyframes raid-zap { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 0; } }
.raid-rage .raid-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(252, 165, 165, 0.9) 0 1.5px, transparent 2.5px); background-size: 60px 70px; animation: raid-embers 3s linear infinite; opacity: 0.7; }
@keyframes raid-embers { from { background-position: 0 0; } to { background-position: 30px -140px; } }
@media (prefers-reduced-motion: reduce) {
  /* animations off: the effects still show, standing still, for the moment they last */
  .raid-boom, .raid-wave, .raid-debris, .raid-lightning, .raid-flash::after, .raid-rage .raid-field::after { animation: none !important; }
  .raid-boom { width: 90px; height: 90px; opacity: 0.85; }
  .raid-wave { width: 640px; height: 170px; opacity: 0.55; }
  .raid-debris { transform: translate(calc(var(--dx) / 2), calc(var(--dy) / 2)); }
  .raid-lightning { opacity: 0.9; }
  .raid-flash::after { opacity: 0.7; }
  .raid-hero-knock .raid-doll, .raid-hero-flinch .raid-doll, .raid-boss-charge .boss-svg { animation: none !important; }
}
/* the minimap on phones (decision 60) */
.mq-mini { position: absolute; top: 8px; right: 8px; z-index: 3; width: 128px; height: auto; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); image-rendering: pixelated; pointer-events: none; opacity: 0.95; }
@media (max-width: 400px) { .mq-mini { width: 104px; } }

/* ================= decision 61: waiting-room stage, game guides, home tiles, Mokiz World ================= */
.lobby-stage { position: relative; overflow: hidden; border-radius: var(--radius-l); border: 1px solid var(--border); background: color-mix(in srgb, #86efac 22%, var(--surface)); }
.lobby-stage-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: color-mix(in srgb, #4ade80 18%, var(--surface)); border-top: 1px solid color-mix(in srgb, #16a34a 18%, transparent); }
.lobby-walker { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; transition-property: transform; transition-timing-function: linear; will-change: transform; }
.lobby-char.lobby-flip { transform: scaleX(-1); }
.lobby-name { margin-top: -8px; padding: 0 8px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 0.78rem; font-weight: 600; }
.lobby-me { cursor: pointer; }
.lobby-me .lobby-name { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.lobby-pop .lobby-char { animation: lobby-pop 0.45s ease-out; }
.lobby-stage-projector .lobby-name { font-size: 0.95rem; }
@keyframes lobby-pop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lobby-pop .lobby-char { animation: none; } }

.guide-card { border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); padding: var(--space-2) var(--space-3); }
.guide-card summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; font-weight: var(--w-strong); font-size: var(--fs-2); }
.guide-icon { font-size: 1.6rem; }
.guide-goal { margin: var(--space-1) 0; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.guide-step { display: flex; align-items: center; gap: var(--space-2); }
.guide-step-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); font-size: 1.3rem; }
.guide-tip { margin: var(--space-2) 0 0; }
.guide-strip { grid-column: 1 / -1; display: grid; gap: var(--space-2); text-align: left; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.guide-steps-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-steps-row .guide-step { font-size: var(--fs-0); }
@media (max-width: 760px) { .guide-steps-row { grid-template-columns: 1fr 1fr; } }

.home-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.home-tile { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-1); transition: border-color var(--dur) ease, box-shadow var(--dur) ease; }
.home-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.home-tile > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.home-tile-icon { font-size: 2rem; }
@media (max-width: 560px) { .home-tiles { grid-template-columns: 1fr; } }
.step-row { justify-content: space-between; align-items: center; }

.world-hero .lobby-stage { width: 100%; }
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.world-zone { display: flex; flex-direction: column; gap: var(--space-1); }
.world-zone h3 { margin: 0; }
.world-zone p { margin: 0; flex: 1; }
.world-zone .chip { align-self: flex-start; }
.world-zone-icon { font-size: 2.2rem; }