/* ============================================================
   The Perfect Firework — global stylesheet.

   Loaded by every page (head.php).  Uses CSS custom properties so
   tweaking radii / palette is one-line.  All chrome (header, footer,
   pick cards, dev panel, modals) uses generously rounded corners.
   ============================================================ */

:root {
  --bg-deep:     #050511;
  --bg-mid:      #0a0a1c;
  --bg-fade:     #15132d;
  --ink:         #f6f4ff;
  --ink-soft:    #c4c0e0;
  --ink-mute:    #7d7a9c;
  --line:        rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.16);
  --gold:        #ffd166;
  --gold-2:      #ffb84d;
  --gold-soft:   rgba(255, 209, 102, 0.10);
  --gold-glow:   rgba(255, 209, 102, 0.40);
  --pink:        #ff6b9b;
  --pink-2:      #ff8eb4;
  --pink-soft:   rgba(255, 107, 155, 0.10);
  --pink-glow:   rgba(255, 107, 155, 0.35);
  --warn:        var(--pink);
  --warn-soft:   var(--pink-soft);
  --glass:       rgba(10, 10, 28, 0.72);

  /* Rounded everything. */
  --r-sm:        12px;
  --r-md:        18px;
  --r-lg:        24px;
  --r-xl:        32px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background:
    radial-gradient(ellipse at 20% 10%, #2a2257 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, #1a1840 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-fade) 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }

#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ----------------------------- header ----------------------------- */
header {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 24px 16px;
  background: transparent;
}
.title {
  margin: 0;
  font-size: clamp(28px, 4.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.05;
}
.title-link {
  text-decoration: none;
  color: inherit;
}
.title .t1 {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255, 209, 102, 0.35);
}
.title .t2 {
  color: var(--pink);
  text-shadow: 0 0 24px rgba(255, 107, 155, 0.35);
}
/* ----------------------------- buttons ----------------------------- */
.btn {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  padding: 9px 16px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  transition: all 160ms cubic-bezier(.2,.8,.3,1);
  font-family: inherit;
}
.btn:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.04);
}
.btn:active { transform: translateY(1px); }

/* ----------------------------- views ----------------------------- */
main {
  position: relative; z-index: 1;
  flex: 1; display: flex;
  min-height: 0;
  padding: 12px 24px 18px;
}
.view {
  flex: 1; display: flex; min-height: 0;
  flex-direction: column;
  width: 100%;
}

.tagline {
  margin: 4px 0 12px 0;
  font-size: 14px; color: var(--ink-soft);
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.subline {
  margin: 0 auto 14px;
  max-width: 560px;
  font-size: 13px; color: var(--ink-mute);
  text-align: center;
  line-height: 1.5;
}
.accent-gold { color: var(--gold); }

/* ============================================================
   home (dashboard)
   spec: between the title and the button, ONE text box and nothing else.
   ============================================================ */
#home {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
}
.textbox {
  max-width: 540px;
  padding: 22px 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(10, 10, 28, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 15px; line-height: 1.55;
  color: var(--ink-soft);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.play-now {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #1a1733;
  border: none;
  padding: 16px 38px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.5),
              0 0 38px var(--gold-glow),
              0 12px 32px rgba(0, 0, 0, 0.4);
  transition: transform 200ms cubic-bezier(.2,.8,.3,1),
              box-shadow 200ms ease;
  font-family: inherit;
}
.play-now:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px var(--gold),
              0 0 60px var(--gold-glow),
              0 18px 40px rgba(0, 0, 0, 0.5);
}
.play-now:active { transform: translateY(0) scale(0.99); }

/* ============================================================
   play page
   ============================================================ */
#play {
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.stats-line {
  text-align: center;
  margin: 0 0 12px 0;
  font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.stats-line b { color: var(--ink-soft); font-weight: 600; }

.picks {
  flex: 1; display: flex; align-items: stretch; justify-content: center;
  min-height: 0;
}

.pick {
  position: relative;
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 200ms ease,
              box-shadow 240ms ease,
              transform 240ms cubic-bezier(.2,.8,.3,1);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60, 50, 110, 0.18) 0%, transparent 65%),
    rgba(0, 0, 0, 0.42);
  margin: 0 6px;
}
.pick:hover {
  /* Hover glow follows the mouse, ALWAYS — works during launch
     (locked) and after burst (unlocked) identically. The lock state
     does not change anything visual; the only thing that turns the
     glow on or off is the cursor entering/leaving the card. */
  border-color: rgba(255, 209, 102, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.25),
              0 0 32px var(--gold-glow);
}
.pick.chosen {
  border-color: var(--gold);
  transform: scale(1.012);
  /* The chosen-glow now PULSES instead of holding: it briefly grows
     bigger than the hover glow, then snaps to zero and stays at zero
     until the next pair loads (which removes the .chosen class). */
  animation: chosen-pulse 600ms cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes chosen-pulse {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.35),
                0 0 60px var(--gold-glow);
  }
  22% {
    box-shadow: 0 0 0 5px rgba(255, 209, 102, 0.75),
                0 0 160px rgba(255, 209, 102, 0.95);
  }
  55%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 209, 102, 0),
                0 0     0 rgba(255, 209, 102, 0);
  }
}

