/* Classroom player screens: ACU's blue and green, with orange reserved for
   selection and focus. Snake retains its established board and control layout. */
body[data-page="play"] {
  --game-navy: #103b63;
  --game-green: #286532;
  --game-line: #d5e1ed;
  --game-soft: #edf4fc;
  color: var(--game-navy);
  background: #f4f7fb;
  font-family: Arial, Helvetica, sans-serif;
}
body[data-page="play"]:not(.chase-active) {
  background: radial-gradient(ellipse at 15% 0%, #dcecf9 0, transparent 550px), #f4f7fb;
}
body[data-page="play"]:not(.chase-active) .site-header {
  height: 94px;
  background: #fff;
  border-bottom: 1px solid var(--game-line);
}
body[data-page="play"]:not(.chase-active) .brand-logo { width: 290px; }
body[data-page="play"] .site-header nav a {
  border: 1px solid var(--game-line);
  border-radius: 999px;
  background: var(--game-soft);
  padding: 9px 16px;
  color: var(--blue);
}
body[data-page="play"]:not(.chase-active) .controller {
  width: 100%; max-width: 780px; padding: 22px 24px 48px;
}
body[data-page="play"]:not(.chase-active) .controller-bar {
  border: 0; padding-bottom: 6px; gap: 6px;
}
body[data-page="play"]:not(.chase-active) #player-name {
  color: var(--blue); font-size: clamp(27px, 4vw, 36px); letter-spacing: -.025em;
  padding: 0 0 6px; line-height: 1.2;
}
body[data-page="play"]:not(.chase-active) .controller-bar > a {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border: 1px solid #9bbcca; border-radius: 50%; background: #143b54; color: #effbf7; font-size: 22px;
}
body[data-page="play"] .controller-bar > a i { color: inherit; }
body[data-page="play"] .connection { color: #446079; font-weight: 700; }
body[data-page="play"]:not(.chase-active) .connection {
  padding: 7px 12px; border-radius: 999px; background: #e9f3e3; font-size: 11px;
}
.game-art { display: none; }
body[data-page="play"]:not(.chase-active) .controller-title {
  display: grid; grid-template-columns: 72px minmax(0,1fr); column-gap: 18px;
  text-align: left; align-items: center; margin: 20px 0 22px;
}
body[data-page="play"]:not(.chase-active) .controller-title > svg { display: none; }
body[data-page="play"]:not(.chase-active) .game-art {
  grid-column: 1; grid-row: 1 / 4; display: grid; place-items: center;
  width: 72px; height: 80px; border-radius: 23px;
  font-size: 42px; background: #105698; box-shadow: 0 5px 0 #0a3a68;
  border: 1px solid #3976ad;
}
body[data-page="play"]:not(.chase-active) .controller-title .eyebrow {
  grid-column: 2; justify-content: flex-start; font-size: 10px; letter-spacing: 1.4px;
  color: #40617c; line-height: 1.6;
}
body[data-page="play"]:not(.chase-active) .controller-title h1 {
  grid-column: 2; font-size: clamp(27px,4.4vw,39px); line-height: 1.12;
  margin: 5px 0 7px; color: var(--blue); overflow-wrap: anywhere;
}
body[data-page="play"]:not(.chase-active) #play-room {
  grid-column: 2; font-size: 12px; font-weight: 700; color: var(--game-green);
}

