/* Owlcade "Nocturne" theme, the same tokens as the hub (owlcade.com), for every game. A game adds its
   own signature colour on top (gold for Only Gold Matter, teal ore for Void Haul). Inter is served
   by the game itself (the CSP allows fonts from its own site only). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter.woff2') format('woff2');
}

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-800: #423a6a;

  --gold: #ffc629;
  --gold-soft: #ffe27a;
  --teal: #4fd1c5;
  --danger: #e07a73;

  --glass: rgba(22, 24, 38, 0.88);
  --font: 'Inter', system-ui, sans-serif;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 0 0 1px #3f424d;
  --gutter: clamp(18px, 5vw, 64px);
}

* { box-sizing: border-box; }
button { font-family: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons, as on the hub — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--radius-md);
  border: 1px solid var(--color-divider); background: transparent;
  color: var(--color-text); text-decoration: none; cursor: pointer;
}
.btn:hover { background: rgba(233, 233, 237, 0.07); }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: rgba(145, 132, 217, 0.12); color: var(--color-accent-300); }
.btn-sm { font-size: 13px; font-weight: 400; padding: 5px 12px; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* — FR/EN toggle and the BETA tag — */
.seg { display: flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg button { font: inherit; font-size: 12px; background: transparent; color: var(--color-neutral-400); border: none; padding: 5px 10px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--color-divider); }
.seg button.on { background: var(--color-accent-800); color: var(--color-accent-100); }
.beta-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 4px;
  color: var(--color-accent); border: 1px solid var(--color-accent);
}
.beta-tag[hidden] { display: none; }