/* ==========================================================================
   Pinball — themed to the innomate design system
   (public/innomate-design-system: dark-first black surfaces, one steel-blue
   accent, Montserrat + Gridular numerals, pill buttons, hairline cards).
   ========================================================================== */

:root {
  /* Surfaces — dark-first */
  --background: #000000;
  --ink-soft: #0D0D0D;
  --card: #0A0A0A;
  --muted: #141414;

  /* Text */
  --foreground: #FAFAFA;
  --muted-foreground: #A6A6A6;

  /* Brand — single blue accent */
  --primary: #5095B6;
  --primary-glow: #7FB0C9;
  --secondary: #052F4E;

  /* Lines & controls */
  --hairline: rgba(255, 255, 255, 0.08);
  --card-fill: rgba(255, 255, 255, 0.03);
  --input-border: rgba(255, 255, 255, 0.15);

  /* Radius */
  --radius: 0.25rem;
  --radius-card: 16px;
  --radius-pill: 9999px;

  /* Elevation & motion */
  --shadow-glow: 0 0 80px hsl(201 38% 51% / 0.35);
  --shadow-elegant: 0 30px 80px -20px hsl(0 0% 0% / 0.7);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type */
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-accent: 'Gridular', 'Montserrat', ui-monospace, monospace; /* numerals */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Display heading — Montserrat, tight tracking (per DS typography). */
.title,
.landing h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--foreground);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 60px hsl(201 38% 51% / 0.35);
}

/* ---------- Game stage (mobile + host) ---------- */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--background);
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
}

/* Overlay panels drawn in HTML on top of the canvas. */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  gap: 20px;
  padding: 24px;
}
.overlay.hidden { display: none; }
.overlay.scrolls {
  justify-content: flex-start;
  overflow-y: auto;
  padding-top: max(env(safe-area-inset-top, 0px), 7vh);
  padding-bottom: 7vh;
}

.overlay .title { font-size: clamp(30px, 8vw, 56px); }
.overlay .sub { font-size: 16px; color: var(--muted-foreground); }

/* Live score — Gridular/mono numerals, kept bright to read over the table. */
.hud-score {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-accent);
  font-size: clamp(40px, 11vw, 68px);
  font-weight: 600;
  color: var(--foreground);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 40px hsl(201 38% 51% / 0.55);
  pointer-events: none;
  z-index: 4;
}

/* Balls-remaining badge — pinned top-left, aligned to the innomate wordmark
   (.brand-mark): same top offset and height band. */
.hud-balls {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 32px);
  left: 16px;
  height: clamp(16px, 2.6vh, 24px);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.85));
}
.hud-balls .pip {
  width: clamp(11px, 1.7vh, 15px);
  height: clamp(11px, 1.7vh, 15px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #9aa4ac 55%, #3a424a);
  box-shadow: 0 0 6px hsl(201 38% 51% / 0.5);
}
.hud-balls .pip.spent {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* Solo-play flipper controls: the left and right HALVES of the screen are the
   flipper zones (transparent), so the controls never hide the table or the ball
   at the drain. Small corner pills hint which side is which and flash on press. */
.flip-zones {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 3;               /* below the launch button (7) and HUD */
}
.flip-zones.hidden { display: none; }
.flip-zone {
  flex: 1;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.flip-hints {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex;
  justify-content: space-between;
  padding: 0 22px;
  pointer-events: none;     /* purely a visual hint; the zones handle input */
  z-index: 4;
}
.flip-hints.hidden { display: none; }
.flip-hint {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foreground);
  background: hsl(201 38% 51% / 0.16);
  border: 1px solid hsl(201 38% 51% / 0.34);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  transition: background 0.1s ease, transform 0.06s var(--ease-smooth);
}
.flip-hint.active {
  background: hsl(201 38% 51% / 0.5);
  transform: scale(0.95);
}

/* Base flipper button — used by the controller's (phone) flipper pad. */
.flip-btn {
  pointer-events: auto;
  flex: 1;
  height: clamp(78px, 13vh, 104px);
  border: 1px solid hsl(201 38% 51% / 0.4);
  border-radius: 22px;
  background: hsl(201 38% 51% / 0.22);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  transition: transform 0.06s var(--ease-smooth), background 0.15s ease, box-shadow 0.15s ease;
}
.flip-btn.active,
.flip-btn:active {
  transform: scale(0.96);
  background: hsl(201 38% 51% / 0.45);
  box-shadow: 0 0 24px hsl(201 38% 51% / 0.4);
}

/* Launch button — centered pill shown while a ball is parked in the lane. */
.launch-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 138px);
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 7;
}
.launch-controls.hidden { display: none; }
.launch-btn {
  pointer-events: auto;
  min-width: 200px;
  height: 58px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--secondary);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-glow), inset 0 1px 0 hsl(201 38% 65% / 0.6);
  touch-action: none;
  animation: launchPulse 1.4s ease-in-out infinite;
}
.launch-btn:active { transform: translateY(1px) scale(0.99); background: var(--primary-glow); }
@keyframes launchPulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(201 38% 51% / 0.5), inset 0 1px 0 hsl(201 38% 65% / 0.6); }
  50% { box-shadow: 0 0 30px 4px hsl(201 38% 51% / 0.55), inset 0 1px 0 hsl(201 38% 65% / 0.6); }
}

