/* Classroom controls and shared display: the same ACU arcade as the player games. */
body:is([data-page="instructor"], [data-page="projector"]) {
  --class-ink: #143f4b;
  --class-muted: #4e666e;
  --class-line: #d7e4e2;
  background: #f3f7f4;
  color: var(--class-ink);
}
body:is([data-page="instructor"], [data-page="projector"]) :is(h1,h2,h3) {
  font-weight: 800;
  letter-spacing: -.035em;
}
body:is([data-page="instructor"], [data-page="projector"]) .muted { color: var(--class-muted); }
body:is([data-page="instructor"], [data-page="projector"]) .eyebrow { font-weight: 800; letter-spacing: .14em; }
body:is([data-page="instructor"], [data-page="projector"]) .panel {
  border: 1px solid var(--class-line);
  border-radius: 24px;
  box-shadow: 0 5px 0 #dee8e4;
}
body:is([data-page="instructor"], [data-page="projector"]) :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid #EC5F26;
  outline-offset: 4px;
}
body:is([data-page="instructor"], [data-page="projector"]) .button {
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 800;
  touch-action: manipulation;
}
body:is([data-page="instructor"], [data-page="projector"]) .button.primary {
  color: white;
  background: #105698;
  border-color: #105698;
  box-shadow: 0 4px 0 #0b3b68;
}
body:is([data-page="instructor"], [data-page="projector"]) .button.secondary {
  color: #105698;
  background: white;
  border: 2px solid #c9dbe8;
}
body:is([data-page="instructor"], [data-page="projector"]) .button.danger {
  color: #8b3517;
  background: #fff2e9;
  border: 1px solid #edb49b;
}
body:is([data-page="instructor"], [data-page="projector"]) .button:disabled { box-shadow: none; }
body:is([data-page="instructor"], [data-page="projector"]) .pill {
  border: 1px solid #bdd5bb;
  background: #eaf5e4;
  color: #2e6330;
  font-weight: 800;
  padding: 7px 12px;
}
body:is([data-page="instructor"], [data-page="projector"]) :is(input,select,textarea) {
  border: 2px solid #d3e0df;
  border-radius: 12px;
  min-height: 50px;
  color: var(--class-ink);
  font-size: 16px;
}

