/* V8 · Cruise, on top of V2's, V4's, V5's, and V7's game styles: the
   readout in the middle of the deck. The rocket no longer parks under it,
   so it sits at the deck's center, not above it. */
.hud { top: 50%; transform: translate(-50%, -50%); }
/* The number itself is centered, with the × hanging off its right: a
   hidden × on its left balances the one on its right. */
.hud-value::before { content: '×'; visibility: hidden; margin-right: .05em; font-size: .74em; }

/* Previous rounds (v8/rounds.mjs): a chip for each of the latest results,
   newest first, in the header between the logo and the tools. Cash outs
   are green, brighter from 3× and gold from 10×; crashes are 0.00× in red.
   When chips are cut off at the strip's end, they fade out there. */
.rounds { display: flex; flex: 1 1 0; align-items: center; gap: 10px; min-width: 0; height: 30px; margin-left: 12px; color: #82928c; cursor: default; }
.rounds-icon { flex: none; width: 18px; height: 18px; stroke-width: 1.9; }
/* The list's padding, taken back by its margin, leaves the chips' glow and
   their pop-in room inside its clip. It is positioned so the clip holds the
   chips' screen-reader text too, or the chips cut off would widen the page. */
.rounds-list { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; margin: -8px -8px -8px -6px; padding: 8px 8px 8px 6px; overflow: hidden; list-style: none; }
.rounds.overflow .rounds-list { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 52px), transparent calc(100% - 8px)); mask: linear-gradient(90deg, #000 calc(100% - 52px), transparent calc(100% - 8px)); }
.rounds-empty { display: none; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.rounds.empty .rounds-empty { display: block; }
.rounds.empty .rounds-list { display: none; }
.round-chip { flex: none; display: grid; place-items: center; min-width: 60px; height: 28px; padding: 0 11px; border: 1px solid rgba(165, 228, 205, .16); border-radius: 999px; background: rgba(8, 20, 17, .82); color: #cfe0d8; font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.round-times { margin-left: .06em; font-size: .86em; opacity: .8; }
.round-chip.won { border-color: rgba(92, 240, 126, .36); background: linear-gradient(180deg, rgba(30, 96, 54, .62), rgba(12, 52, 30, .72)); color: #8ff5a8; }
.round-chip.won.tier-0 { border-color: rgba(120, 220, 160, .24); background: rgba(14, 40, 28, .8); color: #b9e8c6; }
.round-chip.won.tier-2 { border-color: #72f692; background: linear-gradient(180deg, rgba(56, 172, 88, .72), rgba(26, 106, 52, .76)); box-shadow: 0 0 12px rgba(80, 240, 120, .34), inset 0 0 8px rgba(150, 255, 180, .2); color: #e4ffea; }
.round-chip.won.tier-3 { border-color: rgba(255, 226, 128, .9); background: linear-gradient(180deg, rgba(200, 152, 42, .76), rgba(122, 84, 14, .8)); box-shadow: 0 0 14px rgba(245, 200, 80, .45), inset 0 0 8px rgba(255, 240, 170, .24); color: #fff7cf; }
.round-chip.crashed { border-color: rgba(255, 110, 124, .32); background: rgba(56, 12, 20, .74); color: #ff8b95; }

/* Tablets and phones held upright, and narrower windows: the header has no
   room between the logo and the tools, so the rounds take a row of their
   own under it. The tools keep the header's height on the first row. */
@media (max-width: 1099px) and (min-height: 501px), (max-width: 559px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar-tools { min-height: inherit; }
  .rounds { order: 1; flex: 1 0 100%; height: 26px; margin-left: 0; gap: 8px; }
  .rounds-icon { width: 16px; height: 16px; }
  .rounds-list { gap: 5px; }
  .round-chip { min-width: 52px; height: 24px; padding: 0 9px; font-size: 12px; }
  .rounds-empty { font-size: 10px; }
}
/* Phones on their side: the header stays one row, so the deck keeps its
   height, with smaller chips; on the narrower ones the orb stands for the
   wordmark, to leave the chips room. */
@media (max-height: 500px) and (min-width: 560px) {
  .rounds { height: 26px; margin-left: 4px; gap: 8px; }
  .rounds-icon { width: 15px; height: 15px; }
  .rounds-list { gap: 5px; }
  .round-chip { min-width: 48px; height: 24px; padding: 0 8px; font-size: 11.5px; }
  .rounds-empty { font-size: 10px; }
}
@media (max-height: 500px) and (min-width: 560px) and (max-width: 739px) {
  .wordmark { display: none; }
}

/* Phones (V2's one-column dock): one card above the button at a time.
   Between rounds it is the bet card. Once a round is on, the auto card
   takes its place, its switch and target still live so the target can
   move in flight (game.mjs, autoOpen), with its meter under them; it hands
   back when the board resets. The two share the bet card's glass, so
   nothing on the page moves when they trade places. Autoplay's switch
   stays on bigger screens. */
.auto-meter { display: none; }
@media (max-width: 600px), (max-width: 700px) and (min-height: 651px) {
  #game-shell .dock-cards > :is(.bet-card, .auto-card) { grid-area: 1 / 1; }
  #game-shell .action-wrap { grid-area: 2 / 1; }
  #game-shell .auto-card { border-color: transparent; background: none; }
  #autoplay-toggle, #game-shell .auto-card .card-live { display: none; }
  .auto-meter { display: block; height: 6px; margin-top: 8px; }
  /* In a round the bet card's live figures give way too. */
  #game-shell.in-play .bet-card .card-live { opacity: 0; visibility: hidden; }
  /* The auto card's controls come and go the way V5's live figures do. */
  #game-shell .auto-card .card-controls { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s .3s; }
  #game-shell.in-play .auto-card .card-controls { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .1s, transform .4s .1s cubic-bezier(.2, .8, .3, 1), visibility 0s; }
  /* Live in flight, so not dimmed with the locked bet; they dim once the
     round is over. */
  #game-shell.in-play .auto-card :is(#auto-toggle, .target-row) { opacity: 1; filter: none; }
  #game-shell.in-play .auto-card :is(#auto-toggle:disabled, .target-row:has(:disabled)) { opacity: .55; filter: saturate(.6); }
}

/* The menu (v8/menu.mjs): the hamburger at the end of the tools, whose
   bars cross into an X while it is open, and a glass panel under it with
   everything but the wallet, in the dock's type: back to all versions,
   how to play, fair play, then the sound, music, and fullscreen switches.
   It is fixed to the page above the rocks in front of the deck, placed
   under the button as it opens. */
.menu-toggle[aria-expanded=true] { border-color: rgba(120, 255, 165, .5); background: rgba(40, 170, 90, .16); box-shadow: 0 0 16px rgba(60, 220, 110, .28), inset 0 0 10px rgba(92, 240, 126, .12); color: var(--neon-bright); }
.menu-icon .bar { transform-box: view-box; transform-origin: 12px 12px; transition: transform .32s cubic-bezier(.2, .8, .3, 1.2), opacity .2s; }
.menu-toggle[aria-expanded=true] .bar-top { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] .bar-mid { opacity: 0; transform: scaleX(.2); }
.menu-toggle[aria-expanded=true] .bar-bottom { transform: translateY(-5px) rotate(-45deg); }
.menu { position: fixed; z-index: 20; top: 0; right: 0; width: 256px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 72px); overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 16px; background: radial-gradient(ellipse at 100% 0, rgba(43, 227, 107, .12), transparent 62%), #07100d; box-shadow: 0 24px 60px -12px rgba(0, 6, 4, .9), 0 0 0 1px rgba(0, 0, 0, .45), 0 0 28px rgba(43, 227, 107, .1); font-family: 'Fredoka', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; transform-origin: top right; }
.menu::before { content: ''; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 255, 165, .75), transparent); pointer-events: none; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #d2e1da; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .12em; line-height: 1; text-align: left; text-transform: uppercase; transition: background .15s, color .15s; }
.menu-item svg { flex: none; width: 20px; height: 20px; stroke-width: 1.8; color: #8fae9f; transition: color .15s; }
.menu-item:hover, .menu-item:focus-visible { background: rgba(190, 255, 220, .07); color: #fff; }
.menu-item:hover svg, .menu-item:focus-visible svg, .menu-item[aria-pressed=true] svg { color: var(--neon-bright); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-label { flex: 1; white-space: nowrap; }
.menu-tag { flex: none; padding: 4px 8px; border: 1px solid rgba(92, 240, 126, .35); border-radius: 999px; color: var(--neon-bright); font-size: 10.5px; letter-spacing: .06em; }
.menu-rule { display: block; height: 1px; margin: 5px 10px; background: var(--line); }
.menu .switch { width: 34px; height: 20px; }
.menu .switch > span { width: 14px; height: 14px; }
.menu-item[aria-pressed=true] .switch { border-color: #2fb35e; background: #1c7a40; }
.menu-item[aria-pressed=true] .switch > span { transform: translateX(14px); background: #fff; }
@media (max-width: 760px) {
  .menu { width: 240px; }
  .menu-item { min-height: 44px; font-size: 12.5px; }
}

/* The rocks in front of the deck (V4's near layer) fade out over the
   header (--head, its bottom edge, set on resize), so none drifts across
   the balance or the buttons. */
.near { -webkit-mask: linear-gradient(transparent var(--head, 0px), #000 calc(var(--head, 0px) + 28px)); mask: linear-gradient(transparent var(--head, 0px), #000 calc(var(--head, 0px) + 28px)); }
/* On phones the balance sits on a dark pill of its own, so the rocks
   drifting by behind the header don't cross its icon and figures. */
@media (max-width: 680px) {
  .wallet { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 12, 9, .82); }
}
/* No pinch or double-tap zoom (see v8/game.mjs); a page taller than the
   screen still scrolls. */
html, body { touch-action: pan-x pan-y; }