/* =============================================================================
   Brand Builders — Responsive + Flow Fixes (v2)
   Loaded last; non-destructive override layer.
   Covers items 2, 3, 4, 6, 11 of the review brief.
   ============================================================================= */

/* Universal: stop any single overflowing element from forcing horizontal scroll. */
html, body { overflow-x: clip; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================================
   ITEM 4 — Game name legibility (game.html hero)
   Bug: navy "Brand Builders" on busy navy/cream board image had ~2:1 contrast.
   Fix: add a dark gradient scrim behind the title; lift title color slightly to
   off-white so it reads cleanly without losing the brand navy elsewhere.
   ============================================================================ */
.video-control-hero { position: relative; }
.video-control-hero .control-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 14, 32, 0.55) 0%, rgba(7, 14, 32, 0.30) 35%, rgba(7, 14, 32, 0.62) 100%),
    radial-gradient(ellipse at center, rgba(7, 14, 32, 0.40) 0%, rgba(7, 14, 32, 0.10) 60%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}
.video-control-hero .control-hero-copy {
  position: relative;
  z-index: 2;
}
/* Re-paint the hero title in cream/gold so it pops on the scrim. */
.video-control-hero #control-title {
  color: #FFF6DC !important;
  text-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 0 38px rgba(214, 175, 71, 0.18) !important;
  letter-spacing: 0.012em !important;
}
.video-control-hero .eyebrow {
  color: #F2D886 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.video-control-hero .control-subtitle {
  color: rgba(255, 248, 232, 0.95) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ============================================================================
   PROGRESSIVE FLOW — game.html
   Hero stays visible, but modes section + setup panel are revealed step-by-step.
   Initial state: data-flow-step="hero" (default).
   After "Choose Your Mode" click: data-flow-step="modes".
   After mode card click: data-flow-step="setup".
   ============================================================================ */
.game-flow #game-modes {
  margin: 1.5rem auto 0;
  max-width: 1100px;
  padding: 0 clamp(14px, 2vw, 28px);
  transition: opacity 0.18s ease;
}
.game-flow #game-modes.is-collapsed {
  opacity: 0;
  max-height: 0;
  margin: 0 auto;
  pointer-events: none;
  overflow: hidden;
  border: 0;
  transition: opacity 0.12s ease;
}
.game-flow[data-flow-step="hero"] #game-modes {
  opacity: 0;
  max-height: 0;
  margin: 0 auto;
  pointer-events: none;
  overflow: hidden;
}
.game-flow[data-flow-step="modes"] #game-modes,
.game-flow[data-flow-step="setup"] #game-modes:not(.is-collapsed) {
  opacity: 1;
  max-height: none;
  pointer-events: auto;
  overflow: visible;
}

/* Mode-step header: cleaner than the old vertical-bar "Step 1" badge. */
.mode-step-header {
  text-align: center;
  margin: 0 auto 1.25rem;
  max-width: 720px;
  padding: 0 1rem;
}
.mode-step-header .step-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 242, 194, 0.18), rgba(214, 175, 71, 0.28));
  border: 1px solid rgba(245, 215, 128, 0.42);
  color: #F2D886;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.mode-step-header h2 {
  margin: 0 0 0.35rem;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1.85rem, 3.4vw, 2.8rem);
  color: #FFF6DC;
  letter-spacing: 0.018em;
  line-height: 1;
}
.mode-step-header p {
  margin: 0;
  color: rgba(255, 248, 232, 0.78);
  font-weight: 600;
  font-size: 0.96rem;
}

/* ============================================================================
   ITEM 2 + ITEM 3 — Post-mode selection setup panel
   Goals: harmonize the panel with navy-gold language (kill orphan cream);
   give it a real header; remove the stray vertical bar; clean spacing.
   ============================================================================ */
