/* =====================================================================
   SPLASH V3 — premium championship launcher
   ---------------------------------------------------------------------
   Owns the #menuOverlay splash screen entirely. The only contract the
   rest of the app relies on is:
     #menuOverlay + .hidden          show/hide (main.js / multiplayer.js)
     #hsOnline #hsPractice #hsLogin  action buttons
     #hsLoginTitle #hsLoginSub       swapped by updateSplashAccount()
   Layout: full-viewport stage, arena artwork anchored to the bottom,
   content column slightly left of centre, understated top bar, footer
   link strip. All sizes are fluid (clamp) — no reference-pixel system.
   ===================================================================== */

.sp3, .sp3 *, .sp3 *::before, .sp3 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

.sp3 {
  --sp3-gold:        #c8a253;
  --sp3-gold-bright: #e2c47e;
  --sp3-silver:      #eceaf1;
  --sp3-text-dim:    #b6b0c4;
  --sp3-ink:         #060409;
  --sp3-panel:       rgba(13, 10, 20, 0.86);
  --sp3-radius:      10px;

  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(88, 38, 132, 0.20) 0%, transparent 65%),
    linear-gradient(180deg, #0a0611 0%, #070410 55%, #050308 100%);
  color: var(--sp3-silver);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.sp3.hidden { display: none; }

/* ── Background arena artwork ─────────────────────────────────────────
   The artwork is a clean, logo-free 16:9 render that is already dark, so
   the overlay is limited to a readability shade behind the left content
   column and a light edge vignette — the table and rack stay visible. */
.sp3-bg {
  position: absolute;
  inset: 0;
  background: url('assets/splash-bg.jpg') center center / cover no-repeat;
  pointer-events: none;
  user-select: none;
}
.sp3-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* readability shade behind the left content column */
    linear-gradient(100deg, rgba(6, 4, 9, 0.78) 0%, rgba(6, 4, 9, 0.42) 34%, rgba(6, 4, 9, 0.05) 60%, transparent 74%),
    /* edge vignette */
    radial-gradient(ellipse 125% 95% at 50% 55%, transparent 55%, rgba(4, 2, 7, 0.5) 100%);
}

