/*
 * matolye — Interface refresh
 * A calm, readable layer that sits above the original component styles.
 * The game engines keep their own mechanics; this file unifies their shell.
 */


html { background: var(--cream); }

body {
  color: var(--navy);
  background:
    radial-gradient(circle at 8% 2%, rgba(86, 84, 199, .08), transparent 24rem),
    radial-gradient(circle at 95% 18%, rgba(255, 184, 107, .10), transparent 27rem),
    var(--cream);
  background-attachment: fixed;
  background-image:
    radial-gradient(circle at 8% 2%, rgba(86, 84, 199, .08), transparent 24rem),
    radial-gradient(circle at 95% 18%, rgba(255, 184, 107, .10), transparent 27rem);
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3, strong { text-wrap: balance; }

:focus-visible {
  outline: 4px solid #886cff;
  outline-offset: 3px;
}

.skip-link {
  color: #fff;
  background: var(--primary-dark);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.view { animation-duration: .22s; }

/* Header */

.topbar {
  grid-template-columns: minmax(200px, auto) minmax(220px, 1fr) auto auto;
  min-height: var(--header-height);
  padding: 12px clamp(18px, 3vw, 44px);
  gap: clamp(12px, 2vw, 26px);
  color: var(--navy);
  background: rgba(255, 255, 255, .91);
  border-bottom: 1px solid rgba(94, 75, 157, .14);
  box-shadow: 0 12px 34px rgba(43, 34, 79, .08);
  backdrop-filter: blur(18px) saturate(1.25);
}

.brand__mark {
  display: block;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 17px;
  box-shadow: none;
  filter: drop-shadow(0 7px 11px rgba(63, 44, 168, .18));
  transform: none;
}
.brand__copy { display: flex; flex-direction: column; line-height: 1; }
.brand__copy strong {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.055em;
}
.brand__copy span {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  justify-self: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.primary-nav button {
  min-height: 46px;
  padding: 9px 24px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 800;
}
.primary-nav [aria-current=page] {
  color: var(--primary-dark);
  background: #fff;
  border-color: rgba(91, 67, 214, .2);
  box-shadow: var(--shadow-xs);
}
.grade-context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 5px 6px 5px 13px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  font-size: 13px;
  font-weight: 750;
}
.grade-context select {
  min-height: 42px;
  padding: 7px 30px 7px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--navy);
  font: inherit;
  font-weight: 800;
}

.topbar__actions { gap: 4px; padding-left: 4px; border-left: 1px solid var(--line); }
.icon-button {
  grid-template-rows: 22px auto;
  min-width: 54px;
  min-height: 54px;
  padding: 6px 7px 4px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 13px;
}
.icon-button:hover,
.icon-button[aria-expanded="true"] { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.icon-button[aria-pressed="false"] { color: var(--ink-soft); background: var(--surface-soft); border-color: transparent; }
.icon-button__label { font-size: 10px; font-weight: 750; }

/* Shared controls */

.button {
  min-height: var(--touch);
  padding: 11px 20px;
  gap: 9px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.button:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.button:active { box-shadow: var(--shadow-xs); transform: translateY(0); }
.button--large { min-height: 56px; padding: 13px 24px; font-size: 16px; }
.button--primary {
  color: #fff;
  background: linear-gradient(135deg, #6d52e4, var(--primary));
  border-color: var(--primary);
  box-shadow: 0 9px 22px rgba(91, 67, 214, .22);
}
.button--primary:hover { background: linear-gradient(135deg, #5f45d1, var(--primary-dark)); border-color: var(--primary-dark); box-shadow: 0 12px 26px rgba(91, 67, 214, .28); }
.button--paper { background: #fff; }
.button--navy { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: none; }
.button--navy:hover { background: var(--navy-2); box-shadow: var(--shadow-sm); }
.button--ghost { color: var(--ink-soft); background: transparent; border-color: transparent; box-shadow: none; }
.button--ghost:hover { color: var(--navy); background: var(--surface-soft); box-shadow: none; transform: none; }
.button__arrow { font-size: 20px; }

.text-button {
  min-height: 48px;
  padding: 10px 14px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 0;
  border-radius: 12px;
  font-weight: 750;
}

.text-button:hover { background: #e2e3ff; }

.section-kicker,
.eyebrow {
  margin-bottom: 9px;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .01em;
  text-transform: none;
}

.section-heading h2 {
  color: var(--navy);
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.section-heading--center { margin-bottom: 30px; }
.section-heading--row { margin-bottom: 24px; }

.site-footer {
  min-height: 94px;
  padding: 20px clamp(22px, 4vw, 64px);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .86);
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.site-footer__brand { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__brand img { width: 36px; height: 36px; border-radius: 11px; }
.site-footer__brand strong { display: block; color: var(--navy); font-size: 17px; letter-spacing: -.035em; }
.site-footer__brand small { display: block; color: var(--ink-soft); font-size: 11px; }
.site-footer__actions { display:flex; align-items:center; gap:8px; }

/* Standalone privacy notice */
.legal-page { width:min(900px,calc(100% - 32px)); margin:0 auto; padding:36px 0 72px; }
.legal-brand { display:inline-flex; align-items:center; gap:12px; margin:0 0 24px; }
.legal-brand img { width:52px; height:52px; border-radius:16px; filter:drop-shadow(0 7px 11px rgba(63,44,168,.18)); }
.legal-brand span { display:flex; flex-direction:column; }
.legal-brand strong { font-size:24px; font-weight:900; letter-spacing:-.055em; }
.legal-brand small { margin-top:3px; color:var(--ink-soft); font-size:11px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.legal-card { padding:clamp(26px,5vw,56px); background:#fff; border:1px solid var(--line); border-radius:30px; box-shadow:var(--shadow-lg); }
.legal-card h1 { margin-bottom:14px; font-size:clamp(38px,6vw,64px); line-height:1; letter-spacing:-.055em; }
.legal-card h2 { margin:32px 0 8px; font-size:22px; letter-spacing:-.025em; }
.legal-card p,.legal-card li { color:var(--ink-soft); line-height:1.7; }
.legal-card a:not(.button) { color:var(--primary-dark); text-decoration:underline; text-underline-offset:3px; }
.legal-lead { max-width:700px; font-size:18px; }
.legal-note { margin:28px 0 20px; padding:16px 18px; color:var(--navy) !important; background:var(--primary-soft); border-radius:15px; }

/* Catalogue */

.view--catalog {
  max-width: var(--content-max);
  padding: 32px 24px 96px;
}

.catalog-launchpad {
  position: relative;
  isolation: isolate;
  margin-bottom: 26px;
  padding: clamp(24px, 4vw, 46px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 214, 90, .28), transparent 14rem),
    radial-gradient(circle at 76% 110%, rgba(255, 184, 107, .30), transparent 20rem),
    linear-gradient(135deg, #30225f 0%, #5338c8 58%, #644ce1 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
}
.catalog-launchpad::after {
  content: "×  +  ÷  =";
  position: absolute;
  z-index: -1;
  right: clamp(22px, 7vw, 92px);
  bottom: -18px;
  color: rgba(255, 255, 255, .09);
  font-size: clamp(70px, 11vw, 148px);
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
.catalog-hero {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  min-height: 0;
  margin: 0 0 22px;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.catalog-hero::before { content: none; }
.catalog-hero__kicker { margin: 0 0 8px; color: #d8d0ff; font-size: 13px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.catalog-hero h1 { margin: 0 0 8px; color: #fff; font-size: clamp(36px, 4vw, 58px); line-height: 1.02; letter-spacing: -.055em; }
.catalog-hero #catalogDescription { max-width: 670px; margin: 0; color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.55; }
.curriculum-source { flex-shrink: 0; min-height: 44px; padding: 10px 12px; color: #fff; background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; font-size: 13px; font-weight: 750; }
.catalog-launchpad .lesson-controls { max-width: 850px; }
.catalog-launchpad .form-field > span { color: rgba(255, 255, 255, .76); }
.catalog-launchpad .form-field select { color: var(--navy); border-color: rgba(255, 255, 255, .25); box-shadow: 0 10px 28px rgba(25, 15, 70, .22); }
.catalog-launchpad .lesson-options .button--ghost { color: #fff; background: rgba(255, 255, 255, .1); }
.catalog-launchpad .recent-activities { max-width: 850px; margin: 16px 0 0; border: 0; }
.catalog-launchpad .recent-activities summary { color: rgba(255, 255, 255, .82); }

.catalog-toolbar {
  grid-template-columns: minmax(300px, 1fr) auto;
  margin: 15px 0 12px;
  padding: 10px;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.search-field {
  min-height: 58px;
  background: var(--surface-soft);
  border: 1px solid #e1e5ee;
  border-radius: 13px;
}
.search-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(86,84,199,.15); }
.search-field__icon { width: 20px; height: 20px; margin-left: 16px; border-width: 2px; }
.search-field__icon::after { height: 2px; }
.search-field input { height: 56px; font-size: 16px; font-weight: 550; }
.search-field input::placeholder { color: #7a8499; }

.filter-controls { gap: 8px; }
.select-field {
  min-width: 185px;
  min-height: 58px;
  padding: 7px 38px 7px 13px;
  background: var(--surface-soft);
  border: 1px solid #e1e5ee;
  border-radius: 13px;
}
.select-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(86,84,199,.15); }
.select-field span { color: var(--ink-soft); font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.select-field select { min-height: 28px; font-size: 14px; font-weight: 700; }

.filter-reset {
  min-height: 58px;
  padding: 10px 15px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 1px solid #d8daf4;
  border-radius: 13px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}
.filter-reset:hover { background: #e1e2ff; }

.topic-chips {
  margin: 0 0 8px;
  padding: 6px 2px 10px;
  gap: 7px;
  border: 0;
  scrollbar-color: #c8cedd transparent;
}

.topic-chip,
.filter-chip {
  min-height: 43px;
  padding: 8px 15px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}
.topic-chip:hover,
.topic-chip.is-active,
.topic-chip[aria-pressed="true"],
.filter-chip.is-active,
.filter-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
  transform: none;
}

.catalog-meta { min-height: 50px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.catalog-meta p { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.view-option {
  width: 43px;
  height: 43px;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 11px;
}
.view-option.is-active { color: var(--primary); background: var(--primary-soft); border-color: #d8daf3; box-shadow: none; }

.topic-groups { gap: 54px; }
.topic-group { scroll-margin-top: 95px; }
.topic-group__header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 18px;
  padding-bottom: 14px;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.topic-group__icon {
  width: 52px;
  height: 52px;
  color: var(--navy);
  background: var(--primary-soft);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  font-size: 22px;
  transform: none;
}
.topic-group--coral .topic-group__icon { background: #fff0ee; }
.topic-group--teal .topic-group__icon { background: var(--violet-soft); }
.topic-group--blue .topic-group__icon { background: var(--apricot-soft); }
.topic-group__header h2 { margin-bottom: 2px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.025em; }
.topic-group__header p { color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.topic-group__count {
  min-height: 34px;
  padding: 6px 11px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

.game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.game-card {
  min-width: 0;
  min-height: 240px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transform: none;
}
.game-card:hover { border-color: #ccd2df; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.game-card__art {
  min-height: 132px; height: 132px; padding: 4px 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--card-accent) 12%, var(--paper));
  border-bottom: 1px solid var(--line);
}
.game-card__art::before, .game-card__art::after { display: none; }
.game-card:has(:focus-visible) { outline-color: var(--primary); }
.game-card.is-played::after {
  top: 13px;
  left: 13px;
  width: auto;
  padding: 5px 8px;
  color: var(--primary-dark);
  background: var(--violet-soft);
  border: 1px solid #c9bff4;
  border-radius: 8px;
  font-size: 10px;
  letter-spacing: .02em;
  transform: none;
}

.game-card__body { padding:18px; }
.game-card__meta { display:block; min-height:20px; margin-bottom:8px; color:var(--ink-soft); font-size:12px; font-weight:600; }
.game-card__meta > span {
  min-height: 24px;
  padding: 4px 8px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.game-card__meta > span:first-child { color: var(--navy); background: color-mix(in srgb, var(--card-accent) 18%, white); border-color: transparent; }
.game-card__title { margin-bottom: 4px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.game-card__topic {
  margin: 0 0 11px;
  overflow: visible;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}
.game-card__mechanic {
  min-height: 58px;
  margin: 0 0 10px;
  padding: 8px 10px;
  gap: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.game-card__mechanic > b {
  width: 35px;
  height: 35px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 0;
  border-radius: 10px;
  font-size: 16px;
}
.game-card__mechanic strong,
.game-card__mechanic small {
  overflow: visible;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
}
.game-card__mechanic strong { font-size: 13px; font-weight: 750; }
.game-card__mechanic small { color: var(--ink-soft); font-size: 12px; font-weight: 550; }
.game-card__description { margin-bottom: 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; }
.game-card__footer { padding-top: 12px; border-top: 1px solid var(--line); }
.game-card__play {
  min-height: 38px;
  padding: 7px 11px;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
}
.game-card__play b { font-size: 15px; }
.card-stars i { color: #c7ccda; -webkit-text-stroke: 0; }
.card-stars i.is-earned { color: var(--yellow); }

.topic-groups.is-compact .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic-groups.is-compact .game-card { min-height: 230px; }
.topic-groups.is-compact .game-card__button { grid-template-columns: 150px minmax(0, 1fr); }
.game-card__preview { display: block; width: 100%; max-width: 320px; height: 124px; font-family: inherit; user-select: none; }
.game-card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 99999; overflow: hidden; }
.confetti-piece { position: absolute; top: -20px; left: var(--x); width: var(--size); height: calc(var(--size) * 1.3); background: var(--color); border-radius: 2px; opacity: 0.9; animation: confettiFall 2.4s ease-out var(--delay) forwards; pointer-events: none; }
@keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; } 80% { opacity: 0.9; } 100% { transform: translateY(105vh) rotate(var(--rotation)) scale(0.6); opacity: 0; } }

.empty-state {
  padding: 50px 24px;
  background: #fff;
  border: 1px dashed #cbd1df;
  border-radius: 20px;
  box-shadow: none;
}
.empty-state__symbol { width: 72px; height: 72px; background: var(--primary-soft); border: 0; box-shadow: none; font-size: 34px; }
.empty-state h2 { font-size: 27px; font-weight: 800; }

/* Setup dialog */

.overlay { padding: 18px; }
.overlay__backdrop { background: rgba(15, 22, 43, .62); backdrop-filter: blur(10px); }

.modal {
  width: min(1020px, 100%);
  max-height: calc(100dvh - 36px);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}

.modal__close {
  width: 48px;
  height: 48px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.82);
  border: 1px solid #d8dce8;
  border-radius: 13px;
  font-size: 25px;
}
.modal__close:hover { color: var(--navy); background: #fff; border-color: #c9cfdd; transform: none; }
.setup-modal > .modal__close { top: 18px; right: 18px; }

.modal__header {
  padding: 30px 38px 24px;
  background:
    radial-gradient(circle at 90% 0, rgba(255,214,90,.28), transparent 12rem),
    linear-gradient(125deg, var(--primary-soft), var(--apricot-soft));
  border-bottom: 1px solid var(--line);
}
.modal__header h1 {
  margin-bottom: 7px;
  padding-right: 55px;
  font-size: clamp(29px, 3.5vw, 42px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.modal__header p:last-child { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

.setup-modal { width:min(860px,100%); display:flex; flex-direction:column; overflow:hidden; }
.setup-modal:has(#setupTournament:not([hidden]) .bracket) { width:min(1400px,100%); }
.setup-modal .modal__header { padding:22px 28px 16px; background:linear-gradient(125deg,#fff,var(--primary-soft)); flex-shrink:0; }
.setup-modal .modal__header h1 { font-size:30px; }
.setup-form { display:flex; flex-direction:column; min-height:0; padding:0; overflow:hidden; }
#setupContent { padding:18px 24px 24px; overflow:auto; background:var(--cream); }
#setupError,#setupStatus { margin:0; padding:0 24px; font-weight:750; }
#setupError { color:#a32332; }
#setupStatus { color:#0c6b55; }
.setup-summary { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:4px 0 10px; color:var(--navy); font-size:14px; font-weight:800; }
.setup-summary span { padding:5px 9px; background:#fff; border:1px solid #d7daeb; border-radius:999px; }
.setup-summary b { color:var(--ink-soft); }
.setup-guidance { margin:12px 0 4px; padding:12px 14px; color:var(--navy-2); background:var(--surface-soft); border-radius:var(--radius-sm); font-size:14px; line-height:1.5; }
.setup-essentials,.setup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.setup-essentials:empty { display:none; }
#participantFields { grid-column:1 / -1; }
.setup-form details { border-top:1px solid var(--line); margin-top:12px; }
.setup-form summary,.recent-activities summary,.exploration-collection > summary { cursor:pointer; min-height:48px; padding:12px 0; font-weight:650; }
.setup-form textarea { width:100%; resize:vertical; min-height:90px; padding:10px; border:1px solid var(--line); border-radius:10px; font:inherit; }
#setupTournament p { margin:12px 0 0; }
#setupTournament .bracket { max-height:min(46dvh,440px); padding:0 4px 8px; overflow:auto; gap:12px; scrollbar-gutter:stable; }
#tournamentEntrants { margin-top:14px; }
.factor-choice-field { margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:14px; }
.factor-choice-field legend { padding:0 6px; font-weight:800; }
.factor-choice-field p { margin:0 0 10px; color:var(--ink-soft); font-size:13px; }
.factor-choice-field > div { display:grid; grid-template-columns:repeat(9,minmax(42px,1fr)); gap:7px; }
.factor-choice-field label { position:relative; cursor:pointer; }
.factor-choice-field input { position:absolute; width:1px; height:1px; opacity:0; }
.factor-choice-field span { display:grid; min-height:42px; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--paper); font-weight:800; }
.factor-choice-field input:checked + span { color:white; border-color:var(--primary); background:var(--primary); }
.factor-choice-field input:focus-visible + span { outline:3px solid var(--yellow); outline-offset:2px; }
.factor-choice-field input:disabled + span { opacity:.55; cursor:default; }
.form-field { gap: 7px; font-weight: 750; }
.form-field > span { color: var(--ink-soft); font-size: 13px; letter-spacing: 0; }
.form-field input,
.form-field select,
.form-field textarea {
  min-height: 52px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}
.form-field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(91,67,214,.13); }
.modal__actions { flex-shrink:0; margin:0; padding:14px 24px; gap:10px; border-top:1px solid var(--line); background:var(--paper); }
.setup-overview { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:20px; margin-bottom:16px; padding:16px 18px; color:var(--navy); background:linear-gradient(135deg,#e9e7ff,var(--apricot-soft)); border:1px solid #cfcee9; border-radius:20px; }
.setup-overview__art { display:grid; min-height:92px; place-items:center; overflow:hidden; background:rgba(255,255,255,.75); border:1px solid rgba(23,33,61,.12); border-radius:15px; }
.setup-overview__art svg { display:block; width:100%; height:auto; }
.setup-overview .section-kicker { margin:0; }
.setup-duel-rule { margin:0; padding:10px 12px; background:#fff9dc; border-left:5px solid var(--yellow); border-radius:10px; font-size:14px; line-height:1.45; }
.setup-panel { margin-top:14px; padding:17px 18px; background:#fff; border:1px solid #dfe2ee; border-radius:18px; box-shadow:0 5px 18px rgba(23,33,61,.05); }
.setup-panel__heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.setup-panel__heading h2 { margin:1px 0 0; font-size:21px; }
.setup-panel__heading p { margin:0; color:var(--ink-soft); font-size:13px; }
.setup-panel__heading .section-kicker { color:var(--primary-dark); font-size:11px; }
.setup-panel > .form-field { max-width:360px; }
.setup-panel details { border-top:1px solid var(--line); }
.setup-panel .setup-curriculum { margin-top:12px; }
.setup-panel .setup-curriculum .setup-guidance { margin:0 0 12px; }
.setup-panel--match #setupTournament:not([hidden]) { margin:14px 0; padding:12px 14px; background:var(--surface-soft); border:1px solid var(--line); border-radius:13px; }
.setup-tournament-notice { padding:12px; color:#7a2f0b; background:#fff1e9; border:1px solid #efb08d; border-radius:11px; }
.setup-tournament-notice p { margin:5px 0 0; }
.setup-records { margin:16px 2px 0; padding:0 16px; background:#fff; border:1px solid var(--line); border-radius:15px; }

/* Full-screen game shell */

.game-overlay { padding: 0; }
.game-shell {
  color: var(--navy);
  background: var(--cream);
  background-image:
    radial-gradient(circle at 5% 10%, rgba(86,84,199,.055), transparent 22rem),
    radial-gradient(circle at 95% 90%, rgba(32,173,153,.055), transparent 25rem);
}

.game-shell__header {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 76px;
  padding: 8px clamp(14px, 2.2vw, 30px);
  gap: 16px;
  color: var(--navy);
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 15px rgba(23,33,61,.06);
}

.game-shell__identity { gap: 13px; }
.game-shell__identity h1 { margin-top: 3px; font-size: clamp(19px, 1.8vw, 25px); font-weight: 800; line-height: 1.1; }
.game-shell__meta { gap: 5px; }
.game-shell__meta .pill {
  min-height: 23px;
  padding: 4px 8px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
}
.game-shell__meta .pill--grade { color: var(--navy); background: color-mix(in srgb, var(--accent) 20%, white); border-color: transparent; }

.game-close {
  min-width: 72px;
  min-height: 48px;
  padding: 8px 12px;
  color: var(--navy);
  background: #f1f3f8;
  border: 1px solid #dce0e9;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}
.game-close:hover { color: var(--primary-dark); background: var(--primary-soft); border-color: #d7d9f3; }
.game-close span:first-child { font-size: 19px; }

.game-shell__status { gap: 7px; }
.status-chip {
  min-height: 49px;
  padding: 6px 13px;
  color: var(--navy);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.status-chip small { color: var(--ink-soft); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.status-chip strong { font-size: 18px; font-weight: 800; }
.status-chip--timer { min-width: 100px; }
.timer-ring { width: 20px; height: 20px; border-color: var(--violet); border-right-color: #d6dbe6; }

.game-shell__actions { gap: 6px; }
.round-button {
  width: 47px;
  height: 47px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 18px;
}
.round-button:hover { color: var(--primary); background: var(--primary-soft); border-color: #d7d9f3; }

.game-shell__body { grid-template-rows: auto minmax(0, 1fr); }
.game-scoreboard {
  padding: 8px 16px;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

.game-stage { padding: clamp(14px, 2vw, 28px); }
.game-loading { color: var(--ink-soft); font-weight: 650; }
.game-loading__shape {
  width: 78px;
  height: 78px;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  font-size: 43px;
}

.game-shell__footer {
  min-height: 64px;
  padding: 8px clamp(16px, 2.5vw, 32px);
  gap: 16px;
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line);
}
.game-instruction { color: var(--ink-soft); font-size: 15px; font-weight: 600; }
.game-instruction::before {
  width: 25px;
  height: 25px;
  margin-right: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 13px;
  font-weight: 800;
}

.pause-curtain { background: rgba(18,25,49,.72); backdrop-filter: blur(10px); }
.pause-card {
  padding: 36px;
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.pause-card > span { width: 68px; height: 68px; background: var(--primary-soft); border: 0; box-shadow: none; color: var(--primary); }
.pause-card h2 { font-size: 28px; font-weight: 800; }

/* Scoreboards */

.game-scoreboard,
.scoreboard,
.score-board {
  min-height: 62px;
  gap: 9px;
}

.solo-score,
.class-score {
  width: min(700px, 100%);
  min-height: 46px;
  padding: 7px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.solo-score > strong,
.class-score > b { font-size: 21px; font-weight: 800; }
.solo-score > span { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.solo-score > span b { font-size: 15px; }

.score-team {
  min-width: 220px;
  padding: 7px 13px 7px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  box-shadow: none;
}
.score-team--coral { border-left-color: var(--coral); }
.score-team > strong { font-size: 14px; font-weight: 750; }
.score-team > b { font-size: 25px; font-weight: 850; }
.score-team__turn { color: var(--ink-soft); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.score-team > small { color: var(--ink-soft); font-size: 12px; font-weight: 650; text-transform: none; }
.score-team.is-active { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.versus-chip { width: 36px; height: 36px; color: var(--primary); background: var(--primary-soft); border: 0; font-size: 10px; }
.tug-meter { font-size: 12px; font-weight: 700; letter-spacing: 0; }
.tug-meter > div { height: 11px; border: 1px solid #cbd1dc; }
.relay-label { margin-top: 1px; color: var(--ink-soft); font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; }

.class-score__hearts i { color: #d7dae3; -webkit-text-stroke: 0; }
.class-score__hearts i.is-full { color: var(--coral); }
.class-energy {
  height: 28px;
  background: #e8ebf2;
  border: 1px solid #d3d8e3;
  border-radius: 999px;
}
.class-energy > i { border: 0; }
.class-energy > span { color: var(--navy); font-size: 12px; font-weight: 750; }
.boss-meter { min-height: 48px; background: #eef2ff; border: 1px solid #d7ddf1; border-radius: 12px; }
.boss-meter__track { background: #fff; border: 0; }

/* Shared game cards and legacy interactions */

.arena-card,
.question-card,
.challenge-card {
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
}
.question-card::before,
.arena-card::before,
.challenge-card::before { display: none; }

.question-card--signature,
.question-card--mission,
.question-card--arcade.question-card--mission {
  width: min(1360px, 100%);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.question-copy { max-width: 1020px; margin-bottom: clamp(16px, 2.4vw, 26px); }
.question-copy h2,
.question-prompt,
.prompt,
.challenge-prompt {
  color: var(--navy);
  font-size: clamp(27px, 3.5vw, 48px);
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.question-copy > p:last-child:not(.question-kicker) { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); font-weight: 550; }
.question-kicker { margin-bottom: 7px; color: var(--primary); font-size: 13px; font-weight: 750; letter-spacing: .02em; text-transform: none; }
.question-experience {
  min-height: 31px;
  margin-bottom: 10px;
  padding: 5px 10px;
  gap: 5px;
  color: var(--navy);
  background: var(--primary-soft);
  border: 1px solid #d7daf4;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.question-experience b { color: var(--primary); }
body .question-card--arcade:not(.question-card--signature) .question-experience {
  min-height: 29px;
  margin-bottom: 8px;
  padding: 5px 10px;
  font-size: 11px;
}
.turn-banner {
  min-height: 36px;
  margin: -4px auto 12px;
  padding: 6px 12px;
  background: var(--yellow-soft);
  border: 1px solid #edd887;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.answers-grid,
.answer-grid,
.choices-grid,
.options-grid { gap: 12px; }

.answer-option,
.answer-button,
.answer-btn,
.option-button,
.option-btn,
.choice-button {
  min-height: 72px;
  padding: 13px 17px;
  color: var(--navy);
  background: #fff;
  border: 2px solid #d8dce7;
  border-radius: 15px;
  box-shadow: none;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
}
.answer-option:hover,
.answer-button:hover,
.answer-btn:hover,
.option-button:hover,
.option-btn:hover,
.choice-button:hover { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; transform: translateY(-1px); }
.choice-button:active { box-shadow: none; transform: translateY(0); }
.choice-button.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(86,84,199,.15); }

.answer-option.correct,
.answer-button.correct,
.choice-button.correct,
.is-correct-answer { color: #075e43; background: #e1f7ef; border-color: #49ad8a; }
.answer-option.wrong,
.answer-button.wrong,
.choice-button.wrong,
.is-wrong-answer { color: #8c2733; background: #ffebed; border-color: #db7180; }

.answer-input,
.numeric-input,
.numeric-answer input,
.answer-form input {
  min-height: 60px;
  color: var(--navy);
  background: #fff;
  border: 2px solid #ccd2df;
  border-radius: 14px;
  box-shadow: none;
  font-size: clamp(22px, 3vw, 34px);
}
.answer-input:focus,
.numeric-input:focus,
.numeric-answer input:focus,
.answer-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(86,84,199,.14); }

.feedback-banner,
.feedback {
  min-height: 58px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: none;
  font-size: 14px;
}
.feedback-banner.is-correct { background: #e1f7ef; border-color: #9cd9c3; }
.feedback-banner.is-wrong { background: #ffebed; border-color: #efb7be; }
.feedback-icon { border: 0; }

/* Results */

.results-card,
.result-screen {
  width: min(820px, 100%);
  padding: clamp(26px, 3.5vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
}
.results-card h2,
.result-screen h2 { font-size: clamp(30px, 4.5vw, 47px); font-weight: 850; letter-spacing: -.04em; }
.results-burst,
.result-icon,
.result-medal {
  width: clamp(78px, 10vw, 105px);
  margin-bottom: 15px;
  color: var(--primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(36px, 5vw, 54px);
}
.result-stars { margin: 7px 0 15px; }
.result-stars span { color: #d7dae4; font-size: clamp(26px, 3.5vw, 38px); -webkit-text-stroke: 0; }
.result-stars span.is-earned { color: var(--yellow); }
.result-metrics { margin: 8px 0 14px; gap: 8px; }
.result-metrics > div,
.result-stat { padding: 12px 8px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.result-metrics strong { font-size: clamp(21px, 2.8vw, 29px); font-weight: 820; }
.result-metrics span,
.result-stat small { color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.result-note { padding: 13px 15px; background: var(--primary-soft); border: 1px solid #d9dbf4; border-radius: 13px; }
.result-note p { color: var(--ink-soft); font-size: 13px; }
.result-note strong { color: var(--navy); font-size: 14px; }
.final-score-row > div { background: var(--surface-soft); border-color: var(--line); }

/* Teacher controls */

.drawer-backdrop { background: rgba(15,22,43,.48); backdrop-filter: blur(8px); }
.teacher-drawer {
  width: min(470px, 96vw);
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -22px 0 55px rgba(23,33,61,.18);
}
.teacher-drawer__header {
  min-height: 96px;
  padding: 18px 20px 17px 24px;
  color: var(--navy);
  background: linear-gradient(125deg, var(--primary-soft), var(--apricot-soft));
  border-bottom: 1px solid var(--line);
}
.teacher-drawer__header p { color: var(--primary); }
.teacher-drawer__header h2 { font-size: 26px; font-weight: 820; }
.teacher-drawer__header .modal__close { color: var(--ink-soft); background: #fff; border-color: var(--line); }
.teacher-drawer__body { padding: 18px; background: var(--cream); }
.tool-section {
  padding: 19px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.tool-section + .tool-section { margin-top: 13px; }
.tool-section h3 { font-size: 18px; font-weight: 800; }
.tool-badge { padding: 5px 8px; color: var(--primary-dark); background: var(--violet-soft); border: 0; font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.class-timer { color: #fff; background: var(--navy); border-radius: 13px; font-size: clamp(38px, 10vw, 52px); }
.timer-presets { gap: 6px; }
.timer-presets button {
  min-height: 43px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.timer-presets button:hover,
.timer-presets button.is-active { color: var(--primary-dark); background: var(--primary-soft); border-color: #d7daf3; }
.custom-timer-control { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.custom-timer-control input { width: 90px; min-height: 42px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--navy); background: var(--paper); }
.custom-timer-control button { min-height: 42px; padding: 6px 16px; }
.tool-actions .button { min-height: 47px; font-size: 13px; box-shadow: none; }
.switch-row { min-height: 76px; border-top: 1px solid var(--line); }
.switch-row strong { font-size: 14px; font-weight: 750; }
.switch-row small { color: var(--ink-soft); font-size: 12px; }
.switch { border: 0; background: #cbd1dd; }
.switch::after { top: 4px; left: 4px; width: 21px; height: 21px; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(23,33,61,.2); }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(22px); }
.quick-tools { gap: 8px; }
.quick-tools button {
  min-height: 68px;
  padding: 9px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.quick-tools button:hover { background: var(--primary-soft); box-shadow: none; }
.quick-tools span { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.quick-tools strong { font-size: 12px; }
.teacher-drawer__footer { min-height: 68px; color: var(--navy); background: #fff; border-top: 1px solid var(--line); }
.teacher-drawer__footer strong { font-size: 13px; }
.teacher-drawer__footer small { color: var(--ink-soft); font-size: 11px; }
.offline-dot { background: var(--violet); border: 0; }

/* Suggestion controls share a top alignment baseline; mobile keeps its one-column flow. */
.suggestion-fields { align-items: start; align-content: start; }
.suggestion-card .form-field { align-self: start; align-content: start; }
.suggestion-card .form-field > span { align-self: start; }
.suggestion-form__footer { align-items: start; }
.suggestion-status { color: var(--green); }
.toast--success { border-left-color: var(--green); }
.toast__content strong { font-size: 14px; }
.toast__content small { color: var(--ink-soft); font-size: 12px; }
.toast > span:first-child,
.toast__icon { color: var(--primary); background: var(--primary-soft); }

/* Accessibility modes */

body.large-text .game-card__meta > span,
body.large-text .game-shell__meta .pill,
body.large-text .status-chip small,
body.large-text .score-team__turn,
body.large-text .score-team > small { font-size: 13px; }

body.large-text .game-card__mechanic strong,
body.large-text .game-card__mechanic small,
body.large-text .game-card__topic { font-size: 14px; }

body.large-text .mw-arcade,
body.large-text .mw-mission,
body.large-text .sg-game { font-size: 20px; }

body.large-text .mw-arcade__button,
body.large-text .mw-arcade__status,
body.large-text .mw-pop__counter,
body.large-text .mw-token__zone-label,
body.large-text .mw-bars__slider-row label,
body.large-text .mw-bars__slider-row output { font-size: 19px; }

body.large-text .mw-line__tick span { font-size: 17px; }

body.large-text .mw-mission__button,
body.large-text .mw-probability__predict,
body.large-text .mw-probability__bar-label,
body.large-text .mw-probability__bar-value,
body.large-text .mw-probability__last,
body.large-text .mw-coordinate__mission-card,
body.large-text .mw-coordinate__legend,
body.large-text .mw-detective__case-file p,
body.large-text .mw-detective__clue,
body.large-text .mw-detective__number { font-size: 18px; }

body.large-text .mw-coordinate__cell { font-size: 16px; }

body.large-text .mw-mission__topline small,
body.large-text .mw-mission__status,
body.large-text .sg-game__eyebrow,
body.large-text .sg-game__mode,
body.large-text .sg-equation-label,
body.large-text .sg-rack-section h4,
body.large-text .sg-conveyor__label { font-size: 17px; }

body.large-text .sg-button,
body.large-text .sg-sort-card,
body.large-text .sg-progress-count { font-size: 18px; }

body.high-contrast {
  --navy: #071225;
  --ink-soft: #26334c;
  --line: #5c6678;
  --primary: #342ab4;
  --primary-dark: #211984;
  --primary-soft: #e7e5ff;
  --cream: #ffffff;
}

body.high-contrast .topbar,
body.high-contrast .game-shell__header,
body.high-contrast .game-shell__footer,
body.high-contrast .game-scoreboard,
body.high-contrast .site-footer,
body.high-contrast .teacher-drawer__footer { background: #fff; border-color: var(--navy); }

body.high-contrast .catalog-hero__badge { color: #000; background: #fff; border-color: #000; }

body.high-contrast .hero,
body.high-contrast .catalog-hero,
body.high-contrast .modal__header,
body.high-contrast .teacher-drawer__header,
body.high-contrast .curriculum-callout { background: #f0f0ff; border-color: var(--navy); }

body.high-contrast .game-card,
body.high-contrast .mode-card,
body.high-contrast .question-card,
body.high-contrast .arena-card,
body.high-contrast .challenge-card,
body.high-contrast .results-card,
body.high-contrast .tool-section { border: 2px solid var(--navy); }

body.high-contrast .question-card--signature,
body.high-contrast .question-card--mission,
body.high-contrast .question-card--arcade.question-card--mission { border: 0; box-shadow: none; }

body.high-contrast .sg-game {
  --sg-ink: #000;
  --sg-ink-2: #000;
  --sg-muted: #151515;
  --sg-canvas: #fff;
  --sg-paper: #fff;
  --sg-line: #000;
  --sg-line-dark: #000;
  --sg-blue: #173fa8;
  --sg-teal: #7258e8;
  --sg-coral: #ad2434;
}

body.high-contrast .mw-mission {
  --mission-ink: #000;
  --mission-muted: #151515;
  --mission-canvas: #fff;
  --mission-card: #fff;
  --mission-line: #000;
  --mission-teal: #7258e8;
  --mission-coral: #a92721;
  --mission-blue: #1745a4;
}

/* Responsive layout */

@media (max-width: 1180px) {
  .topbar { grid-template-columns: minmax(150px,auto) minmax(300px,1fr) auto auto; gap: 12px; }
  .brand__copy span { display:none; }
  .grade-tab { min-width: 69px; padding-right: 10px; padding-left: 10px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); }
  .hero__copy { padding: 42px; }
  .hero__playground { padding-right: 32px; }
  .mode-cards { grid-template-columns: repeat(2, 1fr); }
  .mode-card { min-height: 155px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .filter-controls { display: grid; grid-template-columns: repeat(2, 1fr) auto; }
  .select-field { min-width: 0; }
}

@media (max-width: 900px) {
  :root { --header-height: 128px; }

  .topbar {
    grid-template-columns: 1fr auto;
    min-height: var(--header-height);
    padding: 9px 14px 10px;
    gap: 7px 10px;
  }
  .brand { grid-row: 1; grid-column: 1; }
  .brand__mark { width: 45px; height: 45px; border-radius: 13px; }
  .brand__copy { display:flex; }
  .brand__copy strong { font-size:21px; }
  .brand__copy span { display:none; }
  .topbar__actions { grid-row:1; grid-column:2; border-left:0; }
  .primary-nav { grid-row:2; grid-column:1; justify-self:start; justify-content:start; }
  .grade-context { grid-row:2; grid-column:2; justify-content:end; }
  .hero-wrap { padding: 18px 15px 0; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 36px 30px 25px; text-align: center; }
  .hero h1 { max-width: 700px; margin-right: auto; margin-left: auto; }
  .hero__description { margin-right: auto; margin-left: auto; }
  .hero__actions { justify-content: center; }
  .hero__playground { padding: 18px 26px 32px; }
  .hero-board { min-height: 300px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }

  .home-section { padding: 64px 15px 0; }
  .home-section--featured { padding-top: 64px; }
  .home-section--curriculum { padding-top: 64px; padding-bottom: 70px; }
  .curriculum-callout { grid-template-columns: auto 1fr; }
  .curriculum-callout .button { grid-column: 1 / -1; width: 100%; }

  .view--catalog { padding: 18px 15px 70px; }
  .catalog-hero { min-height:0; padding:0 0 16px; }
  .catalog-hero::before { display: none; }
  .catalog-hero__badge { width: 88px; height: 88px; }
  .catalog-toolbar { margin-top: 12px; }
  .topic-group__header { align-items: start; }

  .choice-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal { max-height: calc(100dvh - 20px); border-radius: 20px; }
  .modal__header { padding: 27px 27px 21px; }
  .setup-form { padding:0; }

  .game-shell__header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 72px;
    gap: 10px;
  }
  .game-shell__identity { grid-column: 1; }
  .game-shell__status { grid-column: 2; }
  .game-shell__actions { display: flex; grid-column: 3; }
  .game-shell__footer { min-height: 58px; }
  .game-stage { padding: 14px; }
}

@media (max-width: 680px) {
  :root { --header-height: 126px; }

  body { font-size: 16px; }
  .icon-button { min-width: 46px; }
  .icon-button__label { display: none; }
  .primary-nav button { padding:8px 14px; }
  .grade-context > span { display:none; }
  .brand__copy { display:flex; }
  .brand__copy strong { font-size:19px; }
  .hero__copy { padding: 31px 20px 20px; }
  .hero h1 { font-size: clamp(40px, 12vw, 57px); }
  .hero__description { font-size: 16px; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .hero__playground { padding: 13px 14px 24px; }
  .hero-board { min-height: 260px; padding: 18px; border-radius: 18px; }
  .hero-board__equation { padding: 22px 0 18px; }
  .hero-board__answers { grid-template-columns: 1fr; }
  .hero-board__answers span { min-height: 42px; }
  .hero-board__score { align-items: start; flex-direction: column; gap: 3px; }
  .hero-stats { gap: 8px; }
  .hero-stat--note { grid-column: auto; }
  .hero-stat { min-height: 82px; padding: 13px 14px; }
  .hero-stat dt { font-size: 28px; }
  .hero-stat dd,
  .hero-stat--note dd { font-size: 12px; }

  .section-heading--row { align-items: start; flex-direction: column; gap: 12px; }
  .mode-cards { grid-template-columns: 1fr; }
  .mode-card { min-height: 138px; }

  .curriculum-callout { grid-template-columns: 1fr; padding: 25px; text-align: center; }
  .curriculum-callout__stamp { margin: auto; }

  .site-footer { align-items: flex-start; flex-direction: column; gap: 10px; }

  .catalog-launchpad { padding:24px 20px; border-radius:24px; }
  .catalog-hero { align-items:start; flex-direction:column; gap:14px; padding:0; }
  .catalog-hero h1 { font-size:clamp(36px,11vw,48px); }
  .curriculum-source { padding:9px 10px; }
  .catalog-hero__badge { display: none; }
  .filter-controls { grid-template-columns: 1fr; }
  .filter-reset { width: 100%; }
  .topic-group__header { grid-template-columns: auto minmax(0, 1fr); }
  .topic-group__count { grid-column: 2; width: max-content; }
  .game-grid,
  .topic-groups.is-compact .game-grid { grid-template-columns: 1fr; }
  .topic-groups.is-compact .game-card__button { grid-template-columns: 118px minmax(0, 1fr); }
  .game-card { min-height: 390px; }

  .overlay { padding: 10px; }
  .game-overlay { padding: 0; }
  .modal__header { padding: 24px 20px 19px; }
  .setup-form { padding: 20px; }
  .choice-cards,
  .choice-cards--four,
  .difficulty-options,
  .setup-grid,
  .team-fields { grid-template-columns: 1fr; }
  .choice-card { min-height: 92px; }
  .modal__actions { align-items:stretch; flex-direction:row; }
  .setup-modal .modal__header { padding:18px 20px 12px; }
  #setupContent { padding:12px 20px; }
  .setup-grid { grid-template-columns:1fr; }
  .modal__actions .button { flex:1; width:auto; }

  .game-shell__header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 112px;
    padding: 7px 9px;
  }
  .game-shell__identity { grid-row:1; grid-column:1; gap:7px; }
  .game-shell__actions { grid-row:2; grid-column:1 / -1; justify-content:flex-start; }
  .game-shell__actions > .button { min-height:42px; padding:6px 10px; font-size:13px; }
  .game-shell__status { grid-row:1; grid-column:2; }
  .game-close { min-width: 47px; min-height: 44px; padding: 7px; }
  .game-close span:last-child,
  .game-shell__meta { display: none; }
  .game-shell__identity h1 { max-width: 155px; font-size: 17px; }
  .status-chip { min-height: 44px; padding: 5px 9px; }
  .status-chip--timer { min-width: 83px; }
  .status-chip small { font-size: 9px; }
  .game-shell__actions .round-button { display: grid; width: 42px; height: 42px; }
  .game-shell__actions .round-button:first-child { display: grid; }
  .game-scoreboard { padding: 6px 8px; }
  .game-shell__footer { min-height: 54px; padding: 7px 10px; }
  .game-instruction {
    overflow: visible;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
  }
  .game-instruction::before { display: none; }
  .game-stage { padding: 10px; }

  .score-team { min-width: 160px; }
  .tug-meter { display: none; }
  .result-metrics { grid-template-columns: repeat(2, 1fr); }
  .results-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .results-actions .button { width: 100%; }
}

@media (orientation: landscape) and (max-height: 820px) {
  .game-shell__header { min-height: 68px; padding-top: 6px; padding-bottom: 6px; }
  .game-close { min-height: 44px; }
  .status-chip { min-height: 44px; }
  .round-button { width: 43px; height: 43px; }
  .game-scoreboard { padding-top: 6px; padding-bottom: 6px; }
  .game-scoreboard,
  .scoreboard,
  .score-board { min-height: 54px; }
  .game-shell__footer { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
  .game-stage { padding-top: 11px; padding-bottom: 11px; }
  .arena-card,
  .question-card,
  .challenge-card { padding-top: 18px; padding-bottom: 18px; }
  .question-card--signature,
  .question-card--mission,
  .question-card--arcade.question-card--mission { padding: 0; }
  .question-copy { margin-bottom: 11px; }
  .question-copy h2 { font-size: clamp(25px, 3vw, 38px); }
  .question-card--arcade:not(.question-card--signature) .question-kicker { display: none; }
  .results-card { padding-top: 22px; padding-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card:hover,
  .mode-card:hover,
  .button:hover { transform: none; }
}

/* Classroom working surfaces share the existing palette and controls. */
.lesson-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; max-width:800px; }
.lesson-options,.lesson-recent,.card-shortcuts { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
.recent-activities { margin:12px 0; border-bottom:1px solid var(--line); }
.lesson-recent { margin:0 0 12px; }
.card-shortcuts { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:12px; }
.card-shortcuts { margin:0; padding:0 16px 16px; }
.card-shortcuts [aria-pressed=true] { background:var(--yellow-soft); }
.session-review { text-align:left; margin:24px 0; }
.session-review details { border-top:1px solid var(--line); padding:14px 0; }
.session-review summary { cursor:pointer; min-height:44px; font-size:16px; }
.review-counts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.review-counts strong { font-size:24px; color:var(--primary-dark); }
#rosterForm { display:grid; gap:12px; }
#studentResult { display:block; font-size:24px; margin-top:16px; }
body.board-view .game-shell__meta,body.board-view .question-kicker,body.board-view .question-experience { display:none; }
body.board-view .game-shell__header { min-height:60px; padding:8px 20px; }
body.board-view .game-shell__identity h1 { font-size:20px; }
body.board-view .question-copy h2 { font-size:clamp(24px,3vw,36px); }
body.board-view .game-shell__body { padding:12px 20px; gap:8px; }
body.board-view .question-card { padding:16px; }
body.board-view .game-scoreboard { margin-bottom:0; }
body.board-view .game-instruction,body.board-view .feedback-slot { font-size:18px; }
body.board-view .question-copy { margin-bottom:12px; }
body.board-view .game-shell__footer { padding:8px 20px; }
body.board-view .button,body.board-view input,body.board-view select { min-height:48px; font-size:18px; }
@media (max-width:680px) { .lesson-controls { grid-template-columns:1fr; } .review-counts { grid-template-columns:1fr; } .game-shell__actions { flex-wrap:wrap; } }
.hub { max-width:var(--content-max); margin:auto; padding:32px 24px 80px; }
.hub-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
  padding:clamp(24px,3vw,38px);
  color:#fff;
  background:
    radial-gradient(circle at 88% 10%,rgba(255,214,90,.25),transparent 12rem),
    linear-gradient(135deg,#30225f,#5b43d6);
  border-radius:28px;
  box-shadow:var(--shadow-md);
}
.hub-heading .form-field { min-width:200px; }
.hub-heading .form-field > span { color:rgba(255,255,255,.72); }
.hub-heading .form-field select { border-color:rgba(255,255,255,.22); }
.activity-group { margin:28px 0 48px; }
.activity-group > h2 { font-size:clamp(24px,2.5vw,34px); letter-spacing:-.03em; }
.hub-heading h1 { margin:0; color:#fff; font-size:clamp(36px,4vw,54px); letter-spacing:-.05em; }
.hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.hub-card { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:24px; display:flex; flex-direction:column; align-items:start; gap:14px; box-shadow:var(--shadow-sm); }
.hub-card h2 { font-size:22px; line-height:1.35; margin:0; }
.hub-card p { margin:0; color:var(--ink-soft); line-height:1.6; }
.hub-card > button { margin-top:auto; }
.hub-icon { font-size:32px; min-width:64px; height:64px; display:grid; place-items:center; color:var(--primary-dark); background:var(--primary-soft); border-radius:18px; font-weight:800; }
.hub summary { cursor:pointer; min-height:48px; padding:12px 0; font-weight:700; }
.hub input,.hub select,.hub textarea,.arena-dialog input,.arena-dialog select { min-height:50px; border:1px solid var(--line-strong); border-radius:13px; padding:10px 13px; font:inherit; background:var(--paper); color:var(--navy); }
.hub textarea { width:100%; resize:vertical; }
.hub form { display:grid; gap:20px; max-width:820px; }
.hub-empty { padding:40px; background:var(--paper); border:1px dashed var(--line-strong); border-radius:20px; }
.suggestions-layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); align-items:start; gap:24px; }
.suggestions-intro { position:relative; padding:30px; overflow:hidden; color:var(--navy); background:linear-gradient(145deg,var(--primary-soft),var(--apricot-soft)); border:1px solid #d8d2f3; border-radius:26px; }
.suggestions-intro::after { position:absolute; right:-22px; bottom:-54px; color:rgba(91,67,214,.08); content:"?"; font-size:190px; font-weight:900; line-height:1; transform:rotate(10deg); }
.suggestions-intro__mark { display:grid; width:58px; height:58px; margin-bottom:26px; place-items:center; color:#fff; background:var(--primary); border-radius:18px; box-shadow:var(--shadow-sm); font-size:28px; font-weight:900; transform:rotate(-5deg); }
.suggestions-intro h2,.suggestion-card h2 { margin:0 0 12px; font-size:clamp(27px,3vw,38px); line-height:1.08; letter-spacing:-.045em; }
.suggestions-intro > p:not(.section-kicker) { position:relative; z-index:1; color:var(--ink-soft); line-height:1.65; }
.suggestions-privacy { position:relative; z-index:1; margin-top:28px; padding:18px; background:rgba(255,255,255,.76); border:1px solid rgba(91,67,214,.14); border-radius:17px; }
.suggestions-privacy strong { display:block; margin-bottom:5px; }
.suggestions-privacy p { margin:0 0 10px; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.suggestions-privacy a { color:var(--primary-dark); font-size:14px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.suggestion-card { padding:clamp(24px,3vw,36px); background:#fff; border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow-md); }
.suggestion-card form { max-width:none; margin-top:24px; }
.suggestion-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.65fr); gap:14px; align-items:start; align-content:start; }
.suggestion-card .form-field small { color:var(--ink-soft); font-size:12px; font-weight:550; }
.suggestion-card textarea { min-height:190px; line-height:1.55; }
.suggestion-form__footer { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.suggestion-grade { margin:0; padding:9px 12px; color:var(--ink-soft); background:var(--surface-soft); border-radius:12px; font-size:13px; }
.suggestion-grade strong { margin-left:4px; color:var(--navy); }
.suggestion-status { min-height:26px; margin:0; color:var(--green); font-weight:750; }
#suggestionsView .hub-heading .button--ghost { color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.16); }
@media(max-width:860px){.suggestions-layout{grid-template-columns:1fr}.suggestions-intro{padding:24px}.suggestion-fields{grid-template-columns:1fr}}
@media(max-width:520px){.suggestion-form__footer{align-items:stretch;flex-direction:column}.suggestion-form__footer .button{width:100%}}
.arena-dialog { inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; color:var(--navy); background:var(--paper); border:0; border-radius:0; }
.arena-dialog[open] { display:flex; flex-direction:column; }
#arenaBody { flex:1; padding:20px 24px; overflow:auto; min-height:0; }
.arena-dialog::backdrop { background:rgba(15,23,42,.6); }
.arena-header { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding:16px 24px; background:var(--surface-soft); }
.arena-header h2 { font-size:24px; margin:0; }
.arena-header p { margin:0 0 4px; font-size:14px; }
.arena-header > div:last-child { display:flex; gap:8px; }
.arena-config { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
.arena-scores { display:flex; align-items:center; gap:12px; margin:16px 0; }
.arena-side {
  --side-identity-bg: var(--surface-soft);
  --side-identity-fg: var(--navy);
  --side-identity-border: var(--line-strong);
  --side-identity-shadow: rgba(23,33,61,.16);
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px 16px;
  color:var(--side-identity-fg);
  background:var(--side-identity-bg);
  border:2px solid var(--side-identity-border);
  border-radius:12px;
}
.arena-side strong { font-size:28px; }
.arena-side.active { border-color:var(--side-identity-border); }
.arena-side.side-0 {
  --side-identity-bg: var(--violet-soft);
  --side-identity-fg: var(--primary-dark);
  --side-identity-border: var(--primary);
  --side-identity-shadow: rgba(86,84,199,.24);
}
.arena-side.side-1 {
  --side-identity-bg: var(--apricot-soft);
  --side-identity-fg: #933211;
  --side-identity-border: var(--coral);
  --side-identity-shadow: rgba(218,101,78,.24);
}
.side-0 { background:var(--side-identity-bg); color:var(--side-identity-fg); }
.side-1 { background:var(--side-identity-bg); color:var(--side-identity-fg); }
.arena-play { min-height:100%; padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--paper); }
.arena-play > p { line-height:1.6; }
.arena-problem { font-size:clamp(22px,2.5vw,32px); line-height:1.35; text-align:center; margin:8px 0 16px; }
#arenaFeedback { flex-shrink:0; font-size:17px; line-height:1.5; padding:12px 24px; background:var(--primary-soft); color:var(--navy); border-top:1px solid var(--line); }
#arenaFeedback:empty, #arenaFooter:empty { display:none; }
#arenaFeedback.is-correct { background:#e4f7ec; color:#0c5733; }
#arenaFeedback.is-incorrect { background:#ffeaec; color:#851923; }
#arenaFooter { display:flex; flex-shrink:0; justify-content:flex-end; gap:10px; padding:12px 24px; border-top:1px solid var(--line); background:var(--surface-soft); }
.arena-dialog .button--ghost { color:var(--navy); background:var(--paper); border:1px solid #b8c2d3; box-shadow:var(--shadow-sm); }
.arena-dialog .button--ghost:hover:not(:disabled) { background:var(--primary-soft); border-color:var(--primary); }
.arena-dialog .button--primary { color:white; background:var(--primary); border-color:var(--primary); }
.arena-dialog .button:disabled { opacity:.45; box-shadow:none; cursor:default; }
.arena-dialog .button:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.arena-dialog .arena-result { padding:24px; text-align:center; }
.arena-dialog .arena-result h3 { font-size:clamp(24px,3vw,36px); }
.arena-dialog .arena-paused { padding:48px 16px; text-align:center; }
#arenaPlay:has(.duel-lanes) { display:flex; height:100%; min-height:620px; flex-direction:column; padding:clamp(12px,1.8vw,24px); background:linear-gradient(180deg,#f8f9fc 0%,#fff 35%); }
.duel-timer { display:grid; width:min(760px,80%); margin:0 auto 8px; grid-template-columns:auto minmax(180px,1fr); align-items:center; gap:18px; }
.duel-timer > div { display:flex; align-items:baseline; gap:9px; white-space:nowrap; }
.duel-timer span,.duel-timer small { color:var(--ink-soft); font-size:13px; font-weight:700; }
.duel-timer strong { color:var(--navy); font-size:28px; font-variant-numeric:tabular-nums; }
.duel-timer__track { position:relative; display:block; height:12px; overflow:hidden; border-radius:999px; background:#dce2ed; }
.duel-timer__track i { position:absolute; inset:0; transform-origin:left center; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--primary),var(--coral)); transition:transform 80ms linear; }
.duel-timer.is-urgent strong { color:#b42318; animation:duelTimerPulse .8s ease-in-out infinite alternate; }
.duel-timer.is-urgent .duel-timer__track i { background:#ef5b5b; }
@keyframes duelTimerPulse { to { transform:scale(1.12); } }
.duel-rules { text-align:center; margin:0 0 10px; color:var(--ink-soft); font-size:13px; font-weight:700; }
.duel-lanes { display:grid; min-height:0; flex:1; grid-template-columns:minmax(0,1fr) clamp(70px,8vw,112px) minmax(0,1fr); align-items:stretch; gap:clamp(8px,1.4vw,20px); }
.duel-side { position:relative; display:flex; min-width:0; flex-direction:column; justify-content:center; overflow:hidden; border:2px solid currentColor; border-radius:20px; padding:clamp(16px,2.1vw,30px); transition:box-shadow .2s ease,transform .2s ease; }
.duel-side header { display:flex; min-height:62px; justify-content:space-between; align-items:start; gap:12px; }
.duel-side h3 { margin:0; font-size:clamp(21px,1.8vw,28px); overflow-wrap:anywhere; }
.duel-side header strong { white-space:nowrap; font-size:clamp(26px,2.3vw,34px); }
.duel-side header small { font-size:14px; }
.duel-combo { display:inline-flex; min-height:27px; align-items:center; margin-top:6px; padding:4px 9px; color:#6b3b00; background:#ffe29a; border:1px solid #f4bd35; border-radius:999px; font-size:13px; font-weight:900; animation:duelComboPop 220ms ease-out; }
@keyframes duelComboPop { from { transform:scale(.75); opacity:.4; } }
.duel-progress { margin:8px 0 0; color:currentColor; font-weight:750; }
.duel-question { display:grid; align-content:center; min-height:0; flex:1; transition:opacity .2s ease,transform .2s ease; }
.duel-side .arena-problem { max-width:100%; overflow-wrap:anywhere; font-size:clamp(30px,4vw,56px); margin:clamp(14px,2vh,26px) 0; }
.duel-options { display:grid; gap:10px; }
.duel-options button { min-height:clamp(58px,7vh,76px); padding:8px 12px; overflow-wrap:anywhere; font-size:clamp(24px,2.4vw,34px); background:white; color:inherit; border:2px solid currentColor; touch-action:manipulation; }
.duel-feedback { min-height:28px; margin:12px 0 0; font-weight:750; }
.duel-complete { display:grid; min-height:250px; place-items:center; text-align:center; font-weight:750; }
.duel-mascot { display:grid; min-width:0; align-self:center; place-items:center; pointer-events:none; text-align:center; }
.duel-mascot > div {
  display:grid;
  width:min(100%,clamp(72px,8vw,112px));
  min-height:clamp(126px,16vh,176px);
  aspect-ratio:3 / 4;
  place-items:end center;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.duel-mascot .mw-mascot { width:100%; height:auto; max-width:none; animation:mwMascotIn .45s var(--ease-bounce) both; }
.duel-mascot p { max-width:110px; margin:10px 0 0; color:var(--navy); font-size:12px; font-weight:850; line-height:1.25; }
.duel-mascot.reacts-left > div { animation:duelReactLeft .35s ease-out both; }
.duel-mascot.reacts-right > div { animation:duelReactRight .35s ease-out both; }
@keyframes duelReactLeft { 50% { transform:translateX(-5px) rotate(-5deg) scale(1.04); } }
@keyframes duelReactRight { 50% { transform:translateX(5px) rotate(5deg) scale(1.04); } }
.duel-side.is-locked { box-shadow:inset 0 0 0 5px rgba(226,84,63,.2); }
.duel-side.is-locked .duel-question { opacity:.18; transform:scale(.97); }
.duel-lock { position:absolute; inset:94px 14px 44px; z-index:3; display:grid; place-content:center; justify-items:center; padding:16px; overflow:hidden; color:var(--navy); background:rgba(255,248,221,.96); border:3px solid #dc654e; border-radius:18px; text-align:center; animation:duelLockIn .35s cubic-bezier(.34,1.4,.64,1); }
.duel-lock[hidden] { display:none; }
.duel-lock > strong { max-width:240px; line-height:1.25; }
.duel-lock > span { display:grid; width:74px; aspect-ratio:1; margin:12px; place-items:center; color:#fff; background:#d64f3a; border:5px solid #fff; border-radius:50%; box-shadow:0 0 0 4px #d64f3a; font-size:42px; font-weight:900; font-variant-numeric:tabular-nums; animation:duelLockCount .85s ease-in-out infinite alternate; }
.duel-lock > small { font-weight:750; }
.duel-lock > i { position:absolute; inset:auto 0 0; height:9px; background:#d64f3a; transform:scaleX(var(--lock-progress)); transform-origin:left; transition:transform 50ms linear; }
@keyframes duelLockIn { from { opacity:0; transform:scale(.82) rotate(-2deg); } }
@keyframes duelLockCount { to { transform:scale(1.08); } }
@media (max-width:680px) {
  #arenaPlay:has(.duel-lanes) { min-height:560px; padding:7px; }
  .duel-timer { width:100%; grid-template-columns:1fr; gap:3px; }
  .duel-timer > div { justify-content:space-between; }
  .duel-timer small { display:none; }
  .duel-rules { font-size:11px; }
  .duel-lanes { grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr); gap:3px; }
  .duel-side { padding:8px; border-radius:13px; }
  .duel-side header { min-height:72px; flex-direction:column; align-items:start; gap:2px; }
  .duel-side h3 { font-size:17px; }
  .duel-side header strong { font-size:21px; }
  .duel-side .arena-problem { font-size:clamp(24px,7.2vw,31px); }
  .duel-options button { min-height:54px; padding:6px 4px; font-size:clamp(20px,6vw,25px); }
  .duel-feedback { min-height:38px; font-size:12px; }
  .duel-mascot > div { width:min(100%,58px); min-height:70px; aspect-ratio:3 / 4; border:0; border-radius:0; box-shadow:none; }
  .duel-mascot .mw-mascot { width:100%; height:auto; }
  .duel-mascot p { display:none; }
  .duel-lock { inset:78px 3px 38px; padding:7px; border-width:2px; border-radius:11px; }
  .duel-lock > strong { font-size:12px; }
  .duel-lock > span { width:50px; margin:9px; font-size:28px; border-width:3px; box-shadow:0 0 0 2px #d64f3a; }
  .duel-lock > small { font-size:10px; }
}
.expression-tokens { display:flex; gap:8px; justify-content:center; margin:12px; flex-wrap:wrap; }
.expression-tokens .button { min-width:56px; min-height:56px; font-size:24px; padding:8px 14px; font-variant-numeric:tabular-nums; }
.expression-tokens [data-index] { background:var(--primary-soft); color:var(--primary-dark); border-color:var(--primary); }
.expression-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }
.arena-keyboard-tip { color:var(--ink-soft); text-align:center; font-size:13px; }
.expression-output { display:block; padding:16px; text-align:center; font-size:28px; background:var(--surface-soft); border:1px dashed var(--primary); border-radius:12px; margin:12px 0; }
.target-number { text-align:center; font-size:24px; }
.arena-play .target-number { display:flex; align-items:center; justify-content:center; gap:16px; width:fit-content; height:auto; aspect-ratio:auto; min-height:72px; margin:16px auto; padding:12px 24px; border:1px solid var(--line); border-radius:var(--radius-md); color:var(--navy); background:var(--primary-soft); box-shadow:none; }
.arena-play .target-number strong { font-size:36px; }
.fraction-duel { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fraction-choice { background:var(--surface-soft); border:2px solid var(--line); border-radius:16px; padding:24px; min-height:150px; color:var(--navy); }
.fraction-choice strong { font-size:36px; }
.fraction-strip { display:grid; height:48px; margin-top:20px; border:2px solid var(--navy); }
.fraction-strip i { border-right:1px solid var(--navy); }
.fraction-strip i.filled { background:var(--primary); }
.coordinate-race { display:flex; justify-content:center; align-items:center; gap:24px; }
.coordinate-board { width:280px; height:280px; display:grid; gap:1px; background:var(--line); border:1px solid var(--navy); }
.coordinate-board span { display:grid; place-items:center; background:var(--paper); }
.coordinate-board .target { background:var(--yellow-soft); }
.coordinate-board .position { background:var(--primary); color:white; }
.direction-pad { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
.tile-grid { display:grid; gap:8px; max-width:480px; margin:20px auto; }
.tile-grid.four { grid-template-columns:repeat(4,1fr); }
.tile-grid.three { grid-template-columns:repeat(3,1fr); max-width:300px; }
.tile { min-height:64px; background:var(--surface-soft); color:var(--navy); border:2px solid var(--line); border-radius:10px; font:inherit; font-size:26px; display:grid; place-items:center; padding:8px; }
.tile small { font-size:14px; }
.tile.claimed.side-0 { background:#e4edff; color:#174796; }
.tile.claimed.side-1 { background:#ffede5; color:#933211; }
.tile.solved { background:var(--green); color:white; }
.tile.lit { background:var(--yellow); color:var(--navy); }
.factor-controls { display:flex; justify-content:center; align-items:center; gap:16px; }
.factor-controls label { display:grid; gap:4px; }
.nim-pile { display:flex; gap:16px; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); padding:12px 0; }
.nim-pile > span { font-size:24px; min-width:240px; color:var(--primary-dark); }
.nim-pile > div { display:flex; flex-wrap:wrap; gap:6px; }
.mathler-container { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 600px; margin: 0 auto; }
.mathler-target-card { display: flex; flex-direction: column; align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; padding: 10px 24px; box-shadow: var(--shadow-sm); }
.mathler-target-card .arena-problem { font-size: inherit; margin: 0; display: flex; flex-direction: column; align-items: center; }
.mathler-target-badge { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--primary); text-transform: uppercase; }
.mathler-target-value { font-size: 36px; font-weight: 900; line-height: 1.1; color: var(--navy); }
.mathler-target-meta { font-size: 13px; color: var(--ink-soft); }
.mathler-instruction { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 0; }
.mathler-board { display: grid; gap: 6px; margin: 6px auto; }
.mathler-board-row { display: flex; justify-content: center; gap: 6px; }
.mathler-row { display: flex; justify-content: center; gap: 6px; }
.mathler-cell { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--navy); font-size: 22px; font-weight: 800; box-sizing: border-box; transition: transform 0.15s ease, border-color 0.15s ease; user-select: none; }
.mathler-cell.empty { border-color: #d8deeb; background: #fbfcfe; }
.mathler-cell.filled { border-color: var(--navy-3); animation: mathlerPop 0.12s ease-out; }
.mathler-cell.active-cell { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(86, 84, 199, 0.25); }
.mathler-cell.exact { background: #16845a; border-color: #16845a; color: #ffffff; }
.mathler-cell.present { background: #f7c948; border-color: #f7c948; color: #3b2a03; }
.mathler-cell.absent { background: #738096; border-color: #738096; color: #ffffff; }
.mathler-cell small { display: none; }
@keyframes mathlerPop { 0% { transform: scale(0.85); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.mathler-legend { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--ink-soft); margin: 2px 0 6px; }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.legend-dot.exact { background: #16845a; }
.legend-dot.present { background: #f7c948; }
.legend-dot.absent { background: #738096; }
.mathler-form { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.mathler-tile-instruction { flex-basis: 100%; margin: 0; text-align: center; color: var(--muted); }
.mathler-actions { flex-basis: 100%; display: flex; justify-content: center; gap: 8px; }
.mathler-submit-btn { flex: 0 0 auto; min-height: 44px; padding: 0 18px; font-weight: 700; }
.mathler-keyboard { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; align-items: center; margin-top: 4px; }
.mathler-key-row { display: flex; justify-content: center; gap: 5px; width: 100%; }
.mathler-key { min-width: 38px; height: 46px; padding: 0 6px; border: 1px solid #d4d9e4; border-radius: 8px; background: #eceff5; color: var(--navy); font-size: 17px; font-weight: 750; cursor: pointer; touch-action: manipulation; display: grid; place-items: center; transition: background 0.15s ease, transform 0.08s ease; }
.mathler-key:active { transform: scale(0.94); }
.mathler-key.key-exact { background: #16845a; border-color: #16845a; color: #ffffff; }
.mathler-key.key-present { background: #f7c948; border-color: #f7c948; color: #3b2a03; }
.mathler-key.key-absent { background: #8b95a5; border-color: #8b95a5; color: #ffffff; opacity: 0.65; }
@media (max-width: 480px) {
  .mathler-key-row { gap: 4px; }
  .mathler-key-row .mathler-key { flex: 1 1 0; min-width: 0; padding-inline: 2px; font-size: 16px; }
}
#mathlerForm { max-width: 680px; margin: auto; }
.hanoi-board { display:flex; gap:16px; margin:24px 0; }
.hanoi-peg { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; flex:1; height:250px; border:2px solid var(--line); border-bottom:8px solid var(--navy); border-radius:12px 12px 0 0; background:var(--surface-soft); color:var(--navy); }
.hanoi-peg.selected { border-color:var(--primary); }
.hanoi-disk { background:var(--primary); color:white; border-radius:8px; min-height:30px; display:grid; place-items:center; }
.sudoku .tile { border-radius:0; }
.sudoku { gap:2px; border:3px solid var(--navy); }
.sudoku .tile:nth-child(4n+2) { border-right:3px solid var(--navy); }
.sudoku .tile:nth-child(n+5):nth-child(-n+8) { border-bottom:3px solid var(--navy); }
.sudoku select { width:100%; font-size:24px; }
.sudoku .given { background:var(--primary-soft); font-weight:800; }
.dots-board { display:grid; grid-template-columns:repeat(3,28px 72px) 28px; grid-template-rows:repeat(3,28px 72px) 28px; justify-content:center; margin:16px auto; }
.dot,.box-owner { display:grid; place-items:center; }
.edge { background:var(--surface-soft); border:1px dashed var(--ink-soft); border-radius:6px; position:relative; }
.edge::before { content:''; position:absolute; inset:-8px; }
.edge.drawn { background:currentColor; border:0; }
.table-scroll { overflow:auto; margin:20px 0; }
.hub table { width:100%; border-collapse:collapse; background:var(--paper); }
.hub th,.hub td { text-align:left; padding:16px; border-bottom:1px solid var(--line); }
.hub caption { text-align:left; padding:12px; }
.bracket { display:flex; overflow:auto; gap:24px; margin:24px 0; }
.bracket section { min-width:240px; flex:1; }
.bracket-match { border:1px solid var(--line); background:var(--paper); padding:16px; border-radius:12px; margin-bottom:12px; }
.bracket-match.active { border:2px solid var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.bracket-match--pending { color:var(--ink-soft); border-style:dashed; background:var(--surface-soft); }
.idea-card { border-top:1px solid var(--line); padding:16px 0; }
.idea-body { white-space:pre-wrap; }
.arena-result,.arena-paused { text-align:center; padding:32px 0; }
body.high-contrast .hub-card,body.high-contrast .arena-dialog,body.high-contrast .tile { border-color:currentColor; }
@media (max-width:900px) { .hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .hub { padding:18px 15px 50px; } .hub-heading { align-items:start; flex-direction:column; gap:8px; } .hub-heading h1 { margin-bottom:0; } .hub-heading .form-field { width:100%; } .hub-grid,.arena-config { grid-template-columns:1fr; } .arena-dialog { padding:14px; } .arena-header { align-items:start; } .arena-header h2 { font-size:20px; } .arena-header > div:last-child { flex-direction:column; } .arena-scores { flex-wrap:wrap; } .arena-side { padding:6px 10px; } .coordinate-race { flex-direction:column; } .fraction-duel { gap:8px; } .fraction-choice { padding:12px; } .mathler-row { gap:2px; } .mathler-cell { width:32px; font-size:18px; } .hanoi-board { gap:6px; } }
@media (max-width:680px) {
  .arena-dialog { padding:0; }
  #arenaBody { padding:10px; }
  .factor-choice-field > div { grid-template-columns:repeat(6,minmax(40px,1fr)); }
  .setup-modal .setup-form { padding:0; }
  .setup-overview { grid-template-columns:1fr; gap:10px; padding:12px; }
  .setup-overview__art { display:none; }
  .setup-panel { padding:14px; }
  .setup-panel__heading { align-items:start; flex-direction:column; gap:4px; }
  .setup-essentials { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  body:not(.motion-on) .duel-timer__track i,body:not(.motion-on) .duel-lock > i,body:not(.motion-on) .duel-side,body:not(.motion-on) .duel-question { transition:none; }
  body:not(.motion-on) .duel-timer.is-urgent strong,body:not(.motion-on) .duel-combo,body:not(.motion-on) .duel-lock,body:not(.motion-on) .duel-lock > span,body:not(.motion-on) .duel-mascot.reacts-left > div,body:not(.motion-on) .duel-mascot.reacts-right > div { animation:none; }
}
body.reduced-motion .duel-timer__track i,body.reduced-motion .duel-lock > i,body.reduced-motion .duel-side,body.reduced-motion .duel-question { transition:none; }
body.reduced-motion .duel-timer.is-urgent strong,body.reduced-motion .duel-combo,body.reduced-motion .duel-lock,body.reduced-motion .duel-lock > span,body.reduced-motion .duel-mascot.reacts-left > div,body.reduced-motion .duel-mascot.reacts-right > div { animation:none; }
.explorer-dialog { width:min(880px,96vw); }
.explorer-dialog h3 { font-size:26px; }
.explorer-dialog input,.explorer-dialog select { min-height:48px; }
.explorer-dialog input[type=range] { padding:0; }
.integer-learning-spotlight { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; margin:0 0 28px; padding:28px; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line)); border-radius:22px; background:linear-gradient(135deg,var(--primary-soft),var(--paper)); box-shadow:var(--shadow-sm); }
.integer-learning-spotlight h2 { margin:4px 0 8px; font-size:clamp(28px,3vw,42px); }
.integer-learning-spotlight p { max-width:72ch; }
.integer-learning-spotlight ul { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.integer-learning-spotlight li { padding:7px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-weight:700; }
.integer-lab-dialog { width:min(1120px,97vw); max-height:96dvh; padding:0; overflow:hidden; }
.integer-lab-dialog>.arena-header,.integer-lab-dialog>footer { padding:16px 20px; flex-shrink:0; }
.integer-lab-dialog>footer { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--line); background:var(--paper); }
.integer-lab-dialog>footer p { margin:0; }
.integer-lab-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px 20px; background:var(--surface-soft); border-bottom:1px solid var(--line); }
.integer-lab-tabs button { min-height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--navy); font-weight:800; }
.integer-lab-tabs button[aria-current=page] { color:white; background:var(--primary); border-color:var(--primary); }
#integerLabBody { min-height:0; overflow:auto; padding:22px; }
#integerLabFeedback { min-height:24px; margin:0; padding:0 22px 8px; color:var(--primary); font-weight:750; }
.integer-lab-lesson { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(460px,1.45fr); gap:18px; align-items:start; }
.integer-lab-copy,.integer-lab-world,.integer-lab-controls,.integer-lab-explanation,.integer-inverse-card { border:1px solid var(--line); border-radius:18px; background:var(--paper); padding:18px; }
.integer-lab-copy h3 { margin:6px 0 8px; }
.integer-lab-stage { color:var(--primary); font-weight:850; }
.integer-lab-world { min-height:250px; display:grid; place-items:center; overflow:hidden; }
.integer-lab-controls,.integer-lab-explanation { grid-column:1/-1; }
.integer-lab-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.integer-lab-explanation { text-align:center; background:var(--primary-soft); }
.integer-lab-explanation>strong { display:block; font-size:clamp(26px,4vw,44px); }
.integer-view-switch,.integer-factor-choices { display:flex; flex-wrap:wrap; gap:6px; }
.integer-lab-line { width:100%; min-width:540px; stroke:var(--navy); fill:var(--navy); }
.integer-lab-line text { stroke:none; font-size:13px; font-weight:700; }
.integer-lab-line .integer-lab-zero { stroke:var(--primary); stroke-width:3; stroke-dasharray:5 5; }
.integer-lab-marker circle { stroke:none; fill:var(--primary); }
.integer-lab-marker.marker-1 circle { fill:var(--coral); }
.integer-lab-marker text { fill:white; font-size:11px; }
.integer-lab-arrow { fill:none; stroke:var(--violet); stroke-width:5; }
.integer-stepper { display:grid; grid-template-columns:auto auto auto; gap:8px; align-items:center; min-width:min(100%,350px); }
.integer-stepper>strong { grid-row:1; grid-column:1/-1; text-align:center; font-size:30px; }
.integer-stepper input { grid-column:1/-1; width:100%; }
.integer-building { width:min(100%,460px); display:flex; flex-direction:column; border:3px solid var(--navy); border-radius:12px; overflow:hidden; }
.integer-building>div { display:flex; justify-content:space-between; min-height:30px; padding:4px 12px; border-bottom:1px solid var(--line); }
.integer-building .is-zero { border-block:3px solid var(--primary); background:var(--primary-soft); }
.integer-building .is-a { box-shadow:inset 8px 0 var(--primary); }
.integer-building .is-b { box-shadow:inset -8px 0 var(--coral); }
.thermometer-scale { width:220px; border-left:18px solid var(--coral); border-radius:12px; }
.thermometer-scale span { display:flex; justify-content:space-between; min-height:34px; padding-left:16px; border-bottom:1px solid var(--line); }
.thermometer-scale .is-zero { border-bottom:3px solid var(--primary); }
.thermometer-scale .is-marked { background:var(--primary-soft); }
.integer-counter-board { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:12px; min-height:160px; }
.integer-counter-board button { width:64px; height:64px; border:0; border-radius:18px; color:white; background:var(--violet); font-size:20px; font-weight:900; box-shadow:0 7px 0 color-mix(in srgb,var(--violet) 65%,black); }
.integer-counter-board button[data-sign=negative] { background:var(--coral); box-shadow:0 7px 0 color-mix(in srgb,var(--coral) 65%,black); }
.integer-counter-total { display:block; text-align:center; font-size:22px; }
.integer-pattern-layout { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:18px; }
.integer-pattern-intro { grid-column:1/-1; }
.integer-pattern-layout .integer-lab-world { display:block; }
.integer-pattern-table td,.integer-pattern-table th { text-align:center; }
.integer-pattern-complete { color:var(--green); font-weight:800; }
.integer-inverse-card h4 { font-size:24px; margin-top:0; }
.integer-inverse-card>p:first-of-type { font-size:26px; font-weight:850; }
.integer-inverse-card>div { display:flex; flex-wrap:wrap; gap:6px; }
@keyframes integerMove { from { opacity:.35; stroke-dashoffset:180; } to { opacity:1; stroke-dashoffset:0; } }
.integer-addition-run .integer-lab-arrow { stroke-dasharray:180; animation:integerMove .7s ease-out both; }
body.reduced-motion .integer-addition-run .integer-lab-arrow { animation:none; stroke-dasharray:none; }
@media(max-width:760px){
 .integer-learning-spotlight,.integer-lab-lesson,.integer-pattern-layout { grid-template-columns:1fr; }
 .integer-learning-spotlight .button { width:100%; }
 .integer-lab-dialog>footer { align-items:stretch; flex-direction:column; }
 .integer-lab-dialog>footer>div { display:flex; gap:6px; }
 .integer-lab-tabs { grid-template-columns:1fr 1fr; padding:8px; }
 #integerLabBody { padding:12px; }
 .integer-lab-world { min-height:210px; overflow:auto; justify-content:start; }
 .integer-lab-line { min-width:600px; }
}
.explorer-participation { background:var(--primary-soft); border-radius:8px; padding:12px; }
.explorer-equation { text-align:center; font-size:36px!important; }
.balance-model { display:flex; justify-content:center; align-items:center; gap:20px; padding:20px; border-bottom:4px solid var(--primary); }
.balance-model div { min-width:140px; padding:24px; text-align:center; border:2px solid var(--primary); border-radius:0 0 50% 50%; font-size:24px; background:var(--surface-soft); }
#balanceForm { display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin:20px 0; }
#balanceForm input { max-width:130px; }
.explorer-strips { display:grid; gap:24px; margin:24px 0; }
.explorer-strips .fraction-strip { width:100%; height:56px; margin-top:8px; }
.shared-number-line { position:relative; margin:32px 0 56px; border-top:2px solid var(--navy); display:flex; justify-content:space-between; }
.shared-number-line i { position:absolute; top:-8px; border-top:14px solid var(--primary); font-style:normal; padding-top:12px; transform:translateX(-50%); }
.shared-number-line i:first-of-type { padding-top:40px; }
.rectangle-model { display:grid; grid-auto-rows:24px; gap:1px; margin:20px auto; width:max-content; border:3px solid var(--primary); }
.rectangle-model i { background:var(--primary-soft); border:1px solid var(--primary); }
.explorer-adjust,.experiment-buttons,.fraction-predictions { display:flex; flex-wrap:wrap; gap:8px; }
.explorer-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin: 16px 0; }
@media (max-width: 768px) { .explorer-split { grid-template-columns: 1fr; gap: 16px; } }
.explorer-col { display: flex; flex-direction: column; gap: 10px; }
.explorer-col--visual { align-items: center; text-align: center; width: 100%; }
.explorer-col--data { width: 100%; }
.explorer-table { border-collapse:collapse; width:100%; margin:16px 0; }
.explorer-table th,.explorer-table td { text-align:left; border-bottom:1px solid var(--line); padding:10px; }
.explorer-angle { width:360px; max-width:100%; height:220px; display:block; margin:auto; }
#angleEstimate,#probabilityPredict { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
.probability-bag { display:flex; justify-content:center; gap:12px; margin:20px 0; }
.probability-bag span { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; font-weight:800; }
.red-stone { background:#ad2638; color:white; }.blue-stone { background:#2857a8; color:white; }
.sample-bar { position:relative; height:32px; background:#e4edff; margin:16px 0; }
.sample-bar i { display:block; background:#ad2638; height:100%; }
.sample-bar span { position:absolute; top:-5px; height:42px; border-left:3px dashed var(--navy); }
#explorerFeedback { font-size:18px; padding:12px; background:var(--surface-soft); border-radius:8px; }
.quantity-diagram { display:block; width:300px; max-width:100%; height:190px; margin:auto; font-size:16px; }
.offline-update { position:fixed; z-index:1500; bottom:16px; left:16px; right:16px; display:flex; gap:16px; align-items:center; background:var(--paper); border:2px solid var(--primary); padding:16px; border-radius:16px; box-shadow:var(--shadow-lg); }
.offline-update[hidden] { display:none; }
@media(max-width:680px) { .offline-update { flex-wrap:wrap; } }
.mw-exact-value { width:150px; max-width:60%; min-height:48px; border:2px solid var(--line); border-radius:8px; font-size:22px; text-align:center; margin:12px 8px; color:var(--navy); background:var(--paper); }
.exploration-history { margin:24px 0; }
.device-history { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.device-history summary { cursor:pointer; min-height:44px; padding:10px 0; }
.device-history details { margin-left:12px; border-bottom:1px solid var(--line); }
.classroom-nav,.hub { padding-left:clamp(16px,2vw,28px); padding-right:clamp(16px,2vw,28px); }
.number-pad .button { border:1px solid var(--line); background:var(--surface-soft); }
#storageNotice { padding:16px; border:2px solid var(--yellow); background:var(--yellow-soft); }
@media(min-width:900px) and (max-height:820px) {
 .arena-dialog:not(.explorer-dialog) { padding:0; }
 .arena-dialog .number-pad button { min-height:44px; }
 .arena-dialog .arena-problem { margin:6px 0 12px; }
}

@media (max-width: 680px) {
  .arena-dialog:not(.explorer-dialog) { width:100vw; height:100dvh; padding:0; max-height:none; border-radius:0; }
  .arena-header { padding:12px; gap:8px; align-items:center; }
  .arena-header > div:last-child { flex-direction:row; gap:6px; }
  .arena-header .button { min-height:44px; padding:8px 10px; font-size:13px; }
  .arena-header h2 { font-size:18px; }
  .arena-header p { font-size:12px; }
  #arenaBody { padding:12px; }
  .arena-play { padding:12px; }
  .arena-scores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
  .arena-side { flex-wrap:wrap; justify-content:space-between; gap:4px 8px; min-width:0; }
  .arena-side > span { flex-basis:100%; overflow-wrap:anywhere; }
  .arena-side strong { font-size:24px; }
  .arena-side small { font-size:11px; }
  #arenaFeedback, #arenaFooter { padding:10px 12px; }
  .expression-tokens { margin:10px 0; gap:6px; }
  .expression-tokens .button { min-width:44px; min-height:48px; padding:8px 10px; font-size:22px; }
  .expression-output { font-size:22px; padding:12px; }
  .expression-actions .button { min-height:44px; padding:8px 12px; }
  .arena-play .target-number { margin:12px auto; min-height:56px; font-size:18px; }
  .arena-play .target-number strong { font-size:28px; }
}

/* Integer worlds: one readable shell, six different mathematical playfields. */
.iw-world { font-size:clamp(16px,1.4vw,21px); }
.iw-world h3,.iw-world h4 { margin:10px 0; }
.iw-world p { line-height:1.55; margin:12px 0; }
.iw-session-bar,.iw-controls,.iw-hand,.iw-incoming { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.iw-session-bar { justify-content:space-between; padding:10px 14px; background:var(--primary-soft); border-radius:12px; font-weight:650; }
.iw-hint { padding:12px 16px; background:#fff8dd; border-left:4px solid #d4a52b; border-radius:8px; }
.iw-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-top:18px; align-items:start; }
.iw-world .iw-button { min-height:52px; font-size:inherit; padding:12px 16px; }
.iw-world .iw-button.is-selected { outline:3px solid var(--primary); outline-offset:1px; background:var(--primary-soft); }
.iw-button strong { font-size:24px; }
.iw-button small { display:block; font-size:12px; }
.iw-hand { margin:14px 0; }
.iw-hand .iw-button { min-width:68px; min-height:64px; }
.iw-preview { min-height:52px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); font-weight:700; }
.iw-toolbox { margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:14px; }
.iw-save-note { color:var(--ink-soft); font-size:14px; }
.iw-building { border:3px solid #aeb9ce; border-radius:14px; overflow:hidden; background:#f2f4fa; }
.iw-floor { min-height:38px; padding:5px 12px; border-bottom:1px solid #cbd3e1; display:grid; grid-template-columns:44px 1fr; gap:8px; font-size:15px; }
.iw-floor:last-child { border-bottom:0; }
.iw-floor > span { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.iw-floor strong { font-size:20px; }
.iw-floor.is-zero { background:var(--apricot-soft); border-block:2px solid var(--apricot-dark); }
.iw-floor.is-player { background:#eeefff; }
.iw-floor.is-locked { background:repeating-linear-gradient(135deg,#f0f1f4 0 8px,#e2e5eb 8px 16px); }
.iw-agent,.iw-patrol { border-radius:6px; padding:2px 8px; font-weight:750; }
.iw-agent { background:#5654c7; color:white; }
.iw-patrol { background:#ffede5; color:#933211; border:1px solid #da654e; }
.iw-route { font-size:16px; }
.iw-reactor { display:grid; grid-template-columns:repeat(var(--iw-cols),minmax(0,1fr)); gap:8px; background:#263354; padding:12px; border-radius:16px; }
.iw-world .iw-reactor .iw-button { aspect-ratio:1; padding:4px; border:1px solid #aeb9ce; position:relative; min-width:0; min-height:48px; background:#fff; }
.iw-reactor .iw-button strong { font-size:clamp(20px,2vw,32px); }
.iw-reactor .iw-button small { position:absolute; right:3px; top:2px; background:var(--primary); color:white; border-radius:50%; min-width:18px; }
.iw-world .iw-reactor .is-selected { background:var(--violet-soft); outline-color:var(--gold); }
.iw-incoming { background:#eeefff; border-radius:12px; padding:12px; }
.iw-incoming strong { font-size:26px; padding:4px 12px; background:white; border:1px solid #aeb9ce; border-radius:8px; }
.iw-cancellation { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; margin:18px 0; border:2px solid var(--violet-dark); border-radius:14px; text-align:center; }
.iw-cancellation span { padding:10px; background:var(--violet-soft); font-size:24px; animation:iwCancel .8s ease both; }
.iw-cancellation span:nth-child(2) { background:var(--apricot-soft); }
.iw-cancellation strong { grid-column:1/-1; color:var(--violet-dark); }
@keyframes iwCancel { from { transform:translateX(-12px); opacity:.2; } to { transform:translateX(0); opacity:1; } }
.iw-lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.iw-lane { min-width:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.iw-lane > h3,.iw-owner { padding:8px 12px; margin:0; }
.iw-lane-side { padding:12px; min-height:142px; }
.iw-lane-side h4 { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.iw-lane-side h4 strong { font-size:28px; }
.iw-power-cards { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.iw-world .iw-power-cards .iw-button { padding:8px; min-width:52px; }
.iw-owner { font-size:16px; }
.iw-machine-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:20px 0; }
.iw-robot { display:grid; border:3px solid #5654c7; border-radius:14px 14px 4px 4px; padding:12px 24px; text-align:center; background:#eeefff; }
.iw-robot strong { font-size:32px; }
.iw-conveyor { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px; background:#e8edf4; border-bottom:8px dashed #aeb9ce; border-radius:14px; }
.iw-slot { display:grid; place-items:center; border:2px dashed #aeb9ce; border-radius:10px; min-height:74px; min-width:100px; }
.iw-trace { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:18px 0; }
.iw-trace > span:not([aria-hidden]) { display:grid; text-align:center; padding:10px 14px; border:1px solid #aeb9ce; border-radius:10px; background:var(--violet-soft); }
.iw-trace strong { font-size:28px; }
.iw-trace small { font-size:12px; }
.iw-numberline { display:block; width:100%; max-height:200px; fill:currentColor; margin:16px 0; }
.iw-islands { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:18px; background:var(--apricot-soft); border-radius:18px; }
.iw-world .iw-islands .iw-button { display:grid; gap:6px; border-radius:36% 38% 32% 35%; border:2px solid #aeb9ce; min-height:126px; }
.iw-islands .iw-button strong { font-size:36px; }
.iw-islands .iw-button span { font-size:14px; }
.iw-world .iw-islands [data-owner="0"] { background:#eeefff; border-color:#5654c7; }
.iw-world .iw-islands [data-owner="1"] { background:#ffede5; border-color:#da654e; }
.iw-world .iw-islands [data-owner="neutral"] { background:white; }
.iw-puck-values { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.iw-puck-values section { padding:12px 16px; border-radius:12px; }
.iw-puck-values strong { font-size:32px; }
.iw-world .iw-puck-values p { font-size:16px; }
body.large-text .iw-world { font-size:24px; }
body.high-contrast .iw-world .iw-button { border-color:currentColor; }
@media (prefers-reduced-motion:reduce) { .iw-cancellation span { animation:none; } }
@media (max-width:680px) {
 .iw-split { grid-template-columns:1fr; gap:16px; }
 .iw-lanes { grid-template-columns:1fr; }
 .iw-lane-side { min-height:100px; }
 .iw-islands { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px; }
 .iw-world .iw-islands .iw-button { padding:10px; min-height:118px; }
 .iw-world .iw-button { padding:10px 12px; }
 .iw-world .iw-reactor { gap:6px; padding:8px; }
 .iw-world .iw-reactor .iw-button { padding:2px; }
 .iw-puck-values { gap:8px; }
 .iw-puck-values section { padding:8px; }
 .iw-conveyor { padding:10px; }
 .iw-session-bar { font-size:14px; }
}
.iw-battle-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); align-items:start; gap:16px; }
.iw-battle-layout .iw-toolbox { margin-top:0; }
.iw-battle-layout .iw-lane-side { padding:10px; min-height:120px; }
.iw-battle-layout .iw-lane-side h4 { font-size:16px; }
.iw-battle-layout .iw-lane .iw-button { font-size:15px; }
@media (max-width:900px) { .iw-battle-layout { grid-template-columns:1fr; } .iw-battle-layout .iw-toolbox { order:-1; } }
.iw-team { display:flex; gap:6px; align-items:center; }
.iw-creature { display:block; width:32px; height:28px; flex-shrink:0; }
.iw-robot::before { content:""; display:block; width:40px; height:12px; margin:0 auto 6px; background:radial-gradient(circle at 8px 6px,#263354 0 5px,transparent 5.5px),radial-gradient(circle at 32px 6px,#263354 0 5px,transparent 5.5px); }
body.large-text .iw-floor { font-size:20px; min-height:48px; }
body.large-text .iw-floor strong { font-size:26px; }
body.board-view .iw-save-note { display:none; }
.iw-world[data-world-game="zero-heist"] .iw-floor { min-height:24px; height:24px; padding:2px 10px; line-height:1.2; font-size:13px; }
.iw-world[data-world-game="zero-heist"] .iw-floor strong { font-size:20px; line-height:1; }
.iw-world[data-world-game="zero-heist"] .iw-split section p { font-size:17px; line-height:1.4; margin:10px 0; }
body.large-text .iw-world[data-world-game="zero-heist"] .iw-floor { height:auto; min-height:40px; font-size:20px; }
body.large-text .iw-world[data-world-game="zero-heist"] .iw-floor strong { font-size:26px; }
@media (max-width:680px) {
 .iw-world:not([data-world-game="mirror-machine"]) .iw-hand { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
 .iw-world:not([data-world-game="mirror-machine"]) .iw-hand .iw-button { min-width:0; width:100%; min-height:52px; padding:6px 2px; }
 .iw-world:not([data-world-game="mirror-machine"]) .iw-hand .iw-button strong { font-size:22px; }
}

/* Graph construction and statistical answering are separate actions. */
.mw-bars__assessment { display: grid; gap: 10px; margin-top: 16px; font-weight: 700; }
.mw-bars__assessment input { min-height: 52px; width: 100%; padding: 10px; border: 2px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface); font-size: 1.2rem; }

.iw-concept-floors { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px; }
.iw-concept-building { display:grid;grid-template-columns:minmax(270px,.75fr) minmax(0,1fr);gap:22px;align-items:center; }.iw-concept-building .iw-building { max-height:620px;overflow:auto; }.iw-concept-building .iw-floor { min-height:42px;height:auto;padding:5px 10px; }.iw-concept-building .iw-floor>span { justify-content:flex-end; }.iw-concept-building .iw-floor em { font-style:normal;font-weight:750;color:var(--violet-dark); }.iw-concept-building .iw-floor .iw-button { min-height:34px;padding:4px 10px; }.iw-concept-prompt { padding:16px;background:#edf0ff;border-left:5px solid #5654c7;border-radius:10px;font-size:clamp(20px,2vw,28px);font-weight:800; }.iw-step-label { color:#5654c7;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }
.iw-counter-cells { display:flex;flex-wrap:wrap;gap:8px;margin:16px 0; }
.iw-counter-cells span,.iw-unit { display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:4px;border:2px solid currentColor;border-radius:50%;font-style:normal;font-weight:800; }
.iw-unit.positive { color:#5654c7; }.iw-unit.negative { color:#a33f2e; }
.iw-cancellation > span { display:flex;flex-wrap:wrap;gap:4px; }
.iw-expression { overflow-wrap:anywhere;font-weight:700; }
#taughtTopics { display:grid;gap:8px;border:0; }#taughtTopics label { display:flex;align-items:center;gap:10px;min-height:44px; }

.iw-cancellation .iw-unit { animation:iw-unit-cancel 1.2s ease both; }
@keyframes iw-unit-cancel { from { opacity:1;transform:scale(1); } to { opacity:.55;transform:scale(.9);text-decoration:line-through; } }
@media(prefers-reduced-motion:reduce){.iw-cancellation .iw-unit{animation:none;text-decoration:line-through;}}

/* Integer adventures share controls and spacing, with distinct boards. */
.ad-rooms,.ad-robots,.ad-devices { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0; }
.ad-robots { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ad-room,.ad-robot,.ad-device,.ad-track,.ad-sandbox,.ad-vehicle { min-width:0;padding:16px;background:var(--surface,#fff);border:2px solid #aeb9ce;border-radius:16px; }
.ad-room h4,.ad-robot h4,.ad-device h4 { margin:0 0 12px; }.ad-room p,.ad-robot p,.ad-device p { margin:10px 0; }
.ad-thermometer { float:right;width:62px;height:148px;max-width:30%;fill:currentColor; }.ad-room .iw-button { width:100%;margin:4px 0; }
.ad-prediction { display:grid;gap:8px;clear:both;margin:12px 0;padding:0;border:0;font-weight:700; }.ad-prediction legend { margin-bottom:8px; }.ad-prediction>div { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }.ad-prediction .iw-button { min-width:0;padding:10px;font-size:20px; }.ad-prediction .iw-button.is-selected { background:#f9b115;color:#1f2735;border-color:#8d5c00;box-shadow:0 0 0 3px rgba(249,177,21,.22); }
.ad-holding { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0; }.ad-wagons { position:relative;display:flex;flex-wrap:wrap;gap:16px;padding:14px 8px 24px;min-height:90px;background:linear-gradient(to bottom,transparent 62%,#6f7788 63% 66%,transparent 67% 74%,#6f7788 75% 78%,transparent 79%);border-radius:8px; }
.ad-wagon { position:relative;display:grid;place-items:center;min-width:64px;height:52px;background:#eeefff;border:2px solid #aeb9ce;border-radius:8px;font-size:24px; }.ad-wagon:before,.ad-wagon:after { content:'';position:absolute;bottom:-10px;width:15px;height:15px;border-radius:50%;background:#263354; }.ad-wagon:before{left:8px}.ad-wagon:after{right:8px}.ad-wagon.is-exposed { border:3px solid #5654c7; }.ad-departure { background:var(--apricot-soft); }
.ad-locks { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0; }.ad-locks .iw-button { display:grid;gap:8px;min-height:100px; }.ad-locks strong { font-size:32px; }.ad-sandbox { background:#edf0f8; }
.ad-vehicles { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px; }.ad-vehicle .iw-button:first-child { display:grid;gap:8px;width:100%; }.ad-docks { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;padding:24px;background:var(--apricot-soft);border-radius:18px;margin:16px 0; }.ad-docks .iw-button { display:grid;gap:8px;min-width:90px; }.ad-docks strong { font-size:28px; }.ad-docks.is-vertical { flex-direction:column;align-items:stretch;max-width:300px;margin-inline:auto; }
.ad-radar-line { display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:8px;padding:16px;background:var(--violet-soft);border-radius:16px; }.ad-radar-line .iw-button { min-width:0;padding:8px; }.ad-bridge-route { padding:16px;background:#edf0f8;border-radius:12px;font-size:24px;overflow-wrap:anywhere; }.ad-robot.is-complete { border-color:#087a6d;background:#dcf4ed; }
.ad-robot-progress { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0; }.ad-robot-progress span { padding:10px;border:2px solid #aeb9ce;border-radius:999px;text-align:center;font-weight:750; }.ad-robot-progress .is-active { border-color:#5654c7;background:#edf0ff; }.ad-robot-progress .is-complete { border-color:#087a6d;background:#dcf4ed;color:#135b51; }.ad-robot--focus { max-width:720px;margin:16px auto;box-shadow:0 10px 28px rgba(38,51,84,.12); }.ad-device.is-active { border-color:#5654c7;box-shadow:0 0 0 3px rgba(86,84,199,.13); }.ad-predict-prompt { padding:10px;background:#edf0ff;border-radius:10px;font-weight:700; }
.ad-device-picker { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 18px; }.ad-device-picker .iw-button { display:grid;gap:4px;min-width:0;text-align:left; }.ad-device-picker .iw-button strong { font-size:19px; }.ad-device-picker .iw-button span,.ad-device-picker .iw-button small { display:block; }.ad-device--focus { max-width:760px;margin:18px auto;box-shadow:0 10px 28px rgba(38,51,84,.12); }.ad-device--focus .explorer-table { max-width:520px;margin-inline:auto; }
body.high-contrast .ad-room,body.high-contrast .ad-robot,body.high-contrast .ad-device,body.high-contrast .ad-track,body.high-contrast .ad-sandbox,body.high-contrast .ad-vehicle,body.high-contrast .ad-docks,body.high-contrast .ad-radar-line,body.high-contrast .ad-bridge-route { background:#fff;color:#000;border-color:#000; }
body.large-text .ad-prediction .iw-button { font-size:26px; }body.reduced-motion .iw-unit { animation:none;text-decoration:line-through; }
@media(max-width:900px){.ad-rooms,.ad-devices{grid-template-columns:1fr;}.ad-holding,.ad-robots{grid-template-columns:1fr;}.ad-room .ad-thermometer{height:130px;}.ad-locks{grid-template-columns:repeat(3,minmax(0,1fr));}.ad-room,.ad-robot,.ad-device{padding:12px;}.ad-robot-progress{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.iw-concept-building{grid-template-columns:1fr;gap:12px;}.iw-concept-building .iw-building{max-height:360px;}.iw-concept-building .iw-floor .iw-button{min-width:112px;}.ad-device-picker{grid-template-columns:1fr;}}
.ad-docking-line { width:100%;max-height:170px;display:block;fill:currentColor;margin:16px 0; }.ad-docking-line.is-vertical { max-height:320px;width:180px;max-width:100%;margin-inline:auto; }
.ad-station-grid { display:flex;flex-direction:column;gap:12px; }
@media(max-width:900px){.ad-station-grid>.iw-toolbox{order:-1;}.ad-station-grid>.ad-rooms{order:0;}}
@media(min-width:901px){.ad-station-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:start;gap:14px;}.ad-station-grid>.ad-rooms{margin:0;gap:12px;}.ad-station-grid>.iw-toolbox{padding:12px;}.ad-station-grid .ad-command-hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}.ad-station-grid .ad-command-hand .iw-button{min-width:0;padding:7px;}.ad-station-grid .ad-room{padding:12px;}.ad-station-grid .ad-thermometer{height:94px;width:44px;}.ad-station-grid .ad-room p{margin:8px 0;}.ad-station-grid .ad-prediction{margin:10px 0 0;}.ad-station-grid .ad-room h4{margin-bottom:8px;}}
.ad-assign-controls{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:6px;}.ad-room .ad-assign-controls .iw-button{min-width:0;padding:8px;}
/* Mathematical models share controls, spacing and readable diagram strokes. */
.cl-lab { display:grid; gap:14px; min-width:0; }
.cl-lab p { margin:0; }
.cl-diagram { width:100%; max-width:640px; max-height:350px; margin:auto; overflow:visible; }
.cl-diagram rect,.cl-diagram polygon,.cl-diagram circle,.cl-diagram ellipse,.cl-diagram path { fill:var(--soft-purple,#eeedff); stroke:var(--ink,#192343); stroke-width:2; }
.cl-diagram line { stroke:var(--ink,#192343); stroke-width:3; }
.cl-diagram text { fill:var(--ink,#192343); font:600 18px sans-serif; }
.cl-diagram .cl-height { stroke:var(--purple,#6659dd); stroke-dasharray:7 5; }
.cl-diagram .cl-candidate { fill:white; stroke:#8792ab; }
.cl-diagram .cl-cube-top { fill:#ddd8ff; } .cl-diagram .cl-cube-left { fill:#ada1f3; } .cl-diagram .cl-cube-right { fill:#7161cc; }
.cl-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.cl-controls button,.cl-lab button { min-height:50px; }
.cl-controls button[aria-pressed=true] { background:var(--ink,#192343); color:white; }
.cl-two,.cl-answer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:end; }
.cl-answer:has(> :only-child) { grid-template-columns:1fr; }
.cl-feedback:not(:empty) { padding:12px; background:#fff1cd; color:#192343; border:1px solid currentColor; border-radius:12px; }
.cl-flow { display:grid; gap:12px; max-width:620px; }
.cl-flow-step { border:2px solid var(--line,#aab5d0); border-radius:12px; padding:16px; position:relative; }
.cl-flow-step.current { border-color:var(--purple,#6659dd); background:#eeedff; }
.cl-flow-step + .cl-flow-step:before { content:'↓'; position:absolute; top:-23px; left:50%; }
.cl-lab blockquote { margin:0; padding:18px; border-left:4px solid #6659dd; background:#eeedff; }
.cl-dot-plot { display:flex; gap:10px; align-items:end; flex-wrap:wrap; } .cl-dot-column { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cl-dot-column i { width:13px; height:13px; border:2px solid #192343; border-radius:50%; background:#aba1ec; }
.cl-lab table { border-collapse:collapse; width:100%; } .cl-lab td,.cl-lab th { padding:10px; text-align:center; border:1px solid #aab5d0; }
.cl-builder { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:700px) { .cl-two,.cl-answer { grid-template-columns:1fr; } .cl-controls>button { flex:1 1 140px; } .cl-diagram text { font-size:19px; } .cl-diagram { max-height:280px; } }
body.high-contrast .cl-diagram polygon,body.high-contrast .cl-diagram rect { fill:white; stroke:black; }

.cl-diagram { overflow:hidden; } .cl-fraction-wholes { display:grid; gap:12px; } .cl-fraction-wholes .fraction-strip { max-width:420px; width:100%; height:44px; }
@media(max-width:700px){ .cl-diagram text{font-size:25px;} }
#catalogueExploreDialog .arena-header,#catalogueExploreDialog .explorer-participation,#catalogueExploreDialog footer { flex-shrink:0; }
#catalogueExploreBody { padding:20px 24px; overflow:auto; min-height:0; }
#catalogueExploreDialog footer { padding:14px 24px; border-top:1px solid var(--line); }
#catalogueExploreFeedback:not(:empty) { padding:12px 24px; margin:0; flex-shrink:0; }
.cl-lab .form-field>span { font-size:16px; font-weight:650; }
.cl-controls .form-field { flex:1 1 180px; min-width:0; }
@media(max-width:700px){ #catalogueExploreBody{padding:16px;} #catalogueExploreDialog .arena-header{padding:16px;} #catalogueExploreDialog footer{padding:12px 16px;} }
body.large-text .cl-lab { font-size:24px; } body.large-text .cl-diagram text { font-size:23px; }
body.high-contrast .cl-diagram text { fill:#000; } body.high-contrast .cl-diagram line,body.high-contrast .cl-diagram circle,body.high-contrast .cl-diagram ellipse,body.high-contrast .cl-diagram path { stroke:#000; }
@media(max-width:700px){ body.large-text .cl-diagram text { font-size:29px; } }

/* Large classroom text must not squeeze the room action labels. */
body.large-text .ad-assign-controls { grid-template-columns:minmax(0,1fr); }
body.large-text .iw-hand .iw-button:has(small) { display:flex;flex-direction:column;align-items:center;width:auto;min-width:108px;max-width:100%; }
body.large-text .iw-hand .iw-button small { max-width:100%;white-space:normal;overflow-wrap:anywhere; }