/* Wasza Arcade typography and accessible text palette. Surface colors stay in the existing theme styles. */
:root {
  --font-heading: 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', 'Trebuchet MS', Arial, sans-serif;
  --font-size-body: 16px;
  --font-size-caption: 12px;
  --font-size-section: 27px;
  --font-size-card-title: 17px;
  --line-body: 1.55;
  --line-heading: 1.2;
  --weight-heading: 600;
  --weight-ui: 800;
  --text-heading: #24304a;
  --text-category: #6547a5;
  --text-game: #29354d;
  --text-body: #56647a;
  --text-accent: #b45309;
  --text-on-dark: #ffffff;
  --ink: var(--text-heading);
  --muted: var(--text-body);
}

html[data-vip="1"][data-mode="dark"] {
  --text-heading: #f2f4ff;
  --text-category: #d5c5ff;
  --text-game: #f2f4ff;
  --text-body: #c5cde0;
  --text-accent: #ffc078;
  --ink: var(--text-heading);
  --muted: var(--text-body);
}

html[data-vip="1"]:not([data-mode="dark"]) {
  --theme-ink: #24304a;
  --theme-muted: #56647a;
}

html[data-vip="1"][data-mode="dark"] {
  --theme-ink: #f2f4ff;
  --theme-muted: #c5cde0;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

body {
  color: var(--text-body) !important;
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-heading);
  font-family: var(--font-heading) !important;
  line-height: var(--line-heading);
  font-weight: var(--weight-heading);
  text-wrap: pretty;
  color: var(--text-heading) !important;
}

.brand,
.brand-mark,
.game-info h3,
.category-chip b,
.game-intro h1,
.player-top,
.grownup-note b,
.auth-card h1,
.admin-top h1,
.stat-card b,
.admin-panel h2,
.empty-admin h3,
.cms-content > h1,
.cms-prose :is(h2, h3, h4) {
  font-family: var(--font-heading);
}

/* Category and collection titles use purple sparingly; the page's main title stays navy. */
.section-heading h2,
.arcade-app .section-heading h2,
.age-filter-title,
.arcade-category-page .age-filter-title {
  color: var(--text-category) !important;
  font-family: var(--font-heading) !important;
  line-height: var(--line-heading);
}

.game-info h3,
.game-card h3,
.game-title,
.arcade-game-card :is(h2, h3, .game-title),
.arcade-app .game-card :is(h2, h3),
.arcade-app .game-title {
  color: var(--text-game) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--font-size-card-title);
  font-weight: var(--weight-heading);
  line-height: 1.25;
}

:is(p, li, dd, .description, .game-info p, .game-intro p, .game-details p,
    .listing-page > p, .hero-copy > p, .access-lead, .access-help,
    .parental-note, .parental-section-title p, .parental-status-copy span,
    .site-footer, .site-footer a, .admin-main, .admin-back,
    .admin-sidebar nav a, .stat-card span, td, .empty-admin) {
  color: var(--text-body) !important;
}

.eyebrow,
.hero-note,
.text-link,
.breadcrumb,
.breadcrumb a,
.game-info p,
.game-details p,
.site-footer small,
.admin-main small,
td small,
th,
.player-age {
  color: var(--text-body) !important;
}

.site-header nav,
.arcade-nav,
.arcade-nav a,
.header-play,
.button,
.site-footer nav,
.admin-sidebar nav,
.admin-back,
.table-action,
.panel-heading a,
.appearance-menu,
.theme-options button,
.mode-toggle {
  font-family: var(--font-body);
  font-weight: var(--weight-ui);
}

.category-chip b,
.arcade-app .arcade-category-grid a > span { color: var(--text-game) !important; font-family: var(--font-heading) !important; font-size: 14px !important; font-weight: 600; }
.category-chip small,
.stat-card span { font-size: var(--font-size-caption); line-height: 1.4; }

.arcade-nav a,
.age-filter-option { font-size: 14px; }
.age-filter-option { color: var(--text-game) !important; }

.site-header nav,
.arcade-nav,
.arcade-nav a,
.site-footer nav,
.admin-sidebar nav a,
.admin-back {
  color: var(--text-body) !important;
}

