/* ── Lio Galaxy Swing – game page only (loaded via /lio-galaxy-swing/) ──
   The global rocket cursor (js/motion.js) stays untouched everywhere else:
   the game toggles body.lio-game-active while a round is running and only
   these scoped rules hide the global cursor for that window of time. */

body.lio-game-active .planet-cursor { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  body.lio-game-active #lgs-stage { cursor: none; }
}
/* .lgs-section's own z-index (1, for its normal in-page stacking) is what
   actually gets compared against sibling sections/header/footer at the root
   — #lgs-stage's z-index:100 only wins *inside* .lgs-section's stacking
   context, it doesn't escape it. Without this bump, header (z-index:100) and
   footer (z-index:1, tied with .lgs-section but later in the DOM) both paint
   over the fullscreen game during a live round. Stays below the cookie
   banner (z-index:300) intentionally — consent UI should stay reachable. */
body.lio-game-active .lgs-section { z-index: 200; }

/* ── Layout ── */
.lgs-section { position: relative; z-index: 1; padding: 18px 28px 24px; }
/* translate: none overrides the site-wide .motion-reveal entrance animation
   (which otherwise leaves a non-"none" translate on this element after it
   plays) — any non-"none" translate/transform on an ancestor creates a new
   containing block for position:fixed descendants, which broke .lgs-stage's
   fullscreen takeover below: it was pinning to this element's box instead of
   the real viewport, exposing page content (footer etc.) instead of covering it. */
.lgs-inner { max-width: 1180px; margin: 0 auto; translate: none !important; }

