@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Palette — dark fantasy */
  --c-bg: #0c0e1a;
  --c-bg-alt: #141727;
  --c-bg-warm: #1a1530;
  --c-surface: #1e2240;
  --c-surface-light: #282d52;
  --c-border: #2a2f55;
  --c-border-glow: rgba(139, 92, 246, 0.25);

  --c-text: #e2e0f0;
  --c-text-dim: #7a7898;
  --c-text-bright: #ffffff;

  --c-accent: #a855f7;
  --c-accent-dim: rgba(168, 85, 247, 0.15);
  --c-accent-glow: rgba(168, 85, 247, 0.4);

  --c-gold: #fbbf24;
  --c-gold-dim: rgba(251, 191, 36, 0.15);
  --c-gold-glow: rgba(251, 191, 36, 0.4);

  --c-heal: #34d399;
  --c-heal-dim: rgba(52, 211, 153, 0.15);
  --c-danger: #f43f5e;
  --c-danger-dim: rgba(244, 63, 94, 0.15);
  --c-danger-glow: rgba(244, 63, 94, 0.4);
  --c-mana: #818cf8;
  --c-mana-dim: rgba(129, 140, 248, 0.15);

  /* Cell colors — themed per world */
  --c-wall: #2a2550;
  --c-wall-light: #352f65;
  --c-wall-dark: #1a1638;
  --c-wall-edge: #3d3575;
  --c-floor: #0e1020;
  --c-floor-alt: #111326;
  --c-floor-edge: rgba(255,255,255,0.03);

  /* Wall texture SVG — inline, themed per world */
  --wall-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='brick' width='20' height='10' patternUnits='userSpaceOnUse'%3E%3Crect width='20' height='10' fill='%23241e48'/%3E%3Crect x='0' y='0' width='9' height='4' rx='0.5' fill='%232d2658'/%3E%3Crect x='11' y='0' width='9' height='4' rx='0.5' fill='%23302862'/%3E%3Crect x='5' y='5' width='9' height='4' rx='0.5' fill='%232b2455'/%3E%3Crect x='16' y='5' width='4' height='4' rx='0.5' fill='%23332a60'/%3E%3Crect x='0' y='5' width='4' height='4' rx='0.5' fill='%23292252'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='40' height='40' fill='url(%23brick)'/%3E%3C/svg%3E");

  /* Floor texture — subtle stone tiles */
  --floor-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%230e1020'/%3E%3Crect x='1' y='1' width='18' height='18' rx='1' fill='%23101225' stroke='%23161838' stroke-width='0.5'/%3E%3Crect x='21' y='1' width='18' height='18' rx='1' fill='%23111326' stroke='%23161838' stroke-width='0.5'/%3E%3Crect x='1' y='21' width='18' height='18' rx='1' fill='%23111326' stroke='%23161838' stroke-width='0.5'/%3E%3Crect x='21' y='21' width='18' height='18' rx='1' fill='%23101225' stroke='%23161838' stroke-width='0.5'/%3E%3C/svg%3E");

  /* Background abyss — themed per world */
  --bg-abyss: radial-gradient(ellipse at 30% 40%, rgba(88, 28, 135, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 60%, rgba(67, 56, 202, 0.1) 0%, transparent 45%),
              radial-gradient(ellipse at 50% 90%, rgba(168, 85, 247, 0.06) 0%, transparent 40%),
              radial-gradient(ellipse at 10% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 35%),
              radial-gradient(ellipse at 90% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 35%);

  /* Fog texture */
  --fog-texture: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");

  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  /* Grid */
  --cell-size: 40px;
  --cell-gap: 2px;
  --grid-cols: 10;
  --cell-radius: 4px;

  /* Fog */
  --fog-color: rgba(6, 6, 18, 0.92);

  /* Transitions */
  --t-fast: 120ms;
  --t-normal: 250ms;
  --t-slow: 500ms;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px var(--c-accent-glow);

  /* Z-layers */
  --z-grid: 1;
  --z-hud: 10;
  --z-overlay: 20;
  --z-modal: 30;
}