/* ============================================================
   TOURNEY JESTER — House Style v1 "Ace of Spades"
   Crafted by Fable 5 from operator brand art (2026-07-17).
   Outlaw saloon card house: heavy blacks, worn gold, blood red,
   letterpress + wood-type, spade iron. NOT cutesy. No CDN —
   fonts and art ship local (/fonts, /brand).

   Compliance (Sprint 5, H6/H9 -- REPLACES the prior "static asset" SC-28
   citation, the exact dishonest header this sprint's contract calls out by
   name: SC-28 protects data AT REST and cannot honestly attach to a CSS
   file that carries no data, executes no logic, and makes no network
   calls of its own. N/A is the honest answer.
   Compliance-Controls: N/A
   ============================================================ */

@font-face {
  font-family: 'Rye';
  src: url('/fonts/Rye-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* surfaces — bar-back blacks and dark felt */
  --tj-black: #0a0908;          /* room black */
  --tj-coal: #121110;           /* panel coal */
  --tj-felt: #131a13;           /* dark table felt */
  --tj-felt-deep: #0e140e;
  --tj-leather: #171310;        /* worn leather brown-black */
  --tj-wood: #3a2417;           /* rail wood */

  /* brand — from the badge art */
  --tj-red: #a8232a;            /* dried blood red */
  --tj-red-bright: #c9303a;     /* fresh chip red */
  --tj-red-deep: #6e161b;
  --tj-red-text: #e36666;       /* legible red for small text — WCAG-AA (deep reds stay decorative) */
  --tj-gold: #c9a45c;           /* antique gold */
  --tj-gold-bright: #e0bd76;    /* struck brass */
  --tj-gold-dim: #927a50;       /* tarnished — bumped from #8a734a to clear WCAG-AA as text */
  --tj-parchment: #e8dcc0;      /* aged card stock */

  /* ink */
  --tj-ink: #eee3c8;            /* parchment white */
  --tj-ink-2: #b3a88e;          /* faded print */
  --tj-ink-3: #92866d;          /* ghost print — bumped from #746b57 to clear WCAG-AA as text */

  /* status — muted, saloon-appropriate */
  --tj-live: #5f8f6a;           /* felt green live */
  --tj-warn: #b8882a;           /* amber lamp */
  --tj-out: #8c2f35;            /* busted red */

  /* type */
  --tj-display: 'Rye', 'Georgia', serif;              /* marquee wood-type */
  --tj-serif: 'Georgia', 'Times New Roman', serif;    /* body letterpress */
  --tj-mono: ui-monospace, 'Cascadia Mono', 'Courier New', monospace; /* the numbers */

  --tj-hairline: 1px solid rgba(201, 164, 92, .28);
  --tj-radius: 10px;
}

/* ---------- base ---------- */
.tj body, body.tj {
  background: var(--tj-black);
  color: var(--tj-ink);
  font-family: var(--tj-serif);
  -webkit-font-smoothing: antialiased;
}

/*
 * Brand art owns its own transparent silhouette. Never round the image box:
 * the lower Jax flourishes intentionally extend beyond the printed medallion.
 */
.tj img[src^="/brand/badge"] {
  border-radius: 0 !important;
  object-fit: contain;
}

/* ---------- a11y foundations (Wave A.1) ---------- */
/* Shared keyboard focus ring for every interactive element that doesn't already
   define its own; more-specific per-component :focus-visible rules still win. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--tj-gold-bright);
  outline-offset: 2px;
}
/* Minimum 44x44 touch target for compact controls (icon buttons, chips, nav
   links, mini/delete buttons). Invisible padding keeps the glyph/label small.
   Applied per-surface in Wave B. */
.tj-tap { min-width: 44px; min-height: 44px; }
.tj-tap-inline { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
/* Visually-hidden but screen-reader-available — for landmark <h1>s on the
   display surfaces whose visible title is a decorative logo/wordmark. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Recovery message shown when JavaScript is disabled (these surfaces render
   their content client-side). Class-based because the CSP forbids inline styles. */
.noscript-msg {
  max-width: 640px; margin: 40px auto; padding: 20px 24px; text-align: center;
  background: var(--tj-coal); border: 1px solid var(--tj-gold-dim);
  border-radius: var(--tj-radius); color: var(--tj-ink);
  font-family: var(--tj-serif); font-size: 16px; line-height: 1.5;
}
.noscript-msg a { color: var(--tj-gold-bright); }

/* film grain + smoke vignette laid over everything */
.tj-grain::before {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.tj-grain::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 10%, transparent 55%, rgba(0,0,0,.38) 100%);
}

/* ---------- display type ---------- */
.tj-marquee {
  font-family: var(--tj-display);
  color: var(--tj-parchment);
  letter-spacing: .04em;
  text-shadow:
    0 1px 0 #4a3418, 0 2px 0 #3a2810, 0 3px 1px #241806,
    0 0 26px rgba(201,164,92,.28);
}
.tj-marquee--red {
  color: var(--tj-red-bright);
  text-shadow: 0 1px 0 #4a0f13, 0 2px 0 #380a0d, 0 3px 1px #240608, 0 0 26px rgba(201,48,58,.25);
}
.tj-overline {
  font-family: var(--tj-serif); font-variant: small-caps;
  letter-spacing: .42em; text-transform: lowercase;
  color: var(--tj-gold-dim); font-size: 13px;
}
.tj-overline .suit { color: var(--tj-red); }

/* ---------- panels: coal plaque with tarnished-gold hairline ---------- */
.tj-panel {
  background: linear-gradient(180deg, #161412, #100f0d);
  border: var(--tj-hairline);
  border-radius: var(--tj-radius);
  box-shadow: inset 0 1px 0 rgba(238,227,200,.05), 0 12px 30px rgba(0,0,0,.55);
  position: relative;
}
.tj-panel--felt { background: radial-gradient(120% 100% at 50% 0%, #182118 0%, #101710 60%, #0d130d 100%); }
.tj-panel--corners::before, .tj-panel--corners::after {
  content: "❧"; position: absolute; color: var(--tj-gold-dim); font-size: 14px; opacity: .7;
}
.tj-panel--corners::before { top: 8px; left: 12px; }
.tj-panel--corners::after { bottom: 8px; right: 12px; transform: rotate(180deg); }

.tj-plaque-title {
  font-family: var(--tj-serif); font-variant: small-caps; text-transform: lowercase;
  letter-spacing: .34em; font-size: 12px; color: var(--tj-ink-2);
  border-bottom: var(--tj-hairline); padding-bottom: 8px; margin-bottom: 12px;
}

/* ---------- buttons: iron & brass ---------- */
.tj-btn {
  font-family: var(--tj-display); font-size: 15px; letter-spacing: .06em;
  color: #1a1206; cursor: pointer; border-radius: 8px;
  padding: 13px 28px; border: 1px solid #6e5a30;
  background: linear-gradient(180deg, var(--tj-gold-bright), #a9853f 55%, #8a6a2e);
  box-shadow: inset 0 1px 0 rgba(255,244,214,.5), 0 4px 14px rgba(0,0,0,.5);
  text-shadow: 0 1px 0 rgba(255,240,200,.35);
}
.tj-btn:hover { filter: brightness(1.07); }
.tj-btn:active { transform: translateY(1px); }
.tj-btn--red {
  color: var(--tj-parchment);
  border-color: #57181c;
  background: linear-gradient(180deg, #b5343c, #8c2229 55%, #6e161b);
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.tj-btn--ghost {
  color: var(--tj-gold); background: transparent;
  border: 1px solid var(--tj-gold-dim); box-shadow: none; text-shadow: none;
}
.tj-btn:focus-visible { outline: 2px solid var(--tj-gold-bright); outline-offset: 2px; }

/* ---------- the numbers (clock, money) ---------- */
.tj-num {
  font-family: var(--tj-mono); font-weight: 700; color: var(--tj-ink);
  text-shadow: 0 0 18px rgba(232,220,192,.22);
  font-variant-numeric: tabular-nums;
}
.tj-num--gold { color: var(--tj-gold-bright); text-shadow: 0 0 18px rgba(224,189,118,.3); }
.tj-num--red { color: var(--tj-red-bright); }

/* ---------- badge art ---------- */
.tj-badge { display: block; filter: drop-shadow(0 14px 34px rgba(0,0,0,.7)); }
.tj-badge--ring {
  /*
   * Let the transparent PNG and its built-in safe area define Jax's complete
   * silhouette. A CSS border-radius on the <img> clips the lower lettering and
   * flourishes, so the ring treatment must remain alpha-aware.
   */
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 1px rgba(201,164,92,.5))
          drop-shadow(0 0 22px rgba(201,164,92,.16))
          drop-shadow(0 18px 30px rgba(0,0,0,.72));
}

/* ---------- spade watermark ---------- */
.tj-spade-mark {
  position: absolute; pointer-events: none; color: rgba(238,227,200,.045);
  font-size: 42vmin; line-height: 1; user-select: none;
}

/* ---------- feed rows: telegraph slips ---------- */
.tj-feed-row {
  display: flex; align-items: baseline; gap: 10px;
  background: #14120f; border: 1px solid rgba(201,164,92,.16);
  border-left: 3px solid var(--tj-red-deep);
  border-radius: 6px; padding: 9px 14px; font-size: 14.5px;
  animation: tj-slide-in .5s cubic-bezier(.25,.8,.35,1);
}
.tj-feed-row .who { color: var(--tj-ink); font-weight: 700; }
.tj-feed-row .what { color: var(--tj-ink-2); }
.tj-feed-row .tail { margin-left: auto; font-family: var(--tj-mono); color: var(--tj-ink-3); flex-shrink: 0; }
.tj-feed-row--money { border-left-color: var(--tj-gold-dim); }
.tj-feed-row--money .tail { color: var(--tj-gold); }
@keyframes tj-slide-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- single-series bars: struck gold on coal ---------- */
.tj-bar-track { height: 10px; background: #0c0b09; border-radius: 3px; border: 1px solid rgba(201,164,92,.14); position: relative; }
.tj-bar-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 3px;
  background: linear-gradient(90deg, #6e5a30, var(--tj-gold) 70%, var(--tj-gold-bright));
  box-shadow: inset 0 1px 0 rgba(255,244,214,.28);
}

/* ---------- seats & tables ---------- */
.tj-seat {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tj-serif); font-weight: 700; font-size: 12px;
  background: radial-gradient(circle at 35% 30%, #262019, #14100c 70%);
  border: 2px solid var(--tj-gold-dim); color: var(--tj-parchment);
  box-shadow: 0 3px 8px rgba(0,0,0,.6);
}
.tj-seat--empty { border-color: #2c2820; color: var(--tj-ink-3); background: #0f0e0c; }
.tj-seat--out { border-color: var(--tj-out); color: var(--tj-ink-3); filter: saturate(.4) brightness(.7); }
.tj-seat--money { border-color: var(--tj-gold-bright); box-shadow: 0 0 12px rgba(224,189,118,.35), 0 3px 8px rgba(0,0,0,.6); }

/* ---------- champion: gold dust in the dark ---------- */
.tj-dust { position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--tj-gold-bright); opacity: 0; animation: tj-dust-fall linear infinite; }
@keyframes tj-dust-fall {
  0% { transform: translateY(-8vh) translateX(0); opacity: 0; }
  12% { opacity: .85; }
  100% { transform: translateY(104vh) translateX(4vw); opacity: 0; }
}

/* ---------- ember pulse for "live" dots ---------- */
.tj-ember { width: 9px; height: 9px; border-radius: 50%; background: var(--tj-live);
  box-shadow: 0 0 8px rgba(95,143,106,.8); animation: tj-ember 2.6s ease-in-out infinite; }
@keyframes tj-ember { 50% { box-shadow: 0 0 3px rgba(95,143,106,.4); opacity: .7; } }

/* ---------- sponsor plate ---------- */
.tj-sponsor-plate {
  background: #100f0d; border: 1px dashed rgba(201,164,92,.3); border-radius: 8px;
  color: var(--tj-ink-3); font-variant: small-caps; letter-spacing: .2em;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- hairline rules & suit dividers ---------- */
.tj-rule { display: flex; align-items: center; gap: 14px; color: var(--tj-gold-dim); }
.tj-rule::before, .tj-rule::after { content: ""; flex: 1; border-top: var(--tj-hairline); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tj-feed-row, .tj-dust, .tj-ember { animation: none !important; }
}