/* ═══════════════════════════════════════════════════════════════════
   TAVERN-CRAFT — Karma's Gambit UI chrome layer (Track 2, Oct 11 2026)
   Additive override sheet. Loaded AFTER the inline <style> block in
   games/cards.html, so same-specificity rules here win; the
   game-readability.css 0.9rem floor (body-prefixed selectors) still
   outranks us. Craft language: aged wood, iron, parchment,
   candlelight gold — built to sit beside the hand-inked card art.
   CSS + inline SVG (feTurbulence) only — no raster assets, tiles are
   a few hundred bytes each.
   Hard rules honored: no font-size declarations here at all (the
   readability floor is untouched), no layout-affecting props
   (border widths, padding, margins, display all preserved), touch
   targets untouched, and every new animation is killed under BOTH
   prefers-reduced-motion AND :root[data-motion="reduced"].
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* paper grain — warm candlelit noise, very low alpha */
  --tc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.84 0 0 0 0 0.68 0 0 0 0 0.44 0.85 0 0 0 -0.45'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* wood grain — horizontal streaks, dark umber, low alpha */
  --tc-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='140'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.11' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.40 0 0 0 0 0.28 0 0 0 0 0.16 0.8 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='360' height='140' filter='url(%23w)'/%3E%3C/svg%3E");
  /* soft vignette for panel depth */
  --tc-vignette: radial-gradient(ellipse at 50% 38%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.42) 100%);
  /* iron corner stud: gold pin set in an iron ring */
  --tc-stud: radial-gradient(circle, #f0c85e 0 2px, #7a5a1c 2.5px 3.5px, rgba(0,0,0,0.65) 4px, rgba(0,0,0,0) 4.6px);
}

/* ── the game table: aged wood under the felt ────────────────────── */
.kg-container {
  background-image: var(--tc-wood), var(--tc-vignette),
    linear-gradient(165deg, #0d0a12 0%, #070509 60%, #0b0705 100%);
}
/* iron corner studs on the four hero panels */
.kg-container::before,
.oath-wrap::before,
.modal-content::before,
.rw-card::before {
  content: ""; position: absolute; inset: 12px; z-index: 1;
  pointer-events: none;
  background-image: var(--tc-stud), var(--tc-stud), var(--tc-stud), var(--tc-stud);
  background-size: 11px 11px; background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}

/* ── top nav: dark wood bar, carved double-line foot ─────────────── */
nav#nav {
  background-image: var(--tc-wood);
  box-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 2px 0 rgba(196,144,42,0.14);
}

