/* MathsPilot Games UX fit repair: shared learner game wizard and play layout. */
.game-wizard {
  --game-card-radius: 18px;
  --game-border: color-mix(in srgb, var(--brand-500, #6b7852) 18%, rgba(38, 48, 34, 0.14) 82%);
  --game-soft: color-mix(in srgb, var(--surface-card, #fffaf0) 88%, var(--brand-50, #f3eee4) 12%);
  --game-accent: color-mix(in srgb, var(--brand-500, #6b7852) 84%, #ffffff 16%);
  --game-shadow: 0 16px 38px rgba(44, 55, 42, 0.09);
}

.game-wizard:not(.student-shell__body):not(.student-shell__body--with-nav) {
  width: min(100%, 1220px);
  margin-inline: auto;
}

.game-wizard .student-section-hero,
.game-wizard .student-section-hero--action-first {
  border-radius: var(--game-card-radius);
  border-color: var(--game-border);
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(246, 249, 238, 0.94)),
    var(--game-soft);
  box-shadow: var(--game-shadow);
}

.game-wizard .student-section-hero__eyebrow,
.game-wizard .student-section-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.game-wizard .student-section-hero h1 {
  font-size: clamp(2rem, 3vw, 3.25rem);
  letter-spacing: 0;
}

.game-wizard .student-section-hero p,
.game-wizard .student-section-card p {
  max-width: 58ch;
}

.game-wizard__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  align-items: stretch;
}

.game-primary-action,
.game-wizard .student-primary-action-card {
  min-height: 96px;
  border-radius: var(--game-card-radius);
  border: 1px solid color-mix(in srgb, var(--game-accent) 36%, transparent);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 229, 0.92)),
    var(--game-soft);
  box-shadow: 0 14px 28px rgba(75, 92, 62, 0.1);
}

.game-primary-action strong,
.game-wizard .student-primary-action-card strong {
  color: var(--brand-800, #36452c);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
}

.game-wizard__step,
.game-wizard .student-section-card {
  border-radius: var(--game-card-radius);
  border-color: var(--game-border);
  background: rgba(255, 252, 246, 0.94);
  box-shadow: 0 12px 30px rgba(44, 55, 42, 0.07);
}

.game-wizard__step-title {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  letter-spacing: 0;
}

.game-option-card,
.game-level-card {
  min-height: 136px;
  border-radius: var(--game-card-radius);
  border: 1px solid var(--game-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 246, 238, 0.9)),
    var(--surface-card, #fffaf0);
  box-shadow: 0 10px 24px rgba(44, 55, 42, 0.07);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.game-option-card:hover,
.game-level-card:hover,
.game-option-card:focus-within,
.game-level-card:focus-within {
  border-color: color-mix(in srgb, var(--game-accent) 46%, var(--game-border) 54%);
  box-shadow: 0 16px 32px rgba(75, 92, 62, 0.12);
  transform: translateY(-1px);
}

.game-option-card strong,
.game-level-card strong {
  color: var(--brand-850, #2f3d28);
  font-size: 1.02rem;
}

.game-progress-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted, #68705f);
  font-size: 0.88rem;
  font-weight: 700;
}

html[data-appearance=dark] body.portal-student .game-wizard {
  --game-border: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 32%, rgba(188, 198, 230, 0.2) 68%);
  --game-soft: color-mix(in srgb, var(--bg-panel, #202744) 86%, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 14%);
  --game-accent: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 86%, #ffffff 14%);
  --game-shadow: 0 22px 44px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.08);
}

html[data-appearance=dark] body.portal-student :is(.game-option-card, .game-level-card),
html[data-appearance=dark] body.portal-student .game-wizard :is(.student-section-hero, .student-section-hero--action-first, .student-section-card, .game-wizard__step),
html[data-appearance=dark] body.portal-student .student-practice-start-card:is(.game-primary-action, .learner-option-card, .student-practice-start-card--hub-game, .student-practice-start-card--wide-action) {
  border-color: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 28%, rgba(188, 198, 230, 0.22) 72%);
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 14%, transparent), transparent 42%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-panel, #202744) 86%, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 14%),
      color-mix(in srgb, var(--bg-canvas-soft, #182033) 90%, #000000 10%)
    );
  color: var(--text-strong, #f4f6ff);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.08);
}

html[data-appearance=dark] body.portal-student :is(.game-option-card, .game-level-card):is(:hover, :focus-within),
html[data-appearance=dark] body.portal-student .student-practice-start-card:is(.game-primary-action, .learner-option-card, .student-practice-start-card--hub-game, .student-practice-start-card--wide-action):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 48%, rgba(188, 198, 230, 0.28) 52%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 20%, transparent);
}

html[data-appearance=dark] body.portal-student :is(.game-option-card, .game-level-card, .student-practice-start-card) :is(strong, .student-practice-start-card__title, .student-sudoku-level-card__map) {
  color: var(--text-strong, #f4f6ff);
}

html[data-appearance=dark] body.portal-student :is(.game-option-card, .game-level-card, .student-practice-start-card) :is(.student-practice-start-card__detail, .student-sudoku-level-card__detail, .student-sudoku-level-card__map-label, .student-sudoku-level-card__meta, .student-sudoku-level-card__estimate, .game-progress-line) {
  color: var(--text-body, #c6cee8);
}

html[data-appearance=dark] body.portal-student :is(.game-option-card, .game-level-card).is-active,
html[data-appearance=dark] body.portal-student :is(.game-option-card, .game-level-card).is-selected {
  border-color: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 54%, rgba(188, 198, 230, 0.28) 46%);
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 22%, transparent), transparent 42%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-panel-2, #253055) 76%, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 24%),
      color-mix(in srgb, var(--bg-canvas-soft, #182033) 84%, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 16%)
    );
}

html[data-appearance=dark] body.portal-student .student-practice-start-card__cta {
  border-color: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 38%, rgba(188, 198, 230, 0.24) 62%);
  background: color-mix(in srgb, var(--bg-panel-2, #253055) 74%, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 26%);
  color: var(--text-strong, #f4f6ff);
}

.game-play-shell {
  --game-play-card-block: min(100%, 88dvh);
  --game-board-short-axis: min(62vw, 56dvh);
  --game-control-tile: clamp(42px, 7dvh, 56px);
  width: min(100%, 1460px);
  margin-inline: auto;
  min-height: 0;
  display: grid;
  align-items: stretch;
}

.game-play-shell__inner,
.student-portal-puzzle-focus-page,
.student-sudoku-focus-page {
  min-height: 0;
}

.student-page-content--sudoku-focus,
.student-page-content--portal-puzzle-focus {
  min-height: 100dvh;
  overflow: auto;
  scroll-padding-bottom: max(18px, var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
}

.student-sudoku-game-card,
.student-portal-puzzle-game-card {
  height: var(--game-play-card-block);
  max-height: var(--game-play-card-block);
  min-height: 0;
  display: grid;
  overflow: hidden;
  padding: clamp(12px, 1.25vw, 18px);
}

.student-sudoku-game-card > [data-sudoku-game-host],
.student-portal-puzzle-game-card > [data-portal-puzzle-host] {
  min-height: 0;
  display: grid;
}

.student-sudoku-game,
.portal-puzzle-focus,
.game-play-board {
  min-height: 0;
}

.student-sudoku-game {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(8px, 1vw, 12px);
}

.student-sudoku-game .section-header,
.portal-puzzle-focus .section-header {
  margin-bottom: 6px;
}

.student-sudoku-game .section-header h2,
.portal-puzzle-focus .section-header h2 {
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
}

.student-sudoku-board-shell {
  min-height: 0;
  align-items: start;
  gap: clamp(10px, 1.2vw, 16px);
}

.student-sudoku-board {
  width: min(100%, clamp(240px, var(--game-board-short-axis), 720px));
  margin-inline: auto;
}

.student-sudoku-cell.is-box-peer:not(.is-selected) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-100, #eef3ff) 34%, var(--bg-panel, #fffdf9) 66%),
      color-mix(in srgb, var(--brand-50, #f6f8ff) 28%, var(--bg-panel, #fffdf9) 72%)
    );
}

.student-sudoku-cell:is(.is-row-peer, .is-column-peer):not(.is-selected) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-100, #eef3ff) 66%, #ffffff 34%),
      color-mix(in srgb, var(--brand-50, #f6f8ff) 78%, #ffffff 22%)
    );
  outline: 1px solid color-mix(in srgb, var(--brand-500, #7fa3ff) 36%, transparent);
  outline-offset: -4px;
}

.student-sudoku-cell.is-selected {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-100, #eef3ff) 86%, #ffffff 14%),
      color-mix(in srgb, var(--brand-50, #f6f8ff) 88%, #ffffff 12%)
    );
  color: var(--brand-900, #1b2a44);
  outline: 2px solid color-mix(in srgb, var(--brand-600, #5d7ff4) 68%, #ffffff 32%);
  outline-offset: -4px;
}

html[data-appearance=dark] body.portal-student .student-sudoku-cell.is-box-peer:not(.is-selected) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-panel-2, #253055) 72%, var(--brand-500, #7fa3ff) 28%),
      color-mix(in srgb, var(--bg-panel, #202744) 84%, var(--brand-500, #7fa3ff) 16%)
    );
}

html[data-appearance=dark] body.portal-student .student-sudoku-cell:is(.is-row-peer, .is-column-peer):not(.is-selected) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-panel-2, #253055) 58%, var(--brand-500, #7fa3ff) 42%),
      color-mix(in srgb, var(--bg-panel, #202744) 70%, var(--brand-500, #7fa3ff) 30%)
    );
  outline-color: color-mix(in srgb, var(--brand-300, #cbd7ff) 62%, transparent);
}

html[data-appearance=dark] body.portal-student .student-sudoku-cell.is-selected {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-panel-2, #253055) 44%, var(--brand-300, #cbd7ff) 56%),
      color-mix(in srgb, var(--bg-panel, #202744) 60%, var(--brand-500, #7fa3ff) 40%)
    );
  color: var(--text-strong, #f4f6ff);
  outline-color: color-mix(in srgb, var(--brand-300, #cbd7ff) 78%, #ffffff 22%);
}

.student-sudoku-console--play,
.student-sudoku-actions {
  gap: 10px;
}

.student-sudoku-number {
  min-height: 44px;
}

.portal-puzzle-focus {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.portal-puzzle-focus__surface {
  min-height: 0;
  overflow: hidden;
}

.portal-puzzle-focus__summary {
  padding: 10px 12px;
}

.portal-puzzle-codebreaker {
  --codebreaker-row-slot: clamp(32px, 3.8dvh, 40px);
  --codebreaker-row-padding-block: 4px;
  --codebreaker-row-padding-inline: 8px;
  --codebreaker-control-tile: clamp(44px, 4dvh, 56px);
  --codebreaker-slot-max: 118px;
  --codebreaker-guess-max: min(100%, calc(var(--codebreaker-code-length, 4) * var(--codebreaker-slot-max)));
  --codebreaker-grid-max: min(100%, calc(var(--codebreaker-guess-max) + 144px));
  --codebreaker-controls-max: min(100%, 1060px);
  --codebreaker-palette-max: min(100%, calc(var(--codebreaker-palette-columns, 6) * 100px));
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 7px;
  justify-items: center;
}

.portal-puzzle-codebreaker__secret-row,
.portal-puzzle-codebreaker__row {
  width: var(--codebreaker-grid-max);
  max-width: 100%;
  grid-template-columns: 58px minmax(0, var(--codebreaker-guess-max)) 66px;
  justify-content: center;
  gap: 6px;
  padding: var(--codebreaker-row-padding-block) var(--codebreaker-row-padding-inline);
  border-radius: 14px;
  align-items: center;
  min-height: 0;
}

.portal-puzzle-codebreaker__board .portal-puzzle-codebreaker__row {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.portal-puzzle-codebreaker__board .portal-puzzle-codebreaker__row.is-active {
  background: transparent;
  box-shadow: none;
}

.portal-puzzle-codebreaker__board {
  width: 100%;
  min-height: 0;
  max-height: none;
  gap: 6px;
  justify-items: center;
  overflow: auto;
  overscroll-behavior: contain;
}

.portal-puzzle-codebreaker__guess {
  display: grid;
  width: min(100%, var(--codebreaker-guess-max));
  grid-template-columns: repeat(var(--codebreaker-columns, var(--codebreaker-code-length, 4)), minmax(0, 1fr));
  gap: 6px;
}

.portal-puzzle-codebreaker__row-label {
  min-height: var(--codebreaker-row-slot);
  padding: 4px 7px;
  font-size: 0.72rem;
}

.portal-puzzle-codebreaker__slot {
  width: 100%;
  min-width: 0;
  min-height: var(--codebreaker-row-slot);
  padding: 4px;
  border-radius: 12px;
}

.student-portal-puzzle-focus-page .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__row-label,
.student-portal-puzzle-focus-page .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__slot {
  box-sizing: border-box;
  height: var(--codebreaker-row-slot);
  min-height: var(--codebreaker-row-slot);
}

.student-portal-puzzle-focus-page .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__slot {
  padding: 4px;
  border-radius: 12px;
}

.portal-puzzle-codebreaker__feedback {
  justify-self: start;
  gap: 4px;
}

.portal-puzzle-codebreaker__peg {
  width: 10px;
  height: 10px;
}

.portal-puzzle-codebreaker__legend {
  gap: 8px;
  font-size: 0.86rem;
}

.portal-puzzle-codebreaker__controls {
  width: var(--codebreaker-controls-max);
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(260px, 360px);
  justify-content: center;
  gap: 8px;
  align-items: center;
  min-height: 0;
}

.portal-puzzle-codebreaker__palette {
  width: var(--codebreaker-palette-max);
  max-width: 100%;
  justify-self: end;
  grid-template-columns: repeat(var(--codebreaker-palette-columns, 6), minmax(var(--codebreaker-control-tile), 1fr));
  gap: 6px;
}

.portal-puzzle-codebreaker__key {
  min-height: var(--codebreaker-control-tile);
  border-radius: 12px;
}

.portal-puzzle-codebreaker__composer {
  width: min(100%, 360px);
  justify-self: start;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .student-page-content--portal-puzzle-focus {
    min-height: 100dvh;
  }

  .student-portal-puzzle-game-card {
    --game-play-card-block: min(100%, 94dvh);
    padding: 14px;
  }

  .portal-puzzle-focus[data-game-id="codebreaker"] {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .portal-puzzle-focus[data-game-id="codebreaker"] .section-header,
  .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-focus__summary {
    display: none;
  }

  .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-focus__surface {
    display: grid;
    min-height: 0;
  }

  .portal-puzzle-codebreaker {
    --codebreaker-row-slot: clamp(42px, 4.4dvh, 54px);
    --codebreaker-row-padding-block: 5px;
    --codebreaker-control-tile: clamp(54px, 5.6dvh, 64px);
    --codebreaker-slot-max: 126px;
    --codebreaker-grid-max: min(100%, calc(var(--codebreaker-guess-max) + 152px));
    --codebreaker-controls-max: min(100%, 760px);
    --codebreaker-palette-max: min(100%, 420px);
    align-content: center;
    grid-template-rows: auto minmax(0, auto) auto;
    gap: 10px;
  }

  .portal-puzzle-codebreaker__secret-row,
  .portal-puzzle-codebreaker__row {
    grid-template-columns: 60px minmax(0, var(--codebreaker-guess-max)) 72px;
    gap: 8px;
  }

  .portal-puzzle-codebreaker__board {
    overflow: visible;
    gap: 8px;
  }

  .portal-puzzle-codebreaker__feedback {
    gap: 5px;
  }

  .portal-puzzle-codebreaker__peg {
    width: 12px;
    height: 12px;
  }

  .portal-puzzle-codebreaker__controls {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 10px;
  }

  .portal-puzzle-codebreaker__palette,
  .portal-puzzle-codebreaker__composer {
    justify-self: center;
  }

  .portal-puzzle-codebreaker__composer {
    width: min(100%, 420px);
  }
}

@media (min-width: 1101px) and (max-width: 1366px) {
  .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker {
    --codebreaker-row-slot: clamp(38px, 4.2dvh, 50px);
    --codebreaker-control-tile: clamp(50px, 5dvh, 60px);
    --codebreaker-controls-max: min(100%, 900px);
    gap: 9px;
  }

  .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__controls {
    grid-template-columns: minmax(0, auto) minmax(300px, 420px);
    gap: 10px;
  }
}

/* Competition hub polish: keep desktop controls in one compact command row. */
@media (min-width: 1100px) {
  .student-competition-page--v18-8-57 .student-competition-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 16px;
  }

  .student-competition-page--v18-8-57 .student-competition-header__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .student-competition-page--v18-8-57 .student-competition-header__copy {
    min-width: 0;
  }

  .student-competition-page--v18-8-57 .student-competition-header__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    justify-items: normal;
    gap: 10px;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .student-competition-page--v18-8-57 .student-competition-header__actions .btn {
    align-self: flex-start;
    flex: 0 0 auto;
    justify-self: auto;
    min-height: 44px;
    margin-top: 0;
    white-space: nowrap;
  }

  .student-competition-page--v18-8-57 .student-competition-storage-mode {
    flex: 0 0 clamp(252px, 20vw, 286px);
    min-width: 252px;
    max-width: 286px;
    padding: 8px 10px;
    gap: 6px;
  }

  .student-competition-page--v18-8-57 .student-competition-storage-mode__label {
    font-size: 0.68rem;
    letter-spacing: 0;
  }

  .student-competition-page--v18-8-57 .student-competition-storage-mode__control.student-segmented--views {
    gap: 4px;
    padding: 4px;
  }

  .student-competition-page--v18-8-57 .student-competition-storage-mode__control .student-segmented__button {
    min-height: 44px;
    padding-inline: 9px;
    font-size: 0.82rem;
  }

  .student-competition-page--v18-8-57 .student-competition-storage-mode__detail {
    font-size: 0.72rem;
    line-height: 1.22;
  }
}

@media (min-width: 1100px) and (max-width: 1260px) {
  .student-competition-page--v18-8-57 .student-competition-storage-mode__detail {
    display: none;
  }

  .student-competition-page--v18-8-57 .student-competition-storage-mode {
    flex-basis: 246px;
    min-width: 246px;
  }
}

/* Codebreaker polish: empty slots read as centred circles, not small stray dots. */
.portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__slot {
  place-items: center;
}

.portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker-symbol--empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker-symbol__placeholder {
  display: block;
  width: clamp(14px, 1.4vw, 18px);
  height: clamp(14px, 1.4vw, 18px);
  border: 2px solid color-mix(in srgb, var(--brand-500, #7fa3ff) 28%, var(--line-default, rgba(55, 66, 99, 0.2)) 72%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand-500, #7fa3ff) 38%, transparent) 0 28%, transparent 31%),
    color-mix(in srgb, var(--bg-panel, #fffdf9) 92%, white 8%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.8),
    0 1px 3px rgba(31, 47, 82, 0.08);
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__feedback {
  grid-template-columns: repeat(2, 14px);
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  gap: 5px;
}

.portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__peg {
  width: 12px;
  height: 12px;
}

.student-portal-puzzle-focus-page .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__feedback {
  grid-template-columns: repeat(2, 13px);
  min-width: 40px;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  gap: 5px;
}

.student-portal-puzzle-focus-page .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__peg {
  width: 12px;
  min-width: 12px;
  height: 12px;
  min-height: 12px;
}

.portal-puzzle-tangram {
  height: 100%;
  display: grid;
  min-height: 0;
}

.portal-puzzle-tangram__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
  padding: 8px;
  overflow: hidden;
}

.portal-puzzle-tangram__svg {
  width: auto;
  height: min(100%, 64dvh);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--portal-tangram-board-width) / var(--portal-tangram-board-height);
  object-fit: contain;
}

.portal-puzzle-tangram__target-image {
  opacity: 0.5;
}

.portal-puzzle-tangram__piece-tools {
  right: 14px;
  bottom: 14px;
}

@media (min-width: 1180px) {
  .student-sudoku-board-shell {
    grid-template-columns: minmax(0, 1fr) clamp(230px, 22vw, 320px);
  }

  .student-sudoku-console--play {
    align-self: start;
  }

  .portal-puzzle-focus__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }
}

@media (max-width: 900px) {
  .game-wizard {
    width: 100%;
  }

  .student-page-content--sudoku-focus,
  .student-page-content--portal-puzzle-focus {
    overflow: visible;
  }

  .student-sudoku-game-card,
  .student-portal-puzzle-game-card {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .student-sudoku-board {
    width: min(100%, 82dvw, clamp(236px, 50dvh, 620px));
  }

  .student-sudoku-board-shell {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .portal-puzzle-focus,
  .portal-puzzle-codebreaker {
    height: auto;
  }

  .portal-puzzle-codebreaker__controls {
    grid-template-columns: 1fr;
  }

  .portal-puzzle-codebreaker__composer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-puzzle-tangram__stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: min(70dvh, 580px);
    padding: 8px;
  }

  .portal-puzzle-tangram__piece-tools {
    position: static;
    align-self: center;
    transform: none;
  }

  .portal-puzzle-tangram__svg {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 900px) and (max-height: 820px) {
  .student-page-content--sudoku-focus {
    --game-board-size: min(100%, 41dvh, 320px);
    --compact-gap: 6px;
  }

  .student-sudoku-game-card {
    padding: 8px;
  }

  .student-sudoku-game {
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-board {
    width: min(100%, var(--game-board-size));
  }

  .student-sudoku-tool-row {
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-help-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-help-actions .btn {
    min-width: 0;
    justify-content: center;
  }

  .student-sudoku-console__card {
    padding: 9px;
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-board-shell[data-sudoku-size="4"] .student-sudoku-numberpad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-board-shell[data-sudoku-size="4"] .student-sudoku-number,
  .student-sudoku-board-shell[data-sudoku-size="4"] .student-sudoku-number--clear {
    min-height: 44px;
    padding: 5px 6px;
  }

  .student-sudoku-board-shell[data-sudoku-size="4"] .student-sudoku-number--clear {
    grid-column: auto;
    font-size: 0.78rem;
  }
}

@media (max-width: 520px) and (max-height: 700px) {
  .student-page-content--sudoku-focus {
    --game-board-size: min(100%, 42dvh, 286px);
    --compact-gap: 6px;
    min-height: 100dvh;
    padding-bottom: calc(8px + var(--safe-bottom, 0px));
  }

  .game-play-shell__inner,
  .student-sudoku-focus-page {
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-game-card {
    padding: 8px;
    border-radius: 18px;
  }

  .student-sudoku-game {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-game .section-header {
    margin-bottom: 0;
    gap: 4px;
  }

  .student-sudoku-game .section-header h2 {
    font-size: 1.05rem;
    line-height: 1.08;
  }

  .student-sudoku-game .section-header p {
    font-size: .78rem;
    line-height: 1.22;
  }

  .student-sudoku-board-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--compact-gap, 6px);
    align-items: start;
    justify-items: stretch;
  }

  .student-sudoku-board {
    width: min(100%, var(--game-board-size));
  }

  .student-sudoku-console--play,
  .student-sudoku-actions {
    gap: var(--compact-gap, 6px);
  }

  .student-sudoku-number,
  .student-sudoku-actions .btn {
    min-height: 44px;
    padding: 6px 8px;
    line-height: 1.1;
  }
}

@media (max-width: 520px) and (max-height: 820px) {
  .student-page-content--sudoku-focus {
    --game-board-size: min(100%, 31dvh, 216px);
    --compact-gap: 5px;
    padding-bottom: calc(6px + var(--safe-bottom, 0px));
  }

  .student-sudoku-game-card {
    padding: 7px;
    border-radius: 16px;
  }

  .student-sudoku-game {
    gap: var(--compact-gap, 5px);
  }

  .student-sudoku-game__caption {
    font-size: clamp(1rem, 5vw, 1.18rem);
    line-height: 1.15;
  }

  .student-sudoku-selection-strip {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 8px;
    align-items: baseline;
    padding: 0 2px;
  }

  .student-sudoku-selection-strip .muted {
    grid-column: 1 / -1;
    font-size: 0.76rem;
    line-height: 1.2;
  }

  .student-sudoku-tool-row {
    gap: 5px;
  }

  .student-sudoku-help-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .student-sudoku-help-actions .btn {
    min-width: 0;
    padding-inline: 6px;
    font-size: 0.86rem;
  }

  .student-sudoku-console__card {
    padding: 8px;
    border-radius: 14px;
    gap: 6px;
  }

  .student-sudoku-board-shell[data-sudoku-size="4"] .student-sudoku-numberpad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .student-sudoku-board-shell[data-sudoku-size="4"] .student-sudoku-number,
  .student-sudoku-number {
    min-height: 44px;
    border-radius: 12px;
    padding: 5px;
    font-size: 1rem;
  }

  .student-sudoku-board-shell[data-sudoku-size="4"] .student-sudoku-number--clear,
  .student-sudoku-number--clear {
    grid-column: auto;
    min-height: 44px;
    font-size: 0.72rem;
  }
}

@media (max-width: 380px) {
  .student-shell--focus-mode .portal-puzzle-focus[data-game-id="tangram"] .portal-puzzle-tangram__stage {
    padding: 8px 0;
  }
}

@media (max-width: 520px) {
  .game-option-card,
  .game-level-card {
    min-height: 118px;
  }

  .portal-puzzle-codebreaker__secret-row,
  .portal-puzzle-codebreaker__row {
    grid-template-columns: 28px minmax(0, 1fr) 42px;
    gap: 4px;
    padding-inline: 4px;
  }

  .portal-puzzle-codebreaker__slot {
    min-height: 30px;
    border-radius: 10px;
  }

  .portal-puzzle-codebreaker {
    --codebreaker-row-slot: 26px;
    --codebreaker-row-padding-block: 2px;
    --codebreaker-control-tile: 44px;
  }

  .student-portal-puzzle-focus-page .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__slot {
    padding: 2px;
  }

  .student-portal-puzzle-focus-page .portal-puzzle-focus[data-game-id="codebreaker"] .portal-puzzle-codebreaker__row-label {
    padding: 2px 3px;
    font-size: 0.64rem;
  }

  .portal-puzzle-codebreaker__palette {
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  }

  .portal-puzzle-codebreaker__composer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}