/* Global element defaults; everything else is scoped to modules. */
:global(*),
:global(*::before),
:global(*::after) {
  box-sizing: border-box;
}

:global(body) {
  margin: 0;
}

.app {
  /* Design tokens, inherited by all components. */
  --bg: #0f0c24;
  --bg-elevated: #1a1640;
  --bg-sunken: #0a081a;
  --surface: #231d52;
  --border: #3a3278;
  --text: #ece9ff;
  --text-muted: #a49fcc;
  --accent: #8b6cff;
  --accent-strong: #a58cff;
  --gold: #ffd166;
  --danger: #ff6b7a;
  --success: #4fd18b;
  --suit-red: #e5484d;
  --suit-yellow: #f2b90d;
  --suit-green: #2fa46c;
  --suit-blue: #3e7bfa;
  --radius: 12px;
  --shadow: 0 10px 30px rgb(0 0 0 / 35%);
  --font: system-ui, 'Segoe UI', Roboto, sans-serif;

  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at top, rgb(109 74 255 / 25%), transparent 60%),
    radial-gradient(ellipse at bottom, rgb(255 209 102 / 8%), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 16px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

.banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 8px 16px;
  background: #5b2330;
  color: #ffe1e6;
  text-align: center;
  font-size: 14px;
}