/* ClassQuest "Ancients" theme — dark fantasy, gold frame, serif type */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Crimson+Pro:wght@400;500;600&display=swap');

/* New unique .cq-* components drive the Avatar tab only — no overrides of the
   existing app styles. The avatar tab root carries .theme-ancients. */
.theme-ancients {
  --cq-gold: #d6b86c;
  --cq-gold-dim: #8a7340;
  --cq-gold-glow: rgba(214,184,108,.35);
  --cq-ink: rgba(14,11,8,.80);
  --cq-ink-2: rgba(8,6,4,.92);
  --cq-text: #f1e7d0;
  --cq-muted: #b7a98a;
  --cq-blue-1: #2f8fd0;
  --cq-blue-2: #0b3453;
  --cq-hp: #c0392b; --cq-ap: #e0a52b; --cq-xp: #3a8fd6;
  --cq-font-display: 'Cormorant Garamond', Georgia, serif;
  --cq-font-body: 'Crimson Pro', Georgia, serif;
  --cq-panel-w: min(280px, 21vw);
  --cq-panel-w-r: min(340px, 25vw);
  color: var(--cq-text);
  font-family: var(--cq-font-body);
}

/* ---------- Stage: full-bleed scene ---------- */
.cq-stage {
  position: relative; height: calc(100vh - 110px); min-height: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,240,210,.18), transparent 55%),
    linear-gradient(180deg, #6f8fb5 0%, #3f5b7a 40%, #1e2a35 100%);
}
.cq-stage__bg {            /* optional scenic image (CC0) supplied by teacher */
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: saturate(.9) brightness(.85);
  z-index: 0;
}
.cq-stage__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.65) 100%);
  z-index: 3;
}
.cq-stage__viewer { position: absolute; inset: 0; z-index: 2; }   /* AvatarViewer mounts here */
.cq-stage__viewer canvas { width: 100%; height: 100%; display: block; }
.cq-pedestal {
  position: absolute; left: 50%; bottom: 8%; width: 46%; height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(120,110,95,.75) 0%, rgba(80,72,62,.55) 55%, transparent 72%);
  filter: blur(1px); pointer-events: none;
  z-index: 1;               /* under the avatar, above the backdrop */
}

/* Layout grid over the stage */
.cq-grid {
  position: absolute; inset: 0; display: grid; gap: 24px; padding: 64px 24px 24px;
  grid-template-columns: var(--cq-panel-w) 1fr var(--cq-panel-w-r);
  grid-template-rows: auto 1fr auto; pointer-events: none;
  z-index: 4; /* above the 3D canvas + vignette so panels/buttons stay clickable */
}
.cq-grid > * { pointer-events: auto; }
.cq-grid__left  { grid-area: 1 / 1 / 4 / 2; align-self: start; }
.cq-grid__right { grid-area: 1 / 3 / 4 / 4; align-self: start; }
.cq-grid__top   { grid-area: 1 / 2 / 2 / 3; justify-self: center; }
.cq-grid__bottom{ grid-area: 3 / 2 / 4 / 3; justify-self: center; }
.cq-grid__left, .cq-grid__right { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.cq-grid__left::-webkit-scrollbar, .cq-grid__right::-webkit-scrollbar { width: 8px; }
/* ---------- Ornate panel ---------- */
.cq-panel {
  position: relative; padding: 28px 24px;
  background: linear-gradient(180deg, var(--cq-ink), var(--cq-ink-2));
  border: 1px solid rgba(214,184,108,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
/* gold filigree line + diamonds at the top */
.cq-panel::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cq-gold) 20%, var(--cq-gold) 80%, transparent);
}
.cq-panel::after {
  content: ""; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--cq-gold); box-shadow: 0 0 8px var(--cq-gold-glow);
}

.cq-crest {
  width: 120px; height: 120px; margin: 4px auto 8px; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(214,184,108,.18), transparent 70%);
  filter: drop-shadow(0 0 10px var(--cq-gold-glow));
  font-size: 64px;
}
.cq-name {
  font-family: var(--cq-font-display); font-weight: 600; font-size: 28px;
  text-align: center; letter-spacing: .5px; margin: 0 0 12px;
}
.cq-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 18px; }
.cq-kv dt { color: var(--cq-text); }
.cq-kv dd { margin: 0; text-align: right; color: var(--cq-gold); }

.cq-h { font-family: var(--cq-font-display); font-weight: 600; font-size: 22px;
        text-align: center; margin: 22px 0 12px; }