/* The `.locked` class is now a JS-only gate (the click handler
   silently ignores clicks while it's set). Crucially, it adds NO
   visual styles — that way the moment the firework bursts (the lock
   is removed) absolutely nothing changes on screen. The only thing
   that can change the card's look is the user hovering on or off. */
.pick canvas { display: block; width: 100%; height: 100%; }

.pick .label {
  position: absolute; left: 16px; top: 14px;
  font-size: 10px; color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.pick .pickbtn {
  position: absolute; left: 50%; bottom: 22px;
  transform: translate(-50%, 0);
  background: rgba(10, 10, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 209, 102, 0.55);
  color: var(--gold);
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.2,.8,.3,1);
  opacity: 0;
  font-family: inherit;
}
.pick:hover .pickbtn,
.pick.chosen .pickbtn { opacity: 1; }
.pick .pickbtn:hover {
  background: rgba(255, 209, 102, 0.22);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 24px var(--gold-glow);
}

.vs {
  align-self: stretch;
  width: 1px;
  margin: 60px 14px;
  background: linear-gradient(180deg, transparent 0%,
                                        var(--line-strong) 30%,
                                        var(--line-strong) 70%,
                                        transparent 100%);
  position: relative;
}
.vs::after {
  content: "vs";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-mute);
  background: var(--bg-deep);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   best page (full page, not a modal)
   ============================================================ */
#best {
  align-items: stretch;
}

/* Best/Worst pill toggle. Active state uses gold for "best" and
   pink for "worst" so the page mood matches the choice. */
