/* Shared Mindmazing game theme. Game-specific play pieces keep their own colors. */
:root { color-scheme: dark; }
body[data-game] {
  background: radial-gradient(ellipse 70% 35% at 70% 0, #30235188, transparent 75%), #090d19 !important;
  color: #f6f7ff !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body[data-game] :is(button, a, input, select):focus-visible { outline: 3px solid #61e6c6; outline-offset: 3px; }
body[data-game] :is(.card, .panel) { background: linear-gradient(155deg, #192139, #11182a); border-color: #30384e; box-shadow: 0 24px 65px #0004; }
body[data-game] :is(.eyebrow, .label) { color: #61e6c6; }
body[data-game] :is(.btn:not(.secondary):not(.ghost):not(.alt):not(.outline):not(.pink), button.primary) { background: linear-gradient(110deg, #a98fff, #77e7d6); color: #0b1020; box-shadow: none; }
body[data-game] :is(.btn.secondary, .btn.ghost, .btn.alt, .btn.outline, button.secondary) { background: #1c253a; border: 1px solid #3b455d; color: #eae9fb; }
body[data-game] :is(select, input:not([type=range])) { background: #101729; border-color: #3b455d; color: #f6f7ff; }
body[data-game] :is(.pill, .chip, .tag, .badge) { background: #1b2338; border: 1px solid #3b455d; color: #cbd4e7; }
body[data-game] :is(.foot, .footer) { color: #8f9bb4; }
body[data-game] :is(.btn, button.primary, button.secondary) { transition: transform .2s, filter .2s; }
body[data-game] :is(.btn, button.primary, button.secondary):hover:not(:disabled) { filter: brightness(1.08); }

/* Color Memory uses a full-bleed color during the memorization phase. */
body[data-game="color-memory"] main, body[data-game="color-memory"] .controls { background: #090d19; }
body[data-game="color-memory"] .top { border-bottom: 1px solid #283044; }
body[data-game="color-memory"] .stage:not(#memorize) { background: radial-gradient(ellipse at center, #211b3c 0, #090d19 70%); }
body[data-game="color-memory"] .controls { border-left: 1px solid #30384e; }
body[data-game="color-memory"] .preview-label { color: white; }

body[data-game="number-flash"] .key { background: #222d45; border-color: #46536c; }
body[data-game="number-flash"] .key:active { background: #5d518f; }
body[data-game="shape-memory"] { --panel: #121a2b; --border: #30384e; --accent: #a58cff; --muted: #a5afc6; }
body[data-game="shape-memory"] :is(.stage, .preview) { background: #202a40; border-color: #46536c; }
body[data-game="shape-memory"] .shape { filter: brightness(1.5); }
body[data-game="pattern-memory"] { --panel: #121a2b; --border: #30384e; --accent: #a58cff; --muted: #a5afc6; }
body[data-game="haptic-memory"] { --panel2: #1c253a; --line: #354057; --muted: #a5afc6; --accent: #a58cff; }

/* These games were originally designed on light surfaces. */
body[data-game="echo-sculptor"] :is(.hero p, .stage p, .settings label, .how p, .roundscore),
body[data-game="sound-memory"] :is(.hero p, .hint, label, .fineprint),
body[data-game="synesthesia"] :is(.hero p, .sub, .modeCard small) { color: #aeb9d0; }
body[data-game="echo-sculptor"] :is(.stat, .tip, .num, .review span),
body[data-game="sound-memory"] :is(.stat, .slot),
body[data-game="synesthesia"] :is(.tips, .display, .choice, .modeCard, .breakdown span) { background: #1b253b; border-color: #39455c; color: #e7eafb; }
body[data-game="echo-sculptor"] :is(.stat b, .message, .result),
body[data-game="sound-memory"] :is(.stat b, .count, .message),
body[data-game="synesthesia"] :is(.score, .count, .audioChoice) { color: #bdaaff; }
body[data-game="echo-sculptor"] :is(.stat small, .tip),
body[data-game="sound-memory"] .stat small { color: #aeb9d0; }
body[data-game="echo-sculptor"] .progress, body[data-game="sound-memory"] .progress, body[data-game="synesthesia"] .progress { background: #2b354b; }
body[data-game="echo-sculptor"] .slot { border-color: #59647d; color: #cbd4e7; }
body[data-game="echo-sculptor"] .slot.filled, body[data-game="sound-memory"] .slot.filled { background: #40365d; border-color: #a58cff; color: #f6f7ff; }
body[data-game="echo-sculptor"] .review .good, body[data-game="synesthesia"] .feedback.good { background: #16483f; color: #a0f1d7; }
body[data-game="echo-sculptor"] .review .bad, body[data-game="synesthesia"] .feedback.bad { background: #542b40; color: #ffc1d3; }
body[data-game="sound-memory"] .hero h1 { background-image: linear-gradient(100deg, #ad95ff, #f090ca, #6be9d0); }
body[data-game="sound-memory"] .sound { background: color-mix(in srgb, var(--bg) 18%, #1b253b); border-color: color-mix(in srgb, var(--accent) 45%, #39455c); color: #f6f7ff; }
body[data-game="sound-memory"] .sound:active, body[data-game="sound-memory"] .sound.active { border-color: var(--accent); }
body[data-game="sound-memory"] .btn.pink { background: #f080b8; color: #181326; }
body[data-game="synesthesia"] .modeCard.active, body[data-game="synesthesia"] .choice.selected { background: #40365d; border-color: #b19aff; color: #fff; }
body[data-game="synesthesia"] .choice:hover:not(:disabled) { background: #2b3450; border-color: #b19aff; }
body[data-game="synesthesia"] .choice.correct { background: #16483f; border-color: #61e6c6; }
body[data-game="synesthesia"] .choice.wrong { background: #542b40; border-color: #ff80a8; }
body[data-game="synesthesia"] :is(.feedback, .breakdown span) { background: #292440; color: #d5caff; }
body[data-game="synesthesia"] .muteNote { color: #ffb0ce; }
@media (max-width: 799px) { body[data-game="color-memory"] .controls { border-left: 0; border-top: 1px solid #30384e; } }
@media (prefers-reduced-motion: reduce) { body[data-game] *, body[data-game] *::before, body[data-game] *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

/* Keep the active board and its controls close together on phones. Content can
   still grow and the document can scroll when the viewport or text requires it. */
body[data-game] [hidden] { display: none !important; }
@media (max-width: 600px) {
  body[data-game] :is(.shell, .wrap, .app) { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  body[data-game] :is(.btn, button.primary, button.secondary) { min-height: 44px; }

  body[data-game="color-memory"] main { min-height: calc(100dvh - 40px); }
  body[data-game="color-memory"] .top { padding: 12px 16px; }
  body[data-game="color-memory"] .stage { padding: 16px; }
  body[data-game="color-memory"] .preview { min-height: clamp(115px, 25dvh, 230px); }
  body[data-game="color-memory"] .controls { padding: 14px 18px 20px; }
  body[data-game="color-memory"] .controls p { margin-bottom: 10px !important; }
  body[data-game="color-memory"] .control { margin: 10px 0 14px; }
  body[data-game="color-memory"] .primary { margin-top: 8px; }
  body[data-game="color-memory"] .result-swatches { margin: 14px 0; }
  body[data-game="color-memory"] .swatch { height: clamp(90px, 18dvh, 145px); }

  body[data-game="number-flash"] .app { min-height: calc(100dvh - 40px); padding-top: 12px; }
  body[data-game="number-flash"] .main { padding: 14px 0; }
  body[data-game="number-flash"] .card { padding: 18px; }
  body[data-game="number-flash"] .keyboard { gap: 7px; margin: 10px 0; }
  body[data-game="number-flash"] .key { min-height: 48px; }
  body[data-game="number-flash"] .answer { padding: 10px 8px; }
  body[data-game="number-flash"] .number { margin: 28px -10px; }

  body[data-game="shape-memory"] .top { margin-bottom: 10px; }
  body[data-game="shape-memory"] .panel { padding: 14px; }
  body[data-game="shape-memory"] :is(#memorize, #edit) .stage {
    width: min(100%, clamp(200px, 32dvh, 330px));
    min-height: 200px; aspect-ratio: 1.35; margin: 8px auto;
  }
  body[data-game="shape-memory"] #edit .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  body[data-game="shape-memory"] #edit .choice { min-height: 44px; }
  body[data-game="shape-memory"] #edit .hint { margin: 6px 0; }

  body[data-game="pattern-memory"] .shell { min-height: calc(100dvh - 40px); padding-top: 12px; }
  body[data-game="pattern-memory"] .main { padding: 12px 0; }
  body[data-game="pattern-memory"] .progress { margin-top: 10px; }
  body[data-game="pattern-memory"] .card { padding: 16px; }
  body[data-game="pattern-memory"] .heading { margin: 6px 0; }
  body[data-game="pattern-memory"] .sub { margin: 6px 0; }
  body[data-game="pattern-memory"] .grid { width: min(100%, clamp(280px, 43dvh, 420px)); margin: 10px auto; gap: 5px; }
  body[data-game="pattern-memory"] .timer { font-size: 27px; }
  body[data-game="pattern-memory"] .hint { margin: 8px 0; }

  body[data-game="haptic-memory"] .shell { padding-top: 12px; }
  body[data-game="haptic-memory"] .progress { margin: 10px 0; }
  body[data-game="haptic-memory"] .card { padding: 16px; }
  body[data-game="haptic-memory"] #game .orb { width: clamp(76px, 13dvh, 110px); height: clamp(76px, 13dvh, 110px); margin: 10px auto; font-size: 38px; }
  body[data-game="haptic-memory"] #game .big { font-size: 44px; margin: 4px 0; }
  body[data-game="haptic-memory"] #game .keys { margin-top: 10px; }
  body[data-game="haptic-memory"] #game .key { height: clamp(75px, 13dvh, 110px); }
  body[data-game="haptic-memory"] #game .tap { height: clamp(100px, 18dvh, 160px); }
  body[data-game="haptic-memory"] #game .sequence { margin: 8px 0; }
  body[data-game="haptic-memory"] #game .actions { margin-top: 10px; }

  body[data-game="echo-sculptor"] .shell { padding-top: 12px; }
  body[data-game="echo-sculptor"] .shell:has(#settings[hidden]) :is(.hero, .sidebar) { display: none; }
  body[data-game="echo-sculptor"] .game { min-height: 0; }
  body[data-game="echo-sculptor"] .panel { padding: 15px; }
  body[data-game="echo-sculptor"] .progress { margin: 10px 0; }
  body[data-game="echo-sculptor"] .stage { padding: 4px 0; }
  body[data-game="echo-sculptor"] .stage h2 { margin: 6px 0; }
  body[data-game="echo-sculptor"] .stage p { margin-bottom: 8px; }
  body[data-game="echo-sculptor"] .orb { width: clamp(72px, 12dvh, 100px); height: clamp(72px, 12dvh, 100px); font-size: 36px; margin-bottom: 6px; }
  body[data-game="echo-sculptor"] .pad { min-height: 64px; }

  body[data-game="sound-memory"] .shell { padding-top: 12px; }
  body[data-game="sound-memory"] .shell:has(#game:not(.hidden)) .hero { display: none; }
  body[data-game="sound-memory"] .panel { margin-top: 0; padding: 15px; }
  body[data-game="sound-memory"] .stat { padding: 8px; }
  body[data-game="sound-memory"] .progress { margin: 10px 0; }
  body[data-game="sound-memory"] .headline { margin: 6px 0; }
  body[data-game="sound-memory"] .hint { margin: 6px 0; }
  body[data-game="sound-memory"] .soundgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
  body[data-game="sound-memory"] .sound { min-height: 68px; padding: 6px 2px; }
  body[data-game="sound-memory"] .sound .emoji { font-size: 24px; }
  body[data-game="sound-memory"] .sound b { font-size: 11px; }
  body[data-game="sound-memory"] .slots { margin: 8px 0; }
  body[data-game="sound-memory"] .actions { margin-top: 8px; }

  body[data-game="synesthesia"] .wrap { padding-top: 12px; }
  body[data-game="synesthesia"] .wrap:has(#game:not(.hidden)) .hero { display: none; }
  body[data-game="synesthesia"] .panel { padding: 15px; }
  body[data-game="synesthesia"] .stats { margin-bottom: 10px; }
  body[data-game="synesthesia"] .progress { margin-bottom: 10px; }
  body[data-game="synesthesia"] .stageTitle { font-size: 20px; margin-bottom: 4px; }
  body[data-game="synesthesia"] .sub { margin: 5px 0; }
  body[data-game="synesthesia"] .display { min-height: clamp(95px, 15dvh, 160px); margin: 8px auto; }
  body[data-game="synesthesia"] .display svg { width: 80px; height: 80px; }
  body[data-game="synesthesia"] .phaseIcon { font-size: 36px; }
  body[data-game="synesthesia"] .choices { gap: 7px; margin-top: 8px; }
  body[data-game="synesthesia"] .choice { min-height: 58px; padding: 5px; }
  body[data-game="synesthesia"] .choice svg { width: 48px; height: 48px; }
  body[data-game="synesthesia"] .soundBtn { min-height: 58px; }
  body[data-game="synesthesia"] .audioChoice { font-size: 21px; gap: 2px; }
  body[data-game="synesthesia"] .actions { margin-top: 10px; }
}

/* Keep the game name and its category visible throughout each game. */
body[data-game] .game-title-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
body[data-game] .game-title-header .game-title {
  margin: 0; color: #f6f7ff; font-size: 16px; line-height: 1.3;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
body[data-game] .game-sense {
  flex-shrink: 0; border: 1px solid #3b455d; border-radius: 99px;
  background: #1b2338; color: #cbd4e7; padding: 8px 13px;
  font-size: 13px; line-height: 1.3; font-weight: 400;
}
body[data-game] .game-status { display: inline-block; margin: 0 0 12px; }
body[data-game] .game-status:empty { display: none; }

/* Echo Sculptor: align its original light interface with the shared game theme. */
body[data-game="echo-sculptor"] .hero h1 span {
  background-image: linear-gradient(100deg, #ad95ff, #f090ca, #6be9d0);
}
body[data-game="echo-sculptor"] .progress div {
  background: linear-gradient(110deg, #a98fff, #77e7d6);
}
body[data-game="echo-sculptor"] .orb {
  background: radial-gradient(circle at 30% 25%, #d8beff, #8a6ae6 60%, #55458f);
  color: #fff; box-shadow: 0 18px 40px #0005;
}
body[data-game="echo-sculptor"] .orb.pulse {
  box-shadow: 0 0 0 18px #a58cff30, 0 18px 40px #0005;
}
body[data-game="echo-sculptor"] .pad {
  color: #f6f7ff; box-shadow: inset 0 -4px 0 #0003;
}
body[data-game="echo-sculptor"] .pad[data-tone="0"] { background: #604fa7; border-color: #ad95ff; }
body[data-game="echo-sculptor"] .pad[data-tone="1"] { background: #9a426c; border-color: #f090ca; }
body[data-game="echo-sculptor"] .pad[data-tone="2"] { background: #286c65; border-color: #6be9d0; }
body[data-game="echo-sculptor"] .pad[data-tone="3"] { background: #865323; border-color: #ffbd76; }
body[data-game="echo-sculptor"] .pad.lit {
  filter: brightness(1.4); outline: 4px solid #d5caff80;
}
body[data-game="echo-sculptor"] .message { color: #d5caff; }