/* Medieval theme — wood, parchment, forest green. Serif typography,
   raised/inset panel shadows, wood-grain and parchment textures made
   entirely from CSS gradients (no external image assets). */

[data-theme="medieval"] {
  /* Surfaces */
  --bg: #1c140c;
  --surface: #3a2a1a;
  --surface-2: #4a3624;
  --surface-hover: #5a4430;
  --surface-pressed: #3d5a2a;
  --overlay-bg: rgba(16, 10, 4, 0.82);

  /* Borders */
  --border: #5a4126;
  --border-strong: #7a5e36;
  --border-soft: #3a2a1a;
  --border-row: #3a2a1a;

  /* Text */
  --text: #f3e4c4;
  --text-muted: #c8b48a;
  --text-dim: #8a7556;
  --text-accent: #5a8a3a;
  --text-faint: #5a4c30;

  /* Brand */
  --accent: #5a8a3a;
  --accent-2: #d6b071;
  --accent-glow: rgba(90, 138, 58, 0.35);

  /* State */
  --success: #a0c870;
  --success-bg: #2a3a1a;
  --success-border: #4a5a2a;
  --warn: #d6b071;
  --danger: #a83a2c;
  --danger-bg: #3a1a14;
  --danger-border: #6a2a24;
  --locked: #a86a3a;

  /* Stat strip */
  --stat-money: #d6b071;
  --stat-hp-bad: #a83a2c;
  --stat-hp-mid: #d6b071;
  --stat-hp-ok:  #6aa84a;
  --stat-wave: #5a8a3a;
  --stat-remaining: #d6b071;
  --stat-score: #c8a878;
  --stat-best: #d6b071;
  --stat-fps: #8a7556;
  --stat-fps-mid: #d6b071;
  --stat-fps-low: #a83a2c;
  --stat-reward: #d6b071;

  /* Chevrons */
  --chevron-power: #d6b071;
  --chevron-speed: #6aa84a;
  --chevron-empty: #2a1e12;
  --chev-power-text: #d6b071;
  --chev-speed-text: #6aa84a;
  --chev-sell-text: #a83a2c;

  /* Leaderboard */
  --lb-title: #d6b071;
  --lb-input: #3a2a1a;
  --lb-input-border: #7a5e36;
  --lb-caret: #5a8a3a;
  --lb-submit-bg: #3d5a2a;
  --lb-submit-border: #5a8a3a;
  --lb-submit-hover: #4d6a3a;
  --lb-submit-text: #f3e4c4;
  --lb-new-bg: #3a4a2a;
  --lb-new-fg: #f3e4c4;
  --lb-header-border: #5a4126;
  --lb-empty: #5a4c30;
  --scores-btn-fg: #d6b071;
  --scores-btn-border: #7a5e36;
  --scores-btn-hover-bg: #5a4430;
  --scores-btn-hover-border: #a88650;
  --scores-btn-hover-fg: #ffd89a;

  /* Pause */
  --pause-bg: rgba(16, 10, 4, 0.5);
  --pause-label-bg: rgba(58, 42, 26, 0.92);
  --pause-label-border: rgba(214, 176, 113, 0.5);
  --pause-label-fg: #d6b071;

  /* Game controls */
  --ctl-bg: rgba(58, 42, 26, 0.88);
  --ctl-bg-hover: rgba(90, 68, 48, 0.95);
  --ctl-fg: #c8b48a;
  --ctl-fg-hover: #f3e4c4;
  --ctl-pause-on-fg: #a0c870;
  --ctl-pause-on-bg: #2a3a1a;
  --ctl-pause-on-border: #4a5a2a;

  /* Info badge */
  --info-bg: rgba(38, 26, 14, 0.9);
  --info-fg: #c8b48a;
  --info-border: #7a5e36;
  --info-hover-bg: #5a4430;
  --info-hover-fg: #f3e4c4;
  --info-hover-border: #d6b071;

  /* Tower selected */
  --tower-selected-outline: #5a8a3a;
  --tower-selected-bg: rgba(90, 138, 58, 0.2);

  /* Titles */
  --title-gameover: #a83a2c;
  --title-newscore: #d6b071;

  /* Radii */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* Fonts */
  --font-ui: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --font-display: 'Cinzel', Georgia, serif;
  --font-serif: 'Cinzel', Georgia, serif;

  --ls-wide: 0.6px;
  --ls-wider: 1px;
  --ls-widest: 2px;
}

/* ---------- Global parchment backdrop ---------- */

[data-theme="medieval"] body {
  background:
    radial-gradient(ellipse at 25% 15%, rgba(214, 176, 113, 0.06), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(90, 138, 58, 0.06), transparent 55%),
    var(--bg);
}

/* Wood grain utility (shared by panels) */
[data-theme="medieval"] #stats,
[data-theme="medieval"] #picker,
[data-theme="medieval"] #tower-panel,
[data-theme="medieval"] #settings-panel,
[data-theme="medieval"] #lb-panel {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.06) 0px,
      rgba(0, 0, 0, 0.06) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 220, 160, 0.03) 0px,
      rgba(255, 220, 160, 0.03) 2px,
      transparent 2px,
      transparent 9px
    ),
    linear-gradient(135deg, #4a3624 0%, #3a2a1a 55%, #2e2014 100%);
  border: 2px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* ---------- Stats strip ---------- */

[data-theme="medieval"] #stats {
  padding: 8px 18px;
  border-radius: var(--r-md);
}
[data-theme="medieval"] #stats .stat .lbl {
  font-family: var(--font-display);
  letter-spacing: var(--ls-wider);
  color: var(--text-muted);
}
[data-theme="medieval"] #stats .stat .val {
  font-family: var(--font-mono);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
