/* =================== Crash (mobile button redesign) =================== */
/* Crash's action bar is the same Bet / Cash out pair as Mines, except the
   round is global so the contextual primary depends on the player's position
   in the cycle:
     - During 'waiting' with no live bet → Place bet is the obvious move.
     - During 'running' with a live bet  → Cash out is the obvious move.
   The JS (crash.js) toggles `.is-legal` on whichever button is currently
   actionable; the desktop layout (panel column with both stacked) is
   untouched.

   The .gp-actions-original parent appears at runtime (game-nav.js
   flattens .gp-panel descendants on mobile); selectors target the buttons
   via #id and via that wrapper so both layouts pick up the mobile sizing. */
@media (max-width: 768px) {
  /* Crash's only utility button is Presets — there's no second secondary
     to pair with. Override the generic .gp-actions-original 50%-wide rule
     so Presets stays full-width like the desktop layout, instead of
     orphaning half a row. */
  #crash-presets-btn,
  .gp-actions-original #crash-presets-btn {
    flex: 1 1 100%;
    min-height: 40px;
    padding: 9px 12px;
    font-size: 13px;
  }
}
@media (max-width: 720px) {
  #start,
  #cashout,
  .gp-actions-original #start,
  .gp-actions-original #cashout {
    flex: 1 1 calc(50% - 6px);
    min-height: 40px;
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.1;
  }
  /* Whichever button is currently legal becomes the obvious move. */
  #start.is-legal,
  #cashout.is-legal,
  .gp-actions-original #start.is-legal,
  .gp-actions-original #cashout.is-legal {
    flex-basis: 100%;
    min-height: 44px;
    font-size: 14px;
  }
  /* Hide the non-legal one — phones stay focused on the live action. */
  #start:not(.is-legal),
  #cashout:not(.is-legal),
  .gp-actions-original #start:not(.is-legal),
  .gp-actions-original #cashout:not(.is-legal) {
    display: none !important;
  }
}

/* ========== High-mult intensity effects ========== */
/* Once the rocket pins at the top-right ceiling (around mult=20×+) the
 * position can't grow any further — but the multiplier can. These
 * layers keep the screen alive past that point so it never reads as
 * "frozen at the corner": speed lines streaming right→left as a
 * parallax cue, plus a soft glow halo at the rocket's resting spot. */

/* Speed-line container — sits behind the rocket SVG so streaks pass
 * underneath. inset:0 covers the whole stage. */
.crash-speed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Each streak. JS sets top/right/width/opacity/animation-duration
 * inline per spawn, plus the --crash-speed-distance custom prop that
 * drives the keyframe end-position so the streak fully exits the
 * stage regardless of width. */
.crash-speed-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .9) 30%,
    rgba(180, 220, 255, .85) 65%,
    transparent 100%
  );
  border-radius: 1px;
  filter: drop-shadow(0 0 4px rgba(160, 220, 255, .6));
  animation-name: crash-speed-line-travel;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
  --crash-speed-distance: -1200px;
}
@keyframes crash-speed-line-travel {
  0%   { transform: translateX(0);                            opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(var(--crash-speed-distance));  opacity: 0; }
}

/* Ceiling glow — a pulsing radial halo anchored to the rocket's
 * resting position (top-right). Hidden by default; JS fades opacity
 * in based on crashCeilingIntensity. The pulse is pure CSS so it
 * keeps animating even after the JS render loop pins the position. */
.crash-ceiling-glow {
  position: absolute;
  top: 70px;
  right: 80px;
  width: 220px;
  height: 220px;
  margin: -110px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 230, 120, .35) 0%,
    rgba(255, 200, 60, .18) 35%,
    rgba(255, 160, 40, .05) 65%,
    transparent 100%
  );
  filter: blur(2px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
  animation: crash-ceiling-glow-pulse 1.4s ease-in-out infinite;
}
@keyframes crash-ceiling-glow-pulse {
  0%, 100% { transform: scale(0.9); }
  50%      { transform: scale(1.15); }
}

/* ---- Parallax starfield ----
 *
 * Two layers populated once at init with random world-space positions.
 * crash.js applies a CSS transform of `-currentCam * parallaxFactor`
 * each frame to scroll them under the rocket. The factors are picked
 * to read as depth: far stars drift slowly (distant background), near
 * stars whip past faster than the camera (foreground motion blur).
 *
 * `inset: 0` + `overflow: visible` so the stars (which are absolutely
 * positioned at world coords past the inset bounds) still render once
 * the layer's transform brings them into view. The stage itself has
 * `overflow: hidden`, so any star projected outside the stage gets
 * clipped naturally — we never paint pixels we don't need. */
.crash-stars-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
  /* Explicit z-index so the layer order is robust against future
   * children that get their own z-index. Far below the trail (z:2),
   * rocket (z:3), boom layer (z:4), speed lines (z:1, also above
   * stars). DOM-order stacking would do the right thing today, but
   * pinning this avoids surprises when other layers gain stacking
   * contexts. */
  z-index: 0;
}
.crash-star {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(180, 210, 255, 0.5);
}
/* Far stars: dimmer/smaller halo, less glow — recede into the dark. */
.crash-stars-far .crash-star {
  box-shadow: 0 0 2px rgba(180, 210, 255, 0.35);
}
/* Near stars: brighter halo + heavier glow so they pop as they whip
 * past the rocket. Slight blue tint sells the "in space" feel. */
.crash-stars-near .crash-star {
  box-shadow: 0 0 7px rgba(200, 230, 255, 0.75);
}

/* Stage-shake transform comes from JS; we just guarantee a
 * transition so it doesn't visibly snap when JS clears it on crash. */
.gp-crash-stage {
  transition: transform 60ms linear;
}