/* css/theming-pass.css — calm static per-mode SVG backgrounds, faction glyph styling, hero header polish, role-icon visuals. */

/* ──────────────────────────────────────────────────────────────────────
   Original-geometry SVG tile library (inline data URIs).

   All patterns are designed in-house — no GW iconography. They evoke
   tactical / imperial / gothic feel through generic shapes only:
   chevrons, hex grids, dot scans, gothic arches, abstract winged
   chevron-and-circle emblems. Every pattern is STATIC.

   Usage pattern: each mode layers 2-3 of these via background-image,
   pinned with `background-attachment: fixed` so the field sits behind
   content and never bleeds into / drifts under panels. No keyframes.
   ────────────────────────────────────────────────────────────────────── */

/* Common: every mode root gets relative positioning so its decoration
   pseudo-elements anchor correctly. We replaced the old ::after-driven
   moving overlays with a single fixed ::before holding the SVG stack. */

body[data-mode="build"]   #build-mode,
body[data-mode="collect"] #collect-mode,
body[data-mode="play"]    #play-mode { position: relative; }

/* Children always sit above the static decoration. */
body[data-mode="build"]   #build-mode > *,
body[data-mode="collect"] #collect-mode > *,
body[data-mode="play"]    #play-mode > *  { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────────────────
   1. BUILD mode — workshop / forge tactical feel.
   Layers (top → bottom):
     a) faint accent radial bloom near the top (4-6%)
     b) hex grid (3% opacity)
     c) chevron rows (2% opacity)
   No movement. No drifting particles. No scan line.
   ────────────────────────────────────────────────────────────────────── */
body[data-mode="build"] #build-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: transparent;
  background-image:
    /* a) accent-tinted top bloom */
    radial-gradient(60% 36% at 50% 0%,
      rgba(var(--accent-rgb, 200, 200, 200), 0.05) 0%,
      rgba(var(--accent-rgb, 200, 200, 200), 0.0) 75%),
    /* b) small hex grid (3%) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='49' viewBox='0 0 56 49'><g fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'><path d='M14 0.5 L42 0.5 L56 24.5 L42 48.5 L14 48.5 L0 24.5 Z'/></g></svg>"),
    /* c) chevron rows (2%) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'><g fill='none' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='1'><path d='M0 18 L20 6 L40 18'/><path d='M40 18 L60 6 L80 18'/><path d='M80 18 L100 6 L120 18'/><path d='M0 42 L20 30 L40 42'/><path d='M40 42 L60 30 L80 42'/><path d='M80 42 L100 30 L120 42'/></g></svg>");
  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 320px, 56px 49px, 120px 48px;
  background-position: top center, 0 0, 0 0;
}

/* Centerpiece: subtle abstract winged-chevron emblem placed once near top
   of the build pane. Original geometry — chevron + ring composition. */
body[data-mode="build"] #build-mode::after {
  content: "";
  position: fixed;
  top: 96px;
  left: 50%;
  width: 480px;
  height: 480px;
  margin-left: -240px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'><g fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1.2'><circle cx='240' cy='240' r='62'/><circle cx='240' cy='240' r='44'/><path d='M178 240 L60 200 L100 240 L60 280 Z'/><path d='M302 240 L420 200 L380 240 L420 280 Z'/><path d='M240 178 L240 120'/><path d='M240 302 L240 360'/><path d='M196 196 L160 160'/><path d='M284 196 L320 160'/><path d='M196 284 L160 320'/><path d='M284 284 L320 320'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* The old per-panel scan-line is replaced with a static, far subtler
   diagonal hatch — held to 1.5% opacity and fixed (no scroll movement). */
body[data-mode="build"] .panel-body { position: relative; }
body[data-mode="build"] .panel-body > * { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────────────────
   2. COLLECT mode — armoury / library / parchment feel.
   Layers:
     a) warm parchment tint (very low)
     b) dotted scan grid (3%)
     c) tiny gothic-arch lattice (2%)
   ────────────────────────────────────────────────────────────────────── */
