/* Base mobile-first styles shared by all games. Games override via their own CSS. */
:root {
  --bg: #1b1530; --panel: #2a2145; --panel-2: #3a2e5e; --ink: #fff; --muted: #b9b0d6;
  --accent: #ffcf3b; --accent-ink: #3a2a00; --good: #4ade80; --bad: #f87171;
  --radius: 16px; --font: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font);
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent; user-select: none;
  -webkit-user-select: none; touch-action: manipulation;
}
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow: hidden; }
canvas { display: block; touch-action: none; }

.btn {
  font: inherit; font-weight: 800; font-size: 16px; color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 14px; padding: 12px 18px; min-height: 44px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .06s, filter .15s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn[disabled], .btn.off { filter: grayscale(.8) brightness(.7); cursor: default; }
.btn.ghost { background: var(--panel-2); color: var(--ink); }

.panel { background: var(--panel); border-radius: var(--radius); padding: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }

#vgs-toasts { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 70px); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; z-index: 1000; pointer-events: none; }
.vgs-toast { background: rgba(0,0,0,.8); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 700;
  animation: vgs-in .25s ease-out; transition: opacity .3s, transform .3s; }
.vgs-toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes vgs-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }