/* ════════════════════════════════════════════════════════════════════════
   WARERA SENTINEL — "OBSIDIAN SOVEREIGN" DESIGN SYSTEM 3.0
   ─ The majesty of an imperial war room × midnight-navy velvet ×
     carved antique gold × luxury ivory.
   Bloomberg Terminal density × Star Citizen gravitas × royal court.
   Zero third-party runtime dependencies. Fully self-contained.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (vendored woff2, offline-first — frozen) ────────────────────── */
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-latin-900-normal.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-arabic-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-arabic-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-arabic-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-arabic-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-arabic-900-normal.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── SOVEREIGN Design Tokens ─────────────────────────────────────────────
   Navy velvet base · carved antique gold · luxury ivory · crimson lacquer */
:root {
  /* Obsidian navy velvet */
  --bg: #070a14;
  --bg-deep: #04060d;
  --bg-elev: #0b101f;
  --panel: linear-gradient(180deg, rgba(41,56,102,.26) 0%, rgba(13,17,34,.62) 100%);
  --panel-solid: #0c1224;
  --surface: rgba(216,196,150,.05);
  --surface-2: rgba(226,204,156,.10);

  /* Carved antique gold */
  --gold: #c9a44c;
  --gold-bright: #e9cd7f;
  --gold-deep: #8a6c2c;
  --gold-soft: rgba(201,164,74,.12);
  --gold-hairline: rgba(201,164,74,.22);
  --border: rgba(201,164,74,.17);
  --border-strong: rgba(222,186,94,.45);

  /* Ivory */
  --ivory: #f2ead6;
  --ivory-dim: #cfc3a4;

  /* Noble accents */
  --cyan: #4fd1e8;
  --cyan-soft: rgba(79,209,232,.12);
  --crimson: #e05252;
  --crimson-soft: rgba(224,82,82,.14);
  --emerald: #3ecf8e;
  --emerald-soft: rgba(62,207,142,.12);
  --violet: #b98aff;
  --violet-soft: rgba(185,138,255,.13);
  --azure: #7fa6e8;
  --azure-soft: rgba(127,166,232,.13);
  --pink: #e8a0c8;

  /* Rarity — the sovereign scale (no arcade neons) */
  --r-mythic: #ffd97a;
  --r-legendary: #d9b651;
  --r-epic: #cfd8e8;
  --r-rare: #7f9cc4;
  --r-common: #979aa4;

  --text-1: #f2ead6;
  --text-2: #b7b09c;
  --text-3: #8d8874;
  --text-4: #5d5a4c;

  /* Corner filigree — the khatam corner flourish (4 rotations) */
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M1.5 20.5V7.5C1.5 4 4 1.5 7.5 1.5h13' stroke='%23d6b254' stroke-opacity='.5' stroke-width='1.1'/%3E%3Cpath d='M4.5 20.5V9.5c0-2.8 2.2-5 5-5h12' stroke='%23d6b254' stroke-opacity='.25' stroke-width='.8'/%3E%3Cpath d='M7.5 1.5L10 4l-2.5 2.5L5 4z' fill='%23d6b254' fill-opacity='.75'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.5 20.5V7.5c0-3.5-2.5-6-6-6h-13' stroke='%23d6b254' stroke-opacity='.5' stroke-width='1.1'/%3E%3Cpath d='M17.5 20.5V9.5c0-2.8-2.2-5-5-5H5.5' stroke='%23d6b254' stroke-opacity='.25' stroke-width='.8'/%3E%3Cpath d='M14.5 1.5L12 4l2.5 2.5L17 4z' fill='%23d6b254' fill-opacity='.75'/%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M1.5 1.5h13c3.5 0 6 2.5 6 6v13' stroke='%23d6b254' stroke-opacity='.5' stroke-width='1.1'/%3E%3Cpath d='M4.5 1.5h12c2.8 0 5 2.2 5 5v12' stroke='%23d6b254' stroke-opacity='.25' stroke-width='.8'/%3E%3Cpath d='M7.5 20.5L10 18l-2.5-2.5L5 18z' fill='%23d6b254' fill-opacity='.75'/%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.5 1.5h-13c-3.5 0-6 2.5-6 6v13' stroke='%23d6b254' stroke-opacity='.5' stroke-width='1.1'/%3E%3Cpath d='M17.5 1.5H5.5c-2.8 0-5 2.2-5 5v12' stroke='%23d6b254' stroke-opacity='.25' stroke-width='.8'/%3E%3Cpath d='M14.5 20.5L12 18l2.5-2.5 2.5 2.5z' fill='%23d6b254' fill-opacity='.75'/%3E%3C/svg%3E");

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;

  --font-ui: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* Deep royal shadows */
  --shadow-royal: 0 26px 60px -26px rgba(1,3,9,.95), 0 6px 20px -10px rgba(0,0,0,.65);
  --shadow-sm: 0 10px 26px -14px rgba(1,3,9,.8);
  --shadow-gold: 0 0 0 1px rgba(201,164,74,.10), 0 18px 44px -18px rgba(1,3,9,.9);
  --ring-gold: 0 0 0 3px rgba(201,164,74,.22);
  --ease: cubic-bezier(.22,.68,.35,1);
  --dur: 160ms;
}

/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
[dir="ltr"] body { font-family: var(--font-ui); }
::selection { background: rgba(201,164,74,.35); color: #fff; }
img { user-select: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
a { color: var(--gold); text-decoration: none; }
a:hover { filter: brightness(1.15); }

/* Ambient: navy velvet room — candlelit gold bloom + woven grid + vignette */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1200px 560px at 82% -10%, rgba(201,164,74,.075), transparent 62%),
    radial-gradient(1000px 520px at -6% 112%, rgba(64,84,150,.14), transparent 58%),
    radial-gradient(800px 400px at 50% 118%, rgba(201,164,74,.05), transparent 60%),
    linear-gradient(180deg, #070a14 0%, #05070f 55%, #04060d 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(222,204,156,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222,204,156,.016) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 28%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 28%, transparent 88%);
}

/* Scrollbars — gilded */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,164,74,.22); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(201,164,74,.42); }