body[data-mode="collect"] #collect-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* a) warm parchment wash, top → bottom */
    linear-gradient(180deg,
      rgba(220, 180, 120, 0.020) 0%,
      rgba(120, 90, 60, 0.012) 100%),
    /* b) dot grid (3%) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='%23e6c79a' fill-opacity='0.03'><circle cx='4' cy='4' r='1'/><circle cx='20' cy='12' r='1'/><circle cx='12' cy='24' r='1'/><circle cx='28' cy='28' r='1'/></g></svg>"),
    /* c) gothic arch lattice (2%) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='128' viewBox='0 0 96 128'><g fill='none' stroke='%23e6c79a' stroke-opacity='0.025' stroke-width='1'><path d='M16 120 L16 64 Q16 32 48 32 Q80 32 80 64 L80 120'/><path d='M28 120 L28 72 Q28 48 48 48 Q68 48 68 72 L68 120'/><path d='M48 120 L48 32'/></g></svg>");
  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 100%, 32px 32px, 96px 128px;
  background-position: 0 0, 0 0, center top;
}

/* Centerpiece sits as a single static medallion on the collect page —
   a stylized roundel made only of geometric primitives. */
body[data-mode="collect"] #collect-mode::after {
  content: "";
  position: fixed;
  top: 140px;
  left: 50%;
  width: 420px;
  height: 420px;
  margin-left: -210px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'><g fill='none' stroke='%23e6c79a' stroke-opacity='0.05' stroke-width='1'><circle cx='210' cy='210' r='90'/><circle cx='210' cy='210' r='118'/><circle cx='210' cy='210' r='150'/><path d='M210 60 L210 100'/><path d='M210 320 L210 360'/><path d='M60 210 L100 210'/><path d='M320 210 L360 210'/><path d='M104 104 L132 132'/><path d='M316 104 L288 132'/><path d='M104 316 L132 288'/><path d='M316 316 L288 288'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ──────────────────────────────────────────────────────────────────────
   3. PLAY mode — tactical cockpit, but CALM.
   Layers:
     a) cool accent vignette (4%)
     b) hex grid (3%)
     c) corner reticle dots (2%)
   STATIC. No scan line, no drifting overlays.
   ────────────────────────────────────────────────────────────────────── */
body[data-mode="play"] #play-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* a) accent-cool vignette from corners */
    radial-gradient(80% 60% at 50% 50%,
      rgba(var(--accent-rgb, 200, 200, 200), 0.0) 55%,
      rgba(var(--accent-rgb, 200, 200, 200), 0.04) 100%),
    /* b) tighter hex grid */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 34 30'><g fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'><path d='M8.5 0.5 L25.5 0.5 L34 15 L25.5 29.5 L8.5 29.5 L0 15 Z'/></g></svg>"),
    /* c) tactical dot scan */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%23ffffff' fill-opacity='0.02'><circle cx='10' cy='10' r='1'/><circle cx='40' cy='40' r='1'/><circle cx='70' cy='10' r='1'/><circle cx='10' cy='70' r='1'/><circle cx='70' cy='70' r='1'/></g></svg>");
  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 100%, 34px 30px, 80px 80px;
  background-position: center, 0 0, 0 0;
}

/* Static HUD corner brackets — same spec as before but no animation,
   no glow pulse. Pinned to viewport corners. */
body[data-mode="play"] .play-shell { position: relative; }
body[data-mode="play"] #play-mode > .play-shell::before,
body[data-mode="play"] #play-mode > .play-shell::after {
  content: "";
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 1;
  border: 2px solid rgba(var(--accent-rgb, 200, 200, 200), 0.30);
  opacity: 0.9;
}
body[data-mode="play"] #play-mode > .play-shell::before {
  top: calc(var(--topbar-h, 56px) + 12px);
  left: 12px;
  border-right: none;
  border-bottom: none;
}
body[data-mode="play"] #play-mode > .play-shell::after {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
}