.cq-lead { text-align: center; font-size: 17px; color: var(--cq-text); line-height: 1.45; }

/* ---------- Medallions ---------- */
.cq-medallions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; margin-top: 8px; }
.cq-medal { text-align: center; position: relative; cursor: help; }
.cq-medal__ring {
  width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; position: relative;
  border: 2px solid var(--cq-gold);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.6), inset 0 0 0 5px var(--cq-gold-dim), 0 0 12px var(--cq-gold-glow);
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), transparent 60%), #14100c;
  display: grid; place-items: center;
}
.cq-medal__label { font-family: var(--cq-font-display); font-weight: 700; font-size: 15px; letter-spacing: 1px; }
.cq-medal__value { font-size: 18px; margin-top: 3px; }
.cq-medal--star::before { content: "★"; position: absolute; top: -14px; left: 50%;
                          transform: translateX(-50%); color: var(--cq-gold); font-size: 14px; }
/* small "bracket" flourish above each ring, like BG3 */
.cq-medal__ring::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 8px; border: 1px solid var(--cq-gold-dim); border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
/* ---------- Bars ---------- */
.cq-bar { margin: 10px 0; font-size: 15px; }
.cq-bar__head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.cq-bar__track { height: 8px; background: #0a0806; border: 1px solid var(--cq-gold-dim); }
.cq-bar__fill { height: 100%; background: var(--fill, var(--cq-gold));
                box-shadow: 0 0 8px var(--fill, var(--cq-gold)); transition: width .4s ease; }
.cq-bar--hp .cq-bar__fill { --fill: var(--cq-hp); }
.cq-bar--ap .cq-bar__fill { --fill: var(--cq-ap); }
.cq-bar--xp .cq-bar__fill { --fill: var(--cq-xp); }

/* ---------- Power slots ("Prepared Spells") ---------- */
.cq-slots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 14px;
            border: 1px solid var(--cq-gold-dim); outline: 1px solid rgba(0,0,0,.6); outline-offset: -3px; }
.cq-slot {
  position: relative; width: 56px; height: 56px; display: grid; place-items: center; font-size: 26px;
  background: radial-gradient(circle, #2a1e12, #0d0906); border: 1px solid var(--cq-gold);
  box-shadow: inset 0 0 12px rgba(0,0,0,.8); cursor: pointer;
}
.cq-slot:hover { box-shadow: 0 0 12px var(--cq-gold-glow), inset 0 0 12px rgba(0,0,0,.8); }
.cq-slot[disabled] { opacity: .4; cursor: not-allowed; }
.cq-slot__cost { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: var(--cq-gold);
                 font-family: var(--cq-font-display); }
.cq-slot--locked { filter: grayscale(.85) brightness(.7); }
.cq-slot__lock { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #fff;
                 background: #7a1f1a; border: 1px solid #e8b923; padding: 0 3px; border-radius: 6px;
                 font-family: var(--cq-font-display); }
.cq-slot--locked[disabled] { opacity: .65; }

/* ---------- Dev Preview-level slider ---------- */
.cq-preview { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0 0 10px;
              font-size: 12px; color: var(--cq-muted); letter-spacing: .06em; text-transform: uppercase; }
.cq-preview input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--cq-gold, #e8b923); }
.cq-preview span { font-family: var(--cq-font-display); color: var(--cq-gold, #e8b923); min-width: 20px; text-align: right; }

/* ---------- Stat stepper (teacher only) ---------- */
.cq-stepper { display: flex; flex-direction: column; gap: 8px; font-size: 18px; }
.cq-stepper__row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: 8px; }
.cq-stepper__row > span:first-child { flex-basis: 100%; min-width: 0; } /* stat label on its own line */
.cq-stepper__delta { min-width: 30px; text-align: right; font-family: var(--cq-font-display); }
.cq-round {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--cq-gold);
  background: #14100c; color: var(--cq-gold); font-size: 15px; line-height: 1; cursor: pointer;
}
.cq-round:hover { box-shadow: 0 0 8px var(--cq-gold-glow); }
.cq-round--add { width: auto; padding: 0 8px; border-radius: 999px; font-size: 12px; letter-spacing: .3px; }
input.cq-stepper__input {
  width: 56px; background: #0a0806; color: var(--cq-text);
  border: 1px solid var(--cq-gold-dim); font-family: var(--cq-font-body);
  font-size: 15px; padding: 2px 5px; text-align: right;
}
.cq-stepper__input:focus-visible { outline: 2px solid var(--cq-gold); outline-offset: 1px; }

/* ---------- Banner ("Level Up!") ---------- */
.cq-banner {
  /* Sits high, near the top edge of the stage: the grid already
     clears the app chrome with 64px of top padding, so the ribbon
     is pulled up into it. -24px still leaves the medallion (which
     pokes 16px above the ribbon) 24px clear of the edge. */
  position: relative; padding: 8px 44px 8px; margin-top: -24px; text-align: center;
  font-family: var(--cq-font-display); font-size: 18px; font-weight: 600; letter-spacing: .4px;
}
/* Ribbon backdrop lives on a pseudo-element so the trapezoid clip-path no
   longer slices the emblem (medallion) that pokes above the top edge. */
.cq-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #1a140d, #0a0705);
  border-bottom: 2px solid var(--cq-gold);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
.cq-banner > span { position: relative; z-index: 1; }
.cq-banner__emblem {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--cq-gold);
  background: #0a0705; display: grid; place-items: center; font-size: 15px;
  z-index: 2;
}
.cq-banner--levelup { animation: cq-pulse 1.2s ease-in-out infinite; }
@keyframes cq-pulse { 50% { box-shadow: 0 0 24px var(--cq-gold-glow); } }

