/* Science Arcade — theme: SUAD palette, local fonts. */

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../assets/fonts/aktiv-grotesk-regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../assets/fonts/aktiv-grotesk-medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../assets/fonts/aktiv-grotesk-bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../assets/fonts/aktiv-grotesk-xbold.ttf') format('truetype');
  font-weight: 800;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../assets/fonts/aktiv-grotesk-black.ttf') format('truetype');
  font-weight: 900;
}
@font-face {
  font-family: 'Pixel';
  src: url('../assets/fonts/press-start-2p.ttf') format('truetype');
  font-weight: 400;
}

:root {
  /* SUAD palette */
  --sky: #54b8e5;
  --navy: #002376;
  --red: #de3831;
  --gold: #ffad0a;

  /* answer buttons — cyan / amber / violet / coral (never Kahoot colors) */
  --ans-cyan: #17b3d4;
  --ans-amber: #f5a623;
  --ans-violet: #7c5ce0;
  --ans-coral: #f0645c;

  --ink: #f2f6ff;
  --ink-dim: #a9b6d9;
  --panel-bg: rgba(4, 12, 40, 0.82);
  --panel-line: rgba(120, 170, 255, 0.35);

  /* edge-safe margin: triple-mirrored letterboxing keeps content off edges */
  --safe: 4.2vmin;

  --font-ui: 'Aktiv Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-pixel: 'Pixel', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #04102e;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

img { -webkit-user-drag: none; }

.hidden { display: none !important; }

.panel {
  background: var(--panel-bg);
  border: 2px solid var(--panel-line);
  border-radius: 1.4vmin;
  box-shadow: 0 0.7vmin 2.4vmin rgba(0, 0, 0, 0.45);
}

.panel-title {
  font-family: var(--font-pixel);
  font-size: clamp(12px, 2vmin, 26px);
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.08em;
  padding: 1.6vmin 1vmin 1.2vmin;
}

.gold-text { color: var(--gold); }