body.immersive-game-active .top-bar,
body.immersive-game-active .app-sidebar {
  display: none;
}

body.immersive-game-active .app-shell {
  margin-left: 0;
  padding-bottom: 0;
}

body.immersive-game-active .page {
  width: min(1800px, calc(100% - 24px));
  padding: 12px 0 24px;
}

body:not(.grammar-clash-route-active) .section-heading,
body:not(.grammar-clash-route-active) .games-header,
body:not(.grammar-clash-route-active) .codex-hero,
body:not(.grammar-clash-route-active) .grammar-hero,
body:not(.grammar-clash-route-active) .lesson-hero,
body:not(.grammar-clash-route-active) .class-detail-hero,
body:not(.grammar-clash-route-active) .visages-detail {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(244, 250, 255, 0.66);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(18, 47, 88, 0.66), rgba(78, 116, 160, 0.2)),
    linear-gradient(180deg, rgba(210, 231, 255, 0.22), rgba(22, 50, 88, 0.1)),
    url("/assets/moonveil-academy-hero.png") center / cover no-repeat;
  box-shadow: 0 22px 72px rgba(10, 33, 66, 0.24), var(--inner-glow);
}

body:not(.grammar-clash-route-active) .section-heading {
  max-width: none;
}

body:not(.grammar-clash-route-active) .section-heading h1,
body:not(.grammar-clash-route-active) .games-header h1,
body:not(.grammar-clash-route-active) .codex-hero h1,
body:not(.grammar-clash-route-active) .grammar-hero h1,
body:not(.grammar-clash-route-active) .lesson-hero h1,
body:not(.grammar-clash-route-active) .class-detail-hero h1,
body:not(.grammar-clash-route-active) .visages-detail h1 {
  color: #f7fbff;
  text-shadow: 0 2px 18px rgba(11, 28, 54, 0.5);
}

body:not(.grammar-clash-route-active) .section-heading p:not(.eyebrow),
body:not(.grammar-clash-route-active) .games-header p:not(.eyebrow),
body:not(.grammar-clash-route-active) .codex-hero p:not(.eyebrow),
body:not(.grammar-clash-route-active) .grammar-hero p:not(.eyebrow),
body:not(.grammar-clash-route-active) .lesson-hero p:not(.eyebrow),
body:not(.grammar-clash-route-active) .class-detail-hero p:not(.eyebrow),
body:not(.grammar-clash-route-active) .visages-detail p:not(.eyebrow) {
  color: #e9f4ff;
  text-shadow: 0 2px 16px rgba(11, 28, 54, 0.36);
}

body:not(.grammar-clash-route-active) :is(
  .admin-grid .stat-card,
  .content-card,
  .management-panel,
  .profile-card-main,
  .path-card,
  .leaderboard-card,
  .codex-card,
  .grammar-card,
  .grammar-detail,
  .lesson-card,
  .exercise-card,
  .game-card,
  .detail-panel,
  .class-card,
  .class-code-box,
  .module-card
) {
  color: var(--glass-text);
  border: 1px solid rgba(244, 250, 255, 0.62);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.9), rgba(218, 232, 255, 0.74));
  box-shadow: 0 18px 48px rgba(17, 48, 86, 0.15), var(--inner-glow);
}

body:not(.grammar-clash-route-active) :is(
  .admin-grid .stat-card,
  .management-panel,
  .profile-card-main,
  .path-card,
  .leaderboard-card,
  .codex-card,
  .grammar-card,
  .grammar-detail,
  .lesson-card,
  .exercise-card,
  .game-card,
  .detail-panel,
  .class-card,
  .class-code-box,
  .module-card
) :is(p, li, small, span):not(.eyebrow):not(.reward-pill):not(.status-pill) {
  color: #385779;
}

body:not(.grammar-clash-route-active) :is(
  .admin-grid .stat-card,
  .management-panel,
  .profile-card-main,
  .path-card,
  .leaderboard-card,
  .codex-card,
  .grammar-card,
  .grammar-detail,
  .lesson-card,
  .exercise-card,
  .game-card,
  .detail-panel,
  .class-card,
  .class-code-box,
  .module-card
) :is(h2, h3, strong) {
  color: #10294d;
}

body:not(.grammar-clash-route-active) .admin-grid .stat-card span {
  color: #385779;
}

body:not(.grammar-clash-route-active) :is(.eyebrow):not(.gold) {
  color: #5a7396;
}

body:not(.grammar-clash-route-active) .eyebrow.gold {
  color: #a77c2e;
}

body:not(.grammar-clash-route-active) :is(.ghost-button, .danger-button) {
  color: var(--glass-text);
}

body:not(.grammar-clash-route-active) .ghost-button {
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(74, 104, 145, 0.22);
}

body:not(.grammar-clash-route-active) :is(
  .management-panel,
  .profile-card-main,
  .grammar-detail,
  .lesson-card,
  .exercise-card,
  .detail-panel,
  .class-card,
  .class-code-box
) :is(input, select, textarea),
body:not(.grammar-clash-route-active) .role-select {
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(74, 104, 145, 0.22);
  border-radius: 10px;
}

body:not(.grammar-clash-route-active) :is(.tag-list span, .skill-chip-row span, .class-meta-row span, .status-pill) {
  color: #244261;
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(74, 104, 145, 0.18);
}

body:not(.grammar-clash-route-active) :is(.path-stats div, .activity-row, .leaderboard-row, .static-practice-item, .ordered-answer, .grammar-conjugation dl div, .grammar-forge-grid div, .mistake-list div) {
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(74, 104, 145, 0.18);
  border-radius: 10px;
}

body:not(.grammar-clash-route-active) :is(.grammar-spellbook span, .grammar-formula, .word-chip) {
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(74, 104, 145, 0.2);
}

body:not(.grammar-clash-route-active) .grammar-formula.large,
body:not(.grammar-clash-route-active) :is(.grammar-forge-grid strong, .mistake-list b, .grammar-exercise-section h3) {
  color: #a77c2e;
}

body:not(.grammar-clash-route-active) .lesson-score-status,
body:not(.grammar-clash-route-active) .grammar-complete-panel {
  color: var(--glass-text);
  border-color: rgba(230, 197, 110, 0.34);
  background: rgba(255, 239, 177, 0.24);
}

body:not(.grammar-clash-route-active) .data-table th {
  color: #244261;
}

body:not(.grammar-clash-route-active) .data-table td {
  color: #385779;
}

body:not(.grammar-clash-route-active) .game-body p {
  color: #385779;
}

body:not(.grammar-clash-route-active) .game-art {
  border-bottom: 1px solid rgba(244, 250, 255, 0.48);
}

@media (max-width: 1080px) {
  body.immersive-game-active .app-shell {
    padding-bottom: 0;
  }
}

@media (max-width: 720px) {
  body.immersive-game-active .page {
    width: min(100% - 16px, 520px);
    padding-top: 8px;
  }
}