/* The desktop app sidebar uses a purple surface, so keep all navigation text white and legible. */
@media (min-width: 1024px) {
  body.arcade-app .arcade-nav {
    background: linear-gradient(180deg, #8146d4 0%, #7132c2 54%, #58209c 100%) !important;
    border: 0;
  }

  body.arcade-app .arcade-nav a,
  body.arcade-app .arcade-nav a[aria-current="page"] {
    color: #fff !important;
  }

  body.arcade-app .arcade-nav a:hover,
  body.arcade-app .arcade-nav a:focus-visible {
    color: #fff !important;
    background: rgb(44 13 91 / 32%);
  }
}

.header-play,
.access-submit,
.pwa-install-button,
.parental-actions .button-primary,
.parental-pin-form .button-primary {
  color: var(--text-on-dark);
}

.button-primary { color: var(--text-heading); }
.arcade-app .button-primary { color: var(--text-on-dark); }

.premium,
.badge-premium,
.eyebrow-accent,
.text-accent {
  color: var(--text-accent) !important;
}

.brand b,
.text-accent { color: var(--text-accent) !important; }

.site-header nav a:hover,
.text-link:hover,
.site-footer nav a:hover,
.table-action:hover,
.panel-heading a:hover {
  color: var(--text-accent);
}

.arcade-app .arcade-hero h1,
.arcade-app .access-card h1,
.arcade-app .pwa-page h1,
.arcade-app .cms-content > h1 { color: var(--text-heading) !important; }

.arcade-app .arcade-hero p { color: var(--text-body) !important; }
.arcade-app.portal-home .arcade-hero .arcade-hero-title {
  max-width: 760px;
  color: #ffe13b !important;
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif !important;
  font-size: clamp(38px, 6vw, 66px);
  font-weight: 1000;
  line-height: 1.04;
  letter-spacing: -.055em;
  -webkit-text-stroke: 2px #21172d;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #8a54dc, 0 8px 16px #3c238c4a;
}
.arcade-app.portal-home .arcade-hero .arcade-hero-copy {
  width: auto;
  max-width: min(100%, 520px);
  color: #24304a !important;
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 900;
  line-height: 1.32;
  text-align: left;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.arcade-app.portal-home .arcade-hero .arcade-hero-title,
.arcade-app.portal-home .arcade-hero .arcade-hero-copy { position: relative; z-index: 2; }
@media (max-width: 767px) {
  .arcade-app.portal-home .arcade-hero .arcade-hero-title { max-width: 68%; font-size: clamp(28px, 8vw, 42px); -webkit-text-stroke-width: 1.5px; }
  .arcade-app.portal-home .arcade-hero .arcade-hero-copy { max-width: 68%; font-size: clamp(12px, 3.1vw, 15px); }
  .arcade-app.portal-home .arcade-hero img { width: min(43vw, 190px); }
}
.arcade-app :focus-visible { outline-color: var(--text-category); }
.arcade-app :is(.age-filter-option.is-active, .game-access-tabs a.is-active) {
  background-image: linear-gradient(135deg, #8236d8, #a536c5) !important;
  color: #fff !important;
}
.arcade-app .game-access-tabs a:nth-child(2).is-active {
  background-image: linear-gradient(135deg, #ffc932, #ff9e38) !important;
  color: #24304a !important;
}
.arcade-app :is(.parental-actions .button-primary, .parental-pin-form .button-primary,
  .access-submit, .access-lock .button, .pwa-install-button) {
  background-image: linear-gradient(135deg, #8236d8, #a536c5) !important;
  color: #fff !important;
}
.arcade-app .pin-step { color: #24304a !important; }
.admin-sidebar nav a.active,
.admin-sidebar nav a:hover,
.table-action,
.panel-heading a,
.admin-top .eyebrow { color: var(--text-accent) !important; }
.form-error { color: #8f2d22 !important; }
.form-success { color: #24623a !important; }
.status-published { color: #24623a !important; }
.status-draft { color: #56647a !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--text-category);
  outline-offset: 3px;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-body) !important;
  opacity: 1;
}

:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

.site-footer { font-size: 14px; line-height: 1.5; }
.site-footer small { font-size: 12px; }
.game-info p,
.player-age,
.admin-main small,
td small { font-size: 12px; line-height: 1.4; }
.badge,
.status,
th,
.eyebrow { font-size: var(--font-size-caption); line-height: 1.35; }
.button, .collection-view-all, .arcade-app .collection-view-all { font-size: 14px; }

@media (max-width: 767px) {
  :root { --font-size-body: 16px; --font-size-section: clamp(21px, 5.5vw, 26px); --font-size-card-title: 16px; }
  .section-heading h2 { font-size: var(--font-size-section); }
  .game-info h3, .game-card h3, .game-title { font-size: var(--font-size-card-title); }
  .game-info p, .site-footer, .site-footer a { font-size: 13px; }
  .arcade-nav a, .arcade-category-grid a > span { font-size: 14px; }
  .badge, .status { font-size: 12px; }
  .arcade-nav a[aria-current="page"] { color: #fff !important; }
}