/* ==================== CORE BASE ==================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

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

button, input, select, textarea {
  font-family: inherit;
}

:root {
  /* Tech-blue palette extracted from banner-bg.jpg (Kick-off 2026) */
  --kahoot-purple: #041436;       /* base background (deep navy) */
  --kahoot-purple-light: #0a4aad; /* primary saturated blue */
  --kahoot-red: #E21B3C;
  --kahoot-blue: #1660c5;         /* royal blue (mid gradient) */
  --kahoot-yellow: #D89E00;
  --kahoot-green: #26890C;
  --kahoot-dark: #020b1e;         /* darker base for contrast */
  --kahoot-bg: #041436;
  --accent-cyan: #4dc9f6;         /* primary bright accent */
  --accent-cyan-bright: #00bfff;  /* punchier cyan for focus states */
  --accent-cyan-soft: #7dd3fc;    /* soft glow / thin lines */
  --white: #FFFFFF;
  --shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--kahoot-purple);
  color: var(--white);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ==================== SHARED BACKGROUNDS ==================== */
.kahoot-bg {
  position: relative;
  background: linear-gradient(135deg, #020b1e 0%, #0a4aad 40%, #1660c5 60%, #041436 100%);
  overflow: hidden;
}

.kahoot-bg::before,
.kahoot-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.kahoot-bg::before {
  width: 60vw;
  height: 60vw;
  top: -20vw;
  right: -15vw;
  background: radial-gradient(circle, rgba(77, 201, 246, 0.22) 0%, rgba(4, 20, 54, 0) 70%);
}

.kahoot-bg::after {
  width: 50vw;
  height: 50vw;
  bottom: -15vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(10, 74, 173, 0.4) 0%, rgba(4, 20, 54, 0) 70%);
}

.kahoot-bg > * {
  position: relative;
  z-index: 1;
}

/* Tech blue grid overlay */
.tech-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 191, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 191, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}