.best-toggle {
  align-self: center;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.best-toggle-btn {
  background: transparent;
  color: var(--ink-soft);
  border: none;
  padding: 8px 22px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: color 160ms ease, background 200ms ease,
              box-shadow 200ms ease;
}
.best-toggle-btn:hover { color: var(--ink); }
.best-toggle-btn.active[data-mode="best"] {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #1a1733;
  box-shadow: 0 0 22px var(--gold-glow);
}
.best-toggle-btn.active[data-mode="worst"] {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
  color: #1a1733;
  box-shadow: 0 0 22px var(--pink-glow);
}

.best-stage {
  flex: 1;
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60, 50, 110, 0.18) 0%, transparent 65%),
    rgba(0, 0, 0, 0.55);
}
.best-stage canvas { display: block; width: 100%; height: 100%; }
.meta {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11px;
  color: var(--ink-mute);
  align-items: center;
  justify-content: center;
}
.meta .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.meta .chip b { color: var(--ink); font-weight: 500; }
.meta .swatch {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

/* ============================================================
   picks page (recent global comparisons)

   The picks page is the one place where we break the everything-
   fits-the-viewport rule used elsewhere in the app. On this page,
   `main` becomes the page's vertical scroll container, the list
   takes its natural content height, and the "See more" button sits
   inline right after the last row — so loading more picks just
   extends the same list downward instead of being a fixed footer.
   ============================================================ */
body[data-page="picks"] main {
  display: block;
  overflow-y: auto;
}
body[data-page="picks"] #picks { display: block; }

#picks {
  flex-direction: column;
  min-height: 0;
}
#picks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 6px 16px 6px;
}
.picks-loading {
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
  padding: 28px 0;
}
.picks-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60, 50, 110, 0.10) 0%, transparent 55%),
    rgba(0, 0, 0, 0.42);
  cursor: pointer;
  position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease,
              transform 200ms cubic-bezier(.2,.8,.3,1);
}
.picks-row:hover {
  border-color: rgba(255, 209, 102, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.20),
              0 0 28px var(--gold-glow);
  transform: translateY(-1px);
}
.picks-cell {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
  height: 170px;
  min-width: 0;
}
.picks-cell canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.picks-cell-label {
  position: absolute;
  left: 12px; top: 10px;
  z-index: 1;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.picks-winner .picks-cell-label { color: var(--gold); }
.picks-loser  .picks-cell-label { color: var(--pink); opacity: 0.8; }
.picks-vs {
  align-self: center;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 6px;
  font-weight: 500;
}
.picks-meta {
  position: absolute;
  right: 14px; top: 10px;
  display: flex; gap: 10px;
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.picks-meta .picks-id   { color: var(--ink-soft); font-weight: 500; }

.picks-actions {
  /* Sits inline at the bottom of the list — scrolls with the picks,
     not pinned. The bigger top padding gives the See more button a
     little breathing room from the last row above it. */
  text-align: center;
  padding: 14px 0 6px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
}
#picks-more {
  padding: 12px 28px;
  font-size: 13px;
}
.picks-count {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* ----- click-to-zoom modal ----- */
.picks-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9;
  background: rgba(5, 5, 17, 0.84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.picks-modal.show {
  display: flex;
  animation: pop 200ms cubic-bezier(.2,.8,.3,1);
}
.picks-modal-inner {
  position: relative;
  width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  padding: 28px 28px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.picks-modal-close {
  position: absolute;
  right: 12px; top: 10px;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  transition: background 160ms ease, color 160ms ease;
}
.picks-modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}
.picks-modal-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 14px 0;
}
.picks-modal-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.picks-modal-time {
  font-size: 12px;
  color: var(--ink-mute);
}
.picks-modal-pair {
  flex: 1; min-height: 0;
  display: flex;
  gap: 14px;
}
.picks-modal-card {
  flex: 1;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  height: min(60vh, 520px);
}
.picks-modal-card canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   text pages (terms / privacy / contact)
   ============================================================ */
.textpage { align-items: center; }
.textpage .prose {
  max-width: 620px;
  width: 100%;
  margin: 8px auto 0;
  padding: 26px 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(10, 10, 28, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink-soft);
  font-size: 14px; line-height: 1.65;
}
.textpage .prose p { margin: 0 0 14px 0; }
.textpage .prose p:last-child { margin-bottom: 0; }
.textpage .prose a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(255, 209, 102, 0.4);
}

/* ============================================================
   footer (pill nav, same on every page)
   ============================================================ */
footer {
  position: relative; z-index: 2;
  margin: 0 18px 18px;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
footer a {
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  transition: all 140ms ease;
  font-weight: 500;
}
footer a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
footer a.active {
  color: var(--gold);
  background: var(--gold-soft);
}
footer .sep {
  color: var(--ink-mute);
  opacity: 0.5;
  user-select: none;
}

/* The picks modal uses this keyframe to ease in when it opens. */
@keyframes pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 720px) {
  main { padding: 8px 12px 14px; }
  .pick { margin: 0 4px; border-radius: var(--r-md); }
  .vs { margin: 30px 6px; }
  footer { margin: 0 10px 12px; padding: 10px 12px; gap: 0; }
  footer a { padding: 5px 8px; font-size: 11px; }
  footer .sep { display: none; }
  .textbox { padding: 18px 22px; font-size: 14px; }
  .textpage .prose { padding: 20px 22px; }

  /* Picks page: stack winner / vs / loser vertically so each canvas
     gets a comfortable width on phones, and shrink the canvas height
     so a row still fits in one screen-eyeful. */
  .picks-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .picks-cell { height: 130px; }
  .picks-vs   { padding: 2px 0; }
  .picks-meta {
    position: static;
    justify-content: center;
    margin-top: 2px;
  }
  .picks-modal-pair  { flex-direction: column; gap: 10px; }
  .picks-modal-card  { height: min(34vh, 280px); }
  .picks-modal-inner { padding: 22px 18px 18px; }

  /* Best page on mobile: the desktop layout crammed the firework
     canvas + chips + footer all into one viewport, which left the
     burst impossible to actually see on a phone. Switch the whole
     document to natural-flow scrolling — html and body both grow
     past viewport, the canvas takes 60vh, chips stack one per
     line, and the footer sits at the bottom of the content (you
     scroll down to reach it).

     Both html AND body need overflow released here. The site-wide
     rule `html, body { overflow: hidden; height: 100% }` clips body
     scroll if html stays hidden — undoing the body override does
     nothing without also undoing html's. :has() lets us flip html
     conditionally without touching the other pages. */
  html:has(body[data-page="best"]),
  body[data-page="best"] {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  body[data-page="best"] main {
    /* main is no longer the scrolling region — it sizes to its
       content so html's natural scroll covers the page. */
    flex: none;
  }
  body[data-page="best"] #best {
    /* Size to content (overrides .view's flex:1). KEEP the default
       display:flex / flex-direction:column from .view — the
       Best/Worst pill toggle uses `align-self: center` to center
       itself, which only works while #best stays a flex column. */
    flex: none;
  }
  body[data-page="best"] .best-stage {
    flex: none;
    height: 60vh;
    min-height: 280px;
  }
  body[data-page="best"] .meta {
    /* Chips one per line so each stat is clearly readable. */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body[data-page="best"] .meta .chip {
    width: 100%;
    justify-content: flex-start;
  }
}