/* ─── Reset & Base ───────────────────────────────────────
   Structure mirrors ../styles.css; the palette is the PongSmash
   brand sheet (Pong_Smash_Colors), not the landing-page tokens. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:     #83F072;
  --navy:      #0F0D23;
  --white:     #ffffff;
  --muted:     rgba(255,255,255,.6);
  --font-sans:    'Outfit', sans-serif;
  --font-display: "obviously-variable", sans-serif;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-sans);
  background: var(--navy);
  color: var(--white);
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
}

a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }

/* ─── Stage & court ─────────────────────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#court {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ─── HUD ───────────────────────────────────────────────── */
.hud {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 clamp(16px, 6vw, 96px);
  pointer-events: none;
  z-index: 2;
}

.hud-score {
  width: clamp(44px, 7vw, 72px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.4));
}

/* The divider art carries the TickPick brand in both orientations, so the
   HUD wordmark stays hidden to avoid doubling it. */
.hud-brand { display: none; }

.icon-btn {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.18); }

.hud-pause {
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
}

.pause-bars { display: flex; gap: 5px; }
.pause-bars i {
  display: block;
  width: 5px;
  height: 18px;
  border-radius: 2px;
  background: var(--white);
}

.hud-sound {
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  background-image: url('assets/sound-on.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px auto;
}
.hud-sound[aria-pressed="true"] { background-image: url('assets/sound-mute.svg'); }

/* ─── Screens (intro / pause / win / lose) ──────────────── */
.screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.6vh, 26px);
  text-align: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(23,3,131,.55) 0%, rgba(15,13,35,.92) 70%);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

/* Pseudo-element spacers center the stack when it fits and collapse when
   it overflows so it can scroll (justify-content: center would clip the
   top on short phones; child auto-margins break when an edge child is
   [hidden], like the desktop-hidden touch hint) */
.screen::before,
.screen::after { content: ''; margin: auto; }

.screen-title {
  font-family: var(--font-display);
  font-variation-settings: "wght" 800, "wdth" 200;
  font-size: clamp(34px, 7vw, 64px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  text-shadow: 0 0 34px rgba(131,240,114,.35);
}

.screen-sub {
  max-width: 520px;
  font-size: clamp(15px, 2.2vw, 18px);
  color: rgba(255,255,255,.85);
}

.final-score {
  color: var(--green);
  font-weight: 800;
  white-space: nowrap;
}

.intro-brand {
  height: clamp(24px, 3.4vw, 32px);
  width: auto;
}

.intro-lockup {
  /* --ink-w is the VISIBLE wordmark width; override it, never width.
     PointSmash_Lockup.png pads that 1794x197 wordmark into a 1920x261
     canvas (blue rule above and below), so width scales by 1920/1794 to
     hold the letterforms at --ink-w and the negative block margin removes
     the 32px vertical padding, keeping the layout footprint equal to the
     wordmark alone so neighbours don't shift. Rules paint into the flex
     gaps, which is intended. Re-measure if the art is re-exported. */
  --ink-w: min(520px, 84vw);
  width: calc(var(--ink-w) * 1920 / 1794);
  margin-block: calc(var(--ink-w) * -32 / 1794);
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.45));
}

/* ─── Email gate (intro) ─────────────────────────────────── */
.email-gate {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.email-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#email-input {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--font-sans);
  /* body sets user-select: none for the game canvas; iOS Safari extends that
     to form fields and blocks typing, so opt this input back in. */
  user-select: text;
  -webkit-user-select: text;
  /* 16px keeps iOS from zooming the viewport on focus */
  font-size: 16px;
  color: var(--white);
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 99px;
  padding: 14px 22px;
  outline: none;
  transition: border-color .15s;
}
#email-input::placeholder { color: var(--muted); }
#email-input:focus { border-color: var(--green); }

.email-submit { padding: 14px 32px; }

.gate-error {
  font-size: 13px;
  color: #ff9d9d;
}

.gate-consent {
  font-size: 12px;
  color: var(--muted);
}
.gate-consent a { text-decoration: underline; }

