/* Illustrated mockup-parity layer
 *
 * This file intentionally changes composition and art slots only. The live
 * controls, route state, and canonical board workspaces stay in their existing
 * DOM. Adult and kids presentations share every selector and breakpoint.
 */

#mode-screen[data-home-experience="illustrated"],
body.illustrated-feature-mode {
  --ill-art-coach: url("/assets/illustrated/adult/coach-hero.jpg");
  --ill-art-study: url("/assets/illustrated/adult/study-desk.jpg");
  --ill-art-tournament: url("/assets/illustrated/adult/tournament-hall.jpg");
  --ill-art-career: url("/assets/illustrated/adult/career-archive.jpg");
  --ill-art-play: var(--ill-art-coach);
  --ill-art-improve: var(--ill-art-study);
  --ill-art-compete: var(--ill-art-tournament);
  --ill-art-tools: var(--ill-art-career);
  --ill-new-play: url("/assets/illustrated/adult/friendly-game.jpg");
  --ill-new-learn: var(--ill-art-study);
  --ill-new-tournament: url("/assets/illustrated/adult/new-tournament-exterior.jpg");
  --ill-new-practice: url("/assets/illustrated/adult/new-practice-board-notes.jpg");
  --ill-new-calendar: url("/assets/illustrated/adult/new-calendar-desk.jpg");
  --ill-new-progress: url("/assets/illustrated/adult/new-progress-books.jpg");
  --ill-new-review: url("/assets/illustrated/adult/new-review-notebook.jpg");
  --ill-continue-learning: url("/assets/illustrated/adult/continue-learning.jpg");
  --ill-continue-opening: url("/assets/illustrated/adult/continue-opening.jpg");
  --ill-continue-review: url("/assets/illustrated/adult/continue-review.jpg");
  --ill-continue-tournament: url("/assets/illustrated/adult/continue-tournament.jpg");
  --ill-continue-career: url("/assets/illustrated/adult/continue-career.jpg");
  --ill-opening-queue-1: var(--ill-continue-learning);
  --ill-opening-queue-2: var(--ill-continue-opening);
  --ill-opening-queue-3: var(--ill-new-practice);
  --ill-opening-mode-common: var(--ill-new-progress);
  --ill-opening-mode-endless: var(--ill-new-play);
  --ill-danya-decor-left: var(--ill-art-study);
  --ill-danya-decor-right: var(--ill-art-career);
  --ill-art-focal-play: 50% 46%;
  --ill-art-focal-improve: 50% 54%;
  --ill-art-focal-compete: 50% 55%;
  --ill-art-focal-tools: 50% 56%;
}

:root[data-kids-theme] #mode-screen[data-home-experience="illustrated"],
:root[data-kids-theme] body.illustrated-feature-mode {
  --ill-art-coach: url("/assets/illustrated/kids/player-pawn.jpg");
  --ill-art-study: url("/assets/illustrated/kids/player-practice.jpg");
  --ill-art-tournament: url("/assets/illustrated/kids/tournament-juniors.jpg");
  --ill-art-career: url("/assets/illustrated/kids/player-career.jpg");
  --ill-art-play: url("/assets/illustrated/kids/player-pawn.jpg");
  --ill-art-improve: url("/assets/illustrated/kids/player-practice.jpg");
  --ill-art-compete: url("/assets/illustrated/kids/player-trophy.jpg");
  --ill-art-tools: url("/assets/illustrated/kids/career-tools.jpg");
  --ill-new-play: url("/assets/illustrated/kids/friendly-game.jpg");
  --ill-new-learn: url("/assets/illustrated/kids/player-reading.jpg");
  --ill-new-tournament: url("/assets/illustrated/kids/continue-tournament.jpg");
  --ill-new-practice: url("/assets/illustrated/kids/player-practice.jpg");
  --ill-new-calendar: url("/assets/illustrated/kids/new-calendar.jpg");
  --ill-new-progress: url("/assets/illustrated/kids/new-progress.jpg");
  --ill-new-review: url("/assets/illustrated/kids/new-review.jpg");
  --ill-continue-learning: url("/assets/illustrated/kids/player-reading.jpg");
  --ill-continue-opening: url("/assets/illustrated/kids/continue-opening.jpg");
  --ill-continue-review: url("/assets/illustrated/kids/new-review.jpg");
  --ill-continue-tournament: url("/assets/illustrated/kids/continue-tournament.jpg");
  --ill-continue-career: url("/assets/illustrated/kids/player-career.jpg");
  --ill-opening-queue-1: var(--ill-art-play);
  --ill-opening-queue-2: var(--ill-art-improve);
  --ill-opening-queue-3: var(--ill-new-review);
  --ill-opening-mode-common: var(--ill-new-learn);
  --ill-opening-mode-endless: var(--ill-new-play);
  --ill-danya-decor-left: var(--ill-art-study);
  --ill-danya-decor-right: var(--ill-art-tools);
  --ill-art-focal-play: 50% 47%;
  --ill-art-focal-improve: 50% 48%;
  --ill-art-focal-compete: 50% 50%;
  --ill-art-focal-tools: 50% 48%;
}

/* Career home ----------------------------------------------------------- */

#mode-screen[data-home-experience="illustrated"] {
  padding: 0;
  background: #f4f1ea;
}

#mode-screen[data-home-experience="illustrated"] .home-dashboard {
  width: min(1672px, 100%);
  min-height: 100vh;
  gap: 12px;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#mode-screen[data-home-experience="illustrated"] .home-hero {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  min-height: 78px;
  padding: 12px 28px;
  border-radius: 14px 14px 0 0;
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="loading"] :is(
  .illustrated-welcome,
  .illustrated-new-journey,
  .home-continue,
  .home-section-grid,
  .home-tip
) {
  visibility: hidden;
  pointer-events: none;
}

