:root {
  --color-background: #050505;
  --color-text: #f6f2e7;
  --color-muted: #aaa69d;
  --color-green: #4ad276;
  --color-gold: #d5ad52;
  --world-train: #4ad276;
  --world-fun: #f052ac;
  --world-beauty: #76d9f2;
  --world-ctart: #d5ad52;
  --color-panel: rgba(13, 18, 14, 0.96);
  --color-border: rgba(213, 173, 82, 0.25);
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shared Arcade atmosphere: a fixed, non-interactive pool animated by CSS only. */
.arcade-ambience {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.arcade-ambience.is-game-page { opacity: 0.72; }

/* Keep the silhouettes above the flat page paint while all real UI stays above them. */
body > :not(.arcade-ambience):not(audio):not(.skip-link):not(.language-selector):not(.language-picker):not(.ckb-ghost):not(.ckb-promo):not(.streak-celebration-shell):not(.knight-tour-pattern-viewer):not([data-include="/shared/header.html"]) { position: relative; z-index: 2; }
body > [data-include="/shared/header.html"] { position: relative; z-index: 100; }
body > [data-include="/shared/footer.html"] { display: contents; }

.arcade-ambient-piece {
  --ambient-x: 3vw;
  --ambient-drift: 3vw;
  --ambient-duration: 36s;
  --ambient-delay: -12s;
  --ambient-rotation: 280deg;
  --piece-size: 72px;
  --piece-opacity: 0.42;
  --piece-color: #22c55e;
  position: absolute;
  top: -16vh;
  left: var(--ambient-x);
  color: var(--piece-color);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--piece-size);
  line-height: 1;
  text-shadow: 0 0 22px currentColor, 0 0 8px currentColor;
  will-change: transform, opacity;
  animation: arcade-piece-fall var(--ambient-duration) linear var(--ambient-delay) infinite;
}

@keyframes arcade-piece-fall {
  0% { opacity: 0; transform: translate3d(0, -14vh, 0) rotate(0deg); }
  8% { opacity: var(--piece-opacity); }
  90% { opacity: var(--piece-opacity); }
  100% { opacity: 0; transform: translate3d(var(--ambient-drift), 114vh, 0) rotate(var(--ambient-rotation)); }
}

@media (max-width: 680px) {
  .arcade-ambient-piece { font-size: min(var(--piece-size), 76px); }
  .arcade-ambient-piece:nth-child(n+11) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-ambient-piece { display: none; animation: none; }
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--color-background);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--color-text);
  background: var(--color-background);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

/* Accessible text that stays in the accessibility tree without affecting layout. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  color: var(--color-background);
  background: var(--color-gold);
  border-radius: 0.3rem;
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

/* Screen 01 — Splash */
.splash-page {
  position: relative;
  overflow-x: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}

.splash {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(5rem, 10vh, 7rem) var(--page-gutter) clamp(2rem, 5vh, 4rem);
  overflow: hidden;
}

.splash-glow {
  position: absolute;
  z-index: -1;
  top: 46%;
  left: 50%;
  width: min(55rem, 95vw);
  aspect-ratio: 1.35;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(42, 178, 92, 0.14) 0%, rgba(20, 101, 53, 0.07) 38%, transparent 70%);
  pointer-events: none;
}