/* Load fade — background first, content rises in after. */
@media (prefers-reduced-motion: no-preference) {
  .sp3-bg { animation: sp3BgIn 700ms ease-out both; }
  .sp3-top, .sp3-foot { animation: sp3Fade 500ms ease-out 150ms both; }
  .sp3-main > * { animation: sp3Rise 520ms ease-out both; }
  .sp3-main > :nth-child(1) { animation-delay: 90ms; }
  .sp3-main > :nth-child(2) { animation-delay: 150ms; }
  .sp3-main > :nth-child(3) { animation-delay: 210ms; }
  .sp3-main > :nth-child(4) { animation-delay: 270ms; }
}
@keyframes sp3BgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp3Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp3Rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Top bar ──────────────────────────────────────────────────────── */
.sp3-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-height: 30px;
  padding: clamp(14px, 2.4vh, 24px) clamp(18px, 3.2vw, 44px);
  flex-shrink: 0;
}
/* ── Main content — slightly left of centre ───────────────────────── */
.sp3-main {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px clamp(18px, 4vw, 56px) 12px clamp(20px, 8vw, 130px);
  /* Width is constrained per-child (.sp3-desc / .sp3-actions), not here:
     a max-width on the column would clip the gradient-filled title, whose
     background only paints inside the box. */
  /* Lift the whole content group above the vertical centre. */
  transform: translateY(-60px);
}
.sp3-title {
  font: 900 clamp(30px, 4.2vw, 54px)/1 'Arial Black', Impact, sans-serif;
  letter-spacing: 0.02em;
  color: #f4f3f7;
  background: linear-gradient(180deg, #ffffff 18%, #d9dbe3 48%, #9aa0ae 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75));
  white-space: nowrap;
}
.sp3-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(8px, 1.4vh, 14px);
  color: var(--sp3-gold);
  font: 700 clamp(11px, 1.1vw, 14px)/1 inherit;
  font-family: inherit;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sp3-kicker::after {
  content: '';
  height: 1px;
  width: clamp(40px, 6vw, 90px);
  background: linear-gradient(90deg, rgba(200, 162, 83, 0.75), transparent);
}
.sp3-desc {
  margin-top: clamp(10px, 2vh, 18px);
  max-width: 44ch;
  color: var(--sp3-text-dim);
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.55;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ── Actions ──────────────────────────────────────────────────────── */
.sp3-actions {
  margin-top: clamp(18px, 3.6vh, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(478px, 100%);
}

/* Primary — PLAY ONLINE */
.sp3-primary {
  display: grid;
  grid-template-columns: 56px 1fr 34px;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 78px;
  padding: 12px 14px 12px 10px;
  border: 1px solid rgba(200, 162, 83, 0.62);
  border-radius: var(--sp3-radius);
  background: linear-gradient(180deg, #2b1a3f 0%, #1b0f2b 55%, #120a1c 100%);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 10px 30px rgba(0, 0, 0, 0.30);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.sp3-primary:hover {
  transform: translateY(-2px);
  border-color: var(--sp3-gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 14px 36px rgba(0, 0, 0, 0.34);
}
.sp3-primary:active { transform: translateY(0); filter: brightness(0.94); }
.sp3-primary:focus-visible { outline: 2px solid var(--sp3-gold-bright); outline-offset: 3px; }
.sp3-primary__icon { display: grid; place-items: center; }
.sp3-primary__icon svg { width: 30px; height: 30px; fill: var(--sp3-gold-bright); }
.sp3-primary__title {
  display: block;
  font: 800 19px/1.1 inherit;
  font-family: inherit;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.sp3-primary__sub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(226, 217, 240, 0.68);
}
.sp3-primary__arrow { display: grid; place-items: center; transition: transform 160ms ease; }
.sp3-primary__arrow svg { width: 18px; height: 18px; stroke: var(--sp3-gold); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp3-primary:hover .sp3-primary__arrow { transform: translateX(4px); }
.sp3-primary:hover .sp3-primary__arrow svg { stroke: var(--sp3-gold-bright); }

/* Secondary — PRACTICE / LOG IN (quieter) */
.sp3-secondaryRow { display: flex; gap: 12px; }
.sp3-secondary {
  flex: 1 1 0;
  min-width: 0;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--sp3-radius);
  background: var(--sp3-panel);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.sp3-secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 162, 83, 0.55);
  background: rgba(20, 15, 30, 0.9);
}
.sp3-secondary:active { transform: none; filter: brightness(0.93); }
.sp3-secondary:focus-visible { outline: 2px solid var(--sp3-gold-bright); outline-offset: 3px; }
.sp3-secondary__title {
  font: 700 13.5px/1.1 inherit;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp3-silver);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp3-secondary__sub {
  font-size: 11.5px;
  color: rgba(182, 176, 196, 0.75);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Footer link strip ────────────────────────────────────────────── */
.sp3-foot {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 10px clamp(18px, 3.2vw, 44px) clamp(14px, 2.4vh, 22px);
}
.sp3-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sp3-link {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  color: rgba(182, 176, 196, 0.8);
  font: 600 12px/1 inherit;
  font-family: inherit;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease;
}
.sp3-link:hover { color: var(--sp3-gold-bright); }
.sp3-link:focus-visible { outline: 2px solid var(--sp3-gold-bright); outline-offset: 1px; }
.sp3-linkDot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(200, 162, 83, 0.5);
  flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────────── */
/* Narrow screens: centre the column, stack the secondary buttons. */
@media (max-width: 720px) {
  .sp3-main {
    max-width: 100%;
    padding-left: clamp(18px, 6vw, 40px);
    padding-right: clamp(18px, 6vw, 40px);
  }
  .sp3-title { white-space: normal; }
  .sp3-secondaryRow { flex-direction: column; }
  .sp3-foot { justify-content: center; }
}
/* Short viewports (small laptops, landscape phones): tighten rhythm so
   the actions stay reachable without scrolling. */
@media (max-height: 620px) {
  .sp3-main { transform: translateY(-24px); }
  .sp3-top { padding-top: 10px; padding-bottom: 8px; }
  .sp3-desc { margin-top: 6px; }
  .sp3-actions { margin-top: 14px; gap: 9px; }
  .sp3-primary { min-height: 64px; }
  .sp3-secondary { min-height: 50px; }
  .sp3-foot { padding-bottom: 8px; }
}
@media (max-height: 480px) {
  .sp3-main { transform: none; }
  .sp3-desc, .sp3-secondary__sub { display: none; }
  .sp3-secondary { min-height: 42px; }
}