#mode-screen[data-home-experience="illustrated"] .home-settings-button {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .home-experience-switch {
  justify-self: center;
  border-color: rgba(255, 255, 255, 0.23);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-welcome {
  grid-template-columns: minmax(360px, 36%) minmax(0, 1fr);
  min-height: 294px;
  border-radius: 16px;
  background: var(--ill-paper-strong);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-welcome-art {
  min-height: 294px;
  background-color: var(--ill-paper-soft);
  background-image: var(--ill-art-coach);
  background-position: 50% 43%;
  background-size: cover;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-welcome-art > * {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-welcome-copy {
  padding: clamp(24px, 3vw, 46px);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-welcome h1 {
  font-size: clamp(38px, 4vw, 62px);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-welcome-toolbar {
  align-items: center;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-journey {
  display: none;
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome {
  grid-template-columns: minmax(360px, 31%) minmax(0, 1fr);
  min-height: 258px;
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome-art {
  min-height: 258px;
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome-copy {
  padding: 24px clamp(24px, 3vw, 44px);
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome h1 {
  font-size: clamp(36px, 3.3vw, 52px);
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-new-journey {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .home-section-grid {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card {
  --new-card-art: var(--ill-new-play);
  display: grid;
  grid-template-columns: minmax(220px, 43%) minmax(0, 1fr);
  min-height: 126px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ill-line) 76%, transparent);
  border-radius: 14px;
  background: var(--ill-paper-strong);
  box-shadow: 0 3px 10px rgba(37, 43, 35, 0.08);
  text-align: left;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card[data-illustrated-new-card="learn"] {
  --new-card-art: var(--ill-new-learn);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card[data-illustrated-new-card="tournament"] {
  --new-card-art: var(--ill-new-tournament);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card[data-illustrated-new-card="practice"] {
  --new-card-art: var(--ill-new-practice);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card[data-illustrated-new-card="calendar"] {
  --new-card-art: var(--ill-new-calendar);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card[data-illustrated-new-card="progress"] {
  --new-card-art: var(--ill-new-progress);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card[data-illustrated-new-card="review"] {
  --new-card-art: var(--ill-new-review);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-art {
  align-self: stretch;
  min-height: 100%;
  background-color: var(--ill-paper-soft);
  background-image: var(--new-card-art);
  background-position: center;
  background-size: cover;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 7px;
  min-width: 0;
  padding: 16px 20px;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-copy > small {
  color: var(--ill-rust);
  font: 900 12px/1 var(--ill-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-copy > strong {
  color: var(--ill-ink-strong);
  font: 700 clamp(20px, 1.8vw, 28px)/1.08 var(--ill-font-display);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 132px;
  gap: 18px;
  padding: 8px 13px;
  border-radius: 6px;
  background: var(--ill-action-bg);
  color: #fffdf5;
  font: 800 14px/1 var(--ill-font-ui);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-quiet {
  min-height: 100px;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-quiet .illustrated-new-card-copy > strong {
  font-size: clamp(18px, 1.5vw, 23px);
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(220px, 22%) minmax(0, 1fr) auto;
  min-height: 96px;
}

#mode-screen[data-home-experience="illustrated"] .illustrated-new-card-wide > .illustrated-new-card-action {
  align-self: center;
  margin-right: 28px;
}

:root[data-kids-theme] #mode-screen[data-home-experience="illustrated"] .illustrated-new-card {
  border-color: rgba(39, 94, 188, 0.16);
  background: #fff;
  box-shadow: 0 4px 12px rgba(32, 73, 137, 0.1);
}

:root[data-kids-theme] #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-copy > small {
  color: #1e63d7;
}

:root[data-kids-theme] #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-action {
  background: #2466df;
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .home-continue,
#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .illustrated-welcome {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .home-continue {
  gap: 10px;
  padding: 16px;
}

#mode-screen[data-home-experience="illustrated"] .home-continue > h2 {
  color: var(--ill-rust);
  font: 900 14px/1 var(--ill-font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#mode-screen[data-home-experience="illustrated"] .home-continue-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item {
  --continue-art: var(--ill-continue-learning);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 152px;
  gap: 8px;
  padding: 16px 14px 14px calc(46% + 16px);
  border-radius: 14px;
  background-color: var(--ill-paper-strong);
  background-image:
    linear-gradient(90deg, transparent 0 42%, rgba(255, 253, 248, 0.12) 43%, var(--ill-paper-strong) 48%),
    var(--continue-art);
  background-position: 0 0, left center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 49% 100%;
}

#mode-screen[data-home-experience="illustrated"] #home-opening-continue {
  --continue-art: var(--ill-continue-opening);
}

#mode-screen[data-home-experience="illustrated"] #home-review-continue {
  --continue-art: var(--ill-continue-review);
}

#mode-screen[data-home-experience="illustrated"] #home-tournament-continue {
  --continue-art: var(--ill-continue-tournament);
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item[data-mode-career] {
  --continue-art: var(--ill-continue-career);
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item > .home-icon {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item > span:nth-child(2) {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item > span:nth-child(2) > strong {
  color: var(--ill-green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item > span:nth-child(2) > span:first-of-type {
  color: var(--ill-ink-strong);
  font: 700 17px/1.15 var(--ill-font-display);
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item > .home-progress {
  position: absolute;
  right: 14px;
  bottom: 13px;
  width: calc(54% - 30px);
  margin: 0;
}

#mode-screen[data-home-experience="illustrated"] .home-continue-item[data-illustrated-overflow="true"] {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .home-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#mode-screen[data-home-experience="illustrated"] .home-section {
  position: relative;
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 278px;
  gap: 8px 14px;
  padding: 20px 18px 16px;
  isolation: isolate;
  background: var(--ill-paper-strong);
}

#mode-screen[data-home-experience="illustrated"] .home-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 58% 0 0;
  border-radius: inherit;
  background-color: var(--ill-paper-soft);
  background-image: var(--section-art);
  background-position: var(--section-focal, center);
  background-size: cover;
}

#mode-screen[data-home-experience="illustrated"] .home-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 52% 0 31%;
  background: linear-gradient(90deg, transparent, var(--ill-paper-strong) 78%);
}

#mode-screen[data-home-experience="illustrated"] .home-section[data-illustrated-domain="play"] {
  --section-art: var(--ill-art-play);
  --section-focal: var(--ill-art-focal-play);
}

#mode-screen[data-home-experience="illustrated"] .home-section[data-illustrated-domain="improve"] {
  --section-art: var(--ill-art-improve);
  --section-focal: var(--ill-art-focal-improve);
}

#mode-screen[data-home-experience="illustrated"] .home-section[data-illustrated-domain="compete"] {
  --section-art: var(--ill-art-compete);
  --section-focal: var(--ill-art-focal-compete);
}

#mode-screen[data-home-experience="illustrated"] .home-section[data-illustrated-domain="career"] {
  --section-art: var(--ill-art-tools);
  --section-focal: var(--ill-art-focal-tools);
}

#mode-screen[data-home-experience="illustrated"] .home-section-heading,
#mode-screen[data-home-experience="illustrated"] .home-card-stack {
  grid-column: 2;
}

#mode-screen[data-home-experience="illustrated"] .home-section-heading {
  min-height: 62px;
  padding: 0;
  border: 0;
}

#mode-screen[data-home-experience="illustrated"] .home-section-heading > span {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .home-section-heading h2 {
  color: var(--ill-rust);
  font: 900 13px/1 var(--ill-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#mode-screen[data-home-experience="illustrated"] .home-section-heading p {
  margin-top: 6px;
  color: var(--ill-ink-strong);
  font: 700 clamp(23px, 2.1vw, 34px)/1.03 var(--ill-font-display);
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 62px;
  gap: 7px;
  padding: 8px;
  border-radius: 10px;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:first-child {
  grid-column: 1 / -1;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 58px;
  border-color: var(--ill-green);
  background: var(--ill-action-bg);
  color: white;
  padding: 9px 14px;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:first-child :is(strong, span) {
  color: white;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:first-child .home-icon {
  background: rgba(255, 255, 255, 0.16);
  color: white;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:not(:first-child) > span:nth-child(2) > span,
#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:not(:first-child) small,
#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:not(:first-child) .home-card-arrow {
  display: none;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:not(:first-child) .home-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:not(:first-child) .home-icon :is(svg, img) {
  width: 22px;
  height: 22px;
}

#mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:not(:first-child) strong {
  font-size: 12px;
  line-height: 1.1;
}

#mode-screen[data-home-experience="illustrated"] .home-tip {
  min-height: 58px;
  padding: 8px 18px;
}

#mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .home-tip {
  display: none;
}

/* Keep the established dashboard's complete four-part career loop visible in
   the first desktop viewport, as in the approved reference compositions. */
@media (min-width: 821px) {
  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-continue {
    gap: 8px;
    padding: 10px 14px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-continue-grid {
    gap: 10px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-continue-item {
    min-height: 108px;
    padding: 10px 12px 10px calc(46% + 12px);
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-continue-item > .home-progress {
    right: 10px;
    bottom: 8px;
    width: calc(54% - 22px);
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-section-grid {
    gap: 10px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-section {
    min-height: 228px;
    gap: 6px 12px;
    padding: 12px 14px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-section-heading {
    min-height: 48px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-section-heading p {
    margin-top: 4px;
    font-size: clamp(22px, 1.8vw, 29px);
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-card-stack.mode-actions {
    gap: 6px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-card-stack.mode-actions button {
    min-height: 42px;
    padding: 6px 7px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-card-stack.mode-actions button:first-child {
    min-height: 48px;
    padding: 7px 11px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-card-stack.mode-actions button:not(:first-child) .home-icon {
    width: 28px;
    height: 28px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="established"] .home-tip {
    min-height: 48px;
    padding-block: 6px;
  }
}

:root[data-kids-theme] #mode-screen[data-home-experience="illustrated"] .home-section-heading p {
  font-family: var(--ill-font-display);
}

/* Shared feature chrome ----------------------------------------------- */

body.illustrated-feature-mode .app-header {
  min-height: 58px;
  border-bottom: 0;
  background: linear-gradient(105deg, #0b3328, #153f32);
  color: #fff8e8;
  padding-inline: max(18px, calc((100vw - 1620px) / 2));
}

body.illustrated-feature-mode .app-header :is(button, .header-menu-button) {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff8e8;
}

body.illustrated-feature-mode .app-header .app-section-back {
  background: rgba(255, 255, 255, 0.1);
  color: #fff8e8;
}

body.illustrated-feature-mode .app-header .app-section-back:hover,
body.illustrated-feature-mode .app-header .app-section-back:focus-visible {
  background: #fff8e8;
  color: #0b3328;
}

body.illustrated-feature-mode .app-header .illustrated-audience-switch {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(0, 0, 0, 0.12);
}

body.illustrated-feature-mode .app-header .illustrated-audience-switch button {
  color: #fff8e8;
}

body.illustrated-feature-mode :is(
  #opponent-screen,
  .opening-practice-screen,
  .placement-tournament-screen,
  .danya-speedruns-screen,
  .resources-screen
) {
  width: min(1640px, calc(100vw - 24px));
  max-width: 1640px;
  padding: 14px 12px 30px;
}

body.illustrated-feature-mode :is(
  .resources-screen,
  .career-screen,
  .career-stats-screen,
  .settings-screen,
  .stats-screen
) {
  color: var(--ill-ink);
  font-family: var(--ill-font-ui);
}

body.illustrated-feature-mode :is(
  .resources-screen,
  .career-screen,
  .career-stats-screen,
  .settings-screen,
  .stats-screen
) h1,
body.illustrated-feature-mode :is(
  .resources-screen,
  .career-screen,
  .career-stats-screen,
  .settings-screen,
  .stats-screen
) h2 {
  color: var(--ill-ink-strong);
  font-family: var(--ill-font-display);
}

body.illustrated-feature-mode :is(
  .resources-checklist,
  .resources-quick-actions,
  .resources-footer,
  .resources-tip,
  .career-panel,
  .career-summary-card,
  .career-stats-card,
  .career-stats-panel,
  .settings-screen,
  .settings-engine-picker,
  .stats-panel,
  .stats-summary > *
) {
  border-color: var(--ill-line);
  border-radius: var(--ill-radius);
  background-color: var(--ill-paper-strong);
  box-shadow: var(--ill-shadow-soft);
}

body.illustrated-feature-mode .resources-screen {
  background:
    linear-gradient(rgba(255, 250, 240, 0.88), rgba(255, 250, 240, 0.97)),
    var(--ill-art-tools) center 42% / cover fixed;
}

:root[data-kids-theme] body.illustrated-feature-mode .resources-screen {
  background:
    linear-gradient(rgba(248, 251, 255, 0.9), rgba(248, 251, 255, 0.98)),
    var(--ill-art-tools) center 42% / cover fixed;
}

body.illustrated-feature-mode .settings-screen {
  border-color: var(--ill-line);
  background:
    linear-gradient(90deg, var(--ill-paper-strong) 0 66%, rgba(255, 253, 248, 0.9)),
    var(--ill-art-study) right center / 38% auto no-repeat;
}

body.illustrated-feature-mode .settings-engine-picker,
body.illustrated-feature-mode .settings-screen :is(select, button) {
  border-color: var(--ill-line);
  background: var(--ill-paper-strong);
  color: var(--ill-ink-strong);
}

:root[data-kids-theme] body.illustrated-feature-mode .app-header {
  border-bottom: 1px solid var(--ill-line);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ill-ink-strong);
}

:root[data-kids-theme] body.illustrated-feature-mode .app-header :is(button, .header-menu-button) {
  border-color: var(--ill-line);
  color: var(--ill-ink-strong);
}

:root[data-kids-theme] body.illustrated-feature-mode .app-header .app-section-back {
  background: var(--ill-paper-strong);
  color: var(--ill-ink-strong);
}

:root[data-kids-theme] body.illustrated-feature-mode .app-header .illustrated-audience-switch {
  border-color: var(--ill-line);
  background: var(--ill-paper-soft);
}

:root[data-kids-theme] body.illustrated-feature-mode .app-header .illustrated-audience-switch button {
  color: var(--ill-muted);
}

:root[data-kids-theme] body.illustrated-feature-mode .app-header .illustrated-audience-switch button:is(.active, [aria-pressed="true"]) {
  color: white;
}

/* Opening Practice ---------------------------------------------------- */

body.illustrated-feature-mode .opening-practice-header {
  min-height: 120px;
  margin-bottom: 10px;
  padding: 18px 18px 14px;
  border: 1px solid var(--ill-line);
  border-radius: var(--ill-radius);
  background: var(--ill-paper-strong);
  box-shadow: var(--ill-shadow-soft);
}

body.illustrated-feature-mode .opening-practice-header > div {
  max-width: 58%;
}

body.illustrated-feature-mode .opening-practice-setup {
  grid-template-columns: minmax(0, 3fr) minmax(300px, 1.08fr);
  align-items: start;
}

body.illustrated-feature-mode .opening-practice-library-panel {
  padding: 16px;
}

body.illustrated-feature-mode .opening-practice-library-panel > .learning-panel-heading {
  display: none;
}

body.illustrated-feature-mode .opening-practice-today-grid {
  gap: 12px;
}

body.illustrated-feature-mode .opening-practice-today-task {
  --queue-art: var(--ill-opening-queue-1);
  position: relative;
  min-height: 142px;
  overflow: hidden;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-content: end;
  padding: 72px 14px 14px;
  border-color: var(--ill-line);
  border-radius: 13px;
  background:
    linear-gradient(0deg, var(--ill-paper-strong) 0 52%, transparent 78%),
    var(--queue-art) center 52% / cover no-repeat;
}

body.illustrated-feature-mode .opening-practice-today-task:nth-child(2) {
  --queue-art: var(--ill-opening-queue-2);
}

body.illustrated-feature-mode .opening-practice-today-task:nth-child(3) {
  --queue-art: var(--ill-opening-queue-3);
}

body.illustrated-feature-mode .opening-practice-today-task.selected {
  border-color: var(--ill-green);
  box-shadow: inset 0 0 0 1px var(--ill-green);
}

body.illustrated-feature-mode .opening-practice-mode-options .opening-practice-option,
body.illustrated-feature-mode #opening-practice-modes .opening-practice-option {
  --mode-art: var(--ill-opening-mode-common);
  min-height: 94px;
  padding-right: 35%;
  background:
    linear-gradient(90deg, var(--ill-paper-strong) 0 64%, transparent 90%),
    var(--mode-art) right center / 42% auto no-repeat;
}

body.illustrated-feature-mode #opening-practice-modes .opening-practice-option:nth-child(2) {
  --mode-art: var(--ill-opening-mode-endless);
  background-image:
    linear-gradient(90deg, var(--ill-paper-strong) 0 64%, transparent 90%),
    var(--mode-art);
}

body.illustrated-feature-mode #opening-practice-modes .opening-practice-option.selected {
  background-color: var(--ill-green);
  background-image:
    linear-gradient(90deg, rgba(10, 54, 41, 0.96) 0 65%, rgba(10, 54, 41, 0.2) 94%),
    var(--mode-art);
  color: white;
}

:root[data-kids-theme] body.illustrated-feature-mode #opening-practice-modes .opening-practice-option {
  background-image:
    linear-gradient(90deg, white 0 64%, transparent 90%),
    var(--mode-art);
}

:root[data-kids-theme] body.illustrated-feature-mode #opening-practice-modes .opening-practice-option:nth-child(2) {
  background-image:
    linear-gradient(90deg, white 0 64%, transparent 90%),
    var(--mode-art);
}

:root[data-kids-theme] body.illustrated-feature-mode #opening-practice-modes .opening-practice-option.selected {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--kids-accent) 94%, black) 0 65%, transparent 94%),
    var(--mode-art);
}

/* Tournament ---------------------------------------------------------- */

body.illustrated-feature-mode .placement-tournament-header {
  position: relative;
  min-height: 204px;
  overflow: hidden;
  align-items: start;
  padding: 26px 46% 22px 18px;
  border: 1px solid var(--ill-line);
  border-radius: var(--ill-radius);
  background:
    linear-gradient(90deg, var(--ill-paper-strong) 0 49%, rgba(255, 253, 248, 0.8) 61%, rgba(255, 253, 248, 0.08)),
    var(--ill-art-tournament) right 54% / 56% auto no-repeat;
  box-shadow: var(--ill-shadow-soft);
}

body.illustrated-feature-mode .placement-tournament-header > div:first-child {
  padding-left: 0;
}

body.illustrated-feature-mode .placement-tournament-header > div:first-child::before {
  display: none;
}

body.illustrated-feature-mode .placement-tournament-actions {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 1;
  max-width: 44%;
  justify-content: flex-end;
}

body.illustrated-feature-mode .placement-tournament-summary {
  position: relative;
  z-index: 2;
  margin-top: -16px;
  border-color: var(--ill-line);
  background: var(--ill-paper-strong);
  box-shadow: var(--ill-shadow);
}

body.illustrated-feature-mode .placement-tournament-primary-actions {
  gap: 12px;
}

body.illustrated-feature-mode .placement-tournament-primary-actions > button {
  min-height: 48px;
  border-radius: 10px;
}

body.illustrated-feature-mode .placement-tournament-standings-panel,
body.illustrated-feature-mode .placement-tournament-rounds-panel {
  border-color: var(--ill-line);
  border-radius: var(--ill-radius);
  background: var(--ill-paper-strong);
  box-shadow: var(--ill-shadow-soft);
}

:root[data-kids-theme] body.illustrated-feature-mode .placement-tournament-header {
  background:
    linear-gradient(90deg, white 0 49%, rgba(255, 255, 255, 0.84) 61%, rgba(255, 255, 255, 0.05)),
    url("/assets/illustrated/kids/tournament-juniors.jpg") right center / 60% auto no-repeat;
}

/*
 * Tournament presentation
 *
 * The underlying tournament, Swiss pairing, and URL state stay untouched.
 * Illustrated mode presents that state as responsive editorial UI instead of
 * inheriting the retired pixel-room frames, monospace labels, or game sprites.
 */
body.illustrated-feature-mode .placement-tournament-screen {
  color: var(--ill-ink);
  font-family: var(--ill-font-ui);
}

body.illustrated-feature-mode .placement-tournament-status {
  color: var(--ill-muted);
}

body.illustrated-feature-mode .placement-tournament-presentation {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(108px, 1fr));
  gap: 4px;
  overflow: hidden;
  border: 1px solid var(--ill-line);
  border-radius: 13px;
  outline: 0;
  background: var(--ill-paper-strong);
  padding: 4px;
  box-shadow: var(--ill-shadow-soft);
}

body.illustrated-feature-mode .placement-tournament-presentation button,
body.illustrated-feature-mode .placement-journey-table-access button {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background: transparent;
  color: var(--ill-ink-strong);
  padding: 9px 18px;
  font-family: var(--ill-font-ui);
  font-weight: 800;
  text-shadow: none;
}

body.illustrated-feature-mode .placement-tournament-presentation button:is(.active, [aria-pressed="true"]),
body.illustrated-feature-mode .placement-tournament-presentation button:is(:hover, :focus-visible),
body.illustrated-feature-mode .placement-journey-table-access button:is(:hover, :focus-visible) {
  border-color: transparent;
  outline: 0;
  background: var(--ill-action-bg);
  color: white;
}

body.illustrated-feature-mode .placement-tournament-presentation button:focus-visible,
body.illustrated-feature-mode .placement-journey-table-access button:focus-visible {
  box-shadow: inset 0 0 0 3px var(--ill-focus-ring);
}

body.illustrated-feature-mode .placement-tournament-journey {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ill-line);
  border-image: none;
  border-radius: var(--ill-radius);
  outline: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ill-paper-soft) 54%, transparent), transparent 42%),
    var(--ill-paper-strong);
  color: var(--ill-ink);
  padding: clamp(20px, 2.4vw, 34px);
  font-family: var(--ill-font-ui);
  box-shadow: var(--ill-shadow);
}

body.illustrated-feature-mode .placement-journey-event {
  display: block;
  border-bottom: 1px solid var(--ill-line);
  padding-bottom: 18px;
}

body.illustrated-feature-mode .placement-journey-event h2 {
  margin: 4px 0 0;
  color: var(--ill-ink-strong);
  font: 700 clamp(30px, 3.2vw, 48px)/1.02 var(--ill-font-display);
  letter-spacing: -0.025em;
  text-shadow: none;
  text-transform: none;
}

body.illustrated-feature-mode .placement-journey-event p:last-child {
  margin-top: 9px;
  color: var(--ill-muted);
}

body.illustrated-feature-mode .placement-journey-scoreboard {
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

body.illustrated-feature-mode .placement-journey-player {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ill-line);
  border-radius: 14px;
  background: var(--ill-paper-soft);
  padding: 13px 15px;
}

body.illustrated-feature-mode .placement-journey-player::before,
body.illustrated-feature-mode .placement-journey-opponent-row::before {
  content: "\2659";
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--ill-green);
  color: white;
  font: 700 26px/1 Georgia, serif;
}

body.illustrated-feature-mode .placement-journey-opponent-row::before {
  content: "\265e";
}

body.illustrated-feature-mode .placement-journey-player .placement-journey-portrait,
body.illustrated-feature-mode .placement-journey-opponent-row .placement-journey-portrait {
  display: none !important;
}

body.illustrated-feature-mode .placement-journey-player small,
body.illustrated-feature-mode .placement-journey-opponent-row small,
body.illustrated-feature-mode .placement-journey-scoreboard dt {
  color: var(--ill-rust);
  font-family: var(--ill-font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.illustrated-feature-mode .placement-journey-player strong {
  color: var(--ill-ink-strong);
  font-size: 19px;
}

body.illustrated-feature-mode .placement-journey-scoreboard > dl {
  gap: 12px;
}

body.illustrated-feature-mode .placement-journey-scoreboard > dl > div {
  border: 1px solid var(--ill-line);
  border-radius: 14px;
  background: var(--ill-paper-strong);
  padding: 13px 12px;
}

body.illustrated-feature-mode .placement-journey-scoreboard dd {
  color: var(--ill-ink-strong);
  font: 800 clamp(20px, 2vw, 28px)/1.1 var(--ill-font-ui);
}

body.illustrated-feature-mode .placement-journey-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.7fr);
  gap: clamp(16px, 2vw, 28px);
}

body.illustrated-feature-mode .placement-journey-layout > section > h3 {
  color: var(--ill-ink-strong);
  font: 700 20px/1.2 var(--ill-font-display);
}

body.illustrated-feature-mode .placement-journey-rounds {
  grid-template-columns: repeat(7, minmax(116px, 1fr));
  gap: 9px;
  overflow-x: auto;
  padding: 3px 3px 12px;
  scrollbar-color: var(--ill-line) transparent;
}

body.illustrated-feature-mode .placement-journey-round {
  gap: 11px;
  min-width: 116px;
  min-height: 142px;
  border: 1px solid var(--ill-line);
  border-radius: 13px;
  background: var(--ill-paper-strong);
  color: var(--ill-ink);
  padding: 12px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ill-ink) 7%, transparent);
}

body.illustrated-feature-mode .placement-journey-round-marker {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--ill-paper-soft);
  color: var(--ill-ink-strong);
  font-family: var(--ill-font-ui);
}

body.illustrated-feature-mode .placement-journey-round strong {
  color: var(--ill-ink-strong);
}

body.illustrated-feature-mode .placement-journey-round small {
  color: var(--ill-muted);
}

body.illustrated-feature-mode .placement-journey-round-complete {
  border-color: color-mix(in srgb, var(--ill-green) 58%, var(--ill-line));
  background: var(--ill-green-soft);
}

body.illustrated-feature-mode .placement-journey-round-complete .placement-journey-round-marker {
  background: var(--ill-green);
  color: white;
}

body.illustrated-feature-mode .placement-journey-round-current {
  border-color: var(--ill-green);
  outline: 3px solid color-mix(in srgb, var(--ill-green) 17%, transparent);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--ill-green-soft) 72%, white);
}

body.illustrated-feature-mode .placement-journey-round-current .placement-journey-round-marker {
  background: var(--ill-green);
  color: white;
}

body.illustrated-feature-mode .placement-journey-round-upcoming {
  opacity: 1;
}

body.illustrated-feature-mode .placement-journey-current {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--ill-line);
  border-image: none;
  border-radius: 16px;
  outline: 0;
  background: var(--ill-paper-soft);
  color: var(--ill-ink);
  padding: 18px;
}

body.illustrated-feature-mode .placement-journey-opponent-row {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
}

body.illustrated-feature-mode .placement-journey-opponent-row h3 {
  color: var(--ill-ink-strong);
  font: 700 23px/1.15 var(--ill-font-display);
}

body.illustrated-feature-mode .placement-journey-current > p:not(.eyebrow) {
  color: var(--ill-muted);
}

body.illustrated-feature-mode .placement-journey-actions button,
body.illustrated-feature-mode .placement-journey-actions button:first-child {
  min-height: 48px;
  border: 1px solid var(--ill-green);
  border-radius: 10px;
  outline: 0;
  background: var(--ill-action-bg);
  color: white;
  padding: 9px 14px;
  font-family: var(--ill-font-ui);
  font-weight: 850;
  text-shadow: none;
}

body.illustrated-feature-mode .placement-journey-actions button:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--ill-action-bg) 86%, black);
}

body.illustrated-feature-mode .placement-journey-actions button:focus-visible {
  box-shadow: inset 0 0 0 3px var(--ill-focus-ring);
}

body.illustrated-feature-mode .placement-journey-table-access {
  border-top: 1px solid var(--ill-line);
  padding-top: 18px;
}

body.illustrated-feature-mode .placement-journey-table-access p {
  color: var(--ill-muted);
}

body.illustrated-feature-mode .placement-journey-table-access button {
  border: 1px solid var(--ill-line);
  background: var(--ill-paper-strong);
}

/* Pre-game pairing card: same facts and actions, without the World/RPG skin. */
body.illustrated-feature-mode .tournament-match-presentation {
  background: color-mix(in srgb, var(--ill-ink-strong) 70%, transparent);
  backdrop-filter: blur(5px);
}

body.illustrated-feature-mode .tournament-match-panel {
  display: grid;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  gap: 18px;
  overflow: auto;
  border: 1px solid var(--ill-line);
  border-image: none;
  border-radius: var(--ill-radius);
  outline: 0;
  background: var(--ill-paper-strong);
  color: var(--ill-ink);
  padding: clamp(20px, 3vw, 34px);
  font-family: var(--ill-font-ui);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--ill-ink-strong) 38%, transparent);
}

body.illustrated-feature-mode .tournament-match-header {
  justify-content: flex-start;
  border-bottom: 1px solid var(--ill-line);
  padding: 0 0 16px;
  text-align: left;
}

body.illustrated-feature-mode .tournament-match-header h2 {
  color: var(--ill-ink-strong);
  font: 700 clamp(28px, 3vw, 42px)/1.05 var(--ill-font-display);
  letter-spacing: -0.02em;
  text-shadow: none;
  text-transform: none;
}

body.illustrated-feature-mode .tournament-match-versus {
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  gap: 12px;
}

body.illustrated-feature-mode .tournament-match-player-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 4px 12px;
  border: 1px solid var(--ill-line);
  border-image: none;
  border-radius: 14px;
  background: var(--ill-paper-soft);
  color: var(--ill-ink);
  padding: 14px;
}

body.illustrated-feature-mode .tournament-match-player-card::before {
  content: "\2659";
  grid-row: 1 / 3;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--ill-green);
  color: white;
  font: 700 25px/1 Georgia, serif;
}

