/* Shared Theme: Unifies mini game aesthetics (pixel headings + clean rounded UI) */
:root {
  --bg-deep:#0b2f73;
  --bg:#0f4bb3;
  --bg-alt:#0c3f59;
  --panel:#1d5fa8;
  --panel-dark:#0d3d6b;
  --panel-soft:#0b6b94;
  --surface:#f6efe6;
  --surface-alt:#e9f1ff;
  --text-dark:#0e2450;
  --text-mid:#26314e;
  --text-light:#f8fbff;
  --accent:#ffc23c;
  --accent-mint:#71d79f;
  --accent-coral:#ff6b5f;
  --danger:#ff5a58;
  --success:#2ac56c;
  --focus-ring:#ffe497;
}

html,body { background: radial-gradient(1200px 800px at 65% 5%, #1e64ff22, transparent 60%), linear-gradient(180deg,var(--bg),var(--bg-deep)); }

body { -webkit-font-smoothing:antialiased; font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.pixel, .game-title { font-family:'Press Start 2P', monospace; letter-spacing:0.5px; text-shadow:0 2px 0 #0004; }
.game-title { font-size: clamp(22px, 4vw, 34px); margin:0 0 .5rem; text-align:center; color:var(--text-light); }

/* Unified buttons */
.btn, button.btn, .primary, .secondary { font-family:inherit; font-weight:900; cursor:pointer; transition:transform .1s ease, box-shadow .15s ease; }
.btn, .btn.primary, .btn.secondary { border-radius:18px; }
.btn { background:var(--panel); color:var(--text-light); border:3px solid var(--panel-dark); box-shadow:0 6px 0 var(--panel-dark); padding:10px 18px; font-size:14px; }
.btn.primary { background:var(--accent); border-color:#d9a62d; box-shadow:0 6px 0 #9a6b00; color:#522f00; }
.btn.secondary { background:var(--surface-alt); color:var(--text-dark); border:3px solid #c7ddff; box-shadow:0 6px 0 #9ec0ff; }
.btn:active, .primary:active, .secondary:active { transform:translateY(2px); box-shadow:0 4px 0 rgba(0,0,0,.35); }
.btn:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }

/* Panel utility */
.panel { background:var(--surface); border:4px solid #e7d9c7; border-radius:20px; box-shadow:0 8px 0 #c4b29a, 0 18px 28px #0002; padding:18px 20px; color:var(--text-mid); }

/* Score / HUD pill */
.hud-pill { background:#0b2f73; color:#fff; border-radius:14px; padding:8px 12px; border:3px solid #092760; box-shadow:inset 0 2px 0 #183b8e; font-weight:800; font-size:14px; }

/* Consistent focus for interactive elements */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }

/* Card style adaptation (used in Clarity + hub) */
.card-unified { background:var(--surface); border:4px solid #e7d9c7; border-radius:22px; box-shadow:0 10px 0 #c4b29a, 0 18px 28px #00000022; }

/* Generic badge */
.badge-unified { display:inline-block; background:var(--accent); color:#522f00; font-weight:900; font-size:12px; padding:6px 12px; border-radius:40px; border:3px solid #ffe497; box-shadow:0 6px 0 #9a6b00; }

/* Shared fade-in */
.fade-in { animation:fadeIn .4s ease-out; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

/* Reduced motion tweaks */
@media (prefers-reduced-motion: reduce) { .fade-in, .btn, .move-btn { animation:none !important; transition:none !important; }
}