.signin-chip {
  max-width: 460px;
  font-size: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 18px;
}
.signin-chip strong { color: var(--white); }

/* ─── Claim states (win screen) ─────────────────────────── */
.claim-box {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 16px 20px;
}

.claim-label { font-size: 14px; color: var(--muted); }
.claim-label strong { color: var(--white); }

.promo-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: clamp(15px, 4vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--green);
  background: rgba(131,240,114,.1);
  border: 1px dashed rgba(131,240,114,.5);
  border-radius: 10px;
  padding: 10px 14px;
  user-select: text;
  -webkit-user-select: text;
}

.copy-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--green);
  border: none;
  border-radius: 99px;
  padding: 10px 18px;
  cursor: pointer;
}
.copy-btn:hover { filter: brightness(1.08); }

.claim-hint {
  font-size: 13px;
  color: var(--muted);
}

.app-qr {
  width: 132px;
  height: 132px;
  border-radius: 12px;
  background: var(--white);
  padding: 6px;
}

/* QR reads best where a second device does the scanning; on touch screens
   the direct app link replaces it. Keyed off data-pointer, stamped once at
   boot in game.js — same single-source pattern as data-orientation. */
.stage[data-pointer="fine"] .app-link { display: none; }
.stage[data-pointer="coarse"] .app-qr { display: none; }

.control-hint {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
}

.fine-print {
  font-size: 12px;
  color: var(--muted);
}
.fine-print a { text-decoration: underline; }

.end-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* CTA — mirrors ../styles.css .cta-primary */
.cta-primary {
  display: inline-block;
  font-family: var(--font-sans);
  background: var(--white);
  color: #185BDB;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 48px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 4px 28px rgba(0,0,0,.25);
  text-align: center;
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px 6px rgba(255,255,255,.55), 0 8px 36px rgba(0,0,0,.35);
}

.cta-secondary {
  display: inline-block;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,.4);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
}
.cta-secondary:hover {
  border-color: var(--white);
  background: rgba(255,255,255,.08);
}

/* ─── Ticket callout (win/lose screens) ─────────────────── */
.ticket-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  width: 100%;
  padding: 10px 16px 10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  text-align: left;
  transition: background .15s, transform .18s, box-shadow .18s;
}
.ticket-callout:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.ticket-callout img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.ticket-callout-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ticket-callout-text strong {
  font-size: 15px;
  font-weight: 800;
}
.ticket-callout-text span {
  font-size: 13px;
  color: var(--muted);
}

.ticket-callout-arrow {
  margin-left: auto;
  font-size: 20px;
  color: var(--green);
}

/* ─── Win / lose art (Higgsfield-generated, sits on navy) ─ */
.end-art {
  width: min(300px, 42vh, 60vw);
  aspect-ratio: 1;
  border-radius: 24px;
  background: center / cover no-repeat;
  box-shadow: 0 12px 60px rgba(0,0,0,.5);
}
#win-art  { background-image: url('assets/win-art.jpg?v=1'); }
#lose-art { background-image: url('assets/lose-art.jpg?v=1'); }

/* Portrait (stamped by resize() in game.js): the AI paddle plays along
   the top edge — keep it clear. The player drags along the bottom, so
   pause/sound move out of the thumb zone into the top-center slot. */
.stage[data-orientation="portrait"] .hud-pause {
  bottom: auto;
  top: max(12px, env(safe-area-inset-top));
  left: calc(50% - 52px);
}

.stage[data-orientation="portrait"] .hud-sound {
  bottom: auto;
  top: max(12px, env(safe-area-inset-top));
  right: calc(50% - 52px);
}

@media (prefers-reduced-motion: reduce) {
  .cta-primary, .cta-secondary { transition: none; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .intro-lockup { --ink-w: min(380px, 56vw); }
  .end-art { width: min(160px, 30vh); }
  .screen { gap: 10px; }
}

@media (max-height: 700px) and (orientation: portrait) {
  .end-art { width: min(180px, 26vh); }
  .screen { gap: 12px; }
}