/* Actions have a tangible edge and retain a clearly visible keyboard focus. */
body[data-page="play"]:not(.chase-active) .button {
  min-height: 50px; padding: 12px 20px; border-radius: 14px; font-size: 16px;
  font-weight: 800; letter-spacing: -.015em;
}
body[data-page="play"]:not(.chase-active) .button.primary {
  background: var(--blue); color: white; border: 1px solid #0c4378;
  box-shadow: 0 4px 0 #0a3a68;
}
body[data-page="play"]:not(.chase-active) .button.primary:hover:not(:disabled) {
  background: #0d467e; border-color: #0a3a68; transform: translateY(-1px);
}
body[data-page="play"]:not(.chase-active) button:disabled:not(.bingo-square):not(.offer-case):not([data-answer]) {
  opacity: .58;
}
body[data-page="play"]:not(.chase-active) button:not(:disabled):active {
  transform: translateY(2px); box-shadow: none;
}
body[data-page="play"] button:focus-visible,
body[data-page="play"] a:focus-visible,
body[data-page="play"] input:focus-visible,
body[data-page="play"] summary:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 4px;
}
body[data-page="play"]:not(.chase-active) .round-status {
  background: #e8f2e2; color: #245329; border: 1px solid #c8dfbc;
  border-radius: 14px; min-height: 48px; font-size: 15px; font-weight: 700;
}
body[data-page="play"]:not(.chase-active) .student-question {
  padding: 25px; border: 1px solid #0f4c86; border-top: 5px solid var(--green);
  border-radius: 23px; background: var(--blue); color: white;
  box-shadow: 0 6px 0 #d2e0ee; margin: 22px 0;
}
body[data-page="play"] .student-question .eyebrow { color: #d3efc1; }
body[data-page="play"] .student-question h2 {
  color: white; font-size: clamp(23px,3.6vw,32px); line-height: 1.4; letter-spacing: -.025em;
}
body[data-page="play"].needs-active .student-question::after { color: #e0ecf8; }
body[data-page="play"] .answer-grid { gap: 14px; margin: 20px 0; }
body[data-page="play"] .answer-grid button:nth-child(n) {
  border: 2px solid #bdd2e6; border-bottom: 5px solid #acc7df;
  border-radius: 18px; background: white; color: var(--game-navy);
  padding: 20px; min-height: 115px; height: auto;
  box-shadow: 0 3px 12px #103b6309;
}
body[data-page="play"] .answer-grid button span { color: inherit; }
body[data-page="play"] .answer-grid .answer-letter {
  display: grid; place-items: center; background: #e9f2fc; color: var(--blue);
  border-radius: 12px; width: 40px; height: 44px; font-size: 23px;
}
body[data-page="play"] .answer-grid .answer-copy { font-size: 18px; font-weight: 700; }
body[data-page="play"] .answer-grid button:hover:not(:disabled) {
  color: var(--game-navy); background: #edf5ff; border-color: #105698;
}
body[data-page="play"] .answer-grid button.selected:nth-child(n) {
  border: 3px solid var(--orange); outline: 3px solid var(--orange); outline-offset: 2px;
}
body[data-page="play"] .answer-grid button.correct-reveal:disabled {
  background: #286532; color: white; border-color: #76b853; box-shadow: 0 4px 0 #1d4c25;
}
body[data-page="play"] .answer-grid button.incorrect-reveal:disabled {
  color: #304c63; background: #e6edf3; border-color: #b6c9d9; box-shadow: none;
}
body[data-page="play"] .answer-grid button.incorrect-reveal.chosen-incorrect:disabled {
  background: #a52e2e; color: white; border-color: #a52e2e;
}
body[data-page="play"] .answer-grid button.selected.correct-reveal:disabled,
body[data-page="play"] .answer-grid button.selected.chosen-incorrect:disabled { border-color: var(--orange); }
body[data-page="play"].fraud-active .answer-grid .answer-letter { display: none; }
body[data-page="play"].fraud-active .answer-grid .answer-copy { font-size: 29px; }
body[data-page="play"].credit-active .answer-grid .answer-copy { font-size: 21px; }
body[data-page="play"].fraud-active .answer-grid button { min-height: 130px; }
body[data-page="play"].fraud-active:not(.credit-active) .answer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-page="play"].fraud-active .answer-grid button { flex-wrap: nowrap; min-width: 0; }
body[data-page="play"].fraud-active .answer-feedback { flex-basis: auto; width: 100%; text-align: center; font-size: 13px; overflow-wrap: anywhere; }
body[data-page="play"] .fraud-explanation {
  color: #234d2c; background: #edf7e6; border: 1px solid #b4d6a0;
  border-left: 6px solid var(--green); border-radius: 16px; padding: 20px;
  font-size: 18px; line-height: 1.6;
}

/* The prize, cases, and cards are the main visual focus of each game. */
body[data-page="play"] .price-check {
  border: 1px solid #c8d9e8; border-radius: 25px; background: white;
  box-shadow: 0 6px 0 #d3e1ec;
}
body[data-page="play"] .price-rules {
  background: var(--blue); padding: 20px 24px; border-bottom: 5px solid var(--green);
}
body[data-page="play"] .price-rules .eyebrow { color: #ddf3ce; }
body[data-page="play"] .price-rules p { font-size: 14px; line-height: 1.6; }
body[data-page="play"] .price-product { background: #eff6fe; padding: 24px 22px; }
body[data-page="play"] .price-icon { font-size: 82px; line-height: 1.2; }
body[data-page="play"] .price-label {
  color: white; background: var(--blue); border: 0; border-radius: 999px;
  font-size: 10px; margin: 14px 0;
}
body[data-page="play"] .price-product h2 { color: var(--blue); font-size: clamp(34px,6vw,48px); }
body[data-page="play"] #price-detail { font-size: 20px; font-weight: 700; color: #244663; line-height: 1.5; }
body[data-page="play"] .price-disclaimer { color: #506578; }
body[data-page="play"] .price-input { border: 2px solid #95b6d5; background: #f8fbff; border-radius: 15px; }
body[data-page="play"] .price-input input { font-size: 36px; color: var(--blue); }
body[data-page="play"] #price-submit { background: var(--blue); }
body[data-page="play"] .price-result { background: #215c30; border: 1px solid #86b86e; border-radius: 19px; }
body[data-page="play"] .price-result h2 { font-size: clamp(40px,8vw,56px); color: #def4bf; }
body[data-page="play"] .final-offer {
  background: #104b82; border: 1px solid #0a3a68; border-top: 6px solid var(--green);
  border-radius: 25px; padding: 24px; box-shadow: 0 6px 0 #ccdce9;
}
body[data-page="play"] .offer-intro .eyebrow { color: #d8f0c5; }
body[data-page="play"] .offer-intro > p { font-size: 15px; line-height: 1.55; }
body[data-page="play"] .offer-tag { color: #d5e7f7; }
body[data-page="play"] .offer-scoreline {
  padding: 15px; gap: 20px; border: 1px solid #6391b9; border-radius: 15px; background: #0a3b6a;
}
body[data-page="play"] .offer-scoreline strong { color: #d3f1b5; font-size: 26px; }
body[data-page="play"] .offer-status { min-height: 62px; font-weight: 700; }
body[data-page="play"] .offer-cases { gap: 19px 12px; }
body[data-page="play"] .offer-bank { background: #fff; border-radius: 19px; padding: 24px; color: #183e60; }
body[data-page="play"] .offer-bank .eyebrow { color: #326537; }
body[data-page="play"] .offer-bank h2 { color: var(--blue); font-size: clamp(34px,7vw,46px); }
body[data-page="play"] .offer-bank .button.offer-deal { background: #286532; box-shadow: 0 4px 0 #1c4923; }
body[data-page="play"] .offer-bank .button.offer-no-deal { background: #105698; box-shadow: 0 4px 0 #0b3f71; }
body[data-page="play"] .offer-value { border-radius: 8px; background: #0d3c69; border-color: #678caa; color: #e4f7d1; }
body[data-page="play"] .finance-circle { background: #fff; border: 1px solid #c8d9e8; border-radius: 24px; box-shadow: 0 6px 0 #d3e1ec; }
body[data-page="play"] .circle-hub { background: #105698; color: white; border-color: #e1f4c8; }
.prize-wheel .circle-slice-0 { --slice: 0; }
.prize-wheel .circle-slice-1 { --slice: 1; }
.prize-wheel .circle-slice-2 { --slice: 2; }
.prize-wheel .circle-slice-3 { --slice: 3; }
.prize-wheel .circle-slice-4 { --slice: 4; }
.prize-wheel .circle-slice-5 { --slice: 5; }
.prize-wheel .circle-slice-6 { --slice: 6; }
.prize-wheel .circle-slice-7 { --slice: 7; }
body[data-page="play"] #spin-button { width: min(100%,360px); border-radius: 999px; font-size: 18px; }
body[data-page="play"] .candy-bingo {
  background: white; border: 1px solid #c1d5e7; border-radius: 24px; box-shadow: 0 6px 0 #d3e1ec;
}
body[data-page="play"] .bingo-intro .eyebrow { color: var(--blue); }
body[data-page="play"] .bingo-call { background: #105698; border-bottom: 5px solid var(--green); border-radius: 19px; }
body[data-page="play"] .bingo-call .eyebrow { color: #ddf4c9; }
body[data-page="play"] .bingo-call h2 { font-size: 32px; }
body[data-page="play"] .bingo-letters { color: #105698; }
body[data-page="play"] .bingo-square { border: 1px solid #b5ccdf; border-radius: 10px; background: #f4f8fd; color: #173c5e; }
body[data-page="play"] .bingo-square.is-available { border: 2px solid var(--blue); box-shadow: 0 2px 0 #bdd1e5; background: #e7f2ff; }
body[data-page="play"] .bingo-square.is-marked { background: #286532; color: white; border-color: #286532; box-shadow: none; }
body[data-page="play"] .bingo-square.is-winner { background: #104779; color: white; border-color: var(--green); }
body[data-page="play"] #bingo-claim { background: #105698; box-shadow: 0 4px 0 #0a3a68; }
body[data-page="play"] .bingo-chip { background: #e8f3e0; color: #295535; border-radius: 999px; }

/* Token games use the same card-and-control language, with compact phone rows. */
body[data-page="play"] .investing-game { background: white; border: 1px solid #c1d5e7; border-radius: 24px; box-shadow: 0 6px 0 #d3e1ec; }
body[data-page="play"] .invest-intro { background: #105698; color: white; padding: 20px; border-radius: 17px; border-bottom: 5px solid var(--green); }
body[data-page="play"] .invest-intro .eyebrow { color: #d8f0c5; }
body[data-page="play"] .invest-intro p:not(.eyebrow) { font-size: 15px; line-height: 1.6; margin-top: 8px; }
body[data-page="play"] .invest-hud { gap: 10px; padding: 20px 4px; font-size: 13px; font-weight: 700; }
body[data-page="play"] .invest-hud strong { color: var(--blue); font-size: 34px; }
body[data-page="play"] .invest-token-count { background: #e9f3df; border: 1px solid #b8d697; color: #294e28; border-radius: 999px; font-size: 14px; }
body[data-page="play"] .invest-asset { border: 1px solid #b9cfe2; border-top: 4px solid #105698; border-radius: 17px; background: #f2f7fd; }
body[data-page="play"] .invest-asset:nth-child(2) { border-top-color: #6ab14a; }
body[data-page="play"] .invest-asset:nth-child(3) { border-top-color: #286532; }
body[data-page="play"] .invest-asset h3 { color: #164d7e; font-weight: 800; }
body[data-page="play"] .invest-stepper button { min-width: 46px; width: 46px; min-height: 46px; border-radius: 13px; background: #105698; box-shadow: 0 3px 0 #0a3a68; }
body[data-page="play"] .invest-stepper strong { min-width: 26px; text-align: center; color: #105698; }
body[data-page="play"] .invest-asset .invest-share { color: #285833; font-weight: 800; }
body[data-page="play"] .invest-event { background: #eaf4e2; border: 1px solid #b1d09b; border-left: 6px solid #6ab14a; border-radius: 17px; }
body[data-page="play"] .invest-event h3 { color: #285833; }
body[data-page="play"] .invest-history-row { padding: 15px; background: #f0f5fb; border: 0; border-radius: 13px; margin: 8px 0; font-size: 14px; }
body[data-page="play"] .invest-history-row strong { color: #105698; }
body[data-page="play"] .investing-game [data-status] { font-weight: 700; font-size: 15px; line-height: 1.6; margin: 16px 0; }
body[data-page="play"] .credit-skills { background: #105698; border: 1px solid #0b457b; border-bottom: 5px solid #6ab14a; border-radius: 22px; }
body[data-page="play"] .credit-skills .eyebrow { color: #d8f0c5; }
body[data-page="play"] .credit-skills strong { font-size: 28px; line-height: 1.3; }
body[data-page="play"] .credit-skills progress { accent-color: #a8dc75; }
body[data-page="play"] .credit-skills small { line-height: 1.5; color: #e2edf8; }
body[data-page="play"] .reset-dialog { border: 1px solid #b9ccde; border-top: 6px solid #6ab14a; border-radius: 24px; box-shadow: 0 20px 70px #0b335f55; }
body[data-page="play"] .reset-dialog h2 { color: #105698; }

/* Snake keeps the same geometry and speed; only its surrounding color accents change. */
body[data-page="play"].chase-active .money-chase { border-color: #9bbeaa; background: #eff7ec; }
body[data-page="play"].chase-active .chase-board-wrap { border-color: #286532; }
body[data-page="play"].chase-active .chase-bonus { background: #e4f1d4; color: #254d2d; }
body[data-page="play"].chase-active #chase-play { background: #105698; color: white; }
body[data-page="play"].chase-active .chase-pad button { border-color: #97b4ce; color: #105698; }

@media (max-width: 540px) {
  body[data-page="play"]:not(.chase-active) .site-header { height: 74px; }
  body[data-page="play"]:not(.chase-active) .brand-logo { width: 240px; }
  body[data-page="play"]:not(.chase-active) .controller { padding: 16px 16px 36px; }
  body[data-page="play"]:not(.chase-active) .controller-title { grid-template-columns: 58px minmax(0,1fr); gap: 3px 14px; margin: 15px 0 20px; }
  body[data-page="play"]:not(.chase-active) .game-art { width: 58px; height: 66px; font-size: 34px; border-radius: 19px; }
  body[data-page="play"]:not(.chase-active) .controller-title h1 { font-size: 29px; }
  body[data-page="play"]:not(.chase-active) .controller-title .eyebrow { font-size: 9px; letter-spacing: 1px; }
  body[data-page="play"]:not(.chase-active) .student-question { padding: 20px; margin: 18px 0; border-radius: 20px; }
  body[data-page="play"] .student-question h2 { font-size: 23px; }
  body[data-page="play"] .answer-grid button:nth-child(n) { min-height: 92px; padding: 17px; }
  body[data-page="play"] .answer-grid .answer-copy { font-size: 17px; }
  body[data-page="play"].fraud-active:not(.credit-active) .answer-grid { grid-template-columns: 1fr 1fr; }
  body[data-page="play"].fraud-active:not(.credit-active) .answer-grid .answer-copy { font-size: 25px; }
  body[data-page="play"].credit-active .answer-grid .answer-copy { font-size: 20px; }
  body[data-page="play"] .final-offer { padding: 19px 16px; }
  body[data-page="play"] .offer-cases { gap: 19px 10px; }
  body[data-page="play"] .offer-scoreline { padding: 12px; }
  body[data-page="play"] .offer-bank { padding: 20px 16px; }
  body[data-page="play"] .price-rules { padding: 18px 20px; }
  body[data-page="play"] .price-product { padding: 22px 18px; }
  body[data-page="play"] #price-detail { font-size: 19px; }
  body[data-page="play"] .candy-bingo { padding: 14px 10px; }
  body[data-page="play"] .bingo-intro { padding: 4px 7px; }
  body[data-page="play"] .bingo-call { padding: 19px 14px; }
  body[data-page="play"] .bingo-square { min-height: 74px; font-size: 11px; padding: 7px 2px; }
  body[data-page="play"] .investing-game { padding: 16px; }
  body[data-page="play"] .invest-intro { padding: 17px; }
  body[data-page="play"] .invest-assets { grid-template-columns: 1fr; gap: 12px; }
  body[data-page="play"] .invest-asset { grid-template-columns: 42px minmax(0,1fr); padding: 14px; column-gap: 12px; }
  body[data-page="play"] .invest-asset .invest-icon { font-size: 33px; }
  body[data-page="play"] .invest-asset p { line-height: 1.45; font-size: 13px; }
  body[data-page="play"] .invest-stepper { grid-column: 1 / -1; grid-row: 3; gap: 20px; margin: 8px 0; }
  body[data-page="play"] .invest-asset .invest-share { grid-column: 1 / -1; margin: 0; }
  body[data-page="play"] .invest-hud strong { font-size: 30px; }
  body[data-page="play"] .budget-game .invest-hud > [data-points] { font-size: 22px; }
  body[data-page="play"] .credit-skills { padding: 22px; }
  body[data-page="play"] .credit-skills strong { font-size: 26px; }
}
@media (max-width: 359px) {
  body[data-page="play"]:not(.chase-active) .controller { padding-inline: 12px; }
  body[data-page="play"]:not(.chase-active) .controller-title h1 { font-size: 25px; }
  body[data-page="play"] .bingo-square { font-size: 10px; }
  body[data-page="play"] .investing-game { padding: 12px; }
}
@media (max-width: 420px) {
  body[data-page="play"] .bingo-card,
  body[data-page="play"] .bingo-letters { gap: 4px; }
  body[data-page="play"] .bingo-square { font-size: 10px; padding-inline: 2px; }
}
@media (max-width: 359px) {
  body[data-page="play"] .candy-bingo { padding-inline: 4px; }
  body[data-page="play"] .bingo-square { font-size: 9px; padding-inline: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="play"] button, body[data-page="play"] .button { transition: none; }
}