:root {
  --bg: #edf3fb;
  --surface: #ffffff;
  --surface-alt: #f1f6fe;
  --border: #d6e2f1;
  --text: #19324d;
  --muted: #5f7692;
  --blue: #2b7de9;
  --green: #25b46b;
  --gold: #f7b731;
  --pink: #ef5da8;
  --purple: #7d5cff;
  --teal: #09b6b6;
  --orange: #f28b30;
  --danger: #d74a4a;
  --shadow: 0 16px 40px rgba(31, 65, 114, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(43, 125, 233, 0.1), transparent 32%),
    linear-gradient(180deg, #f7fbff 0%, #eaf1fb 100%);
  color: var(--text);
}

a,
button,
input {
  font: inherit;
}

.page-shell {
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto;
  padding: 20px 0 48px;
}

.topbar,
.hero,
.subject-card,
.practice-card,
.dashboard-card,
.pin-panel,
.arcade-tile,
.play-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  margin-bottom: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand__badge {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue), #58a3ff);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}

.brand__eyebrow,
.hero__eyebrow,
.section__eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.brand h1,
.hero h2,
.section__header h3,
.play-area__header h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
}

.topnav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.hero {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 18px;
  padding: 24px;
}

.hero__content h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  margin-top: 8px;
}

.hero__text,
.subject-card p,
.practice-card p,
.pin-panel__text,
.arcade-tile p,
.game-help,
.memory-status {
  color: var(--muted);
}