body.illustrated-feature-mode .tournament-match-player-card:last-of-type::before {
  content: "\265e";
  background: var(--ill-rust);
}

body.illustrated-feature-mode .tournament-match-portrait {
  display: none !important;
}

body.illustrated-feature-mode .tournament-match-player-card strong {
  align-self: end;
  color: var(--ill-ink-strong);
  font: 800 18px/1.2 var(--ill-font-ui);
  text-shadow: none;
}

body.illustrated-feature-mode .tournament-match-player-card > span {
  color: var(--ill-muted);
}

body.illustrated-feature-mode .tournament-match-vs {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: var(--ill-paper-soft);
  color: var(--ill-muted);
  font: 900 13px/1 var(--ill-font-ui);
  text-shadow: none;
}

body.illustrated-feature-mode .tournament-match-facts {
  overflow: hidden;
  border: 1px solid var(--ill-line);
  border-radius: 13px;
  background: var(--ill-paper-soft);
  color: var(--ill-ink-strong);
}

body.illustrated-feature-mode .tournament-match-facts div + div {
  border-left-color: var(--ill-line);
}

body.illustrated-feature-mode .tournament-match-facts dt {
  color: var(--ill-rust);
}

body.illustrated-feature-mode .tournament-match-facts dd {
  color: var(--ill-ink-strong);
  font-family: var(--ill-font-display);
}