/* ── Typography ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 800; }
.view-title { font-size: clamp(22px, 3.2vw, 30px); font-weight: 900; letter-spacing: -.01em; color: var(--ivory); }
.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.text-gold { color: var(--gold); }
.text-cyan { color: var(--cyan); }
.text-crimson { color: var(--crimson); }
.text-emerald { color: var(--emerald); }
.text-violet { color: var(--violet); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px;
  transform: rotate(45deg);
  background: currentColor; box-shadow: 0 0 10px currentColor;
}
.eyebrow.gold { color: var(--gold); }
.eyebrow.cyan { color: var(--cyan); }
.eyebrow.crimson { color: var(--crimson); }
.eyebrow.violet { color: var(--violet); }
.eyebrow.emerald { color: var(--emerald); }
.eyebrow.azure { color: var(--azure); }

/* Ornamental section divider — gilded rule with khatam center */
.view-head { position: relative; }
.view-head::after {
  content: ""; display: block; height: 16px; margin-top: 14px;
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 1.6px, transparent 2.4px) 50% 50% / 12px 16px no-repeat,
    radial-gradient(circle at 50% 50%, var(--gold-deep) 0 1.1px, transparent 1.8px) calc(50% - 64px) 50% / 8px 16px no-repeat,
    radial-gradient(circle at 50% 50%, var(--gold-deep) 0 1.1px, transparent 1.8px) calc(50% + 64px) 50% / 8px 16px no-repeat,
    linear-gradient(90deg, transparent, rgba(214,178,84,.55) 20%, rgba(214,178,84,.55) 80%, transparent) 50% 50% / 100% 1px no-repeat;
  opacity: .8;
}

/* ── Shell / Layout ───────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

/* Icon rail — the sovereign spine */
.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: 78px; z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(10,14,28,.92), rgba(7,10,20,.92));
  backdrop-filter: blur(16px);
  border-inline-end: 1px solid var(--gold-hairline);
  box-shadow: inset -1px 0 0 rgba(1,3,9,.6);
  gap: 4px;
}
.rail-logo {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 12px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(233,205,127,.28), rgba(201,164,74,.05) 60%),
    linear-gradient(160deg, rgba(201,164,74,.20), rgba(201,164,74,.04));
  border: 1px solid rgba(222,186,94,.5);
  box-shadow:
    inset 0 1px 0 rgba(242,234,214,.18),
    inset 0 0 0 3px rgba(7,10,20,.55),
    0 0 26px -6px rgba(201,164,74,.5);
  color: var(--gold-bright);
}
.rail-logo svg { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(233,205,127,.6)); }
.rail-btn {
  position: relative;
  width: 58px; padding: 9px 0 7px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text-3);
  font-size: 9.5px; font-weight: 700;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border var(--dur) var(--ease);
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn:hover { color: var(--ivory); background: var(--surface); }
.rail-btn.active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(201,164,74,.18), rgba(201,164,74,.06));
  border-color: rgba(222,186,94,.35);
  box-shadow: inset 0 1px 0 rgba(242,234,214,.10);
}
.rail-btn.active::before {
  content: ""; position: absolute; inset-inline-start: -11px; top: 22%;
  height: 56%; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 0 12px rgba(201,164,74,.8);
}
.rail-badge {
  position: absolute; top: 4px; inset-inline-end: 8px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--crimson); color: #fff;
  font-size: 9px; font-weight: 800; font-family: var(--font-mono);
  display: grid; place-items: center;
  box-shadow: 0 0 10px -2px var(--crimson);
}
.rail-spacer { flex: 1; }

/* Main column */
.main {
  flex: 1; min-width: 0;
  margin-inline-start: 78px;
  display: flex; flex-direction: column;
}

/* Topbar — gilded command bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 20px;
  background: linear-gradient(180deg, rgba(10,14,28,.88), rgba(7,10,20,.82));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--gold-hairline);
  box-shadow: 0 8px 24px -18px rgba(1,3,9,.9), inset 0 -1px 0 rgba(242,234,214,.04);
}
.topbar .breadcrumb { display: flex; flex-direction: column; min-width: 0; }
.topbar .breadcrumb .view-name { font-weight: 900; font-size: 15px; white-space: nowrap; color: var(--ivory); }
.topbar .breadcrumb .view-desc { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }
.lang-switcher { position: relative; }
.lang-menu { position: absolute; z-index: 80; top: calc(100% + 7px); inset-inline-end: 0; width: 142px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #101528; box-shadow: 0 14px 34px rgba(0,0,0,.42); }
.lang-menu button { display: block; width: 100%; border: 0; border-radius: 6px; padding: 8px 9px; color: var(--text-1); background: transparent; text-align: start; font: 700 11px var(--font-ui); cursor: pointer; }
.lang-menu button:hover, .lang-menu button.active { background: rgba(212,166,75,.14); color: var(--gold); }
.topbar-clock { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); font-weight: 500; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; font-family: var(--font-mono);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--emerald);
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-pill.sim { color: var(--violet); }

/* Brand seal in topbar */
.brand-seal { display: inline-flex; align-items: center; gap: 8px; }
.brand-seal .seal-crown { color: var(--gold-bright); filter: drop-shadow(0 0 8px rgba(233,205,127,.55)); }
.brand-seal .seal-word {
  font-family: var(--font-mono); font-size: 9px; font-weight: 800;
  letter-spacing: .22em; color: var(--gold-bright);
  padding: 3px 8px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(201,164,74,.22), rgba(201,164,74,.06));
  border: 1px solid rgba(222,186,94,.4);
  box-shadow: inset 0 1px 0 rgba(242,234,214,.14);
}

