/* ============================================================================
   royal.css — SHARED DESIGN FOUNDATION (Royal Castle theme)
   Single source of truth for the warm stone / gold / royal-blue look.
   Framework-free: usable by Tower Defense.html (game) and landing.html.
   Pairs with royal.js (window.TD_THEME mirrors these tokens for inline JS).
   ----------------------------------------------------------------------------
   PERF NOTE: no `backdrop-filter` on frequently-repainted elements. Animations
   use transform/opacity only.
   ========================================================================== */

:root {
  /* page bg — deep warm stone-charcoal */
  --r-bg:        #221e1a;
  --r-bg-2:      #191512;
  /* carved stone */
  --r-stone:     #3b352e;
  --r-stone-2:   #4d463c;
  --r-stone-hi:  #5e564a;
  --r-mortar:    #19150f;
  /* warm gold trim */
  --r-gold:      #c9a44c;
  --r-gold-hi:   #f0d488;
  --r-gold-deep: #8a6d2c;
  /* royal banner blue */
  --r-blue:      #2c4a86;
  --r-blue-hi:   #3f63ad;
  /* parchment + ink */
  --r-parch:     #e8dcc0;
  --r-ink:       #2a2114;
  /* cream text on stone */
  --r-text:      #efe6d2;
  --r-text-dim:  #b6a98e;
  /* misc */
  --r-danger:    #b4452f;
  --r-shadow:    rgba(0,0,0,0.55);

  /* derived helpers (kept here so consumers can reuse them too) */
  --r-bevel: inset 0 1px 0 rgba(255,240,210,0.12), inset 0 -2px 6px rgba(0,0,0,0.5);
  --r-gold-rim: 0 0 0 1px var(--r-gold);
  --r-mortar-rim: 0 0 0 2px var(--r-mortar);
  --r-engrave: 0 1px 0 rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.45);
  --r-fonts-display: 'Cinzel', Georgia, serif;
  --r-fonts-body: 'EB Garamond', Georgia, serif;
}

/* ----- base body font default (consumers may override) -------------------- */
body {
  font-family: var(--r-fonts-body);
}

/* Cinzel display helper */
.r-cinzel {
  font-family: var(--r-fonts-display);
  letter-spacing: 0.04em;
}

/* ============================================================================
   PAGE BACKGROUND — brick pattern + vignette + warm torch glow in corners
   ========================================================================== */
.r-brick-bg {
  background-color: var(--r-bg);
  background-image:
    /* warm torch glow — top corners */
    radial-gradient(680px 460px at 4% -6%,  rgba(201,164,76,0.16), transparent 60%),
    radial-gradient(680px 460px at 96% -6%, rgba(201,164,76,0.14), transparent 60%),
    /* radial vignette */
    radial-gradient(140% 120% at 50% 38%, transparent 52%, rgba(0,0,0,0.55) 100%),
    /* mortar courses — horizontal */
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.0) 0px,
      rgba(0,0,0,0.0) 38px,
      rgba(25,21,15,0.55) 38px,
      rgba(25,21,15,0.55) 42px),
    /* mortar — vertical (offset staggered rows feel via wider period) */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.0) 0px,
      rgba(0,0,0,0.0) 92px,
      rgba(25,21,15,0.40) 92px,
      rgba(25,21,15,0.40) 96px),
    /* base stone wash */
    linear-gradient(180deg, var(--r-bg) 0%, var(--r-bg-2) 100%);
}

/* ============================================================================
   STONE PANEL — carved stone block with mortar edge + inner gold rim + bevel
   ========================================================================== */
.r-stone {
  background: linear-gradient(180deg, var(--r-stone-2) 0%, var(--r-stone) 100%);
  border: 2px solid var(--r-mortar);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px var(--r-gold),                 /* inner gold rim */
    inset 0 1px 0 rgba(255,240,210,0.12),          /* top bevel highlight */
    inset 0 -2px 8px rgba(0,0,0,0.5),              /* bottom bevel shadow */
    0 8px 22px var(--r-shadow);
  color: var(--r-text);
}

/* ============================================================================
   PARCHMENT SURFACE — aged paper with soft inner vignette + gold-deep border
   ========================================================================== */
.r-parch {
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(255,255,255,0.18), transparent 60%),
    var(--r-parch);
  color: var(--r-ink);
  border: 1px solid var(--r-gold-deep);
  border-radius: 10px;
  box-shadow:
    inset 0 0 26px rgba(120,92,40,0.30),           /* inner vignette */
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 6px 18px var(--r-shadow);
}

/* ============================================================================
   BUTTONS
   ========================================================================== */
.r-btn {
  font-family: var(--r-fonts-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--r-text);
  cursor: pointer;
  border-radius: 10px;
  padding: 12px 26px;
  /* secondary = stone slab + gold rim */
  background: linear-gradient(180deg, var(--r-stone-2) 0%, var(--r-stone) 100%);
  border: 2px solid var(--r-mortar);
  box-shadow:
    inset 0 0 0 1px var(--r-gold),
    inset 0 1px 0 rgba(255,240,210,0.12),
    inset 0 -2px 6px rgba(0,0,0,0.5),
    0 6px 16px var(--r-shadow);
  text-shadow: var(--r-engrave);
  transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.r-btn:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
}
.r-btn:active { transform: translateY(0); filter: brightness(0.98); }

/* primary = royal-blue heraldic banner */
.r-btn-primary {
  background: linear-gradient(180deg, var(--r-blue-hi) 0%, var(--r-blue) 100%);
  border: 2px solid var(--r-gold-deep);
  color: var(--r-text);
  box-shadow:
    inset 0 0 0 1px var(--r-gold),
    inset 0 1px 0 rgba(255,240,210,0.22),
    inset 0 -3px 8px rgba(0,0,0,0.45),
    0 8px 20px var(--r-shadow);
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.r-btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* ============================================================================
   HEADING — Cinzel gold gradient fill, dark engrave
   ========================================================================== */
.r-heading {
  font-family: var(--r-fonts-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* gold gradient fill */
  background: linear-gradient(180deg, var(--r-gold-hi) 0%, var(--r-gold) 70%, var(--r-gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--r-gold);
  /* engrave shadow (drop-shadow works with text-fill transparency) */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55)) drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

/* ============================================================================
   HANGING HERALDIC BANNER — pennant shape with notched bottom + gold rim
   Use as a small standalone banner; put text inside.
   ========================================================================== */
.r-banner {
  display: inline-block;
  position: relative;
  padding: 14px 22px 22px;
  background: linear-gradient(180deg, var(--r-blue-hi) 0%, var(--r-blue) 100%);
  border: 2px solid var(--r-gold-deep);
  border-bottom: none;
  box-shadow:
    inset 0 0 0 1px var(--r-gold),
    inset 0 1px 0 rgba(255,240,210,0.2),
    0 10px 22px var(--r-shadow);
  color: var(--r-text);
  font-family: var(--r-fonts-display);
  text-align: center;
  /* notched (swallowtail) bottom edge */
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}
.r-banner::after {
  /* gold trim line along the notch */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(240,212,136,0.45);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}