body.illustrated-feature-mode .tournament-match-coach {
  display: block;
  border: 1px solid var(--ill-line);
  border-left: 5px solid var(--ill-green);
  border-radius: 12px;
  background: var(--ill-paper-soft);
  color: var(--ill-ink);
  padding: 13px 16px;
}

body.illustrated-feature-mode .tournament-match-coach span {
  color: var(--ill-rust);
}

body.illustrated-feature-mode .tournament-match-coach p {
  color: var(--ill-ink-strong);
  font: 700 17px/1.4 var(--ill-font-ui);
}

body.illustrated-feature-mode .tournament-match-actions button,
body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-actions button {
  min-height: 50px;
  border: 1px solid var(--ill-line);
  border-radius: 10px;
  background: var(--ill-paper-strong);
  background-image: none;
  color: var(--ill-ink-strong);
  font: 850 14px/1.2 var(--ill-font-ui);
  text-shadow: none;
}

body.illustrated-feature-mode #tournament-match-enter,
body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-actions .opponent-result-modal-primary {
  border-color: var(--ill-green);
  background: var(--ill-action-bg);
  background-image: none;
  color: white;
  font-size: 16px;
}

body.illustrated-feature-mode .tournament-match-actions button:is(:hover, :focus-visible),
body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-actions button:is(:hover, :focus-visible) {
  border-color: var(--ill-green);
  background: var(--ill-green-soft);
  background-image: none;
  color: var(--ill-ink-strong);
}