/* Ticker — the royal dispatch */
.ticker {
  display: flex; align-items: stretch; min-height: 34px;
  border-bottom: 1px solid var(--gold-hairline);
  background: linear-gradient(90deg, rgba(12,16,32,.7), rgba(9,12,24,.6));
  overflow: hidden; position: relative; z-index: 40;
}
.ticker-label {
  display: flex; align-items: center; gap: 7px; padding: 0 14px;
  font-size: 10px; font-weight: 900; letter-spacing: .12em;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(201,164,74,.18), rgba(201,164,74,.05));
  border-inline-end: 1px solid var(--gold-hairline); white-space: nowrap;
}
.ticker-label .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.ticker-track { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-inner { display: inline-flex; gap: 44px; padding-inline-start: 24px; white-space: nowrap; animation: marq 42s linear infinite; }
.ticker:hover .ticker-inner { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
[dir="rtl"] .ticker-inner { animation-name: marq-rtl; }
@keyframes marq-rtl { to { transform: translateX(50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.ticker-item b { color: var(--text-1); font-weight: 700; }

/* View container */
.views { padding: 22px 22px 60px; max-width: 1560px; width: 100%; margin: 0 auto; }
.view { display: none; animation: viewIn 320ms var(--ease); }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view-head { margin-bottom: 18px; }
.view-head h1 { margin-top: 6px; }
.view-sub { color: var(--text-3); font-size: 12.5px; margin-top: 5px; max-width: 640px; }

/* ── Cards & Gilded Panels ──────────────────────────────────────────────
   Multi-layer gilded border: hairline gold + ivory sheen + inner halo +
   deep royal shadow, with khatam corner filigree on every panel.        */
.card {
  position: relative;
  background-image: var(--corner-tl), var(--corner-tr), var(--corner-bl), var(--corner-br), var(--panel);
  background-repeat: no-repeat;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0;
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(242,234,214,.05),
    inset 0 0 0 1px rgba(201,164,74,.05),
    var(--shadow-sm);
  padding: 18px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card.hoverable:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(242,234,214,.08),
    inset 0 0 0 1px rgba(201,164,74,.10),
    var(--shadow-royal);
}
.card-pad-sm { padding: 13px 15px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, transparent, rgba(201,164,74,.06) 30%, rgba(201,164,74,.06) 70%, transparent) 0 100% / 100% 1px no-repeat;
}
.card-head h3 { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--ivory); }
.card-head h3 svg { width: 16px; height: 16px; }

/* The full sovereign treatment (special panels) */
.gilt {
  border: 1px solid var(--border-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(242,234,214,.08),
    inset 0 0 0 3px rgba(201,164,74,.06),
    var(--shadow-gold) !important;
}

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ── KPI Cards ────────────────────────────────────────────────────────── */
.kpi {
  position: relative; overflow: hidden;
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(242,234,214,.05), var(--shadow-sm);
  transition: all var(--dur) var(--ease);
}
.kpi:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.kpi .k-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--text-2); }
.kpi .k-label svg { width: 15px; height: 15px; opacity: .85; }
.kpi .k-value { font-family: var(--font-mono); font-size: 24px; font-weight: 800; margin-top: 6px; direction: ltr; text-align: start; }
.kpi .k-sub { font-size: 10.5px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--gold)), transparent);
  opacity: .55;
}
.kpi::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--gold)), transparent);
  opacity: 0; transition: opacity var(--dur);
}
.kpi:hover::after { opacity: .9; }
.kpi.accent-crimson { --accent: var(--crimson); } .kpi.accent-crimson .k-value { color: var(--crimson); }
.kpi.accent-gold { --accent: var(--gold); } .kpi.accent-gold .k-value { color: var(--gold); }
.kpi.accent-cyan { --accent: var(--cyan); } .kpi.accent-cyan .k-value { color: var(--cyan); }
.kpi.accent-emerald { --accent: var(--emerald); } .kpi.accent-emerald .k-value { color: var(--emerald); }
.kpi.accent-violet { --accent: var(--violet); } .kpi.accent-violet .k-value { color: var(--violet); }
.flash { animation: flash .7s var(--ease); }
@keyframes flash { 0% { text-shadow: 0 0 18px currentColor; } 100% { text-shadow: none; } }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(216,196,150,.09), rgba(216,196,150,.03));
  color: var(--text-1);
  font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(242,234,214,.07);
  transition: all 140ms var(--ease);
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn:hover { background: linear-gradient(180deg, rgba(226,204,156,.15), rgba(226,204,156,.05)); border-color: var(--border-strong); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* The sovereign gold — engraved antique, not plastic */
.btn-gold {
  background: linear-gradient(175deg, #e9cd7f 0%, #c9a44c 45%, #a5812f 100%);
  color: #241a05;
  border-color: rgba(233,205,127,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,246,220,.55),
    inset 0 -2px 4px rgba(90,64,14,.45),
    0 8px 22px -10px rgba(201,164,74,.65);
  text-shadow: 0 1px 0 rgba(255,246,220,.35);
}
.btn-gold:hover { background: linear-gradient(175deg, #f4dd94 0%, #d4af55 45%, #b08a35 100%); filter: none; }
.btn-azure { background: linear-gradient(170deg, rgba(127,166,232,.22), rgba(127,166,232,.08)); color: var(--azure); border-color: rgba(127,166,232,.4); }
.btn-crimson { background: var(--crimson-soft); color: var(--crimson); border-color: rgba(224,82,82,.38); }
.btn-emerald { background: var(--emerald-soft); color: var(--emerald); border-color: rgba(62,207,142,.38); }
.btn-violet { background: var(--violet-soft); color: var(--violet); border-color: rgba(185,138,255,.38); }
.btn-sm { padding: 6px 11px; font-size: 11px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; border-radius: var(--r-md); }

/* ── Badges / Pills / Tags ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 800;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2);
  white-space: nowrap;
}
.badge .b-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.gold { color: var(--gold-bright); border-color: rgba(201,164,74,.38); background: var(--gold-soft); }
.badge.cyan { color: var(--cyan); border-color: rgba(79,209,232,.3); background: var(--cyan-soft); }
.badge.crimson { color: var(--crimson); border-color: rgba(224,82,82,.34); background: var(--crimson-soft); }
.badge.emerald { color: var(--emerald); border-color: rgba(62,207,142,.3); background: var(--emerald-soft); }
.badge.violet { color: var(--violet); border-color: rgba(185,138,255,.32); background: var(--violet-soft); }
.badge.azure { color: var(--azure); border-color: rgba(127,166,232,.34); background: var(--azure-soft); }

/* ── Tables ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
table.table { width: 100%; border-collapse: collapse; font-size: 12px; background: rgba(8,11,22,.55); }
.table thead th {
  text-align: start; padding: 11px 14px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 800;
  background: linear-gradient(180deg, rgba(201,164,74,.09), rgba(201,164,74,.03));
  border-bottom: 1px solid var(--gold-hairline);
  white-space: nowrap;
}
.table tbody td { padding: 11px 14px; border-bottom: 1px solid rgba(201,164,74,.07); color: var(--text-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur); }
.table tbody tr:hover { background: rgba(201,164,74,.05); }
.table tr.hl-row { background: linear-gradient(90deg, rgba(201,164,74,.12), rgba(201,164,74,.03)); box-shadow: inset 3px 0 0 var(--gold); }
[dir="rtl"] .table tr.hl-row { box-shadow: inset -3px 0 0 var(--gold); }
.table .num { color: var(--text-1); font-weight: 500; }

/* ── Form controls ────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; font-weight: 800; color: var(--text-2); display: flex; justify-content: space-between; align-items: center; }
.field label .val { font-family: var(--font-mono); color: var(--gold-bright); font-weight: 700; direction: ltr; }
.input, .select {
  width: 100%; padding: 9px 12px;
  background: rgba(4,6,13,.8); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  box-shadow: inset 0 2px 6px rgba(1,3,9,.5);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.input:focus, .select:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 6px rgba(1,3,9,.5), 0 0 0 3px rgba(201,164,74,.16); }
.input::placeholder { color: var(--text-4); font-weight: 500; }

/* Range geometry must stay LTR even when the Arabic shell is RTL: otherwise
   WebKit moves the thumb from the opposite edge while our fill remains LTR. */
input[type="range"] { -webkit-appearance: none; appearance: none; direction: ltr; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--slider-c, var(--gold)) var(--fill, 50%), rgba(222,204,156,.10) var(--fill, 50%)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7f1de, #cfc3a4);
  border: 3px solid var(--slider-c, var(--gold));
  box-shadow: 0 0 0 4px rgba(1,3,9,.5), 0 0 14px -2px var(--slider-c, var(--gold));
  transition: transform 120ms var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.16); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(222,204,156,.10); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--slider-c, var(--gold)); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #cfc3a4; border: 3px solid var(--slider-c, var(--gold)); }
.range-marks { direction: ltr; display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-4); font-family: var(--font-mono); }

.switch { position: relative; width: 38px; height: 21px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; border-radius: 99px; background: rgba(222,204,156,.1); transition: 150ms var(--ease); border: 1px solid var(--border); }
.switch .track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 15px; height: 15px; border-radius: 50%; background: #8f8874; transition: 150ms var(--ease); }
.switch input:checked + .track { background: var(--emerald-soft); border-color: rgba(62,207,142,.5); }
.switch input:checked + .track::after { transform: translateX(17px); background: var(--emerald); box-shadow: 0 0 10px var(--emerald); }
[dir="rtl"] .switch input:checked + .track::after { transform: translateX(-17px); }

/* ── Tabs / segmented ─────────────────────────────────────────────────── */
.seg { display: inline-flex; gap: 3px; padding: 3px; background: rgba(201,164,74,.05); border: 1px solid var(--border); border-radius: var(--r-md); }
.seg button {
  padding: 6px 12px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3);
  font-size: 11px; font-weight: 800; transition: all 140ms var(--ease);
  white-space: nowrap;
}
.seg button:hover { color: var(--ivory); }
.seg button.active { background: linear-gradient(180deg, rgba(226,204,156,.14), rgba(226,204,156,.05)); color: var(--ivory); box-shadow: inset 0 1px 0 rgba(242,234,214,.1), 0 2px 8px rgba(1,3,9,.45); }
.seg button.seg-crimson.active { background: var(--crimson-soft); color: var(--crimson); }
.seg button.seg-gold.active { background: var(--gold-soft); color: var(--gold-bright); }
.seg button.seg-cyan.active { background: var(--cyan-soft); color: var(--cyan); }
.seg button.seg-emerald.active { background: var(--emerald-soft); color: var(--emerald); }