.game-flow .setup-step {
  margin: 1.6rem auto 2.2rem;
  max-width: 920px;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.8rem) clamp(1.2rem, 2vw, 1.7rem) !important;
  background:
    linear-gradient(165deg, rgba(20, 32, 64, 0.96), rgba(14, 22, 48, 0.98)) !important;
  border: 1px solid rgba(245, 215, 128, 0.32) !important;
  border-radius: 24px !important;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.game-flow .setup-step.is-hidden {
  display: none;
}
.game-flow .setup-step-header {
  position: relative;
  text-align: center;
  padding: 0.35rem 1rem 0.85rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(245, 215, 128, 0.18);
}
.game-flow .setup-step-header .step-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 242, 194, 0.18), rgba(214, 175, 71, 0.28));
  border: 1px solid rgba(245, 215, 128, 0.42);
  color: #F2D886;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.game-flow .setup-step-header h2 {
  margin: 0 0 0.3rem;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  color: #FFF6DC;
  letter-spacing: 0.018em;
  line-height: 1;
}
.game-flow .setup-step-header .setup-mode-hint {
  margin: 0;
  color: rgba(255, 248, 232, 0.78);
  font-weight: 600;
  font-size: 0.95rem;
}
.game-flow .setup-step-header .setup-back-link {
  position: absolute;
  top: 0.2rem;
  left: 0.25rem;
  background: transparent;
  border: 1px solid rgba(245, 215, 128, 0.32);
  border-radius: 999px;
  color: #F2D886;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.game-flow .setup-step-header .setup-back-link:hover,
.game-flow .setup-step-header .setup-back-link:focus-visible {
  background: rgba(245, 215, 128, 0.10);
  border-color: rgba(245, 215, 128, 0.55);
  transform: translateX(-2px);
  outline: none;
}

/* Setup toolbar — visible field labels above each dropdown. */
.game-flow .setup-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.95rem 1rem;
  margin: 0.4rem 0 1.1rem;
}
.game-flow .control-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  align-items: stretch !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.game-flow .control-field-label {
  color: #F2D886 !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
.game-flow .control-field select {
  width: 100% !important;
  min-height: 46px !important;
  background: linear-gradient(180deg, #FFF8EC, #F3E3B8) !important;
  border: 1px solid rgba(245, 215, 128, 0.55) !important;
  border-radius: 14px !important;
  color: #0B1D3A !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  padding: 0 0.95rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

/* Player setup grid: clean rendering of solo/teams/class cards. */
.game-flow .player-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin: 0.4rem 0 1rem;
}
.game-flow .player-setup-grid:empty { display: none; }
.game-flow .checker-player-card {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  background: linear-gradient(155deg, rgba(255, 248, 232, 0.96), rgba(243, 227, 184, 0.93)) !important;
  border: 1px solid rgba(245, 215, 128, 0.55) !important;
  border-radius: 16px !important;
  padding: 0.7rem 0.85rem !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
  /* Kill the orphan vertical gold bar that was visible in the Solo screenshot. */
}
.game-flow .checker-player-card::before,
.game-flow .checker-player-card::after {
  content: none !important;
}
.game-flow .checker-preview-frame {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, rgba(11, 29, 58, 0.08), rgba(11, 29, 58, 0.18));
  border-radius: 12px;
}
.game-flow .checker-preview-img { width: 44px; height: 44px; object-fit: contain; }
.game-flow .checker-player-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}
.game-flow .checker-player-fields label {
  display: grid;
  gap: 0.2rem;
}
.game-flow .checker-player-fields label > span {
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6F4A22;
}
.game-flow .checker-player-fields input[type="text"] {
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(11, 29, 58, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #0B1D3A;
  font-weight: 800;
  font-size: 0.95rem;
}
.game-flow .player-active-toggle {
  margin-top: 0.2rem;
  font-weight: 700;
  font-size: 0.82rem;
  color: #5a4011;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Hide solo player token chooser if any leftover markup ever creeps back in. */
.game-flow .solo-checker-choice,
.game-flow [data-solo-checker],
.game-flow .solo-checker-placeholder { display: none !important; }

/* Launch row alignment */
.game-flow .launch-row {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  margin-top: 0.4rem !important;
  flex-wrap: wrap;
}
.game-flow .launch-row .command-btn.light-command {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(11, 29, 58, 0.18) !important;
  color: #0B1D3A !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.2rem !important;
}
.game-flow .launch-row .big-launch {
  background: linear-gradient(135deg, #FFE49C, #D5A757) !important;
  color: #0B1D3A !important;
  border: 1px solid rgba(255, 238, 177, 0.7) !important;
  font-weight: 950 !important;
  border-radius: 999px !important;
  padding: 0.78rem 1.6rem !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28) !important;
}

/* ============================================================================
   ITEM 6 + Icon review — board.html top HUD
   Goals: tighten when only one team is showing; harmonize the cog/audio/shuffle/
   reset icons (no more red/teal/blue/orange clash); keep red ONLY for danger (new
   game), gold ONLY for the dice (it's the hero action).
   ============================================================================ */
.board-clean .command-actions.hud-actions .command-btn,
.board-v3.board-clean .command-home,
.board-v3.board-clean .command-actions.hud-actions .command-btn {
  background: linear-gradient(145deg, rgba(38, 48, 74, 0.96), rgba(20, 30, 54, 0.94) 58%, rgba(12, 20, 38, 0.98)) !important;
  border: 1px solid rgba(245, 215, 128, 0.42) !important;
  color: #FFF2C2 !important;
}
/* Override the per-button color variations so all utility icons match. */
.board-clean .command-actions.hud-actions #soundBtn,
.board-clean .command-actions.hud-actions #shuffleBtn {
  background: linear-gradient(145deg, rgba(38, 48, 74, 0.96), rgba(20, 30, 54, 0.94) 58%, rgba(12, 20, 38, 0.98)) !important;
}
/* Danger button (New Game): red is appropriate and stays. */
.board-clean .command-actions.hud-actions .danger-command,
.board-v3.board-clean .command-actions.hud-actions .danger-command {
  background: linear-gradient(145deg, rgba(137, 36, 48, 0.95), rgba(93, 20, 34, 0.96) 58%, rgba(50, 12, 22, 0.98)) !important;
  border-color: rgba(255, 205, 146, 0.36) !important;
}

/* Score strip: when only 1 team is showing, don't reserve full-row space. */
.board-clean .hud-score-strip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.board-clean .top-score-board {
  display: inline-flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
.board-clean .top-score-board:empty { display: none !important; }

/* Mode label inside the turn block is uppercase tiny gold — keep it readable. */
.board-clean .board-top-hud .eyebrow.small {
  font-size: 11.5px !important;
  letter-spacing: 0.16em !important;
  color: #F2D886 !important;
}
.board-clean .board-top-hud .hud-result-line {
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: rgba(255, 248, 232, 0.85) !important;
}

/* ============================================================================
   Footer QR (new zip's own implementation) — keep it readable on mobile.
   ============================================================================ */
.final-index .bb-footer { flex-wrap: wrap; row-gap: 0.4rem; }
.footer-qr {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.qr-open-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  background: rgba(255, 248, 232, 0.95);
  border: 1px solid rgba(214, 175, 71, 0.55);
  border-radius: 12px;
  cursor: pointer;
  color: #0B1D3A;
  font: inherit;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.qr-open-button:hover,
.qr-open-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.34);
  outline: none;
}
.footer-qr-img {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 6px;
  background: #fff;
}
.footer-qr-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0B1D3A;
}