body.illustrated-feature-mode #tournament-match-enter:is(:hover, :focus-visible),
body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-actions .opponent-result-modal-primary:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--ill-green) 86%, black);
  color: white;
}

/* Post-game result card uses the same Illustrated visual language. */
body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation {
  background: color-mix(in srgb, var(--ill-ink-strong) 70%, transparent);
  backdrop-filter: blur(5px);
}

body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-panel {
  width: min(620px, calc(100vw - 32px));
  border: 1px solid var(--ill-line);
  border-image: none;
  border-radius: var(--ill-radius);
  outline: 0;
  background: var(--ill-paper-strong);
  color: var(--ill-ink);
  padding: 12px;
  font-family: var(--ill-font-ui);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--ill-ink-strong) 38%, transparent);
}

body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-heading {
  border: 1px solid var(--ill-line);
  border-radius: 14px;
  background: var(--ill-paper-soft);
  color: var(--ill-ink-strong);
}

body.illustrated-feature-mode .opponent-result-modal-tournament {
  gap: 12px;
}

body.illustrated-feature-mode .opponent-result-modal-tournament::before {
  content: "\265c";
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--ill-green);
  color: white;
  font: 700 23px/1 Georgia, serif;
}

body.illustrated-feature-mode .opponent-result-modal-tournament strong {
  color: var(--ill-ink-strong);
  font: 850 14px/1.2 var(--ill-font-ui);
  text-transform: none;
}

body.illustrated-feature-mode .opponent-result-modal-tournament span {
  color: var(--ill-muted);
}

body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-heading :is(.eyebrow, h2, p),
body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation #opponent-result-modal-message {
  color: var(--ill-ink-strong);
}

body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-actions {
  gap: 10px;
  padding: 4px 0 0;
}

/* The shared live-match heading no longer exposes World mode icon art. */
body.illustrated-feature-mode #live-match-event-icon {
  display: none;
}

body.illustrated-feature-mode .live-match-event {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-kids-theme] body.illustrated-feature-mode .placement-tournament-journey {
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--ill-gold) 23%, transparent), transparent 17rem),
    var(--ill-paper-strong);
}

:root[data-kids-theme] body.illustrated-feature-mode :is(
  .placement-journey-player,
  .placement-journey-current,
  .tournament-match-player-card,
  .tournament-match-coach,
  .opponent-result-modal.tournament-result-presentation .opponent-result-modal-heading
) {
  background: var(--ill-paper-soft);
}

:root[data-kids-theme] body.illustrated-feature-mode .placement-journey-round-current {
  border-color: var(--ill-blue);
  outline-color: color-mix(in srgb, var(--ill-blue) 20%, transparent);
}

:root[data-kids-theme] body.illustrated-feature-mode .tournament-match-player-card:last-of-type::before {
  background: var(--ill-gold);
  color: var(--ill-ink-strong);
}

