:root {
  --cream: #fff9ef;
  --card: rgba(255,250,240,.97);
  --ink: #2b1714;
  --muted: #70554e;
  --accent: #9f1914;
  --accent-dark: #6f100d;
  --accent-soft: #ffe1d7;
  --gold: #f5ad18;
  --gold-dark: #c87a05;
  --blue: #1e4f91;
  --green: #2f7b3d;
  --shadow: 0 16px 40px rgba(54,24,10,.18);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background-color: #b83522;
  background-image: url("assets/hero-reference-clean.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
body[data-subject="spanish-review"][data-board="spanish-game-1"] {
  --accent: #a91914; --accent-dark: #74110e; --accent-soft: #ffe1d9;
  background-color: #b73022;
}
body[data-subject="spanish-review"][data-board="spanish-game-2"] {
  --accent: #dc6c12; --accent-dark: #a84a09; --accent-soft: #fff0d8;
  background-color: #dc7b26;
}
body[data-subject="us-citizenship"] {
  --accent: #245ba2; --accent-dark: #163c75; --accent-soft: #e8f0fc;
  background: #244e85 url("assets/hero-reference-clean.png") no-repeat top center / 100% auto;
}
body[data-subject="bible-trivia"][data-board="bible-game-1"] {
  --accent: #3d824d; --accent-dark: #255b34; --accent-soft: #e5f2df;
  background-color: #4b7c55;
}
body[data-subject="bible-trivia"][data-board="bible-game-2"] {
  --accent: #8d2118; --accent-dark: #63120f; --accent-soft: #f6e2d4;
  background-color: #8b6847;
}
button, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 999px; padding: .82rem 1.15rem; font-weight: 800; }
button:focus-visible, select:focus-visible { outline: 3px solid rgba(245,173,24,.55); outline-offset: 2px; }
select {
  width: 100%; min-width: 0; min-height: 50px;
  border-radius: 14px; border: 2px solid color-mix(in srgb, var(--accent) 38%, #f1d5b8);
  padding: .7rem 2.15rem .7rem .8rem; background: #fff; color: var(--ink);
  font-size: .94rem; font-weight: 700;
}
label { display: grid; gap: .38rem; min-width: 0; font-weight: 900; color: var(--accent-dark); }
.app-shell {
  width: min(1460px, calc(100% - 24px));
  margin: 0 auto;
  padding: clamp(300px, 23.4vw, 370px) 0 34px;
  position: relative;
}
.hidden { display: none !important; }
.card {
  background: var(--card);
  border: 2px solid color-mix(in srgb, var(--accent) 35%, #f0cba8);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
/* Hero controls and selected board title. The logo and purple-harness dog are baked into the hero art. */
.hero-header { position: absolute; inset: 0 0 auto; height: 0; margin: 0; z-index: 4; }
.brand-wrap { width: 100%; }
.brand-copy h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.brand-copy { position: absolute; top: clamp(210px, 15.5vw, 245px); left: 50%; transform: translateX(-50%); width: min(820px, 70vw); }
.theme-title {
  margin: 0; padding: .62rem 1.25rem; text-align: center;
  color: #fff9e8; background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border: 2px solid #e2a128; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(53,18,7,.28); text-shadow: 0 2px 4px rgba(39,7,4,.55);
  font-size: clamp(1rem, 1.55vw, 1.35rem); font-weight: 900; line-height: 1.15;
}
.setup-float {
  position: fixed; top: 18px; right: 24px; z-index: 30;
  background: #fff; color: var(--accent-dark); border: 2px solid #edb28a;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
/* Setup panel modeled after the approved reference: wide cream card, five selectors, large Start button. */
.setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  grid-template-areas: "copy copy" "fields actions";
  gap: 1rem 1.25rem;
  padding: clamp(1.15rem, 2vw, 1.75rem);
  border: 3px solid color-mix(in srgb, var(--accent) 70%, #f0a730);
}
.setup-copy { grid-area: copy; }
.setup-copy h2 { margin: 0 0 .25rem; color: var(--accent-dark); font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1; }
.setup-copy p { margin: .35rem 0 0; color: #3a2a25; font-size: .96rem; font-weight: 500; }
.setup-grid {
  grid-area: fields;
  display: grid;
  grid-template-columns: repeat(5, minmax(135px, 1fr));
  gap: .85rem;
  align-items: end;
}
.setup-grid label:nth-child(1)::before { content: "📚"; position: absolute; }
.setup-actions {
  grid-area: actions;
  display: grid;
  align-content: end;
  gap: .6rem;
}
.start-large {
  min-height: 64px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: #173d77 !important;
  background: linear-gradient(180deg, #ffd952, #f5a90c) !important;
  border: 3px solid #d78100;
  box-shadow: inset 0 2px rgba(255,255,255,.45), 0 6px 14px rgba(99,47,5,.2);
}
.primary { background: var(--accent); color: white; }
.ghost { background: white; color: var(--accent-dark); border: 2px solid color-mix(in srgb, var(--accent) 38%, #f0c8a8); }
.danger-light { background: var(--accent-soft); color: var(--accent-dark); }
.sound-toggle { margin: 0; }
/* Score and board */
.scorebar {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1rem; margin-bottom: 16px;
}
.teams, .score-actions, .modal-actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }
.team-pill { border-radius: 999px; background: white; padding: .78rem 1rem; border: 2px solid #ead2b9; font-weight: 900; }
.team-pill.active { background: #ffd05c; border-color: #e99a00; }
.board { padding: 1rem; overflow-x: auto; }
.board-grid { display: grid; gap: .7rem; min-width: 720px; }
.category-header, .tile {
  min-height: 72px; border-radius: 15px; display: grid; place-items: center;
  text-align: center; padding: .7rem; font-weight: 900;
}
.category-header { background: var(--accent-dark); color: white; font-size: clamp(.95rem, 1.45vw, 1.22rem); }
.tile {
  background: linear-gradient(180deg, #fffefb, #ffedd0); color: #2454a6;
  font-size: clamp(1.55rem, 3vw, 2.35rem); border: 3px solid #f4b24d;
  box-shadow: inset 0 -5px rgba(160,77,10,.08);
}
.tile:hover:not(:disabled) { transform: translateY(-2px); }
.tile.used { background: #eee3d8; color: #9c8878; border-color: #d4c0ae; text-decoration: line-through; cursor: not-allowed; opacity: .68; }
.tile.placeholder { opacity: .52; cursor: default; background: linear-gradient(180deg,#fff,#f2e9df); border-style: dashed; }
/* Footer */
.game-copyright {
  width: fit-content; max-width: calc(100% - 20px); margin: 16px auto 2px; padding: .55rem 1rem;
  border-radius: 999px; color: #fff7df; background: var(--accent-dark);
  border: 1px solid rgba(244,184,74,.85); box-shadow: 0 4px 14px rgba(40,14,8,.18);
  text-align: center; font-size: .92rem; font-weight: 700;
}
/* Questions and modals — functionality-preserving readability rules. */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(35,13,9,.62); display: grid; place-items: center; padding: 12px; overflow-y: auto; }
.modal-card {
  position: relative; width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  overflow-y: auto; border-radius: 28px; padding: clamp(1.15rem, 2.5vw, 2rem);
  background: #fffdf8; box-shadow: 0 28px 90px rgba(0,0,0,.35);
}
.modal-close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; padding: 0; background: #fff0e9; color: var(--accent-dark); font-size: 1.8rem; }
.question-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-right: 3.1rem; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-size: .8rem; font-weight: 900; }
.question-timer { min-width: 76px; padding: .5rem .85rem; border-radius: 999px; background: #ffd05c; color: var(--accent-dark); font-size: 1.25rem; font-weight: 900; text-align: center; border: 2px solid #e99f00; }
.question-timer.warning { background: #ffe2dc; border-color: #d92d20; }
#questionPrompt { margin: .75rem 0 1rem; max-width: none; font-size: clamp(1.22rem, 2vw, 1.75rem); line-height: 1.3; font-weight: 400; color: var(--accent-dark); }
#questionPrompt.long-question { font-size: clamp(1.08rem, 1.65vw, 1.42rem); }
#questionPrompt.very-long-question { font-size: clamp(1rem, 1.42vw, 1.25rem); }
.choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin: .85rem 0; }
.choice {
  min-height: 70px; width: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; overflow-wrap: anywhere; padding: .8rem 1rem;
  border-radius: 17px; background: #fff; border: 3px solid #1f5aa0; color: #173d77;
  box-shadow: 0 5px 0 #c7d5e7, 0 8px 16px rgba(13,40,82,.16);
  font-size: clamp(1rem, 1.28vw, 1.18rem); font-weight: 700; line-height: 1.32;
}
.choice:hover:not(:disabled), .choice:focus-visible { background:#edf5ff; border-color:#173d77; transform:translateY(-1px); }
.choice.long-choice { font-size: clamp(.94rem, 1.15vw, 1.08rem); }
.choice.correct { background: #176b2c; border-color: #bdf0c7; color: #fff; box-shadow:0 5px 0 #0d491d; }
.choice.wrong { background: #a91612; border-color: #ffc5bd; color: #fff; box-shadow:0 5px 0 #74100d; }
body[data-subject="us-citizenship"] #questionPrompt,
body[data-subject="us-citizenship"] #questionPrompt.long-question,
body[data-subject="us-citizenship"] #questionPrompt.very-long-question { font-weight: 400; line-height: 1.34; }
body[data-subject="us-citizenship"] #questionPrompt { font-size: clamp(1.12rem,1.65vw,1.42rem); }
body[data-subject="us-citizenship"] #questionPrompt.long-question { font-size: clamp(1.03rem,1.45vw,1.28rem); }
body[data-subject="us-citizenship"] #questionPrompt.very-long-question { font-size: clamp(.98rem,1.28vw,1.16rem); }
body[data-subject="us-citizenship"] .choice,
body[data-subject="us-citizenship"] .choice.long-choice { font-size: clamp(1.02rem,1.28vw,1.18rem); font-weight: 400; }
.answer-area { margin: 1rem 0; background: #fff3bd; border:3px solid #b86a00; border-radius: 17px; padding: 1rem; font-size: clamp(1rem,1.4vw,1.25rem); font-weight: 700; color: #402000; }
.feedback { min-height: 28px; margin: .75rem 0; font-weight: 900; font-size: 1.08rem; }
.feedback.good { color: #2e7d32; } .feedback.bad { color: #8f1610; }
.special-image { display: block; width: min(420px,75%); max-height: 300px; object-fit: contain; margin: .3rem auto .75rem; border-radius: 18px; filter: drop-shadow(0 10px 18px rgba(70,28,8,.18)); }
.reset-card { width: min(520px,100%); text-align: center; border: 3px solid #efb58e; }
.reset-actions, #continueControls { justify-content: center; margin-top: 1rem; }
#continueBtn { min-width: 190px; }
@media (max-width: 1180px) {
  .setup { grid-template-columns: 1fr 220px; }
  .setup-grid { grid-template-columns: repeat(3,minmax(180px,1fr)); }
}
@media (max-width: 820px) {
  body { background-size: auto 250px; }
  .app-shell { width: min(100% - 16px,1460px); padding-top: 255px; }
  .brand-copy { top: 182px; width: 78vw; }
  .theme-title { font-size: .92rem; padding: .48rem .7rem; }
  .setup { grid-template-columns: 1fr; grid-template-areas: "copy" "fields" "actions"; }
  .setup-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .setup-actions { grid-template-columns: 1fr 1fr; }
  .start-large { grid-column: 1 / -1; }
  .scorebar { align-items: stretch; flex-direction: column; }
  .choices { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { background-size: auto 205px; }
  .app-shell { padding-top: 210px; }
  .brand-copy { top: 145px; width: 76vw; }
  .theme-title { font-size: .78rem; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-actions { grid-template-columns: 1fr; }
  .setup-float { top: 8px; right: 8px; padding: .6rem .75rem; }
  .board-grid { min-width: 620px; }
  .game-copyright { font-size: .77rem; border-radius: 16px; }
}
/* v5.0.4 final alignment: functional hero controls cover the decorative mockup controls. */
.hero-controls {
  position: fixed;
  top: 12px;
  right: 18px;
  z-index: 30;
  display: flex;
  gap: 10px;
  align-items: center;
}
.hero-controls .ghost {
  position: static !important;
  min-height: 46px;
  padding: .62rem .95rem;
  background: #fff;
  color: #173d77;
  border: 2px solid #1f5aa0;
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
}
.setup-float { position: static !important; }
.setup-actions { grid-template-rows: auto auto; }
.setup-actions .danger-light { align-self: start; }
@media (max-width: 560px) {
  .hero-controls { top: 6px; right: 6px; gap: 5px; }
  .hero-controls .ghost { font-size: .76rem; min-height: 38px; padding: .5rem .6rem; }
}


/* v5.0.5 visual cleanup: preserve gameplay, fix setup layering and use per-game art. */
.app-shell {
  padding-top: clamp(390px, 27vw, 430px);
}
.brand-copy {
  top: clamp(350px, 24vw, 382px);
  width: min(820px, 70vw);
}
.theme-title {
  position: relative;
  z-index: 8;
}

/* Fully cover the baked hero control art with the real controls. */
.hero-controls {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 40;
  display: grid;
  grid-template-columns: 132px 148px;
  gap: 8px;
}
.hero-controls .ghost {
  width: 100%;
  min-height: 48px;
  padding: .55rem .65rem;
  background: #ffffff !important;
  color: #173d77 !important;
  border: 2px solid #1f5aa0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
  opacity: 1;
}

/* Setup layout: wide selectors so selected values are readable without opening them. */
.setup {
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas:
    "copy copy"
    "fields actions"
    "themes themes";
}
.setup-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: .9rem;
}
.setup-grid label:nth-child(1) { grid-column: span 2; }
.setup-grid label:nth-child(2) { grid-column: span 2; }
.setup-grid label:nth-child(3) { grid-column: span 2; }
.setup-grid label:nth-child(4) { grid-column: span 3; }
.setup-grid label:nth-child(5) { grid-column: span 3; }
.setup-grid label:nth-child(1)::before { content: none !important; display: none !important; }
select {
  font-size: .9rem;
  padding-right: 2.4rem;
  text-overflow: ellipsis;
}
.setup-actions { align-content: end; }
.start-large { min-height: 70px; }

/* Cute board artwork from the approved visual direction. */
.game-theme-gallery {
  grid-area: themes;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .15rem;
}
.theme-card {
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 18px rgba(56,20,8,.18);
  opacity: .86;
  transform: translateZ(0);
}
.theme-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.61 / 1;
  object-fit: cover;
}
body[data-subject="spanish-review"][data-board="spanish-game-1"] .theme-card-spanish1,
body[data-subject="spanish-review"][data-board="spanish-game-2"] .theme-card-spanish2,
body[data-subject="us-citizenship"] .theme-card-citizenship,
body[data-subject="bible-trivia"][data-board="bible-game-1"] .theme-card-bible1,
body[data-subject="bible-trivia"][data-board="bible-game-2"] .theme-card-bible2 {
  opacity: 1;
  border-color: #ffd457;
  box-shadow: 0 0 0 3px var(--accent), 0 10px 24px rgba(56,20,8,.28);
}

@media (max-width: 1180px) {
  .app-shell { padding-top: 335px; }
  .brand-copy { top: 300px; }
  .setup { grid-template-columns: 1fr 220px; }
  .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-grid label:nth-child(n) { grid-column: span 1; }
  .game-theme-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .app-shell { padding-top: 285px; }
  .brand-copy { top: 248px; width: 82vw; }
  .hero-controls { grid-template-columns: 112px 122px; right: 6px; top: 6px; }
  .hero-controls .ghost { font-size: .76rem; min-height: 40px; }
  .setup { grid-template-columns: 1fr; grid-template-areas: "copy" "fields" "actions" "themes"; }
  .setup-grid { grid-template-columns: 1fr 1fr; }
  .game-theme-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .app-shell { padding-top: 225px; }
  .brand-copy { top: 190px; width: 84vw; }
  .setup-grid { grid-template-columns: 1fr; }
  .game-theme-gallery { grid-template-columns: 1fr; }
}
/* Ensure no baked-in hero control artwork peeks out behind the real controls. */
.hero-controls { grid-template-columns: 150px 164px; right: 6px; top: 6px; }
.hero-controls .ghost { min-height: 56px; border-radius: 999px; }
select { text-overflow: clip; }


/* v5.0.6 final-candidate fixes: no decorative controls, functional cards, visible bonuses, rotating setup mascot. */
.hero-controls {
  top: 10px !important;
  right: 12px !important;
  grid-template-columns: 150px 164px !important;
  gap: 10px !important;
}
.hero-controls .ghost {
  background: rgba(255,255,255,.98) !important;
  color: #173d77 !important;
  border: 2px solid #1f5aa0 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.22) !important;
}

/* Strong contrast regardless of the artwork beneath the selected board title. */
.theme-title {
  color: #fff !important;
  background: color-mix(in srgb, var(--accent-dark) 94%, #000 6%) !important;
  border: 3px solid #ffd25a !important;
  text-shadow: 0 2px 3px #000, 0 0 8px rgba(0,0,0,.45) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.38) !important;
}

.setup-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.setup-mascot {
  width: clamp(72px, 8vw, 118px);
  height: clamp(72px, 8vw, 118px);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 7px 10px rgba(52,24,10,.2));
}

/* The game artwork is now a set of real selector buttons. */
.theme-card {
  padding: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  cursor: pointer !important;
  text-align: left;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.theme-card:hover { transform: translateY(-3px); opacity: 1; }
.theme-card:focus-visible { outline: 4px solid #ffd457; outline-offset: 3px; }

/* Bonus squares must stay visible on every board and still open the normal bonus question modal. */
.tile.bonus-question-tile {
  background: linear-gradient(180deg, #fff6a8, #ffc43d) !important;
  color: #7a2600 !important;
  border-color: #f09b00 !important;
  box-shadow: inset 0 -4px 0 rgba(174,91,0,.14), 0 5px 12px rgba(90,44,0,.16) !important;
}
.tile.bonus-question-tile:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 8px 16px rgba(90,44,0,.24) !important;
}
.tile.bonus-question-tile.used { opacity: .45; }

@media (max-width: 820px) {
  .setup-mascot { width: 76px; height: 76px; }
}
@media (max-width: 560px) {
  .setup-copy { align-items: flex-start; }
  .setup-mascot { width: 62px; height: 62px; }
}


/* v5.0.7 focused UI/bonus/hazard corrections */
/* Setup page: no decorative dog or game-card gallery. */
.setup { grid-template-areas: "copy copy" "fields actions" !important; }
.setup-copy { display:block !important; }
.setup-mascot, .game-theme-gallery { display:none !important; }
.setup-copy p {
  font-size: 1.08rem !important;
  line-height: 1.45 !important;
  color: #2b1b18 !important;
  max-width: 900px !important;
}
.hero-controls { gap: .6rem !important; flex-wrap: wrap; }
.help-float {
  position: static !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--red-dark) !important;
  border: 2px solid rgba(122,31,27,.35) !important;
  font-weight: 800 !important;
}
.help-card { max-width: 760px !important; text-align:left; }
.help-card h2 { margin-top:0; color:var(--red-dark); font-size:2rem; }
.help-list { margin: .75rem 0 0 1.35rem; padding:0; font-size:1.05rem; line-height:1.55; }
.help-list li + li { margin-top:.55rem; }

/* Bonus squares: make every candy bonus unmistakable on the board. */
.tile.bonus-question-tile, .tile.bonus-tile {
  background: linear-gradient(135deg,#fff4b3,#ffd166 48%,#ff9f1c) !important;
  color:#7b241c !important;
  border:3px solid #d97706 !important;
  box-shadow:0 5px 0 rgba(122,31,27,.18), 0 0 0 3px rgba(255,255,255,.55) inset !important;
  font-size: clamp(1rem,1.55vw,1.28rem) !important;
  font-weight:900 !important;
}
.tile.bonus-question-tile:hover:not(:disabled), .tile.bonus-tile:hover:not(:disabled) { transform:translateY(-2px) scale(1.015); }

/* Hazard images rotate through the four supplied Chihuahua poses only inside the question modal. */
.special-image.hazard-dog-image {
  display:block !important;
  width:auto !important;
  max-width:min(42vw,360px) !important;
  max-height:300px !important;
  object-fit:contain !important;
  margin:.25rem auto .75rem !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

@media (max-width: 800px) {
  .setup { grid-template-areas: "copy" "fields" "actions" !important; }
  .hero-controls { justify-content:flex-end; }
}


/* v5.0.9 discreet teacher-only bonus inspector inside Help */
.teacher-help { margin-top: 1rem !important; font-size: .88rem; opacity: .78; }
.bonus-inspector-btn { border: 1px solid rgba(120,70,40,.28); background: rgba(255,255,255,.68); color: #694b3b; border-radius: 999px; padding: .38rem .7rem; font: inherit; font-weight: 700; cursor: pointer; }
.teacher-note { margin-left: .35rem; font-size: .76rem; font-weight: 600; color: #806f65; }
.bonus-inspector-panel { margin-top: .75rem; padding: .75rem .9rem; border: 1px dashed rgba(120,70,40,.3); border-radius: 12px; background: rgba(255,250,242,.8); color: #4c3b32; font-size: .9rem; line-height: 1.4; }
.bonus-inspector-panel.hidden { display:none; }
.bonus-inspector-heading { font-weight: 800; margin-bottom: .35rem; }
.bonus-inspector-panel ul { margin: .25rem 0 0 1.15rem; padding: 0; columns: 2; column-gap: 1.5rem; }
.bonus-inspector-panel li { break-inside: avoid; margin: .15rem 0; }
@media (max-width:700px){ .bonus-inspector-panel ul { columns:1; } }


/* v5.0.11 — prominent question-card title and safe teacher bonus map */
#questionModal .question-topline {
  margin: -.15rem 0 .75rem;
  padding: .25rem 3.25rem .25rem 0;
  align-items: center;
}
#questionModal #questionMeta.eyebrow {
  flex: 1 1 auto;
  display: block;
  margin: 0;
  padding: .72rem 1rem;
  border-radius: 16px;
  background: var(--accent-dark);
  border: 2px solid #e3a51d;
  box-shadow: 0 5px 14px rgba(35,13,9,.18);
  color: #fffaf0;
  font-size: clamp(1.02rem, 1.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.2;
  text-transform: none;
}
.bonus-inspector-board { margin:.65rem 0; padding:.55rem .65rem; border-top:1px solid rgba(120,70,40,.16); }
.bonus-inspector-board:first-of-type { border-top:0; }
.bonus-inspector-board > div { margin-top:.25rem; }
@media (max-width:700px){
  #questionModal #questionMeta.eyebrow { font-size: .98rem; padding: .6rem .75rem; }
}

/* v5.0.12 teacher-only paw control and restored bottom Bonus Question */
.footer-row {
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  width:100%; margin: 8px auto 2px;
}
.footer-row .game-copyright { margin: 0; }
.teacher-paw {
  width:30px; height:30px; padding:0; border:0; border-radius:0;
  background:transparent; color:var(--gold);
  font-size:1.05rem; line-height:1; display:grid; place-items:center;
  opacity:.72; box-shadow:none; cursor:pointer;
}
.teacher-paw:hover, .teacher-paw:focus-visible { opacity:.95; transform:scale(1.06); }
.teacher-map-card { max-width:820px !important; }
.teacher-map-card h2 { margin-top:0; color:var(--accent-dark); }
.teacher-map-note { margin-top:-.25rem; color:#6c5a51; font-size:.92rem; }
.bonus-inspector-panel { display:grid; gap:.65rem; margin-top:1rem; }
.bonus-inspector-heading { font-weight:900; color:var(--accent-dark); font-size:1.08rem; }
.bonus-inspector-board { padding:.72rem .85rem; border-radius:14px; background:#fff7e8; border:1px solid #ead2b9; }
.bonus-inspector-board > strong { display:block; margin-bottom:.3rem; color:var(--accent-dark); }

/* Keep each board's separate Bonus Question clearly visible at the bottom. */
.tile.bonus-tile {
  min-height:58px !important;
  background:linear-gradient(135deg,#fff4b3,#ffd166 48%,#ff9f1c) !important;
  color:#7b241c !important;
  border:3px solid #d97706 !important;
  font-size:clamp(1.05rem,1.7vw,1.35rem) !important;
  font-weight:900 !important;
  letter-spacing:.02em;
}

/* v5.0.13 — team identity in question-card title */
#questionMeta .question-team { display:inline-block; padding:.12rem .5rem; border-radius:999px; margin-left:.12rem; background:#fff; border:2px solid currentColor; font-weight:950; text-shadow:none; }
#questionMeta .question-team.team-1 { color:#b91c1c; }
#questionMeta .question-team.team-2 { color:#1d4ed8; }
#questionMeta .question-team.team-3 { color:#15803d; }
#questionMeta .question-team.team-4 { color:#7e22ce; }


/* v5.0.16 — editable themed team names */
.team-name-editor {
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:.7rem;
  padding:.85rem 1rem;
  margin-top:.25rem;
  background:rgba(255,248,235,.9);
  border:2px solid rgba(138,83,46,.18);
  border-radius:18px;
}
.team-count-stepper {
  display:grid;
  grid-template-columns:auto minmax(72px,1fr) auto;
  align-items:center;
  gap:.4rem;
  min-height:50px;
}
.team-count-stepper output {
  min-height:42px;
  display:grid;
  place-items:center;
  padding:.35rem .5rem;
  border:2px solid color-mix(in srgb, var(--accent) 38%, #f1d5b8);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-weight:900;
}
.team-step-button {
  min-height:42px;
  padding:.45rem .7rem;
  border-radius:12px;
  background:#fff;
  color:#173d77;
  border:2px solid #1f5aa0;
  font-size:.82rem;
}
.team-step-button:disabled { opacity:.45; cursor:not-allowed; }
.team-name-heading { grid-column:1 / -1; display:flex; align-items:baseline; gap:.65rem; color:#5f3527; }
.team-name-heading strong { font-size:1.05rem; }
.team-name-heading span { font-size:.8rem; opacity:.75; }
.team-name-field { display:grid; gap:.25rem; font-weight:800; font-size:.82rem; color:#4a2b22; }
.team-name-field span { display:inline-flex; align-items:center; gap:.35rem; }
.team-name-field span::before { content:""; width:.7rem; height:.7rem; border-radius:50%; background:currentColor; }
.team-name-field input { width:100%; box-sizing:border-box; padding:.68rem .75rem; border-radius:12px; border:2px solid currentColor; background:#fff; color:#2c211d; font:inherit; font-weight:750; outline:none; }
.team-name-field input:focus { box-shadow:0 0 0 3px rgba(255,193,7,.2); }
.team-color-1 { color:#b91c1c; }
.team-color-2 { color:#1d4ed8; }
.team-color-3 { color:#15803d; }
.team-color-4 { color:#7e22ce; }
.team-color-5 { color:#b45309; }
.team-color-6 { color:#0f766e; }
.team-color-7 { color:#a21caf; }
.team-color-8 { color:#0369a1; }
#questionMeta .question-team.team-5 { color:#b45309; }
#questionMeta .question-team.team-6 { color:#0f766e; }
#questionMeta .question-team.team-7 { color:#a21caf; }
#questionMeta .question-team.team-8 { color:#0369a1; }
.team-pill:nth-child(1).active { border-color:#b91c1c; }
.team-pill:nth-child(2).active { border-color:#1d4ed8; }
.team-pill:nth-child(3).active { border-color:#15803d; }
.team-pill:nth-child(4).active { border-color:#7e22ce; }
.team-pill:nth-child(5).active { border-color:#b45309; }
.team-pill:nth-child(6).active { border-color:#0f766e; }
.team-pill:nth-child(7).active { border-color:#a21caf; }
.team-pill:nth-child(8).active { border-color:#0369a1; }
@media (max-width:900px) { .team-name-editor { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .team-name-editor { grid-template-columns:1fr; } }


/* v5.0.18 subject team defaults + discreet teacher question editor */
.editor-paw { order:-1; }
.question-editor-card { max-width:880px !important; }
.question-editor-card h2 { margin-top:0; color:var(--accent-dark); }
.question-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.question-editor-grid label { display:grid; gap:.35rem; font-weight:850; color:#4d3127; }
.question-editor-grid select, .question-editor-grid textarea { width:100%; box-sizing:border-box; border:2px solid #d5b49a; border-radius:12px; padding:.68rem .75rem; background:#fff; color:#2c211d; font:inherit; }
.question-editor-grid textarea { resize:vertical; line-height:1.4; }
.question-editor-grid .editor-wide { grid-column:1 / -1; }
.question-editor-actions { justify-content:flex-end; flex-wrap:wrap; }
.editor-status { min-height:1.3em; margin-top:.8rem; color:#6a4938; font-weight:750; }
@media (max-width:700px){ .question-editor-grid { grid-template-columns:1fr; } .question-editor-grid .editor-wide { grid-column:auto; } }


/* v5.0.22 — release-candidate responsive board, answer levels, and bonus-bank editor */
.board { overflow: visible !important; max-width: 100%; }
.board-grid {
  min-width: 0 !important;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--board-columns, 5), minmax(0, 1fr)) !important;
  align-items: start;
  gap: .7rem;
}
.board-column { min-width: 0; display: grid; gap: .7rem; align-content: start; }
.board-column .category-header, .board-column .tile { width: 100%; min-width: 0; }
.board-grid > .bonus-tile { grid-column: 1 / -1; width: 100%; }
.choices.two-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
  .app-shell { width: min(100% - 12px, 1460px); padding-bottom: 18px; }
  .scorebar { padding: .65rem; gap: .65rem; }
  .teams { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; gap: .45rem; }
  .team-pill { min-width: 0; padding: .62rem .7rem; text-align: center; overflow-wrap: anywhere; }
  .score-actions { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .score-actions button { width: 100%; padding-inline: .55rem; }
  .board { padding: .6rem; }
  .board-grid { grid-template-columns: 1fr !important; gap: .8rem; }
  .board-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
    padding-bottom: .2rem;
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .board-column .category-header { grid-column: 1 / -1; min-height: 48px; padding: .55rem; font-size: 1rem; }
  .board-column .tile { min-height: 54px; padding: .45rem .25rem; font-size: clamp(1.2rem, 6vw, 1.7rem); border-width: 2px; }
  .board-grid > .bonus-tile { min-height: 54px !important; }
  .choices.two-choice { grid-template-columns: 1fr; }
  .modal-card { max-height: calc(100dvh - 16px); width: calc(100vw - 12px); padding: 1rem; }
}
@media (max-width: 430px) {
  .board-column { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .teams { grid-template-columns: 1fr; }
  .footer-row { flex-wrap: wrap; }
  .game-copyright { max-width: 100%; font-size: .78rem; }
}


/* v5.0.22 final-release polish — visible difficulty reminder and golden paw controls */
.scorebar-main { display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.difficulty-badge {
  width:fit-content; max-width:100%; padding:.42rem .72rem; border-radius:999px;
  background:#fff7df; color:var(--accent-dark); border:2px solid rgba(233,159,0,.55);
  font-size:.82rem; font-weight:900; letter-spacing:.01em; white-space:normal;
}
.gold-paw {
  color:#d9a51b; font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;
  font-variant-emoji:text; text-shadow:0 1px 0 #fff4b8, 0 1px 2px rgba(93,55,0,.22);
}
.teacher-paw .gold-paw { font-size:1.75rem; line-height:1; }
.game-copyright { display:flex; align-items:center; justify-content:center; gap:.45rem; flex-wrap:wrap; }
.copyright-star { color:#d9a51b; font-size:1.15rem; line-height:1; text-shadow:0 1px 0 #fff4b8, 0 1px 2px rgba(93,55,0,.22); }
@media (max-width:700px){
  .scorebar-main { width:100%; }
  .difficulty-badge { align-self:flex-start; font-size:.76rem; }
  .footer-row { gap:.35rem; }
  .teacher-paw { width:34px; height:34px; }
  .game-copyright { gap:.3rem; padding:.48rem .72rem; }
}

/* Final release teacher-access paw: single gold paw, no outline */
.gold-paw-icon { width:30px; height:28px; display:block; fill:#f3b51b; filter:drop-shadow(0 1px 1px rgba(110,72,0,.22)); }
.teacher-paw { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
.teacher-paw .gold-paw-icon { width:32px; height:30px; }

/* v5.1.0 — classroom usability: anchored controls, sticky categories, higher answer contrast. */
.hero-controls {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: minmax(104px, 126px) !important;
  width: auto !important;
  max-width: calc(100% - 24px);
  gap: 8px !important;
}
.hero-controls .ghost {
  min-height: 38px !important;
  padding: .42rem .62rem !important;
  font-size: .76rem !important;
}
.category-header {
  position: sticky;
  top: 6px;
  z-index: 12;
  box-shadow: 0 5px 12px rgba(35,13,9,.28);
}
#languageDirectionLabel { grid-column: span 2; }
@media (max-width: 1180px) {
  #languageDirectionLabel { grid-column: span 1; }
}
@media (max-width: 700px) {
  .category-header { top: 4px; }
  .hero-controls {
    right: 6px !important;
    max-width: calc(100% - 12px);
    grid-template-columns: minmax(92px, 112px) !important;
  }
  .hero-controls .ghost {
    min-width: 0;
    min-height: 34px !important;
    padding: .35rem .4rem !important;
    font-size: .68rem !important;
  }
}

body[data-subject="spanish-review"] .choice {
  font-size: clamp(1.125rem, calc(1.28vw + 2px), 1.305rem);
}
body[data-subject="spanish-review"] .choice.long-choice {
  font-size: clamp(1.065rem, calc(1.15vw + 2px), 1.205rem);
}
body[data-subject="spanish-review"] .answer-area {
  font-size: clamp(1.125rem, calc(1.4vw + 2px), 1.375rem);
}

/* Final paw refinement: unmistakable single paw silhouette */
.gold-paw-icon {
  width: 34px;
  height: 33px;
  display: block;
  fill: #f4b719;
  filter: none;
  overflow: visible;
}
.teacher-paw {
  width: 44px;
  height: 42px;
}
.teacher-paw .gold-paw-icon {
  width: 36px;
  height: 35px;
}