/* A browsable game library, with enough room to read before starting a portal. */
body[data-page="instructor"] .site-header { height: 100px; border-bottom: 4px solid #6AB14A; }
body[data-page="instructor"] .instructor-page { max-width: 1440px; padding-top: 36px; }
body[data-page="instructor"] .dashboard-heading h1 { font-size: clamp(30px,3vw,44px); color: #105698; }
body[data-page="instructor"] .dashboard-heading .eyebrow { color: #356b38; }
body[data-page="instructor"] .session-picker {
  background: white;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--class-line);
}
body[data-page="instructor"] .instructor-catalog { max-width: none; margin-top: 36px; }
body[data-page="instructor"] .catalog-heading h2 { font-size: clamp(28px,3vw,40px); }
body[data-page="instructor"] .room-hint { font-size: 15px; color: var(--class-muted); }
body[data-page="instructor"] .game-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
body[data-page="instructor"] .game-card {
  display: flex;
  flex-direction: column;
  background: #eaf4e3;
  border: 1px solid #c6ddbd;
  border-top: 7px solid #6AB14A;
  border-radius: 24px;
  box-shadow: 0 5px 0 #d8e4d3;
}
body[data-page="instructor"] .game-card.purple { background: #e7f0fa; border-color: #c6d9ed; border-top-color: #105698; box-shadow: 0 5px 0 #d5e1ee; }
body[data-page="instructor"] .game-card.sand { background: #fff2e7; border-color: #efdbc7; border-top-color: #EC5F26; box-shadow: 0 5px 0 #eee0d0; }
body[data-page="instructor"] .game-main { align-items: flex-start; flex-direction: column; gap: 24px; padding: 28px 28px 20px; flex: 1; }
body[data-page="instructor"] .game-icon {
  width: 74px;
  height: 74px;
  border-radius: 21px;
  background: #105698;
  color: white;
  box-shadow: 0 5px 0 #c2d5e4;
  transform: none;
}
body[data-page="instructor"] .sage .game-icon { background: #326e36; box-shadow: 0 5px 0 #c5dcb9; }
body[data-page="instructor"] .sand .game-icon { background: #105698; box-shadow: 0 5px 0 #dec9b4; }
body[data-page="instructor"] .game-icon svg { width: 42px; height: 42px; transform: none; fill: none; }
body[data-page="instructor"] .game-icon.game-emoji { width: auto; padding: 8px 16px; font-size: 38px; line-height: 1; white-space: nowrap; }
body[data-page="instructor"] .game-copy { min-width: 0; width: 100%; }
body[data-page="instructor"] .tags { justify-content: space-between; gap: 8px; }
body[data-page="instructor"] .tags .eyebrow { color: #244f5c; font-size: 10px; }
body[data-page="instructor"] .availability { color: #2e6330; background: #ffffffb8; border-radius: 999px; padding: 5px 9px; font-weight: 700; }
body[data-page="instructor"] .game-copy h3 { font-size: clamp(26px,2.3vw,32px); margin: 15px 0 12px; color: #123f4b; }
body[data-page="instructor"] .game-copy p { font-size: 15px; line-height: 1.7; color: #3f5c61; max-width: none; }
body[data-page="instructor"] .game-meta { font-size: 12px; font-weight: 700; color: #496566; }
body[data-page="instructor"] .game-footer {
  margin: 0 28px;
  padding: 18px 0 24px;
  border-top-color: #b8cfbf;
  color: #405f63;
  flex-wrap: wrap;
}
body[data-page="instructor"] .game-footer>span { flex: 1 1 130px; }
body[data-page="instructor"] .game-footer .button { min-height: 48px; gap: 12px; white-space: nowrap; }
body[data-page="instructor"] .game-number { top: 20px; bottom: auto; right: 26px; font-size: 92px; letter-spacing: -.06em; opacity: .08; }

/* Clear control panels and a portal code that is easy to share across a room. */
body[data-page="instructor"] .session-banner {
  color: white;
  background: #105698;
  border: 0;
  border-bottom: 6px solid #6AB14A;
  border-radius: 24px;
  padding: 26px 28px;
  box-shadow: 0 5px 0 #d5e1e6;
}
body[data-page="instructor"] .session-banner .eyebrow { color: #d6edc9; }
body[data-page="instructor"] .large-code { font-size: clamp(38px,4vw,54px); font-weight: 800; letter-spacing: .075em; }
body[data-page="instructor"] .session-banner .icon-button { color: white; border: 1px solid #709ac0; border-radius: 50%; min-width: 44px; min-height: 44px; }
body[data-page="instructor"] .session-stat strong { font-size: 38px; line-height: 1.1; }
body[data-page="instructor"] .session-state small { color: #d9e7f3; }
body[data-page="instructor"] .teacher-controls { margin-top: 24px; align-items: start; }
body[data-page="instructor"] .panel-heading h2 { font-size: 26px; color: #105698; }
body[data-page="instructor"] .question-panel>.panel-heading { padding-bottom: 20px; border-bottom: 1px solid #d7e4e2; }
body[data-page="instructor"] .question-panel>label { font-size: 14px; color: #345c5f; }
body[data-page="instructor"] :is(.budget-teacher,.invest-teacher,.chase-teacher,.bingo-teacher,.price-teacher,.offer-teacher) { margin-top: 24px; }
body[data-page="instructor"] :is(.budget-teacher,.invest-teacher,.chase-teacher,.bingo-teacher,.price-teacher,.offer-teacher)>h3 { font-size: 28px; color: #105698; }
body[data-page="instructor"] :is(.budget-teacher,.invest-teacher,.chase-teacher,.bingo-teacher,.price-teacher,.offer-teacher)>p { color: #425d65; font-size: 15px; line-height: 1.7; }
body[data-page="instructor"] .control-buttons { gap: 12px; margin: 22px 0; }
body[data-page="instructor"] .control-buttons .button { font-size: 14px; min-height: 48px; padding: 12px 18px; }
body[data-page="instructor"] .class-notice { background: #eaf5e4; border-color: #bfd7b5; color: #2d6032; border-radius: 15px; }
body[data-page="instructor"] .current-question { background: #edf3fa; border-color: #cbddee; border-radius: 18px; padding: 22px; }
body[data-page="instructor"] .current-question h3 { font-size: 25px; color: #123f4b; }
body[data-page="instructor"] .roster ul { margin-top: 0; }
body[data-page="instructor"] .roster li { padding: 14px 0; color: #244d58; font-weight: 700; }
body[data-page="instructor"] .roster small { font-size: 12px; font-weight: 400; }
body[data-page="instructor"] .end-controls { border-top: 1px solid var(--class-line); padding-top: 18px; gap: 10px; }
body[data-page="instructor"] .end-controls .button { font-size: 12px; padding: 10px 14px; }
body[data-page="instructor"] .tab-buttons { background: #e7eff5; border-radius: 999px; padding: 5px; gap: 4px; }
body[data-page="instructor"] .tab-buttons button { border-radius: 999px; min-height: 42px; color: #315a70; font-weight: 800; padding: 10px 16px; }
body[data-page="instructor"] .tab-buttons button[aria-pressed="true"] { background: #105698; color: white; box-shadow: 0 2px 4px #0d3e6020; }
body[data-page="instructor"] .reset-dialog { border-radius: 24px; border: 2px solid #dae4df; }

/* Shared answers and results retain their correctness cues. */
body:is([data-page="instructor"], [data-page="projector"]) .question-options>div { background: #105698; border: 2px solid #105698; border-radius: 15px; font-weight: 700; }
body:is([data-page="instructor"], [data-page="projector"]) .question-options>div>b { background: #ffffff20; border-radius: 9px; }
body:is([data-page="instructor"], [data-page="projector"]) .question-options>:is(.correct-option,.correct-reveal) { background: #2d6836; border-color: #6AB14A; box-shadow: 0 0 0 2px #6ab14a33; }
body:is([data-page="instructor"], [data-page="projector"]) .question-options>.incorrect-reveal { border-color: #EC5F26; }
body:is([data-page="instructor"], [data-page="projector"]) .table-scroll { border: 1px solid #dce6e5; border-radius: 16px; }
body:is([data-page="instructor"], [data-page="projector"]) th { background: #e7eff5; color: #345a70; font-weight: 800; padding: 15px; }
body:is([data-page="instructor"], [data-page="projector"]) td { color: #244e59; padding: 17px 15px; border-color: #e1e9e5; }
body:is([data-page="instructor"], [data-page="projector"]) tbody tr:nth-child(even) { background: #f7faf8; }
body:is([data-page="instructor"], [data-page="projector"]) progress { height: 10px; border-radius: 999px; border: 0; overflow: hidden; accent-color: #6AB14A; }
body:is([data-page="instructor"], [data-page="projector"]) progress::-webkit-progress-bar { background: #e7efe8; }
body:is([data-page="instructor"], [data-page="projector"]) progress::-webkit-progress-value { background: #6AB14A; border-radius: 999px; }
body:is([data-page="instructor"], [data-page="projector"]) progress::-moz-progress-bar { background: #6AB14A; border-radius: 999px; }
body:is([data-page="instructor"], [data-page="projector"]) .podium-place { border: 1px solid #ccdae3; border-radius: 20px; background: #edf3fa; }
body:is([data-page="instructor"], [data-page="projector"]) .podium-place:first-child { border: 2px solid #6AB14A; background: #eaf5e4; }
body:is([data-page="instructor"], [data-page="projector"]) .podium-place h3 { color: #105698; }
body:is([data-page="instructor"], [data-page="projector"]) .podium-place strong { color: #2c6333; font-size: 38px; }

/* The universal leaderboard reads like the game's shared big screen. */
body[data-page="projector"] .projector-screen { padding: 28px 3.5% 48px; gap: 26px; }
body[data-page="projector"] .projection-banner {
  padding: 28px 34px;
  border-radius: 26px;
  background: #105698;
  color: white;
  border-bottom: 7px solid #6AB14A;
  gap: 12px;
  box-shadow: 0 5px 0 #d2e0e5;
}
body[data-page="projector"] .projection-banner .eyebrow { color: #d6edc9; }
body[data-page="projector"] .projection-banner .leaderboard-title { font-size: clamp(26px,4vw,62px); color: white; gap: 24px; margin-top: 12px; }
body[data-page="projector"] .projection-banner .leaderboard-code-group { background: #fff; color: #105698; border-radius: 18px; padding: 8px 20px; gap: 12px; }
body[data-page="projector"] .projection-banner .leaderboard-code-label { color: #426579; font-size: clamp(13px,1.6vw,23px); font-weight: 700; }
body[data-page="projector"] #projection-code { font-size: clamp(30px,5.4vw,76px); color: #105698; font-weight: 800; letter-spacing: .025em; }
body[data-page="projector"] #projection-connection { color: #dbeaf4; font-size: 14px; }
body[data-page="projector"] .projection-question { border-top: 6px solid #6AB14A; padding: clamp(24px,3vw,42px); }
body[data-page="projector"] #projection-phase { color: #326c39; font-size: clamp(12px,1vw,16px); }
body[data-page="projector"] #projection-question { color: #123f4b; margin: 16px 0 26px; font-size: clamp(30px,3.5vw,56px); }
body[data-page="projector"] #projection-options:empty { display: none; }
body[data-page="projector"] #projection-answer { color: #2e6531; background: #eaf5e4; border: 2px solid #6AB14A; border-radius: 20px; font-size: clamp(36px,5vw,72px); }
body[data-page="projector"] #projection-explanation { color: #2f5d37; border-color: #b5d3aa; background: #f0f8eb; }
body[data-page="projector"] .panel-heading h2 { font-size: clamp(24px,2.3vw,34px); color: #105698; }
body[data-page="projector"] #projection-count { padding: 8px 14px; border-radius: 999px; background: #eaf5e4; color: #2e6330; font-weight: 800; }
body[data-page="projector"] #projection-progress { margin-bottom: 18px; }
body[data-page="projector"] #game-leaderboard-body tr:first-child { background: #eaf5e4; }
body[data-page="projector"] #game-leaderboard-body tr:first-child td { color: #285d2e; font-weight: 800; }
body[data-page="projector"] #game-leaderboard-body td:nth-child(3) { color: #105698; font-size: clamp(22px,2vw,32px); font-weight: 800; }

@media (hover:hover) {
  body:is([data-page="instructor"], [data-page="projector"]) .button.primary:not(:disabled):hover { background: #2f6d36; border-color: #2f6d36; color: white; box-shadow: 0 4px 0 #214f27; }
  body:is([data-page="instructor"], [data-page="projector"]) .button.secondary:not(:disabled):hover { background: #eaf5e4; border-color: #6AB14A; color: #2c6031; }
  body:is([data-page="instructor"], [data-page="projector"]) .button.danger:not(:disabled):hover { background: #ffe3d3; border-color: #EC5F26; color: #812f13; }
  body[data-page="instructor"] .tab-buttons button:not([aria-pressed="true"]):hover { color: #105698; background: #d6e5f1; }
  body[data-page="instructor"] .session-banner .icon-button:hover { background: #ffffff20; border-color: white; }
}
@media (max-width: 900px) {
  body[data-page="instructor"] .game-main { padding: 24px 22px 20px; }
  body[data-page="instructor"] .game-footer { margin-inline: 22px; }
  body[data-page="instructor"] .game-footer .button { width: 100%; }
  body[data-page="instructor"] .tags { align-items: flex-start; flex-direction: column; }
  body[data-page="projector"] .projection-banner { padding: 24px; }
}
@media (max-width: 640px) {
  body[data-page="instructor"] .site-header { height: 88px; }
  body[data-page="instructor"] .instructor-page { padding: 26px 16px 42px; }
  body[data-page="instructor"] .dashboard-heading { gap: 10px; }
  body[data-page="instructor"] .dashboard-heading>div { flex-basis: 100%; }
  body[data-page="instructor"] .dashboard-heading>.button { font-size: 13px; padding: 10px 16px; }
  body[data-page="instructor"] .session-picker { padding: 16px; gap: 12px; }
  body[data-page="instructor"] .session-picker label { max-width: none; min-width: 0; flex-basis: 100%; }
  body[data-page="instructor"] .session-picker>.button { width: 100%; }
  body[data-page="instructor"] .game-list { grid-template-columns: 1fr; gap: 22px; }
  body[data-page="instructor"] .tags { flex-direction: row; align-items: center; }
  body[data-page="instructor"] .game-footer .button { width: auto; }
  body[data-page="instructor"] .game-copy h3 { font-size: 29px; }
  body[data-page="instructor"] .session-banner { padding: 22px 20px; gap: 20px; }
  body[data-page="instructor"] .session-banner>div:first-child { width: 100%; }
  body[data-page="instructor"] .session-stat { max-width: none; }
  body[data-page="instructor"] .session-banner>.button { width: 100%; margin: 0; }
  body[data-page="instructor"] .panel { padding: 20px 16px; border-radius: 21px; }
  body[data-page="instructor"] .panel-heading { flex-wrap: wrap; }
  body[data-page="instructor"] .control-buttons .button { flex: 1 1 180px; }
  body[data-page="instructor"] .question-select { gap: 10px; margin-bottom: 16px; }
  body[data-page="instructor"] .question-select .button { width: 100%; }
  body[data-page="instructor"] .results-toolbar { align-items: stretch; }
  body[data-page="instructor"] .tab-buttons { width: 100%; }
  body[data-page="instructor"] .tab-buttons button { flex: 1; }
  body[data-page="projector"] .projector-screen { padding: 16px 12px 32px; gap: 20px; }
  body[data-page="projector"] .projection-banner { padding: 20px 18px; border-radius: 22px; }
  body[data-page="projector"] .projection-banner .leaderboard-title { flex-wrap: wrap; gap: 16px; font-size: 32px; }
  body[data-page="projector"] .projection-banner .leaderboard-code-group { padding: 8px 14px; gap: 10px; }
  body[data-page="projector"] #projection-code { font-size: clamp(30px,8vw,48px); }
  body[data-page="projector"] .projection-banner .leaderboard-code-label { font-size: 14px; }
  body[data-page="projector"] .panel { padding: 22px 18px; border-radius: 22px; }
  body[data-page="projector"] #projection-question { font-size: 30px; }
  body[data-page="projector"] .projection-question .question-options>div { font-size: 20px; padding: 16px; }
}

.chase-duration-label { max-width:260px; margin:18px 0; }