.lgs-stage {
  position: relative;
  height: min(84vh, 780px);
  min-height: 540px;
  border-radius: 26px;
  border: 1px solid rgba(79,152,202,.32);
  background:
    radial-gradient(circle at 80% 12%, rgba(122,90,200,.22), transparent 52%),
    radial-gradient(circle at 12% 85%, rgba(79,152,202,.18), transparent 55%),
    linear-gradient(165deg, rgba(16,29,52,.94), rgba(20,36,63,.92));
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.lgs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* The [hidden] attribute must always win, even over classes that set
   their own display value (e.g. the inline-flex highscore badge). */
.lgs-stage [hidden],
.lgs-history[hidden],
.lgs-leaderboard[hidden] { display: none !important; }

/* ── HUD ── */
.lgs-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
[data-state="countdown"] .lgs-hud,
[data-state="playing"] .lgs-hud,
[data-state="paused"] .lgs-hud { opacity: 1; }
.lgs-hud-item {
  min-width: 96px; text-align: center;
  background: rgba(13,23,41,.68); border: 1px solid rgba(79,152,202,.3);
  border-radius: 14px; padding: 8px 18px 10px; backdrop-filter: blur(8px);
}
.lgs-hud-label { display: block; font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(234,241,251,.6); margin-bottom: 2px; }
.lgs-hud-value { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 21px; color: #fff; }
.lgs-hud-time .lgs-hud-value { color: #F4B400; }
.lgs-hud-combo { transition: border-color .25s ease, box-shadow .25s ease; }
.lgs-hud-combo.is-x2 { border-color: rgba(158,203,232,.6); box-shadow: 0 0 18px rgba(79,152,202,.35); }
.lgs-hud-combo.is-x2 .lgs-hud-value { color: #9ecbe8; }
.lgs-hud-combo.is-x3 { border-color: rgba(244,180,0,.65); box-shadow: 0 0 22px rgba(244,180,0,.4); animation: lgsComboPulse 1.1s ease-in-out infinite; }
.lgs-hud-combo.is-x3 .lgs-hud-value { color: #F4B400; text-shadow: 0 0 14px rgba(244,180,0,.7); }
@keyframes lgsComboPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(244,180,0,.3); }
  50% { box-shadow: 0 0 26px rgba(244,180,0,.55); }
}

/* ── Exit button (bottom-right, active states only) ── */
.lgs-exit {
  position: absolute; right: 22px; bottom: 20px; z-index: 6;
  display: none; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(13,23,41,.72); border: 1px solid rgba(79,152,202,.4);
  color: rgba(234,241,251,.85); font-family: 'Montserrat', sans-serif;
  font-size: 13.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px);
  transition: border-color .2s, color .2s, background .2s;
}
.lgs-exit:hover { border-color: #F4B400; color: #F4B400; background: rgba(244,180,0,.12); }
[data-state="countdown"] .lgs-exit,
[data-state="playing"] .lgs-exit,
[data-state="paused"] .lgs-exit { display: inline-flex; }

/* ── Overlays ── */
.lgs-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 26px; overflow-y: auto;
}
/* When content overflows a centered flex column, the top edge is
   unreachable by scroll in some browsers; "safe center" falls back to
   start-alignment instead so the title/kicker stay scrollable into view. */
@supports (justify-content: safe center) {
  .lgs-overlay { justify-content: safe center; }
}
.lgs-overlay-intro, .lgs-overlay-paused, .lgs-overlay-result, .lgs-fallback {
  background: rgba(13,23,41,.6); backdrop-filter: blur(7px);
}
[data-state="intro"] .lgs-overlay-intro { display: flex; }
[data-state="countdown"] .lgs-overlay-count { display: flex; }
[data-state="paused"] .lgs-overlay-paused { display: flex; }
[data-state="result"] .lgs-overlay-result { display: flex; }

.lgs-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(26px, 3.6vw, 42px); margin: 4px 0 8px; color: #fff; letter-spacing: .5px; }
.lgs-desc { font-size: 16.5px; line-height: 1.55; color: rgba(234,241,251,.78); margin: 0 0 4px; max-width: 480px; }
.lgs-instruction { font-size: 14.5px; line-height: 1.5; color: rgba(234,241,251,.62); margin: 10px 0 0; max-width: 440px; }
.lgs-instruction-pw { margin-top: 4px; color: rgba(244,180,0,.8); }
.lgs-paused-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; color: #fff; }

.lgs-highscore-chip {
  display: inline-flex; align-items: center; gap: 9px; margin: 10px 0 0;
  padding: 7px 18px; border-radius: 999px;
  border: 1px solid rgba(244,180,0,.5); background: rgba(244,180,0,.1);
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; color: #F4B400;
}
.lgs-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 16px; }

/* ── Username field (intro) ── */
.lgs-username-field { margin: 14px 0 0; width: min(320px, 100%); text-align: left; }
.lgs-username-label {
  display: block; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: rgba(234,241,251,.6); margin-bottom: 6px;
}
.lgs-username-input {
  width: 100%; padding: 12px 16px; border-radius: 12px;
  border: 1px solid rgba(79,152,202,.35); background: rgba(255,255,255,.06);
  color: #eaf1fb; font-family: 'Montserrat', sans-serif; font-size: 15px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.lgs-username-input::placeholder { color: rgba(234,241,251,.4); }
.lgs-username-input:focus { border-color: #F4B400; box-shadow: 0 0 0 3px rgba(244,180,0,.16); background: rgba(255,255,255,.09); }
.lgs-username-error { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: #ff7a7a; }

/* Intro / fallback mini rig (rocket + cord + Lio) */
.lgs-rig { display: flex; flex-direction: column; align-items: center; margin: 10px 0 4px; }
.lgs-rig-rocket { width: 30px; height: auto; filter: drop-shadow(0 0 10px rgba(158,203,232,.6)); }
.lgs-rig-cord { width: 40px; height: 58px; margin: -4px 0 -6px; }
.lgs-rig-lio {
  width: 58px; height: auto; transform-origin: top center;
  animation: lgsRigSwing 4.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 26px rgba(244,180,0,.35));
}
@keyframes lgsRigSwing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

/* ── Rocket selection (intro) ── */
.lgs-select { display: flex; align-items: center; gap: 30px; margin: 8px 0 0; }
.lgs-select-arrow {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(79,152,202,.5);
  background: rgba(255,255,255,.05); color: #eaf1fb; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.lgs-select-arrow svg { width: 10px; height: 15px; }
.lgs-select-arrow:hover { border-color: #F4B400; color: #F4B400; background: rgba(244,180,0,.14); transform: scale(1.06); }
.lgs-rig-select { margin: 0; min-width: 100px; }
.lgs-rig-select .lgs-rig-rocket { width: 32px; }
.lgs-rig-select .lgs-rig-cord { height: 36px; }
.lgs-rig-select .lgs-rig-lio { width: 46px; }
.lgs-rig-select .lgs-rig-rocket.is-swap { animation: lgsRocketSwap .28s cubic-bezier(.16,1,.3,1); }
@keyframes lgsRocketSwap {
  0% { transform: scale(.7); opacity: .3; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.lgs-select-label { margin: 8px 0 0; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(234,241,251,.6); }
.lgs-select-dots { display: flex; gap: 8px; margin-top: 8px; }
.lgs-select-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(234,241,251,.25); transition: background .2s, transform .2s; }
.lgs-select-dot.is-active { background: #F4B400; transform: scale(1.3); box-shadow: 0 0 8px rgba(244,180,0,.7); }
.lgs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Countdown ── */
.lgs-overlay-count { pointer-events: none; background: transparent; }
.lgs-count-num {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: clamp(84px, 13vw, 150px); color: #F4B400;
  text-shadow: 0 0 44px rgba(244,180,0,.55);
}
.lgs-count-num.is-pop { animation: lgsCountPop .68s cubic-bezier(.16,1,.3,1) both; }
@keyframes lgsCountPop {
  0% { transform: scale(.35); opacity: 0; }
  45% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Result ── */
.lgs-result-headline { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); margin: 6px 0 10px; color: #fff; }
.lgs-result-note { font-size: 15.5px; line-height: 1.55; color: rgba(234,241,251,.72); margin: 0; max-width: 480px; }
.lgs-result-near { margin-top: 14px; color: #9ecbe8; }
.lgs-result-stats { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.lgs-stat {
  min-width: 130px; padding: 16px 22px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(79,152,202,.26);
}
.lgs-stat-num { display: block; font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 26px; color: #fff; margin-bottom: 4px; }
.lgs-stat-label { font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: rgba(234,241,251,.6); }

.lgs-newhigh {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 10px 24px; border-radius: 999px;
  background: rgba(244,180,0,.16); border: 1px solid rgba(244,180,0,.65);
  font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 800; color: #F4B400;
  box-shadow: 0 0 30px rgba(244,180,0,.35);
  animation: lgsNewHigh .7s cubic-bezier(.16,1,.3,1) both;
}
.lgs-newhigh-burst { display: inline-block; animation: lgsBurstSpin 1.6s ease-in-out infinite; }
@keyframes lgsNewHigh {
  0% { transform: scale(.5); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes lgsBurstSpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.35); }
}

/* ── Result: placement mini-list ── */
.lgs-result-placement { margin-top: 22px; width: min(380px, 100%); }
.lgs-result-placement-title {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: rgba(234,241,251,.6);
  margin-bottom: 10px;
}
.lgs-result-placement-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lgs-placement-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; border-radius: 12px; font-size: 13.5px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(79,152,202,.2);
}
.lgs-placement-row.is-current {
  background: rgba(244,180,0,.12); border-color: rgba(244,180,0,.6);
  box-shadow: 0 0 18px rgba(244,180,0,.15);
}
.lgs-placement-rank { font-family: 'Orbitron', sans-serif; font-weight: 700; color: rgba(234,241,251,.6); min-width: 34px; text-align: left; }
.lgs-placement-date { flex: 1; text-align: left; color: rgba(234,241,251,.6); font-size: 12.5px; white-space: nowrap; }
.lgs-placement-score { font-family: 'Orbitron', sans-serif; font-weight: 700; color: #fff; }
.lgs-placement-row.is-current .lgs-placement-rank,
.lgs-placement-row.is-current .lgs-placement-score { color: #F4B400; }

/* ── Result: global rank ── */
.lgs-result-global { margin-top: 18px; }
.lgs-result-global-title {
  display: block; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: rgba(234,241,251,.6); margin-bottom: 6px;
}
.lgs-result-global-rank { margin: 0; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 18px; color: #9ecbe8; }

/* ── Scroll hint to the highscore list (result state only) ── */
.lgs-scroll-hint {
  position: absolute; right: 22px; bottom: 20px; z-index: 11;
  display: none; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 15px; border-radius: 14px;
  background: rgba(13,23,41,.72); border: 1px solid rgba(244,180,0,.45);
  color: #F4B400; font-family: 'Orbitron', sans-serif; font-size: 10px;
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s;
}
.lgs-scroll-hint:hover { background: rgba(244,180,0,.15); border-color: #F4B400; }
[data-state="result"] .lgs-scroll-hint:not([hidden]) { display: inline-flex; }
.lgs-scroll-hint-chevron { width: 14px; height: 9px; animation: lgsHintBob 1.6s ease-in-out infinite; }
@keyframes lgsHintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ── Global leaderboard + local highscore list (below the stage) ── */
.lgs-leaderboard { max-width: 720px; margin: 44px auto 0; }
.lgs-history { max-width: 720px; margin: 44px auto 0; }
.lgs-history-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 21px; color: #fff; text-align: center; margin: 0 0 18px; letter-spacing: .5px; }
.lgs-history-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(79,152,202,.26);
  border-radius: 22px; padding: 8px 26px; backdrop-filter: blur(8px);
  overflow-x: auto;
}
.lgs-history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lgs-history-table th {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: rgba(234,241,251,.55);
  text-align: left; padding: 14px 10px 10px; border-bottom: 1px solid rgba(79,152,202,.28);
  white-space: nowrap;
}
.lgs-history-table td { padding: 12px 10px; border-bottom: 1px solid rgba(79,152,202,.12); color: rgba(234,241,251,.85); white-space: nowrap; }
.lgs-history-table tbody tr:last-child td { border-bottom: none; }
th.lgs-history-num, td.lgs-history-num { text-align: right; }
.lgs-history-rank { font-family: 'Orbitron', sans-serif; font-weight: 700; color: rgba(234,241,251,.6); width: 34px; }
.lgs-history-score { font-family: 'Orbitron', sans-serif; font-weight: 700; color: #fff; }
tr.is-top .lgs-history-rank,
tr.is-top .lgs-history-score { color: #F4B400; text-shadow: 0 0 12px rgba(244,180,0,.45); }
.lgs-history-rocket-img { width: 12px; height: auto; display: inline-block; vertical-align: middle; }
.lgs-history-new {
  display: inline-block; margin-left: 9px; padding: 2px 9px; border-radius: 999px;
  background: rgba(79,152,202,.2); border: 1px solid rgba(79,152,202,.55);
  color: #9ecbe8; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; vertical-align: middle;
}
.lgs-history-note { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: rgba(234,241,251,.5); }

/* ── Touch / small-screen fallback ── */
.lgs-fallback { display: none; }
.lgs-stage.lgs-unsupported .lgs-overlay { display: none; }
.lgs-stage.lgs-unsupported .lgs-hud,
.lgs-stage.lgs-unsupported .lgs-exit { display: none; }
.lgs-stage.lgs-unsupported .lgs-fallback { display: flex; }
.lgs-rig-static .lgs-rig-lio { animation-duration: 6s; }

@media (max-width: 1023.98px) {
  .lgs-section { padding: 28px 18px 40px; }
  .lgs-stage { min-height: 460px; height: auto; padding: 40px 0; }
  .lgs-stage .lgs-overlay { position: relative; inset: auto; }
}

/* Fullscreen only while a round is actually live (countdown/playing/paused)
   on touch/coarse-pointer devices — a desktop mouse user who just narrows
   their browser window below 1024px must NOT get a fixed-position takeover
   of their page, so this is gated on (pointer: coarse) too, not width alone.
   Intro and result/leaderboard stay in normal page flow, unchanged. */
@media (max-width: 1023.98px) and (pointer: coarse) {
  .lgs-stage[data-state="countdown"],
  .lgs-stage[data-state="playing"],
  .lgs-stage[data-state="paused"] {
    position: fixed; inset: 0; z-index: 100;
    width: 100vw; height: 100dvh;
    margin: 0; padding: 0; border-radius: 0; border: none;
    overscroll-behavior: contain;
    /* The stage's own background gradient tops out at ~92-94% opacity — fine
       when embedded in-page (nothing but matching page background sits
       behind it), but during this fullscreen takeover the real page content
       (footer etc.) is still sitting right behind it and would bleed through
       without an opaque base layer underneath the gradient. */
    background-color: #0d1729;
  }
  .lgs-stage[data-state="countdown"] .lgs-overlay,
  .lgs-stage[data-state="playing"] .lgs-overlay,
  .lgs-stage[data-state="paused"] .lgs-overlay {
    position: absolute; inset: 0;
  }

  /* Safe-area clearance for notches/home-indicator while fullscreen. */
  .lgs-stage[data-state="countdown"] .lgs-hud,
  .lgs-stage[data-state="playing"] .lgs-hud,
  .lgs-stage[data-state="paused"] .lgs-hud {
    padding-top: max(18px, env(safe-area-inset-top, 0px));
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }
  .lgs-stage[data-state="countdown"] .lgs-exit,
  .lgs-stage[data-state="playing"] .lgs-exit,
  .lgs-stage[data-state="paused"] .lgs-exit {
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    right: max(22px, env(safe-area-inset-right, 0px));
  }
}

/* Touch tap-target sizing — coarse-pointer devices only, independent of
   viewport width (a touch laptop/tablet gets the same treatment). */
@media (pointer: coarse) {
  .lgs-stage .lgs-select-arrow { width: 46px; height: 46px; }
  .lgs-exit { min-height: 44px; padding: 12px 20px; }
  .lgs-scroll-hint { min-height: 44px; }
  .lgs-stage .btn-primary,
  .lgs-stage .btn-outline { min-height: 44px; padding: 13px 22px; }
}

/* ── Accessibility ── */
.lgs-stage button:focus-visible,
.lgs-stage a:focus-visible {
  outline: 2px solid #F4B400;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lgs-rig-lio { animation: none; }
  .lgs-rig-select .lgs-rig-rocket.is-swap { animation: none; }
  .lgs-select-arrow:hover { transform: none; }
  .lgs-hud-combo.is-x3 { animation: none; }
  .lgs-newhigh { animation-duration: .01ms; }
  .lgs-newhigh-burst { animation: none; }
  .lgs-scroll-hint-chevron { animation: none; }
  .lgs-count-num.is-pop { animation-duration: .2s; }
}