/* Persistent innomate wordmark — pinned top-centre. */
.brand-mark {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 32px);
  left: 50%;
  transform: translateX(-50%);
  height: clamp(16px, 2.6vh, 24px);
  width: auto;
  opacity: 0.82;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.85));
}

.controller .brand-mark {
  position: static;
  transform: none;
  align-self: center;
  height: 16px;
  opacity: 0.7;
  margin-top: 16px;
  margin-bottom: 12px;
}

/* Hairline content card (DS card). */
.panel {
  pointer-events: auto;
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-elegant);
  min-width: 240px;
}
.panel .row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  font-size: 15px;
  margin: 8px 0;
  color: var(--muted-foreground);
}
.panel .row b {
  font-family: var(--font-accent);
  font-weight: 600;
  color: var(--primary-glow);
}

/* Pill button — DS primary (white → brand-blue on hover). */
.btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #000;
  background: var(--foreground);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
}
.btn:hover { background: var(--primary); color: #000; box-shadow: 0 0 60px hsl(201 38% 51% / 0.35); }
.btn:active { transform: translateY(1px); }
.btn.secondary {
  color: var(--foreground);
  background: transparent;
  border: 1px solid var(--input-border);
}
.btn.secondary:hover { background: transparent; border-color: rgba(255, 255, 255, 0.4); box-shadow: none; }

/* Ready hint — eyebrow-style caption, legible over the table. */
.hint {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foreground);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Small legend of what's what, shown on the ready overlay. */
.legend {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--foreground);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Landing / mode selector ---------- */
.landing {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  background:
    radial-gradient(90% 60% at 50% 0%, hsl(201 38% 51% / 0.14), transparent 60%),
    var(--background);
  color: var(--foreground);
}
.landing h1 { font-size: clamp(34px, 9vw, 62px); margin: 0; }
.landing p {
  max-width: 520px;
  text-align: center;
  line-height: 1.6;
  margin: 0;
  font-size: 16px;
  color: var(--muted-foreground);
}
.cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.card {
  background: var(--card-fill);
  color: var(--foreground);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 22px;
  width: 260px;
  text-decoration: none;
  transition: all 0.3s var(--ease-smooth);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card:hover {
  transform: translateY(-4px);
  border-color: hsl(201 38% 51% / 0.5);
  box-shadow: var(--shadow-glow);
}
.card .emoji { font-size: 26px; opacity: 0.9; }
.card h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); }
.card small { color: var(--muted-foreground); line-height: 1.5; font-size: 13px; }

/* ---------- Host (desktop) lobby ---------- */
.lobby {
  pointer-events: auto;
  background: rgba(10, 10, 10, 0.82);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 360px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-elegant);
  color: var(--muted-foreground);
}
.lobby > div:first-child { font-size: 13px; }
.lobby .qr {
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  line-height: 0;
  box-shadow: var(--shadow-glow);
}
.lobby .qr canvas, .lobby .qr img { display: block; width: 232px; height: 232px; }
.lobby .qr img[hidden] { display: none; }

.qr-loading {
  width: 232px;
  height: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  line-height: normal;
}
.qr-loading[hidden] { display: none; }
.spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(80, 149, 182, 0.25);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.qr-loading-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #52708a;
}
.lobby .url { font-size: 12px; opacity: 0.7; word-break: break-all; text-align: center; }

