/* ===========================================================================
   Goblin Delve / Brawl — shared "controller" visual language.
   2026-09-20 · gamepad-style ZONE classes, built ON TOP OF mobile.css's
   tokens. This file defines layout for three reusable areas modeled on a
   virtual Xbox-style overlay (reference: a D-pad/stick bottom-left, diamond
   face buttons bottom-right, small utility-icon row bottom-center):

     .pad-zone        bottom-left movement housing
     .action-diamond  bottom-right primary-action cluster (up to 4, Y/X/B/A)
     .util-row        bottom-center small utility-icon strip

   It owns NO tokens of its own — every size below reads var(--m-tap),
   var(--m-radius), var(--m-gap) etc. straight from mobile.css §1. Two
   files, one scale, so a future Brawl joystick housed in `.pad-zone` sits
   at the exact same rhythm as Delve's D-pad without either file guessing
   the other's numbers.

   SCOPE
   -----
   Loaded under the exact same media condition as mobile.css, from the same
   <head> in base.html, right after it:

     <link rel="stylesheet" href="/static/controller.css?v=..."
           media="(max-width: 767px)">

   A virtual gamepad overlay is a touch-input idiom. The desktop shell is
   keyboard/mouse-driven and has never been asked to grow one — Delve's own
   D-pad and Brawl's own joystick are BOTH mobile.css-only constructs today
   (desktop plays the same views as plain button rows / mouse-drag). Scoping
   this file identically keeps that one guarantee mechanical rather than a
   promise to be careful, exactly per mobile.css's own header rationale.

   Every selector starts with `html` for the same specificity reason
   documented there: page <style> blocks load after this file in the head
   and would win any tie without the extra type selector.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   .pad-zone — bottom-left movement housing.
   Wraps an EXISTING movement control (Delve's `.dir` D-pad rows today,
   Brawl's joystick container later) WITHOUT touching its internal layout —
   mobile.css's `html #controls .row:has(.btn.dir)` rule still owns the
   D-pad's own grid/cross shape. This class only adds the spacing that makes
   the zone read as one physical pad, so it can be dropped onto a different
   movement control verbatim.
   --------------------------------------------------------------------------- */
html .pad-zone {
  position: relative;
  z-index: var(--m-z-dock);
  padding: calc(var(--m-gap) / 2) 0;
}

/* ---------------------------------------------------------------------------
   .action-diamond — bottom-right primary-action cluster.
   Up to 4 direct button children are placed by DOM order, one per point of
   the diamond (top, left, right, bottom) — the Y/X/B/A arrangement in the
   reference image. Fewer than 4 children degrade gracefully: an unused grid
   cell just stays empty, so a 3-button set (e.g. Delve's Angriff/Blocken/
   Trank) still reads as a coherent top/left/right cluster.

   `!important` on the grid properties only: `html #controls .row` (mobile.css
   §8) sets `display: flex` at (1,1,1) specificity via the #controls id, which
   would otherwise beat a generic, ID-free `.action-diamond` rule that is
   deliberately NOT hardcoded to `#controls` so it stays reusable for a future
   non-Delve action cluster (Brawl's ability bar). Same override pattern
   mobile.css itself uses for `.rail`/`.context` display: none.
   --------------------------------------------------------------------------- */
html .action-diamond {
  display: grid !important;
  grid-template-columns: repeat(3, var(--m-tap)) !important;
  grid-auto-rows: var(--m-tap) !important;
  gap: var(--m-gap) !important;
  justify-content: center;
  align-content: center;
  margin-inline: auto;
  position: relative;
  z-index: var(--m-z-dock);
}
html .action-diamond > *:nth-child(1) { grid-column: 2; grid-row: 1; }
html .action-diamond > *:nth-child(2) { grid-column: 1; grid-row: 2; }
html .action-diamond > *:nth-child(3) { grid-column: 3; grid-row: 2; }
html .action-diamond > *:nth-child(4) { grid-column: 2; grid-row: 3; }
html .action-diamond > .btn,
html .action-diamond > button {
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  border-radius: var(--m-radius);
  padding: 0;
}

/* ---------------------------------------------------------------------------
   .util-row — bottom-center utility strip.
   Menu/pause/map-toggle style controls: visually lighter than the action
   diamond ON PURPOSE, so nothing here reads as a primary action or as
   movement. Height still floors at `--m-tap` — this project's touch-target
   floor (mobile.css §6) applies to every tappable control, utility icons
   included; "smaller" here means footprint (padding/font), not the a11y
   minimum.
   --------------------------------------------------------------------------- */
html .util-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--m-gap) / 2);
  position: relative;
  z-index: var(--m-z-dock);
}
html .util-row > .btn,
html .util-row > button,
html .util-row > summary {
  min-height: var(--m-tap);
  padding: 4px 8px;
  font-size: .78rem;
  border-radius: var(--m-radius);
}

/* ---------------------------------------------------------------------------
   .is-pressed — set/cleared by controller.js on pointerdown/pointerup within
   any of the three zones above. A visual-only state; it carries no `:active`
   navigation semantics and does nothing on its own without controller.js.
   --------------------------------------------------------------------------- */
html .pad-zone .is-pressed,
html .action-diamond .is-pressed,
html .util-row .is-pressed {
  filter: brightness(1.25);
  transform: scale(.96);
}