/* ── Progress bars ────────────────────────────────────────────────────── */
.pbar { position: relative; height: 7px; border-radius: 99px; background: rgba(222,204,156,.08); overflow: hidden; box-shadow: inset 0 1px 3px rgba(1,3,9,.6); }
.pbar > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 99px; transition: width .6s var(--ease); }
.pbar.gold > i { background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); box-shadow: 0 0 12px -2px var(--gold); }
.pbar.cyan > i { background: linear-gradient(90deg, #147086, var(--cyan)); box-shadow: 0 0 12px -2px var(--cyan); }
.pbar.crimson > i { background: linear-gradient(90deg, #8c2626, var(--crimson)); box-shadow: 0 0 12px -2px var(--crimson); }
.pbar.emerald > i { background: linear-gradient(90deg, #1d7a52, var(--emerald)); box-shadow: 0 0 12px -2px var(--emerald); }
.pbar.violet > i { background: linear-gradient(90deg, #6d43b8, var(--violet)); box-shadow: 0 0 12px -2px var(--violet); }

/* Battle split bar */
.splitbar { display: flex; height: 26px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); direction: ltr; }
.splitbar .side { display: flex; align-items: center; padding: 0 9px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #fff; transition: width .5s var(--ease); min-width: 0; overflow: hidden; }
.splitbar .att { background: linear-gradient(120deg, #173a6e, #2b5cb0); }
.splitbar .def { background: linear-gradient(120deg, #6e1d1d, #b03535); justify-content: flex-end; }

/* ── Empty / Skeleton / Loading ───────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 46px 20px; text-align: center; color: var(--text-3);
  border: 1px dashed var(--gold-hairline); border-radius: var(--r-xl);
  background: rgba(201,164,74,.02);
}
.empty svg { width: 34px; height: 34px; opacity: .5; }
.empty .e-title { font-weight: 800; color: var(--text-2); }
.empty .e-sub { font-size: 11.5px; max-width: 380px; }
.skeleton {
  position: relative; overflow: hidden;
  background: rgba(222,204,156,.05); border-radius: var(--r-md);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(233,205,127,.09) 50%, transparent 80%);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-inline { display: inline-block; min-width: 34px; min-height: 12px; }

/* ── Modal — gilded chamber ───────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3,5,10,.86); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease);
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background-image: var(--corner-tl), var(--corner-tr), var(--corner-bl), var(--corner-br),
    linear-gradient(180deg, #121a33 0%, #0a0f20 60%, #070b16 100%);
  background-repeat: no-repeat;
  background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), 0 0;
  background-size: 22px 22px, 22px 22px, 22px 22px, 22px 22px, auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 rgba(242,234,214,.08),
    inset 0 0 0 3px rgba(201,164,74,.05),
    var(--shadow-royal);
  transform: translateY(14px) scale(.97); transition: transform 200ms var(--ease);
}
.modal-back.open .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gold-hairline); position: sticky; top: 0; background: rgba(10,14,28,.94); z-index: 2; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.modal-head h3 { font-size: 15px; display: flex; align-items: center; gap: 9px; color: var(--ivory); }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-x { background: var(--surface); border: 1px solid var(--border); color: var(--text-3); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.modal-x:hover { color: var(--ivory); border-color: var(--border-strong); }

/* Ledger rows (calculator) */
.ledger { display: flex; flex-direction: column; gap: 8px; }
.ledger .row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-2); }
.ledger .row b { font-family: var(--font-mono); font-weight: 700; direction: ltr; }
.ledger .row.total { padding-top: 10px; border-top: 1px solid var(--gold-hairline); color: var(--text-1); font-weight: 800; font-size: 13.5px; }

/* ── Toasts ───────────────────────────────────────────────────────────── */
.toasts { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--r-md);
  background: linear-gradient(180deg, #141c36, #0b101f);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-royal); font-size: 12.5px; font-weight: 700;
  animation: toastIn .28s var(--ease);
  max-width: 340px;
}
.toast.gold { border-color: rgba(222,186,94,.5); }
.toast.emerald { border-color: rgba(62,207,142,.45); }
.toast.crimson { border-color: rgba(224,82,82,.5); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ── Battle cards (Sniper Radar) ──────────────────────────────────────── */
.battle-card { position: relative; overflow: hidden; }
.battle-card .bc-ribbon {
  position: absolute; inset-inline-end: -32px; top: 12px;
  transform: rotate(38deg);
  background: linear-gradient(90deg, #8c2626, var(--crimson));
  color: #fff;
  font-size: 9px; font-weight: 900; letter-spacing: .1em;
  padding: 3px 34px; z-index: 1;
  box-shadow: 0 4px 12px -4px rgba(224,82,82,.6);
}
[dir="rtl"] .battle-card .bc-ribbon { transform: rotate(-38deg); }
.bc-flags { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 900; font-size: 14.5px; }
.bc-vs { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-4); font-weight: 500; }
.rank-tab {
  flex: 1; padding: 5px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-3); font-size: 10px; font-weight: 800;
  transition: all 140ms var(--ease);
}
.rank-tab:hover { color: var(--ivory); }
.rank-tab.active { background: var(--gold-soft); border-color: rgba(222,186,94,.45); color: var(--gold-bright); box-shadow: inset 0 1px 0 rgba(242,234,214,.1); }
.wpn-btn {
  padding: 5px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: rgba(201,164,74,.04); transition: all 130ms var(--ease); line-height: 0;
}
.wpn-btn img { width: 17px; height: 17px; }
.wpn-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.wpn-btn.active { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 12px -4px var(--gold); }

/* ════════════════════════════════════════════════════════════════════════
   THE SOVEREIGN ARENA — one wide, clean battlefield (Gwent-grade clarity)
   Minimal HUD · full-width lanes · large painted cards · smooth motion
   ════════════════════════════════════════════════════════════════════════ */
.arena-shell { position: relative; }

.arena-stage {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, rgba(4,6,13,.42) 0%, rgba(4,6,13,.14) 26%, rgba(4,6,13,.16) 74%, rgba(4,6,13,.48) 100%),
    url('/assets/royale/table.jpg') center / cover no-repeat,
    #070a14;
  box-shadow:
    inset 0 0 0 3px rgba(201,164,74,.10),
    inset 0 1px 0 rgba(242,234,214,.10),
    var(--shadow-royal);
  padding: 16px 20px 18px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow 260ms var(--ease);
}
/* Turn atmosphere — a whisper of gold (you) or crimson (foe) */
.arena-stage.turn-me { box-shadow: inset 0 0 0 3px rgba(233,205,127,.28), inset 0 1px 0 rgba(242,234,214,.10), 0 0 34px -10px rgba(201,164,74,.55), var(--shadow-royal); }
.arena-stage.turn-foe { box-shadow: inset 0 0 0 3px rgba(224,82,82,.22), inset 0 1px 0 rgba(242,234,214,.08), 0 0 34px -10px rgba(224,82,82,.35), var(--shadow-royal); }

/* ── HUD top: foe plate · round pips · championship ───────────────────── */
.arena-hud-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plate { display: flex; align-items: center; gap: 9px; }
.plate-mono {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 14px;
  color: var(--ivory);
  background: radial-gradient(circle at 35% 30%, #1c2547, #0a0f22 70%);
  border: 1.5px solid var(--gold-hairline);
  box-shadow: inset 0 1px 0 rgba(242,234,214,.15), 0 0 0 3px rgba(7,10,20,.5);
}
.plate-mono.gold { color: var(--gold-bright); border-color: rgba(233,205,127,.55); box-shadow: inset 0 1px 0 rgba(242,234,214,.15), 0 0 0 3px rgba(7,10,20,.5), 0 0 14px -4px rgba(233,205,127,.6); }
.plate-name { font-size: 12px; font-weight: 900; color: var(--ivory); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foe-hand-mini { display: inline-flex; align-items: center; direction: ltr; }
.foe-hand-mini .cb {
  width: 15px; height: 20px; border-radius: 2.5px;
  background: url('/assets/royale/cardback.jpg') center / cover no-repeat;
  border: 1px solid rgba(222,186,94,.55);
  box-shadow: 0 2px 5px -2px rgba(1,3,9,.8);
  margin-left: -5px;
}
.foe-hand-mini .cb:first-child { margin-left: 0; }

/* Round pips — gem diamonds flanking the round seal */
.round-pips { display: flex; align-items: center; gap: 12px; direction: ltr; }
.round-pips .pips-side { display: flex; gap: 5px; }
.round-pip {
  width: 11px; height: 11px; transform: rotate(45deg);
  border: 1px solid var(--gold-hairline); border-radius: 2.5px;
  background: rgba(4,6,13,.6);
  box-shadow: inset 0 1px 2px rgba(1,3,9,.7);
  transition: all 200ms var(--ease);
}
.round-pip.filled-me { background: radial-gradient(circle at 35% 30%, #ffe9ad, var(--gold) 55%, var(--gold-deep)); border-color: var(--gold-bright); box-shadow: 0 0 10px -2px var(--gold); }
.round-pip.filled-foe { background: radial-gradient(circle at 35% 30%, #f2b8b8, var(--crimson) 55%, #7e2020); border-color: var(--crimson); box-shadow: 0 0 10px -2px var(--crimson); }
.pip-round {
  font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  color: var(--gold-bright); text-shadow: 0 0 12px rgba(233,205,127,.4);
  min-width: 118px; text-align: center; white-space: nowrap;
}
.pip-round.you { animation: turnGlow 1.6s ease-in-out infinite; }
@keyframes turnGlow { 50% { text-shadow: 0 0 22px rgba(233,205,127,.85); } }

/* ── The board: three full-width velvet lanes ─────────────────────────── */
.arena-board { display: flex; flex-direction: column; gap: 8px; }
.lane-row { display: block; }
.lane {
  position: relative;
  display: flex; align-items: stretch; gap: 10px;
  border-radius: var(--r-md);
  transition: box-shadow 180ms var(--ease);
}
.lane-field {
  flex: 1; min-width: 0;
  display: grid; grid-template-rows: auto 1fr auto; gap: 5px;
  border-radius: var(--r-md);
  border: 1px solid rgba(201,164,74,.14);
  background: linear-gradient(180deg, rgba(10,14,30,.34), rgba(6,9,20,.46));
  box-shadow: inset 0 3px 14px rgba(1,3,9,.5);
  padding: 7px 10px;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.lane.targetable .lane-field {
  border-color: rgba(233,205,127,.7);
  background: linear-gradient(180deg, rgba(201,164,74,.12), rgba(201,164,74,.04));
  cursor: crosshair;
  box-shadow: inset 0 3px 14px rgba(1,3,9,.35), 0 0 26px -10px var(--gold);
  animation: targetPulse 1.3s infinite;
}
@keyframes targetPulse { 50% { border-color: rgba(233,205,127,.28); } }
.lane .slotrow { display: flex; gap: 6px; align-items: center; justify-content: center; direction: ltr; min-height: 64px; }
.lane .slotrow.foe { min-height: 40px; align-items: end; }
.lane-divider {
  position: relative; height: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, transparent, rgba(214,178,84,.5) 25%, rgba(214,178,84,.5) 75%, transparent) 50% 50% / 100% 1px no-repeat;
}
.lane-divider .ls-lead {
  font-size: 8px; font-weight: 900; letter-spacing: .1em;
  color: var(--text-3); background: #0a0e1c; padding: 0 8px;
}
.lane-divider .ls-lead.lead-me { color: var(--emerald); }
.lane-divider .ls-lead.lead-foe { color: var(--crimson); }
.lane-badge { position: absolute; top: 6px; inset-inline-start: 10px; z-index: 3; }

.lane-side {
  flex: none; width: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center;
}
.lane-crest svg { width: 17px; height: 17px; display: block; margin: 0 auto; }
.lane-name { font-size: 9px; font-weight: 900; color: var(--text-2); line-height: 1.2; }
.lane-power { display: flex; align-items: center; gap: 7px; direction: ltr; margin-top: 2px; }
.lane-power i { width: 16px; height: 1px; background: var(--gold-hairline); }
.lane-power .ls { font-family: var(--font-mono); font-weight: 800; direction: ltr; }
.lane-power .ls.me { font-size: 16px; color: var(--gold-bright); text-shadow: 0 0 12px rgba(233,205,127,.4); }
.lane-power .ls.foe { font-size: 11px; color: var(--crimson); opacity: .85; }

/* ── Status · Hand · HUD bottom ───────────────────────────────────────── */
.arena-status { text-align: center; font-size: 11px; color: var(--text-3); min-height: 16px; max-width: 640px; margin: 0 auto; }

/* Hand — the commander's fan */
.hand {
  display: flex; gap: 10px; justify-content: center; min-height: 138px;
  padding: 14px 6px 2px; direction: ltr; flex-wrap: wrap;
}
.hand .az-card:hover {
  transform: translateY(-18px) scale(1.07);
  box-shadow: 0 20px 38px -12px rgba(1,3,9,.95), 0 0 26px -6px var(--rarity, var(--gold));
  z-index: 5;
}

.arena-hud-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.arena-actions { display: flex; gap: 9px; }
/* Seal buttons — round gilded medallions */
.seal-btn {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1a2342, #0a0f22 72%);
  border: 1.5px solid var(--gold-hairline);
  color: var(--ivory-dim);
  box-shadow: inset 0 1px 0 rgba(242,234,214,.14), 0 4px 12px -6px rgba(1,3,9,.8);
  transition: all 150ms var(--ease);
}
.seal-btn svg { width: 16px; height: 16px; }
.seal-btn:hover { color: var(--ivory); border-color: var(--border-strong); transform: translateY(-2px); }
.seal-btn:active { transform: scale(.94); }
.seal-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.seal-btn.gold { color: var(--gold-bright); border-color: rgba(233,205,127,.5); box-shadow: inset 0 1px 0 rgba(242,234,214,.14), 0 0 16px -6px rgba(233,205,127,.7); }
.seal-btn.gold:hover { box-shadow: inset 0 1px 0 rgba(242,234,214,.18), 0 0 22px -4px rgba(233,205,127,.9); }
.seal-btn.violet { color: var(--violet); border-color: rgba(185,138,255,.45); }
.seal-btn.violet:hover { box-shadow: inset 0 1px 0 rgba(242,234,214,.14), 0 0 20px -6px rgba(185,138,255,.8); }

/* ── The Sovereign Card ─────────────────────────────────────────────────
   Painted portrait + gilded frame + metal power coin + event seal.       */
.az-card {
  position: relative;
  width: 96px; flex: none;
  aspect-ratio: 4 / 5;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(242,234,214,.06) 0%, rgba(242,234,214,0) 22%, rgba(242,234,214,0) 78%, rgba(4,6,13,.55) 100%),
    linear-gradient(165deg, #101730 0%, #0a0f20 100%);
  border: 1.5px solid var(--rarity, var(--border-strong));
  box-shadow:
    inset 0 0 0 1px rgba(242,234,214,.10),
    inset 0 0 0 3px rgba(7,10,20,.6),
    0 6px 16px -6px rgba(1,3,9,.85);
  padding: 0;
  display: flex; flex-direction: column;
  cursor: pointer; user-select: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.az-card .az-art {
  position: absolute; inset: 0 0 auto 0; height: 74%;
  width: 100%;
  object-fit: cover; object-position: center 30%;
  border-radius: 9.5px 9.5px 0 0;
}
.az-card .az-veil {
  position: absolute; inset: 0 0 auto 0; height: 74%;
  background: linear-gradient(180deg, rgba(4,6,13,.05) 55%, rgba(8,11,24,.88) 100%);
  border-radius: 9.5px 9.5px 0 0;
}
.az-card .az-name {
  position: absolute; inset: auto 0 0 0; height: 26%;
  display: grid; place-items: center; padding: 2px 5px;
  font-size: 9.2px; font-weight: 800; color: var(--ivory);
  text-align: center; line-height: 1.15;
  background: linear-gradient(180deg, rgba(201,164,74,.16), rgba(12,16,34,.9));
  border-top: 1px solid var(--rarity, var(--gold-hairline));
  border-radius: 0 0 9.5px 9.5px;
  overflow: hidden;
}
/* Affinity glyph on the nameplate */
.az-card .az-aff {
  position: absolute; bottom: 3px; inset-inline-end: 4px;
  font-size: 8px; opacity: .8;
  direction: ltr;
}
/* Power — a struck metal coin */
.az-card .az-pow {
  position: absolute; top: -9px; inset-inline-start: -9px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #f7ecd0 0%, #d9bd7a 38%, #a5812f 78%, #6e5417 100%);
  border: 1px solid #f0e2b8;
  color: #241a05;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800;
  box-shadow:
    inset 0 1px 1px rgba(255,250,235,.8),
    inset 0 -2px 3px rgba(80,56,10,.7),
    0 3px 8px -2px rgba(1,3,9,.8);
  text-shadow: 0 1px 0 rgba(255,250,235,.5);
}
/* Event — a small gilded seal for the ability */
.az-card .az-tag {
  position: absolute; top: -8px; inset-inline-end: -8px; z-index: 2;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: radial-gradient(circle at 32% 28%, #2a3558 0%, #101730 70%);
  border: 1px solid var(--rarity, var(--gold));
  color: var(--rarity, var(--gold-bright));
  font-size: 10.5px;
  box-shadow: 0 0 10px -3px var(--rarity, var(--gold)), inset 0 1px 0 rgba(242,234,214,.2);
}
/* Rarity frames */
.az-card.tier-mythic { --rarity: var(--r-mythic); box-shadow: inset 0 0 0 1px rgba(255,217,122,.55), inset 0 0 0 3px rgba(7,10,20,.6), 0 0 22px -4px rgba(255,217,122,.5), 0 6px 16px -6px rgba(1,3,9,.85); }
.az-card.tier-legendary { --rarity: var(--r-legendary); }
.az-card.tier-epic { --rarity: var(--r-epic); }
.az-card.tier-rare { --rarity: var(--r-rare); }
.az-card.tier-common { --rarity: var(--r-common); border-width: 1px; }
/* Rarity glow — mythic/legendary breathe */
.hand .az-card.tier-mythic { animation: rarityGlowMythic 2.6s ease-in-out infinite; }
.hand .az-card.tier-legendary { animation: rarityGlowLegend 3s ease-in-out infinite; }
@keyframes rarityGlowMythic {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,217,122,.55), inset 0 0 0 3px rgba(7,10,20,.6), 0 0 14px -5px rgba(255,217,122,.4), 0 6px 16px -6px rgba(1,3,9,.85); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,217,122,.75), inset 0 0 0 3px rgba(7,10,20,.6), 0 0 26px -3px rgba(255,217,122,.75), 0 6px 16px -6px rgba(1,3,9,.85); }
}
@keyframes rarityGlowLegend {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(217,182,81,.4), inset 0 0 0 3px rgba(7,10,20,.6), 0 0 10px -5px rgba(217,182,81,.3), 0 6px 16px -6px rgba(1,3,9,.85); }
  50% { box-shadow: inset 0 0 0 1px rgba(217,182,81,.6), inset 0 0 0 3px rgba(7,10,20,.6), 0 0 18px -4px rgba(217,182,81,.55), 0 6px 16px -6px rgba(1,3,9,.85); }
}

/* The card throw — 200ms, a hand's flick onto the table */
.az-card.board { cursor: default; animation: cardThrow 200ms var(--ease); }
.az-card.board .az-art { object-position: center 25%; }
.az-card.board .az-pow { width: 22px; height: 22px; min-width: 22px; font-size: 10.5px; top: -7px; inset-inline-start: -7px; }
.az-card.board .az-tag { width: 19px; height: 19px; font-size: 9px; top: -6px; inset-inline-end: -6px; }
.az-card.board .az-name { font-size: 8.2px; }
.az-card.board { width: 84px; }
.az-card.board .az-aff { display: none; }
.az-card.board.foe { width: 54px; }
.az-card.board.foe .az-pow { width: 17px; height: 17px; min-width: 17px; font-size: 8.5px; }
.az-card.board.foe .az-name { font-size: 6.5px; }
@keyframes cardThrow {
  from { transform: translateY(-46px) rotate(-9deg) scale(1.18); opacity: 0; }
  65% { transform: translateY(3px) rotate(1.6deg) scale(1.02); opacity: 1; }
  to { transform: none; }
}
.az-card.foe { filter: saturate(.82) brightness(.88); }
.az-card.dead { filter: grayscale(1) brightness(.5); }
/* Relief shake — the medic's pulse */
.az-card.healed { animation: healPulse 420ms var(--ease); }
@keyframes healPulse {
  20% { transform: translateX(-3px) scale(1.05); box-shadow: 0 0 22px -2px rgba(62,207,142,.9), inset 0 0 0 1px rgba(62,207,142,.7); }
  45% { transform: translateX(3px) scale(1.05); }
  70% { transform: translateX(-2px); box-shadow: 0 0 14px -4px rgba(62,207,142,.7), inset 0 0 0 1px rgba(62,207,142,.4); }
}
.az-card.shaken { animation: cardShake .35s var(--ease); }
@keyframes cardShake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.hand .az-card.played { transform: translateY(10px) scale(.9); opacity: 0; pointer-events: none; }
.hand .az-card:disabled, .az-card:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }
.az-card.targeted { transform: translateY(-12px) scale(1.06); box-shadow: 0 0 0 2px var(--gold-bright), 0 16px 30px -8px rgba(1,3,9,.9), 0 0 24px -4px var(--gold); z-index: 4; }

.arena-shake { animation: arenaShake .4s var(--ease); }
@keyframes arenaShake { 20% { transform: translate(-5px, 2px); } 45% { transform: translate(5px, -2px); } 70% { transform: translate(-3px, 1px); } }

/* Round verdict banner — a quiet, cinematic seal */
.round-banner {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(640px 320px at 50% 45%, rgba(4,6,13,.9), rgba(4,6,13,.78));
  backdrop-filter: blur(7px);
  animation: viewIn 240ms var(--ease);
  text-align: center;
}
.round-banner .rb-rule {
  width: 150px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}
.round-banner .rb-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
}
.round-banner .rb-title {
  font-size: 30px; font-weight: 900; letter-spacing: .06em;
  color: var(--gold-bright);
  text-shadow: 0 0 30px rgba(233,205,127,.55);
}
.round-banner .rb-sub { font-size: 12.5px; color: var(--ivory-dim); max-width: 400px; padding: 0 20px; }
.round-banner.foe .rb-title { color: var(--crimson); text-shadow: 0 0 26px rgba(224,82,82,.5); }
.round-banner.foe .rb-rule { background: linear-gradient(90deg, transparent, var(--crimson), transparent); }

/* Gem vault HUD */
.gem-vault {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 99px;
  background: rgba(4,6,13,.72); border: 1px solid var(--gold-hairline);
  backdrop-filter: blur(6px);
}
.gem-vault svg { width: 14px; height: 14px; color: var(--gold-bright); filter: drop-shadow(0 0 5px rgba(233,205,127,.6)); }
.gem-vault .gem-n { font-family: var(--font-mono); font-weight: 800; font-size: 12px; color: var(--gold-bright); direction: ltr; }
.gem-vault.bump { animation: gemBump .4s var(--ease); }
@keyframes gemBump { 30% { transform: scale(1.14); box-shadow: 0 0 18px -2px var(--gold); } }

/* Championship drawer — slides in from the end side */
.drawer-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3,5,10,.66); backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease);
}
.drawer-back.open { opacity: 1; pointer-events: auto; }
.arena-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 95;
  width: min(392px, 94vw);
  background: linear-gradient(180deg, #0e1428, #080c19);
  border-left: 1px solid var(--border-strong);
  box-shadow: -24px 0 60px -24px rgba(1,3,9,.9);
  transform: translateX(105%);
  transition: transform 240ms var(--ease);
  display: flex; flex-direction: column;
}
[dir="rtl"] .arena-drawer { right: auto; left: 0; border-left: none; border-right: 1px solid var(--border-strong); transform: translateX(-105%); }
.arena-drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--gold-hairline);
}
.drawer-head h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--ivory); }
.drawer-head h3 svg { width: 16px; height: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }

/* Tournament escrow panel */
.countdown-digits { display: flex; gap: 8px; direction: ltr; }
.cd-cell { flex: 1; text-align: center; background: rgba(4,6,13,.8); border: 1px solid var(--gold-hairline); border-radius: var(--r-md); padding: 10px 4px; box-shadow: inset 0 2px 8px rgba(1,3,9,.6); }
.cd-cell .cd-v { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--gold-bright); text-shadow: 0 0 14px rgba(233,205,127,.4); }
.cd-cell .cd-l { font-size: 9px; color: var(--text-3); font-weight: 800; letter-spacing: .08em; }

/* ── Glory board & prize ladder (16) ──────────────────────────────────── */
.champion-board { max-height: 320px; overflow-y: auto; border: 1px solid var(--gold-hairline); border-radius: var(--r-md); background: rgba(4,6,13,.55); }
.cb-row {
  display: grid; grid-template-columns: 26px 1fr 46px 36px 42px; gap: 6px;
  align-items: center;
  padding: 6px 10px;
  font-size: 10.5px; font-weight: 700; color: var(--text-2);
  border-bottom: 1px solid rgba(201,164,74,.08);
  transition: background 140ms var(--ease);
}
.cb-row:last-child { border-bottom: none; }
.cb-row:hover { background: rgba(201,164,74,.05); }
.cb-row.me {
  background: linear-gradient(90deg, rgba(201,164,74,.16), rgba(201,164,74,.04));
  box-shadow: inset 3px 0 0 var(--gold);
  color: var(--ivory);
}
[dir="rtl"] .cb-row.me { box-shadow: inset -3px 0 0 var(--gold); }
.cb-rank { font-family: var(--font-mono); font-weight: 800; font-size: 10px; color: var(--text-3); direction: ltr; text-align: center; }
.cb-rank.r1 { color: var(--gold-bright); text-shadow: 0 0 8px rgba(233,205,127,.6); }
.cb-rank.r2 { color: #d8d8de; }
.cb-rank.r3 { color: #d99a5b; }
.cb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; }
.cb-elo { font-family: var(--font-mono); font-weight: 700; font-size: 10px; direction: ltr; text-align: center; }
.cb-gems { font-family: var(--font-mono); font-size: 10px; direction: ltr; text-align: center; color: var(--gold-bright); }
.cb-wl { font-family: var(--font-mono); font-size: 9px; direction: ltr; text-align: center; color: var(--text-3); }

.prize-ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.pl-row {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid rgba(201,164,74,.10);
  background: rgba(201,164,74,.03);
  font-size: 10px; font-weight: 700; color: var(--text-2);
}
.pl-row .pl-rank {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: 800; direction: ltr;
  background: rgba(4,6,13,.8); border: 1px solid var(--gold-hairline); color: var(--text-3);
}
.pl-row.top .pl-rank { background: radial-gradient(circle at 35% 30%, #f7ecd0, var(--gold) 60%, var(--gold-deep)); color: #241a05; border-color: var(--gold-bright); box-shadow: 0 0 10px -2px var(--gold); }
.pl-row .pl-prize { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Directives (Command Deck) ────────────────────────────────────────── */
.directive {
  position: relative;
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r-lg);
  background-image: var(--panel);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(242,234,214,.05);
  transition: all var(--dur) var(--ease);
}
.directive:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.directive .d-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(242,234,214,.12);
}
.directive .d-ico svg { width: 18px; height: 18px; }
.directive .d-ico.gold { background: var(--gold-soft); color: var(--gold-bright); border: 1px solid rgba(201,164,74,.28); }
.directive .d-ico.crimson { background: var(--crimson-soft); color: var(--crimson); border: 1px solid rgba(224,82,82,.28); }
.directive .d-ico.cyan { background: var(--cyan-soft); color: var(--cyan); border: 1px solid rgba(79,209,232,.28); }
.directive .d-ico.violet { background: var(--violet-soft); color: var(--violet); border: 1px solid rgba(185,138,255,.28); }
.directive .d-ico.emerald { background: var(--emerald-soft); color: var(--emerald); border: 1px solid rgba(62,207,142,.28); }
.directive .d-body { flex: 1; min-width: 0; }
.directive .d-title { font-weight: 900; font-size: 13.5px; color: var(--ivory); }
.directive .d-text { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.directive .d-act { flex: none; align-self: center; }

/* Company card */
.co-line { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }
.co-line b { color: var(--text-1); font-family: var(--font-mono); font-weight: 700; direction: ltr; }

/* Deposit countdown card */
.dep-card { position: relative; overflow: hidden; }
.dep-urgency-bar { position: absolute; inset-inline: 0; top: 0; height: 2.5px; }
.dep-urgency-bar.critical { background: linear-gradient(90deg, transparent, var(--crimson), transparent); animation: blink 1.2s infinite; }
.dep-urgency-bar.urgent { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.dep-urgency-bar.soon { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.dep-urgency-bar.stable { background: linear-gradient(90deg, transparent, var(--emerald), transparent); }
.dep-timer { font-family: var(--font-mono); font-size: 17px; font-weight: 800; direction: ltr; }

/* Item chip */
.item-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11.5px; color: var(--text-1); }
.item-chip img { width: 18px; height: 18px; }

/* Gear slot */
.slot { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 6px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.slot img { width: 30px; height: 30px; }
.slot .slot-pct { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--text-2); }

/* Skill cell */
.skill-cell { text-align: center; padding: 9px 4px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.skill-cell svg { width: 13px; height: 13px; opacity: .6; }
.skill-cell .sk-v { font-family: var(--font-mono); font-weight: 800; font-size: 14px; margin-top: 3px; }
.skill-cell .sk-n { font-size: 8px; letter-spacing: .08em; color: var(--text-4); font-family: var(--font-mono); }

/* Utility */
.flex { display: flex; align-items: center; gap: 10px; }
.flex-col { display: flex; flex-direction: column; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.space { justify-content: space-between; }
.mt-s { margin-top: 8px; } .mt-m { margin-top: 14px; } .mt-l { margin-top: 22px; }
.mb-s { margin-bottom: 8px; } .mb-m { margin-bottom: 14px; }
.hidden { display: none !important; }
.feature-hidden { display: none !important; }
.center { text-align: center; }
.game-sprite { image-rendering: -webkit-optimize-contrast; }
.rel { position: relative; }

/* Footer */
.footer {
  margin-top: auto; padding: 18px 22px;
  border-top: 1px solid var(--gold-hairline);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: var(--text-4); font-size: 10.5px; font-family: var(--font-mono);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .escrow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .rail {
    inset-inline: 0; bottom: 0; top: auto;
    width: 100%; height: 60px;
    flex-direction: row; justify-content: flex-start;
    padding: 6px 10px; gap: 2px;
    border-inline-end: none; border-top: 1px solid var(--gold-hairline);
    overflow-x: auto; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail-logo { display: none; }
  .rail-btn { width: 52px; padding: 6px 0 5px; }
  .rail-btn span { display: none; }
  .rail-btn.active::before { inset-inline-start: 15%; inset-block: auto 0; width: 70%; height: 2.5px; top: auto; bottom: -6px; box-shadow: 0 -1px 10px var(--gold); }
  .rail-spacer { display: none; }
  .main { margin-inline-start: 0; padding-bottom: 66px; }
  .views { padding: 16px 14px 90px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-clock { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr; }
  .lane-row { grid-template-columns: 64px 1fr 64px; gap: 6px; }
  .az-card { width: 70px; }
  .az-card.board { width: 60px; }
  .lane { padding: 5px; min-height: 112px; }
}

/* ── Reduced motion — the court bows silently ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}