/* Status dot — brand blue when live, muted otherwise. */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-foreground);
  margin-right: 8px; vertical-align: middle;
  transition: all 0.3s var(--ease-smooth);
}
.status-dot.on {
  background: var(--primary);
  box-shadow: 0 0 12px hsl(201 38% 51% / 0.9);
}

/* "N waiting" — DS badge (brand tint). */
.waiting-badge {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsl(201 38% 51% / 0.1);
  border: 1px solid hsl(201 38% 51% / 0.3);
  color: var(--primary-glow);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5;
}
.waiting-badge.hidden { display: none; }

/* ---------- Controller (phone) ---------- */
.controller {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(90% 50% at 50% 0%, hsl(201 38% 51% / 0.14), transparent 55%),
    var(--background);
  color: var(--foreground);
  padding: 18px;
}
.controller .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-foreground);
}
.controller .top-right { display: flex; align-items: center; gap: 14px; }
.controller .balls-badge { font-size: 16px; font-weight: 600; color: var(--foreground); letter-spacing: 2px; }
.controller .score-badge {
  font-family: var(--font-accent);
  font-size: 22px; font-weight: 600; color: var(--primary-glow);
}

/* Launch button on the controller — full-width pill above the flipper pad. */
.controller .launch-row { display: flex; margin: 14px 0 0; }
.controller .launch-row.hidden { display: none; }
.controller .launch-btn {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 60px;
}

/* Flipper pad — two big tap-and-hold buttons filling the middle. */
.pad {
  flex: 1;
  display: flex;
  gap: 14px;
  margin: 14px 0 4px;
}
.pad .flip-btn {
  flex: 1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 28px;
  background: var(--primary);
  color: var(--secondary);
  font-size: clamp(18px, 5vw, 26px);
  letter-spacing: 0.04em;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-glow), inset 0 1px 0 hsl(201 38% 65% / 0.6);
}
.pad .flip-btn .arrow { font-size: 1.5em; line-height: 1; }
.pad .flip-btn.active,
.pad .flip-btn:active {
  transform: translateY(3px) scale(0.99);
  background: var(--primary-glow);
  box-shadow: 0 0 30px hsl(201 38% 51% / 0.3);
}
.pad .flip-btn:disabled {
  background: var(--muted);
  color: var(--muted-foreground);
  box-shadow: none;
  cursor: default;
}

.toast {
  position: fixed;
  left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink-soft);
  border: 1px solid var(--hairline);
  color: var(--foreground);
  padding: 12px 18px; border-radius: 12px; font-size: 14px;
  box-shadow: var(--shadow-elegant);
  opacity: 0; transition: opacity 0.25s var(--ease-smooth); pointer-events: none;
  z-index: 30;
}
.toast.show { opacity: 1; }

/* ---------- Lead-capture form (demo mockup) ----------
   Shown once the game ends. UI mock only — it never submits anywhere, stores
   nothing, and sends nothing to any CRM. The copy in .lead-note says so. */
.lead-form {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lead-form.hidden { display: none; }

.controller .lead-form {
  position: static;
  inset: auto;
  flex: 1;
  margin: 12px 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lead-card {
  pointer-events: auto;
  width: 100%;
  max-width: 360px;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  box-shadow: var(--shadow-elegant);
  text-align: left;
}
.controller .lead-card { max-width: 100%; }

.lead-card .lead-title {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--foreground);
}
.lead-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.lead-results .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--muted-foreground);
}
.lead-results .row b {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 18px;
  color: var(--primary-glow);
}

.lead-card form { display: flex; flex-direction: column; gap: 6px; }
.lead-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 12px 0 0;
}
.lead-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--foreground);
  font-size: 16px;
  font-family: var(--font-sans);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lead-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.lead-input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.lead-card .lead-submit {
  width: 100%;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--muted-foreground);
  box-shadow: none;
}
.lead-card .lead-submit:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--foreground);
  box-shadow: none;
}
.lead-card .lead-restart {
  width: 100%;
  margin-top: 10px;
  min-height: 42px;
  font-size: 14px;
}

.lead-note {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted-foreground);
  background: hsl(201 38% 51% / 0.08);
  border: 1px solid hsl(201 38% 51% / 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 18px 0 0;
}
.lead-note .lock { flex: none; }

.lead-success {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground);
  background: hsl(201 38% 51% / 0.14);
  border: 1px solid hsl(201 38% 51% / 0.4);
  border-radius: 10px;
  padding: 11px 13px;
  margin-top: 16px;
}
.lead-success .check { flex: none; }