.qr-modal[hidden] { display: none; }
.qr-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.qr-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 8, 19, 0.86);
  backdrop-filter: blur(6px);
}
.qr-modal-card {
  position: relative;
  background: #fff8ec;
  border: 2px solid rgba(214, 175, 71, 0.8);
  border-radius: 20px;
  padding: 1.4rem 1.4rem 1.2rem;
  max-width: min(92vw, 460px);
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
  color: #0B1D3A;
}
.qr-modal-card h2 {
  margin: 0 0 0.5rem;
  font-family: "Bebas Neue", Impact, sans-serif;
  letter-spacing: 0.04em;
  font-size: 1.55rem;
}
.qr-modal-card p {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #5a4011;
}
.qr-large-img {
  width: min(80vw, 320px);
  height: min(80vw, 320px);
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  border: 1px solid rgba(214, 175, 71, 0.45);
}
.qr-close-button {
  position: absolute; top: 0.55rem; right: 0.55rem;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(214, 175, 71, 0.6);
  background: #fff;
  color: #0B1D3A;
  font-size: 1.35rem; font-weight: 900;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.qr-close-button:hover,
.qr-close-button:focus-visible {
  background: #f2d886; outline: none;
}
body.qr-modal-open { overflow: hidden; }

@media (max-width: 680px) {
  .final-index .bb-footer { flex-direction: column; gap: 0.45rem; }
  .footer-qr { margin-left: 0; }
}

/* ============================================================================
   Responsive: mobile/tablet polish for game.html
   ============================================================================ */
@media (max-width: 768px) {
  .video-control-hero { min-height: 300px; }
  .video-control-hero #control-title {
    font-size: clamp(2.4rem, 9.5vw, 4rem) !important;
    line-height: 0.95 !important;
  }
  .game-flow .mode-choice-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    padding: 0 1rem !important;
  }
  .game-flow .setup-step { margin: 1rem 0.8rem 1.5rem !important; }
  .game-flow .setup-step-header .setup-back-link { position: static; margin-bottom: 0.6rem; }
  .game-flow .setup-toolbar { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   Index page: keep BRAND BUILDERS title visible on small screens.
   ============================================================================ */
.final-index .index-stage,
.final-index .index-card,
.final-index .index-show,
.final-index .hero-video-link {
  min-width: 0;
  max-width: 100%;
}
.final-index .index-card { overflow: hidden; }
.final-index .index-show img,
.final-index .index-show video {
  max-width: 100%;
  height: auto;
}
@media (max-width: 420px) {
  .final-index .index-title {
    font-size: clamp(2.6rem, 14vw, 4.4rem) !important;
    line-height: 0.9;
  }
}

/* ============================================================================
   Pre-existing readability fixes (carried over from prior session)
   ============================================================================ */
/* Board hover-tooltip labels at 10.88px → bump to 12px. */
.board-overlays .board-space > span,
.full-overlays .board-space > span,
.board-v2 .full-overlays .board-space span,
.board-v3 .full-overlays .board-space span {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

/* Speaking page "Listen to conversation" button. */
.speaking-page .listen-orb.listen-all {
  font-size: clamp(12px, 1.05vw, 14px) !important;
  padding: 0.55rem 0.85rem !important;
  line-height: 1.25 !important;
}

/* ============================================================================
   HUD ICONS — uniform SVG style
   Replaces inconsistent OS emojis (⚙ 🔊 🔀 ↻) with stroked SVGs that share
   one color (#F2D886 cream-gold) and one stroke style.
   ============================================================================ */
.board-clean .command-icon-svg,
.command-icon-svg {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  position: relative;
  color: #F2D886;
}
.command-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Slight glow for depth on dark buttons. */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

/* Sound on/off toggle driven by aria-pressed (no JS innerHTML mutation). */
.icon-sound .command-icon-svg .icon-sound-off { display: none; }
.icon-sound[aria-pressed="false"] .command-icon-svg .icon-sound-on { display: none; }
.icon-sound[aria-pressed="false"] .command-icon-svg .icon-sound-off { display: block; }

/* Subtle muted-state visual: speaker dimmer when off. */
.icon-sound[aria-pressed="false"] .command-icon-svg { color: rgba(242, 216, 134, 0.55); }

/* Danger button (New Game) icon stays cream-gold on the red button. */
.board-clean .danger-command .command-icon-svg,
.danger-command .command-icon-svg {
  color: #FFE9C6;
}

/* Slightly larger icon on desktop, smaller on phones for compact HUD. */
@media (min-width: 1100px) {
  .command-icon-svg { width: 24px; height: 24px; }
}
@media (max-width: 480px) {
  .command-icon-svg { width: 20px; height: 20px; }
}

/* ============================================================================
   SOLO STUDY COMPLETE — celebration end-game screen
   The JS sets .is-solo-complete on .board-question-card when a Solo session
   finishes. Make it feel like a finish line, not a blank card.
   ============================================================================ */
.board-clean .board-question-card.is-solo-complete {
  background: linear-gradient(165deg, #FFF9EC 0%, #F3DFA6 100%) !important;
  border: 2px solid rgba(214, 175, 71, 0.7) !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    0 0 0 8px rgba(11, 29, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
.board-clean .board-question-card.is-solo-complete .question-card-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.55rem !important;
  padding: 1rem 1.4rem !important;
  height: 100% !important;
}
/* Hide the deck-shuffle stack + topline in the complete state. */
.board-clean .board-question-card.is-solo-complete .premium-card-deck-stage,
.board-clean .board-question-card.is-solo-complete .question-topline { display: none !important; }

/* Trophy graphic above the title — placed as ::before of .question-card-inner. */
.board-clean .board-question-card.is-solo-complete .question-card-inner::before {
  content: "";
  display: block;
  width: 78px;
  height: 78px;
  margin: 0 auto 0.2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23B07A1A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8h28v12a14 14 0 0 1-28 0z' fill='%23F2D886'/><path d='M18 12H10v4a6 6 0 0 0 6 6h2'/><path d='M46 12h8v4a6 6 0 0 1-6 6h-2'/><path d='M24 34h16l-2 8H26z' fill='%23F2D886'/><rect x='20' y='46' width='24' height='6' rx='2' fill='%23F2D886'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 8px 14px rgba(176, 122, 26, 0.45));
  animation: bbTrophyIn 0.6s cubic-bezier(.18,.9,.32,1.2);
  flex-shrink: 0;
}
@keyframes bbTrophyIn {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.board-clean .board-question-card.is-solo-complete #questionTitle {
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  color: #0B1D3A !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
.board-v3.board-clean.solo-mode .board-inner-center-area .board-question-card.is-solo-complete.is-solo-complete #questionPrompt,
.board-clean.solo-mode .board-inner-center-area .board-question-card.is-solo-complete.is-solo-complete #questionPrompt,
.board-clean .board-question-card.is-solo-complete #questionPrompt {
  font-size: clamp(0.98rem, 1.15vw, 1.15rem) !important;
  font-weight: 700 !important;
  color: #4a3318 !important;
  margin: 0.25rem 0 0.5rem !important;
  line-height: 1.45 !important;
  max-width: 520px !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.board-clean .board-question-card.is-solo-complete #questionPrompt strong {
  color: #0B1D3A;
  font-weight: 950;
}

/* Action panel — two equally weighted buttons side-by-side. */
.board-clean .board-question-card.is-solo-complete .solo-complete-panel {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.65rem !important;
  justify-content: center !important;
  margin-top: 0.3rem !important;
}
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-start-draw,
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-setup-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.72rem 1.3rem !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  border: 1px solid rgba(11, 29, 58, 0.2) !important;
  cursor: pointer !important;
  min-height: 46px !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-start-draw {
  background: linear-gradient(135deg, #FFE49C, #D5A757) !important;
  color: #0B1D3A !important;
  border-color: rgba(176, 122, 26, 0.55) !important;
  box-shadow: 0 12px 24px rgba(176, 122, 26, 0.35) !important;
}
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-setup-link {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0B1D3A !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-start-draw:hover,
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-start-draw:focus-visible,
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-setup-link:hover,
.board-clean .board-question-card.is-solo-complete .solo-complete-panel .solo-setup-link:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.26) !important;
  outline: none !important;
}

/* Hide leftover question-card chrome in completion state. */
.board-clean .board-question-card.is-solo-complete .board-card-actions,
.board-clean .board-question-card.is-solo-complete #answerOptions,
.board-clean .board-question-card.is-solo-complete #powerTools,
.board-clean .board-question-card.is-solo-complete #feedback { display: none !important; }

/* ============================================================================
   ACTIVE QUESTION CARD — design pass (item 7 partial)
   Goals: stronger visual hierarchy for the teacher action buttons (hint /
   show answer / good / needs work), proper spacing, consistent button sizes.
   ============================================================================ */
.board-clean .board-question-card .board-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 0.6rem !important;
  padding-top: 0.55rem !important;
  border-top: 1px solid rgba(176, 122, 26, 0.22) !important;
}

/* Hint button — small yellow circle floats left of the row. */
.board-clean .board-question-card .board-card-actions .hint-icon-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #FFF1B0, #F2C857) !important;
  color: #5A4011 !important;
  border: 1px solid rgba(176, 122, 26, 0.55) !important;
  display: inline-grid !important;
  place-items: center !important;
  box-shadow: 0 6px 14px rgba(176, 122, 26, 0.32) !important;
  margin-right: auto !important; /* push hint to the left edge of the row */
}
.board-clean .board-question-card .board-card-actions .hint-icon-btn:hover,
.board-clean .board-question-card .board-card-actions .hint-icon-btn:focus-visible {
  transform: translateY(-1px) scale(1.04) !important;
  outline: none !important;
}

/* Common base for teacher-action buttons. */
.board-clean .board-question-card .board-card-actions .btn {
  min-height: 42px !important;
  padding: 0.55rem 1.05rem !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.015em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
/* Show Answer = quiet ghost. */
.board-clean .board-question-card .board-card-actions #showAnswerBtn {
  background: rgba(255, 255, 255, 0.78) !important;
  color: #0B1D3A !important;
  border: 1px solid rgba(11, 29, 58, 0.22) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}
/* Good Answer = primary positive. */
.board-clean .board-question-card .board-card-actions #teacherCorrectBtn {
  background: linear-gradient(135deg, #2EBB7E, #1F8B5B) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(15, 80, 50, 0.5) !important;
  box-shadow: 0 8px 18px rgba(31, 139, 91, 0.32) !important;
}
/* Needs Work = secondary cautionary (warm red, not alarming). */
.board-clean .board-question-card .board-card-actions #teacherWrongBtn {
  background: linear-gradient(135deg, #E07A6B, #B14A3C) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(122, 38, 28, 0.5) !important;
  box-shadow: 0 8px 18px rgba(177, 74, 60, 0.32) !important;
}
/* End Turn / Next Card = gold primary (the "advance" action). */
.board-clean .board-question-card .board-card-actions .next-turn-button {
  background: linear-gradient(135deg, #FFE49C, #D5A757) !important;
  color: #0B1D3A !important;
  border: 1px solid rgba(176, 122, 26, 0.55) !important;
  box-shadow: 0 10px 20px rgba(176, 122, 26, 0.32) !important;
}
.board-clean .board-question-card .board-card-actions .btn:hover,
.board-clean .board-question-card .board-card-actions .btn:focus-visible {
  transform: translateY(-2px) !important;
  outline: none !important;
}

/* Mobile: stack the buttons more loosely so they don't squeeze. */
@media (max-width: 600px) {
  .board-clean .board-question-card .board-card-actions {
    gap: 0.4rem !important;
  }
  .board-clean .board-question-card .board-card-actions .btn {
    flex: 1 1 calc(50% - 0.4rem) !important;
    min-height: 40px !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.7rem !important;
  }
  .board-clean .board-question-card .board-card-actions .hint-icon-btn {
    flex: 0 0 38px !important;
    margin-right: 0 !important;
  }
}

/* Vocab cards: when category label and title say the same thing, dim the title
   to a small kicker so it doesn't repeat the category. The JS sets both to the
   same string for vocab cards — we use CSS-only de-duplication via :has(). */
.board-clean .board-question-card.is-objective .question-topline + #questionTitle {
  /* Don't outright hide — keep for screen readers — but visually shrink. */
  font-size: clamp(0.92rem, 1vw, 1.05rem) !important;
  font-weight: 800 !important;
  color: rgba(11, 29, 58, 0.55) !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  margin: 0.1rem 0 0.25rem !important;
}

/* Prompt readability — slightly larger, navy on cream for full contrast. */
.board-clean .board-question-card #questionPrompt {
  color: #0B1D3A !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

/* Answer options — slightly more padding so they don't feel cramped. */
.board-clean .board-question-card .board-answer-options .answer-btn {
  min-height: 40px !important;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}

/* ============================================================================
   CARD LAYOUT — keep card inside the cream center area, never crowded.
   The card lives inside .board-inner-center-area (the oval cream center of
   the board image). When content is dense (long prompt + 3 options +
   4 action buttons + feedback), it used to overflow downward beyond the
   cream area. These rules:
   1. Anchor the card at the TOP of the cream area (start, not center)
   2. Tighten internal spacing on every element
   3. Compact the action-button row
   4. Hide the redundant feedback line in the pre-answer state
   5. Provide an internal scroll as last-resort fallback
   ============================================================================ */

/* Card itself: snug inside the cream area; never spill out.
   Match the existing high-specificity rule chain to win the cascade. */
.board-clean .board-inner-center-area .board-question-card,
.board-v3.board-clean .board-inner-center-area .board-question-card,
.board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready),
.board-v3.board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready),
.board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready),
.board-v3.board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready),
.board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready),
.board-v3.board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready) {
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Inner content: scroll internally if it's still too tall (last resort). */
.board-clean .board-inner-center-area .board-question-card .question-card-inner,
.board-v3.board-clean .board-inner-center-area .board-question-card .question-card-inner,
.board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
.board-v3.board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
.board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
.board-v3.board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
.board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
.board-v3.board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner {
  max-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 122, 26, 0.45) transparent;
  padding: 0.7rem 0.95rem 0.6rem !important;
  gap: 0.35rem !important;
}
.board-clean .board-inner-center-area .board-question-card .question-card-inner::-webkit-scrollbar {
  width: 6px;
}
.board-clean .board-inner-center-area .board-question-card .question-card-inner::-webkit-scrollbar-thumb {
  background: rgba(176, 122, 26, 0.42);
  border-radius: 999px;
}

