.all-play-stage,
.all-play-editor,
.all-play-room {
  --all-play-navy: #20233f;
  --all-play-periwinkle: #d9d8ff;
  --all-play-paper: #fffefa;
  --all-play-line: #dedee9;
  color: var(--all-play-navy);
  letter-spacing: 0;
}

/* The audience keeps the shared stage, with clue/points panels instead of teams. */
.ca-simultaneous-stage { color: #111827; }
.ca-simultaneous-stage .ca-back-left { fill: #d6efff; }
.ca-simultaneous-stage .ca-back-right { fill: #e8dcfb; }
.ca-sim-panel { position: relative; isolation: isolate; min-width: 0; min-height: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 28px 24px; text-align: center; }
.ca-sim-panel::before { content: ''; position: absolute; z-index: -1; inset: -4px; border: 2px solid #ffffffb3; border-radius: 36px; background: #e6f5ff; transform: skew(-6deg, 3deg); }
.ca-sim-clues { grid-column: 1; grid-row: 1; }
.ca-sim-points { grid-column: 3; grid-row: 1; }
.ca-sim-points::before { background: #eee4fc; transform: skew(6deg, -3deg); }
.ca-simultaneous-stage .ca-sim-panel h2 { margin: 0; font-size: 30px; font-weight: 850; line-height: 1.15; text-wrap: balance; }
.ca-sim-clues ol { position: relative; min-height: 0; overflow: auto; list-style: none; padding: 0; margin: 0; text-align: left; }
.ca-sim-clues li { padding: 10px 12px; border-left: 4px solid transparent; }
.ca-sim-clues li + li { border-top: 1px solid #ffffffb3; }
.ca-sim-clues li[aria-current="true"] { border-left-color: #4f5fd5; }
.ca-sim-clues li > span { display: block; font-size: 14px; color: #4145ad; font-weight: 700; margin-bottom: 4px; }
.ca-simultaneous-stage .ca-sim-panel .ca-clue-word { display: block; margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; overflow-wrap: anywhere; }
.ca-sim-points-value { display: block; font-size: 112px; font-weight: 850; line-height: 1; color: #4145ad; font-variant-numeric: tabular-nums; }
.ca-sim-points p { font-size: 18px; font-weight: 700; }
.ca-simultaneous-stage .ca-question { font-size: 44px; line-height: 1.12; }
.ca-sim-status { margin: 0; font-size: 20px; color: #4145ad; }
.ca-simultaneous-stage .ca-password.show-word { margin: 0; color: #111827; font-size: 52px; line-height: 1.05; }
.ca-simultaneous-stage.is-result .ca-stage-layout { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ca-simultaneous-stage.is-result .ca-center { flex: 0 0 auto; flex-direction: row; justify-content: center; flex-wrap: wrap; }
.ca-simultaneous-stage.is-result .ca-clock { flex-direction: row; gap: 8px; }
.ca-simultaneous-stage.is-result .ca-center .show-timer { font-size: 24px; }
.ca-sim-scoreboards { width: 100%; min-height: 0; flex: 1; overflow: auto; overflow-anchor: none; padding: 20px 24px; border: 1px solid #e4dcf6; border-radius: 24px; background: #fffdf9; box-shadow: 0 8px 24px #4338a512; }
.ca-sim-scoreboards:focus-visible { outline: 3px solid #6477e8; outline-offset: -3px; }
.ca-sim-scoreboard { width: 100%; text-align: left; }
.ca-sim-scoreboard + .ca-sim-scoreboard { margin-top: 20px; padding-top: 16px; border-top: 2px solid #e0d3fa; }
.ca-sim-scoreboard header { margin-bottom: 14px; }
.ca-simultaneous-stage .ca-sim-scoreboard h2 { margin: 0 0 6px; font-size: 30px; }
.ca-sim-scoreboard .all-play-outcome { margin: 0; font-size: 20px; font-weight: 750; color: #4145ad; overflow-wrap: anywhere; }
.ca-sim-leaderboard { columns: 3; column-gap: 28px; list-style: none; padding: 0; margin: 0; }
.ca-sim-leaderboard li { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; margin-bottom: 4px; break-inside: avoid; border-left: 4px solid transparent; border-bottom: 1px solid #dedee9; font-size: 22px; line-height: 1.2; }
.ca-sim-leaderboard li.is-leading { background: #ede7ff; border-left-color: #6477e8; }
.ca-sim-rank { font-weight: 750; color: #4145ad; font-variant-numeric: tabular-nums; }
.ca-sim-player-name { overflow-wrap: anywhere; }
.ca-sim-leaderboard strong { color: #4145ad; font-weight: 850; font-variant-numeric: tabular-nums; }
@media (min-width: 1600px) and (min-height: 900px) {
  .ca-simultaneous-stage .ca-sim-panel h2 { font-size: 40px; }
  .ca-simultaneous-stage .ca-sim-panel .ca-clue-word { font-size: 34px; }
  .ca-sim-points-value { font-size: 144px; }
  .ca-simultaneous-stage .ca-question { font-size: 56px; }
  .ca-simultaneous-stage .ca-password.show-word { font-size: 68px; }
  .ca-sim-leaderboard li { font-size: 24px; }
}
@media (max-width: 1100px), (max-height: 740px) {
  .ca-sim-panel { padding: 18px 16px; gap: 12px; }
  .ca-simultaneous-stage .ca-sim-panel h2 { font-size: 26px; }
  .ca-simultaneous-stage .ca-sim-panel .ca-clue-word { font-size: 24px; }
  .ca-sim-clues li { padding: 6px 10px; }
  .ca-sim-points-value { font-size: 96px; }
  .ca-simultaneous-stage .ca-question { font-size: 36px; }
  .ca-simultaneous-stage .ca-password.show-word { font-size: 42px; }
  .ca-sim-leaderboard li { font-size: 18px; padding: 4px 6px; }
}
@media (max-width: 1000px) {
  .ca-sim-leaderboard { columns: 2; }
}
@media (max-width: 700px) {
  .ca-sim-scoreboards { padding: 16px; }
  .ca-sim-panel { grid-row: 1; padding: 16px 10px; gap: 12px; }
  .ca-sim-points { grid-column: 2; }
  .ca-sim-panel::before { transform: skew(0, 3deg); border-radius: 24px; }
  .ca-sim-points::before { transform: skew(0, -3deg); }
  .ca-simultaneous-stage .ca-sim-panel h2 { font-size: 22px; }
  .ca-simultaneous-stage .ca-sim-panel .ca-clue-word { font-size: 22px; }
  .ca-sim-points-value { font-size: 72px; }
  .ca-sim-points p { font-size: 16px; }
  .ca-simultaneous-stage .ca-center { display: flex; grid-column: 1 / -1; flex-direction: column; }
  .ca-simultaneous-stage .ca-question { font-size: 28px; }
  .ca-simultaneous-stage .ca-password.show-word { font-size: 36px; }
  .ca-simultaneous-stage.is-result .ca-stage-layout { max-height: 65svh; }
  .ca-sim-leaderboard { columns: 1; }
  .ca-sim-leaderboard li { font-size: 18px; }
  .ca-simultaneous-stage .ca-sim-scoreboard h2 { font-size: 26px; }
  .ca-sim-scoreboard .all-play-outcome { font-size: 18px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .ca-sim-scoreboards { padding: 12px 16px; }
  .ca-sim-panel { padding: 10px; gap: 8px; }
  .ca-simultaneous-stage .ca-sim-panel h2 { font-size: 22px; }
  .ca-simultaneous-stage .ca-sim-panel .ca-clue-word { font-size: 18px; }
  .ca-sim-clues li { padding: 3px 8px; }
  .ca-sim-clues li > span { font-size: 12px; margin-bottom: 2px; }
  .ca-sim-points-value { font-size: 64px; }
  .ca-simultaneous-stage .ca-question, .ca-simultaneous-stage .ca-password.show-word { font-size: 28px; }
  .ca-simultaneous-stage.is-result .ca-stage-layout { max-height: 60svh; }
}

.all-play-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: 999px;
  background: #d9d8ff;
  color: #20233f;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.all-play-editor-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.all-play-ai-status {
  font-size: 14px;
}

.all-play-editor {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  padding: 16px 0 4px;
}

.all-play-editor-heading {
  justify-content: space-between;
  margin-bottom: 12px;
}

.all-play-editor-heading h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.all-play-authoring { min-width: 0; }
.all-play-authoring > .question-editor-head { margin-bottom: 16px; }
.all-play-authoring .question-editor-title-group { min-width: 0; }
.all-play-authoring .question-editor-title-group h3 { font-size: 32px; line-height: 1.15; overflow-wrap: anywhere; }
.all-play-question-nav { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 16px; }
.all-play-question-nav button {
  flex: 0 0 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d9d8ff;
  border-radius: 8px;
  background: #fff;
  color: #4245a8;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.all-play-question-nav button[aria-current="step"] { background: #5c4ac6; color: #fff; border-color: #5c4ac6; }
.all-play-question-nav button:focus-visible { outline: 3px solid #7775bf; outline-offset: 2px; }
.all-play-password-section { padding: 12px 0 20px; border-bottom: 1px solid #dedee9; }
.all-play-password-section .field { margin: 0; }
.all-play-password-section .field > span { font-size: 20px; font-weight: 800; }
.all-play-password-page { min-width: 0; }
.all-play-question-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.all-play-question-actions .button { white-space: normal; }

.all-play-clues {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 20px;
  padding: 0;
  margin: 0 0 12px;
  list-style: none;
}

.all-play-clues li {
  display: flex;
  align-items: end;
  gap: 6px;
  min-width: 0;
}

.all-play-clues .field {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.all-play-editor input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #fffefa;
}

.all-play-clues small {
  color: #575871;
  margin-left: 5px;
  font-weight: 400;
}

.all-play-clue-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  padding-bottom: 2px;
}

.all-play-clue-actions button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  padding: 0;
  border: 1px solid #dedee9;
  border-radius: 6px;
  background: #f0effa;
  color: #20233f;
  font-size: 19px;
  cursor: pointer;
}

.all-play-clue-actions button:disabled {
  opacity: .4;
  cursor: default;
}

.all-play-editor button:focus-visible,
.all-play-editor input:focus-visible,
.all-play-stage button:focus-visible {
  outline: 3px solid #7775bf;
  outline-offset: 2px;
}

.all-play-validation {
  font-size: 14px;
  color: #8a3444;
}

.all-play-room-word {
  padding: 24px 0;
  border-bottom: 1px solid #dedee9;
}

.all-play-room-word h3 {
  font-size: 20px;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.all-play-stage .show-word {
  font-size: 48px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  max-width: 100%;
  margin: 24px 0;
  color: #20233f;
}

.all-play-stage form {
  max-width: 420px;
  margin: 20px auto;
  text-align: left;
}

.all-play-stage form input,
.all-play-stage form button {
  box-sizing: border-box;
  width: 100%;
}

.all-play-own-score,
.all-play-private-status {
  padding: 12px 16px;
  background: #f0effa;
  border-radius: 6px;
}

.all-play-private-status {
  background: #fff3bd;
}

.all-play-own-score strong {
  margin-left: 12px;
  font-variant-numeric: tabular-nums;
}

.all-play-aggregate {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid #dedee9;
  border-bottom: 1px solid #dedee9;
}

.all-play-aggregate strong {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

.all-play-score-note {
  font-size: 14px;
  line-height: 1.5;
}

.all-play-scores .classroom-mini-scores > div {
  min-width: 0;
}

.all-play-scores .classroom-mini-scores span,
.all-play-editor .button {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .all-play-clues { grid-template-columns: minmax(0, 1fr); }
  .all-play-clues li { flex-wrap: wrap; }
  .all-play-clues .field { flex-basis: 100%; }
  .all-play-clue-actions { margin-left: auto; }
  .all-play-clue-actions button { width: 36px; height: 40px; }
  .all-play-stage .show-word { font-size: 36px; }
}

.hosted-page.student-page:has(.all-play-participant) {
  min-height: 100svh;
  place-items: safe center;
  padding-block: 24px max(24px, env(safe-area-inset-bottom));
}
.student-device-card:has(> .all-play-participant) { align-self: safe center; padding: 24px; }
.all-play-participant { gap: 16px; min-width: 0; }
.all-play-participant .show-progress { min-height: 34px; gap: 8px; font-size: 13px; }
.all-play-participant .show-timer { font-size: 26px; }
.all-play-phase-status { color: #57617c; font-size: 12px; font-weight: 750; }
.all-play-participant-content { display: grid; gap: 16px; min-width: 0; }
.all-play-clue-block { display: grid; gap: 8px; }
.all-play-participant p.all-play-clue-label { margin: 4px 0 0; font-size: 12px; color: #515b7a; text-transform: uppercase; }
.all-play-participant .show-word { margin: 0; font-size: 40px; line-height: 1.15; }
.all-play-response-slot { display: grid; align-content: start; gap: 12px; min-height: 184px; }
.all-play-participant form { display: grid; gap: 12px; width: 100%; max-width: none; margin: 0; }
.all-play-participant form .field { margin: 0; }
.all-play-participant form .button { min-height: 52px; }
.all-play-participant input:focus-visible { outline: 3px solid #7775bf; outline-offset: 3px; }
.all-play-participant input::placeholder { color: #65718a; opacity: 1; }
.all-play-success { display: grid; justify-items: center; gap: 8px; padding: 18px; border-radius: 8px; background: #dcf9e9; color: #155a3d; text-align: center; }
.all-play-success h3, .all-play-neutral-feedback h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.all-play-success p { color: #155a3d; font-size: 14px; }
.all-play-success-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #b3edce; color: #145136; font-size: 22px; }
.all-play-award-points { color: #5141b4; font-size: 32px; font-variant-numeric: tabular-nums; }
.all-play-success.is-compact { display: flex; justify-content: center; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
.all-play-success.is-compact h3, .all-play-success.is-compact .all-play-award-points { font-size: 18px; }
.all-play-neutral-feedback { display: grid; align-content: start; gap: 8px; padding: 16px; border-radius: 8px; background: #f0effa; color: #303453; }
.all-play-neutral-feedback p, .all-play-next-hint { font-size: 14px; line-height: 1.4; }
.all-play-personal-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 1px solid #dedee9; }
.all-play-personal-total span { font-size: 14px; }
.all-play-personal-total strong { color: #5141b4; font-size: 30px; font-variant-numeric: tabular-nums; }
.all-play-team-total { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.all-play-password-reveal { display: grid; gap: 6px; }
.all-play-participant-standings h3 { margin: 0 0 8px; font-size: 16px; }
.all-play-leaderboard { list-style: none; margin: 0; padding: 0; }
.all-play-leaderboard li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 8px; border-bottom: 1px solid #e5e5f0; font-size: 14px; }
.all-play-leaderboard li.is-you { background: #eeebff; border-radius: 6px; }
.all-play-rank { color: #565d78; font-size: 12px; font-variant-numeric: tabular-nums; }
.all-play-standing-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.all-play-standing-name small { color: #5141b4; font-size: 11px; font-weight: 750; }
.all-play-leaderboard strong { color: #353358; font-variant-numeric: tabular-nums; }
.all-play-participant p.all-play-standing-note { margin-top: 8px; font-size: 12px; line-height: 1.4; font-weight: 500; }
.all-play-participant .all-play-transition { color: #5141b4; font-size: 14px; text-align: center; }
.all-play-participant .all-play-complete-title { font-size: 28px; }
.all-play-sr-announcement { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.all-play-success.is-celebrating .all-play-award-points { animation: allPlayPointPop 1250ms ease-out both; animation-delay: var(--feedback-delay, 0ms); }
.all-play-success.is-celebrating .all-play-success-mark { animation: allPlayPointPop 1250ms ease-out both; animation-delay: var(--feedback-delay, 0ms); }
@keyframes allPlayPointPop { 0% { opacity: 0; transform: scale(.85); } 25% { opacity: 1; transform: scale(1.08); } 65%, 100% { opacity: 1; transform: scale(1); } }
.all-play-participant.is-transitioning .all-play-participant-content { animation: allPlayPhaseEnter 200ms ease-out both; animation-delay: var(--phase-delay, 0ms); }
@keyframes allPlayPhaseEnter { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .all-play-success.is-celebrating .all-play-award-points,
  .all-play-success.is-celebrating .all-play-success-mark,
  .all-play-participant.is-transitioning .all-play-participant-content { animation: none; }
}
@media (max-width: 360px) {
  .student-device-card:has(> .all-play-participant) { padding: 18px; }
  .all-play-participant .show-word { font-size: 34px; }
}

@media (max-width: 720px) {
  .hosted-page.student-page:has(.all-play-participant) {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding-block: 32px max(32px, env(safe-area-inset-bottom));
    background: linear-gradient(145deg, #fff9e6 0%, #ffffff 40%, #e3f4ff 75%, #efecff 100%);
  }
  .hosted-page.student-page:has(.all-play-participant)::before,
  .hosted-page.student-page:has(.all-play-participant)::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 160px;
    height: 240px;
    border-radius: 32px;
  }
  .hosted-page.student-page:has(.all-play-participant)::before {
    top: 8px;
    right: -48px;
    transform: rotate(16deg);
    background: #ffeb9e;
  }
  .hosted-page.student-page:has(.all-play-participant)::after {
    top: 370px;
    left: -64px;
    transform: rotate(-14deg);
    background: #dedbff;
  }
  .student-device-card:has(> .all-play-participant) {
    border: 1px solid #e1def9;
    border-top: 6px solid #8580f2;
    background: linear-gradient(150deg, #ffffff 45%, #faf8ff 100%);
    box-shadow: 0 16px 40px rgba(60, 62, 102, 0.1);
  }
}