/* ============================================================
   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(22, 30, 44, 0.8) 0%, rgba(10, 14, 22, 0.8) 100%);
  --ui-panel-radius: 0px;
  --ui-panel-border: 1px solid rgba(255, 200, 60, 0.14);
  --ui-panel-shadow:
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 200, 60, 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, 200, 60, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
  --ui-header-border: 1px solid rgba(255, 200, 60, 0.10);

  /* ── gold accent family ── */
  --ui-gold: #ffd54f;
  --ui-gold-dim: rgba(255, 200, 60, 0.6);
  --ui-gold-soft: rgba(255, 200, 60, 0.12);
  --ui-amber: #f5a623;

  /* ── text ── */
  --ui-text-primary: #d8dfe8;
  --ui-text-secondary: #8a97aa;
  --ui-text-muted: #4a5568;

  /* ── status colours ── */
  --ui-danger: #ef5350;
  --ui-success: #66bb6a;
  --ui-info: #64b5f6;

  --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; }