/* Tighter spacing on every direct child of the card content. */
.board-clean .board-question-card #questionTitle,
.board-v3.board-clean .board-question-card #questionTitle {
  margin: 0.15rem 0 0.15rem !important;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem) !important;
  line-height: 1 !important;
}
.board-clean .board-question-card #questionPrompt {
  margin: 0.1rem 0 0.35rem !important;
  font-size: clamp(0.88rem, 1.05vw, 1.05rem) !important;
  line-height: 1.32 !important;
}
.board-clean .board-question-card .question-topline {
  margin: 0 0 0.25rem !important;
  gap: 0.6rem !important;
}

/* Answer options: tighter grid, smaller gaps. */
.board-clean .board-question-card .board-answer-options,
.board-v3.board-clean .board-question-card .board-answer-options {
  display: grid !important;
  gap: 0.35rem !important;
  margin: 0.2rem 0 0.3rem !important;
}
/* For 3 short word-family options, single column (clearest read). */
.board-clean .board-question-card .board-answer-options .answer-btn {
  min-height: 36px !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.94rem !important;
}

/* Action button row: compact, tight gap, smaller buttons in dense cards. */
.board-clean .board-question-card .board-card-actions {
  margin-top: 0.3rem !important;
  padding-top: 0.35rem !important;
  gap: 0.4rem !important;
}
.board-clean .board-question-card .board-card-actions .btn {
  min-height: 36px !important;
  padding: 0.42rem 0.85rem !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
}
.board-clean .board-question-card .board-card-actions .hint-icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 1rem !important;
}