[data-theme="medieval"] #top-controls #scores-btn {
  font-family: var(--font-display);
  letter-spacing: var(--ls-wider);
}

/* ---------- Right panel ---------- */

[data-theme="medieval"] #picker {
  border-radius: var(--r-md);
  overflow-y: auto;
}
[data-theme="medieval"] #picker .category-header {
  padding: 8px 8px 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  color: var(--accent-2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(122, 94, 54, 0.5);
  margin: 4px 0 4px;
  background: linear-gradient(180deg, rgba(214, 176, 113, 0.08), transparent);
}

[data-theme="medieval"] .tower-btn {
  background:
    linear-gradient(180deg, rgba(90, 68, 48, 0.9), rgba(58, 42, 26, 0.9));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.35);
  color: var(--text);
}
[data-theme="medieval"] .tower-btn:hover {
  background:
    linear-gradient(180deg, rgba(110, 84, 60, 0.95), rgba(74, 54, 36, 0.95));
  border-color: #a88650;
}
[data-theme="medieval"] .tower-btn.selected {
  outline: none;
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(90, 138, 58, 0.3), rgba(58, 90, 36, 0.3)),
    linear-gradient(180deg, rgba(90, 68, 48, 0.9), rgba(58, 42, 26, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.18),
    inset 3px 0 0 var(--accent),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
[data-theme="medieval"] .tower-btn .swatch {
  border-radius: 2px;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 220, 160, 0.4);
  position: relative;
}
[data-theme="medieval"] .tower-btn .swatch::before,
[data-theme="medieval"] .tower-btn .swatch::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-color: rgba(255, 220, 160, 0.7);
  border-style: solid;
  border-width: 0;
}
[data-theme="medieval"] .tower-btn .swatch::before {
  top: -2px; left: -2px;
  border-top-width: 1px; border-left-width: 1px;
}
[data-theme="medieval"] .tower-btn .swatch::after {
  bottom: -2px; right: -2px;
  border-bottom-width: 1px; border-right-width: 1px;
}
[data-theme="medieval"] .tower-btn .cost {
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-weight: 700;
}
[data-theme="medieval"] .tower-btn.disabled .cost { color: var(--danger); }

/* ---------- Tower detail panel ---------- */

[data-theme="medieval"] #tower-panel {
  border-radius: var(--r-md);
}
[data-theme="medieval"] #tower-panel .tp-header {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--accent-2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-theme="medieval"] #tower-panel .tp-btn {
  background:
    linear-gradient(180deg, rgba(90, 68, 48, 0.9), rgba(58, 42, 26, 0.9));
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.1);
}

/* ---------- Settings / leaderboard panels ---------- */

[data-theme="medieval"] #settings-panel,
[data-theme="medieval"] #lb-panel {
  border-radius: var(--r-lg);
  padding: 26px 30px;
}
[data-theme="medieval"] #settings-panel h2,
[data-theme="medieval"] #lb-panel h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Parchment title plate */
[data-theme="medieval"] #settings-panel h2::after,
[data-theme="medieval"] #lb-panel h2::after {
  content: '';
  display: block;
  height: 1px;
  margin: 10px auto 0;
  width: 70%;
  background: linear-gradient(90deg, transparent, rgba(214, 176, 113, 0.6), transparent);
}

[data-theme="medieval"] .settings-section h3 {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: var(--ls-wider);
  color: var(--accent-2);
}

/* Parchment input style for leaderboard initials */
[data-theme="medieval"] #lb-panel .lb-entry input {
  background: linear-gradient(180deg, #ead8b0 0%, #d6c294 100%);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  color: var(--bg);
  font-family: var(--font-display);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---------- Theme picker ---------- */

[data-theme="medieval"] #theme-picker .theme-card {
  background:
    linear-gradient(180deg, rgba(90, 68, 48, 0.9), rgba(58, 42, 26, 0.9));
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.1);
}
[data-theme="medieval"] #theme-picker .theme-card:hover {
  background:
    linear-gradient(180deg, rgba(110, 84, 60, 0.95), rgba(74, 54, 36, 0.95));
}
[data-theme="medieval"] #theme-picker .theme-card[aria-pressed="true"] {
  border-color: var(--accent);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.2),
    inset 3px 0 0 var(--accent);
}
[data-theme="medieval"] #theme-picker .theme-name {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-2);
}

/* ---------- Top-bar controls ---------- */

[data-theme="medieval"] #top-controls .ctl-btn {
  background:
    linear-gradient(180deg, rgba(90, 68, 48, 0.92), rgba(58, 42, 26, 0.92));
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-style: italic;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
[data-theme="medieval"] #top-controls .ctl-btn:hover {
  background:
    linear-gradient(180deg, rgba(110, 84, 60, 0.96), rgba(74, 54, 36, 0.96));
}

/* ---------- Pause overlay ---------- */

[data-theme="medieval"] #pause-overlay .label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* ---------- Scrollbar ---------- */

[data-theme="medieval"] *::-webkit-scrollbar { width: 10px; }
[data-theme="medieval"] *::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 1px solid var(--border);
}
[data-theme="medieval"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-2), var(--border-strong));
  border-radius: 2px;
  border: 1px solid var(--border-strong);
}
[data-theme="medieval"] *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e8c58a, var(--accent-2));
}

/* ---------- Leaf-sway on tower-panel header swatch ---------- */

@keyframes medieval-leaf-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

[data-theme="medieval"] #tower-panel .tp-header > span:first-child {
  display: inline-block;
  transform-origin: bottom center;
  animation: medieval-leaf-sway 4s ease-in-out infinite;
}