@media (max-width: 820px) {
  body.illustrated-feature-mode .placement-tournament-presentation {
    display: grid;
    width: 100%;
  }

  body.illustrated-feature-mode .placement-tournament-journey {
    padding: 18px;
  }

  body.illustrated-feature-mode .placement-journey-scoreboard,
  body.illustrated-feature-mode .placement-journey-layout {
    grid-template-columns: 1fr;
  }

  body.illustrated-feature-mode .placement-journey-table-access {
    align-items: stretch;
    flex-direction: column;
  }

  body.illustrated-feature-mode #placement-journey-start-round:not([hidden]) {
    position: static;
    inset: auto;
    min-height: 50px;
    box-shadow: none;
  }

  body.illustrated-feature-mode .tournament-match-versus {
    grid-template-columns: 1fr;
  }

  body.illustrated-feature-mode .tournament-match-vs {
    width: auto;
    height: 28px;
    background: transparent;
  }

  body.illustrated-feature-mode .tournament-match-actions,
  body.illustrated-feature-mode .opponent-result-modal.tournament-result-presentation .opponent-result-modal-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body.illustrated-feature-mode .placement-tournament-journey {
    gap: 16px;
    padding: 15px;
  }

  body.illustrated-feature-mode .placement-journey-event h2 {
    font-size: 30px;
  }

  body.illustrated-feature-mode .placement-journey-scoreboard > dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.illustrated-feature-mode .placement-journey-scoreboard > dl > div {
    padding: 10px 6px;
  }

  body.illustrated-feature-mode .placement-journey-scoreboard dd {
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  body.illustrated-feature-mode .placement-journey-actions {
    grid-template-columns: 1fr;
  }

  body.illustrated-feature-mode .tournament-match-panel {
    width: min(100% - 16px, 760px);
    max-height: calc(100vh - 16px);
    padding: 18px;
  }

  body.illustrated-feature-mode .tournament-match-facts {
    grid-template-columns: 1fr;
  }

  body.illustrated-feature-mode .tournament-match-facts div + div {
    border-top: 1px solid var(--ill-line);
    border-left: 0;
  }
}

/* Rivals -------------------------------------------------------------- */

body.illustrated-feature-mode .opponent-scout {
  width: min(1580px, 100%);
  padding: 18px;
}

body.illustrated-feature-mode .opponent-roster-header {
  min-height: 82px;
  padding: 4px 4px 12px;
}

body.illustrated-feature-mode .opponent-roster-header::before {
  display: none;
}

body.illustrated-feature-mode .opponent-time-setup {
  padding: 14px 16px;
}

body.illustrated-feature-mode .opponent-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

body.illustrated-feature-mode .opponent-card {
  border-radius: 16px;
}

body.illustrated-feature-mode .opponent-card-header {
  position: relative;
  display: grid;
  grid-template-areas:
    "portrait portrait"
    "identity rating";
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  gap: 0 12px;
  padding: 0 16px 14px;
  background: var(--ill-paper-strong);
}

body.illustrated-feature-mode .opponent-card-header .opponent-card-portrait {
  grid-area: portrait;
  width: calc(100% + 32px);
  height: clamp(190px, 24vw, 258px);
  margin: 0 -16px 14px;
  border-radius: 15px 15px 0 0;
  object-fit: cover;
  object-position: center 24%;
}

body.illustrated-feature-mode .opponent-card-header > div {
  grid-area: identity;
}

body.illustrated-feature-mode .opponent-card-header .opponent-rating {
  grid-area: rating;
  align-self: end;
  min-width: 66px;
  border: 1px solid var(--ill-green);
  border-radius: 9px;
  padding: 8px 11px;
  text-align: center;
}

body.illustrated-feature-mode .opponent-card-header .opponent-record {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  border-radius: 8px;
  background: rgba(10, 48, 36, 0.88);
  color: white;
  padding: 7px 10px;
  font-size: 11px;
}

body.illustrated-feature-mode .opponent-card-header h2 {
  margin-top: 4px;
  font: 700 clamp(24px, 2.2vw, 38px)/1 var(--ill-font-display);
}

body.illustrated-feature-mode .opponent-card :is(.opponent-description, .opponent-facts, .opponent-columns, .scout-note) {
  display: none;
}

body.illustrated-feature-mode .opponent-card-actions {
  padding: 0 16px 16px;
}

@media (min-width: 821px) {
  body.illustrated-feature-mode .opponent-roster-header {
    min-height: 58px;
    padding-bottom: 6px;
  }

  body.illustrated-feature-mode .opponent-time-setup {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 8px 14px;
    padding: 10px 14px;
  }

  body.illustrated-feature-mode .opponent-time-setup > .opponent-step-heading {
    grid-column: 1 / -1;
  }

  body.illustrated-feature-mode .opponent-time-grid {
    grid-template-columns: minmax(150px, 1.3fr) minmax(96px, 0.8fr) minmax(120px, 1fr);
    gap: 8px;
  }

  body.illustrated-feature-mode .opponent-roster-filters {
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding-right: 176px;
  }

  body.illustrated-feature-mode .opponent-roster-filters .checkbox-row {
    min-height: 38px;
    white-space: nowrap;
  }

  body.illustrated-feature-mode .opponent-practice-row {
    z-index: 3;
    height: 0;
    justify-self: end;
    margin-right: 18px;
    transform: translateY(-61px);
  }

  body.illustrated-feature-mode .opponent-tab-description {
    z-index: 2;
    height: 0;
    margin-left: 230px;
    transform: translateY(-42px);
    white-space: nowrap;
  }

  body.illustrated-feature-mode .opponent-card-header .opponent-card-portrait {
    height: clamp(196px, 21vw, 244px);
  }

  body.illustrated-feature-mode .opponent-scout > label:has(#opponent-debug-toggle) {
    display: none;
  }
}

@media (min-width: 821px) and (max-width: 1399px) {
  body.illustrated-feature-mode .opponent-roster-filters {
    grid-template-columns: minmax(180px, 1fr) auto;
    padding-right: 0;
  }

  body.illustrated-feature-mode .opponent-practice-row {
    height: auto;
    margin-right: 0;
    transform: none;
  }
}