/* Feedback line: hide entirely in the pre-answer (answering) phase — the
   answer-result feedback only matters AFTER an answer is given. Keep visible
   in the post-answer / completion phases. */
.board-clean .board-question-card .board-feedback.hidden,
.board-clean .board-question-card .board-feedback:empty {
  display: none !important;
}
.board-clean .board-question-card .board-feedback {
  margin: 0.3rem 0 0 !important;
  padding: 0.35rem 0.55rem !important;
  font-size: 0.82rem !important;
  border-radius: 999px !important;
}
/* During the answering phase, the feedback line is just instructional and
   redundant with the visible UI (answer options + action buttons). Hide it. */
body[data-phase="answering"] .board-clean .board-question-card .board-feedback,
body[data-phase="answering"] .board-question-card .board-feedback {
  display: none !important;
}

/* ============================================================================
   OPINION CARDS — compress the dual-section (checklist + answer help)
   The worst-case opinion card has both:
   - "Check Your Answer" checklist (4 items in 2x2)
   - "Answer Help" phrase chips (4 chips in 2x2)
   That's ~170px of vertical space. Compress aggressively.
   ============================================================================ */
.board-clean .board-question-card.is-opinion-card .support-box {
  padding: 0.5rem 0.65rem !important;
  margin: 0.25rem 0 0.3rem !important;
  border-radius: 12px !important;
}
.board-clean .board-question-card.is-opinion-card .solo-self-check {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 0.6rem !important;
  row-gap: 0.18rem !important;
  align-items: start !important;
}
.board-clean .board-question-card.is-opinion-card .solo-self-check strong {
  grid-column: 1 / -1 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #5a4011 !important;
  margin: 0 0 0.1rem !important;
  text-align: center !important;
}
.board-clean .board-question-card.is-opinion-card .solo-self-check span {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  padding: 0 !important;
  color: #2a2014 !important;
}
.board-clean .board-question-card.is-opinion-card .answer-help-block {
  margin-top: 0.35rem !important;
  padding-top: 0.35rem !important;
  border-top: 1px solid rgba(176, 122, 26, 0.22) !important;
}
.board-clean .board-question-card.is-opinion-card .answer-help-block strong {
  display: block !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #5a4011 !important;
  margin: 0 0 0.15rem !important;
  text-align: center !important;
}
.board-clean .board-question-card.is-opinion-card .answer-help-chips {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.25rem !important;
}
.board-clean .board-question-card.is-opinion-card .answer-help-chips span {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 0.3rem 0.55rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(176, 122, 26, 0.28) !important;
  border-radius: 8px !important;
  color: #0B1D3A !important;
}

