/* ============================================================================
   MetarGame — base primitives + utility classes
   Plain, framework-free helpers that encode the brand's signature treatments so
   specimen cards, slides and UI kits stay lean. Class names are namespaced `mg-`.
   ============================================================================ */

/* Pixel art must never blur when scaled. */
.mg-crisp { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Font helpers */
.mg-pixel { font-family: var(--font-pixel); }
.mg-mono  { font-family: var(--font-mono); }

/* PLAN-4 Phase B: pixel faces are reserved for true in-scene/diorama signage only — never UI chrome.
   Use .scene-pixel / .scene-mono to opt a label into the retro faces deliberately. */
.scene-pixel { font-family: var(--font-pixel); }
.scene-mono  { font-family: var(--font-mono); }

/* ---- Glass card: the RPG-window panel ---- */
.mg-card {
  background: var(--glass);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.mg-card__title {
  font-family: var(--font-pixel);
  font-size: var(--pixel-label);
  color: var(--amber);
  letter-spacing: var(--track-label);
  margin-bottom: 9px;
  text-shadow: 1px 1px 0 #000;
}

/* ---- Category chip ---- */
.mg-cat {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: var(--pixel-label);
  letter-spacing: var(--track-label);
  padding: 6px 10px 5px;
  border-radius: var(--radius-chip);
  color: #04130a;
}
.mg-cat--vfr  { background: var(--vfr); }
.mg-cat--mvfr { background: var(--mvfr); }
.mg-cat--ifr  { background: var(--ifr);  color: #fff; }
.mg-cat--lifr { background: var(--lifr); color: #fff; }

/* ---- Pill / chip (glass, for nav + actions) ---- */
.mg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--glass-2);
  backdrop-filter: var(--blur-chip);
  -webkit-backdrop-filter: var(--blur-chip);
  cursor: pointer;
  text-decoration: none;
}

/* ---- Inset metric tile ---- */
.mg-metric {
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  background: #0a112099;
  box-shadow: var(--shadow-inset);
}
.mg-metric i { font-style: normal; font-size: var(--pixel-label); color: var(--ink-2); }
.mg-metric b { display: block; font-size: var(--text-metric); font-weight: 400; line-height: var(--leading-tight); }
.mg-metric .sub { font-size: var(--pixel-label); color: var(--ink-2); margin-top: 2px; }

/* Convenience: a scene-lit surface for cards floated over the diorama */
.mg-scene { background: var(--sky-ramp); }