/* ===========================================================================
   Infin8 Sk8er — title-specific styling only.

   The page frame, HUD chips, overlays, level pickers, information rail and
   every mobile hardening rule now come from ../assets/game-shell.css. What
   remains here is this title's own control surface: a two-button drive pad on
   the left thumb and the round trick pad whose four arrows ring a centred jump
   button, which is the layout this game's air tricks are built around.
   =========================================================================== */

/* --- touch controls ------------------------------------------------------ */

.drive-pad { display: grid; grid-template-columns: repeat(2, 62px); gap: 7px; align-items: center; }
.drive-pad .boost { justify-self: center; }

/* The trick pad is deliberately a ring, not a grid: the four flip directions
   sit outside a centred jump so a thumb can reach jump and any trick without
   crossing another button. */
.trick-pad {
  position: relative;
  flex: 0 0 204px; width: 204px; height: 204px;
  border: 1px solid rgba(181, 109, 255, 0.42); border-radius: 50%;
  background: rgba(7, 9, 24, 0.5);
  box-shadow: inset 0 0 30px rgba(181, 109, 255, 0.08);
}
.trick-button {
  position: absolute; z-index: 4;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(5, 8, 20, 0.72);
  color: #f7efff; font-size: 1.15rem; font-weight: 950;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); backdrop-filter: blur(9px);
  cursor: pointer;
}
/* Centred geometrically rather than by hand-measured offsets. The old numbers
   had to be recomputed for every pad size, and the jump button's horizontal
   offset was 5px short of centre at all three breakpoints - it sat visibly
   left of the arrow ring it is supposed to be the middle of. Percentages
   cannot drift when the pad is resized. `translate` is used instead of
   `transform` so the :active scale below does not overwrite the centring. */
.trick-button.up { top: 4px; left: 50%; translate: -50% 0; }
.trick-button.down { bottom: 4px; left: 50%; translate: -50% 0; }
.trick-button.left { top: 50%; left: 4px; translate: 0 -50%; }
.trick-button.right { top: 50%; right: 4px; translate: 0 -50%; }
.trick-button:active, .trick-button.active { transform: scale(0.92); background: rgba(99, 230, 255, 0.25); }

.jump-center {
  position: absolute; z-index: 5;
  top: 50%; left: 50%; translate: -50% -50%;
  width: 70px; height: 70px; min-width: 70px; min-height: 70px;
  font-size: 0.72rem; letter-spacing: 0.04em;
  /* The ring of page-coloured shadow separates jump from the arrows behind it. */
  box-shadow: 0 0 0 10px rgba(7, 9, 24, 0.88), 0 0 28px rgba(98, 231, 255, 0.42);
}

/* The action side sits slightly back so it never competes with the course. */
.touch-cluster { opacity: 0.78; }

@media (max-width: 760px) {
  .drive-pad { grid-template-columns: repeat(2, 54px); gap: 5px; }
  .touch-button { width: 54px; height: 54px; min-width: 54px; min-height: 54px; font-size: 0.62rem; }
  .trick-pad { flex-basis: 184px; width: 184px; height: 184px; }
  .trick-button { width: 40px; height: 40px; font-size: 1rem; }
  .trick-button.up { top: 1px; }
  .trick-button.down { bottom: 1px; }
  .trick-button.left { left: 1px; }
  .trick-button.right { right: 1px; }
  .jump-center { width: 62px; height: 62px; min-width: 62px; min-height: 62px; box-shadow: 0 0 0 8px rgba(7, 9, 24, 0.9), 0 0 22px rgba(98, 231, 255, 0.4); }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  .trick-pad { flex-basis: 190px; width: 190px; height: 190px; }
  .trick-button { width: 42px; height: 42px; }
  .trick-button.up { top: 1px; }
  .trick-button.down { bottom: 1px; }
  .trick-button.left { left: 1px; }
  .trick-button.right { right: 1px; }
  .jump-center { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }
}

/* The Infin8 multiplier chip appears only while a chain is alive, so it is
   allowed to be louder than the standing HUD chips around it. */
.hud-chip.infinity-chip {
  border-color: rgba(99, 230, 255, 0.75);
  background: linear-gradient(140deg, rgba(99, 230, 255, 0.22), rgba(182, 108, 255, 0.22));
  box-shadow: 0 0 18px rgba(99, 230, 255, 0.35);
}

.hud-chip.infinity-chip strong {
  color: #eafcff;
  letter-spacing: 0.04em;
}