/* Opinion card prompt: tighter than the default. */
.board-clean .board-question-card.is-opinion-card #questionPrompt {
  margin: 0.05rem 0 0.25rem !important;
  font-size: clamp(0.85rem, 1vw, 1rem) !important;
  line-height: 1.32 !important;
}
.board-clean .board-question-card.is-opinion-card #questionTitle {
  font-size: clamp(1.3rem, 2.2vw, 2rem) !important;
  margin: 0.1rem 0 0.1rem !important;
}

/* When card has the .is-revealed state with answer options, anchor content
   to top of card so long content scrolls instead of pushing things off
   the bottom. */
.board-clean .board-question-card.is-revealed .question-card-inner {
  justify-content: flex-start !important;
}

/* Topline pills (category + Customers): smaller, less dominant. */
.board-clean .board-question-card .category-label,
.board-clean .board-question-card .points-label {
  font-size: 0.7rem !important;
  padding: 0.22rem 0.55rem !important;
  letter-spacing: 0.06em !important;
}

/* On dense vocab cards where the title duplicates the category label, the
   title was previously shrunk by my earlier rule. Strengthen that here so
   it kicks in reliably on all variants. */
.board-clean .board-question-card.is-objective-card .question-topline + #questionTitle,
.board-clean .board-question-card.is-objective .question-topline + #questionTitle {
  font-size: clamp(0.78rem, 0.92vw, 0.92rem) !important;
  font-weight: 800 !important;
  color: rgba(11, 29, 58, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0.08rem 0 0.2rem !important;
}

/* On smaller boards (responsive), shrink further. */
@media (max-width: 980px) {
  .board-clean .board-question-card #questionTitle { font-size: clamp(1.2rem, 2.2vw, 1.8rem) !important; }
  .board-clean .board-question-card #questionPrompt { font-size: clamp(0.85rem, 1.05vw, 0.98rem) !important; }
  .board-clean .board-question-card .board-answer-options .answer-btn {
    min-height: 34px !important;
    font-size: 0.88rem !important;
  }
}

/* ============================================================================
   SPECIAL POWER-UP / RISK CARDS — type-aware visual treatment
   The JS now sets data-special-type on the question card. Each type gets:
   - A large SVG icon at the top
   - A color tint that signals the effect (positive / cautious / protective)
   - Cleaner content layout (no answer options, no checklist)
   ============================================================================ */

.board-clean .board-question-card.card-special .question-card-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.5rem !important;
  padding: 1.1rem 1.3rem !important;
}

/* Big icon at the top — uses an SVG masked by currentColor so we can recolor per type. */
.board-clean .board-question-card.card-special .question-card-inner::before {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 0.1rem;
  background-color: #B07A1A;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 6px 12px rgba(176, 122, 26, 0.32));
  flex-shrink: 0;
}

/* Default icon (no type set yet): generic star */
.board-clean .board-question-card.card-special .question-card-inner::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15 9 22 9 16 14 18 21 12 17 6 21 8 14 2 9 9 9 12 2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15 9 22 9 16 14 18 21 12 17 6 21 8 14 2 9 9 9 12 2'/></svg>");
}

