/* ============================================================
   Shared design tokens + base component classes for the in-game
   HUD panels (action panel, leaderboard, progression/milestones,
   chatbox, spawn timer bar). Loaded once globally in index.html
   so every Phaser DOM element (which renders into the real page
   DOM, not an isolated shadow tree) can use it.

   Panel-specific markup/behaviour stays in each panel's own
   <style> block in public/html/*.html — only the values and
   structural pieces that were identical across panels live here.
   ============================================================ */

:root {
  /* ── panel surface ──
     Design rule: nothing in this UI is rounded (radius stays 0 everywhere,
     including badges/pills/progress bars — see the per-panel files), and
     every surface carries some transparency rather than reading as solid. */
  --ui-panel-bg: linear-gradient(160deg, rgba(30, 40, 61, 0.85) 0%, rgba(14, 19, 32, 0.85) 100%);
  --ui-panel-radius: 0px;
  --ui-panel-border: 1px solid rgba(255, 210, 74, 0.14);
  --ui-panel-shadow:
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 210, 74, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ui-panel-blur: 12px;

  /* ── header / drag bar ── */
  --ui-header-bg: linear-gradient(180deg, rgba(255, 210, 74, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
  --ui-header-border: 1px solid rgba(255, 210, 74, 0.10);

  /* ── gold accent family (from the Conquesta.io pixel UI pack) ── */
  --ui-gold: #ffd24a;
  --ui-gold-dark: #e6b422;
  --ui-gold-dim: rgba(255, 210, 74, 0.6);
  --ui-gold-soft: rgba(255, 210, 74, 0.12);
  --ui-amber: #e6b422;

  /* ── text ── */
  --ui-text-primary: #e5e7eb;
  --ui-text-secondary: #9ca3af;
  --ui-text-muted: #4a5568;

  /* ── status colours ── */
  --ui-danger: #ef4444;
  --ui-success: #22c55e;
  --ui-info: #5865f2;
  --ui-border: #2e3a55;

  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── Base panel surface: apply alongside a panel's own container class.
   e.g. <div class="game-action-panel-container ui-panel"> ── */
.ui-panel {
  background: var(--ui-panel-bg);
  border-radius: var(--ui-panel-radius);
  border: var(--ui-panel-border);
  box-shadow: var(--ui-panel-shadow);
  backdrop-filter: blur(var(--ui-panel-blur));
  -webkit-backdrop-filter: blur(var(--ui-panel-blur));
  position: relative;
  user-select: none;
}

/* Thin gold shimmer line along the top edge, shared by every panel. */
.ui-panel-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg,
    transparent,
    var(--ui-gold-dim) 40%,
    var(--ui-gold-dim) 60%,
    transparent);
}

/* Header / drag-handle strip shared by draggable and static panel headers. */
.ui-panel-header {
  background: var(--ui-header-bg);
  border-bottom: var(--ui-header-border);
}

/* Small pill drag-grip icon used in header bars. */
.ui-drag-icon {
  border-radius: 99px;
  background: linear-gradient(90deg,
    rgba(255, 200, 60, 0.2),
    rgba(255, 200, 60, 0.6),
    rgba(255, 200, 60, 0.2));
}

/* Thin gold-tinted scrollbar for scrollable panel lists. */
.ui-scroll::-webkit-scrollbar { width: 4px; }
.ui-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 200, 60, 0.2);
  border-radius: 4px;
}
.ui-scroll::-webkit-scrollbar-track { background: transparent; }

/* Pixel-art coin icon — prefix any gold-cost label with this class
   instead of a "💰" glyph (inconsistent across platforms/fonts). */
.ui-coin-icon::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
  background: url('../assets/ui/icons/coin.png') center / contain no-repeat;
  image-rendering: pixelated;
}