@font-face {
  font-family: 'Baloo 2';
  src: url('/fonts/baloo-2-extrabold.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* ==========================================================================
   PANDA MEME BOMBERMAN — UNIFIED DESIGN SYSTEM TOKENS
   Layer 1: Primitive Tokens
   Layer 2: Semantic Tokens
   Layer 3: Component Tokens & Responsive Safe-Areas
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1. Primitive Color Tokens
     -------------------------------------------------------------------------- */
  --color-flame-50:  #fff1f2;
  --color-flame-100: #ffe4e6;
  --color-flame-400: #fb7185;
  --color-flame-500: #f43f5e;
  --color-flame-600: #e11d48;
  --color-flame-700: #be123c;
  --color-flame-800: #9f1239;
  --color-flame-900: #881337;

  --color-amber-300: #fde047;
  --color-amber-400: #facc15;
  --color-amber-500: #eab308;
  --color-amber-600: #ca8a04;

  --color-cyan-300:  #67e8f9;
  --color-cyan-400:  #22d3ee;
  --color-cyan-500:  #06b6d4;
  --color-cyan-600:  #0891b2;

  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;

  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;

  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;

  --color-slate-950: #061b1b;
  --color-slate-900: #0b2826;
  --color-slate-850: #103430;
  --color-slate-800: #1b433b;
  --color-slate-750: #24574d;
  --color-slate-700: #34695d;
  --color-slate-600: #578d7c;
  --color-slate-400: #b8cec0;
  --color-slate-300: #dce9db;
  --color-slate-100: #f1f5f9;
  --color-white:     #ffffff;
  --color-black:     #000000;

  /* --------------------------------------------------------------------------
     2. Semantic Tokens
     -------------------------------------------------------------------------- */
  --bg-app:                var(--color-slate-950);
  --bg-surface:            var(--color-slate-900);
  --bg-surface-elevated:   var(--color-slate-850);
  --bg-surface-card:       linear-gradient(160deg, #143b32 0%, #092922 100%);
  --bg-surface-glass:      rgba(10, 37, 30, 0.96);

  --color-primary:         var(--color-flame-600);
  --color-primary-hover:   var(--color-flame-500);
  --color-primary-active:  var(--color-flame-700);

  --color-gold:            var(--color-amber-400);
  --color-gold-hover:      var(--color-amber-300);

  --color-accent:          var(--color-cyan-400);
  --color-accent-hover:    var(--color-cyan-300);

  --color-purple:          var(--color-purple-500);
  --color-success:         var(--color-emerald-500);
  --color-warning:         var(--color-orange-500);
  --color-danger:          var(--color-flame-600);

  --text-primary:          var(--color-white);
  --text-secondary:        var(--color-slate-300);
  --text-muted:            var(--color-slate-400);
  --text-gold:             var(--color-amber-400);
  --text-cyan:             var(--color-cyan-400);

  --border-arcade:         3px solid var(--color-black);
  --border-subtle:         1.5px solid var(--color-slate-700);
  --border-accent:         2px solid var(--color-cyan-400);
  --border-glow-gold:      0 0 15px rgba(250, 204, 21, 0.4);
  --border-glow-red:       0 0 20px rgba(225, 29, 72, 0.5);
  --border-glow-cyan:      0 0 15px rgba(34, 211, 238, 0.4);

  /* --------------------------------------------------------------------------
     3. Arcade 3D Comic Shadows & Effects
     -------------------------------------------------------------------------- */
  --shadow-arcade-sm:      0 3px 0 var(--color-black);
  --shadow-arcade-md:      0 5px 0 var(--color-black);
  --shadow-arcade-lg:      0 8px 0 var(--color-black), 0 14px 28px rgba(0, 0, 0, 0.7);
  --shadow-arcade-glow:    0 6px 0 var(--color-black), 0 0 25px rgba(250, 204, 21, 0.35);
  --shadow-arcade-press:   0 1px 0 var(--color-black);

  /* --------------------------------------------------------------------------
     4. Typography Scale
     -------------------------------------------------------------------------- */
  --font-display:          'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:             'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-mono:             ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid typography */
  --text-xs:               clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);   /* 11-12px */
  --text-sm:               clamp(0.75rem, 0.72rem + 0.25vw, 0.875rem);   /* 12-14px */
  --text-base:             clamp(0.875rem, 0.84rem + 0.3vw, 1rem);       /* 14-16px */
  --text-lg:               clamp(1rem, 0.95rem + 0.4vw, 1.125rem);       /* 16-18px */
  --text-xl:               clamp(1.125rem, 1.05rem + 0.5vw, 1.35rem);    /* 18-21px */
  --text-2xl:              clamp(1.35rem, 1.25rem + 0.7vw, 1.65rem);     /* 21-26px */
  --text-3xl:              clamp(1.65rem, 1.45rem + 1.2vw, 2.25rem);     /* 26-36px */
  --text-4xl:              clamp(2rem, 1.65rem + 1.8vw, 3rem);           /* 32-48px */

  /* --------------------------------------------------------------------------
     5. Radius Scale
     -------------------------------------------------------------------------- */
  --radius-xs:             6px;
  --radius-sm:             10px;
  --radius-md:             14px;
  --radius-lg:             20px;
  --radius-xl:             26px;
  --radius-full:           9999px;

  /* --------------------------------------------------------------------------
     6. Safe Areas & Viewport Metrics
     -------------------------------------------------------------------------- */
  --safe-top:              env(safe-area-inset-top, 12px);
  --safe-bottom:           env(safe-area-inset-bottom, 12px);
  --safe-left:             env(safe-area-inset-left, 12px);
  --safe-right:            env(safe-area-inset-right, 12px);

  /* --------------------------------------------------------------------------
     7. Motion & Transitions
     -------------------------------------------------------------------------- */
  --ease-arcade:           cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy pop */
  --ease-smooth:           cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:         0.12s;
  --duration-normal:       0.24s;
  --duration-modal:        0.3s;

  /* --------------------------------------------------------------------------
     8. Spacing, Layering & HUD Layout Contract
     Canvas HUD (ArenaScene) mirrors --hud-* values; keep them in sync.
     -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --touch-target:          48px;   /* min size for any tap target during play */
  --hud-edge:              max(var(--space-3), env(safe-area-inset-left, 0px));
  --hud-top:               max(var(--space-2), env(safe-area-inset-top, 0px));
  --hud-bottom:            max(var(--space-3), env(safe-area-inset-bottom, 0px));
  --hud-bar-height:        44px;   /* top DOM bar row; canvas HUD starts below it */

  --hud-panel-bg:          rgba(9, 30, 27, 0.9);  /* dark forest glass, matches #0b2826 */
  --hud-panel-border:      #b9a071;                /* aged gold trim from art pack UI */
  --hud-danger:            #ff795b;
  --hud-text:              #fff3da;

  --z-canvas:   1;
  --z-hud:      30;
  --z-controls: 35;
  --z-topbar:   50;
  --z-picker:   55;
  --z-lobby:    100;
  --z-modal:    1000;
  --z-toast:    2000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:       0s !important;
    --duration-normal:     0s !important;
    --duration-modal:      0s !important;
    --ease-arcade:         linear !important;
  }
}

:root.reduced-motion {
  --duration-fast: 0s;
  --duration-normal: 0s;
  --duration-modal: 0s;
  --ease-arcade: linear;
}