/* Base styles, design tokens, buttons, game modes. */
:root {
  --brand: #1f6fe5; --brand-d: #1554b8; --brand-soft: #e8f0fd; /* Buea Life blue */ --ink: #0f1d33; --muted: #5d6a80; --gold: #f5b301; --soft: #f1f4f9;
  --ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fc8e8; font-family: system-ui, sans-serif;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
canvas { display: block; touch-action: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.btn-primary { border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: 700 16px var(--ui); padding: 14px 26px; cursor: pointer; box-shadow: 0 6px 18px rgba(31,111,229,.35); transition: transform .12s, background .2s, opacity .2s; }
.btn-primary:hover:not(:disabled) { background: var(--brand-d); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn-primary.sm { padding: 9px 18px; font-size: 14px; }
.btn-primary.lg, .btn-ghost.lg { padding: 17px 34px; font-size: 18px; }
.btn-ghost { border: 2px solid rgba(255,255,255,.85); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: 700 16px var(--ui); padding: 14px 26px; cursor: pointer; backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.25); }

/* modes: only show the game HUD while playing */
body:not(.mode-play) :is(#minimap, #touchUI, #joy, #place, #prompt, #speedo, #aerialBtn, #topbar, #bigmap) { display: none !important; }
body:not(.mode-menu) #welcome { display: none; }