/* =========================================================================
   theme.css — shared design system for the whole arcade.
   Every page (menu, lobby, in-game menus) uses these tokens + components so
   the menu look stays consistent. Game-specific styles live in the
   game's own folder; do not fork these components, extend them.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap");

:root {
  /* Surfaces */
  --qg-bg: #f4f5f6;
  --qg-bg-stripe: #eceef0;
  --qg-surface: #ffffff;
  --qg-surface-2: #f8f9fa;
  --qg-line: #d5d9dd;
  --qg-line-soft: #e6e9ec;

  /* Text */
  --qg-text: #4a4f55;
  --qg-text-soft: #8a9097;
  --qg-text-faint: #b4b9be;

  /* Signature blue (hover glow, focus, primary) */
  --qg-blue: #34beed;
  --qg-blue-deep: #0d9ad3;
  --qg-blue-soft: #d9f3fc;
  --qg-glow: 0 0 0 3px rgba(52, 190, 237, .55), 0 0 18px rgba(52, 190, 237, .55);

  /* Player colors (P1–P4) */
  --p1: #2fa8e0;
  --p2: #e8524a;
  --p3: #43b649;
  --p4: #f5b722;

  /* Shape + depth */
  --qg-radius: 18px;
  --qg-radius-lg: 28px;
  --qg-radius-pill: 999px;
  --qg-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 6px 14px rgba(60, 70, 80, .12);
  --qg-shadow-lg: 0 10px 30px rgba(60, 70, 80, .18);

  --qg-font: "M PLUS Rounded 1c", "Nunito", "Arial Rounded MT Bold", "Helvetica Neue", system-ui, sans-serif;
  --qg-ease: cubic-bezier(.2, .9, .3, 1.25);

  /* Hand pointer. Use class .qg-cursor on body to opt in. */
  --qg-cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 32 36'><path d='M9 2.5c1.7 0 3 1.3 3 3V15l1-.2V12c0-1.5 1.2-2.6 2.7-2.6S18.4 10.5 18.4 12v2.6l.9-.1c.2-1.4 1.3-2.3 2.7-2.3 1.5 0 2.6 1.2 2.6 2.7v1.5l.6-.1c1.4-.1 2.6 1 2.6 2.4V25c0 5.2-4.2 9-9.4 9h-2.6c-3.1 0-5.9-1.6-7.6-4.2L3.4 22.4c-.8-1.3-.5-3 .8-3.8 1.2-.8 2.8-.5 3.7.6L6 19V5.5c0-1.7 1.3-3 3-3z' fill='white' stroke='%2334beed' stroke-width='2.2' stroke-linejoin='round'/></svg>") 9 3, pointer;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--qg-font);
  color: var(--qg-text);
  background: var(--qg-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* The classic faint horizontal pinstripe background */
.qg-bg {
  background:
    repeating-linear-gradient(180deg, var(--qg-bg) 0 3px, var(--qg-bg-stripe) 3px 4px),
    var(--qg-bg);
}

.qg-cursor, .qg-cursor * { cursor: var(--qg-cursor); }

/* ---------- Buttons ----------------------------------------------------- */
/* Big glossy pill button, like the "Menu" / "Start" buttons. */
.qg-btn {
  appearance: none;
  border: 2px solid var(--qg-line);
  background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 55%, #e7eaed 100%);
  color: var(--qg-text);
  font: 700 18px/1 var(--qg-font);
  letter-spacing: .02em;
  padding: 16px 34px;
  min-width: 180px;
  border-radius: var(--qg-radius-pill);
  box-shadow: var(--qg-shadow);
  transition: transform .18s var(--qg-ease), box-shadow .18s, border-color .18s, color .18s;
  user-select: none;
  cursor: inherit;
}
.qg-btn:hover, .qg-btn:focus-visible {
  outline: none;
  border-color: var(--qg-blue);
  color: var(--qg-blue-deep);
  box-shadow: var(--qg-shadow), var(--qg-glow);
  transform: scale(1.04);
}
.qg-btn:active { transform: scale(.97); }
.qg-btn[disabled] { opacity: .45; pointer-events: none; }

.qg-btn--primary {
  color: var(--qg-blue-deep);
  border-color: #9fdcf3;
}
.qg-btn--small { font-size: 14px; padding: 10px 20px; min-width: 0; }
.qg-btn--danger:hover { border-color: var(--p2); color: var(--p2); box-shadow: var(--qg-shadow), 0 0 0 3px rgba(232,82,74,.4); }

/* Round icon button (like bottom-corner channel buttons) */
.qg-round {
  appearance: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--qg-line);
  background: radial-gradient(circle at 50% 30%, #fff 0%, #f0f2f4 60%, #e2e6e9 100%);
  box-shadow: var(--qg-shadow);
  color: var(--qg-text-soft);
  font: 800 15px/1 var(--qg-font);
  display: inline-grid; place-items: center;
  transition: transform .18s var(--qg-ease), box-shadow .18s, border-color .18s, color .18s;
  cursor: inherit;
}
.qg-round:hover, .qg-round:focus-visible {
  outline: none;
  border-color: var(--qg-blue);
  color: var(--qg-blue-deep);
  box-shadow: var(--qg-shadow), var(--qg-glow);
  transform: scale(1.08);
}

/* ---------- Panels / dialogs ------------------------------------------- */
.qg-panel {
  background: var(--qg-surface);
  border: 2px solid var(--qg-line-soft);
  border-radius: var(--qg-radius-lg);
  box-shadow: var(--qg-shadow-lg);
  padding: 28px 32px;
}

.qg-title {
  font: 800 28px/1.15 var(--qg-font);
  color: var(--qg-text);
  margin: 0 0 6px;
  letter-spacing: .01em;
}
.qg-subtitle {
  font: 500 15px/1.4 var(--qg-font);
  color: var(--qg-text-soft);
  margin: 0;
}

/* Full-screen dim overlay (HOME-menu style). Toggle with [hidden]. */
.qg-overlay {
  position: fixed; inset: 0;
  background: rgba(235, 238, 241, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  z-index: 1000;
  animation: qg-fade .22s ease-out;
}
.qg-overlay[hidden] { display: none; }

/* HOME-menu style top/bottom bands */
.qg-band {
  position: absolute; left: 0; right: 0;
  height: 76px;
  background: linear-gradient(180deg, #ffffff, #eef1f3);
  border-color: var(--qg-line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  font: 700 20px/1 var(--qg-font);
  color: var(--qg-text-soft);
}
.qg-band--top { top: 0; border-bottom: 2px solid var(--qg-blue); box-shadow: 0 4px 14px rgba(52,190,237,.18); }
.qg-band--bottom { bottom: 0; border-top: 2px solid var(--qg-blue); box-shadow: 0 -4px 14px rgba(52,190,237,.18); }

/* ---------- Inputs ----------------------------------------------------- */
.qg-input {
  font: 600 18px/1 var(--qg-font);
  color: var(--qg-text);
  background: var(--qg-surface-2);
  border: 2px solid var(--qg-line);
  border-radius: var(--qg-radius);
  padding: 14px 18px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.qg-input:focus { border-color: var(--qg-blue); box-shadow: var(--qg-glow); }

/* ---------- Player badges ---------------------------------------------- */
.qg-player { --pc: var(--p1); }
.qg-player[data-slot="0"] { --pc: var(--p1); }
.qg-player[data-slot="1"] { --pc: var(--p2); }
.qg-player[data-slot="2"] { --pc: var(--p3); }
.qg-player[data-slot="3"] { --pc: var(--p4); }

/* Remote-style 4-LED indicator: <span class="qg-leds" data-slot="2"><i></i><i></i><i></i><i></i></span> */
.qg-leds { display: inline-flex; gap: 4px; }
.qg-leds i { width: 8px; height: 8px; border-radius: 2px; background: var(--qg-line); }
.qg-leds[data-slot="0"] i:nth-child(1),
.qg-leds[data-slot="1"] i:nth-child(2),
.qg-leds[data-slot="2"] i:nth-child(3),
.qg-leds[data-slot="3"] i:nth-child(4) { background: var(--qg-blue); box-shadow: 0 0 6px var(--qg-blue); }

/* ---------- Toast ------------------------------------------------------ */
.qg-toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  background: var(--qg-surface);
  border: 2px solid var(--qg-blue);
  color: var(--qg-text);
  font: 700 16px/1 var(--qg-font);
  padding: 14px 24px; border-radius: var(--qg-radius-pill);
  box-shadow: var(--qg-shadow-lg);
  z-index: 2000;
  animation: qg-pop .3s var(--qg-ease);
}

/* ---------- Animations ------------------------------------------------- */
@keyframes qg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qg-pop { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes qg-zoom-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes qg-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}