.splash-content {
  width: min(100%, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.splash-logo {
  display: block;
  width: clamp(270px, 46vw, 640px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  animation: logo-arrival 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.splash-slogan {
  margin: clamp(1.1rem, 2.5vh, 1.75rem) 0 0;
  transform: translateY(-15px);
  color: var(--color-text);
  font-size: clamp(0.82rem, 1.55vw, 1.08rem);
  font-weight: 600;
  letter-spacing: clamp(0.09em, 0.4vw, 0.2em);
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 0 1.5rem rgba(74, 210, 118, 0.12);
  animation: slogan-arrival 500ms ease-out 220ms both;
}

.start-button {
  width: clamp(240px, 35vw, 480px);
  max-width: 86%;
  margin-top: calc(clamp(1.75rem, 4vh, 3rem) + 15px);
  padding: 0;
  border: 0;
  outline-offset: 0.4rem;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: start-arrival 500ms ease-out 390ms both, start-pulse 2s ease-in-out 1.1s infinite;
  transform-origin: center;
}

.start-button img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 0.8rem rgba(230, 179, 54, 0.32)) drop-shadow(0 0 2rem rgba(213, 156, 33, 0.2));
  pointer-events: none;
  user-select: none;
}

.start-button:hover img { filter: brightness(1.06) drop-shadow(0 0 1rem rgba(230, 179, 54, 0.42)) drop-shadow(0 0 2.2rem rgba(213, 156, 33, 0.26)); }

.start-button:active,
.start-button.is-pressed {
  animation: none;
  transform: scale(0.955);
  transition: transform 90ms ease-out;
}

.splash-page.is-leaving .splash-content,
.splash-page.is-leaving .splash-footer,
.splash-page.is-leaving .language-selector {
  opacity: 0;
  transition: opacity 160ms ease-in;
}

.language-selector {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(var(--page-gutter), env(safe-area-inset-right));
  z-index: 20;
}

.language-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.58rem 0.78rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  background: rgba(8, 10, 8, 0.75);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.language-trigger:hover,
.language-trigger[aria-expanded="true"] {
  border-color: rgba(74, 210, 118, 0.55);
  background: rgba(13, 20, 15, 0.94);
}

.language-picker { position: fixed; z-index: 1000; width: min(12.5rem, calc(100vw - 1rem)); display: grid; gap: 0.15rem; padding: 0.35rem; border: 1px solid rgba(74, 210, 118, 0.32); border-radius: 0.7rem; color: var(--color-text); background: rgba(9, 14, 10, 0.98); box-shadow: 0 0.85rem 2.4rem rgba(0, 0, 0, 0.5), 0 0 1.4rem rgba(74, 210, 118, 0.06); }
.language-picker[hidden] { display: none; }
.language-picker-option { min-height: 2.55rem; display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; border: 1px solid transparent; border-radius: 0.48rem; color: var(--color-text); background: transparent; font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer; }
.language-picker-option:hover, .language-picker-option:focus-visible, .language-picker-option.is-selected { border-color: rgba(74, 210, 118, 0.34); background: rgba(74, 210, 118, 0.09); outline: none; }
.language-picker-check { color: var(--color-green); font-size: 0.9rem; font-weight: 900; text-align: center; }

.splash-footer {
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--page-gutter) max(0.25rem, env(safe-area-inset-bottom));
  color: var(--color-muted);
  opacity: 0.7;
  font-size: clamp(0.65rem, 1.2vw, 0.75rem);
  letter-spacing: 0.05em;
}

.splash-footer p { margin: 0; }

/* Temporary destination page for the Screen 01 flow. */
.home-placeholder {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(circle at 50% 42%, rgba(42, 178, 92, 0.13), transparent 42%), var(--color-background);
  text-align: center;
}

.home-placeholder-content {
  padding: clamp(2rem, 7vw, 4rem);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: rgba(8, 11, 9, 0.72);
}

.home-placeholder h1 {
  margin: 0;
  color: var(--color-gold);
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1.1;
}

.home-placeholder p {
  margin: 1rem 0 0;
  color: var(--color-text);
  font-size: clamp(1rem, 3vw, 1.3rem);
}

@keyframes logo-arrival {
  from { opacity: 0; transform: scale(0.965); }
}

@keyframes slogan-arrival {
  from { opacity: 0; transform: translateY(-9px); }
}

@keyframes start-arrival {
  from { opacity: 0; transform: translateY(0.45rem); }
}

@keyframes start-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@media (max-width: 700px) {
  .splash { padding-top: 4.75rem; }
  .splash-logo { width: min(84vw, 480px); }
  .start-button { width: min(72vw, 370px); }
}

@media (max-height: 540px) and (orientation: landscape) {
  .splash { padding: 3.4rem 2rem 0.5rem; }
  .splash-content { width: min(72vw, 620px); }
  .splash-logo { width: min(43vw, 380px); }
  .splash-slogan { margin-top: 0.45rem; font-size: 0.68rem; }
  .start-button { width: min(29vw, 280px); margin-top: 0.55rem; }
  .splash-footer { min-height: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared application shell */
[hidden] { display: none !important; }

.app-page {
  padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(42, 178, 92, 0.09), transparent 34rem),
    var(--color-background);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(16px);
}

.app-brand { display: block; line-height: 0; }
.app-brand img { display: block; width: auto; height: clamp(62px, 4.7vw, 68px); max-width: min(32vw, 250px); object-fit: contain; }

.header-controls { display: flex; align-items: center; justify-content: flex-end; gap: 0.65rem; }
.global-streak { display: inline-flex; align-items: center; gap: 0.34rem; color: #fff; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.global-streak-flame { font-size: 1.08em; line-height: 1; }
.global-streak.is-pending .global-streak-flame { filter: grayscale(1); opacity: 0.62; }
.global-streak strong { color: #fff; font-weight: 750; }
.global-streak-time { color: var(--color-gold); font-size: 0.68rem; font-weight: 800; }
.global-streak[data-urgency="urgent"] .global-streak-time { color: #f6a928; }
.global-streak[data-urgency="critical"] .global-streak-time { color: #ff765f; text-shadow: 0 0 0.7rem rgba(255,85,60,.35); }
.header-streak-progress { min-width:165px;width:min(24vw,255px);display:grid;grid-template-columns:auto minmax(70px,1fr);align-items:center;gap:.55rem;color:var(--color-muted);text-decoration:none; }
.header-streak-progress-copy { display:grid;line-height:1.05;white-space:nowrap; }
.header-streak-progress-copy strong { color:var(--color-gold);font-size:.68rem;font-weight:900; }
.header-streak-progress-copy small { margin-top:.13rem;font-size:.48rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.header-streak-progress-track { overflow:hidden;height:.48rem;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 3px rgba(0,0,0,.55); }
.header-streak-progress-track i { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#39bd68,var(--color-green));box-shadow:0 0 .65rem rgba(74,210,118,.42);transition:width 220ms ease; }
.header-streak-progress.is-safe .header-streak-progress-track i { background:linear-gradient(90deg,#eab73e,#ffdd76); }
.header-leaderboard { width: 2.25rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-gold); background: rgba(8, 10, 8, 0.75); text-decoration: none; }
.header-leaderboard:hover, .header-leaderboard:focus-visible { border-color: rgba(213, 173, 82, 0.65); background: rgba(213, 173, 82, 0.08); }
.header-language { position: relative; }
.header-language .language-trigger { padding: 0.48rem 0.66rem; }
.sound-toggle {
  width: 2.25rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  background: rgba(8, 10, 8, 0.75);
  cursor: pointer;
}
.sound-toggle:hover { border-color: rgba(74, 210, 118, 0.55); }
.sound-toggle[aria-pressed="false"] { opacity: 0.58; }
.music-toggle { color: var(--color-gold); font-size: 1.12rem; font-weight: 850; }

.player-summary { position: relative; display: flex; align-items: center; gap: clamp(0.45rem, 1.5vw, 1rem); }
.player-stat { color: var(--color-muted); font-size: 0.78rem; white-space: nowrap; }
.player-stat strong { color: var(--color-text); }

.player-identity {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid rgba(170, 166, 157, 0.22);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: 700;
  background: transparent;
  cursor: pointer;
}
.player-identity:hover,
.player-identity[aria-expanded="true"] { background: rgba(255, 255, 255, 0.045); border-color: rgba(74, 210, 118, 0.5); }
.player-identity:focus-visible { outline: 2px solid var(--color-green); outline-offset: 3px; }

.player-avatar-icon { width: 1.45rem; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(170, 166, 157, 0.28); border-radius: 50%; background: rgba(170, 166, 157, 0.12); }
.player-avatar-icon img { display: block; width: 100%; height: 100%; padding: 0.08rem; object-fit: contain; }
.premium-account-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.22rem 0.48rem;
  border: 1px solid rgba(232, 190, 77, 0.48);
  border-radius: 999px;
  color: #f0c95a;
  background: rgba(213, 173, 82, 0.1);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 480px) {
  [data-player-state="premium"] .player-identity { position: relative; }
  .premium-account-badge {
    position: absolute;
    top: calc(100% - 0.15rem);
    right: 0;
    min-height: 1.2rem;
    padding: 0.18rem 0.38rem;
    font-size: 0.5rem;
  }
}
[data-player-state="registered"] .player-identity { color: var(--color-green); border-color: rgba(74, 210, 118, 0.34); }
[data-player-state="registered"] .player-avatar-icon { border-color: rgba(74, 210, 118, 0.55); background: rgba(74, 210, 118, 0.12); box-shadow: 0 0 0.7rem rgba(74, 210, 118, 0.2); }
[data-player-state="premium"] .player-identity { color: var(--color-gold); border-color: rgba(213, 173, 82, 0.4); }
[data-player-state="premium"] .player-avatar-icon { border-color: rgba(213, 173, 82, 0.68); background: rgba(213, 173, 82, 0.12); box-shadow: 0 0 0.85rem rgba(213, 173, 82, 0.3); }

.account-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.7rem);
  right: 0;
  width: min(15rem, calc(100vw - 2rem));
  padding: 0.45rem;
  border: 1px solid rgba(74, 210, 118, 0.25);
  border-radius: 0.9rem;
  background: rgba(8, 11, 9, 0.98);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(16px);
}
.account-menu > div { display: grid; gap: 0.18rem; }
.account-menu a,
.account-menu button {
  width: 100%;
  display: block;
  padding: 0.78rem 0.85rem;
  border: 0;
  border-radius: 0.58rem;
  color: var(--color-text);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 750;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu a:hover,
.account-menu button:hover,
.account-menu a:focus-visible,
.account-menu button:focus-visible { color: var(--color-green); background: rgba(74, 210, 118, 0.08); outline: none; }
[data-player-state="premium"] [data-account-upgrade] { display: none; }

.app-main { width: min(100%, 1280px); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) var(--page-gutter); }
.panel { border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 1.25rem; background: rgba(12, 14, 12, 0.78); }

.play-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(270px, 33vw, 390px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 82% 50%, rgba(74, 210, 118, 0.15), transparent 34%),
    linear-gradient(125deg, rgba(14, 22, 16, 0.98), rgba(7, 8, 7, 0.94));
}

.play-hero-copy { min-width: 0; }
.hero-brand { display: grid; place-items: center; min-width: 0; }
.hero-brand img {
  display: block;
  width: min(100%, 430px);
  height: auto;
  object-fit: contain;
}
.hero-streak-summary { width:min(100%,350px);display:grid;justify-items:center;gap:.45rem;margin-top:.35rem;padding:.8rem 1rem;border:1px solid rgba(213,173,82,.34);border-radius:1rem;background:linear-gradient(145deg,rgba(213,173,82,.075),rgba(7,10,8,.58));box-shadow:0 .65rem 1.5rem rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035); }
.hero-streak-main { display:flex;align-items:baseline;justify-content:center;gap:.5rem; }
.hero-streak-main > span { align-self:center;font-size:2.55rem;filter:drop-shadow(0 0 .8rem rgba(249,115,22,.48)); }
.hero-streak-summary:not(.is-safe) .hero-streak-main > span { filter:grayscale(1);opacity:.58; }
.hero-streak-summary.is-safe { border-color:rgba(213,173,82,.58); }
.hero-streak-main strong { color:var(--color-text);font-size:3.5rem;line-height:.9;letter-spacing:-.06em; }
.hero-streak-main small { max-width:4rem;color:var(--color-gold);font-size:.68rem;font-weight:900;letter-spacing:.11em;line-height:1.1;text-transform:uppercase; }
.hero-streak-meta { display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1rem;color:var(--color-muted);font-size:.72rem;font-weight:800; }
.hero-streak-meta span:first-child { color:#bde7ff; }
.hero-streak-meta span:last-child { color:var(--color-gold);font-variant-numeric:tabular-nums; }

.section-kicker { margin: 0 0 0.75rem; color: var(--color-green); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.play-hero h1 { max-width: 690px; margin: 0; font-size: clamp(2.25rem, 4.6vw, 4.35rem); line-height: 1.02; letter-spacing: -0.04em; }
.hero-support { max-width: 35rem; margin: 1rem 0 0; color: var(--color-muted); font-size: clamp(0.88rem, 1.35vw, 1rem); line-height: 1.55; }
.last-game-name { margin: 1rem 0 0; color: var(--color-text); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 750; }
.button { width: fit-content; min-height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.25rem; border: 1px solid transparent; border-radius: 0.65rem; font-size: 0.76rem; font-weight: 850; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { margin-top: 2rem; color: #021007; background: var(--color-green); box-shadow: 0 0 2rem rgba(74, 210, 118, 0.18); }
.button-secondary { color: var(--color-text); border-color: var(--color-border); background: rgba(255, 255, 255, 0.035); }
.last-game-details { display: flex; gap: 1.5rem; margin-top: 1rem; color: var(--color-muted); }
.last-game-details strong { color: var(--color-gold); }
.hero-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 2rem; }
.hero-actions .button { margin-top: 0; }
.home-hero-recent-row,
.home-hero-mobile-nav { display: none; }
.home-welcome-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem; }
.home-welcome-row .section-kicker { margin: 0; }
.home-guest-register { color: var(--color-green); font-size: 0.72rem; font-weight: 750; line-height: 1.35; text-decoration: underline; text-decoration-color: rgba(74, 210, 118, 0.45); text-underline-offset: 0.2em; }
.home-guest-register:hover,
.home-guest-register:focus-visible { color: var(--color-text); text-decoration-color: var(--color-green); }

.mood-section { scroll-margin-top: 5.5rem; margin-top: clamp(3rem, 7vw, 5.5rem); }
.section-heading { margin-bottom: 1.5rem; }
.section-heading h2 { margin: 0; font-size: clamp(1.65rem, 3.5vw, 2.8rem); letter-spacing: -0.03em; }
.mood-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 1.5vw, 1.2rem); max-width: 980px; margin-inline: auto; }

.mood-card {
  --mood-accent: var(--world-train);
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--mood-accent) 70%, transparent);
  border-radius: 1rem;
  background: #0b0c0b;
  box-shadow: 0 0 4px color-mix(in srgb, var(--mood-accent) 28%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mood-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--mood-accent) 82%, transparent); box-shadow: 0 0.9rem 2.8rem rgba(0, 0, 0, 0.38), 0 0 4px color-mix(in srgb, var(--mood-accent) 38%, transparent); }
.mood-card-fun { --mood-accent: var(--world-fun); }
.mood-card { position: relative; }
.mood-card-primary { position: static; }
.mood-card-primary::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.mood-card:has(.mood-card-primary:focus-visible) { border-color: color-mix(in srgb, var(--mood-accent) 90%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mood-accent) 24%, transparent), 0 0 1.5rem color-mix(in srgb, var(--mood-accent) 20%, transparent); }
.mood-card-beauty { --mood-accent: var(--world-beauty); }
.mood-card-ctart { --mood-accent: var(--world-ctart); border: 5px solid #e8b83f; box-shadow: inset 0 0 0 1px rgba(255,246,185,.9), 0 0 8px rgba(255,211,83,.7), 0 0 30px rgba(213,153,30,.34); }
.mood-card-ctart:hover { border-color: #ffd86b; box-shadow: inset 0 0 0 1px #fff6bd, 0 0 11px rgba(255,220,103,.9), 0 0 38px rgba(213,153,30,.52); }
.mood-card-ctart-link,.mood-card-ctart-link picture { width: 100%; height: 100%; display: block; color: inherit; cursor: pointer; }
.mood-card-ctart-link:focus-visible { outline: 3px solid #fff2a8; outline-offset: -8px; border-radius: .65rem; }
.mood-card-ctart-flagship { grid-column: 1 / -1; display: block; aspect-ratio: 2 / 1; background: #050805; }
.mood-card-ctart-flagship img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mood-card > img { display: block; width: 100%; height: 47%; flex: 0 0 47%; object-fit: cover; }
.mood-card-info { min-height: 0; display: flex; flex: 1 1 53%; flex-direction: column; align-items: flex-start; padding: clamp(0.75rem, 1.35vw, 1.1rem); border-top: 2px solid var(--mood-accent); }
.mood-card-info h3 { margin: 0; color: var(--mood-accent); font-size: clamp(1.55rem, 2.7vw, 2.35rem); font-weight: 950; letter-spacing: 0.045em; line-height: 1; text-transform: uppercase; }
html:is([lang="fr"], [lang="ru"]) .mood-card-info h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: 0.025em; }
.mood-card-info p { min-height: 2.5em; margin: 0.3rem 0 0.55rem; color: color-mix(in srgb, var(--color-muted) 90%, #fff 10%); font-size: clamp(0.68rem, 0.85vw, 0.82rem); line-height: 1.3; }
.home-new-sticker,
.activity-new-badge { display:inline-flex; align-items:center; justify-content:center; border:1px solid #ffe67d; color:#171000; background:linear-gradient(145deg,#fff176 0%,#ffd447 52%,#efa91e 100%); box-shadow:0 .3rem .7rem rgba(0,0,0,.5),0 0 1rem rgba(255,205,50,.48),inset 0 1px 0 rgba(255,255,255,.75); font-weight:1000; letter-spacing:.06em; line-height:1; text-transform:uppercase; transform:rotate(-8deg); }
.home-new-sticker { position:absolute; z-index:4; top:calc(47% - 1.35rem); right:.9rem; min-width:4.6rem; min-height:2.5rem; padding:.48rem .72rem; border-radius:.34rem; font-size:1rem; pointer-events:none; }
.mood-card-info .mood-activity-line { display:grid; gap:.05rem; min-height:0; margin:-.12rem 0 .55rem; color:var(--color-text); font-size:clamp(.72rem,1vw,.92rem); font-weight:950; letter-spacing:.055em; line-height:1.12; text-transform:uppercase; }
.mood-card-info .mood-activity-line span:first-child { color:var(--color-gold); font-size:1.12em; }
.mood-card-info .mood-card-leaderboard { position: relative; z-index: 2; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.72rem 1rem; border: 1px solid color-mix(in srgb, var(--mood-accent) 72%, transparent); border-radius: 0.55rem; color: var(--color-text); background: rgba(5, 5, 5, 0.56); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.mood-card-info .mood-card-leaderboard:hover,
.mood-card-info .mood-card-leaderboard:focus-visible { color: var(--mood-accent); border-color: var(--mood-accent); background: rgba(5, 5, 5, 0.88); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mood-accent) 18%, transparent), 0 0 0.8rem color-mix(in srgb, var(--mood-accent) 25%, transparent); }

.leaderboards-master { display: grid; gap: 1rem; }
.leaderboards-main,.leaderboards-master { min-width: 0; }
.leaderboards-master-hero h1 { margin: 0; color: var(--color-gold); font-size: clamp(2rem, 5vw, 4rem); }
.leaderboards-master-hero p { color: var(--color-muted); }
.leaderboards-category-tabs,.leaderboards-card-modes { display: flex; flex-wrap: wrap; gap: .45rem; }
.leaderboards-category-tabs button,.leaderboards-card-modes button { border: 1px solid var(--color-border); border-radius: 999px; padding: .55rem .8rem; color: var(--color-muted); background: rgba(255,255,255,.025); font-weight: 800; cursor: pointer; }
.leaderboards-category-tabs button[aria-selected="true"],.leaderboards-card-modes button[aria-pressed="true"] { color: #06120a; background: var(--world-train); border-color: var(--world-train); }
.leaderboards-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.leaderboard-summary-card { padding: 1rem; }
.leaderboard-summary-card h2 { margin: 0 0 .7rem; }
.leaderboard-summary-card [data-card-rows] { margin: .75rem 0; }
.leaderboard-card-position { margin: .65rem 0; padding: .6rem .7rem; border: 1px solid rgba(213,173,82,.25); border-radius: .55rem; color: var(--color-text); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.leaderboard-card-position strong { color: var(--color-gold); }
.leaderboard-summary-card .leaderboard-row { min-height: 3rem; padding: .45rem; }
.leaderboard-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.leaderboard-card-actions a { color: var(--world-train); font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.leaderboard-card-actions .leaderboard-card-play { flex: 0 0 auto; min-width: 2rem; min-height: 2rem; display: inline-grid; place-items: center; padding: .35rem; border: 1px solid rgba(213,173,82,.42); border-radius: 50%; color: var(--color-gold); background: rgba(213,173,82,.06); font-size: .72rem; }
.leaderboard-card-actions .leaderboard-card-play { font-size: 0; }
.leaderboard-card-actions .leaderboard-card-play::before { content: "▶"; font-size: .72rem; }
.leaderboard-card-actions .leaderboard-card-play:hover,
.leaderboard-card-actions .leaderboard-card-play:focus-visible { color: #160e00; background: var(--color-gold); border-color: var(--color-gold); }
[data-leaderboard-play-link].leaderboard-icon-play { min-width: 2.6rem; padding-inline: .7rem; color: var(--color-gold); border-color: rgba(213,173,82,.5); background: rgba(213,173,82,.08); font-size: 0; }
[data-leaderboard-play-link].leaderboard-icon-play::before { content: "▶"; font-size: .78rem; }
.leaderboards-my-rankings,.leaderboards-recent,.leaderboards-master-guest { padding: 1rem; }
.leaderboards-my-rankings h2,.leaderboards-recent h2 { margin-top: 0; }
.leaderboards-streaks { border-color:rgba(213,173,82,.3);background:radial-gradient(circle at 90% 0,rgba(249,115,22,.1),transparent 18rem),var(--color-surface); }
.leaderboards-streaks h2 { color:var(--color-gold);text-transform:none; }
.streak-card-subtitle { margin:-.45rem 0 .75rem;color:var(--color-muted);font-size:.72rem; }
.leaderboards-streaks-list { display:grid;gap:.45rem; }
.streak-leaderboard-row { min-width:0;display:grid;grid-template-columns:2rem 2rem minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.5rem .65rem;border:1px solid rgba(255,255,255,.07);border-radius:.58rem;background:rgba(255,255,255,.018); }
.streak-leaderboard-row.is-current { border-color:rgba(74,210,118,.5);background:rgba(74,210,118,.075);box-shadow:inset 3px 0 var(--color-green); }
.streak-leaderboard-row img { width:2rem;aspect-ratio:1;border-radius:50%;object-fit:cover; }
.streak-leaderboard-row span { overflow:hidden;font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap; }
.streak-leaderboard-row b { color:var(--color-gold);font-size:.9rem;white-space:nowrap; }
.streak-leaderboard-row b small { color:var(--color-muted);font-size:.5rem;letter-spacing:.08em; }
[data-my-rankings-list] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
[data-my-rankings-list] article { border: 1px solid var(--color-border); border-radius: .7rem; padding: .75rem; }
[data-my-rankings-list] h3 { margin: 0 0 .45rem; }
[data-my-rankings-list] a,[data-recent-scores] a { display: flex; justify-content: space-between; gap: .75rem; padding: .42rem 0; color: var(--color-text); text-decoration: none; border-top: 1px solid rgba(255,255,255,.06); }
[data-my-rankings-list] a > * { min-width: 0; }
[data-my-rankings-list] a strong { text-align: right; overflow-wrap: anywhere; }
.game-leaderboard-peek { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(.8rem,3vw,2rem); margin: .35rem auto .55rem; font-size: .72rem; }
.game-leaderboard-peek > span { display: grid; text-align: center; }
.game-leaderboard-peek small { color: var(--color-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.game-leaderboard-peek strong { color: var(--color-gold); font-size: 1rem; }
.game-leaderboard-peek summary { cursor: pointer; color: var(--world-train); font-weight: 900; text-transform: uppercase; list-style: none; }
.game-leaderboard-peek details > div { position: absolute; z-index: 20; right: 0; top: calc(100% + .35rem); width: min(19rem,85vw); padding: .75rem; border: 1px solid var(--color-border); border-radius: .7rem; background: #0b120d; box-shadow: 0 1rem 2rem rgba(0,0,0,.55); }
.game-leaderboard-peek details p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .4rem 0; }
.game-leaderboard-peek details a { display: block; margin-top: .35rem; color: var(--world-train); font-weight: 800; }
.home-world-leaderboards { width: min(100%, 1280px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem auto 0; padding: 1rem 1.2rem; border-color: rgba(213,173,82,.42); color: var(--color-text); text-decoration: none; }
.home-world-leaderboards strong { color: var(--color-gold); font-size: clamp(1rem,2vw,1.3rem); letter-spacing: .06em; }
.home-world-leaderboards span { color: var(--color-muted); }
.home-world-leaderboards:hover { border-color: var(--color-gold); box-shadow: 0 0 18px rgba(213,173,82,.12); }

.ctart-page { background: radial-gradient(circle at 50% 8%, rgba(213, 173, 82, 0.13), transparent 34rem), radial-gradient(circle at 8% 48%, rgba(33, 80, 43, 0.13), transparent 30rem), var(--color-background); }
.ctart-world-main { width: min(100%, 1180px); margin: 0 auto; padding: clamp(1.4rem, 4vw, 3rem) var(--page-gutter) clamp(6rem, 9vw, 8rem); }
.ctart-world-main > section + section { margin-top: clamp(1.25rem, 3vw, 2.25rem); }
.ctart-gold-kicker { margin: 0 0 0.55rem; color: var(--color-gold); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.ctart-hero { min-height: 23rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, 23rem); align-items: stretch; overflow: hidden; border: 1px solid rgba(213, 173, 82, 0.42); border-radius: 1.25rem; background: linear-gradient(115deg, rgba(9, 19, 11, 0.98), rgba(7, 8, 7, 0.92)); box-shadow: 0 1.5rem 4rem -2.4rem #000, inset 0 0 3rem rgba(213, 173, 82, 0.035); }
.ctart-hero-copy { z-index: 1; padding: clamp(1.5rem, 5vw, 4rem); }
.ctart-hero h1 { max-width: 11ch; margin: 0; color: #f5f1e7; font-size: clamp(2.6rem, 6vw, 5.25rem); line-height: 0.95; letter-spacing: -0.045em; }
.ctart-hero-copy > p:last-child { max-width: 35rem; margin: 1.2rem 0 0; color: #c9c5ba; font-size: clamp(0.95rem, 1.8vw, 1.2rem); line-height: 1.55; }
.ctart-hero picture { width: 100%; height: 100%; min-height: 0; display: block; }
.ctart-hero img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; object-position: center; }
.ctart-path-hero { position:relative; isolation:isolate; min-height:clamp(37rem,56.3vw,41.5rem); overflow:hidden; border:1px solid rgba(240,190,62,.6); border-radius:1.25rem; color:#fff; background:#061018; box-shadow:0 1.8rem 4rem -2rem #000; }
.ctart-path-hero-art,.ctart-path-hero-art img,.ctart-path-hero-shade { position:absolute; inset:0; width:100%; height:100%; display:block; }
.ctart-path-hero-art img { object-fit:cover; object-position:center; }
.ctart-path-hero-shade { z-index:1; background:linear-gradient(90deg,rgba(1,10,15,.94) 0%,rgba(2,14,18,.82) 31%,rgba(2,12,15,.27) 57%,transparent 78%),linear-gradient(0deg,rgba(1,8,11,.55),transparent 42%); }
.ctart-path-hero-copy { position:relative; z-index:2; width:min(49%,34rem); display:flex; flex-direction:column; padding:clamp(2rem,4.1vw,3.5rem); text-shadow:0 2px 7px rgba(0,0,0,.75); }
.ctart-path-brand { display:grid; width:max-content; }
.ctart-path-brand strong { color:#efbd3b; font-size:clamp(3.4rem,6.8vw,5.8rem); font-weight:1000; line-height:.82; letter-spacing:-.065em; text-shadow:0 .07em 0 #8b5807,0 .11em .12em #000; }
.ctart-path-brand span { margin-top:.72rem; color:#a9d9bd; font-size:clamp(.72rem,1.35vw,1.05rem); font-weight:800; letter-spacing:.32em; }
.ctart-path-hero h2 { margin:clamp(1.6rem,3vw,2.4rem) 0 0; font-size:clamp(2.25rem,4.6vw,4rem); font-weight:1000; line-height:.92; letter-spacing:-.045em; text-transform:uppercase; }
.ctart-path-hero h2 span,.ctart-path-hero h2 em { display:inline; font-style:normal; }
.ctart-path-hero h2 em { color:#ffd34c; }
.ctart-path-stats { display:flex; align-items:center; gap:.75rem; margin:.8rem 0 0; font-size:clamp(1rem,2vw,1.45rem); }
.ctart-path-stats i { color:#ffe08a; font-style:normal; }
.ctart-path-stats span { color:#b9d8c0; }
.ctart-path-description { margin:1.15rem 0 0; color:#a8d0ad; font-size:clamp(.9rem,1.55vw,1.15rem); line-height:1.43; }
.ctart-path-hero-cta { width:min(100%,30rem); min-height:4.5rem; display:grid; place-items:center; gap:.05rem; margin-top:1.15rem; padding:.65rem 1.2rem; border:1px solid #ffdc62; border-radius:1rem; color:#130e02; background:linear-gradient(135deg,#ffe270,#f6ad12); box-shadow:inset 0 1px 0 #fff5b6,0 .7rem 1.5rem rgba(0,0,0,.38),0 0 1.4rem rgba(255,192,33,.24); text-align:center; text-decoration:none; text-shadow:none; }
.ctart-path-hero-cta strong { font-size:clamp(1rem,2vw,1.35rem); font-weight:1000; letter-spacing:.015em; }
.ctart-path-hero-cta small { font-size:.68rem; font-weight:850; letter-spacing:.2em; }
.ctart-path-hero.is-premium .ctart-path-hero-cta { border-color:#a8f568; color:#061006; background:linear-gradient(135deg,#9cef57,#3fbd4f); box-shadow:inset 0 1px 0 #dbffc5,0 .7rem 1.5rem rgba(0,0,0,.38),0 0 1.4rem rgba(75,220,96,.25); }
.ctart-path-hero-cta:hover,.ctart-path-hero-cta:focus-visible { filter:brightness(1.08); transform:translateY(-1px); }
.ctart-path-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin:1.2rem 0 0; padding:0; list-style:none; }
.ctart-path-benefits li { min-width:0; display:grid; justify-items:center; gap:.22rem; text-align:center; }
.ctart-path-benefits b { color:#ffe39a; font-size:1.55rem; line-height:1; }
.ctart-path-benefits span { display:grid; }
.ctart-path-benefits strong { font-size:.63rem; letter-spacing:.05em; }
.ctart-path-benefits small { font-size:.53rem; line-height:1.2; text-transform:uppercase; }
.ctart-path-hero blockquote { margin:1.35rem 0 0; font-family:Georgia,serif; }
.ctart-path-hero blockquote p { max-width:25rem; margin:0; font-size:clamp(.82rem,1.35vw,1rem); font-style:italic; line-height:1.45; }
.ctart-path-hero blockquote cite { display:block; margin-top:.55rem; color:#a4d599; font-family:inherit; font-size:.68rem; font-style:normal; font-weight:700; letter-spacing:.12em; }
.ctart-start { padding: clamp(1.25rem, 3vw, 2rem); border-color: rgba(213, 173, 82, 0.42); background: linear-gradient(135deg, rgba(17, 20, 12, 0.97), rgba(8, 12, 9, 0.96)); }
.ctart-start h2,.ctart-section-heading h2 { margin: 0; color: var(--color-text); font-size: clamp(1.55rem, 3vw, 2.45rem); letter-spacing: -0.025em; }
.ctart-start [data-ctart-access="sampler"] > p:not(.ctart-gold-kicker),.ctart-empty-copy { margin: 0.55rem 0 1.2rem; color: var(--color-muted); }
.ctart-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin-top: 1.15rem; }
.ctart-sampler-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin-top: 1.15rem; }
.ctart-sampler-choice { --sample-color:var(--color-green); min-width:0; min-height:10rem; display:grid; grid-template-columns:minmax(0,1fr) clamp(4.8rem,7vw,6.25rem); grid-template-areas:"badge thumb" "elo thumb" "title thumb" "action thumb"; align-items:start; column-gap:.8rem; padding:1rem; border:1px solid color-mix(in srgb,var(--sample-color) 52%,transparent); border-radius:.8rem; color:var(--color-text); background:linear-gradient(145deg,color-mix(in srgb,var(--sample-color) 9%,#09100b),#080c09 72%); text-decoration:none; box-shadow:inset 0 0 1.7rem color-mix(in srgb,var(--sample-color) 4%,transparent); transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.ctart-sampler-choice:hover,.ctart-sampler-choice:focus-visible { border-color:var(--sample-color); transform:translateY(-2px); box-shadow:0 .8rem 2rem -1.2rem color-mix(in srgb,var(--sample-color) 42%,transparent); }
.ctart-sampler-choice > span { grid-area:badge; width:max-content; padding:.28rem .48rem; border:1px solid currentColor; border-radius:999px; color:var(--sample-color); font-size:.6rem; font-weight:950; letter-spacing:.12em; }
.ctart-sampler-choice small { grid-area:elo; margin-top:.55rem; color:var(--sample-color); font-weight:850; letter-spacing:.08em; }
.ctart-sampler-choice strong { grid-area:title; margin-top:.25rem; font-size:.92rem; line-height:1.25; }
.ctart-sampler-choice b { grid-area:action; align-self:end; padding-top:.7rem; color:var(--sample-color); font-size:.62rem; letter-spacing:.09em; }
.ctart-sampler-thumb { grid-area:thumb; align-self:center; width:100%; height:auto; aspect-ratio:1; display:block; border:2px solid color-mix(in srgb,var(--sample-color) 52%,#e8eee7); border-radius:.38rem; object-fit:cover; box-shadow:0 0 1rem color-mix(in srgb,var(--sample-color) 16%,transparent); }
.ctart-sampler-medium { --sample-color:#e7bd35; }
.ctart-sampler-hard { --sample-color:#f0724f; }
.ctart-start > [data-ctart-access="sampler"] > .ctart-register-link:not([hidden]) { display:block; width:fit-content; margin-top:.85rem; }
.ctart-primary-action,.ctart-gold-button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0.8rem 1.15rem; border-color: #e7c361; color: #100d04; background: linear-gradient(135deg, #f4d77b, #c99a31); box-shadow: 0 0 1.5rem rgba(213, 173, 82, 0.14); }
.ctart-primary-action:hover,.ctart-gold-button:hover { color: #080704; box-shadow: 0 0 2rem rgba(213, 173, 82, 0.28); }
.ctart-register-link { color: var(--color-green); font-size: 0.8rem; font-weight: 800; }
.ctart-progress-fields dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin: 1rem 0 1.2rem; }
.ctart-progress-fields dl > div { padding: 0.8rem; border: 1px solid rgba(213, 173, 82, 0.2); border-radius: 0.7rem; background: rgba(255,255,255,0.018); }
.ctart-progress-fields dt { color: var(--color-muted); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.ctart-progress-fields dd { margin: 0.38rem 0 0; color: var(--color-gold); font-weight: 850; }
.ctart-section-heading > p:last-child { max-width: 46rem; margin: 0.55rem 0 0; color: var(--color-muted); line-height: 1.5; }
.ctart-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; }
.ctart-action-card { position:relative; min-height:5.25rem; display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:center; gap:.65rem; padding:.8rem .9rem; border-color:rgba(213,173,82,.22); color:var(--color-text); background:rgba(8,13,9,.94); text-decoration:none; }
.ctart-action-card:hover,.ctart-action-card:focus-visible { border-color: rgba(231, 195, 97, 0.72); box-shadow: 0 0 1.5rem rgba(213, 173, 82, 0.12); }
.ctart-action-card > span { color: var(--color-gold); font-size: 1.4rem; }
.ctart-action-card h2 { margin:0; font-size:clamp(.78rem,1.2vw,.98rem); line-height:1.15; letter-spacing:.035em; text-transform:uppercase; }
.ctart-action-card p { margin: 0.45rem 0 1rem; color: var(--color-muted); font-size: 0.82rem; line-height: 1.45; }
.ctart-action-card b { margin-top: auto; color: var(--color-gold); font-size: 0.68rem; letter-spacing: 0.1em; }
.ctart-action-card.is-locked { border-color: rgba(213,173,82,.42); background: linear-gradient(145deg, rgba(31,25,10,.55), rgba(8,13,9,.95)); }
.ctart-action-card.is-locked:hover,.ctart-action-card.is-locked:focus-visible { border-color: rgba(241,204,109,.85); }
.ctart-card-premium { position:absolute; top:.3rem; right:.4rem; padding:.15rem .3rem; border:1px solid rgba(231,195,97,.48); border-radius:999px; color:var(--color-gold); font-size:.42rem!important; font-weight:900; letter-spacing:.07em; }
.ctart-method { padding: clamp(1.25rem, 3vw, 2rem); border-color: rgba(213, 173, 82, 0.24); }
.ctart-video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: clamp(.8rem,2vw,1.25rem); margin: 1.5rem 0 0; }
.ctart-video-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(74,210,118,.24); border-radius: 1rem; background: linear-gradient(180deg,#080b09 0 72%,#0c1a11 72%); box-shadow: 0 1.2rem 3rem -2rem #000,inset 0 0 2rem rgba(213,173,82,.025); }
.ctart-video-level { position: absolute; z-index: 3; top: .85rem; left: .85rem; padding: .4rem .65rem; border: 1px solid currentColor; border-radius: 999px; background: rgba(4,10,6,.9); font-size: .64rem; font-weight: 950; letter-spacing: .12em; }
.ctart-video-card-easy .ctart-video-level { color: #4ada76; }
.ctart-video-card-medium .ctart-video-level { color: #e7bd35; }
.ctart-video-card-hard .ctart-video-level { color: #f0724f; }
.ctart-video-media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #020503; }
.ctart-video-media video { width: 100%; height: 100%; display: block; object-fit: cover; background: #020503; }
.ctart-video-play { position: absolute; z-index: 2; inset: 50% auto auto 50%; width: clamp(3.8rem,7vw,5rem); height: clamp(3.8rem,7vw,5rem); display: grid; place-items: center; padding: 0 0 0 .2rem; border: 1px solid rgba(208,255,126,.8); border-radius: 50%; color: #102000; background: linear-gradient(145deg,#9cff18,#55bd00); box-shadow: 0 0 0 .55rem rgba(89,210,0,.12),0 .8rem 2rem rgba(0,0,0,.5); font: inherit; font-size: 1.4rem; cursor: pointer; transform: translate(-50%,-50%); transition: transform .16s ease,filter .16s ease; }
.ctart-video-play:hover,.ctart-video-play:focus-visible { filter: brightness(1.12); transform: translate(-50%,-50%) scale(1.05); }
.ctart-video-play[hidden] { display: none; }
.ctart-video-enlarge { position:absolute; z-index:3; right:.55rem; bottom:3rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.45); border-radius:.45rem; color:#fff; background:rgba(2,5,3,.78); font-size:1.25rem; line-height:1; cursor:pointer; backdrop-filter:blur(5px); }
.ctart-video-enlarge:hover,.ctart-video-enlarge:focus-visible { border-color:var(--color-green); color:var(--color-green); }
.ctart-video-dialog { width:fit-content; max-width:calc(100vw - 2rem); height:fit-content; max-height:calc(100dvh - 2rem); margin:auto; padding:0; overflow:visible; border:1px solid rgba(231,195,97,.65); border-radius:1rem; background:#020503; box-shadow:0 0 3rem rgba(213,173,82,.22); }
.ctart-video-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(5px); }
.ctart-video-dialog video { width:auto; max-width:calc(100vw - 2rem); height:auto; max-height:calc(100dvh - 2rem); display:block; border-radius:1rem; object-fit:contain; background:#020503; }
.ctart-video-dialog-close { position:absolute; z-index:2; top:.55rem; right:.55rem; width:2.5rem; height:2.5rem; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; background:rgba(0,0,0,.78); font-size:1.5rem; cursor:pointer; }
.ctart-video-copy { min-height: 11.5rem; padding: 1rem; border-top: 1px solid rgba(74,210,118,.16); }
.ctart-video-elo { display: flex; align-items: baseline; gap: .45rem; margin: 0; color: #87968b; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.ctart-video-elo strong { color: #91ef3c; font-size: .95rem; }
.ctart-video-copy h3 { margin: .65rem 0 .7rem; font-size: clamp(1rem,1.6vw,1.25rem); }
.ctart-video-copy > p:last-child { margin: 0; padding: .8rem; border: 1px solid rgba(255,255,255,.07); border-radius: .7rem; color: var(--color-muted); font-size: .78rem; line-height: 1.5; }
.ctart-method ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.ctart-method li { min-width: 0; display: flex; gap: 0.7rem; padding: 0.85rem; border-top: 1px solid rgba(213, 173, 82, 0.26); }
.ctart-method li > span { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(213, 173, 82, 0.5); border-radius: 50%; color: var(--color-gold); font-weight: 900; }
.ctart-method h3 { margin: 0; font-size: 0.9rem; }
.ctart-method li p { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 0.75rem; line-height: 1.4; }
.ctart-encyclopedia { padding:clamp(1.25rem,3vw,2rem); overflow:hidden; border-color:rgba(213,173,82,.32); background:radial-gradient(circle at 50% 0,rgba(213,173,82,.08),transparent 30rem),rgba(8,12,9,.96); }
.ctart-encyclopedia-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:clamp(.8rem,2vw,1.25rem); margin-top:1.5rem; }
.ctart-encyclopedia-card { --encyclopedia-accent:#4ada76; min-width:0; padding:.8rem; border:1px solid color-mix(in srgb,var(--encyclopedia-accent) 38%,transparent); border-radius:1rem; background:linear-gradient(160deg,color-mix(in srgb,var(--encyclopedia-accent) 7%,#080b09),#060806); box-shadow:0 1.2rem 3rem -2rem #000; }
.ctart-encyclopedia-medium { --encyclopedia-accent:#e7bd35; }
.ctart-encyclopedia-hard { --encyclopedia-accent:#f0724f; }
.ctart-encyclopedia-meta { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.35rem .6rem; min-height:3.1rem; padding:.05rem .05rem .7rem; }
.ctart-encyclopedia-meta span { width:max-content; padding:.32rem .55rem; border:1px solid currentColor; border-radius:999px; color:var(--encyclopedia-accent); font-size:.62rem; font-weight:950; letter-spacing:.12em; }
.ctart-encyclopedia-meta strong { justify-self:end; color:var(--encyclopedia-accent); font-size:.8rem; letter-spacing:.08em; }
.ctart-encyclopedia-meta small { grid-column:1 / -1; color:var(--color-muted); font-size:.69rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.ctart-encyclopedia-page { position:relative; width:100%; display:block; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:.65rem; color:#fff; background:#f3f0e6; box-shadow:0 .9rem 2rem -1.3rem #000; cursor:zoom-in; }
.ctart-encyclopedia-page img { width:100%; height:auto; display:block; aspect-ratio:3 / 4; object-fit:cover; transition:transform .22s ease,filter .22s ease; }
.ctart-encyclopedia-page span { position:absolute; right:.65rem; bottom:.65rem; padding:.48rem .65rem; border:1px solid color-mix(in srgb,var(--encyclopedia-accent) 70%,#fff); border-radius:.45rem; color:#071008; background:color-mix(in srgb,var(--encyclopedia-accent) 88%,#fff); box-shadow:0 .4rem 1rem rgba(0,0,0,.35); font-size:.62rem; font-weight:950; letter-spacing:.1em; }
.ctart-encyclopedia-page:hover img,.ctart-encyclopedia-page:focus-visible img { transform:scale(1.015); filter:brightness(1.04); }
.ctart-encyclopedia-page:focus-visible { outline:2px solid var(--encyclopedia-accent); outline-offset:3px; }
.ctart-encyclopedia-premium { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:1.4rem; padding:1.2rem 1.3rem; border:1px solid rgba(231,195,97,.42); border-radius:.9rem; background:linear-gradient(120deg,rgba(213,173,82,.1),rgba(9,13,9,.96)); }
.ctart-encyclopedia-premium h3 { margin:.12rem 0 .35rem; color:var(--color-text); font-size:clamp(1.15rem,2vw,1.55rem); }
.ctart-encyclopedia-premium p:last-child { max-width:48rem; margin:0; color:var(--color-muted); font-size:.82rem; line-height:1.5; }
.ctart-encyclopedia-premium .button { flex:0 0 auto; white-space:nowrap; }
.ctart-encyclopedia-dialog { width:min(94vw,78rem); max-width:none; height:min(95dvh,72rem); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid rgba(231,195,97,.65); border-radius:1rem; color:var(--color-text); background:#11150f; box-shadow:0 0 4rem rgba(0,0,0,.72); }
.ctart-encyclopedia-dialog::backdrop { background:rgba(0,0,0,.88); backdrop-filter:blur(5px); }
.ctart-encyclopedia-dialog header { position:relative; z-index:2; min-height:3.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem .75rem .65rem 1rem; border-bottom:1px solid rgba(231,195,97,.28); background:#090d09; }
.ctart-encyclopedia-dialog h3 { margin:0; overflow:hidden; color:#f5f1e7; font-size:.88rem; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.ctart-encyclopedia-dialog header button { width:2.35rem; height:2.35rem; flex:0 0 auto; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:#fff; background:rgba(255,255,255,.06); font:inherit; font-size:1.45rem; cursor:pointer; }
.ctart-encyclopedia-reader { height:calc(100% - 3.4rem); overflow:auto; overscroll-behavior:contain; padding:clamp(.45rem,2vw,1.25rem); background:#25271f; text-align:center; -webkit-overflow-scrolling:touch; }
.ctart-encyclopedia-reader img { width:min(100%,67.5rem); height:auto; display:block; margin:0 auto; background:#f3f0e6; box-shadow:0 1rem 3rem rgba(0,0,0,.4); }
.ctart-books-promo { display:grid; grid-template-columns:minmax(0,.82fr) minmax(22rem,1.18fr); align-items:center; gap:clamp(1.25rem,3vw,2.5rem); padding:clamp(1.25rem,3.5vw,2.5rem); overflow:hidden; border-color:rgba(213,173,82,.42); background:radial-gradient(circle at 82% 42%,rgba(213,173,82,.11),transparent 24rem),linear-gradient(135deg,rgba(15,23,15,.98),rgba(8,10,8,.98)); }
.ctart-books-promo h2 { max-width:13ch; margin:0; color:var(--color-text); font-size:clamp(1.7rem,3.2vw,2.8rem); line-height:1.02; letter-spacing:-.035em; }
.ctart-books-promo-copy > p:not(.ctart-gold-kicker) { max-width:40rem; margin:.85rem 0 0; color:#c9c5ba; font-size:.9rem; line-height:1.58; }
.ctart-books-promo-copy .ctart-books-separate { color:var(--color-text); }
.ctart-books-separate strong { color:var(--color-gold); }
.ctart-books-promo-copy .button { margin-top:1.25rem; text-decoration:none; }
.ctart-books-promo-art { display:block; overflow:hidden; border:1px solid rgba(231,195,97,.3); border-radius:1rem; background:#110d07; box-shadow:0 1.5rem 3.5rem -2rem #000; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.ctart-books-promo-art:hover,.ctart-books-promo-art:focus-visible { border-color:rgba(231,195,97,.8); transform:translateY(-2px); box-shadow:0 1.5rem 3.5rem -1.7rem rgba(213,173,82,.28); }
.ctart-books-promo-art img { width:100%; height:auto; display:block; aspect-ratio:3 / 2; object-fit:cover; }

.books-page { background:radial-gradient(circle at 50% 4%,rgba(213,173,82,.12),transparent 34rem),radial-gradient(circle at 8% 58%,rgba(33,80,43,.13),transparent 30rem),var(--color-background); }
.books-main { width:min(100%,1180px); margin:0 auto; padding:clamp(1.4rem,4vw,3rem) var(--page-gutter) clamp(6rem,9vw,8rem); }
.books-back { display:inline-flex; margin-bottom:1rem; color:var(--color-gold); font-size:.78rem; font-weight:850; text-decoration:none; }
.books-hero { overflow:hidden; border-color:rgba(213,173,82,.5); background:#110d07; }
.books-hero img { width:100%; height:auto; display:block; aspect-ratio:3 / 2; object-fit:cover; }
.books-intro { max-width:52rem; margin:clamp(1.5rem,4vw,3rem) auto 0; text-align:center; }
.books-intro h1 { margin:0; color:var(--color-text); font-size:clamp(2.2rem,5vw,4.5rem); line-height:.96; letter-spacing:-.045em; }
.books-intro > p:not(.ctart-gold-kicker) { margin:1rem auto 0; color:#c9c5ba; font-size:clamp(.95rem,1.7vw,1.12rem); line-height:1.62; }
.books-sold-separately { width:fit-content; margin:1.1rem auto 0!important; padding:.55rem .8rem; border:1px solid rgba(231,195,97,.42); border-radius:999px; color:var(--color-gold)!important; font-size:.72rem!important; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.book-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.5vw,1.5rem); margin-top:clamp(1.5rem,4vw,3rem); }
.book-product { min-width:0; display:grid; grid-template-rows:auto 1fr; overflow:hidden; border-color:rgba(213,173,82,.34); background:linear-gradient(155deg,rgba(16,24,16,.98),rgba(7,10,8,.98)); }
.book-product-art { min-height:25rem; display:grid; place-items:center; padding:clamp(1rem,3vw,2rem); background:radial-gradient(circle,rgba(231,195,97,.12),transparent 65%); }
.book-product-art > img { width:auto; max-width:min(76%,22rem); height:auto; max-height:25rem; display:block; object-fit:contain; filter:drop-shadow(0 1.3rem 1.4rem rgba(0,0,0,.42)); }
.book-pack-art { grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr); align-items:center; gap:clamp(.5rem,1.5vw,1rem); }
.book-volume-stack { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:.5rem; }
.book-volume-stack img,.book-pack-art .book-pack-companion { width:100%; max-width:none; height:auto; max-height:none; display:block; object-fit:contain; filter:drop-shadow(0 .75rem .7rem rgba(0,0,0,.38)); }
.book-pack-art .book-pack-companion { align-self:center; }
.book-product-copy { display:flex; align-items:flex-start; flex-direction:column; padding:clamp(1.15rem,3vw,1.7rem); border-top:1px solid rgba(213,173,82,.2); }
.book-product-copy h2 { margin:0; color:var(--color-text); font-size:clamp(1.35rem,2.6vw,2rem); }
.book-product-copy > p { margin:.7rem 0 0; color:var(--color-muted); font-size:.86rem; line-height:1.55; }
.book-format { color:var(--color-gold)!important; font-size:.68rem!important; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.book-price { margin-top:1rem!important; color:var(--color-text)!important; font-size:clamp(1.55rem,3vw,2.1rem)!important; font-weight:950; line-height:1!important; }
.book-coming-soon { width:100%; min-height:3rem; margin-top:auto; padding:.8rem 1rem; border:1px solid rgba(231,195,97,.55); border-radius:.65rem; color:#151003; background:linear-gradient(135deg,#f4d77b,#c99a31); font:900 .72rem/1 inherit; letter-spacing:.1em; cursor:not-allowed; opacity:.88; }
.book-samples { width:100%; margin-top:1.35rem; padding-top:1.15rem; border-top:1px solid rgba(213,173,82,.2); }
.book-samples-heading { display:flex; align-items:end; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.book-samples-heading p { margin:0; color:var(--color-gold); font-size:.6rem; font-weight:950; letter-spacing:.13em; }
.book-samples-heading h3 { margin:0; color:var(--color-text); font-size:1rem; }
.book-sample-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.book-sample { position:relative; min-width:0; display:block; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:.55rem; color:#091008; background:#f4f0e5; box-shadow:0 .65rem 1.4rem -.9rem #000; cursor:zoom-in; }
.book-sample img { width:100%; height:auto; display:block; aspect-ratio:3 / 4; object-fit:cover; object-position:top; transition:transform .18s ease,filter .18s ease; }
.book-sample span { position:absolute; right:.35rem; bottom:.35rem; padding:.32rem .4rem; border-radius:.32rem; color:#071008; background:rgba(231,195,97,.94); box-shadow:0 .25rem .7rem rgba(0,0,0,.35); font-size:.48rem; font-weight:950; letter-spacing:.07em; }
.book-sample:hover img,.book-sample:focus-visible img { transform:scale(1.02); filter:brightness(1.03); }
.book-sample:focus-visible { outline:2px solid var(--color-gold); outline-offset:3px; }
.book-sample-dialog { width:min(98vw,96rem); max-width:none; height:calc(100dvh - 1rem); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid rgba(231,195,97,.65); border-radius:1rem; color:var(--color-text); background:#11150f; box-shadow:0 0 4rem rgba(0,0,0,.72); }
.book-sample-dialog::backdrop { background:rgba(0,0,0,.88); backdrop-filter:blur(5px); }
.book-sample-dialog header { position:relative; z-index:2; height:3.4rem; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:1rem; padding:.5rem .65rem .5rem 1rem; border-bottom:1px solid rgba(231,195,97,.28); background:#090d09; }
.book-sample-dialog h2 { margin:0; overflow:hidden; font-size:.88rem; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.book-sample-dialog header > span { color:var(--color-gold); font-size:.68rem; font-weight:900; letter-spacing:.1em; }
.book-sample-dialog header button { width:2.35rem; height:2.35rem; justify-self:end; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:#fff; background:rgba(255,255,255,.06); font:inherit; font-size:1.45rem; cursor:pointer; }
.book-sample-reader { position:relative; height:calc(100% - 3.4rem); min-height:0; display:grid; place-items:center; overflow:hidden; padding:.6rem clamp(3.25rem,6vw,5.5rem); background:#25271f; }
.book-sample-reader img { width:100%; height:100%; min-width:0; min-height:0; display:block; margin:auto; object-fit:contain; background:transparent; filter:drop-shadow(0 1rem 1.5rem rgba(0,0,0,.4)); }
.book-sample-arrow { position:absolute; z-index:2; top:50%; width:3rem; height:3.8rem; display:grid; place-items:center; padding:0 0 .18rem; border:1px solid rgba(231,195,97,.65); border-radius:.75rem; color:#171103; background:linear-gradient(135deg,#f4d77b,#c99a31); box-shadow:0 .65rem 1.5rem rgba(0,0,0,.4); font:700 2.35rem/1 inherit; cursor:pointer; transform:translateY(-50%); }
.book-sample-arrow:hover,.book-sample-arrow:focus-visible { filter:brightness(1.1); }
.book-sample-arrow-previous { left:.65rem; }
.book-sample-arrow-next { right:.65rem; }
.books-note { margin-top:clamp(1.25rem,3vw,2rem); padding:1rem 1.2rem; border:1px solid rgba(74,210,118,.22); border-radius:.9rem; color:var(--color-muted); background:rgba(74,210,118,.035); text-align:center; font-size:.82rem; line-height:1.55; }
.books-note strong { color:var(--color-green); }
.ctart-library { scroll-margin-top: 5rem; }
.ctart-theme-list { display: grid; gap: 0.7rem; margin-top: 1rem; }
.ctart-theme-card { padding: 0; overflow: hidden; border-color: rgba(213,173,82,.22); }
.ctart-theme-card summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; }
.ctart-theme-card summary::-webkit-details-marker { display: none; }
.ctart-theme-card summary span:first-child { display: grid; gap: .3rem; }
.ctart-theme-card summary strong { color: var(--color-text); }
.ctart-theme-card summary small,.ctart-subtheme-row small { color: var(--color-muted); font-size: .72rem; }
.ctart-free-marker { display:inline-flex; margin-left:.35rem; padding:.12rem .32rem; border:1px solid rgba(74,210,118,.5); border-radius:999px; color:var(--color-green); font-size:.55rem; letter-spacing:.08em; vertical-align:middle; }
.ctart-theme-card[open] summary { border-bottom: 1px solid rgba(213,173,82,.16); }
.ctart-subtheme-list { display: grid; }
.ctart-subtheme-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-top: 1px solid rgba(255,255,255,.045); }
.ctart-subtheme-row:first-child { border-top: 0; }
.ctart-subtheme-row > span { display: grid; gap: .25rem; min-width: 0; }
.ctart-subtheme-row .button { flex: 0 0 auto; min-height: 2.55rem; padding: .7rem .85rem; font-size: .62rem; }
.ctart-subtheme-row.is-coming-soon { opacity:.62; }
.ctart-subtheme-course { border-top:1px solid rgba(255,255,255,.045); }
.ctart-subtheme-course:first-child { border-top:0; }
.ctart-subtheme-course > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.95rem 1.1rem; cursor:pointer; list-style:none; background:rgba(213,173,82,.035); }
.ctart-subtheme-course > summary::-webkit-details-marker { display:none; }
.ctart-subtheme-course > summary > span:first-child { display:grid; gap:.28rem; min-width:0; }
.ctart-subtheme-course > summary strong { color:var(--color-text); }
.ctart-subtheme-course > summary small { color:var(--color-gold); font-size:.68rem; font-weight:800; letter-spacing:.04em; }
.ctart-subtheme-course[open] > summary { border-bottom:1px solid rgba(213,173,82,.13); }
.ctart-lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; padding:.9rem 1.1rem 1.1rem; }
.ctart-lesson-card { position:relative; min-width:0; display:grid; gap:.28rem; padding:.8rem 2rem .8rem .85rem; border:1px solid rgba(255,255,255,.09); border-radius:.7rem; color:var(--color-text); background:rgba(4,10,6,.68); text-decoration:none; transition:border-color .15s ease,background .15s ease; }
.ctart-lesson-card:hover,.ctart-lesson-card:focus-visible { border-color:var(--color-gold); background:rgba(213,173,82,.08); }
.ctart-lesson-card .ctart-lesson-number { color:var(--color-muted); font-size:.58rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.ctart-lesson-card > strong { font-size:.88rem; }
.ctart-lesson-card > small { color:var(--color-muted); font-size:.65rem; line-height:1.35; }
.ctart-lesson-card > small b { color:#4ad276; }
.ctart-lesson-card.is-intermediate > small b { color:#e7bd35; }
.ctart-lesson-card.is-difficult > small b { color:#f0724f; }
.ctart-lesson-card > i { position:absolute; right:.8rem; top:50%; color:var(--color-gold); font-style:normal; transform:translateY(-50%); }
.ctart-lesson-card.is-solved { opacity:.72; border-color:rgba(74,210,118,.24); background:rgba(25,72,40,.12); }
.ctart-lesson-card.is-solved .ctart-lesson-number,.ctart-lesson-card.is-solved > i { color:var(--color-green); }
.ctart-subtheme-tools { display:flex; justify-content:flex-end; padding:0 1.1rem 1rem; }
.ctart-subtheme-tools button { padding:.55rem .7rem; border:1px solid rgba(255,255,255,.13); border-radius:.55rem; color:var(--color-muted); background:transparent; font:850 .58rem/1 inherit; letter-spacing:.1em; cursor:pointer; }
.ctart-subtheme-tools button:hover,.ctart-subtheme-tools button:focus-visible { border-color:var(--color-gold); color:var(--color-gold); }
.ctart-subtheme-tools button:disabled { opacity:.5; cursor:wait; }
.ctart-library-empty { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1.2rem; border-style: dashed; border-color: rgba(213, 173, 82, 0.28); }
.ctart-library-empty > span { color: var(--color-gold); font-size: 2rem; }
.ctart-library-empty h3,.ctart-premium-gate h3 { margin: 0; }
.ctart-library-empty p,.ctart-premium-gate p { margin: 0.35rem 0 0; color: var(--color-muted); line-height: 1.5; }
.ctart-premium-gate { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 0.85rem; padding: 1.2rem; border-color: rgba(213, 173, 82, 0.48); background: linear-gradient(120deg, rgba(32, 25, 8, 0.66), rgba(8, 13, 9, 0.95)); }
.ctart-premium-badge { display: inline-flex; margin-bottom: 0.55rem; padding: 0.3rem 0.5rem; border: 1px solid rgba(231,195,97,.5); border-radius: 999px; color: var(--color-gold); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.13em; }
.ctart-my { padding: clamp(1.25rem, 3vw, 2rem); border-color: rgba(213, 173, 82, 0.22); }
.ctart-my-empty { min-height: 7rem; display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255,255,255,.06); border-radius: 0.75rem; color: var(--color-muted); }
.ctart-my-empty > span { color: var(--color-gold); font-size: 2rem; }
.ctart-sampler-finish { padding: clamp(1.25rem, 3vw, 2rem); border-color: rgba(213, 173, 82, 0.5); }
.ctart-sampler-finish h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.ctart-sampler-finish > p:not(.ctart-gold-kicker) { color: var(--color-muted); }
.ctart-sampler-finish ul { margin: 1rem 0 1.3rem; padding-left: 1.2rem; color: #d7d3c8; line-height: 1.8; }
.ctart-finish-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.ctart-gate-dialog { width: min(92vw, 31rem); padding: 1.6rem; border: 1px solid rgba(231,195,97,.62); border-radius: 1rem; color: var(--color-text); background: linear-gradient(145deg,#171506,#071009 75%); box-shadow: 0 2rem 5rem rgba(0,0,0,.78),0 0 2rem rgba(213,173,82,.14); }
.ctart-gate-dialog::backdrop { background: rgba(0,0,0,.72); }
.ctart-gate-dialog h2 { margin: .6rem 0 1.2rem; font-size: clamp(1.4rem,4vw,2rem); }
.ctart-dialog-close { position: absolute; top: .65rem; right: .7rem; width: 2.4rem; height: 2.4rem; border: 0; color: var(--color-muted); background: transparent; font-size: 1.5rem; cursor: pointer; }
.ctart-gate-dialog-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.ctart-train-main { width: min(100%, 920px); min-height: calc(100svh - 9rem); margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) var(--page-gutter) 7rem; }
.ctart-trainer-page .ctart-train-main { width: min(100% - 1rem, 1440px); padding-top: 1rem; }
.ctart-trainer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.ctart-trainer-toolbar .ctart-back-link { margin: 0; }
.ctart-trainer-access { color: var(--color-gold); font-size: .7rem; font-weight: 900; letter-spacing: .12em; }
.ctart-trainer-frame-wrap { width: 100%; min-height: calc(100dvh - 9rem); overflow: hidden; border: 1px solid rgba(213,173,82,.28); border-radius: 1rem; background: #080c0a; box-shadow: 0 1.5rem 4rem -2rem #000; }
.ctart-trainer-frame { display: block; width: 100%; height: calc(100dvh - 9rem); min-height: 44rem; border: 0; background: #080c0a; }
.ctart-back-link { display: inline-block; margin-bottom: 1rem; color: var(--color-gold); font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.ctart-engine-shell { min-height: 25rem; display: grid; align-content: center; justify-items: center; padding: clamp(1.5rem, 5vw, 4rem); border-color: rgba(213, 173, 82, 0.5); background: radial-gradient(circle at 50% 10%, rgba(213,173,82,.1), transparent 22rem), rgba(8,13,9,.96); text-align: center; }
.ctart-engine-shell h1 { max-width: 13ch; margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); }
.ctart-engine-shell > p:not(.ctart-gold-kicker) { max-width: 40rem; color: var(--color-muted); line-height: 1.55; }
.ctart-engine-contract { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.7rem 0.9rem; border: 1px dashed rgba(213,173,82,.38); border-radius: .65rem; color: var(--color-gold); font-size: .7rem; letter-spacing: .1em; }
.ctart-train-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.3rem; }

@media (max-width: 760px) {
  .ctart-world-main { padding-top: 1.1rem; }
  .ctart-hero { min-height: 0; grid-template-columns: 1fr; }
  .ctart-hero-copy { padding: 1.35rem 1.2rem 0.6rem; }
  .ctart-hero h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .ctart-hero picture { width:calc(100% - 2rem); height:auto; aspect-ratio:2 / 1; margin:0 1rem 1rem; overflow:hidden; border:4px solid #e9b62f; border-radius:.9rem; box-shadow:inset 0 0 0 1px rgba(255,247,185,.9),0 0 .9rem rgba(255,195,45,.7),0 0 1.8rem rgba(213,173,82,.28); box-sizing:border-box; }
  .ctart-hero picture img { width:100%; height:100%; margin:0; object-fit:cover; }
  .ctart-path-hero { width:calc(100% + (2 * var(--page-gutter))); min-height:0; aspect-ratio:2 / 3; margin-left:calc(-1 * var(--page-gutter)); border-right:0; border-left:0; border-radius:0; }
  .ctart-path-hero-art img { object-position:center; }
  .ctart-path-hero-shade { background:linear-gradient(180deg,rgba(1,10,15,.91) 0%,rgba(1,10,15,.72) 38%,rgba(1,10,15,.16) 61%,transparent 82%); }
  .ctart-path-hero-copy { width:100%; height:100%; padding:clamp(1rem,5vw,1.45rem); }
  .ctart-path-brand strong { font-size:clamp(2.55rem,13.5vw,3.5rem); }
  .ctart-path-brand span { margin-top:.45rem; font-size:clamp(.55rem,2.6vw,.72rem); letter-spacing:.25em; }
  .ctart-path-hero h2 { max-width:8ch; margin-top:clamp(.75rem,4vw,1.25rem); font-size:clamp(2rem,10.5vw,3rem); }
  .ctart-path-hero h2 span,.ctart-path-hero h2 em { display:block; }
  .ctart-path-stats { flex-wrap:wrap; gap:.25rem .55rem; margin-top:.55rem; font-size:clamp(.82rem,4.3vw,1.05rem); }
  .ctart-path-description { width:58%; margin-top:.65rem; font-size:clamp(.65rem,3.1vw,.82rem); line-height:1.35; }
  .ctart-path-hero-cta { width:58%; min-height:3.25rem; margin-top:.7rem; padding:.4rem .5rem; border-radius:.75rem; }
  .ctart-path-hero-cta strong { font-size:clamp(.72rem,3.7vw,.95rem); }
  .ctart-path-hero-cta small { font-size:.55rem; }
  .ctart-path-benefits { width:58%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem .5rem; margin-top:.7rem; }
  .ctart-path-benefits li { grid-template-columns:1.1rem minmax(0,1fr); justify-items:start; align-items:center; gap:.3rem; text-align:left; }
  .ctart-path-benefits b { font-size:1rem; }
  .ctart-path-benefits strong { font-size:clamp(.43rem,2.05vw,.55rem); overflow-wrap:anywhere; }
  .ctart-path-benefits small { font-size:clamp(.36rem,1.7vw,.45rem); overflow-wrap:anywhere; }
  .ctart-path-hero blockquote { width:53%; margin-top:.75rem; }
  .ctart-path-hero blockquote p { font-size:clamp(.58rem,2.7vw,.72rem); line-height:1.35; }
  .ctart-path-hero blockquote cite { margin-top:.3rem; font-size:.5rem; }
  .ctart-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ctart-sampler-grid { grid-template-columns:1fr; gap:.55rem; }
  .ctart-sampler-choice { min-height:0; grid-template-columns:auto minmax(0,1fr) clamp(5rem,24vw,6.25rem); grid-template-areas:"badge elo thumb" "title title thumb" "action action thumb"; gap:.25rem .65rem; padding:.8rem .9rem; }
  .ctart-sampler-choice > span { grid-area:badge; }
  .ctart-sampler-choice small { grid-area:elo; align-self:center; margin:0; }
  .ctart-sampler-choice strong { grid-area:title; margin-top:.25rem; }
  .ctart-sampler-choice b { grid-area:action; padding-top:.4rem; }
  .ctart-sampler-thumb { width:clamp(5rem,24vw,6.25rem); }
  .ctart-action-card { min-height:4.9rem; padding:.7rem; }
  .ctart-method ol { grid-template-columns: 1fr; }
  .ctart-video-grid { grid-template-columns: 1fr; width: min(100%,25rem); margin-right: auto; margin-left: auto; }
  .ctart-encyclopedia-grid { grid-template-columns:1fr; width:min(100%,29rem); margin-right:auto; margin-left:auto; }
  .ctart-encyclopedia-card { padding:.7rem; }
  .ctart-encyclopedia-premium { align-items:stretch; flex-direction:column; }
  .ctart-encyclopedia-premium .button { width:100%; }
  .ctart-encyclopedia-dialog { width:calc(100vw - .5rem); height:calc(100dvh - .5rem); border-radius:.7rem; }
  .ctart-encyclopedia-reader { padding:.35rem; }
  .ctart-method li { min-height: 4.4rem; }
  .ctart-progress-fields dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctart-premium-gate { align-items: stretch; flex-direction: column; }
  .ctart-premium-gate .button { width: 100%; }
  .ctart-subtheme-row { align-items: stretch; flex-direction: column; }
  .ctart-subtheme-row .button { width: 100%; }
  .ctart-lesson-grid { grid-template-columns:1fr; padding:.75rem; }
  .ctart-subtheme-course > summary { align-items:flex-start; padding:.85rem .9rem; }
  .ctart-theme-card summary { min-height:44px; touch-action:manipulation; }
  .ctart-theme-card summary span:first-child { min-width:0; overflow-wrap:anywhere; }
  .ctart-subtheme-course { scroll-margin-top:5rem; }
  .ctart-subtheme-tools button { min-height:44px; }
  .ctart-subtheme-tools { padding:0 .75rem .8rem; }
  .ctart-trainer-page .ctart-train-main { width: 100%; padding: .55rem 0 5rem; }
  .ctart-trainer-toolbar { padding: 0 .75rem; }
  .ctart-trainer-frame-wrap { min-height: calc(100dvh - 7rem); border-right: 0; border-left: 0; border-radius: 0; }
  .ctart-trainer-frame { height: calc(100dvh - 7rem); min-height: 40rem; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .ctart-video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ctart-video-card:last-child { grid-column: 1 / -1; width: calc(50% - .4rem); justify-self: center; }
  .ctart-encyclopedia-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ctart-encyclopedia-card:last-child { grid-column:1 / -1; width:calc(50% - .4rem); justify-self:center; }
}

@media (max-width: 420px) {
  .ctart-hero-copy > p:last-child { font-size: .86rem; }
  .ctart-start-actions,.ctart-train-actions { align-items: stretch; flex-direction: column; }
  .ctart-start-actions .button,.ctart-train-actions .button,.ctart-finish-actions .button { width: 100%; }
  .ctart-progress-fields dl { grid-template-columns: 1fr; }
  .ctart-library-empty { align-items: flex-start; }
}

/* Path hero portrait composition: keep the welcoming mascot's face clear. */
@media (orientation: portrait) and (max-width: 900px) {
  .ctart-path-hero { width:calc(100% + (2 * var(--page-gutter))); min-height:0; aspect-ratio:2 / 3; margin-left:calc(-1 * var(--page-gutter)); border-right:0; border-left:0; border-radius:0; }
  .ctart-path-hero-art img { object-position:center; }
  .ctart-path-hero-shade { background:radial-gradient(ellipse 96% 66% at 0 0,rgba(1,10,15,.93) 0%,rgba(2,15,19,.83) 38%,rgba(3,17,20,.44) 64%,rgba(3,17,20,0) 100%); }
  .ctart-path-hero-copy { width:100%; height:100%; padding:clamp(1rem,4vw,2rem); }
  .ctart-path-brand strong { font-size:clamp(2.55rem,11vw,5rem); }
  .ctart-path-brand span { margin-top:.45rem; font-size:clamp(.55rem,2.1vw,1rem); letter-spacing:.25em; }
  .ctart-path-hero h2 { max-width:9ch; margin-top:clamp(.75rem,3vw,1.6rem); font-size:clamp(2rem,8.8vw,4rem); }
  .ctart-path-hero h2 span,.ctart-path-hero h2 em { display:block; }
  .ctart-path-stats { flex-wrap:wrap; gap:.25rem .55rem; margin-top:.55rem; font-size:clamp(.82rem,3.5vw,1.55rem); }
  .ctart-path-description { width:43%; max-width:20rem; margin-top:clamp(.6rem,1.8vw,1rem); font-size:clamp(.65rem,2.35vw,1rem); line-height:1.35; }
  .ctart-path-hero-cta { position:absolute; left:clamp(1rem,4vw,2rem); bottom:clamp(8.7rem,19%,12.5rem); width:54%; min-height:clamp(3.25rem,8vw,4.5rem); margin:0; padding:.45rem .65rem; border-radius:.8rem; }
  .ctart-path-hero-cta strong { font-size:clamp(.75rem,2.8vw,1.25rem); }
  .ctart-path-hero-cta small { font-size:clamp(.52rem,1.5vw,.68rem); }
  .ctart-path-benefits { position:absolute; left:clamp(1rem,4vw,2rem); bottom:clamp(4.7rem,8%,6rem); width:54%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem .65rem; margin:0; }
  .ctart-path-benefits li { grid-template-columns:1.2rem minmax(0,1fr); justify-items:start; align-items:center; gap:.35rem; text-align:left; }
  .ctart-path-benefits b { font-size:clamp(1rem,2.8vw,1.4rem); }
  .ctart-path-benefits strong { font-size:clamp(.46rem,1.55vw,.72rem); overflow-wrap:anywhere; }
  .ctart-path-benefits small { font-size:clamp(.38rem,1.25vw,.59rem); overflow-wrap:anywhere; }
  .ctart-path-hero blockquote { position:absolute; right:clamp(1rem,4vw,2rem); bottom:clamp(1.2rem,3vw,2rem); width:35%; margin:0; text-align:right; }
  .ctart-path-hero blockquote p { font-size:clamp(.66rem,1.7vw,.88rem); }
}

@media (orientation: portrait) and (max-width: 480px) {
  .ctart-path-hero blockquote { display:none; }
}

@media (orientation: portrait) and (min-width: 481px) and (max-width: 900px) {
  .ctart-path-benefits { bottom:clamp(15rem,25%,18rem); }
  .ctart-path-hero blockquote { bottom:clamp(11rem,18%,14rem); }
}

/* Landscape uses the lower-left foreground while protecting the mascot's face. */
@media (orientation: landscape) and (min-width: 901px) {
  .ctart-path-hero { min-height:0; aspect-ratio:1672 / 941; }
  .ctart-path-hero-shade { background:radial-gradient(ellipse 74% 78% at 0 0,rgba(1,10,15,.94) 0%,rgba(2,15,19,.76) 42%,rgba(3,17,20,.2) 68%,transparent 88%),radial-gradient(ellipse 42% 50% at 0 100%,rgba(1,10,15,.82),rgba(2,15,19,.48) 48%,transparent 100%); }
  .ctart-path-hero-copy { width:100%; height:100%; padding:clamp(2rem,4vw,3.5rem); }
  .ctart-path-brand strong { font-size:clamp(3.1rem,5.5vw,5rem); }
  .ctart-path-brand span { font-size:clamp(.68rem,1.15vw,.95rem); }
  .ctart-path-hero h2 { width:38%; margin-top:clamp(.65rem,1.2vw,1rem); font-size:clamp(1.85rem,3.2vw,2.85rem); }
  .ctart-path-stats { width:30%; flex-wrap:wrap; margin-top:.4rem; font-size:clamp(.82rem,1.3vw,1.05rem); }
  .ctart-path-description { position:absolute; left:clamp(2rem,4vw,3.5rem); bottom:clamp(10.6rem,27%,12rem); width:clamp(13rem,20vw,16rem); margin:0; font-size:clamp(.78rem,1.2vw,1rem); }
  .ctart-path-hero-cta { position:absolute; left:clamp(2rem,4vw,3.5rem); bottom:clamp(5.5rem,14%,6.5rem); width:clamp(17rem,29vw,22rem); min-height:clamp(3.5rem,5vw,4.35rem); margin:0; }
  .ctart-path-hero-cta strong { font-size:clamp(.9rem,1.55vw,1.25rem); }
  .ctart-path-benefits { position:absolute; left:clamp(21rem,34vw,27rem); bottom:clamp(5.5rem,14%,6.5rem); width:clamp(16rem,25vw,19rem); grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem .65rem; margin:0; }
  .ctart-path-benefits li { grid-template-columns:1.15rem minmax(0,1fr); justify-items:start; align-items:center; gap:.35rem; text-align:left; }
  .ctart-path-hero blockquote { display:none; }
}

.motivation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.motivation-card { display: flex; align-items: center; gap: 0.9rem; padding: 1.15rem; border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.022); }
.motivation-icon { font-size: 1.3rem; }
.motivation-card h3 { margin: 0; color: var(--color-muted); font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase; }
.motivation-card p { margin: 0.3rem 0 0; color: var(--color-text); font-size: 0.82rem; line-height: 1.35; }

.your-arcade { scroll-margin-top: 6rem; margin-top: clamp(3rem, 7vw, 5rem); }
.your-arcade-heading { margin-bottom: 1.2rem; }
.your-arcade-grid { display: grid; grid-template-columns: minmax(260px, 1.15fr) repeat(2, minmax(230px, 1fr)); gap: 1rem; }
.arcade-status-card { min-width: 0; padding: clamp(1.15rem, 2.4vw, 1.6rem); border: 1px solid rgba(74, 210, 118, 0.2); border-radius: 1rem; background: rgba(10, 15, 11, 0.94); }
.arcade-status-label, .arcade-status-card-heading h3 { margin: 0; color: var(--color-green); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; }
.arcade-status-card-heading { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; }
.arcade-status-card-heading > span { color: var(--color-gold); font-size: 1.15rem; }
.arcade-streak-card { border-color: rgba(213, 173, 82, 0.32); background: radial-gradient(circle at 15% 15%, rgba(249, 115, 22, 0.12), transparent 45%), rgba(13, 15, 10, 0.96); }
.arcade-streak-card.is-safe { box-shadow: inset 0 0 2rem rgba(249, 115, 22, 0.055); }
.arcade-streak-card.is-pending { border-color: rgba(213, 173, 82, 0.22); }
.arcade-streak-card.is-pending [data-home-streak-flame] { filter: grayscale(1); opacity: 0.56; }
.arcade-streak-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0.55rem 0 0.7rem; }
.arcade-streak-value > span:first-child { align-self: center; font-size: clamp(2rem, 4vw, 3rem); filter: drop-shadow(0 0 0.8rem rgba(249, 115, 22, 0.4)); }
.arcade-streak-value strong { color: var(--color-text); font-size: clamp(3.2rem, 6vw, 5rem); font-weight: 950; letter-spacing: -0.07em; line-height: 0.9; }
.arcade-streak-value > span:last-child { max-width: 5rem; color: var(--color-gold); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.1em; line-height: 1.15; text-transform: uppercase; }
.arcade-streak-status { display: block; color: var(--color-text); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
.arcade-streak-countdown { display: grid; gap: .2rem; width: fit-content; margin-top: .85rem; padding: .7rem .85rem; border: 1px solid rgba(213,173,82,.25); border-radius: .7rem; background: rgba(0,0,0,.24); }
.arcade-streak-countdown[hidden] { display: none; }
.arcade-streak-countdown span { color: var(--color-muted); font-size: .61rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.arcade-streak-countdown strong { color: var(--color-gold); font-size: clamp(1.45rem,4vw,2rem); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.arcade-streak-countdown[data-urgency="urgent"] strong { color: #f6a928; }
.arcade-streak-countdown[data-urgency="critical"] { border-color: rgba(255,95,70,.55); }
.arcade-streak-countdown[data-urgency="critical"] strong { color: #ff765f; }
.arcade-streak-support { min-height: 2.8em; margin: 0.45rem 0 0; color: var(--color-muted); font-size: 0.82rem; line-height: 1.4; }
.arcade-streak-action.button { min-height: 2.45rem; margin-top: 1rem; padding: 0.65rem 0.9rem; font-size: 0.68rem; }
.arcade-compact-list { display: grid; gap: 0.55rem; }
.arcade-compact-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0.75rem; border: 1px solid rgba(255,255,255,0.07); border-radius: 0.65rem; color: var(--color-text); background: rgba(255,255,255,0.025); text-decoration: none; }
.arcade-compact-row:hover, .arcade-compact-row:focus-visible { border-color: rgba(74,210,118,0.42); background: rgba(74,210,118,0.055); }
.arcade-compact-row > span { min-width: 0; display: grid; gap: 0.18rem; }
.arcade-compact-row strong { overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.arcade-compact-row small { color: var(--color-muted); font-size: 0.7rem; }
.arcade-compact-row b { flex: none; color: var(--color-gold); font-size: 0.78rem; }
.arcade-empty-state { margin: 0; color: var(--color-muted); font-size: 0.8rem; line-height: 1.45; }

body > .streak-celebration-shell { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,0.66); backdrop-filter: blur(6px); }
.streak-celebration-shell[hidden] { display: none; }
.streak-celebration { position: relative; overflow: hidden; width: min(100%, 680px); min-height: 300px; max-height: calc(100dvh - 32px); display: grid; grid-template-columns: minmax(210px,.8fr) minmax(0,1.45fr); align-items: center; padding: 1.5rem 1.7rem; border-color: rgba(249,115,22,0.62); text-align: left; background: radial-gradient(circle at 18% 42%, rgba(249,115,22,0.27), transparent 42%), rgba(9,14,10,0.99); box-shadow: 0 1.5rem 5rem rgba(0,0,0,0.72), 0 0 3rem rgba(249,115,22,0.24); }
.streak-celebration-close { position: absolute; top: 0.65rem; right: 0.75rem; width: 2.2rem; height: 2.2rem; border: 0; color: var(--color-muted); background: transparent; font-size: 1.5rem; cursor: pointer; }
.streak-celebration-effects { position:absolute;inset:8% 5% auto;color:var(--color-gold);font-size:1.4rem;letter-spacing:1.7rem;opacity:.65;animation:streak-sparkle 1.4s ease-in-out infinite alternate; }
.streak-celebration-visual { position: relative; min-height: 220px; display: grid; place-items: center; }
.streak-celebration-fire { position: absolute; top: -.2rem; left: 50%; display: block; font-size: 7rem; line-height:.9; filter: drop-shadow(0 0 1.5rem rgba(249,115,22,0.7)); transform: translateX(-50%); }
.streak-celebration-mascot { position: relative; z-index: 1; width:170px;height:auto;margin:3.4rem auto 0;filter:drop-shadow(0 0 1.2rem rgba(74,210,118,.3)); }
.streak-celebration-copy { position: relative; z-index: 2; min-width: 0; }
.streak-celebration h2 { margin: 0.2rem 0 0.65rem; color:var(--color-gold);font-size: clamp(2.6rem, 6vw, 4.4rem); line-height:.88;letter-spacing: -0.055em; }
.streak-celebration > p:not(.section-kicker) { margin: 0.3rem 0; color: var(--color-muted); }
.streak-celebration-copy > p:not(.section-kicker) { margin: .25rem 0; color: var(--color-muted); }
.streak-celebration-record { display: grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 0.35rem .65rem; margin-top: .8rem; padding: 0.65rem 0.75rem; border: 1px solid rgba(213,173,82,0.28); border-radius: 0.7rem; }
.streak-celebration-record strong, .streak-celebration-record b { color: var(--color-gold); }
.streak-celebration .button { margin: .9rem 0 0; }
.streak-celebration-register:not([hidden]) { display:block;width:fit-content;margin:.65rem 0 0;color:var(--color-green);font-size:.73rem;font-weight:800;letter-spacing:.06em; }
.streak-result-confirmation { width:min(100%,580px); margin:.65rem auto .8rem; padding:.7rem .85rem; border:1px solid rgba(249,115,22,.48); border-radius:.75rem; color:#f6f2e7; background:linear-gradient(100deg,rgba(249,115,22,.16),rgba(74,210,118,.08)); text-align:center; }
.streak-result-confirmation strong { display:block; color:var(--color-gold); font-size:.9rem; }
.streak-result-confirmation span { display:block; margin-top:.18rem; color:var(--color-muted); font-size:.76rem; }
@keyframes streak-sparkle { from{transform:scale(.95);opacity:.35}to{transform:scale(1.06);opacity:.85} }
@media (prefers-reduced-motion: reduce) { .streak-celebration-effects { animation: none; } }

@media (max-width: 600px) {
  body > .streak-celebration-shell { padding: 1rem; }
  .streak-celebration { width: min(100%,390px); min-height: 0; grid-template-columns: 1fr; gap: .1rem; padding: 1rem 1.1rem 1.1rem; text-align: center; }
  .streak-celebration-visual { min-height: 125px; }
  .streak-celebration-fire { top: 0; font-size: 4.5rem; }
  .streak-celebration-mascot { width: 105px; margin-top: 2.25rem; }
  .streak-celebration h2 { margin-top: 0; font-size: clamp(2.25rem,12vw,3.2rem); }
  .streak-celebration-copy > p:not(.section-kicker) { font-size: .82rem; }
  .streak-celebration-record { grid-template-columns: 1fr; gap: .15rem; margin-top: .55rem; font-size: .75rem; }
  .streak-celebration .button { width: 100%; margin-top: .7rem; }
  .streak-celebration-register:not([hidden]) { margin: .55rem auto 0; }
}

@media (max-height: 580px) {
  .streak-celebration { min-height: 0; padding-top: .8rem; padding-bottom: .8rem; }
  .streak-celebration-visual { min-height: 100px; }
  .streak-celebration-fire { font-size: 3.5rem; }
  .streak-celebration-mascot { width: 82px; margin-top: 1.7rem; }
  .streak-celebration h2 { font-size: 2.15rem; }
}

.timezone-dialog { width:min(520px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:min(680px,calc(100dvh - 24px));margin:auto;padding:0;overflow:hidden;border:1px solid rgba(74,210,118,.35);border-radius:1rem;color:var(--color-text);background:#080d09;box-shadow:0 1.5rem 5rem #000;box-sizing:border-box; }
.timezone-dialog::backdrop { background:rgba(0,0,0,.62); }
.timezone-dialog-panel{width:100%;min-width:0;padding:1rem;box-sizing:border-box}.timezone-dialog-heading{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.timezone-dialog-heading h2{min-width:0;margin:0;font-size:1.05rem;overflow-wrap:anywhere}.timezone-dialog-heading button{flex:0 0 auto;border:0;color:var(--color-muted);background:transparent;font-size:1.6rem;cursor:pointer}.timezone-dialog input{display:block;width:100%;max-width:100%;margin:.85rem 0;padding:.75rem;border:1px solid var(--color-border);border-radius:.65rem;color:var(--color-text);background:#101512;box-sizing:border-box}.timezone-options{width:100%;min-width:0;display:grid;gap:.35rem;max-height:min(50dvh,480px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.timezone-option{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;padding:.75rem;border:1px solid transparent;border-radius:.6rem;color:var(--color-text);background:rgba(255,255,255,.025);text-align:left;cursor:pointer;box-sizing:border-box}.timezone-option span{min-width:0;overflow-wrap:anywhere}.timezone-option small{flex:0 0 auto;max-width:42%;overflow:hidden;color:var(--color-muted);text-overflow:ellipsis;white-space:nowrap}.timezone-option.is-selected{border-color:rgba(74,210,118,.5);background:rgba(74,210,118,.08)}.settings-timezone-message{margin:.75rem 0 0;color:var(--color-gold);font-size:.76rem}

@media (max-width: 420px) {
  .timezone-dialog-panel { padding:.85rem; }
  .timezone-dialog-heading h2 { font-size:.98rem; }
  .timezone-option { gap:.5rem;padding:.7rem .65rem; }
  .timezone-option small { max-width:38%;font-size:.7rem; }
}
.arcade-loading-inline { display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:3.5rem;color:var(--color-muted);font-size:.75rem;letter-spacing:.06em; }
.arcade-loading-mark { color:var(--color-green);font-size:1.35rem;animation:arcade-loading-spin 1.15s linear infinite; }
.leaderboard-skeleton-row { height:2.65rem;margin:.4rem 0;border-radius:.55rem;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.085),rgba(255,255,255,.035));background-size:220% 100%;animation:arcade-loading-shimmer 1.3s ease-in-out infinite; }
.leaderboard-load-error { display:grid;justify-items:center;gap:.7rem;padding:1rem;text-align:center; }.leaderboard-load-error p{margin:0;color:var(--color-muted)}.leaderboard-load-error .button{min-height:2.25rem;padding:.55rem .85rem;font-size:.65rem}
@keyframes arcade-loading-spin { to { transform:rotate(360deg); } }
@keyframes arcade-loading-shimmer { to { background-position:-220% 0; } }
@media (prefers-reduced-motion: reduce) { .arcade-loading-mark,.leaderboard-skeleton-row { animation:none; } }

@media (max-width: 850px) {
  .your-arcade-grid { grid-template-columns: 1fr 1fr; }
  .arcade-streak-card { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .your-arcade { margin-top: 2.6rem; }
  .your-arcade-grid { grid-template-columns: 1fr; }
  .arcade-streak-card { grid-column: auto; }
  .arcade-streak-value strong { font-size: 3.65rem; }
  .arcade-status-card { padding: 1.1rem; }
  .header-controls { gap: 0.38rem; }
  .header-leaderboard, .sound-toggle { width: 2.05rem; }
}

.account-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding: 1.4rem 1.6rem; }
.account-prompt h2 { margin: 0; font-size: 1rem; }
.account-prompt p { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 0.82rem; }
.premium-status { width: fit-content; display: flex; align-items: center; gap: 0.65rem; margin: 2rem 0 0 auto; padding: 0.8rem 1rem; color: var(--color-gold); border-color: rgba(213, 173, 82, 0.28); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.premium-status p { margin: 0; }

.app-footer {
  width: min(100%, 1280px);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--color-muted);
  opacity: 0.48;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.app-footer p { margin: 0; }
.footer-legal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.footer-legal-nav a { color: inherit; text-decoration: none; }
.footer-legal-nav a:hover, .footer-legal-nav a:focus-visible { color: var(--color-text); opacity: 1; }

.bottom-nav {
  position: fixed !important;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  min-height: calc(4.25rem + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 8vw, 7rem);
  padding: 0.45rem var(--page-gutter) env(safe-area-inset-bottom);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(18px);
}

.bottom-nav a { min-width: 4.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.22rem; color: #6f716d; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-decoration: none; text-transform: uppercase; }
.bottom-nav a > span:first-child { font-size: 1rem; }
.bottom-nav a:hover, .bottom-nav a.is-active { color: var(--color-green); }

@media (min-width: 601px) {
  .bottom-nav [data-nav-item="arcade"] { display: none; }
}

@media (max-width: 600px) {
  .app-footer { min-height: 5rem; align-items: center; justify-content: center; flex-direction: column; gap: 0.45rem; padding-block: 0.85rem; text-align: center; }
  .footer-legal-nav { justify-content: center; }
}

/* Contact, Privacy and Terms */
.info-page { background: radial-gradient(circle at 50% -8rem, rgba(74, 210, 118, 0.08), transparent 34rem), var(--color-background); }
.info-main, .legal-main { width: min(100%, 960px); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) var(--page-gutter) clamp(5.5rem, 9vw, 7rem); }
.info-hero, .legal-hero { max-width: 720px; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.info-hero > p:first-child, .legal-hero > p:first-child { margin: 0; color: var(--color-green); font-size: 0.78rem; font-weight: 950; letter-spacing: 0.15em; text-transform: uppercase; }
.info-hero h1, .legal-hero h1 { margin: 0.55rem 0 0; font-size: clamp(2.3rem, 6vw, 4.5rem); letter-spacing: -0.045em; line-height: 1; }
.info-hero h2 { margin: 1rem 0 0; color: var(--color-text); font-size: clamp(1.25rem, 3vw, 1.8rem); }
.info-hero > p:last-child, .sign-in-support { color: var(--color-muted); }
.info-hero > p:last-child { margin: 0.7rem 0 0; font-size: 1rem; line-height: 1.65; }
.info-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.info-card { padding: clamp(1.25rem, 3vw, 1.8rem); }
.info-card h2 { margin: 0; font-size: 1.25rem; }
.info-card p { margin: 0.75rem 0 0; color: var(--color-muted); line-height: 1.65; }
.info-email { display: inline-flex; margin-top: 1.2rem; color: var(--color-green); font-weight: 850; text-decoration: none; }
.info-config-note { color: var(--color-gold) !important; font-size: 0.83rem; }
.info-company { margin: 1.5rem 0 0; color: var(--color-muted); font-size: 0.82rem; }
.legal-hero span { display: block; margin-top: 0.8rem; color: var(--color-muted); font-size: 0.82rem; }
.legal-document { padding: clamp(1.3rem, 4vw, 2.5rem); }
.legal-document section + section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.legal-document h2 { margin: 0; color: var(--color-text); font-size: clamp(1.15rem, 2.3vw, 1.45rem); }
.legal-document p { margin: 0.65rem 0 0; color: #b8bbb5; font-size: 0.96rem; line-height: 1.72; }
.legal-document a { color: var(--color-green); font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

@media (max-width: 680px) {
  .info-main, .legal-main { padding-top: 1.35rem; padding-bottom: 6.5rem; }
  .info-card-grid { grid-template-columns: 1fr; }
  .legal-document section + section { margin-top: 1.5rem; padding-top: 1.5rem; }
  .legal-document p { font-size: 0.92rem; line-height: 1.65; }
}

.destination-page { display: flex; flex-direction: column; background: radial-gradient(circle, rgba(74, 210, 118, 0.09), transparent 40%), var(--color-background); }
.destination-content { flex: 1; display: grid; place-content: center; justify-items: center; padding: 3rem var(--page-gutter); text-align: center; }
.destination-content h1 { margin: 2rem 0 0; color: var(--color-gold); font-size: clamp(2.5rem, 9vw, 5rem); text-transform: uppercase; }
.destination-content p { color: var(--color-muted); }
.destination-content a { display: inline-block; margin-top: 1rem; color: var(--color-green); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

/* Screen 12 — Settings */
.settings-page { background: radial-gradient(circle at 50% -6%, rgba(74, 210, 118, 0.09), transparent 32rem), var(--color-background); }
.settings-main { width: min(100%, 780px); display: grid; gap: 1rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--page-gutter) clamp(4rem, 8vw, 6rem); }
.settings-heading { margin-bottom: clamp(0.5rem, 2vw, 1.25rem); }
.settings-heading h1 { margin: 0; color: var(--color-green); font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 950; letter-spacing: 0.035em; line-height: 0.95; }
.settings-heading p { margin: 0.75rem 0 0; color: var(--color-text); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 650; }
.settings-card { padding: clamp(1rem, 2.8vw, 1.4rem); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 0.85rem; background: linear-gradient(145deg, rgba(15, 21, 16, 0.96), rgba(8, 10, 8, 0.96)); box-shadow: 0 1.2rem 3rem -2.2rem rgba(0, 0, 0, 0.9); }
.settings-section-heading { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.settings-section-heading > span { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(74, 210, 118, 0.22); border-radius: 0.55rem; color: var(--color-green); background: rgba(74, 210, 118, 0.07); font-size: 0.9rem; }
.settings-section-heading h2 { margin: 0; color: var(--color-green); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; line-height: 1.2; }
.settings-section-heading p { margin: 0.28rem 0 0; color: var(--color-muted); font-size: 0.76rem; line-height: 1.35; }
.settings-options { display: grid; gap: 0.55rem; }
.settings-language-row { width: 100%; min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.65rem; color: var(--color-text); background: rgba(255, 255, 255, 0.025); cursor: pointer; }
.settings-language-row:hover, .settings-language-row:focus-visible { border-color: rgba(74, 210, 118, 0.45); background: rgba(74, 210, 118, 0.06); outline: none; }
.settings-language-current { display: flex; align-items: center; gap: 0.7rem; }
.settings-language-current > span { font-size: 1.05rem; }
.settings-language-current strong { font-size: 0.92rem; }
.settings-language-change { display: flex; align-items: center; gap: 0.35rem; color: var(--color-green); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.settings-language-change > span:last-child { font-size: 1.2rem; line-height: 1; }
.settings-theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-board-size-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-board-size-options .settings-choice { align-items: center; text-align: center; }
.settings-choice { min-width: 0; min-height: 3.6rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.25rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.6rem; color: var(--color-text); background: rgba(255, 255, 255, 0.022); text-align: left; cursor: pointer; }
.settings-choice span { overflow: hidden; max-width: 100%; font-size: 0.84rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.settings-choice strong { color: var(--color-muted); font-size: 0.54rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.settings-choice.is-selected { border-color: rgba(74, 210, 118, 0.48); background: rgba(74, 210, 118, 0.075); box-shadow: inset 0 0 0 1px rgba(74, 210, 118, 0.06); }
.settings-choice.is-selected strong { color: var(--color-green); }
.settings-choice:disabled { opacity: 0.46; cursor: default; }
.settings-rows { display: grid; gap: 0.2rem; }
.settings-row { min-height: 4.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.settings-row:first-child { border-top: 0; }
.settings-row h3 { margin: 0; color: var(--color-text); font-size: 0.92rem; }
.settings-row p { margin: 0.28rem 0 0; color: var(--color-muted); font-size: 0.74rem; line-height: 1.4; }
.settings-switch { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0.48rem; padding: 0; border: 0; color: var(--color-muted); background: transparent; cursor: pointer; }
.settings-switch > span { position: relative; width: 3rem; height: 1.7rem; display: block; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; background: rgba(255, 255, 255, 0.08); transition: background 150ms ease, border-color 150ms ease; }
.settings-switch > span::after { content: ""; position: absolute; top: 0.19rem; left: 0.2rem; width: 1.18rem; height: 1.18rem; border-radius: 50%; background: var(--color-muted); transition: transform 150ms ease, background 150ms ease; }
.settings-switch.is-on > span { border-color: rgba(74, 210, 118, 0.52); background: rgba(74, 210, 118, 0.25); }
.settings-switch.is-on > span::after { transform: translateX(1.27rem); background: var(--color-green); }
.settings-switch strong { width: 1.7rem; color: inherit; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.settings-switch.is-on strong { color: var(--color-green); }
.settings-account { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-account strong { color: var(--color-text); font-size: 1rem; }
.settings-account p { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 0.76rem; }
.settings-account .button { flex: 0 0 auto; min-height: 2.7rem; }
.settings-about { display: grid; justify-items: center; padding-block: 1.5rem; text-align: center; }
.settings-about > img { width: 110px; height: auto; object-fit: contain; }
.settings-about h2 { margin: 0.4rem 0 0; font-size: 0.95rem; }
.settings-about > p { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 0.76rem; }
.settings-about > small { margin-top: 0.45rem; color: #73766f; font-size: 0.65rem; }
.settings-about-links { display: flex; gap: 0.4rem; margin-top: 1rem; }
.settings-about-links a { padding: 0.35rem 0.6rem; border: 0; color: var(--color-muted); background: transparent; font: inherit; font-size: 0.68rem; cursor: pointer; }
.settings-about-links a:hover { color: var(--color-green); }

@media (max-width: 560px) {
  .settings-main { padding-top: 1.5rem; gap: 0.75rem; }
  .settings-card { border-radius: 0.7rem; }
  .settings-row { min-height: 4.75rem; }
  .settings-account { align-items: stretch; flex-direction: column; }
  .settings-account .button { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .language-picker { width: min(13rem, calc(100vw - 1rem)); }
  .language-picker-option { min-height: 2.85rem; padding: 0.55rem 0.7rem; font-size: 0.9rem; }
}

@media (max-width: 420px) {
  .app-brand img { height: 44px; max-width: 105px; }
  .header-controls { gap: 0.25rem; }
  .sound-toggle { width: 1.85rem; }
  .player-identity [data-player-name],
  .player-identity [data-premium-account-badge] { display: none; }
}

@media (max-width: 800px) {
  .header-streak-progress { min-width: 120px; width: min(24vw, 190px); }
  .header-streak-progress-copy small { display: none; }
  .play-hero { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.7fr); gap: 1.5rem; }
  .motivation-grid { grid-template-columns: 1fr; gap: 0.65rem; }
  .motivation-card { padding: 0.9rem 1rem; }
}

@media (max-width: 1100px) {
  .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
  .home-world-leaderboards { width: min(100%, 840px); }
}

@media (max-width: 560px) {
  .app-header { min-height: 4rem; flex-wrap: wrap; gap: 0.2rem 0.5rem; padding-bottom: .42rem; }
  .app-brand img { width: auto; height: 49px; max-width: 130px; }
  .header-streak-progress { order: 3; width: 100%; min-width: 100%; grid-template-columns: auto minmax(0,1fr); gap: .5rem; }
  .header-streak-progress-copy { display: flex; align-items: center; gap: .35rem; }
  .header-streak-progress-copy small { display: block; margin: 0; font-size: .42rem; }
  .header-streak-progress-track { height: .38rem; }
  .header-controls { gap: 0.35rem; }
  .global-streak { gap: 0.22rem; font-size: 0.82rem; }
  .header-language .language-trigger { padding: 0.4rem 0.52rem; }
  .sound-toggle { width: 2rem; }
  .player-summary { gap: 0.35rem; }
  .player-stat { font-size: 0.68rem; }
  .player-identity { padding: 0.38rem 0.5rem; font-size: 0.66rem; }
  .player-avatar-icon { width: 1.2rem; font-size: 0.62rem; }
  .player-identity [data-player-name],
  .player-identity [data-premium-account-badge] { display: none; }
  .app-main { padding-top: 1.25rem; }
  .play-hero { min-height: 0; grid-template-columns: 1fr; gap: 0.55rem; padding: 1.15rem 1.25rem 0.85rem; }
  .play-hero h1 { max-width: 100%; font-size: clamp(1.75rem, 9vw, 2.35rem); line-height: 1.04; }
  .hero-support { margin-top: 0.6rem; font-size: 0.78rem; line-height: 1.4; }
  .play-hero .section-kicker { margin-bottom: 0.45rem; }
  .play-hero .button { min-height: 2.4rem; padding: 0.62rem 0.95rem; font-size: 0.66rem; }
  .play-hero .button-primary { margin-top: 0.85rem; }
  .hero-brand { order: 2; margin-top: 0.2rem; }
  .hero-brand img { width: min(60%, 190px); max-height: none; }
  .hero-streak-summary { width:min(100%,280px);margin-top:-.25rem;padding:.6rem .75rem; }
  .hero-streak-main > span { font-size:2rem; }
  .hero-streak-main strong { font-size:2.75rem; }

  .home-hero-desktop-recent,
  .home-hero-desktop-actions { display: none; }
  .home-hero-recent-row {
    min-width: 0;
    min-height: 3.15rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(74, 210, 118, 0.28);
    border-radius: 0.65rem;
    color: var(--color-text);
    background: rgba(74, 210, 118, 0.045);
    text-decoration: none;
  }
  .home-hero-recent-row > span { color: var(--color-green); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
  .home-hero-recent-row > strong { overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
  .home-hero-recent-row > b { color: var(--color-gold); font-size: 0.86rem; }
  .home-hero-recent-row:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }
  .home-hero-mobile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.65rem; }
  .home-hero-mobile-nav .button { width: 100%; min-height: 2.65rem; margin: 0; padding: 0.55rem 0.45rem; font-size: 0.61rem; }

  .home-page[data-player-history="new"] .play-hero { gap: 0; }
  .home-page[data-player-history="new"] .play-hero-copy,
  .home-page[data-player-history="new"] .play-hero-new { display: contents; }
  .home-page[data-player-history="new"] .play-hero-new .section-kicker { order: 1; }
  .home-page[data-player-history="new"] .play-hero-new h1 { order: 2; }
  .home-page[data-player-history="new"] .play-hero-new .hero-support { order: 3; }
  .home-page[data-player-history="new"] .home-hero-mobile-nav { order: 4; }
  .home-page[data-player-history="new"] .hero-brand { order: 5; margin-top: 0.55rem; }
  .home-page[data-player-history="new"] .hero-brand img { width: min(76%, 240px); }
  .home-page[data-player-history="new"] .home-hero-new-primary { display: none; }

  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .mood-section { scroll-margin-top: 4.5rem; margin-top: 2.4rem; }
  .mood-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .mood-card,
  .mood-card:not(.mood-card-ctart) { width: 100%; display: flex; justify-self: stretch; aspect-ratio: 4 / 5; }
  .mood-card > img { width: 100%; height: 36%; flex-basis: 36%; object-fit: cover; }
  .mood-card-ctart-flagship { grid-column: 1 / -1; aspect-ratio: 2 / 1; border-width: 4px; }
  .mood-card-ctart-flagship img { object-fit: cover; }
  .mood-card-info,
  .mood-card:not(.mood-card-ctart) .mood-card-info { min-height: 0; flex-basis: 64%; padding: 0.38rem 0.55rem 0.34rem; border-top: 2px solid var(--mood-accent); border-left: 0; }
  .mood-card-info h3 { font-size: clamp(1.05rem, 5.6vw, 1.35rem); }
  html:is([lang="fr"], [lang="ru"]) .mood-card-info h3 { font-size: clamp(0.86rem, 4.35vw, 1.05rem); }
  .mood-card-info p { min-height: 2.35em; margin: 0.14rem 0 0.24rem; font-size: 0.59rem; line-height: 1.18; }
  .home-new-sticker { top:calc(36% - .9rem); right:.35rem; min-width:3.35rem; min-height:1.8rem; padding:.32rem .45rem; font-size:.72rem; }
  .mood-card-info .mood-activity-line { width:100%; gap:.02rem; justify-content:start; margin:-.04rem 0 .25rem; font-size:.57rem; letter-spacing:.02em; text-align:left; white-space:normal; }
  .mood-card-info .mood-card-leaderboard { width: 100%; min-height: 2.25rem; margin-top: auto; padding: 0.42rem 0.2rem; font-size: 0.52rem; letter-spacing: 0.055em; }
  .leaderboards-summary-grid,[data-my-rankings-list] { grid-template-columns: 1fr; }
  .leaderboards-master .panel,.leaderboard-summary-card { min-width: 0; overflow: hidden; }
  .game-leaderboard-peek { gap: .7rem; font-size: .62rem; }
  .home-world-leaderboards { width: 85vw; margin: 1rem auto 0; align-items: flex-start; flex-direction: column; gap: .3rem; }
  .account-prompt { align-items: stretch; flex-direction: column; }
  .account-prompt .button { width: 100%; }
  .app-footer { min-height: 4rem; }
}

@media (max-width: 370px) {
  .mood-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .mood-card,
  .mood-card:not(.mood-card-ctart) { width: 85vw; justify-self: center; }
  .mood-card-ctart-flagship { width: 85vw; justify-self: center; }
  .mood-card > img { height: 47%; flex-basis: 47%; }
  .mood-card-info,
  .mood-card:not(.mood-card-ctart) .mood-card-info { min-height: 0; flex-basis: 53%; padding: 0.75rem 0.85rem; }
  .mood-card-info h3 { font-size: 1.8rem; }
  html:is([lang="fr"], [lang="ru"]) .mood-card-info h3 { font-size: 1.55rem; }
  .mood-card-info p { min-height: 0; font-size: 0.76rem; }
}

@media (max-width: 480px) {
  .app-header { padding-inline: 0.65rem; }
  .app-brand img { height: 42px; max-width: 90px; }
  .header-controls { gap: 0.18rem; }
  .global-streak { font-size: 0.74rem; }
  .header-leaderboard,
  .sound-toggle,
  .header-language .language-trigger { width: 1.8rem; }
  .player-identity { padding: 0.28rem; }
  .header-language [data-language-code] { display: none; }
  .header-language .language-trigger { padding-inline: 0; }
}

@media (max-width: 380px) {
  .app-header { padding-inline: 0.6rem; }
  .app-brand img { height: 42px; max-width: 116px; }
  .player-identity { min-width: 2rem; justify-content: center; padding: 0.3rem; }
  .player-identity [data-player-name] { display: none; }
  .premium-account-badge { padding-inline: 0.38rem; font-size: 0.52rem; letter-spacing: 0.055em; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .app-header { position: relative; min-height: 3.6rem; }
  .app-main { padding-top: 1rem; }
  .play-hero { min-height: 220px; grid-template-columns: minmax(0, 1fr) minmax(190px, 0.55fr); padding: 1.5rem 2rem; }
  .play-hero h1 { font-size: 2.4rem; }
  .hero-brand img { width: min(100%, 250px); }
  .button-primary { margin-top: 1rem; }
}

/* Screen 03 — TRAIN Hub */
.train-page {
  --train-accent: var(--world-train);
  background: radial-gradient(circle at 50% -8%, rgba(74, 210, 118, 0.08), transparent 30rem), var(--color-background);
}

.train-main {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--page-gutter) clamp(3rem, 7vw, 5rem);
}

.train-hero {
  --hub-accent: var(--train-accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.42fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgba(74, 210, 118, 0.2);
  border-radius: 1rem;
  background: linear-gradient(120deg, rgba(13, 23, 16, 0.96), rgba(8, 10, 8, 0.92));
}

/* Reusable TRAIN / FUN / BEAUTY hub heading hierarchy. */
.hub-title {
  margin: 0;
  color: var(--hub-accent, var(--color-text));
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.hub-headline {
  margin: 0.45rem 0 0;
  font-size: clamp(1.75rem, 3.75vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hub-support {
  margin: 0.8rem 0 0;
  color: var(--color-muted);
  font-size: clamp(0.88rem, 1.5vw, 1rem);
}

.train-eyebrow,
.training-category {
  margin: 0;
  color: var(--train-accent);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.train-hero-mascot {
  display: block;
  width: min(100%, 310px);
  height: auto;
  justify-self: end;
}

.train-section { margin-top: clamp(2.75rem, 6vw, 4.75rem); }
.train-section-heading { margin-bottom: 1.25rem; }
.train-section-heading h2 { margin: 0.4rem 0 0; font-size: clamp(1.65rem, 3.5vw, 2.65rem); letter-spacing: -0.03em; }

.train-family-tabs { display: none; }
.train-catalog-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1.25rem, 3vw, 2rem); }
.train-catalog-group .training-catalog { grid-template-columns: minmax(0, 1fr); }
.train-family-heading { margin-bottom: 1.1rem; }
.train-family-heading h3 { margin: 0; color: var(--train-accent); font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.train-family-heading p { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 0.95rem; line-height: 1.45; }

.recent-training-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.recent-training-card,
.training-catalog-card,
.recommended-training-card {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(74, 210, 118, 0.3);
  border-radius: 0.9rem;
  background: rgba(11, 14, 11, 0.86);
}

.activity-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.activity-card-link:focus-visible { outline: 3px solid rgba(74, 210, 118, 0.5); outline-offset: -3px; }
.activity-card-visual-action { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.training-catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.activity-card-secondary-action { position: relative; z-index: 3; }
.activity-card-leaderboard-action { color: var(--color-gold); border-color: rgba(213, 173, 82, 0.3); text-decoration: none; }
.activity-card-leaderboard-action:hover, .activity-card-leaderboard-action:focus-visible { border-color: rgba(213, 173, 82, 0.58); background: rgba(213, 173, 82, 0.07); }
.motivation-card-link { display: inline-block; margin-top: 0.38rem; color: var(--color-gold); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.075em; text-decoration: none; text-transform: uppercase; }
.motivation-card-link:hover, .motivation-card-link:focus-visible { color: #f1cc6d; }
.training-catalog-card:has(.activity-card-link),
.recommended-training-card:has(.activity-card-link),
.showcase-card:has(.activity-card-link) { cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.training-catalog-card:has(.activity-card-link):hover,
.recommended-training-card:has(.activity-card-link):hover,
.showcase-card:has(.activity-card-link):hover { transform: translateY(-3px); border-color: rgba(74, 210, 118, 0.45); background: rgba(13, 19, 14, 0.94); }

.recent-training-card {
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
}

.training-card-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

.recent-training-card.has-thumbnail,
.recommended-training-card.has-thumbnail { padding: 0; }

.recent-training-card .training-card-body,
.recommended-training-card .training-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.recent-training-card.has-thumbnail .training-card-body,
.recommended-training-card.has-thumbnail .training-card-body { padding: 1.35rem; }

.recent-training-card.is-live,
.training-catalog-card.is-live { cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.recent-training-card.is-live:hover,
.training-catalog-card.is-live:hover { transform: translateY(-3px); border-color: rgba(74, 210, 118, 0.45); background: rgba(13, 19, 14, 0.94); }
.recent-training-card.is-live:focus-visible,
.training-catalog-card.is-live:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(74, 210, 118, 0.62);
  background: rgba(13, 19, 14, 0.96);
  box-shadow: 0 0 0 2px rgba(74, 210, 118, 0.1);
}

.recent-training-card h3,
.training-catalog-card h3,
.recommended-training-card h3 { margin: 0.55rem 0 0; color: var(--color-text); font-size: clamp(1.2rem, 2vw, 1.55rem); }
.activity-new-badge { position:absolute; z-index:4; top:.72rem; right:.72rem; min-width:3.35rem; min-height:1.75rem; padding:.32rem .48rem; border-radius:.25rem; font-size:.68rem; pointer-events:none; }
.recent-date { margin: 0.65rem 0 0; color: var(--color-muted); font-size: 0.78rem; }
.recent-record {
  width: fit-content;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "icon value" "icon label";
  align-items: center;
  column-gap: 0.55rem;
  margin: 0.55rem 0 1.2rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(213, 173, 82, 0.2);
  border-radius: 0.6rem;
  background: rgba(213, 173, 82, 0.055);
}
.recent-record-icon { grid-area: icon; color: var(--color-gold); font-size: 1.15rem; line-height: 1; }
.recent-record-value { grid-area: value; color: var(--color-text); font-size: 1.45rem; line-height: 1; letter-spacing: -0.025em; }
.recent-record-label { grid-area: label; margin-top: 0.16rem; color: var(--color-gold); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; }
.recent-training-actions { display: flex; gap: 0.55rem; margin-top: auto; }

.train-action {
  min-height: 2.35rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(74, 210, 118, 0.44);
  border-radius: 0.5rem;
  color: var(--color-text);
  background: transparent;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.train-action:hover { border-color: var(--train-accent); color: var(--train-accent); }
.train-action-primary { color: #031007; border-color: var(--train-accent); background: var(--train-accent); }
.train-action-primary:hover { color: #031007; background: #5bdd84; }

.coming-soon-label {
  width: fit-content;
  margin-top: auto;
  padding: 0.48rem 0.65rem;
  border: 1px solid rgba(170, 166, 157, 0.18);
  border-radius: 999px;
  color: #777a75;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.start-training-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.recommended-training-card { min-height: 13rem; display: flex; flex-direction: column; padding: 1.35rem; }
.recommended-training-card .training-card-body > p:not(.training-category) { margin: 0.55rem 0 1rem; color: var(--color-muted); font-size: 0.82rem; line-height: 1.45; }

.train-filters {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.train-filters::-webkit-scrollbar { display: none; }
.train-filters button {
  flex: 0 0 auto;
  padding: 0.62rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--color-muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.train-filters button:hover,
.train-filters button.is-active { color: #041108; border-color: var(--train-accent); background: var(--train-accent); }

.training-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.training-catalog-card { min-height: 10.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.2rem; }
.training-catalog-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-width: 0; }
.training-catalog-card.has-thumbnail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 34%);
  align-items: center;
  padding: 0;
}
.training-catalog-card.has-thumbnail .training-catalog-content { align-self: stretch; padding: 1.2rem 0 1.2rem 1.2rem; }
.training-catalog-card.has-thumbnail .training-card-thumbnail {
  width: calc(100% - 1rem);
  margin-right: 1rem;
  border-radius: 0.65rem;
}
.training-description { margin: 0.55rem 0 0; color: var(--color-muted); font-size: 0.82rem; line-height: 1.45; }
.training-mode-summary { margin: 0.55rem 0 0; color: var(--color-train); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.training-record { margin: 0; color: var(--color-text); font-size: 0.76rem; font-weight: 700; }
.training-record-prominent { display: flex; align-items: center; gap: 0.4rem; color: var(--color-gold); }
.training-record-prominent > strong { font-size: 1.18rem; line-height: 1; }
.training-record-prominent > span:not(.training-record-rank) { color: var(--color-muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.training-record-rank { margin-left: 0.15rem; padding: 0.2rem 0.4rem; border: 1px solid rgba(213, 173, 82, 0.32); border-radius: 999px; color: var(--color-gold); background: rgba(213, 173, 82, 0.07); font-size: 0.72rem; font-weight: 900; }
.training-record.is-coming-soon { color: #777a75; font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; }

.mode-dialog {
  width: min(calc(100% - 2rem), 720px);
  max-height: min(85vh, 720px);
  padding: 0;
  border: 1px solid rgba(74, 210, 118, 0.3);
  border-radius: 1rem;
  color: var(--color-text);
  background: #0a0c0a;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.68);
}
.mode-dialog::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(5px); }
.mode-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mode-dialog-header h2 { margin: 0.35rem 0 0; font-size: clamp(1.45rem, 4vw, 2.15rem); }
.mode-dialog-close { width: 2rem; aspect-ratio: 1; padding: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-muted); background: transparent; font-size: 1.15rem; cursor: pointer; }
.mode-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 1rem 1.5rem 1.5rem; overflow-y: auto; }
.mode-option { min-width: 0; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: 0.8rem; padding: 1rem; border: 1px solid rgba(74, 210, 118, 0.16); border-radius: 0.7rem; color: var(--color-text); background: rgba(255, 255, 255, 0.018); text-align: left; cursor: pointer; }
.mode-option:hover { border-color: rgba(74, 210, 118, 0.55); background: rgba(74, 210, 118, 0.055); }
.mode-option-icon { width: 2rem; height: 2rem; color: var(--train-accent); background: currentColor; mask: var(--mode-icon) center / contain no-repeat; -webkit-mask: var(--mode-icon) center / contain no-repeat; }
.mode-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.mode-option-copy strong { color: var(--train-accent); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mode-option-copy span,
.mode-option-record { color: var(--color-muted); font-size: 0.7rem; }
.mode-option-record { grid-column: 2; }

.arcade-toast { position: fixed; right: 1rem; bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 80; max-width: min(24rem, calc(100% - 2rem)); margin: 0; padding: 0.85rem 1rem; border: 1px solid rgba(74, 210, 118, 0.3); border-radius: 0.65rem; color: var(--color-text); background: rgba(10, 15, 11, 0.97); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45); font-size: 0.78rem; }

@media (max-width: 760px) {
  .train-hero { grid-template-columns: minmax(0, 1fr) minmax(150px, 0.38fr); }
  .train-hero-mascot { width: min(100%, 230px); }
  .recent-training-grid,
  .training-catalog,
  .start-training-card { grid-template-columns: 1fr; }
  .recent-training-card { min-height: 12rem; }
}

@media (max-width: 680px) {
  .train-family-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding: 0.3rem;
    border: 1px solid rgba(74, 210, 118, 0.22);
    border-radius: 0.75rem;
    background: rgba(11, 14, 11, 0.86);
  }
  .train-family-tabs button {
    min-height: 2.7rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--color-muted);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .train-family-tabs button[aria-selected="true"] { color: #041108; border-color: var(--train-accent); background: var(--train-accent); }
  .train-family-tabs button:focus-visible { outline: 2px solid rgba(74, 210, 118, 0.55); outline-offset: 2px; }
  .train-catalog-groups { display: block; }
  .train-catalog-group[hidden] { display: none; }
}

/* Screen 15 — Sign In */
.register-main.sign-in-main { min-height: calc(100svh - 9.25rem); }
.register-shell.sign-in-shell { grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.72fr); }
.register-intro.sign-in-intro { display: grid; justify-items: start; }
.sign-in-brand { width: min(270px, 70%); height: auto; margin: 0 0 1.35rem; object-fit: contain; }
.sign-in-support { max-width: 31rem; margin: 1rem 0 0; color: var(--color-muted); font-size: clamp(0.92rem, 1.5vw, 1.05rem); line-height: 1.5; }
.register-card.sign-in-card { align-self: center; }
.sign-in-password-field { position: relative; }
.sign-in-password-field input { padding-right: 4.7rem; }
.sign-in-password-field button { position: absolute; top: 50%; right: 0.7rem; min-width: 3.25rem; min-height: 2.25rem; transform: translateY(-50%); border: 0; border-radius: 0.45rem; color: var(--color-green); background: transparent; font: inherit; font-size: 0.72rem; font-weight: 850; cursor: pointer; }
.sign-in-password-field button:hover, .sign-in-password-field button:focus-visible { color: var(--color-text); background: rgba(74, 210, 118, 0.08); outline: none; }
.sign-in-forgot { justify-self: end; padding: 0.25rem 0; border: 0; color: var(--color-muted); background: transparent; font: inherit; font-size: 0.76rem; font-weight: 750; cursor: pointer; }
.sign-in-forgot:hover, .sign-in-forgot:focus-visible { color: var(--color-green); }
.sign-in-message { margin: 0.25rem 0 0; padding: 0.75rem; border: 1px solid rgba(74, 210, 118, 0.2); border-radius: 0.6rem; color: var(--color-text); background: rgba(74, 210, 118, 0.055); font-size: 0.78rem; line-height: 1.45; }
.sign-in-secondary-actions p a { color: var(--color-green); font-weight: 800; text-decoration: none; }
.sign-in-member-state { overflow: hidden; background: radial-gradient(circle at 50% 20%, rgba(74, 210, 118, 0.11), transparent 15rem), rgba(9, 13, 10, 0.94); }
.sign-in-member-avatar { width: 6.5rem; height: auto; aspect-ratio: 1; margin: 0 auto 1rem; padding: 0.35rem; border: 1px solid rgba(74, 210, 118, 0.5); border-radius: 50%; background: rgba(74, 210, 118, 0.08); object-fit: contain; }
.sign-in-premium-status { width: fit-content; margin: 0 auto 0.9rem; padding: 0.35rem 0.65rem; border: 1px solid rgba(213, 173, 82, 0.42); border-radius: 999px; color: var(--color-gold); background: rgba(213, 173, 82, 0.075); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; }
.sign-in-page[data-sign-in-persona="premium"] .sign-in-member-avatar { border-color: rgba(213, 173, 82, 0.68); background: rgba(213, 173, 82, 0.09); box-shadow: 0 0 1.8rem rgba(213, 173, 82, 0.15); }

@media (max-width: 760px) {
  .register-main.sign-in-main { padding-top: 1rem; padding-bottom: 6.5rem; }
  .register-shell.sign-in-shell { grid-template-columns: 1fr; gap: 1.1rem; }
  .sign-in-brand { width: min(185px, 52vw); margin-bottom: 0.8rem; }
  .sign-in-support { margin-top: 0.65rem; font-size: 0.88rem; }
  .register-card.sign-in-card { padding: 1.1rem; }
  .sign-in-member-state { margin-top: 1rem; padding: 1.5rem 1.1rem; }
  .sign-in-member-avatar { width: 5.25rem; }
}

@media (max-width: 560px) {
  .train-main { padding-top: 1rem; }
  .train-hero {
    grid-template-columns: minmax(0, 1fr) minmax(146px, 0.6fr);
    gap: 0.5rem;
    padding: 1rem 1.2rem;
  }
  .hub-headline { font-size: clamp(1rem, 4.4vw, 1.1rem); line-height: 1.15; letter-spacing: -0.025em; }
  .train-hero-mascot { width: min(100%, 240px); transform: translateY(-0.35rem); }
  .recent-training-card,
  .recommended-training-card,
  .training-catalog-card { width: 85vw; justify-self: center; }
  .recent-training-card .training-card-thumbnail,
  .recommended-training-card .training-card-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 0;
    object-fit: contain;
  }
  .train-section { margin-top: 2.5rem; }
  .mode-option-grid { grid-template-columns: 1fr; padding-inline: 1rem; }
  .mode-dialog-header { padding-inline: 1rem; }
  .training-catalog-card.has-thumbnail {
    display: flex;
    padding: 0;
  }
  .training-catalog-card.has-thumbnail .training-card-thumbnail {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 0 auto;
    border-radius: 0;
    object-fit: contain;
  }
  .training-catalog-card.has-thumbnail .training-catalog-content { width: 100%; padding: 1.2rem; }
  .training-catalog-actions { gap: 0.45rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .train-main { padding-top: 1rem; }
  .train-hero { padding: 1rem 1.5rem; }
  .train-hero-mascot { width: min(100%, 180px); }
  .recent-training-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Screen 04 — FUN Hub, reusing the proven hub and card system. */
.fun-page {
  --train-accent: var(--world-fun);
  --showcase-accent-rgb: 240, 82, 172;
  background: radial-gradient(circle at 50% -8%, rgba(240, 82, 172, 0.08), transparent 30rem), var(--color-background);
}

.beauty-page {
  --train-accent: var(--world-beauty);
  --showcase-accent-rgb: 118, 217, 242;
  background: radial-gradient(circle at 50% -8%, rgba(118, 217, 242, 0.075), transparent 30rem), var(--color-background);
}

/* Reusable Train activity shell — approved chessking.ai composition. */
.train-game-page {
  --train-accent: var(--world-train);
  background:
    radial-gradient(55rem 34rem at 50% 0%, rgba(74, 210, 118, 0.1), transparent 62%),
    radial-gradient(45rem 30rem at 95% 95%, rgba(213, 173, 82, 0.07), transparent 58%),
    var(--color-background);
}

.train-game-main {
  width: min(100%, 1120px);
  min-height: calc(100svh - 10rem);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) var(--page-gutter) clamp(3rem, 7vw, 5rem);
}

.train-game-main [hidden] { display: none !important; }
.train-game-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-muted); font-size: 0.82rem; font-weight: 750; text-decoration: none; }
.train-game-back::before { content: "←"; }
.train-game-back:hover { color: var(--color-text); }
.train-game-back-button { padding: 0; border: 0; background: transparent; cursor: pointer; }

/* Reusable world identity label for Train, Fun, and Beauty activity screens. */
.world-label { margin: 0; color: var(--world-accent, var(--color-text)); font-weight: 950; letter-spacing: 0.055em; line-height: 1; text-transform: uppercase; }
.world-label-train { --world-accent: var(--world-train); }
.world-label-fun { --world-accent: var(--world-fun); }
.world-label-beauty { --world-accent: var(--world-beauty); }

.train-mode-screen { max-width: 980px; margin: 0 auto; }
.train-mode-heading { display: grid; justify-items: center; margin: 0 auto clamp(1.8rem, 4vw, 3rem); text-align: center; }
.train-mode-heading img { width: 84px; height: 84px; object-fit: contain; margin-bottom: 0.4rem; }
.train-mode-heading .world-label { padding: 0; border: 0; color: var(--world-accent); background: transparent; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: 0.04em; }
.train-mode-heading h1 { margin: 0.45rem 0 0; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; }
.train-mode-heading > span { margin-top: 0.7rem; color: var(--color-muted); }
.train-mode-leaderboard-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; margin-top: 0.9rem; padding: 0.48rem 0.85rem; border: 1px solid rgba(213, 173, 82, 0.3); border-radius: 999px; color: var(--color-gold); background: rgba(213, 173, 82, 0.035); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.train-mode-leaderboard-link:hover, .train-mode-leaderboard-link:focus-visible { color: #f1cc6d; border-color: rgba(213, 173, 82, 0.58); background: rgba(213, 173, 82, 0.07); }

.train-mode-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.65rem, 1.6vw, 1rem); }
.train-mode-card { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; color: var(--color-text); background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)); text-align: center; cursor: pointer; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.train-mode-card:hover { transform: translateY(-3px); border-color: rgba(74, 210, 118, 0.45); box-shadow: 0 1rem 2.5rem -1.5rem rgba(74, 210, 118, 0.55); }
.train-mode-card:focus-visible { outline: 2px solid var(--train-accent); outline-offset: 3px; }
.train-mode-icon { width: 3rem; height: 3rem; display: block; margin-bottom: 0.2rem; color: var(--train-accent); background: currentColor; mask: var(--mode-icon) center / contain no-repeat; -webkit-mask: var(--mode-icon) center / contain no-repeat; }
.train-mode-card > strong { font-size: 1rem; }
.train-mode-metric { font-size: clamp(1.8rem, 3.5vw, 2.65rem); font-weight: 950; letter-spacing: -0.05em; line-height: 1; }
.train-mode-duration { color: var(--color-muted); font-size: 0.72rem; }
.train-mode-record { min-height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.32rem; margin-top: 0.25rem; padding: 0.3rem 0.58rem; border: 1px solid rgba(213, 173, 82, 0.2); border-radius: 999px; color: var(--color-gold); background: rgba(213, 173, 82, 0.07); font-size: 0.66rem; font-weight: 750; }
.train-mode-record.has-best { min-height: 2rem; padding: 0.36rem 0.65rem; border-color: rgba(213, 173, 82, 0.36); background: rgba(213, 173, 82, 0.105); box-shadow: 0 0 1.25rem -0.8rem rgba(213, 173, 82, 0.55); }
.train-mode-record.has-best > span { font-size: 0.9rem; line-height: 1; }
.train-mode-record.has-best strong { font-size: 0.8rem; letter-spacing: 0.045em; }
.train-mode-start { width: 100%; margin-top: 0.2rem; padding: 0.55rem; border-radius: 0.5rem; color: #031007; background: var(--train-accent); font-size: 0.76rem; font-weight: 900; text-transform: uppercase; }
.train-mode-card small { color: var(--color-muted); font-size: 0.66rem; line-height: 1.35; }
.train-mode-practice { --train-accent: #a78bfa; }
.train-mode-bullet { --train-accent: #fb7185; }
.train-mode-blitz { --train-accent: #38bdf8; }
.train-mode-survival { --train-accent: #4ad276; }

.train-play-screen {
  width: min(100%, var(--game-board-size, 760px));
  margin: 0 auto;
  scroll-margin-bottom: calc(5.25rem + env(safe-area-inset-bottom));
  transition: width 160ms ease;
}
.train-play-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.train-play-actions { display: flex; align-items: center; gap: 0.85rem; }
.train-stop-button { padding: 0.38rem 0.62rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0.45rem; color: var(--color-muted); background: rgba(255, 255, 255, 0.035); font: inherit; font-size: 0.67rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.train-stop-button:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--color-text); }
.train-board-size-control { position: relative; }
.train-board-size-trigger { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.58rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.45rem; color: var(--color-muted); background: rgba(255, 255, 255, 0.025); font: inherit; font-size: 0.67rem; font-weight: 800; cursor: pointer; }
.train-board-size-trigger:hover,
.train-board-size-trigger[aria-expanded="true"] { border-color: rgba(74, 210, 118, 0.42); color: var(--color-text); background: rgba(74, 210, 118, 0.06); }
.train-board-size-menu { position: absolute; z-index: 30; top: calc(100% + 0.45rem); left: 0; width: 9.5rem; padding: 0.5rem; border: 1px solid rgba(74, 210, 118, 0.28); border-radius: 0.65rem; background: rgba(8, 12, 9, 0.98); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5); }
.train-board-size-menu > strong { display: block; padding: 0.28rem 0.42rem 0.45rem; color: var(--world-train); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.12em; }
.train-board-size-menu button { width: 100%; display: flex; align-items: center; padding: 0.46rem 0.5rem; border: 0; border-radius: 0.42rem; color: var(--color-muted); background: transparent; font: inherit; font-size: 0.72rem; font-weight: 750; text-align: left; cursor: pointer; }
.train-board-size-menu button:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.05); }
.train-board-size-menu button.is-selected { color: var(--world-train); background: rgba(74, 210, 118, 0.09); }
.train-board-size-menu button.is-selected::after { content: "✓"; margin-left: auto; }
.train-play-topline p { margin: 0; color: var(--color-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; }
.train-play-topline .world-label { display: inline; color: var(--world-accent); font-size: 0.8rem; letter-spacing: 0.06em; }
.train-play-topline strong { color: var(--color-text); }
.train-playing-title { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.train-playing-mode { padding: 0.2rem 0.38rem; border: 1px solid rgba(213, 173, 82, 0.22); border-radius: 999px; color: var(--color-gold); font-size: 0.57rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.train-play-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 0.7rem; margin-bottom: 0.65rem; }
.train-hud-stat { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.train-hud-stat > span { color: var(--color-muted); font-size: 0.64rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.train-hud-stat strong { color: var(--color-text); font-size: clamp(2rem, 7vw, 3.25rem); font-variant-numeric: tabular-nums; line-height: 1; }
.train-hud-stat:not(.train-hud-primary) strong { color: var(--train-accent); }
.train-hud-gems strong { color: var(--color-gold) !important; }
.train-hud-primary strong.is-urgent { color: #fb7185; animation: train-timer-pulse 650ms ease-in-out infinite alternate; }
.train-record-target { min-height: 1rem; margin: -0.2rem 0 0.45rem; color: var(--color-gold); font-size: 0.61rem; font-weight: 850; letter-spacing: 0.115em; text-align: center; text-transform: uppercase; }
.train-run-progress { height: 3px; margin-bottom: 0.8rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.train-run-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-gold), var(--train-accent)); transition: width 350ms ease; }

.train-board-stage { position: relative; width: 100%; }
.train-board { width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(74, 210, 118, 0.26); border-radius: 0.8rem; background: #111; box-shadow: 0 1.5rem 4rem -1.6rem rgba(0, 0, 0, 0.88), 0 0 2.5rem -1.8rem rgba(74, 210, 118, 0.7); }
.train-board > .ckb { width: 100%; height: 100%; }
.train-board .ckb-board { width: 100%; height: 100%; max-width: none; max-height: none; }
.train-feedback { position: absolute; z-index: 15; left: 50%; top: -0.5rem; transform: translate(-50%, -70%) scale(0.92); opacity: 0; margin: 0; padding: 0.55rem 0.85rem; border-radius: 999px; color: white; background: var(--train-accent); box-shadow: 0 0.8rem 2rem -0.8rem rgba(74, 210, 118, 0.8); font-size: 0.78rem; font-weight: 900; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease; }
.train-feedback.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; }
.train-feedback[data-state="wrong"] { background: #e05252; box-shadow: 0 0.8rem 2rem -0.8rem rgba(224, 82, 82, 0.85); }
.train-solution-reveal { position:absolute;z-index:14;inset:0;pointer-events:none;opacity:0;transition:opacity 100ms ease; }
.train-solution-reveal.is-visible { opacity:1; }
.train-solution-overlay { position:absolute;inset:0;width:100%;height:100%;overflow:visible; }
.train-wrong-square { fill:rgba(239,68,68,.34);stroke:rgba(255,115,115,.9);stroke-width:.65; }
.train-solution-arrow { stroke:#45f27b;stroke-width:2.15;stroke-linecap:round;filter:drop-shadow(0 0 2px #071b0d) drop-shadow(0 0 5px rgba(69,242,123,.95)); }
.train-solution-overlay marker path { fill:#45f27b; }
.train-solution-reveal > strong { position:absolute;left:50%;top:1rem;transform:translateX(-50%);max-width:calc(100% - 2rem);padding:.48rem .72rem;border:1px solid rgba(69,242,123,.75);border-radius:999px;color:#f4fff7;background:rgba(5,18,9,.94);box-shadow:0 0 1.3rem rgba(69,242,123,.42);font-size:clamp(.75rem,2.8vw,.95rem);font-weight:900;white-space:nowrap; }

.train-instruction-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; margin-top: 0.75rem; padding: 0.8rem 1rem; border: 1px solid rgba(213, 173, 82, 0.16); border-radius: 0.75rem; background: rgba(213, 173, 82, 0.045); }
.train-side-indicator { width: 2.6rem; aspect-ratio: 1; border-radius: 0.45rem; background: #f7f7f5; box-shadow: 0 0 1rem rgba(255, 255, 255, 0.2); }
.train-side-indicator[data-side="b"] { border: 2px solid white; background: #659466; box-shadow: 0 0 1rem rgba(101, 148, 102, 0.55); }
.train-instruction-panel strong { display: block; font-size: 0.95rem; }
.train-instruction-panel p { margin: 0.15rem 0 0; color: var(--color-gold); font-size: 0.8rem; font-weight: 700; }
.train-instruction-panel small { display: block; margin-top: 0.2rem; color: var(--color-muted); font-size: 0.68rem; }
.train-instruction-panel img { width: 3.1rem; height: 3.1rem; object-fit: contain; }

.train-results-screen { position: relative; isolation: isolate; width: min(100%, 580px); overflow: hidden; display: grid; justify-items: center; margin: clamp(1.5rem, 6vh, 4rem) auto; padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid rgba(74, 210, 118, 0.25); border-radius: 1rem; background: radial-gradient(circle at 50% 0%, rgba(74, 210, 118, 0.11), transparent 45%), rgba(9, 14, 10, 0.96); box-shadow: 0 2rem 5rem -2.4rem rgba(0, 0, 0, 0.95); text-align: center; }
.train-results-screen::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.22; background-image: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.035) 54%, transparent 54%); background-size: 28px 28px; }
.train-results-logo { display: block; width: min(130px, 42%); height: auto; object-fit: contain; margin: -0.35rem auto 0.15rem; }
.train-results-activity { margin: 0.55rem 0 0; color: var(--color-text); font-size: 0.82rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.train-results-activity span:first-child { color: var(--world-train); }
.train-results-mode { margin: 0.5rem 0 0; padding: 0.28rem 0.6rem; border: 1px solid rgba(213, 173, 82, 0.28); border-radius: 999px; color: var(--color-gold); background: rgba(213, 173, 82, 0.07); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.15em; }
.train-results-celebration { position: relative; display: grid; justify-items: center; margin: 1.1rem 0 0.25rem; }
.train-results-celebration::before { content: ""; position: absolute; z-index: -1; width: 11rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(213, 173, 82, 0.23), transparent 67%); animation: train-celebration-glow 1.6s ease-in-out infinite alternate; }
.train-results-celebration img { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 0 1rem rgba(213, 173, 82, 0.25)); }
.train-results-celebration strong { color: var(--color-gold); font-size: clamp(1.35rem, 5vw, 2rem); letter-spacing: 0.05em; }
.train-results-celebration span { margin-top: 0.2rem; color: var(--color-text); font-size: 0.86rem; font-weight: 750; }
.train-results-screen h1 { margin: 0.85rem 0 0; color: var(--color-muted); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.train-standard-result { display: grid; justify-items: center; }
.train-results-score { margin-top: 0.45rem; color: var(--train-accent); font-size: clamp(5rem, 17vw, 8rem); font-variant-numeric: tabular-nums; letter-spacing: -0.06em; line-height: 0.9; text-shadow: 0 0 2.5rem rgba(74, 210, 118, 0.2); }
.train-results-score-label { margin: 0.45rem 0 0; color: var(--color-text); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.train-results-stats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.55rem; margin-top: 1.35rem; }
.train-results-stats div { display: grid; gap: 0.25rem; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0.65rem; background: rgba(255, 255, 255, 0.025); }
.train-results-stats span { color: var(--color-muted); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.train-results-stats span i { margin-right: 0.16rem; font-style: normal; }
.train-results-stats strong { color: var(--color-text); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.train-practice-result { width: min(100%, 390px); display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1rem; }
.train-practice-result div { display: grid; justify-items: center; gap: 0.28rem; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.025); }
.train-practice-result strong { color: var(--train-accent); font-size: clamp(2.8rem, 9vw, 4rem); font-variant-numeric: tabular-nums; line-height: 1; }
.train-practice-result span { color: var(--color-text); font-size: 0.67rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.train-results-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1rem; }
.train-results-actions button { cursor: pointer; }
.train-results-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.train-results-actions .train-leaderboard-link { color: var(--color-gold); border-color: rgba(213, 173, 82, 0.36); background: rgba(213, 173, 82, 0.035); }
.train-results-actions .train-leaderboard-link:hover, .train-results-actions .train-leaderboard-link:focus-visible { border-color: rgba(213, 173, 82, 0.6); background: rgba(213, 173, 82, 0.07); }

/* Reusable TRAIN play-out shell; KRK is the first scenario. */
.train-playout-page .train-play-screen { width: min(100%, var(--playout-board-size, 560px)); }
.krk-mode-chooser { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.8rem; margin-bottom: 0.65rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(74, 210, 118, 0.2); border-radius: 0.8rem; background: rgba(74, 210, 118, 0.035); }
.krk-mode-chooser > strong { color: var(--color-muted); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.krk-mode-chooser .train-mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.krk-mode-chooser .train-mode-card { min-height: 3.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; justify-items: start; gap: 0.08rem 0.6rem; padding: 0.5rem 0.75rem; border-radius: 0.65rem; text-align: left; }
.krk-mode-chooser .train-mode-card > strong { grid-row: 1 / span 2; align-self: center; color: var(--world-train); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.krk-mode-chooser .train-mode-card > span { color: var(--color-muted); font-size: 0.68rem; }
.krk-status-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 0.7rem; margin-bottom: 0.65rem; padding: 0.65rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.8rem; background: rgba(255, 255, 255, 0.025); }
.krk-status-stat, .krk-goal { min-width: 0; display: grid; justify-items: center; gap: 0.12rem; text-align: center; }
.krk-status-stat span, .krk-goal span { color: var(--color-muted); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }
.krk-status-stat strong { color: var(--color-text); font-size: clamp(1.35rem, 4vw, 2rem); font-variant-numeric: tabular-nums; line-height: 1; }
.krk-status-stat.is-accent strong { color: var(--world-train); }
.krk-goal strong { color: var(--color-gold); font-size: 0.78rem; text-transform: uppercase; }
.krk-board-stage { width: 100%; }
.krk-message { min-height: 1.4rem; margin: 0.45rem 0 0; color: var(--color-text); font-size: 0.78rem; font-weight: 750; text-align: center; }
.krk-message[data-state="win"] { color: var(--world-train); }
.krk-message[data-state="draw"], .krk-message[data-state="lose"] { color: var(--color-gold); }
.krk-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.45rem; }
.krk-controls .button { min-height: 2.65rem; padding-inline: 0.55rem; cursor: pointer; }
.krk-best { margin: 0.5rem 0 0; color: var(--color-muted); font-size: 0.7rem; font-weight: 750; text-align: center; }
.krk-result-record { margin: 0.8rem 0 0; color: var(--color-gold); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; }
.krk-results-screen .train-results-status { margin-top: 1rem; color: var(--world-train); font-size: clamp(1.5rem, 5vw, 2.25rem); letter-spacing: 0.02em; }
.krk-results-screen .train-results-stats { max-width: 390px; }
.leaderboard-score small { color: var(--color-muted); font-size: 0.58rem; }

@keyframes train-timer-pulse { to { transform: scale(1.06); text-shadow: 0 0 1.2rem rgba(251, 113, 133, 0.65); } }
@keyframes train-celebration-glow { to { transform: scale(1.08); opacity: 0.72; } }

@media (max-width: 760px) {
  .train-mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .train-game-main { padding-top: 0.8rem; }
}

@media (max-width: 480px) {
  .train-mode-card { padding: 0.9rem 0.7rem; }
  .train-mode-heading img { width: 70px; height: 70px; }
  .train-play-hud { gap: 0.25rem; }
  .train-hud-stat strong { font-size: clamp(1.8rem, 10vw, 2.65rem); }
  .train-play-topline { align-items: flex-start; }
  .train-play-topline p { text-align: right; }
  .train-instruction-panel { gap: 0.6rem; padding: 0.7rem; }
  .train-side-indicator { width: 2.2rem; }
  .train-instruction-panel img { width: 2.6rem; height: 2.6rem; }
  .train-results-actions { grid-template-columns: 1fr; }
}

/* Reusable active-game phone layout: complete board first, navigation restored outside play. */
@media (max-width: 600px) {
  .train-board-size-control { display: none; }
  .train-game-page[data-game-state="playing"] .bottom-nav { display: none; }
  .train-game-page[data-game-state="playing"] .app-footer { display: none; }
  .train-game-page[data-game-state="playing"] .train-game-main {
    min-height: 0;
    padding: 0.35rem max(0.5rem, env(safe-area-inset-right)) 0.5rem max(0.5rem, env(safe-area-inset-left));
  }
  .train-game-page[data-game-state="playing"] .train-play-screen { width: 100%; }
  .train-game-page[data-game-state="playing"] .train-play-topline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.28rem;
    margin-bottom: 0.3rem;
  }
  .train-game-page[data-game-state="playing"] .train-playing-title {
    grid-row: 1;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    flex-wrap: wrap;
  }
  .train-game-page[data-game-state="playing"] .train-playing-title strong { min-width: 0; overflow-wrap: anywhere; }
  .train-game-page[data-game-state="playing"] .train-play-actions {
    grid-row: 2;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .train-game-page[data-game-state="playing"] .train-game-back,
  .train-game-page[data-game-state="playing"] .train-stop-button { font-size: 0.67rem; }
  .train-game-page[data-game-state="playing"] .train-stop-button { padding: 0.25rem 0.5rem; }
  .train-game-page[data-game-state="playing"] .train-play-hud {
    gap: 0.2rem;
    margin-bottom: 0.22rem;
  }
  .train-game-page[data-game-state="playing"] .train-hud-stat { gap: 0.08rem; }
  .train-game-page[data-game-state="playing"] .train-hud-stat > span { font-size: 0.55rem; }
  .train-game-page[data-game-state="playing"] .train-hud-stat strong { font-size: clamp(1.35rem, 7vw, 1.75rem); }
  .train-game-page[data-game-state="playing"] .train-record-target {
    min-height: 0;
    margin: 0 0 0.2rem;
    font-size: 0.52rem;
    line-height: 1.2;
  }
  .train-game-page[data-game-state="playing"] .train-record-target:empty { display: none; }
  .train-game-page[data-game-state="playing"] .train-run-progress { height: 2px; margin-bottom: 0.3rem; }
  .train-game-page[data-game-state="playing"] .train-board-stage {
    width: min(100%, calc(100dvh - 16rem));
    margin-inline: auto;
  }
  .train-game-page[data-game-state="playing"] .train-board { border-radius: 0.5rem; }
  .train-game-page[data-game-state="playing"] .train-instruction-panel {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.55rem;
  }
  .train-game-page[data-game-state="playing"] .train-side-indicator { width: 1.9rem; }
  .train-game-page[data-game-state="playing"] .train-instruction-panel strong { font-size: 0.8rem; }
  .train-game-page[data-game-state="playing"] .train-instruction-panel p { margin-top: 0.08rem; font-size: 0.7rem; }
  .train-game-page[data-game-state="playing"] .train-instruction-panel small { margin-top: 0.08rem; font-size: 0.58rem; }
  .train-game-page[data-game-state="playing"] .train-instruction-panel img { display: none; }
  .train-playout-page[data-game-state="playing"] .train-play-screen { width: min(100%, var(--playout-board-size, 100%)); }
  .train-playout-page[data-game-state="playing"] .krk-status-bar { gap: 0.25rem; margin-bottom: 0.3rem; padding: 0.4rem 0.5rem; }
  .train-playout-page[data-game-state="playing"] .krk-status-stat strong { font-size: 1.35rem; }
  .train-playout-page[data-game-state="playing"] .krk-board-stage { width: 100%; }
  .train-playout-page[data-game-state="playing"] .krk-message { min-height: 1rem; margin-top: 0.25rem; font-size: 0.68rem; }
  .train-playout-page[data-game-state="playing"] .krk-controls { gap: 0.35rem; margin-top: 0.25rem; }
  .train-playout-page[data-game-state="playing"] .krk-controls .button { min-height: 2.2rem; padding: 0.4rem 0.3rem; font-size: 0.62rem; }
  .train-playout-page[data-game-state="playing"] .krk-best { margin-top: 0.25rem; font-size: 0.6rem; }
  .krk-mode-chooser { grid-template-columns: 1fr; gap: 0.4rem; margin-bottom: 0.4rem; padding: 0.45rem; }
  .krk-mode-chooser > strong { text-align: center; }
  .krk-mode-chooser .train-mode-card { min-height: 2.8rem; grid-template-columns: 1fr; justify-items: center; gap: 0.08rem; padding: 0.4rem; text-align: center; }
  .krk-mode-chooser .train-mode-card > strong { grid-row: auto; }
}

.fun-hero,
.beauty-hero {
  --hub-accent: var(--train-accent);
  border-color: rgba(var(--showcase-accent-rgb), 0.22);
}

.fun-hero {
  background: linear-gradient(120deg, rgba(25, 12, 23, 0.96), rgba(10, 8, 10, 0.92));
}

.beauty-hero {
  background: linear-gradient(120deg, rgba(10, 20, 24, 0.96), rgba(8, 10, 11, 0.92));
}

.fun-page :is(.recent-training-card, .training-catalog-card, .recommended-training-card),
.beauty-page :is(.recent-training-card, .training-catalog-card, .recommended-training-card) {
  border-color: rgba(var(--showcase-accent-rgb), 0.34);
}

.fun-page :is(.recent-training-card.is-live:hover, .training-catalog-card.is-live:hover, .recent-training-card.is-live:focus-visible, .training-catalog-card.is-live:focus-visible),
.beauty-page :is(.recent-training-card.is-live:hover, .training-catalog-card.is-live:hover, .recent-training-card.is-live:focus-visible, .training-catalog-card.is-live:focus-visible) {
  border-color: rgba(var(--showcase-accent-rgb), 0.62);
  background: rgba(var(--showcase-accent-rgb), 0.055);
  box-shadow: 0 0 0 2px rgba(var(--showcase-accent-rgb), 0.1);
}

.fun-page .training-catalog-card.is-most-recent {
  border-color: rgba(74, 210, 118, 0.48);
}
.fun-page .training-catalog-card.is-most-recent .train-action-primary {
  color: #031007;
  border-color: #4ad276;
  background: #4ad276;
  box-shadow: 0 0 1.1rem rgba(74, 210, 118, 0.22);
}

/* Registration / Create Account */
.register-page {
  background: radial-gradient(circle at 50% 12%, rgba(74, 210, 118, 0.085), transparent 34rem), var(--color-background);
}

.register-main {
  width: min(100%, 1120px);
  min-height: calc(100svh - 9.25rem);
  display: grid;
  align-items: center;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--page-gutter);
}

.register-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.register-kicker {
  margin: 0;
  color: var(--color-green);
  font-size: clamp(1.85rem, 4vw, 3.5rem);
  font-weight: 950;
  letter-spacing: 0.025em;
  line-height: 0.98;
  text-transform: uppercase;
}

.register-intro h1 {
  max-width: 34rem;
  margin: 1rem 0 0;
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.register-benefits {
  display: grid;
  gap: 0.8rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  color: var(--color-muted);
  list-style: none;
}

.register-benefits li { position: relative; padding-left: 1.8rem; line-height: 1.4; }
.register-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--color-green); font-weight: 900; }

.register-card {
  width: 100%;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-color: rgba(74, 210, 118, 0.22);
  background: rgba(9, 13, 10, 0.94);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.32);
}

.register-card form { display: grid; gap: 1rem; }
.register-field { display: grid; gap: 0.42rem; }
.register-field label { color: var(--color-text); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.register-field input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(170, 166, 157, 0.24);
  border-radius: 0.65rem;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.34);
  font: inherit;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.register-field input:hover { border-color: rgba(74, 210, 118, 0.42); }
.register-field input:focus { border-color: var(--color-green); background: rgba(5, 12, 7, 0.72); box-shadow: 0 0 0 3px rgba(74, 210, 118, 0.11); }

.register-primary-action {
  width: 100%;
  min-height: 3.25rem;
  margin-top: 0.35rem;
  border: 0;
  color: #021007;
  background: var(--color-green);
  box-shadow: 0 0 2rem rgba(74, 210, 118, 0.15);
  cursor: pointer;
}
.register-primary-action:hover { box-shadow: 0 0.8rem 2.2rem rgba(74, 210, 118, 0.18); }
.register-primary-action:active { transform: scale(0.985); }

.register-secondary-actions { display: grid; justify-items: center; gap: 0.85rem; margin-top: 1.25rem; text-align: center; }
.register-secondary-actions p { margin: 0; color: var(--color-muted); font-size: 0.82rem; }
.register-secondary-actions button,
.register-secondary-actions a { padding: 0; border: 0; color: var(--color-green); background: transparent; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.register-secondary-actions > a { color: var(--color-muted); font-size: 0.75rem; font-weight: 700; }
.register-secondary-actions button:hover,
.register-secondary-actions a:hover { color: var(--color-text); }

.registered-account-state {
  width: min(100%, 660px);
  justify-self: center;
  padding: clamp(2rem, 6vw, 4rem);
  border-color: rgba(74, 210, 118, 0.24);
  text-align: center;
}
.registered-account-icon { width: 3.25rem; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto 1.25rem; border-radius: 50%; color: #021007; background: var(--color-green); font-size: 1.5rem; font-weight: 950; }
.registered-account-state .register-kicker { font-size: clamp(1.35rem, 3.5vw, 2.35rem); }
.registered-account-state h1 { margin: 0.9rem 0 1.75rem; font-size: clamp(1.15rem, 2.5vw, 1.65rem); }
.registered-account-state .register-primary-action { width: fit-content; min-width: 12rem; margin: 0 auto; }

@media (max-width: 760px) {
  .register-main { align-items: start; padding-top: 1.5rem; padding-bottom: 3rem; }
  .register-shell { grid-template-columns: 1fr; gap: 1.6rem; }
  .register-intro { text-align: left; }
  .register-kicker { font-size: clamp(2rem, 10vw, 2.8rem); }
  .register-intro h1 { margin-top: 0.75rem; font-size: clamp(1.25rem, 6vw, 1.65rem); }
  .register-benefits { gap: 0.55rem; margin-top: 1.15rem; font-size: 0.88rem; }
  .register-card { padding: 1.2rem; }
  .register-field input { min-height: 3.35rem; }
}

/* Profile and account hub */
.profile-page { min-height: 100svh; }
.profile-main { width: min(100%, 1180px); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) var(--page-gutter) clamp(4rem, 8vw, 6rem); }
.profile-identity-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(310px, 0.7fr);
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding: clamp(1.5rem, 3.5vw, 2.8rem);
  background: radial-gradient(circle at 85% 15%, rgba(74, 210, 118, 0.1), transparent 38%), rgba(10, 14, 11, 0.92);
}
[data-profile-tier="premium"] .profile-identity-card,
.profile-page[data-profile-tier="premium"] .profile-identity-card { background: radial-gradient(circle at 85% 15%, rgba(213, 173, 82, 0.13), transparent 40%), rgba(14, 13, 9, 0.94); border-color: rgba(213, 173, 82, 0.24); }
.profile-avatar-column { display: grid; justify-items: center; gap: 0.75rem; }
.profile-avatar { width: clamp(5.6rem, 10vw, 8rem); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(74, 210, 118, 0.45); border-radius: 50%; background: rgba(74, 210, 118, 0.09); box-shadow: 0 0 2rem rgba(74, 210, 118, 0.16); }
.profile-avatar img { display: block; width: 100%; height: 100%; padding: 0.3rem; object-fit: contain; }
.profile-page[data-profile-tier="guest"] .profile-avatar { border-color: rgba(170, 166, 157, 0.32); background: rgba(170, 166, 157, 0.1); box-shadow: 0 0 1.5rem rgba(170, 166, 157, 0.08); }
.profile-page[data-profile-tier="premium"] .profile-avatar { border-color: rgba(213, 173, 82, 0.7); background: rgba(213, 173, 82, 0.11); box-shadow: 0 0 2rem rgba(213, 173, 82, 0.2); }
.profile-text-action { padding: 0; border: 0; color: var(--color-muted); background: transparent; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; }
.profile-text-action:hover { color: var(--color-green); }
.profile-text-action [data-avatar-premium-lock] { margin-right:.25rem;color:var(--color-gold);filter:drop-shadow(0 0 .45rem rgba(213,173,82,.45)); }
.profile-premium-dialog { position:relative;width:min(92vw,430px);padding:1.6rem;border:1px solid rgba(213,173,82,.52);border-radius:1rem;color:var(--color-text);background:radial-gradient(circle at 50% 0,rgba(213,173,82,.15),transparent 55%),#090d0a;box-shadow:0 1.5rem 5rem rgba(0,0,0,.8),0 0 2.5rem rgba(213,173,82,.14);text-align:center; }
.profile-premium-dialog::backdrop { background:rgba(0,0,0,.68);backdrop-filter:blur(4px); }
.profile-premium-dialog-close { position:absolute;top:.45rem;right:.55rem;width:2.3rem;height:2.3rem;border:0;color:var(--color-muted);background:transparent;font-size:1.5rem;cursor:pointer; }
.profile-premium-dialog-crown { display:block;margin:0 auto .55rem;color:var(--color-gold);font-size:2.2rem;filter:drop-shadow(0 0 .8rem rgba(213,173,82,.45)); }
.profile-premium-dialog h2 { margin:.25rem 0 0;color:var(--color-gold);font-size:clamp(1.4rem,5vw,2rem);line-height:1.05; }
.profile-premium-dialog > p:not(.section-kicker) { margin:.85rem auto 0;color:var(--color-muted);font-size:.9rem;line-height:1.5; }
.profile-premium-dialog-actions { display:flex;justify-content:center;gap:.65rem;margin-top:1.25rem; }
@media (max-width: 480px) { .profile-premium-dialog { width:calc(100vw - 24px);max-width:calc(100vw - 24px);padding:1.35rem 1rem;box-sizing:border-box; }.profile-premium-dialog-actions{align-items:stretch;flex-direction:column}.profile-premium-dialog-actions .button{width:100%} }
.profile-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.profile-name-row h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.04em; }
.profile-premium-badge { padding: 0.38rem 0.62rem; border: 1px solid rgba(213, 173, 82, 0.5); border-radius: 999px; color: #f0c95a; background: rgba(213, 173, 82, 0.1); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.profile-tier { display: inline-block; margin-top: 0.65rem; color: var(--color-green); font-size: 0.92rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.profile-page[data-profile-tier="guest"] .profile-tier { color: var(--color-muted); }
.profile-page[data-profile-tier="premium"] .profile-tier { color: var(--color-gold); }
.profile-guest-copy { max-width: 35rem; margin: 1rem 0 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.55; }
.profile-member-details { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.1rem; }
.profile-member-details > div { display: grid; grid-template-columns: auto auto; gap: 0.25rem 0.65rem; }
.profile-member-details span { grid-column: 1 / -1; color: var(--color-muted); font-size: 0.88rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-member-details strong { font-size: 0.95rem; }
.profile-member-details button { padding: 0; border: 0; color: var(--color-green); background: transparent; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 1rem; background: rgba(0, 0, 0, 0.22); }
.profile-stats > div { min-width: 0; display: grid; justify-items: center; gap: 0.25rem; padding: 1rem 0.65rem; text-align: center; }
.profile-stats > div + div { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.profile-stats strong { max-width: 100%; overflow: hidden; color: var(--color-text); font-size: clamp(1rem, 2vw, 1.5rem); text-overflow: ellipsis; }
.profile-stats small { color: var(--color-muted); font-size: 0.88rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-upgrade-card,
.profile-premium-summary { display: flex; align-items: center; gap: 1.15rem; margin-top: 1.2rem; padding: 1.25rem 1.5rem; border-color: rgba(213, 173, 82, 0.42); background: radial-gradient(circle at 8% 50%, rgba(213, 173, 82, 0.15), transparent 28%), linear-gradient(120deg, rgba(27, 22, 10, 0.96), rgba(10, 14, 11, 0.96)); box-shadow: 0 1.2rem 3rem -2.4rem rgba(213, 173, 82, 0.65); }
.profile-commercial-crown { flex: 0 0 auto; display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; color: var(--color-gold); border: 1px solid rgba(213, 173, 82, 0.4); border-radius: 50%; background: rgba(213, 173, 82, 0.09); font-size: 1.35rem; filter: drop-shadow(0 0 0.7rem rgba(213, 173, 82, 0.34)); }
.profile-upgrade-card > div,
.profile-premium-summary > div { min-width: 0; flex: 1 1 auto; }
.profile-upgrade-card h2,
.profile-premium-summary h2 { margin: 0.22rem 0 0; font-size: clamp(1.25rem, 2.3vw, 1.75rem); }
.profile-upgrade-card > div > p:last-child,
.profile-premium-summary > div > p:last-child { margin: 0.32rem 0 0; color: var(--color-muted); font-size: 0.82rem; line-height: 1.45; }
.profile-upgrade-card > .button { flex: 0 0 auto; min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: 1.25rem; text-decoration: none; }
.profile-premium-summary { background: radial-gradient(circle at 8% 50%, rgba(213, 173, 82, 0.18), transparent 30%), rgba(14, 13, 9, 0.96); }
.profile-premium-summary [data-profile-premium-entitlement] { color: var(--color-gold); font-weight: 800; }
.profile-content-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 1.2rem; margin-top: 1.2rem; }
.profile-section { padding: clamp(1.25rem, 2.7vw, 2rem); }
.profile-page .section-kicker { margin: 0; color: var(--color-green); font-size: 0.9rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.profile-section h2,
.profile-actions h2 { margin: 0.5rem 0 1.35rem; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.profile-preview-note { margin: -0.6rem 0 1.1rem; color: var(--color-muted); font-size: 0.76rem; line-height: 1.45; }
.achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.achievement-card { min-width: 0; padding: 0.9rem 0.72rem; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 0.8rem; background: rgba(0, 0, 0, 0.19); }
.achievement-card.is-unlocked { border-color: rgba(74, 210, 118, 0.28); background: rgba(74, 210, 118, 0.055); }
.achievement-card.is-locked { opacity: 0.43; filter: grayscale(1); }
.achievement-icon { width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #061109; background: var(--color-green); font-size: 0.7rem; font-weight: 950; }
.achievement-card h3 { min-height: 2.4em; margin: 0.65rem 0 0.35rem; font-size: 0.92rem; line-height: 1.25; }
.achievement-status { color: var(--color-muted); font-size: 0.88rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.achievement-card.is-unlocked .achievement-status { color: var(--color-green); }
.profile-records-grid { display: grid; gap: 0.62rem; }
.profile-record-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid rgba(213, 173, 82, 0.18); border-radius: 0.75rem; background: rgba(213, 173, 82, 0.035); }
.profile-record-card p { margin: 0; font-size: 0.94rem; font-weight: 750; }
.profile-record-game { color: var(--color-text); text-decoration: none; }
.profile-record-game:hover,
.profile-record-game:focus-visible { color: var(--color-gold); }
.profile-record-meta { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }
.profile-record-result { display: grid; grid-template-columns: auto auto; grid-template-areas: "icon value" "icon label"; align-items: center; column-gap: 0.45rem; }
.profile-record-result > span:first-child { grid-area: icon; }
.profile-record-result strong { grid-area: value; font-size: 1.35rem; line-height: 1; }
.profile-record-result > span:last-child { grid-area: label; color: var(--color-gold); font-size: 0.88rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.profile-record-rank { flex: 0 0 auto; color: var(--color-green); font-size: .72rem; font-weight: 900; letter-spacing: .07em; white-space: nowrap; }
.profile-record-play { display: inline-block; margin-left: .25rem; color: var(--color-gold); font-size: .68rem; line-height: 1; transform: translateY(-.02em); }
.profile-empty-state { display: grid; justify-items: center; gap: 0.7rem; padding: 2.25rem 1rem; color: var(--color-muted); text-align: center; }
.profile-empty-state span { font-size: 1.8rem; filter: grayscale(1); opacity: 0.45; }
.profile-empty-state p { max-width: 20rem; margin: 0; font-size: 0.8rem; line-height: 1.5; }
.profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.2rem; padding: 1.25rem 1.5rem; }
.profile-actions h2 { margin-bottom: 0; font-size: 1.25rem; }
.profile-action-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.65rem; }
.profile-action-buttons .button { min-height: 2.7rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; border-radius: 0.55rem; font-size: 0.9rem; text-decoration: none; }
.profile-primary-action { color: #041008; border-color: var(--color-green); background: var(--color-green); }
.profile-outline-action { color: var(--color-text); border: 1px solid rgba(74, 210, 118, 0.35); background: transparent; }
.profile-premium-action { color: #160e00; border-color: var(--color-gold); background: var(--color-gold); }
.profile-text-link { padding: 0.7rem; border: 0; color: var(--color-muted); background: transparent; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.profile-text-link:hover { color: var(--color-text); }

@media (max-width: 900px) {
  .profile-identity-card { grid-template-columns: auto minmax(0, 1fr); }
  .profile-stats { grid-column: 1 / -1; }
  .profile-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .app-header { overflow: visible; }
  .account-menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 0.7rem);
    right: 0;
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto;
  }
  .profile-main { padding-top: 1rem; padding-bottom: 6.5rem; }
  .profile-identity-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.15rem; }
  .profile-avatar { width: 4.8rem; font-size: 2rem; }
  .profile-name-row { gap: 0.45rem; }
  .profile-name-row h1 { font-size: clamp(1.4rem, 7vw, 2rem); }
  .profile-premium-badge { padding: 0.3rem 0.46rem; font-size: 0.5rem; }
  .profile-guest-copy { font-size: 0.78rem; }
  .profile-member-details { display: grid; gap: 0.65rem; }
  .profile-stats { grid-column: 1 / -1; }
  .profile-stats > div { padding: 0.75rem 0.35rem; }
  .profile-upgrade-card,
  .profile-premium-summary { align-items: flex-start; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.8rem; padding: 1rem; }
  .profile-commercial-crown { width: 2.35rem; font-size: 1.05rem; }
  .profile-upgrade-card > div,
  .profile-premium-summary > div { flex-basis: calc(100% - 3.2rem); }
  .profile-upgrade-card > .button { width: 100%; }
  .profile-content-grid { margin-top: 0.8rem; gap: 0.8rem; }
  .profile-section { padding: 1.05rem; }
  .profile-record-card { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .profile-record-meta { width: 100%; justify-content: space-between; gap: .55rem; }
  .profile-record-rank { margin-left: auto; font-size: .65rem; }
  .profile-record-play { font-size: .66rem; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .achievement-card { min-height: 7.1rem; }
  .profile-actions { align-items: stretch; flex-direction: column; gap: 1rem; margin-top: 0.8rem; }
  .profile-action-buttons { align-items: stretch; flex-direction: column; }
  .profile-action-buttons .button,
  .profile-text-link { width: 100%; min-height: 3rem; text-align: center; }
}

/* Screen 14 — Premium / Upgrade */
.upgrade-page { min-height: 100svh; background: radial-gradient(circle at 50% -8rem, rgba(213, 173, 82, 0.13), transparent 34rem), var(--color-background); }
.upgrade-main { width: min(100%, 1160px); display: grid; gap: clamp(2.8rem, 6vw, 5rem); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) var(--page-gutter) clamp(5.5rem, 9vw, 7rem); }
.upgrade-exit-nav { width:max-content; max-width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .7rem; margin-bottom:calc(-1 * clamp(2rem,4vw,3.5rem)); padding:.55rem .75rem; border:1px solid rgba(213,173,82,.22); border-radius:.65rem; background:rgba(5,10,7,.72); font-size:.68rem; font-weight:850; letter-spacing:.08em; }
.upgrade-exit-nav a { color:var(--color-muted); text-decoration:none; }
.upgrade-exit-nav a:first-child,.upgrade-exit-nav a:hover,.upgrade-exit-nav a:focus-visible { color:var(--color-gold); }
.upgrade-exit-nav span { color:rgba(255,255,255,.2); }
.upgrade-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.65fr); align-items: center; gap: 2rem; padding: clamp(1.6rem, 4.5vw, 3.8rem); border-color: rgba(213, 173, 82, 0.32); background: radial-gradient(circle at 82% 35%, rgba(213, 173, 82, 0.18), transparent 38%), linear-gradient(145deg, rgba(24, 20, 10, 0.97), rgba(8, 10, 8, 0.98)); box-shadow: 0 1.8rem 5rem -2.5rem rgba(213, 173, 82, 0.28); }
.upgrade-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 25%, rgba(255, 224, 135, 0.035) 45%, transparent 65%); }
.upgrade-hero-copy { position: relative; z-index: 1; }
.upgrade-kicker, .upgrade-section-heading > p { margin: 0; color: var(--color-gold); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.16em; text-transform: uppercase; }
.upgrade-hero h1 { max-width: 650px; margin: 0.65rem 0 0; font-size: clamp(2.4rem, 6.1vw, 5.2rem); line-height: 0.98; letter-spacing: -0.045em; }
.upgrade-lead { max-width: 36rem; margin: 1rem 0 0; color: #d2d2cc; font-size: clamp(0.98rem, 1.7vw, 1.2rem); line-height: 1.5; }
.upgrade-hero-action { margin-top: 1.7rem; }
.upgrade-primary-button { min-height: 3.15rem; color: #160e00; border-color: #e5bc58; background: linear-gradient(135deg, #f1d072, #cf9b2f); box-shadow: 0 0.8rem 2.5rem rgba(213, 173, 82, 0.18); cursor: pointer; }
.upgrade-profile-button { color: #160e00; border-color: #e5bc58; background: var(--color-gold); }
.upgrade-text-button { padding: 0.65rem 0.2rem; border: 0; color: var(--color-gold); background: transparent; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.upgrade-guest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; }
.upgrade-guest-actions p { flex-basis: 100%; margin: 0 0 0.15rem; color: var(--color-muted); font-size: 0.78rem; }
.upgrade-current-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem; }
.upgrade-current-status strong { flex-basis: 100%; color: #f0c95a; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: 0.06em; }
.upgrade-current-status span { color: var(--color-text); font-size: 0.85rem; }
.upgrade-current-status .button { margin-left: 0.25rem; }
.upgrade-hero-brand { position: relative; display: grid; place-items: center; }
.upgrade-hero-brand img { width: min(100%, 310px); height: auto; filter: drop-shadow(0 1.2rem 2.4rem rgba(0, 0, 0, 0.45)); }
.upgrade-hero-brand span { position: absolute; top: -0.5rem; right: 8%; display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(240, 201, 90, 0.5); border-radius: 50%; color: #f0c95a; background: rgba(16, 13, 6, 0.9); box-shadow: 0 0 2rem rgba(213, 173, 82, 0.22); }
.upgrade-section-heading { margin-bottom: 1.35rem; }
.upgrade-section-heading h2, .upgrade-pricing h2 { margin: 0.45rem 0 0; font-size: clamp(1.55rem, 3.4vw, 2.65rem); letter-spacing: -0.03em; }
.premium-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.premium-benefit-card { min-width: 0; display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.05rem; border: 1px solid rgba(213, 173, 82, 0.16); border-radius: 0.85rem; background: linear-gradient(145deg, rgba(19, 17, 11, 0.9), rgba(10, 12, 10, 0.9)); }
.premium-benefit-card > span { flex: 0 0 auto; width: 2.3rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 0.6rem; background: rgba(213, 173, 82, 0.09); font-size: 1.15rem; }
.premium-benefit-card h3 { margin: 0; color: #f0e7cd; font-size: 0.93rem; }
.premium-benefit-card p { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 0.73rem; line-height: 1.45; }
.upgrade-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0.8rem; }
.comparison-card { position: relative; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.022); }
.comparison-card h3 { margin: 0; font-size: 1.1rem; }
.comparison-card ul { display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.comparison-card li { position: relative; padding-left: 1.25rem; color: var(--color-muted); font-size: 0.78rem; line-height: 1.38; }
.comparison-card li::before { content: "✓"; position: absolute; left: 0; color: #858a82; font-weight: 900; }
.comparison-free { border-color: rgba(74, 210, 118, 0.17); background: rgba(74, 210, 118, 0.025); }
.comparison-free h3, .comparison-free li::before { color: var(--color-green); }
.comparison-premium { border-color: rgba(213, 173, 82, 0.48); background: radial-gradient(circle at 85% 0, rgba(213, 173, 82, 0.14), transparent 42%), rgba(19, 16, 9, 0.88); box-shadow: 0 1.4rem 3.6rem -2.4rem rgba(213, 173, 82, 0.42); }
.comparison-premium h3, .comparison-premium li::before { color: #f0c95a; }
.comparison-premium li { color: #d2d0c7; }
.comparison-best { display: inline-flex; margin-bottom: 0.7rem; padding: 0.28rem 0.48rem; border: 1px solid rgba(213, 173, 82, 0.35); border-radius: 999px; color: var(--color-gold); background: rgba(213, 173, 82, 0.075); font-size: 0.5rem; font-weight: 950; letter-spacing: 0.12em; }
.upgrade-pricing { display: grid; grid-template-columns: minmax(190px, 0.85fr) minmax(320px, 1.2fr); gap: 1rem 2rem; padding: clamp(1.35rem, 3.5vw, 2.3rem); border-color: rgba(213, 173, 82, 0.22); background: linear-gradient(145deg, rgba(18, 16, 10, 0.94), rgba(9, 11, 9, 0.94)); }
.upgrade-pricing > div:first-child { grid-row: span 2; }
.upgrade-pricing > div:first-child > p:last-child { margin: 0.65rem 0 0; color: var(--color-muted); font-size: 0.78rem; }
.upgrade-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.upgrade-plan { display: grid; gap: 0.3rem; padding: 0.8rem; border: 1px solid rgba(213, 173, 82, 0.16); border-radius: 0.65rem; background: rgba(0, 0, 0, 0.18); }
.upgrade-plan strong { font-size: 0.8rem; }
.upgrade-plan span { color: var(--color-gold); font-size: 0.58rem; font-weight: 800; text-transform: uppercase; }
.upgrade-plan b{font-size:clamp(1.35rem,3vw,2rem);color:#fff}.upgrade-plan small{color:var(--color-gold);font-weight:900}.upgrade-plan button{min-height:2.5rem;border:1px solid rgba(213,173,82,.3);border-radius:.5rem;color:#999;background:#17150f;font-weight:900;cursor:not-allowed}.upgrade-plan.is-featured{border-color:#f0c95a;box-shadow:0 0 1.8rem rgba(213,173,82,.18);transform:translateY(-.25rem)}.upgrade-code{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem}.upgrade-code form{display:flex;gap:.6rem}.upgrade-code input{min-width:min(310px,55vw);padding:.8rem;border:1px solid rgba(213,173,82,.35);border-radius:.55rem;color:#fff;background:#070907}.arcade-streak-freeze{margin:.65rem 0 0;color:#bde7ff;font-weight:800}.streak-freeze-dialog{width:min(440px,calc(100vw - 24px));box-sizing:border-box;padding:1.5rem;border:1px solid rgba(213,173,82,.45);border-radius:1rem;color:#fff;background:#08110d;text-align:center}.streak-freeze-dialog::backdrop{background:rgba(0,0,0,.78)}.streak-freeze-close{position:absolute;top:.5rem;right:.7rem;border:0;color:#aaa;background:none;font-size:1.5rem}.streak-freeze-icons{font-size:2.4rem}.streak-freeze-dialog h2{color:#f0c95a}.streak-freeze-dialog p{line-height:1.5}
.upgrade-pricing-action { display: flex; align-items: center; }
.upgrade-purchase-note { grid-column: 1 / -1; margin: 0.25rem 0 0; color: #71746f; font-size: 0.64rem; }

@media (max-width: 760px) {
  .upgrade-main { gap: 2.6rem; padding-top: 1rem; }
  .upgrade-hero { grid-template-columns: 1fr; gap: 1.1rem; }
  .upgrade-hero-brand { grid-row: 1; }
  .upgrade-hero-brand img { width: min(62vw, 230px); }
  .upgrade-hero-brand span { right: 18%; width: 2.4rem; }
  .upgrade-hero-copy { text-align: center; }
  .upgrade-lead { margin-inline: auto; }
  .upgrade-guest-actions, .upgrade-current-status { justify-content: center; }
  .premium-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upgrade-comparison { grid-template-columns: 1fr; }
  .comparison-card { padding: 1rem 1.1rem; }
  .comparison-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upgrade-pricing { grid-template-columns: 1fr; }
  .upgrade-pricing > div:first-child { grid-row: auto; }
  .upgrade-purchase-note { grid-column: auto; }
}

@media (max-width: 480px) {
  .upgrade-main { gap: 2.2rem; padding-bottom: 6.5rem; }
  .upgrade-hero { padding: 1.25rem 1rem 1.4rem; }
  .upgrade-hero h1 { font-size: clamp(2.05rem, 11vw, 3rem); }
  .upgrade-hero-brand img { width: min(58vw, 205px); }
  .upgrade-primary-button, .upgrade-profile-button { width: 100%; }
  .upgrade-guest-actions, .upgrade-current-status { align-items: stretch; flex-direction: column; }
  .upgrade-current-status .button { margin-left: 0; }
  .premium-benefit-grid { grid-template-columns: 1fr; gap: 0.55rem; }
  .premium-benefit-card { padding: 0.85rem; }
  .comparison-card ul { grid-template-columns: 1fr; }
  .upgrade-plan-list { grid-template-columns: 1fr; }
  .upgrade-plan { display: flex; align-items: center; justify-content: space-between; }
  .upgrade-plan{flex-wrap:wrap}.upgrade-plan b{width:100%}.upgrade-plan button{width:100%}.upgrade-code,.upgrade-code form{align-items:stretch;flex-direction:column}.upgrade-code input{width:100%;min-width:0;box-sizing:border-box}
}

/* Premium sales-page finishing layer. */
.upgrade-main { width: min(100%, 1240px); gap: clamp(3.4rem, 7vw, 6rem); }
.upgrade-hero { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(2rem, 4vw, 4rem); padding: clamp(2rem, 4vw, 4rem); }
.upgrade-hero h1 { max-width: 720px; font-size: clamp(2.75rem, 5.4vw, 5.6rem); }
.upgrade-heritage { max-width: 42rem; margin: 1rem 0 0; color: #f0c95a; font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 850; line-height: 1.35; }
.upgrade-lead { max-width: 44rem; font-size: clamp(1rem, 1.35vw, 1.16rem); }
.upgrade-hero-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem 1.3rem; margin: 1.45rem 0 0; padding: 0; list-style: none; }
.upgrade-hero-benefits li { position: relative; padding-left: 1.35rem; color: #eee9db; font-size: .9rem; font-weight: 720; line-height: 1.4; }
.upgrade-hero-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--color-green); font-weight: 950; }
.upgrade-method { margin: 1.5rem 0 0; padding: .9rem 1rem; border-left: 3px solid #f0c95a; color: #fff5d3; background: rgba(213,173,82,.08); font-size: clamp(.94rem,1.35vw,1.08rem); font-weight: 850; line-height: 1.5; }
.upgrade-hero-brand { align-self: center; }
.upgrade-hero-brand img { width: min(100%, 470px); max-height: 520px; aspect-ratio: 1; object-fit: contain; border: 3px solid #e7bd50; border-radius: 1.35rem; box-shadow: 0 0 0 6px rgba(213,173,82,.1),0 1.8rem 5rem rgba(0,0,0,.5),0 0 2.8rem rgba(213,173,82,.2); }
.premium-benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.premium-benefit-card { min-height: 168px; gap: 1.1rem; padding: clamp(1.35rem,2.5vw,2rem); border-radius: 1.05rem; }
.premium-benefit-card.is-featured { grid-column: 1/-1; min-height: 210px; align-items: center; border-color: rgba(240,201,90,.55); background: radial-gradient(circle at 90% 0,rgba(213,173,82,.18),transparent 42%),linear-gradient(145deg,rgba(27,22,10,.97),rgba(8,13,9,.96)); box-shadow: 0 1.5rem 4rem -2.5rem rgba(213,173,82,.5); }
.premium-benefit-card > span { width: 3.7rem; border-radius: .9rem; font-size: 2rem; }
.premium-benefit-card.is-featured > span { width: 5rem; font-size: 2.8rem; }
.premium-benefit-card h3 { font-size: clamp(1.15rem,2vw,1.5rem); }
.premium-benefit-card strong { display: block; margin-top: .5rem; color: #f0c95a; font-size: clamp(1.35rem,2.6vw,2rem); }
.premium-benefit-card p { margin-top: .65rem; font-size: clamp(.9rem,1.3vw,1rem); line-height: 1.55; }
.upgrade-pricing { display: block; padding: clamp(1.6rem,4vw,3.2rem); }
.upgrade-pricing > div:first-child { text-align: center; }
.upgrade-pricing > div:first-child > p:last-child { font-size: .95rem; }
.upgrade-plan-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.upgrade-plan { position: relative; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .8rem; width: 100%; padding: 1.7rem 1.25rem; border: 1px solid rgba(213,173,82,.25); border-radius: 1rem; color: inherit; background: rgba(0,0,0,.22); font: inherit; text-align: center; cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.upgrade-plan:hover { transform: translateY(-3px); border-color: rgba(240,201,90,.6); }
.upgrade-plan.is-featured { transform: none; }
.upgrade-plan.is-featured:not(.is-selected) { border-color: rgba(213,173,82,.25); box-shadow: none; }
.upgrade-plan.is-selected { transform: translateY(-5px); border: 2px solid #f0c95a; background: linear-gradient(155deg,rgba(52,40,12,.78),rgba(10,12,9,.95)); box-shadow: 0 1.2rem 3rem -1.4rem rgba(213,173,82,.55),inset 0 0 2rem rgba(213,173,82,.08); }
.upgrade-plan-badge { min-height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; padding: .35rem .7rem; border-radius: 999px; color: #1b1200!important; background: #f0c95a; font-size: .68rem!important; font-weight: 950!important; letter-spacing: .08em; }
.upgrade-plan strong { margin-top: .3rem; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; }
.upgrade-plan b { margin-top: .6rem; font-size: clamp(2rem,4vw,3.25rem); line-height: 1.05; }
.upgrade-plan small { display: block; color: #f0c95a; font-size: .86rem; font-weight: 900; line-height: 1.4; }
.upgrade-pricing-action { display: grid; place-items: center; gap: .85rem; margin-top: 1.6rem; padding: 1.25rem; border-top: 1px solid rgba(213,173,82,.2); text-align: center; }
.upgrade-pricing-action strong { color: #f8edcd; font-size: clamp(1rem,2vw,1.25rem); letter-spacing: .045em; }
.upgrade-pricing-action button { min-width: min(100%,360px); min-height: 3.35rem; border: 1px solid rgba(213,173,82,.45); border-radius: .7rem; color: #a29b89; background: #17150f; font: inherit; font-size: .78rem; font-weight: 950; letter-spacing: .09em; cursor: not-allowed; }
.upgrade-code { opacity: .94; border-color: rgba(213,173,82,.24); }

@media (min-width: 1300px) {
  .upgrade-hero { width: min(calc(100vw - 64px),1660px); margin-left: calc(50% - min(calc(50vw - 32px),830px)); grid-template-columns: minmax(0,1.7fr) minmax(330px,.7fr); align-items: start; }
  .upgrade-hero h1 { width: min(1100px,calc(100vw - 180px)); max-width: none; font-size: clamp(4.6rem,4.4vw,5.2rem); }
  .upgrade-hero-brand { align-self: end; margin-top: clamp(11rem,14vw,15rem); justify-self: end; }
  .upgrade-hero-brand img { width: min(100%,410px); }
}

@media (max-width: 760px) {
  .upgrade-hero { grid-template-columns: 1fr; }
  .upgrade-hero-brand { grid-row: 1; }
  .upgrade-hero-copy { text-align: left; }
  .upgrade-hero-brand img { width: min(82vw,330px); max-height: 330px; aspect-ratio: 1; object-fit: contain; }
  .upgrade-hero-benefits { grid-template-columns: 1fr; }
  .upgrade-lead { margin-inline: 0; }
}
@media (max-width: 620px) {
  .ctart-books-promo { grid-template-columns:1fr; }
  .ctart-books-promo h2 { max-width:none; }
  .ctart-books-promo-art { grid-row:1; }
  .ctart-books-promo-copy .button { width:100%; text-align:center; }
  .books-main { padding-top:1.1rem; }
  .book-product-grid { grid-template-columns:1fr; }
  .book-product-art { min-height:19rem; padding:1rem; }
  .book-product-art > img { max-width:min(74%,17rem); max-height:23rem; }
  .book-pack-art { min-height:18rem; grid-template-columns:minmax(0,1.55fr) minmax(0,.78fr); gap:.45rem; padding:.75rem; }
  .book-volume-stack { gap:.3rem; }
  .book-sample-grid { gap:.4rem; }
  .book-sample span { right:.25rem; bottom:.25rem; padding:.27rem .32rem; font-size:.42rem; }
  .book-sample-dialog { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; }
  .book-sample-dialog header { grid-template-columns:minmax(0,1fr) auto auto; gap:.55rem; padding-left:.7rem; }
  .book-sample-dialog h2 { font-size:.72rem; }
  .book-sample-reader { padding:.4rem 2.65rem; }
  .book-sample-arrow { width:2.25rem; height:3.25rem; border-radius:.55rem; font-size:1.9rem; }
  .book-sample-arrow-previous { left:.22rem; }
  .book-sample-arrow-next { right:.22rem; }
  .books-sold-separately { border-radius:.7rem; }
  .upgrade-main { gap: 3rem; }
  .upgrade-hero { padding: 1.2rem; }
  .upgrade-hero h1 { font-size: clamp(2.25rem,11vw,3.35rem); }
  .upgrade-heritage { font-size: 1rem; }
  .upgrade-hero-brand img { width: min(82vw,320px); max-height: 320px; border-width: 2px; border-radius: .9rem; }
  .premium-benefit-grid { grid-template-columns: 1fr; }
  .premium-benefit-card.is-featured { grid-column: auto; min-height: 0; }
  .premium-benefit-card,.premium-benefit-card.is-featured { min-height: 0; align-items: flex-start; padding: 1.25rem; }
  .premium-benefit-card > span,.premium-benefit-card.is-featured > span { width: 3.4rem; font-size: 1.75rem; }
  .upgrade-plan-list { grid-template-columns: 1fr; }
  .upgrade-plan { min-height: 225px; align-items: center; justify-content: flex-start; padding: 1.35rem; }
  .upgrade-plan b { width: auto; }
}

/* Screen 13 — reusable prototype leaderboards. */
.leaderboards-page { background: radial-gradient(circle at 50% -8%, rgba(74, 210, 118, 0.09), transparent 34rem), var(--color-background); }
.leaderboards-main { width: min(100%, 980px); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) var(--page-gutter) clamp(5.5rem, 9vw, 7rem); }
.leaderboards-context-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; }
.leaderboards-context-nav a { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.025em; text-decoration: none; }
.leaderboards-back-link { color: var(--color-text); }
.leaderboards-world-link { color: var(--color-muted); }
.leaderboards-context-nav a:hover, .leaderboards-context-nav a:focus-visible { color: var(--color-green); }
.leaderboards-hero { margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.leaderboards-hero > p { margin: 0; color: var(--color-green); font-size: 0.85rem; font-weight: 950; letter-spacing: 0.12em; }
.leaderboards-hero h1 { margin: 0.35rem 0 0; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.04em; }
.leaderboards-game-hero > span { display: block; margin-top: 0.2rem; color: var(--color-text); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 750; }
.leaderboards-panel { padding: clamp(1rem, 2.8vw, 1.75rem); }
.leaderboards-mode-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.leaderboards-mode-tabs button { min-height: 2.35rem; padding: 0.48rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: var(--color-muted); background: rgba(255, 255, 255, 0.025); font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.leaderboards-mode-tabs button[aria-selected="true"] { color: #041008; border-color: var(--color-green); background: var(--color-green); }
.leaderboard-column-headings { display: grid; grid-template-columns: 2.7rem 2.6rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 0 0.9rem 0.45rem; color: var(--color-muted); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.leaderboard-column-headings span:nth-child(2) { grid-column: 2 / 4; }
.leaderboard-column-headings span:last-child { text-align: right; }
.leaderboard-list { display: grid; gap: 0.25rem; }
.leaderboard-empty { margin: 1.5rem 0 0.5rem; padding: 1.25rem; border: 1px dashed rgba(74, 210, 118, 0.24); border-radius: 0.75rem; color: var(--color-muted); background: rgba(74, 210, 118, 0.025); text-align: center; font-size: 0.9rem; }
.development-label { border-color: rgba(234, 179, 8, 0.3); color: #e8bd58; background: rgba(234, 179, 8, 0.06); }
.leaderboard-row { min-width: 0; display: grid; grid-template-columns: 2.7rem 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.45rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 0.58rem; background: rgba(255, 255, 255, 0.018); }
.leaderboard-row.is-current { border-color: rgba(74, 210, 118, 0.5); background: rgba(74, 210, 118, 0.075); box-shadow: inset 3px 0 var(--color-green); }
.leaderboard-row.is-premium { background-image: linear-gradient(90deg, rgba(213, 173, 82, 0.045), transparent 42%); }
.leaderboard-row:nth-child(1) { border-color: rgba(213, 173, 82, 0.3); background-color: rgba(213, 173, 82, 0.045); }
.leaderboard-row:nth-child(2) { border-color: rgba(205, 210, 218, 0.2); }
.leaderboard-row:nth-child(3) { border-color: rgba(190, 125, 72, 0.2); }
.leaderboard-rank { color: var(--color-muted); font-size: 0.92rem; text-align: center; }
.leaderboard-row:nth-child(-n+3) .leaderboard-rank { font-size: 1.15rem; }
.leaderboard-avatar { width: 2.25rem; aspect-ratio: 1; display: block; padding: 0.1rem; border: 1px solid rgba(74, 210, 118, 0.27); border-radius: 50%; background: rgba(74, 210, 118, 0.07); object-fit: contain; }
.leaderboard-row.is-premium .leaderboard-avatar { border-color: rgba(213, 173, 82, 0.55); background: rgba(213, 173, 82, 0.08); }
.leaderboard-player { min-width: 0; }
.leaderboard-player { display: flex; align-items: center; gap: 0.5rem; }
.leaderboard-player > strong { overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-country-flag { flex: 0 0 auto; font-size: 0.85rem; }
.leaderboard-score { min-width: 4.2rem; display: grid; justify-items: end; }
.leaderboard-score strong { color: var(--color-text); font-size: 1.18rem; font-variant-numeric: tabular-nums; line-height: 1; }
.leaderboard-score span { margin-top: 0.18rem; color: var(--color-green); font-size: 0.55rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.leaderboard-current { margin-top: 1rem; }
.leaderboard-current > p { margin: 0 0 0.45rem; color: var(--color-gold); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; }
.leaderboard-current .leaderboard-row { border-color: rgba(213, 173, 82, 0.35); background: rgba(213, 173, 82, 0.055); box-shadow: inset 3px 0 var(--color-gold); }
.leaderboards-play-action { display: flex; justify-content: center; margin-top: 1.15rem; }
.leaderboards-play-action .button-primary { min-width: min(100%, 14rem); margin-top: 0; text-align: center; text-decoration: none; }
.leaderboards-guest-join { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(74, 210, 118, 0.2); border-radius: 0.75rem; background: rgba(74, 210, 118, 0.045); }
.leaderboards-guest-join strong { font-size: 0.95rem; }
.leaderboards-guest-join p { margin: 0.3rem 0 0; color: var(--color-muted); font-size: 0.78rem; }
.leaderboards-guest-join .button { flex: 0 0 auto; text-decoration: none; }

@media (max-width: 600px) {
  .leaderboards-main { padding-top: 1.3rem; }
  .leaderboards-context-nav { justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
  .leaderboards-context-nav a { font-size: 0.72rem; }
  .leaderboards-hero { margin-bottom: 1.2rem; }
  .leaderboards-panel { padding: 0.75rem; }
  .leaderboards-mode-tabs button { flex: 1 1 calc(25% - 0.45rem); padding-inline: 0.35rem; }
  .leaderboard-column-headings { grid-template-columns: 2rem 2rem minmax(0, 1fr) auto; gap: 0.4rem; padding-inline: 0.35rem; }
  .leaderboard-row { grid-template-columns: 1.8rem 2rem minmax(0, 1fr) auto; gap: 0.4rem; padding: 0.42rem 0.4rem; }
  .leaderboard-avatar { width: 2rem; }
  .leaderboard-player > strong { font-size: 0.8rem; }
  .leaderboard-score { min-width: 3.25rem; }
  .leaderboard-score strong { font-size: 1.08rem; }
  .leaderboards-guest-join { align-items: stretch; flex-direction: column; }
  .leaderboards-guest-join .button { width: 100%; text-align: center; }
}

/* Consistent result columns for records and recent leaderboard activity. */
.profile-record-meta { flex: 0 0 15rem; display: grid; grid-template-columns: minmax(0, 1fr) 4.8rem; }
.profile-record-result { grid-template-columns: 1.35rem minmax(0, 1fr); }
.profile-record-result > span:last-child { overflow-wrap: anywhere; }
.profile-record-rank { text-align: right; }
[data-recent-scores] a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.recent-score-flag { width: 1.5rem; text-align: center; }
.recent-score-details { min-width: 0; overflow-wrap: anywhere; }
[data-recent-scores] a > strong { text-align: right; white-space: nowrap; }
@media(max-width: 700px) { .profile-record-meta { flex-basis: auto; width: 100%; } }

/* Results: cancel the hero CTA margin and stretch all actions equally. */
.train-results-actions { align-items:stretch; grid-auto-rows:1fr; }
.train-results-actions > .button { margin:0; width:100%; height:auto; align-self:stretch; box-sizing:border-box; text-align:center; }

/* Compact mobile catalog and consistent shared controls. */
.training-catalog-actions .train-action { min-height: 44px; padding: .65rem .9rem; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; }
.language-trigger { display: inline-flex; align-items: center; justify-content: center; }
.language-trigger > span[aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto; }
.header-controls :is(.sound-toggle, .header-leaderboard) { align-items: center; justify-content: center; line-height: 1; }
@media (max-width: 600px) {
 .training-catalog-card.has-thumbnail { gap: .35rem; min-height: 0; }
 .training-catalog-card.has-thumbnail .training-card-thumbnail { max-height: 140px; object-fit: contain; }
 .training-catalog-card.has-thumbnail .training-catalog-content { padding: .7rem .9rem .9rem; gap: .6rem; }
 .training-catalog-card .training-catalog-actions { gap: .5rem; }
}

/* Endgame action rows: primary buttons must not inherit hero margins. */
.train-playout-page[data-game-state] .krk-controls { align-items: stretch; }
.train-playout-page[data-game-state] .krk-controls .button { margin: 0; width: 100%; min-height: 44px; height: 100%; padding: .65rem .45rem; line-height: 1.25; box-sizing: border-box; text-align: center; }

.language-trigger svg { display: block; color: #46b8e8; }

/* October Android feedback: scoped mobile layout and portable flags. */
.country-flag { display:inline-block;width:22px;height:16px;vertical-align:middle;flex-shrink:0; }
.catalog-back { display:inline-flex;margin-bottom:1rem;color:var(--color-muted);text-decoration:none; }
@media(max-width:600px) {
  .app-footer.mobile-footer-hidden { display:none; }
  .sign-in-page .sign-in-brand, .register-page .register-brand { display:none; }
}

/* Mobile language selection lives in Settings. */
@media(max-width:760px){.app-header .header-language{display:none!important}}

/* Three recent activities share one layout on desktop and phones. */
.home-hero-history { display:grid; gap:.65rem; margin-top:1.2rem; }
.home-hero-history-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); align-items:center; gap:.8rem; padding:.75rem; border:1px solid rgba(74,210,118,.24); border-radius:.75rem; background:rgba(74,210,118,.04); }
.home-hero-history-item > strong { min-width:0; font-size:1rem; line-height:1.35; overflow-wrap:anywhere; }
.play-hero .home-hero-history-item .button { max-width:100%; margin:0; padding:.65rem .8rem; font-size:.68rem; letter-spacing:.03em; text-align:center; overflow-wrap:anywhere; }
@media(max-width:600px) {
  .home-hero-history-item { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.55rem; padding:.65rem; }
  .home-hero-history-item > strong { font-size:.85rem; }
  .play-hero .home-hero-history-item .button { width:100%; font-size:.62rem; padding:.6rem .45rem; }
}

/* CKL locales: keep language selection reachable and chess coordinates stable. */
.language-picker { max-height: min(75dvh, 38rem); overflow-y: auto; overscroll-behavior: contain; }
.language-picker-option { text-align: start; }
html[dir="rtl"] body { font-family: Arial, "Geeza Pro", "Noto Sans Arabic", "Noto Sans Hebrew", sans-serif; }
html[dir="rtl"] :is(h1,h2,h3,h4,button) { letter-spacing: normal; }
html[dir="rtl"] :is(input[type="email"],input[type="url"],input[type="password"],input[type="number"],pre,code,[data-language-code]) { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] :is(.ckb,.ckb-frame,.ckb-files,.ckb-ranks,[data-board],[data-pattern-board],#board,.files,.ranks,.queens-beam-page #demo,.kj-stage) { direction:ltr; }
html[lang="ja"] body { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
html[lang="ko"] body { font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
html[lang="zh"], html[lang="zh-HK"] { --font-body: "PingFang TC", "PingFang SC", "Microsoft JhengHei", sans-serif; }