/* Bonus / gain — gold coin/sparkle */
.board-clean .board-question-card.card-special[data-special-type="bonus"] .question-card-inner::before {
  background-color: #B07A1A;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><text x='12' y='16' text-anchor='middle' font-family='Arial' font-size='10' font-weight='900' fill='black'>+</text></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><text x='12' y='16' text-anchor='middle' font-family='Arial' font-size='10' font-weight='900' fill='black'>+</text></svg>");
}
.board-clean .board-question-card.card-special[data-special-type="bonus"] {
  background: linear-gradient(165deg, #FFF6E0 0%, #F5DDA0 100%) !important;
  border: 2px solid rgba(214, 175, 71, 0.7) !important;
}

/* Double — sparkle/star burst */
.board-clean .board-question-card.card-special[data-special-type="double"] .question-card-inner::before {
  background-color: #7A3FBF;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20M2 12h20M5 5l14 14M19 5L5 19'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20M2 12h20M5 5l14 14M19 5L5 19'/></svg>");
}
.board-clean .board-question-card.card-special[data-special-type="double"] {
  background: linear-gradient(165deg, #F5E8FF 0%, #D9B8F5 100%) !important;
  border: 2px solid rgba(122, 63, 191, 0.55) !important;
}

/* Shield — protective shield icon */
.board-clean .board-question-card.card-special[data-special-type="shield"] .question-card-inner::before {
  background-color: #1F5FAA;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z'/></svg>");
}
.board-clean .board-question-card.card-special[data-special-type="shield"] {
  background: linear-gradient(165deg, #E8F1FF 0%, #B6CFEF 100%) !important;
  border: 2px solid rgba(31, 95, 170, 0.55) !important;
}

/* Steal — arrow grabbing inward */
.board-clean .board-question-card.card-special[data-special-type="steal"] .question-card-inner::before {
  background-color: #C8632A;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12H6M12 6l-6 6 6 6M2 19V5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12H6M12 6l-6 6 6 6M2 19V5'/></svg>");
}
.board-clean .board-question-card.card-special[data-special-type="steal"] {
  background: linear-gradient(165deg, #FFF0E0 0%, #F2C49A 100%) !important;
  border: 2px solid rgba(200, 99, 42, 0.55) !important;
}

/* Swap — two arrows crossing */
.board-clean .board-question-card.card-special[data-special-type="swap"] .question-card-inner::before {
  background-color: #137A8A;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
}
.board-clean .board-question-card.card-special[data-special-type="swap"] {
  background: linear-gradient(165deg, #DFF6F8 0%, #9CCFD6 100%) !important;
  border: 2px solid rgba(19, 122, 138, 0.55) !important;
}

/* Team choice — target/aim */
.board-clean .board-question-card.card-special[data-special-type="teamChoice"] .question-card-inner::before {
  background-color: #2A8C5B;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>");
}
.board-clean .board-question-card.card-special[data-special-type="teamChoice"] {
  background: linear-gradient(165deg, #E5F5EC 0%, #ABDBC0 100%) !important;
  border: 2px solid rgba(42, 140, 91, 0.55) !important;
}

/* Risk — warning triangle */
.board-clean .board-question-card.card-special[data-special-type="risk"] .question-card-inner::before {
  background-color: #B14A3C;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
.board-clean .board-question-card.card-special[data-special-type="risk"] {
  background: linear-gradient(165deg, #FFE8E0 0%, #F2B6A6 100%) !important;
  border: 2px solid rgba(177, 74, 60, 0.55) !important;
}

/* Title + prompt on special cards — bigger, more confident. */
.board-clean .board-question-card.card-special #questionTitle {
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  color: #0B1D3A !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
.board-clean .board-question-card.card-special #questionPrompt {
  font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
  font-weight: 700 !important;
  color: #2a2014 !important;
  margin: 0.3rem auto 0.4rem !important;
  line-height: 1.45 !important;
  max-width: 540px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Hide the deck-stage in special cards (already revealed); hide options.
   Also hide the redundant Power-Up / Special Card pills — the type icon + title
   already convey the card type clearly. */
.board-clean .board-question-card.card-special .premium-card-deck-stage,
.board-clean .board-question-card.card-special #answerOptions,
.board-clean .board-question-card.card-special .question-topline,
.board-clean .board-question-card.card-special .category-label,
.board-clean .board-question-card.card-special .points-label { display: none !important; }

/* Power tools / apply buttons — make them readable. */
.board-clean .board-question-card.card-special .power-tools {
  display: flex !important;
  gap: 0.55rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 0.4rem !important;
}
.board-clean .board-question-card.card-special .power-tools button {
  min-height: 44px !important;
  padding: 0.6rem 1.1rem !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(11, 29, 58, 0.22) !important;
}

/* ============================================================================
   CLASS TEAMS HUD — when fewer teams are active, score strip stays compact.
   Bug: when only 1-2 teams active, the score strip reserved space for 6.
   Now the strip wraps content-tight.
   ============================================================================ */
.board-clean .hud-score-strip,
.board-clean.class-mode .hud-score-strip {
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
}
.board-clean .top-score-board {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem 0.5rem !important;
  justify-content: flex-start !important;
  align-items: center !important;
  max-width: 100% !important;
}
.board-clean .top-score-board .score-chip {
  flex: 0 0 auto !important;
  min-width: 80px !important;
}
/* When the active team count is small, allow the HUD turn block to expand
   to absorb leftover width instead of leaving empty middle space. */
.board-clean.class-mode .board-top-hud {
  grid-template-columns: auto minmax(280px, 1fr) auto auto !important;
}
.board-clean.class-mode .board-top-hud .hud-score-strip {
  justify-self: start !important;
}


/* === V8.2 board card fit + HUD icon grouping repair ===
   Keep every gameplay card inside the cream centre area. */
.board-clean .board-top-hud,
.board-v3.board-clean .board-top-hud{
  grid-template-columns:auto minmax(210px,.78fr) minmax(280px,1fr) auto auto!important;
  align-items:center!important;
  gap:.5rem!important;
}
.board-clean .hud-left-actions,
.board-v3.board-clean .hud-left-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.32rem!important;
  min-width:max-content!important;
}
.board-clean .hud-left-actions .command-home,
.board-v3.board-clean .hud-left-actions .command-home,
.board-clean .hud-left-actions .command-btn,
.board-v3.board-clean .hud-left-actions .command-btn{
  width:48px!important;
  min-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
}
.board-clean .hud-danger-actions,
.board-v3.board-clean .hud-danger-actions{
  justify-self:end!important;
  margin-left:auto!important;
  display:flex!important;
  justify-content:flex-end!important;
  min-width:max-content!important;
}
.board-clean .hud-danger-actions .danger-command,
.board-v3.board-clean .hud-danger-actions .danger-command{
  width:52px!important;
  min-width:52px!important;
  height:52px!important;
  min-height:52px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
}

/* More accurate cream-centre fit for the board image. */
.board-clean .board-inner-center-area,
.board-v3.board-clean .board-inner-center-area{
  left:22.2%!important;
  top:23.9%!important;
  width:55.8%!important;
  height:50.4%!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.board-clean .board-inner-center-area .board-question-card,
.board-v3.board-clean .board-inner-center-area .board-question-card{
  width:min(92%,735px)!important;
  max-width:92%!important;
  max-height:86%!important;
  overflow:hidden!important;
  pointer-events:auto!important;
}
.board-clean .board-inner-center-area .question-card-inner,
.board-v3.board-clean .board-inner-center-area .question-card-inner{
  padding:clamp(.5rem,.78vw,.74rem) clamp(.68rem,1vw,.96rem)!important;
  gap:clamp(.16rem,.35vw,.3rem)!important;
  overflow:visible!important;
}
.board-clean .board-inner-center-area .board-question-card #questionPrompt,
.board-v3.board-clean .board-inner-center-area .board-question-card #questionPrompt{
  font-size:clamp(.72rem,.84vw,.92rem)!important;
  line-height:1.14!important;
  margin:0!important;
}
.board-clean .board-inner-center-area .board-question-card h1,
.board-v3.board-clean .board-inner-center-area .board-question-card h1{
  font-size:clamp(1.2rem,1.85vw,2.2rem)!important;
  line-height:.94!important;
  margin:0!important;
}
.board-clean .board-inner-center-area .support-box,
.board-v3.board-clean .board-inner-center-area .support-box{
  padding:.32rem .46rem!important;
  margin:.02rem 0!important;
  max-height:none!important;
  overflow:visible!important;
}
.board-clean .board-question-card.is-opinion-card .solo-self-check,
.board-v3.board-clean .board-question-card.is-opinion-card .solo-self-check{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.12rem .5rem!important;
  align-items:center!important;
}
.board-clean .board-question-card.is-opinion-card .solo-self-check strong,
.board-v3.board-clean .board-question-card.is-opinion-card .solo-self-check strong,
.board-clean .board-question-card.is-opinion-card .answer-help-block strong,
.board-v3.board-clean .board-question-card.is-opinion-card .answer-help-block strong{
  grid-column:1 / -1!important;
  font-size:.64rem!important;
  line-height:1!important;
  margin:0!important;
  letter-spacing:.08em!important;
}
.board-clean .board-question-card.is-opinion-card .solo-self-check span,
.board-v3.board-clean .board-question-card.is-opinion-card .solo-self-check span{
  font-size:clamp(.62rem,.7vw,.76rem)!important;
  line-height:1.08!important;
}
.board-clean .board-question-card.is-opinion-card .answer-help-block,
.board-v3.board-clean .board-question-card.is-opinion-card .answer-help-block{
  margin-top:.22rem!important;
  padding-top:.22rem!important;
}
.board-clean .board-question-card.is-opinion-card .answer-help-chips,
.board-v3.board-clean .board-question-card.is-opinion-card .answer-help-chips{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.18rem!important;
}
.board-clean .board-question-card.is-opinion-card .answer-help-chips span,
.board-v3.board-clean .board-question-card.is-opinion-card .answer-help-chips span{
  font-size:clamp(.62rem,.7vw,.75rem)!important;
  line-height:1.05!important;
  padding:.24rem .42rem!important;
}
.board-clean .board-inner-center-area .board-card-actions,
.board-v3.board-clean .board-inner-center-area .board-card-actions{
  gap:.28rem!important;
  margin-top:.04rem!important;
}
.board-clean .board-inner-center-area .board-card-actions .btn,
.board-v3.board-clean .board-inner-center-area .board-card-actions .btn{
  min-height:30px!important;
  padding:.32rem .56rem!important;
  font-size:clamp(.62rem,.68vw,.74rem)!important;
}
.board-clean .board-inner-center-area .board-feedback,
.board-v3.board-clean .board-inner-center-area .board-feedback{
  font-size:clamp(.58rem,.66vw,.7rem)!important;
  line-height:1.05!important;
  padding:.22rem .45rem!important;
  margin:.02rem 0 0!important;
}
@media (max-width:1180px){
  .board-clean .board-top-hud,
  .board-v3.board-clean .board-top-hud{grid-template-columns:auto minmax(170px,.75fr) minmax(220px,1fr) 70px auto!important;}
  .board-clean .hud-left-actions .command-home,
  .board-v3.board-clean .hud-left-actions .command-home,
  .board-clean .hud-left-actions .command-btn,
  .board-v3.board-clean .hud-left-actions .command-btn{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;}
}
@media (max-width:920px){
  .board-clean .board-top-hud,
  .board-v3.board-clean .board-top-hud{grid-template-columns:1fr 1fr!important;}
  .board-clean .hud-left-actions,
  .board-v3.board-clean .hud-left-actions{justify-self:start!important;}
  .board-clean .hud-danger-actions,
  .board-v3.board-clean .hud-danger-actions{justify-self:end!important;}
}
@media (max-width:760px){
  .board-clean .board-inner-center-area .board-question-card,
  .board-v3.board-clean .board-inner-center-area .board-question-card{
    width:96%!important;max-width:96%!important;max-height:none!important;
    overflow:visible!important;
  }
  .board-clean .board-inner-center-area .question-card-inner,
  .board-v3.board-clean .board-inner-center-area .question-card-inner{
    overflow:visible!important;max-height:none!important;
  }
  .board-clean .board-inner-center-area,
  .board-v3.board-clean .board-inner-center-area{
    overflow:visible!important;
  }
}
/* Tablet (portrait/landscape) — the board image's cream area is too small to
   contain the worst-case opinion card; let the card extend below the cream
   so all action buttons remain visible. Match v8 selector chain specificity. */
@media (min-width:761px) and (max-width:1180px){
  .board-clean .board-inner-center-area .board-question-card,
  .board-v3.board-clean .board-inner-center-area .board-question-card,
  .board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready),
  .board-v3.board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready),
  .board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready),
  .board-v3.board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready),
  .board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready),
  .board-v3.board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready){
    max-height:none!important;
    overflow:visible!important;
  }
  .board-clean .board-inner-center-area .board-question-card .question-card-inner,
  .board-v3.board-clean .board-inner-center-area .board-question-card .question-card-inner,
  .board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
  .board-v3.board-clean.solo-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
  .board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
  .board-v3.board-clean.team-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
  .board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner,
  .board-v3.board-clean.class-mode .board-inner-center-area .board-question-card:not(.is-ready) .question-card-inner{
    overflow:visible!important;
    max-height:none!important;
  }
  .board-clean .board-inner-center-area,
  .board-v3.board-clean .board-inner-center-area{
    overflow:visible!important;
  }
}