@media (min-width: 821px) and (max-width: 1179px) {
  body.illustrated-feature-mode .opponent-time-setup {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  body.illustrated-feature-mode .danya-speedruns-board-room {
    grid-template-columns: minmax(0, 1fr);
  }

  body.illustrated-feature-mode .danya-speedruns-board-room > *,
  body.illustrated-feature-mode .danya-speedruns-screen .danya-speedruns-board-controls {
    width: 100%;
    min-width: 0;
  }

  body.illustrated-feature-mode .danya-speedruns-screen .danya-speedruns-board-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body.board-first-mode.illustrated-feature-mode .danya-speedruns-watch::before,
  body.board-first-mode.illustrated-feature-mode .danya-speedruns-watch::after {
    display: none;
  }

  body.board-first-mode.illustrated-feature-mode .danya-speedruns-video-room,
  body.board-first-mode.illustrated-feature-mode .danya-speedruns-board-room {
    overflow-x: clip;
    overflow-y: visible;
  }

  body.board-first-mode.illustrated-feature-mode .danya-speedruns-board-area,
  body.board-first-mode.illustrated-feature-mode .danya-speedruns-screen.board-focus .danya-speedruns-board-area {
    --review-board-size: min(100%, 86vw);
  }
}

body.illustrated-feature-mode .identity-avatar[data-illustrated-rival] {
  background-position: center 25%;
  background-repeat: no-repeat;
  background-size: cover;
}

:root[data-kids-theme] body.illustrated-feature-mode .identity-avatar[data-illustrated-rival] {
  background-position: center 25%;
  background-repeat: no-repeat;
  background-size: cover;
}

body.illustrated-feature-mode .identity-avatar[data-illustrated-rival] .identity-avatar-initials {
  visibility: hidden;
}

body.illustrated-feature-mode .identity-avatar[data-illustrated-rival="amara"] {
  background-image: url("/assets/illustrated/adult/rival-amara.jpg");
}

body.illustrated-feature-mode .identity-avatar[data-illustrated-rival="haru"] {
  background-image: url("/assets/illustrated/adult/rival-haru.jpg");
}

body.illustrated-feature-mode .identity-avatar[data-illustrated-rival="priya"] {
  background-image: url("/assets/illustrated/adult/rival-priya.jpg");
}

:root[data-kids-theme] body.illustrated-feature-mode .identity-avatar[data-illustrated-rival="amara"] {
  background-image: url("/assets/illustrated/kids/rival-amara.jpg");
}

:root[data-kids-theme] body.illustrated-feature-mode .identity-avatar[data-illustrated-rival="haru"] {
  background-image: url("/assets/illustrated/kids/rival-haru.jpg");
}

:root[data-kids-theme] body.illustrated-feature-mode .identity-avatar[data-illustrated-rival="priya"] {
  background-image: url("/assets/illustrated/kids/rival-priya.jpg");
}

/* Rival match --------------------------------------------------------- */

body.illustrated-feature-mode.board-first-mode .shell.live-match-frame {
  width: min(1510px, calc(100vw - 24px));
  border-radius: 16px;
  background: var(--ill-paper);
}

body.illustrated-feature-mode.board-first-mode .shell.opponent-mode.live-match-frame:has(.top-lines[hidden]):has(.eval-bar[hidden]) {
  grid-template-columns:
    calc(var(--opponent-board-size) + var(--opponent-moves-width) + 10px)
    var(--opponent-side-width);
  justify-content: start;
  width: min(
    calc(100vw - 24px),
    calc(
      var(--opponent-board-size) + var(--opponent-moves-width) + var(--opponent-side-width) +
        var(--opponent-shell-gap) + 36px
    )
  );
}

body.illustrated-feature-mode .shell.opponent-mode.live-match-frame {
  --opponent-moves-width: clamp(184px, 13vw, 224px);
}

body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area {
  grid-template-areas: "top eval board moves";
  grid-template-columns:
    var(--opponent-top-width)
    var(--opponent-eval-width)
    var(--opponent-board-size)
    var(--opponent-moves-width);
  justify-self: start;
  width: calc(
    var(--opponent-top-width) + var(--opponent-eval-width) + var(--opponent-board-size) + var(--opponent-moves-width) + 30px
  );
}

body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area:has(.top-lines[hidden]):has(.eval-bar[hidden]) {
  grid-template-areas: "board moves";
  grid-template-columns: var(--opponent-board-size) var(--opponent-moves-width);
  width: calc(var(--opponent-board-size) + var(--opponent-moves-width) + 10px);
}

body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area:has(.top-lines[hidden]):not(:has(.eval-bar[hidden])) {
  grid-template-areas: "eval board moves";
  grid-template-columns: var(--opponent-eval-width) var(--opponent-board-size) var(--opponent-moves-width);
  width: calc(var(--opponent-eval-width) + var(--opponent-board-size) + var(--opponent-moves-width) + 20px);
}

body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area:not(:has(.top-lines[hidden])):has(.eval-bar[hidden]) {
  grid-template-areas: "top board moves";
  grid-template-columns: var(--opponent-top-width) var(--opponent-board-size) var(--opponent-moves-width);
  width: calc(var(--opponent-top-width) + var(--opponent-board-size) + var(--opponent-moves-width) + 20px);
}

body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-moves-slot {
  grid-area: moves;
}

body.illustrated-feature-mode .shell.live-match-frame .player-strip {
  min-height: 66px;
}

body.illustrated-feature-mode .shell.live-match-frame .live-match-event h1 {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

body.illustrated-feature-mode .shell.live-match-frame .live-player-portrait {
  width: 54px;
  height: 54px;
  font-size: 15px;
}

:root[data-kids-theme] body.illustrated-feature-mode.board-first-mode .shell.live-match-frame {
  background: white;
}

/*
 * Maia uses explicit grid tracks for both player strips. Keep those tracks in
 * sync with the illustrated strip height so neither identity can paint under
 * the board. The live training screen is intentionally plain paper: artwork
 * behind its independently scrolling controls reads as a broken panel edge.
 */
body.illustrated-feature-mode .shell.maia3-engine-mode.live-match-frame {
  --maia3-player-row-height: 40px;
  background: var(--ill-paper);
}

:root[data-kids-theme] body.illustrated-feature-mode .shell.maia3-engine-mode.live-match-frame {
  background: white;
}

body.illustrated-feature-mode .shell.maia3-engine-mode.live-match-frame .player-strip {
  box-sizing: border-box;
  height: var(--maia3-player-row-height);
  min-height: var(--maia3-player-row-height);
  padding-block: 2px;
}

body.illustrated-feature-mode .shell.maia3-engine-mode.live-match-frame .live-player-portrait {
  width: 32px;
  height: 32px;
}

/* Stockfish uses the same compact identity budget as the training opponent. */
body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] {
  --play-player-row-height: 40px;
  background: var(--ill-paper);
}

:root[data-kids-theme] body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] {
  background: white;
}

body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] .player-strip {
  box-sizing: border-box;
  height: var(--play-player-row-height);
  min-height: var(--play-player-row-height);
  padding-block: 2px;
}

body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] .live-player-portrait {
  width: 32px;
  height: 32px;
}

body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] .board-column {
  grid-template-rows: var(--play-player-row-height) var(--play-board-size) var(--play-player-row-height);
  gap: 8px;
}

body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] .eval-bar {
  margin-top: calc(var(--play-player-row-height) + 8px);
}

@media (min-width: 821px) {
  body.illustrated-feature-mode .shell.opponent-mode.live-match-frame {
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    grid-template-rows: minmax(0, 1fr);
  }

  body.illustrated-feature-mode .shell.opponent-mode.live-match-frame :is(.play-moves-slot, .side) {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.illustrated-feature-mode .shell.maia3-engine-mode.live-match-frame {
    --maia3-board-size: min(
      720px,
      calc(100vh - 204px),
      calc(
        100vw - var(--maia3-side-width) - var(--maia3-top-width) - var(--maia3-eval-width) -
          var(--maia3-shell-gap) - var(--maia3-play-gaps) - 48px
      )
    );
  }

  body.illustrated-feature-mode .shell.maia3-engine-mode.live-match-frame .side {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }

  body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] {
    --play-board-size: min(
      720px,
      calc(100vh - 204px),
      calc(
        100vw - var(--play-side-width) - var(--play-top-width) - var(--play-eval-width) -
          var(--play-shell-gap) - 68px
      )
    ) !important;
  }

  body.illustrated-feature-mode .shell.live-match-frame[data-live-match-variant="stockfish"] .side {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
}

/* Game Review: compact identities must share the board's fixed viewport. */

body.illustrated-feature-mode .review-player-identity {
  align-items: center;
}

body.illustrated-feature-mode .review-player-portrait {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--ill-line);
  border-radius: 8px;
  font-size: 10px;
}

@media (min-width: 901px) {
  body.illustrated-feature-mode .review-screen.review-board-active .review-board-area {
    --review-board-size: min(calc(100% - 38px), calc(100vh - 180px), 720px);
  }

  body.illustrated-feature-mode .review-screen.review-board-active .review-board-area.eval-hidden {
    --review-board-size: min(100%, calc(100vh - 180px), 720px);
  }
}

/* Danya video + canonical analysis board ------------------------------ */

body.illustrated-feature-mode .danya-speedruns-watch {
  position: relative;
  isolation: isolate;
}

body.illustrated-feature-mode .danya-speedruns-watch::before,
body.illustrated-feature-mode .danya-speedruns-watch::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  opacity: 0.5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image: radial-gradient(circle at center, black 25%, transparent 72%);
  mask-image: radial-gradient(circle at center, black 25%, transparent 72%);
}

body.illustrated-feature-mode .danya-speedruns-watch::before {
  left: -80px;
  bottom: -70px;
  background-image: var(--ill-danya-decor-left);
}

body.illustrated-feature-mode .danya-speedruns-watch::after {
  right: -75px;
  bottom: -65px;
  background-image: var(--ill-danya-decor-right);
}

body.illustrated-feature-mode .danya-speedruns-video-room,
body.illustrated-feature-mode .danya-speedruns-board-room {
  border-radius: 14px;
}

body.illustrated-feature-mode .danya-speedruns-watch {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}

body.illustrated-feature-mode .danya-speedruns-player {
  border-width: 4px;
  border-color: var(--ill-green);
}

