/* cubes.css - the Cubes game (an isometric hop-and-flip pyramid climber,
   a copy of 1982's Q*bert). Reuses tokens from styles.css, game-shell.css's
   shell/bar/pause chrome, and .course-primary already defined for Sliders. */

.cubes-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 8px;
}

.cubes-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Real mobile: the shell's pause/mute/settings/close buttons float as an
   overlay directly on top of this row -- see game-shell.css's own comment
   and its shared --gs-bar-left-clear/--gs-bar-right-clear custom
   properties (also used by Slither/Spiders/Vines' own stats rows). */
@media (max-width: 480px) {
  .cubes-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
  }
}

.cubes-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.cubes-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.cubes-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.cubes-arena-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cubes-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Dusk-sky backdrop as a CSS fallback -- cubes.js paints the sky
     gradient + dust + pyramid over this every frame. Matches the
     canvas-drawn sky so the first paint (before JS runs) already
     reads as the scene, not a flat void. */
  background: linear-gradient(180deg, #0d1526 0%, #1d3257 55%, #0b0f1a 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
}

.cubes-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Lightened (was .72) so the sky + pyramid show through behind the
     title on the start screen, same posture as Slither's own overlay. */
  background: rgba(10, 13, 16, .55);
  border-radius: var(--radius);
}

.cubes-overlay[hidden] {
  display: none;
}

.cubes-overlay-card {
  text-align: center;
  padding: 24px;
}

.cubes-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.cubes-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.cubes-level-up {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(52, 211, 153, .5);
  color: #06170f;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 5;
}

.cubes-level-up[hidden] {
  display: none;
}

.cubes-level-up.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* Hop-direction hint arrows -- per explicit instruction ("draw tap dots
   on the direction controller for one hops", refined immediately after
   to "use tap arrows for absolute clarity in light blue (thick lines)").
   Since movement here is limited to exactly 4 diagonal pushes (see
   cubes.js's own header comment), unlike every other game's free/
   continuous joystick, these mark the 4 valid directions right on the
   stick itself so a first-time player doesn't have to guess. Each is a
   separate, explicitly-drawn SVG (a line plus a small corner
   arrowhead) rather than one shared shape rotated 4 ways -- simpler and
   less error-prone than getting rotation-angle math right for a
   diagonal that isn't a plain 90-degree step in screen space. Purely
   visual (`aria-hidden` on the whole joystick already covers these) --
   `.game-shell-joystick` is already `position: absolute`
   (game-shell.css), which is what makes it a valid positioning context
   for these; cubes-specific, not part of the shared joystick component,
   since no other game constrains movement to just 4 directions. */
.cubes-hop-arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cubes-hop-arrow path {
  fill: none;
  stroke: #7ee7ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cubes-hop-arrow-nw { top: 14%; left: 14%; }
.cubes-hop-arrow-ne { top: 14%; right: 14%; }
.cubes-hop-arrow-sw { bottom: 14%; left: 14%; }
.cubes-hop-arrow-se { bottom: 14%; right: 14%; }

/* Move joystick sized 10% larger than the shared site-wide control
   (game-shell.css's .game-shell-joystick, 96px/40px-nub), per explicit
   instruction ("increase the size of the control by 10%") -- scoped to
   Cubes only via #moveJoystick's own id, every other game's joystick is
   unaffected. 96 * 1.1 = 105.6px; the nub scaled the same 10% (40 -> 44).
   Increased a further 15% per a later explicit instruction ("increase
   the size of the control 15%") -- read as a fresh 15% on top of the
   CURRENT size (105.6px), same "each tuning instruction stacks onto
   wherever it currently stands" convention this project already uses
   for similar percentage tweaks elsewhere (e.g. Slither's per-level
   speed bonuses) -- 105.6 * 1.15 = 121.44px, then a further +10% per a
   later explicit follow-up (121.44 * 1.1 = 133.584px); the nub scales
   the same ratio each time (44 * 1.15 = 50.6px, then 50.6 * 1.1 =
   55.66px). Exposed as a custom property so the high-score-live counter
   below can position itself relative to it without duplicating the
   math. */
:root {
  --cubes-joy-size: 133.584px;
}

#moveJoystick.game-shell-joystick {
  width: var(--cubes-joy-size);
  height: var(--cubes-joy-size);
}

#moveJoystick .game-shell-joy-nub {
  width: 55.66px;
  height: 55.66px;
  margin: -27.83px 0 0 -27.83px;
}

/* Bottom stats cluster -- per explicit instruction ("remove coins. Put
   score down at the bottom next to high score"): the running Score
   (always visible) sits directly beside the live "beating the high
   score" counter below, both anchored left of the move joystick at the
   same bottom alignment it always used -- this is what freed the top
   .cubes-stats row down to just Level/Lives. */
.cubes-bottom-stats {
  position: absolute;
  bottom: 22px;
  right: calc(18px + var(--cubes-joy-size) + 12px);
  height: var(--cubes-joy-size);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  pointer-events: none;
}

.cubes-score-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 70px;
  color: var(--text);
}

.cubes-score-bottom-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
}

.cubes-score-bottom-value {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Live "you're now beating the high score" counter, per explicit
   instruction ("put the HIGH SCORE to the left of it and have it start
   counting there when they are setting the high score"). A flex child
   of .cubes-bottom-stats now (see above), same bottom alignment as
   before -- hidden by cubes.js (#cubesHighScoreLive) until the run's own
   score actually passes the fetched current #1, then it appears and
   counts up live with the score. Bright yellow per explicit follow-up
   instruction ("when the high score becomes their current high score
   make it bright yellow") -- classic arcade high-score coloring, and the
   one color on this page that's exclusively this counter's own. */
.cubes-highscore-live {
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #ffee00;
  text-shadow: 0 0 10px rgba(255, 238, 0, .5);
}

.cubes-highscore-live[hidden] {
  display: none;
}

.cubes-highscore-live-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}

.cubes-highscore-live-value {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}