.hero__actions,
.scoreboard,
.arcade-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.button,
.tile-button {
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.button:hover,
.tile-button:hover {
  transform: translateY(-1px);
}

.button--primary,
.tile-button {
  background: linear-gradient(135deg, var(--blue), #62a9ff);
  color: #fff;
  padding: 13px 20px;
  box-shadow: 0 12px 24px rgba(43, 125, 233, 0.2);
}

.button--ghost {
  background: var(--surface-alt);
  color: var(--text);
  padding: 13px 20px;
}

.button--small {
  padding: 10px 16px;
}

.hero__panel {
  display: grid;
  gap: 14px;
}

.summary-card {
  background: linear-gradient(180deg, #f6faff, #edf4fe);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
}

.summary-card span,
.dashboard-card__label {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.summary-card strong,
.dashboard-card strong {
  font-size: 1.4rem;
}

.section {
  margin-top: 20px;
}

.section__header {
  margin-bottom: 14px;
}

.subject-grid,
.practice-grid,
.dashboard-grid {
  display: grid;
  gap: 14px;
}

.subject-grid,
.practice-grid,
.dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.subject-card,
.practice-card,
.dashboard-card {
  padding: 18px;
}

.subject-card__tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eaf2ff;
  color: var(--blue);
  font-weight: 800;
  font-size: 0.82rem;
}

.practice-card--blue { background: linear-gradient(180deg, #f0f7ff, #ffffff); }
.practice-card--green { background: linear-gradient(180deg, #edfdf4, #ffffff); }
.practice-card--gold { background: linear-gradient(180deg, #fff7e6, #ffffff); }
.practice-card--pink { background: linear-gradient(180deg, #fff0f7, #ffffff); }

.access-section {
  padding-bottom: 6px;
}

.pin-panel {
  padding: 20px;
}

.pin-panel__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
}

.pin-form {
  display: flex;
  gap: 10px;
  margin: 16px 0 10px;
  flex-wrap: wrap;
}

.pin-form input {
  min-width: 220px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  outline: none;
}

.pin-form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(43, 125, 233, 0.14);
}

.pin-message {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}

.arcade-toolbar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.arcade-toolbar__stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
}

.arcade-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.arcade-tile {
  padding: 10px;
  min-height: 182px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arcade-tile.active {
  border-color: rgba(43, 125, 233, 0.6);
  box-shadow: 0 0 0 3px rgba(43, 125, 233, 0.12);
}

.arcade-tile__thumb {
  width: 100%;
  aspect-ratio: 1.45 / 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.arcade-tile__thumb--teal { background: linear-gradient(135deg, var(--teal), #52d6d6); }
.arcade-tile__thumb--blue { background: linear-gradient(135deg, var(--blue), #67b0ff); }
.arcade-tile__thumb--orange { background: linear-gradient(135deg, var(--orange), #ffb15c); }
.arcade-tile__thumb--purple { background: linear-gradient(135deg, var(--purple), #a08bff); }
.arcade-tile__thumb--green { background: linear-gradient(135deg, var(--green), #5ad68f); }
.arcade-tile__thumb--red { background: linear-gradient(135deg, var(--danger), #f57f7f); }
.arcade-tile__thumb--pink { background: linear-gradient(135deg, var(--pink), #ff8cc2); }

.arcade-tile h4 {
  margin: 0;
  font-size: 0.98rem;
}

.arcade-tile p {
  margin: 0;
  font-size: 0.88rem;
  flex: 1;
}

.tile-button,
.tile-note {
  align-self: flex-start;
}

.tile-note {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.play-area {
  padding: 18px;
}

.play-area__header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}

.score-pill {
  min-width: 110px;
  background: var(--surface-alt);
  border-radius: 16px;
  padding: 12px 14px;
}

.score-pill span {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
  font-size: 0.88rem;
}

.game-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rush-shell {
  width: min(100%, 420px);
  position: relative;
}

.rush-board {
  position: relative;
  width: 100%;
}

.rush-hud {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 800;
}

.rush-menu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 2;
}

.rush-menu.is-hidden {
  display: none;
}

.rush-menu__card {
  background:
    radial-gradient(circle at top left, rgba(124, 255, 202, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(124, 139, 255, 0.22), transparent 32%),
    linear-gradient(180deg, rgba(42, 19, 86, 0.92), rgba(89, 15, 118, 0.92));
  color: #fff;
  border-radius: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 50px rgba(34, 11, 72, 0.45);
  backdrop-filter: blur(8px);
}

.rush-menu__eyebrow {
  margin: 0 0 8px;
  color: #9fd1ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 800;
}

.rush-menu__card h4,
.rush-menu__card p {
  margin-top: 0;
}

.rush-levels {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rush-level-button {
  min-width: 52px;
}

.rush-level-button.active {
  background: linear-gradient(135deg, #ef5da8, #ff95cb);
  box-shadow: 0 12px 24px rgba(239, 93, 168, 0.24);
}

#georush-canvas {
  border-radius: 20px;
  border: 1px solid rgba(171, 181, 255, 0.35);
  box-shadow: 0 14px 34px rgba(66, 23, 133, 0.28);
}

.waves-shell {
  width: min(100%, 420px);
}

.waves-toolbar,
.waves-levels {
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.waves-toolbar {
  justify-content: space-between;
  color: var(--muted);
  font-weight: 800;
}

.waves-levels .waves-level-button {
  min-width: 44px;
  padding: 10px 14px;
}

.waves-levels .waves-level-button.active {
  background: linear-gradient(135deg, #ef5da8, #ff95cb);
  box-shadow: 0 12px 24px rgba(239, 93, 168, 0.24);
}

.is-hidden {
  display: none;
}

canvas {
  width: min(100%, 420px);
  max-width: 420px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #06111e;
}

.memory-status {
  width: min(100%, 420px);
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
}

.memory-grid {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.quiz-panel,
.puzzler-panel {
  width: min(100%, 420px);
  background: var(--surface-alt);
  border-radius: 18px;
  padding: 16px;
}

.quiz-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 800;
}

.quiz-options,
.puzzler-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quiz-option,
.puzzler-cell {
  border: none;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  font-weight: 800;
}

.quiz-option {
  background: linear-gradient(135deg, var(--blue), #67b0ff);
  color: #fff;
}

.puzzler-grid {
  grid-template-columns: repeat(4, 1fr);
}

.puzzler-cell {
  aspect-ratio: 1 / 1;
  background: #cad8ea;
}

.puzzler-cell.is-lit {
  background: linear-gradient(135deg, #ffe77a, #ffb84f);
}

.merge-panel {
  width: min(100%, 420px);
  background: #bbd0ea;
  border-radius: 18px;
  padding: 10px;
}

.merge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.merge-cell {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.45);
  color: #38506d;
}

.merge-cell[data-value="0"] { background: rgba(255, 255, 255, 0.4); color: transparent; }
.merge-cell[data-value="2"] { background: #f2f6fb; }
.merge-cell[data-value="4"] { background: #e4effc; }
.merge-cell[data-value="8"] { background: #ffd59b; color: #6a3b00; }
.merge-cell[data-value="16"] { background: #ffbc70; color: #5b3000; }
.merge-cell[data-value="32"] { background: #ff9a74; color: #5c1900; }
.merge-cell[data-value="64"] { background: #ff7f7f; color: #ffffff; }
.merge-cell[data-value="128"] { background: #ffe17e; color: #5d4a00; font-size: 1rem; }
.merge-cell[data-value="256"] { background: #b0ec8e; color: #1f4f12; font-size: 1rem; }
.merge-cell[data-value="512"] { background: #7fdad7; color: #0d4b4c; font-size: 1rem; }
.merge-cell[data-value="1024"] { background: #83b6ff; color: #143a6d; font-size: 0.92rem; }
.merge-cell[data-value="2048"] { background: #8e7cff; color: #ffffff; font-size: 0.92rem; }

.memory-card {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #edf3fe, #dfeafb);
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

.memory-card.is-revealed,
.memory-card.is-matched {
  background: linear-gradient(180deg, #58a3ff, #2b7de9);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .subject-grid,
  .practice-grid,
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arcade-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .topbar,
  .play-area__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 600px) {
  .page-shell {
    width: calc(100% - 16px);
    padding-top: 12px;
  }

  .subject-grid,
  .practice-grid,
  .dashboard-grid,
  .arcade-grid {
    grid-template-columns: 1fr;
  }

  .topbar,
  .hero,
  .pin-panel,
  .play-area {
    padding: 16px;
  }

  .pin-form input {
    min-width: 100%;
  }
}