/* ── nav drawer: wood panel, iron inner edge ─────────────────────── */
.oc-drawer {
  background-image: var(--tc-wood), var(--tc-vignette),
    linear-gradient(160deg, #0c0913, #06040c);
  box-shadow: inset 3px 0 8px rgba(0,0,0,0.65), inset 0 1px 0 rgba(232,200,106,0.12);
}
.oc-rule {
  box-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 2px 0 rgba(255,191,0,0.10);
}

/* ── the Oath gate: dark parchment ledger panel ──────────────────── */
.oath-wrap {
  position: relative;
  background-color: #141009;
  background-image: var(--tc-grain), var(--tc-vignette),
    radial-gradient(ellipse at 50% 0%, rgba(232,200,106,0.08), rgba(0,0,0,0) 60%);
  box-shadow: 0 0 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(232,200,106,0.20),
    inset 0 -4px 12px rgba(0,0,0,0.5);
}
.oath-wrap h2 {
  color: var(--gold-lt); /* gold-leaf title on dark parchment — AA ✓ */
  animation: tc-flicker 4.5s ease-in-out infinite;
}
.oath-tab.active {
  box-shadow: inset 0 1px 0 rgba(255,240,200,0.35), inset 0 -2px 4px rgba(60,35,5,0.4);
  background-image: var(--tc-grain);
}

/* ── buttons: candlelit gold, charred iron, iron-rimmed ghost ────── */
.btn-gold {
  background-image: var(--tc-grain),
    linear-gradient(165deg, #e8bd55 0%, #c4902a 45%, #a37c22 100%);
  border-color: #6b4a12;
  box-shadow: 0 4px 18px rgba(196,144,42,0.35),
    inset 0 1px 0 rgba(255,240,200,0.45), inset 0 -2px 5px rgba(60,35,5,0.45);
}
.btn-gold:hover:not(:disabled), .btn-gold:focus-visible {
  animation: tc-ember 3.2s ease-in-out infinite;
}
.btn-blood {
  background-image: var(--tc-grain),
    linear-gradient(165deg, #962020 0%, #6e1414 45%, #3d0a0a 100%);
  border-color: #2a0808;
  box-shadow: 0 4px 18px rgba(139,26,26,0.4),
    inset 0 1px 0 rgba(255,150,120,0.25), inset 0 -2px 5px rgba(0,0,0,0.5);
}
.btn-ghost {
  border-color: rgba(196,144,42,0.45);
  background-color: rgba(20,14,8,0.55);
  background-image: var(--tc-wood);
  box-shadow: inset 0 1px 0 rgba(232,200,106,0.15), inset 0 -2px 4px rgba(0,0,0,0.5);
}

/* ── modal + reward panels: parchment-wood, studded ──────────────── */
.modal { background-image: var(--tc-vignette); }
.rw-overlay { background-image: var(--tc-vignette); }
.modal-content {
  background-image: var(--tc-grain), var(--tc-vignette);
  box-shadow: 0 0 40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(232,200,106,0.15);
}
.rw-card {
  position: relative;
  background-image: var(--tc-wood), var(--tc-vignette),
    linear-gradient(180deg, #1a130b, #0d0906);
}
.xcp-dialogue-box {
  background-image: var(--tc-grain), var(--tc-vignette),
    linear-gradient(165deg, #1a1210, #0d0906);
  box-shadow: inset 0 1px 0 rgba(232,200,106,0.15), 0 0 40px rgba(0,0,0,0.85);
}

/* ── HUD frames: iron bevel, candlelit top hairline ──────────────── */
.hud-box {
  background-image: var(--tc-grain);
  box-shadow: inset 0 2px 0 rgba(232,200,106,0.22), inset 0 -3px 6px rgba(0,0,0,0.5);
}

/* ── carved dividers: gold hairline over a dark chisel cut ───────── */
.game-header {
  box-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 2px 0 rgba(196,144,42,0.14);
}
.split-head {
  box-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 2px 0 rgba(196,144,42,0.12);
}
.bill-head {
  box-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 2px 0 rgba(196,144,42,0.10);
}

/* ── the tab slip: ledger paper ──────────────────────────────────── */
.bill-slip {
  background-image: var(--tc-grain), linear-gradient(170deg, #141007, #0b0803);
  box-shadow: inset 0 1px 0 rgba(232,200,106,0.14), inset 0 -3px 8px rgba(0,0,0,0.45);
}

/* ── battle log: scribe's scroll with a gold margin rule ─────────── */
.battle-log {
  background-image: var(--tc-grain),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
  box-shadow: inset 3px 0 0 rgba(196,144,42,0.35), inset 0 2px 6px rgba(0,0,0,0.5);
}

/* ── wooden counter panels: deck room, deck bar, filters, shop ───── */
.deck-room, .deck-bar, .custom-room, .filter-bar, .shop-row, .pvp-sec {
  background-image: var(--tc-wood), var(--tc-vignette);
  box-shadow: inset 0 1px 0 rgba(232,200,106,0.10), inset 0 -3px 8px rgba(0,0,0,0.45);
}
.welcome-banner {
  background-image: var(--tc-wood), var(--tc-vignette),
    linear-gradient(135deg, rgba(196,144,42,.14), rgba(196,144,42,.05));
  box-shadow: inset 0 1px 0 rgba(232,200,106,0.16);
}

/* ── deck chips: wax-seal pills ──────────────────────────────────── */
.deck-chip {
  background-image: radial-gradient(circle at 30% 25%, rgba(232,200,106,0.14), rgba(0,0,0,0) 55%),
    var(--tc-grain);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(232,200,106,0.18);
}
.deck-chip.active {
  box-shadow: inset 0 1px 0 rgba(255,240,200,0.4), inset 0 -2px 4px rgba(60,35,5,0.4),
    0 0 14px rgba(196,144,42,0.35);
}

/* ── play-menu table cards: iron frame over wood inlay ───────────── */
.play-card {
  box-shadow: inset 0 1px 0 rgba(232,200,106,0.14), inset 0 0 0 1px rgba(0,0,0,0.35),
    inset 0 -4px 10px rgba(0,0,0,0.4);
}

/* ── iron ring buttons: closes and removes ───────────────────────── */
.oc-close, .close-modal, .wb-close, .deck-remove-all {
  background-image: radial-gradient(circle at 35% 30%, rgba(232,200,106,0.22), rgba(0,0,0,0.15) 60%),
    var(--tc-grain);
  box-shadow: inset 0 1px 0 rgba(232,200,106,0.25), inset 0 -2px 4px rgba(0,0,0,0.5);
}

/* ── inputs: iron wells ──────────────────────────────────────────── */
.oath-field input, .filter-bar input, .filter-bar select,
.deck-actions input, .deck-actions select, .pvp-input {
  background-image: var(--tc-grain);
  box-shadow: inset 0 2px 7px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(196,144,42,0.14);
}

/* ── scrollbar: iron-banded wood ─────────────────────────────────── */
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(232,200,106,0.25);
}

/* ── candlelight motion (ambient — killed under reduced motion) ───── */
@keyframes tc-flicker {
  0%, 100% { text-shadow: 0 0 14px rgba(230,176,64,0.35); }
  50% { text-shadow: 0 0 22px rgba(230,176,64,0.60), 0 0 6px rgba(255,220,150,0.5); }
}
@keyframes tc-ember {
  0%, 100% { box-shadow: 0 4px 18px rgba(196,144,42,0.35), inset 0 1px 0 rgba(255,240,200,0.45), inset 0 -2px 5px rgba(60,35,5,0.45); }
  50% { box-shadow: 0 4px 30px rgba(255,191,0,0.55), inset 0 1px 0 rgba(255,240,200,0.55), inset 0 -2px 5px rgba(60,35,5,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-gold:hover:not(:disabled), .btn-gold:focus-visible, .oath-wrap h2 {
    animation: none !important;
  }
}
:root[data-motion="reduced"] .btn-gold:hover:not(:disabled),
:root[data-motion="reduced"] .btn-gold:focus-visible,
:root[data-motion="reduced"] .oath-wrap h2 {
  animation: none !important;
}