/* GRAPHIC CONTROLS — icon + caption pads, shared by $DDD and WetDrool.
 *
 * Pairs with games/shared/hud/control-icons.js, which rewrites each
 * `[data-act]` / `[data-mode]` button from bare text into
 * `<svg class="gi">` + `<span class="gi-cap">TEXT</span>`.
 *
 * DESIGN INTENT
 *   The glyph is the control; the caption is the tutorial. So the icon gets
 *   the size and the caption is deliberately small, tight and low-contrast —
 *   present enough to learn from on the first match, quiet enough that a
 *   returning player reads shape and colour instead of words.
 *
 *   Every icon is stroked in `currentColor`, so the per-action tints already
 *   defined by each game (fire gold, melt pink, dash cyan…) keep working with
 *   no new colour rules here. That is the whole reason these are SVG and not
 *   emoji: an emoji brings its own colour and cannot inherit the pad's.
 *
 * SCOPE: only `.has-gi` — a button the JS actually upgraded. A pad that still
 * has plain text is untouched, so a JS failure degrades to the old controls
 * rather than to a broken layout.
 */

.io-pad.has-gi,
.mode-btn.has-gi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}

.gi {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
  /* The stroke is the icon; nothing here should ever paint a fill. */
  fill: none;
  stroke: currentColor;
  /* Optical weight: 2px reads correctly at 22px. Scaling the box without
     scaling stroke-width is what makes small icons look muddy. */
  stroke-width: 2;
  pointer-events: none;
}

.gi-cap {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.72;
  pointer-events: none;
  white-space: nowrap;
}

/* The combat plates carry the fight, so their glyphs get more room. */
.io-touch__combat .io-pad.has-gi .gi {
  width: 26px;
  height: 26px;
}

/* Utility pads are a dense 2-up grid; keep them compact. */
.io-touch__util .io-pad.has-gi .gi {
  width: 19px;
  height: 19px;
}
.io-touch__util .io-pad.has-gi .gi-cap {
  font-size: 8px;
}

/* Team chips read as icon-over-word, and the icon inherits the faction tint
   already set by .mode-btn--horde / --bureau / --wokenet. */
.mode-btn.has-gi .gi {
  width: 20px;
  height: 20px;
}
.mode-btn.has-gi .gi-cap {
  font-size: 8.5px;
  opacity: 0.85;
}

/* Opt-in maximum-clean mode: glyphs only. The accessible name is on the
   button itself, so dropping the visible caption costs nothing to a screen
   reader — this only removes a visual crutch. */
.io-touch--icons-only .io-pad.has-gi .gi-cap {
  display: none;
}

/* Very short viewports (phone landscape, the real play posture) — the caption
   is the first thing that should go when vertical space runs out. */
@media (max-height: 430px) {
  .io-touch .io-pad.has-gi .gi-cap {
    display: none;
  }
  .io-touch .io-pad.has-gi {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .io-pad.has-gi,
  .mode-btn.has-gi {
    transition: none;
  }
}

/* Forced-colours (Windows high contrast): currentColor resolves to the system
   button text, and the stroke must not be flattened away. */
@media (forced-colors: active) {
  .gi {
    stroke: ButtonText;
  }
  .io-pad.has-gi:active .gi,
  .io-pad.has-gi.held .gi {
    stroke: HighlightText;
  }
}