/* ---------- Buttons ---------- */
.cq-btn {
  font-family: var(--cq-font-display); font-weight: 600; font-size: 20px; color: #f4f0e6;
  padding: 10px 56px; border: 1px solid var(--cq-gold); cursor: pointer;
  background: linear-gradient(180deg, var(--cq-blue-1), var(--cq-blue-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 16px rgba(47,143,208,.45);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.cq-btn:hover { filter: brightness(1.15); }
.cq-btn--ghost { background: linear-gradient(180deg, #2a2118, #120d09); box-shadow: none; }
.cq-btn--sm { font-size: 16px; padding: 6px 28px; }
.cq-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Top toolbar (Select Student, Login, Theme…) */
.cq-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 24px;
              background: var(--cq-ink-2); border-bottom: 1px solid var(--cq-gold-dim); }
.cq-toolbar label { color: var(--cq-gold); font-family: var(--cq-font-display); font-weight: 600; }
.cq-select { background: #14100c; color: var(--cq-text); border: 1px solid var(--cq-gold-dim);
             font-family: var(--cq-font-body); font-size: 16px; padding: 6px 10px; }
.cq-select option { background: #14100c; }

/* ---------- Tooltip ---------- */
.cq-tip {
  position: fixed; z-index: 2400; width: 340px; padding: 18px 20px;
  background: linear-gradient(180deg, rgba(30,22,14,.97), rgba(12,9,6,.99));
  border: 1px solid var(--cq-gold); box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font-size: 16px; line-height: 1.45; pointer-events: none;
  /* The tip's backdrop is dark in BOTH themes, but the element is appended to
     <body>, so it inherits the page's text colour — which is near-black in the
     light theme, making the text unreadable. Pin it to the theme's parchment
     (the dark mode text colour) with a literal fallback, because the .theme-
     ancients custom properties are not in scope outside the Avatar tab. */
  color: var(--cq-text, #f1e7d0);
}
.cq-tip__title { font-family: var(--cq-font-display); font-size: 22px; font-weight: 600; }
.cq-tip__sub { color: var(--cq-gold); font-size: 14px; margin-bottom: 10px; }
.cq-tip::after { content: ""; position: absolute; right: -1px; top: -1px; width: 0; height: 0;
                 border-top: 46px solid var(--cq-gold); border-left: 46px solid transparent; opacity: .9; }
/* ---------- Responsive fallback (phones only — tablets keep the side-by-side layout) ---------- */
@media (max-width: 767px) {
  .cq-stage { height: auto; min-height: 0; }
  .cq-grid { position: static; grid-template-columns: 1fr; grid-template-rows: none; }
  .cq-grid__left, .cq-grid__right, .cq-grid__top, .cq-grid__bottom { grid-area: auto; max-height: none; overflow: visible; }
  .cq-stage__viewer { position: relative; height: 420px; order: -1; }
}

/* Tablet (iPad portrait → small landscape): keep the 3-column side-by-side
   character sheet instead of stacking, but compress it so the panels still fit
   the narrower portrait width — matching the landscape arrangement. */
@media (min-width: 768px) and (max-width: 1100px) {
  .theme-ancients {
    --cq-panel-w: min(300px, 30vw);
    --cq-panel-w-r: min(360px, 34vw);
  }
  .cq-grid { gap: 14px; padding: 40px 14px 14px; }
  .cq-panel { padding: 20px 16px; }
  .cq-crest { width: 96px; height: 96px; font-size: 50px; }
  .cq-name { font-size: 23px; }
  .cq-medallions { gap: 14px 8px; }
  .cq-medal__ring { width: 56px; height: 56px; }
  .cq-medal__value { font-size: 18px; }
  .cq-slot { width: 48px; height: 48px; font-size: 22px; }
}

/* Keep wide action buttons inside the panels (never overflow the panel). */
.cq-grid__left .cq-btn,
.cq-grid__right .cq-btn { width: 100%; padding: 6px 10px; white-space: normal; }

/* ---------- Ancients extras (a11y + layout helpers) ---------- */
.theme-ancients button:focus-visible,
.theme-ancients select:focus-visible,
.cq-slot:focus-visible,
.cq-round:focus-visible {
  outline: 2px solid var(--cq-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--cq-gold-glow);
}
.theme-ancients .cq-toolbar .cq-btn { margin: 0; }
.cq-card-shell { display: block; }
.cq-empty { padding: 40px 20px; text-align: center; font-size: 20px; color: var(--cq-text); }
.cq-empty .cq-btn { margin-top: 18px; }
.cq-slot--title { font-size: 11px; color: var(--cq-muted); text-align: center; margin-top: 4px; }
.cq-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cq-badge {
  font-size: 13px; padding: 3px 8px; border: 1px solid var(--cq-gold-dim);
  background: rgba(214,184,108,.08); border-radius: 999px;
}
.cq-badge--none { opacity: .5; border-style: dashed; }
.cq-pets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.cq-pet-chip {
  display: inline-flex; gap: 6px; align-items: center; font-size: 16px;
  padding: 4px 10px; border: 1px solid var(--cq-gold-dim); background: rgba(0,0,0,.25);
}
.cq-pet-chip--active { border-color: var(--cq-gold); box-shadow: 0 0 8px var(--cq-gold-glow); }
.cq-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.cq-class-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0 2px; }
.cq-class-btn {
  font-family: var(--cq-font-body); font-size: 15px; color: var(--cq-text);
  padding: 6px 12px; cursor: pointer;
  background: rgba(0,0,0,.3); border: 1px solid var(--cq-gold-dim);
}
.cq-class-btn.active { border-color: var(--cq-gold); color: var(--cq-gold);
                       box-shadow: inset 0 0 0 1px var(--cq-gold); }

/* ---------- Student view (read-only mirror of this tab) ---------- */
/*
 * gamification/student-login.js re-uses the whole .cq-* component set above, so
 * a student's screen and the teacher's Gamified ▸ Avatar tab stay one design.
 * The additions below are the ones that modal/shell context forced:
 */
/* The two log/endorsement panels that sit below the stage in the student view. */
.cq-student-extra {
  display: grid; gap: 24px; padding: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start;
}
/*
 * Everything inside .modal-content also matches the app shell's own rules:
 *   • `.modal-content h3 { color: var(--text-primary) }` beat the inherited ink
 *     palette, so .cq-h headings rendered near-BLACK on the ink panels in the
 *     light theme,
 *   • `html[data-theme="light"] input/select { background; color }` (a tag +
 *     attribute rule) beat the .cq-* classes, turning the endorsement box into a
 *     white field on a dark panel,
 * both are fixed by re-stating the Ancients palette one level deeper. The
 * teacher's tab needs none of this — it is not inside a modal.
 */
.modal-content .cq-h { color: var(--cq-text); }
.modal-content .cq-select,
.modal-content .cq-input {
  background: #14100c; color: var(--cq-text); border: 1px solid var(--cq-gold-dim);
  font-family: var(--cq-font-body); font-size: 16px; padding: 6px 10px;
}
.modal-content .cq-input::placeholder { color: var(--cq-muted); }
/* Power slots shown to a student are a trophy case, not buttons. */
.cq-slot--static { cursor: default; }
.cq-slot--static:hover { box-shadow: inset 0 0 12px rgba(0,0,0,.8); }
@media (max-width: 767px) { .cq-student-extra { grid-template-columns: 1fr; padding: 16px; gap: 16px; } }
/* ---------- Student sub-tabs: Character · Quests · Shop · Boss Battle · Leaderboard ----------
   The same sub-tab idea as the teacher's Classroom tab, but down here the panes
   MIRROR class state — only the Shop acts on anything. The nav sits under the
   stage card so the character stays the identity of the screen. */
.cq-student-nav {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 18px auto 2px; max-width: 1240px;
}
.cq-student-nav__btn {
  font-family: var(--cq-font-display); font-size: 15px; letter-spacing: .02em;
  padding: 9px 16px; cursor: pointer; color: var(--cq-text);
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));
  border: 1px solid var(--cq-gold-dim);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.cq-student-nav__btn:hover { border-color: var(--cq-gold); color: #fff; }
.cq-student-nav__btn.is-active {
  border-color: var(--cq-gold); color: #fff;
  box-shadow: 0 0 12px var(--cq-gold-glow), inset 0 0 18px rgba(214,184,108,.16);
}
.cq-student-nav__btn:focus-visible { outline: 2px solid var(--cq-gold); outline-offset: 2px; }
.cq-student-pane { display: block; }
.cq-student-pane.hidden { display: none; }
/*
 * ---------- Focus mode: the whole-class pause, as a STUDENT sees it ----------
 * gamification/student-login.js renders this banner as the first thing inside
 * .cq-card-shell whenever the class is locked (it polls its own lock state — see
 * the FOCUS POLL there, and CLASS FOCUS LOCK in Code.gs). It is Ancients-skinned
 * on purpose: student-login.js washes the app behind the overlay dark, and a
 * light-mode classroom must not wash the warning out. Same warning red as the
 * teacher's failed-review row (.cq-review__row.is-failed).
 */
.cq-focus-lock {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; margin: 0 0 12px;
  background: linear-gradient(180deg, rgba(96, 26, 18, .94), rgba(44, 11, 7, .96));
  border: 1px solid #c8746a; border-left: 6px solid #c8746a;
  color: var(--cq-text); font-family: var(--cq-font-body); font-size: 17px;
  box-shadow: 0 0 18px rgba(200, 116, 106, .35);
}
.cq-focus-lock__icon { font-size: 22px; line-height: 1.1; }
.cq-focus-lock__note { color: var(--cq-muted); font-size: 14px; margin-top: 3px; }

/* ---------- Calm empty states (a student should never meet a blank box) ---------- */
.cq-empty { text-align: center; padding: 26px 16px; }
.cq-empty__icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.cq-empty__title { font-family: var(--cq-font-display); font-size: 19px; margin: 8px 0 4px; color: var(--cq-text); }
.cq-empty__line { font-size: 14px; color: var(--cq-muted); margin: 0; }

.cq-sub {
  font-family: var(--cq-font-display); font-size: 15px; margin: 16px 0 6px;
  color: var(--cq-gold); text-transform: uppercase; letter-spacing: .08em;
}
.cq-list { margin: 0 0 0 18px; font-size: 15px; color: var(--cq-text); line-height: 1.5; }

/* ---------- Bars (boss HP, team HP) ----------
   NOTE: these are a DIFFERENT structure from the avatar card's bars — a bare track
   inside a .cq-bar-row (label + track + value), not a .cq-bar wrapper around a
   .cq-bar__head + .cq-bar__track. They are scoped to .cq-bar-row on purpose: the
   unscoped rules here used to win over the avatar card's .cq-bar (they come later
   in the file), and their `height: 14px; overflow: hidden` clipped the avatar
   card's HP/AP/XP labels so the text inside those bars was invisible. */
.cq-bar-row { display: grid; grid-template-columns: 104px 1fr auto; gap: 10px; align-items: center; margin: 6px 0; }
.cq-bar-label { font-size: 12px; color: var(--cq-muted); text-transform: uppercase; letter-spacing: .06em; }
.cq-bar-row .cq-bar { display: block; height: 14px; background: rgba(0,0,0,.55); border: 1px solid var(--cq-gold-dim); overflow: hidden; }
.cq-bar-row .cq-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, #8f2f2f, #d95b5b); }
.cq-bar-row .cq-bar--hp .cq-bar__fill { background: linear-gradient(90deg, #2f6b3a, #56c46d); }
.cq-bar-row .cq-bar--boss .cq-bar__fill { background: linear-gradient(90deg, #6b2f6b, #c46ec4); }
.cq-bar-val { font-size: 12px; color: var(--cq-text); white-space: nowrap; }

/* ---------- Shop (the one interactive pane) ---------- */
.cq-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cq-shop-item {
  padding: 12px; border: 1px solid var(--cq-gold-dim); background: rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 6px;
}
.cq-shop-item.is-locked { opacity: .72; }
.cq-shop-item__top { display: flex; gap: 8px; align-items: center; }
.cq-shop-item__icon { font-size: 22px; line-height: 1; }
.cq-shop-item__name { font-weight: 700; font-size: 15px; color: var(--cq-text); }
.cq-shop-item__desc { font-size: 13px; color: var(--cq-muted); margin: 0; flex: 1; }
.cq-shop-item__foot { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.cq-shop-item__price { color: var(--cq-gold); font-weight: 700; }
.cq-shop-item__owned { color: var(--cq-muted); }
.cq-shop-item__why { font-size: 12px; color: var(--cq-muted); margin: 0; font-style: italic; }

/* ---------- 🎒 Bag (what you already own, and what you can do with it) ---------- */
.cq-bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cq-bag-item {
  padding: 12px; border: 1px solid var(--cq-gold-dim); background: rgba(0,0,0,.3);
  display: flex; gap: 10px; align-items: flex-start;
}
/* The one that is ON gets a gold edge, so "which of these am I wearing?" is answerable
   at a glance instead of by reading every tile. */
.cq-bag-item.is-on { border-color: var(--cq-gold); background: rgba(214,184,108,.10); }
.cq-bag-item__art {
  flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center;
  border: 1px solid rgba(214,184,108,.22); background: rgba(255,255,255,.04);
  border-radius: 8px; overflow: hidden;
}
.cq-bag-item__ph { font-size: 30px; line-height: 1; }
.cq-bag-item__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.cq-bag-item__name { font-weight: 700; font-size: 15px; color: var(--cq-text); }
.cq-bag-item__meta { font-size: 13px; color: var(--cq-muted); }
.cq-bag-item__why { font-size: 12px; color: var(--cq-muted); font-style: italic; margin: 0; }
.cq-bag-item__body .cq-btn { align-self: flex-start; }

/* ---------- Class leaderboard ---------- */
.cq-lb { width: 100%; border-collapse: collapse; font-size: 15px; }
.cq-lb th, .cq-lb td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(214,184,108,.18); color: var(--cq-text); }
.cq-lb th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cq-muted); }
.cq-lb tr.is-me { background: rgba(214,184,108,.14); }
.cq-lb-name { font-weight: 700; }
.cq-you {
  font-size: 11px; padding: 1px 7px; border: 1px solid var(--cq-gold);
  border-radius: 999px; color: var(--cq-gold);
}


/* ---------- Quest goals + the class progress bar ---------- */
.cq-bar-row .cq-bar--quest .cq-bar__fill { background: linear-gradient(90deg, #b8860b, #d6b86c); }
.cq-goal { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.cq-goal__tick {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; border-radius: 50%;
  border: 1px solid var(--cq-gold-dim); color: var(--cq-muted);
}
.cq-goal.is-done { color: var(--cq-muted); }
.cq-goal.is-done .cq-goal__tick {
  border-color: var(--cq-gold); color: #0b0a08; background: var(--cq-gold);
}
.cq-goal.is-done > span:last-child { text-decoration: line-through; opacity: .8; }

/* ---------- The live question, mirrored from the projector ---------- */
.cq-question {
  text-align: center; margin: 10px 0; padding: 10px;
  border: 1px solid var(--cq-gold-dim); background: rgba(0, 0, 0, .28);
}
.cq-question__term { font-family: var(--cq-font-display); font-size: 20px; color: var(--cq-text); }
.cq-question__answer { font-size: 15px; color: var(--cq-gold); margin-top: 6px; }

/* ---------- MCQ options (the one place a student taps during a battle) ---------- */
.cq-mcq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.cq-mcq__opt {
  display: flex; gap: 8px; align-items: center; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--cq-text); padding: 12px 14px;
  background: rgba(0, 0, 0, .32); border: 1px solid var(--cq-gold-dim); border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.cq-mcq__opt:hover:not(:disabled) { border-color: var(--cq-gold); background: rgba(214, 184, 108, .12); }
.cq-mcq__opt:disabled { cursor: not-allowed; opacity: .55; }
.cq-mcq__opt.is-chosen {
  border-color: var(--cq-gold); background: rgba(214, 184, 108, .2); opacity: 1;
}
.cq-mcq__key {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  font-weight: 800; font-size: 12px; border-radius: 50%;
  border: 1px solid var(--cq-gold-dim); color: var(--cq-gold);
}
@media (max-width: 560px) { .cq-mcq { grid-template-columns: 1fr; } }