/* Make sure the actual content sits above the backgrounds. */
body[data-mode="play"]    #play-mode > .play-shell,
body[data-mode="collect"] #collect-mode > .collect-root {
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   4. Faction glyphs — wrapper + injected SVG sizing.
   ────────────────────────────────────────────────────────────────────── */

.faction-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent, #c8c8c8);
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb, 200, 200, 200), 0.35));
  pointer-events: none;
  vertical-align: middle;
  transition: color 240ms ease, filter 240ms ease;
}

.faction-glyph .faction-glyph-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.faction-glyph-hero {
  width: 32px !important;
  height: 32px !important;
  margin-right: 12px !important;
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb, 200, 200, 200), 0.45));
}

.faction-glyph-inline {
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px !important;
  opacity: 0.85;
}

/* Wrap the hero faction line so glyph + text align nicely. The injected glyph
   is a sibling immediately before .build-hero-faction. */
.build-hero-main { position: relative; }
.build-hero-main .faction-glyph-hero {
  position: relative;
  top: 1px;
}
.build-hero-faction {
  display: inline-block;
  vertical-align: middle;
}

/* Subtle accent gradient underline below the hero. */
body[data-mode="build"] .build-hero {
  position: relative;
}
body[data-mode="build"] .build-hero::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb, 200, 200, 200), 0.75) 50%,
    transparent 100%);
  filter: blur(0.4px);
  opacity: 0.85;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────
   5. Role icons — small Unicode glyph in the unit-card name.
   The DOM-injected <span class="role-icon"> is the primary path; the
   pseudo-element fallback covers cards rendered before role-icons.js is
   ready (e.g. SSR paint).
   ────────────────────────────────────────────────────────────────────── */

.unit-card .role-icon {
  display: inline-block;
  width: 1.1em;
  margin-right: 6px;
  font-size: 0.9em;
  line-height: 1;
  color: var(--accent, #c8c8c8);
  text-shadow: 0 0 4px rgba(var(--accent-rgb, 200, 200, 200), 0.45);
  vertical-align: baseline;
  letter-spacing: 0;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 180ms ease, color 240ms ease;
}

.unit-card:hover .role-icon { opacity: 1; }

/* CSS-only fallback — only fires when no .role-icon span has been injected. */
.unit-card.role-character .unit-card-name:not(:has(.role-icon))::before  { content: "\25C6 "; }
.unit-card.role-psyker    .unit-card-name:not(:has(.role-icon))::before  { content: "\2756 "; }
.unit-card.role-monster   .unit-card-name:not(:has(.role-icon))::before  { content: "\2B22 "; }
.unit-card.role-vehicle   .unit-card-name:not(:has(.role-icon))::before  { content: "\25B2 "; }
.unit-card.role-battleline .unit-card-name:not(:has(.role-icon))::before { content: "\25A3 "; }
.unit-card.role-infantry  .unit-card-name:not(:has(.role-icon))::before  { content: "\25CF "; }

.unit-card[class*="role-"] .unit-card-name::before {
  color: var(--accent, #c8c8c8);
  font-size: 0.85em;
  margin-right: 6px;
  opacity: 0.8;
  letter-spacing: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   6. prefers-reduced-motion — there are no longer any background
      animations to gate, but the rule stays as a no-op safety net for
      future additions and keeps any inherited animations off.
   ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body[data-mode="build"]   #build-mode::before,
  body[data-mode="build"]   #build-mode::after,
  body[data-mode="collect"] #collect-mode::before,
  body[data-mode="collect"] #collect-mode::after,
  body[data-mode="play"]    #play-mode::before,
  body[data-mode="play"]    #play-mode::after {
    animation: none !important;
  }
}