@media (min-width: 1181px) {
  body.illustrated-feature-mode .shell.learning-mode {
    width: min(1800px, calc(100vw - 24px));
  }

  body.board-first-mode.illustrated-feature-mode .danya-speedruns-video-room {
    grid-template-rows: auto minmax(220px, 1fr) auto auto;
    overflow: auto;
  }

  body.board-first-mode.illustrated-feature-mode .danya-speedruns-player {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  body.board-first-mode.illustrated-feature-mode .danya-speedruns-video-actions,
  body.board-first-mode.illustrated-feature-mode .danya-speedruns-playlist-strip {
    position: relative;
    z-index: 1;
    background: var(--ill-paper);
  }
}

/* Responsive parity -------------------------------------------------- */

@media (max-width: 1180px) {
  #mode-screen[data-home-experience="illustrated"] .home-hero {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  }

  #mode-screen[data-home-experience="illustrated"] .home-experience-switch {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  #mode-screen[data-home-experience="illustrated"] .home-continue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #mode-screen[data-home-experience="illustrated"] .home-section-grid {
    grid-template-columns: 1fr;
  }

  body.illustrated-feature-mode .placement-tournament-header {
    padding-right: 38%;
  }

  body.illustrated-feature-mode .opponent-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #mode-screen[data-home-experience="illustrated"] .home-dashboard {
    padding: 8px;
  }

  #mode-screen[data-home-experience="illustrated"] .home-hero {
    min-height: 62px;
    padding: 8px 10px;
  }

  #mode-screen[data-home-experience="illustrated"] .home-experience-switch {
    display: none;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-welcome {
    grid-template-columns: 1fr;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome-art {
    min-height: 250px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome-copy {
    padding: 20px 16px;
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-welcome h1 {
    font-size: clamp(34px, 11vw, 46px);
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-welcome-art {
    min-height: 238px;
    background-position: center 42%;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-first-actions,
  #mode-screen[data-home-experience="illustrated"] .home-continue-grid,
  #mode-screen[data-home-experience="illustrated"] .home-section-grid,
  body.illustrated-feature-mode .opponent-list {
    grid-template-columns: 1fr;
  }

  #mode-screen[data-home-experience="illustrated"] .home-continue-item,
  #mode-screen[data-home-experience="illustrated"] .home-continue-item:has(.home-progress) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #mode-screen[data-home-experience="illustrated"] .home-review-scoresheet-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    width: 100%;
  }

  #mode-screen[data-home-experience="illustrated"] .home-review-scoresheet-button {
    display: grid;
    border: 1px solid var(--ill-ink);
    border-radius: 8px;
    background: var(--ill-ink);
    color: white;
  }

  #mode-screen[data-home-experience="illustrated"] .home-review-archive-button {
    border-color: var(--ill-ink);
    border-radius: 8px;
    background: var(--ill-paper-strong);
    color: var(--ill-ink);
  }

  #mode-screen[data-home-experience="illustrated"][data-illustrated-player-state="new"] .illustrated-new-journey {
    grid-template-columns: 1fr;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card,
  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-wide {
    grid-column: 1;
    grid-template-columns: minmax(130px, 38%) minmax(0, 1fr);
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-wide > .illustrated-new-card-action {
    grid-column: 2;
    justify-self: start;
    margin: 0 16px 16px;
  }

  #mode-screen[data-home-experience="illustrated"] .home-section {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 232px 14px 14px;
  }

  #mode-screen[data-home-experience="illustrated"] .home-section::before {
    inset: 0 0 auto;
    height: 224px;
  }

  #mode-screen[data-home-experience="illustrated"] .home-section::after {
    inset: 150px 0 auto;
    height: 76px;
    background: linear-gradient(0deg, var(--ill-paper-strong), transparent);
  }

  #mode-screen[data-home-experience="illustrated"] .home-section-heading,
  #mode-screen[data-home-experience="illustrated"] .home-card-stack {
    grid-column: 1;
  }

  #mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.illustrated-feature-mode .opening-practice-header,
  body.illustrated-feature-mode .placement-tournament-header {
    min-height: 188px;
    padding: 18px;
    background-position: right center;
    background-size: auto 100%;
  }

  body.illustrated-feature-mode .opening-practice-header > div,
  body.illustrated-feature-mode .placement-tournament-header > div:first-child {
    max-width: 72%;
  }

  body.illustrated-feature-mode .placement-tournament-actions {
    position: static;
    max-width: none;
    margin-top: 12px;
  }

  body.illustrated-feature-mode .placement-tournament-header {
    display: block;
    padding-bottom: 12px;
  }

  body.illustrated-feature-mode .opening-practice-setup {
    grid-template-columns: 1fr;
  }

  body.illustrated-feature-mode .opening-practice-today-task {
    min-height: 126px;
  }

  body.illustrated-feature-mode .opponent-card-header .opponent-card-portrait {
    height: min(68vw, 300px);
  }

  body.illustrated-feature-mode .danya-speedruns-watch {
    grid-template-columns: 1fr;
  }

  body.illustrated-feature-mode.board-first-mode .shell.live-match-frame {
    grid-template-columns: 1fr;
    width: min(1000px, calc(100vw - 20px));
    background: var(--ill-paper);
  }

  body.illustrated-feature-mode.board-first-mode .shell.opponent-mode.live-match-frame:has(.top-lines[hidden]):has(.eval-bar[hidden]) {
    grid-template-columns: 1fr;
    width: min(1000px, calc(100vw - 20px));
  }

  body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area,
  body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area:has(.top-lines[hidden]):has(.eval-bar[hidden]),
  body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area:has(.top-lines[hidden]):not(:has(.eval-bar[hidden])),
  body.illustrated-feature-mode .shell.opponent-mode.live-match-frame .play-area:not(:has(.top-lines[hidden])):has(.eval-bar[hidden]) {
    grid-template-areas:
      "board"
      "moves"
      "eval"
      "top";
    grid-template-columns: 1fr;
    justify-self: center;
    width: min(calc(100vw - 32px), 620px);
  }
}

@media (max-width: 520px) {
  #mode-screen[data-home-experience="illustrated"] .home-experience-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions {
    grid-template-columns: 1fr;
  }

  #mode-screen[data-home-experience="illustrated"] .home-card-stack.mode-actions button:first-child {
    grid-column: 1;
  }

  #mode-screen[data-home-experience="illustrated"] .home-continue-item {
    min-height: 142px;
    padding-left: calc(34% + 12px);
    background-image:
      linear-gradient(90deg, transparent 0 30%, rgba(255, 253, 248, 0.12) 31%, var(--ill-paper-strong) 38%),
      var(--continue-art);
    background-size: 100% 100%, 40% 100%;
  }

  #mode-screen[data-home-experience="illustrated"] .home-continue-item > .home-progress {
    right: 12px;
    width: calc(66% - 24px);
  }

  #mode-screen[data-home-experience="illustrated"] .home-continue-item > span:nth-child(2) > span:first-of-type {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card,
  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-wide {
    grid-template-columns: minmax(112px, 34%) minmax(0, 1fr);
    min-height: 112px;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-copy {
    gap: 5px;
    padding: 12px;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-copy > strong {
    font-size: 18px;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-action {
    min-width: 104px;
    padding: 7px 10px;
    font-size: 12px;
  }

  #mode-screen[data-home-experience="illustrated"] .illustrated-new-card-wide > .illustrated-new-card-action {
    margin: 0 12px 12px;
  }

  body.illustrated-feature-mode .opening-practice-header,
  body.illustrated-feature-mode .placement-tournament-header {
    min-height: 0;
    background-image: none;
  }

  body.illustrated-feature-mode .opening-practice-header > div,
  body.illustrated-feature-mode .placement-tournament-header > div:first-child {
    max-width: none;
  }
}

/* Keep the shared phone board contract after Illustrated's responsive skin rules. */
@media (max-width: 620px) {
  body.board-first-mode.illustrated-feature-mode #app-shell.shell.live-match-frame {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  body.board-first-mode.illustrated-feature-mode :is(
    #game-review-screen.review-board-active,
    #learning-screen.board-lesson-active,
    #opening-practice-screen.practice-active,
    #endgame-practice-screen.practice-active,
    #puzzles-screen.puzzle-active,
    #danya-speedruns-screen
  ) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  body.board-first-mode.illustrated-feature-mode #danya-speedruns-screen :is(
    .danya-speedruns-board-area,
    .danya-speedruns-screen.board-focus .danya-speedruns-board-area
  ) {
    --review-board-size: 100%;
  }

  body.board-first-mode.illustrated-feature-mode #danya-speedruns-screen .danya-speedruns-board-room {
    padding-inline: 0;
  }
}