/* ===========================================================================
   LoneWolfanCub — title-specific styling only.

   The page frame, HUD chips, overlays, information rail, touch dock behaviour
   and every mobile hardening rule now come from ../assets/game-shell.css. What
   remains here is what actually belongs to this title: its violet/gold accent
   over the shared Arcade cyan, the boss bar, and the two-handed combat pad
   geometry that its six actions need.
   =========================================================================== */

:root {
  /* LoneWolfanCub leans violet where the rest of the Arcade leans cyan. */
  --accent: #d56cff;
  --lw-gold: #ffce62;
}

body { background: radial-gradient(circle at 20% 0, rgba(40, 22, 77, 0.85) 0, transparent 35%), var(--bg); }

/* --- HUD ----------------------------------------------------------------- */

.hud-chip.cub strong { color: var(--lw-gold); }
.xp-chip { min-width: 140px; }

.stage-callout#level-banner {
  /* The level-up banner is a framed announcement, not the free-floating combo
     shout the shared callout draws by default. */
  position: static;
  transform: none;
  opacity: 1;
  max-width: 560px;
  margin-top: 46px;
  padding: 8px 11px;
  border: 1px solid var(--lw-gold);
  border-radius: 10px;
  background: rgba(36, 27, 8, 0.87);
  color: #ffe88e;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-shadow: none;
}

.boss-wrap { position: absolute; top: 96px; left: 14px; max-width: 520px; padding: 7px 9px; border: 1px solid #6c3553; border-radius: 10px; background: rgba(9, 6, 19, 0.87); }
.boss-wrap > span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.boss-wrap .progress-track { margin-top: 4px; border-color: #2a1422; }
.boss-wrap .progress-fill { width: 100%; background: linear-gradient(90deg, #ff426f, #ff9b62); }

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

/* Movement (up/left/right/down) on the left thumb, JUMP on its own between
   the pads, six combat actions on the right.
   The intended phone flip is UP then a direction, rolled with the SAME thumb
   across adjacent pad buttons inside the brief grace window in game.js - that
   only works if the pad isn't crowded. JUMP used to sit dead center of the
   movement pad, which both crowded that roll AND meant a simultaneous
   direction+JUMP combo needed two fingers from the same thumb's cramped
   quarter. Pulling JUMP into its own cluster fixes both: the movement pad is
   a clean up/left/right/down cross for the roll, and JUMP is reachable by the
   other thumb for a simultaneous flip too. The pads are grids rather than the
   shell's default flex row because the action count and thumb reach here need
   fixed positions the player can learn. */
.movement-pad { display: grid; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); gap: 7px; }
.movement-pad .move-up { grid-column: 2; grid-row: 1; }
.movement-pad .move-left { grid-column: 1; grid-row: 2; }
.movement-pad .move-right { grid-column: 3; grid-row: 2; }
.movement-pad .move-down { grid-column: 2; grid-row: 3; }
/* Four across, two deep: JUMP over SPIT in the first column, so the pad stays
   two rows tall. Height is the scarce axis on a landscape phone, and this is
   the orientation the game is really played in. */
.combat-pad { display: grid; grid-template-columns: repeat(4, 62px); grid-template-rows: 62px 62px; gap: 7px; }
.combat-pad .jump { grid-column: 1; grid-row: 1; }
.combat-pad .spit { grid-column: 1; grid-row: 2; background: rgba(77, 47, 201, 0.91); border-color: #967cff; }
.combat-pad .bomb { grid-column: 2; grid-row: 1; border-color: #69eafa; color: #9ff6ff; }
.combat-pad .cub { grid-column: 2; grid-row: 2; background: rgba(157, 91, 24, 0.91); border-color: var(--lw-gold); }
.combat-pad .bark { grid-column: 3; grid-row: 1; border-color: #ff709c; }
.combat-pad .regroup { grid-column: 3; grid-row: 2; color: var(--muted); }
.combat-pad .pause-touch { grid-column: 4; grid-row: 1; border-color: rgba(255,255,255,.48); color: #f5f7ff; }

/* LoneWolfanCub carries the tallest pad in the Arcade - a four-row combat block
   next to the movement cross - so it needs more of the portrait control band
   than the shell's default reserves. */
@media (pointer: coarse) and (orientation: portrait) {
  .game-stage { --dock-band: 268px; }
}

@media (max-width: 760px) {
  /* Seven actions do not fit four-across on a narrow phone, so the pad folds to
     two columns. JUMP and SPIT keep their column and stay adjacent, which is
     the pairing the flip depends on. */
  .movement-pad { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 6px; }
  .combat-pad { grid-template-columns: repeat(2, 56px); grid-template-rows: repeat(4, 56px); gap: 6px; }
  .combat-pad .bomb { grid-column: 1; grid-row: 1; }
  .combat-pad .bark { grid-column: 2; grid-row: 1; }
  .combat-pad .jump { grid-column: 1; grid-row: 2; }
  .combat-pad .cub { grid-column: 2; grid-row: 2; }
  .combat-pad .spit { grid-column: 1; grid-row: 3; }
  .combat-pad .regroup { grid-column: 2; grid-row: 3; }
  .combat-pad .pause-touch { grid-column: 2; grid-row: 4; }
  .touch-button { width: 56px; height: 56px; min-width: 56px; min-height: 56px; font-size: 0.6rem; }
  .boss-wrap { top: 74px; left: 8px; right: 8px; max-width: none; }
  .hud-chip:nth-child(n + 5) { display: none; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  /* Landscape has the width for the full four-across pad again, and needs it:
     folding to two columns here would make the dock four rows tall on the
     shortest screen the game runs on. */
  .combat-pad { grid-template-columns: repeat(4, 58px); grid-template-rows: 58px 58px; }
  .combat-pad .jump { grid-column: 1; grid-row: 1; }
  .combat-pad .spit { grid-column: 1; grid-row: 2; }
  .combat-pad .bomb { grid-column: 2; grid-row: 1; }
  .combat-pad .cub { grid-column: 2; grid-row: 2; }
  .combat-pad .bark { grid-column: 3; grid-row: 1; }
  .combat-pad .regroup { grid-column: 3; grid-row: 2; }
  .combat-pad .pause-touch { grid-column: 4; grid-row: 1; }
  .movement-pad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); }
  .touch-button { width: 58px; height: 58px; min-width: 58px; min-height: 58px; }
}