/* V5 · Big Corners, on top of V2's and V4's game styles: the betting
   panel's live cards, the big corners, lite mode, and V6's soft crash. */

/* The dock's cards hold two faces in one cell: the controls between rounds,
   and live figures while a round is on (game.mjs, updateLive). The card
   keeps its size, so nothing on the page moves when they trade places. The
   selectors carry the shell's id to outrank V2's dimming of locked cards. */
#game-shell :is(.bet-card, .auto-card) { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-content: center; }
#game-shell :is(.bet-card, .auto-card) > * { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
#game-shell .card-controls { transition: opacity .3s .1s, transform .4s .1s cubic-bezier(.2, .8, .3, 1), visibility 0s; }
#game-shell .card-live { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s .3s; }
#game-shell.in-play .card-controls { opacity: 0; visibility: hidden; transform: translateY(-10px); filter: none; transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s .3s; }
#game-shell.in-play .card-live { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .3s .1s, transform .4s .1s cubic-bezier(.2, .8, .3, 1), visibility 0s; }
.live-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; align-items: center; }
.live-stake { color: #cfe0d8; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-profit { --roll-line: 1.2em; line-height: 1.2; color: var(--neon-bright); font-size: 24px; font-weight: 700; white-space: nowrap; text-shadow: 0 0 16px rgba(92, 240, 126, .35); transition: color .3s; }
.live-profit.down { color: #ff8b95; text-shadow: none; }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.live-head .card-label { margin: 0; }
.live-target { color: #f4faf6; font-size: 20px; font-weight: 700; line-height: 1; }
.live-meter { position: relative; height: 14px; overflow: hidden; border: 1px solid rgba(150, 230, 190, .22); border-radius: 999px; background: #0b1f1a; }
.live-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #1c7a40, #45dc6d 65%, #b6ff9e); box-shadow: 0 0 14px rgba(92, 240, 126, .55); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
/* Target reached: the meter lights up gold. */
.auto-card.reached .live-fill { background: linear-gradient(90deg, #d7a126, #f5d45c 60%, #fff0a6); box-shadow: 0 0 18px rgba(245, 212, 92, .7); }
.game:not(.auto-on) .live-meter { opacity: .35; }
@media (max-width: 600px), (max-width: 700px) and (min-height: 651px) {
  .live-row { min-height: 34px; }
  .live-stake { font-size: 17px; }
  .live-profit { font-size: 20px; }
  .live-target { font-size: 17px; }
  .live-head { margin-bottom: 6px; }
}
@media (max-height: 650px) and (min-width: 601px) {
  .live-row { min-height: 32px; }
  .live-profit { font-size: 19px; }
  .live-head { margin-bottom: 5px; }
  .live-meter { height: 11px; }
}

/* The big corners (v5/corners.mjs): each corner square with the rail tile
   and the column tile beside it, one L-shaped tile in the tiles' glass,
   with one "?" in its corner square. The glass is an SVG; the "?" and the
   value are boxes of their own. */
.corners { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.corner { position: absolute; --lit: 0; }
.corner-glass { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: none; }
.corner-shade { fill: rgba(0, 0, 0, .2); }
.corner-glow { fill: rgba(90, 255, 150, .34); opacity: calc(var(--lit) * .5); }
.corner-win, .corner-bust { opacity: 0; transition: opacity .35s; }
.corner-flash { opacity: 0; fill: rgba(225, 255, 235, .85); }
.corner-rim { fill: none; stroke: color-mix(in srgb, rgba(165, 228, 205, .22), rgba(120, 255, 170, .85) calc(var(--lit) * 100%)); stroke-width: 1; transition: stroke .3s; }
.corner-q, .corner-value { position: absolute; display: grid; place-items: center; line-height: 1; white-space: nowrap; font-weight: 600; }
.corner-q { color: #eef4f1; transition: opacity .28s, transform .38s cubic-bezier(.2, .8, .3, 1.5); }
.corner-value { color: #d2ffdb; opacity: 0; transition: opacity .2s; }
/* ~200 ms before impact its rim brightens, as a tile's does. */
.corner.approach .corner-rim { stroke: rgba(130, 255, 170, .9); stroke-width: 1.5; transition-duration: .16s; }
/* A hit: green glass, like a revealed tile, with the value in the middle
   of the arm along the rail. */
.corner.revealed .corner-win { opacity: 1; }
.corner.revealed .corner-rim { stroke: #72f692; }
.corner.revealed .corner-q, .corner.crashed .corner-q { opacity: 0; transform: scale(.7); transition-duration: .1s; }
.corner.revealed .corner-value { opacity: 1; }
/* A crash: cracked, dark red glass. */
.corner.crashed .corner-bust { opacity: 1; transition-duration: .12s; }
.corner.crashed .corner-rim { stroke: #ff7682; }
.corner.crashed .corner-flash { fill: rgba(255, 220, 220, .9); }
/* Back to "?": the value and the cracks fade, the glass dims to plain. */
.corner.resetting .corner-win, .corner.resetting .corner-bust, .corner.resetting .corner-cracks, .corner.resetting .corner-value { opacity: 0; transition: opacity .2s var(--reset-delay, 0s); }
.corner.resetting .corner-q { opacity: 0; transform: scale(.7); }
/* V6's bumpers: mirrors that only bounce the rocket, so no "?" and no
   value; silver streaks, and a silver rim that still catches the rocket's
   light. */
.corner-mirror { opacity: 0; }
.corners.bumpers .corner-mirror { opacity: 1; }
.corners.bumpers :is(.corner-q, .corner-value) { display: none; }
.corners.bumpers .corner-rim { stroke: color-mix(in srgb, rgba(210, 240, 230, .36), rgba(150, 255, 190, .85) calc(var(--lit) * 100%)); }

/* The dock is nearly opaque, so it skips V2's live blur of the sky behind
   it, which costs a lot while the sky moves every frame. */
.dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(7, 18, 15, .9); }
/* Lite (phones, and devices whose frames run long; game.mjs): fewer
   layers on the move. The tiles stop breathing and the glass's sweep holds. */
.lite .tile-front::before { animation: none; opacity: .6; }
.lite .board-glass { animation: none; }
/* The camera moves the stage often (a kick on every hit): keep it on a
   layer of its own, so a move never repaints the tiles. */
.stage { will-change: transform; }
/* Cash out's glow pulses as the opacity of a halo behind the button, which
   stays on the compositor, instead of repainting the button's shadow every
   frame of the flight. */
#game-shell .action.cashout { animation: none; }
.action-wrap::before { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 0 38px rgba(70, 240, 120, .55); opacity: 0; pointer-events: none; }
.action-wrap:has(.action.cashout)::before { animation: cashout-halo 2.4s ease-in-out infinite alternate; }
@keyframes cashout-halo { from { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .action-wrap:has(.action.cashout)::before { animation: none; opacity: .6; }
}

/* V6's soft crash (data-crash="soft"): the struck tile flips to amber,
   cracked, showing what it cut the multiplier by, and the readout rolls
   down in amber for a moment while the rocket flies on. */
.tile.soft:not(.resetting) .tile-back { border-color: #ffb45c; background: linear-gradient(180deg, rgba(168, 92, 26, .84), rgba(96, 40, 12, .84)); box-shadow: 0 0 18px rgba(255, 150, 60, .42), inset 0 0 14px rgba(255, 190, 120, .22); color: #ffe6c2; transition-duration: .1s; }
.tile.soft .tile-flash { background: radial-gradient(circle, rgba(255, 236, 214, .95), rgba(255, 150, 60, .55) 42%, transparent 76%); }
.tile.soft .crack-line { stroke: rgba(60, 18, 4, .85); }
.tile.soft .crack-light { stroke: rgba(255, 222, 180, .34); }
.tile.soft .tile-value { position: relative; z-index: 1; }
.hud.soft .hud-label, .hud.soft .hud-result { color: #ffc98a; }
.hud.soft .hud-value { color: #ffe6c2; filter: drop-shadow(0 0 18px rgba(255, 170, 70, .42)) drop-shadow(0 6px 22px rgba(0, 0, 0, .5)) saturate(1); }
.hud.soft .hud-times { color: #ffb45c; }
.hud.soft .hud-glow { background: radial-gradient(closest-side, rgba(255, 170, 70, .28), rgba(255, 150, 50, .08) 55%, transparent); opacity: .7; }