/* build-mode.css — tier 4 modes.
 * Owns: Build mode: build-hero header (incl. in-topbar variant and faction
 * banners), #build-mode. */

/* Carried from the old faction-banner.css header: subtle archetype-specific SVG banners drifting behind
 * the build-hero header. Driven by `body[data-faction-banner="..."]` set by
 * js/app/faction-fx.js. All motifs are abstract geometric/organic shapes
 * evoking the archetype — no GW iconography. */

/* 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: radial-gradient(60% 36% at 50% 0%, rgba(var(--accent-rgb), 0.05) 0%, rgba(var(--accent-rgb), 0.0) 75%), 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>"), 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;
}

/* When SHELL agent's #build-mode wrapper exists, that becomes the
 * 2-row container and #app-main can stay as-is. */
body.build-mode-enhanced #build-mode { display: grid; grid-template-rows: auto 1fr; height: 100%; }

/* 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. */
/* 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;
}

/* Build mode: hero header in build-mode shouldn't be clipped vertically. */
body.build-mode-enhanced #build-mode > .build-hero, body.build-mode-enhanced #app-main > .build-hero { overflow: visible !important; }
.build-hero-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  opacity: 0;
  animation: build-hero-bar-glint 5s ease-in-out infinite;
  pointer-events: none;
}

/* When the build-hero is mounted into the topbar, override the
 * stacked card layout from css/build-mode.css and lay it out as a
 * single horizontal strip that lives inside .topbar-inner. */
.build-hero--in-topbar {
  display: flex !important;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  grid-template-columns: none !important;
  min-width: 0;
}
.build-hero--in-topbar::before { display: none !important; }

/* theming-pass.css adds a 3px white-gradient underline at the bottom of
 * .build-hero (intended for the original card layout). Inside the
 * topbar the build-hero is vertically centered and its bottom edge
 * lands mid-topbar, so the underline reads as a stray horizontal line
 * across the middle of the bar. Suppress it here. */
.build-hero--in-topbar::after, .build-hero--in-topbar .build-hero-crest-wrap { display: none !important; }
.build-hero--in-topbar .build-hero-main {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  /* Reserve room for the points read-out. Both this and .build-hero-points can
   * shrink, and flex-shrink is proportional to base size — so a long faction
   * name (base ~718px against the read-out's ~90px) barely yields, and it is
   * the NUMBER that gets squeezed out and clipped instead of the name being
   * ellipsised. Capping the name's share inverts that: the read-out always has
   * its ~90px, and the name gives way. Real names reach this cap — "Black
   * Templars" at 1201px brutalist left only 6px of slack. */
  max-width: calc(100% - 110px);
}
.build-hero--in-topbar .build-hero-status { font-size: var(--fs-xs); }
.build-hero--in-topbar .build-hero-faction {
  font-size: var(--fs-md);
  padding: 0;
  margin: 0;
  /* The one variable-length part of the strip, so it is the part that gives
   * way first — ellipsised rather than clipped mid-glyph by the slot. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.build-hero--in-topbar .build-hero-subtitle { align-items: center; gap: var(--sp-3); margin: 0; padding: 0; }
.build-hero--in-topbar .build-hero-name {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
  width: auto;
  min-width: 60px;
  max-width: 24ch;
}

/* Army name, detachment, and the "·" separator are all editable from
 * the army panel; hide the read-only mirrors in the topbar so they
 * don't duplicate inputs. The whole .build-hero-subtitle row is empty
 * once those three children are hidden, so collapse it too. */
.build-hero--in-topbar .build-hero-detachment,
.build-hero--in-topbar .build-hero-sep,
.build-hero--in-topbar .build-hero-name,
.build-hero--in-topbar .build-hero-subtitle {
  display: none !important;
}

/* `safe center`, not `center`. Between the mobile breakpoint (820px) and
 * ~1100px the action buttons are already at full width, so the hero slot can
 * end up narrower than the points read-out on its own — 89px of slot for an
 * 84px read-out at 900px under brutalist. A CENTRED flex item whose content is
 * wider than its box overflows BOTH sides equally and nothing clips it, which
 * is how "0 / 2000 PTS" came to be painted straight through the ACCOUNT button
 * while the slot itself still ended 10-16px clear of it. `safe` drops the
 * centring to flex-start exactly when it would overflow, and changes nothing
 * at the widths where it already fits. */
.build-hero--in-topbar .build-hero-points { display: inline-flex; align-items: center; gap: var(--sp-4); flex: 1 1 auto; min-width: 0; justify-content: safe center; }
.build-hero--in-topbar .build-hero-points-readout { font-size: var(--fs-md); padding: 0; }
.build-hero--in-topbar .build-hero-points-current { font-size: var(--fs-base); }

/* Hide the progress bar + percentage in the topbar — the "current /
 * limit PTS" readout already communicates points. The bar wrap and
 * pct text remain in the DOM so existing JS that writes to them
 * (#points-bar, #points-bar-pct) doesn't need null guards. */
.build-hero--in-topbar .build-hero-bar-wrap, .build-hero--in-topbar .build-hero-bar-pct { display: none !important; }

/* Compact, fixed-ish bar — visually centered between current/limit and pct.
 * Drop the accent border (the "weird green line" the user saw on the bar
 * outline) and shrink the height. */
.build-hero--in-topbar .build-hero-bar-wrap { flex: 0 1 240px; min-width: 80px; height: 6px; border: 0 !important; box-shadow: none !important; }
.build-hero--in-topbar .build-hero-bar { box-shadow: none; }
.build-hero--in-topbar .build-hero-bar-pct { font-size: var(--fs-xs); }
body.build-mode-enhanced #build-mode > .build-hero { grid-row: 1; }
body.build-mode-enhanced #app-main > .build-hero { grid-column: 1 / -1; grid-row: 1; }

/* Hero header */
.build-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-3) var(--sp-8);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08) 0%, rgba(0,0,0,0.0) 60%), var(--panel-alt);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),0.15);
  overflow: visible;
  isolation: isolate;
}

/* Make the army-name input readable but compact. */
.build-hero-name {
  min-width: 80px !important;
  font-size: var(--fs-md) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  outline: none;
  max-width: 280px;
  width: auto;
  transition: border-color 0.15s, background 0.15s;
}

/* Subtitle row: no wrapping in single-line layout. */
.build-hero-subtitle {
  row-gap: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text);
  min-width: 0;
  padding-left: var(--sp-5);
  border-left: 1px solid rgba(var(--accent-rgb),0.2);
  overflow: hidden;
}
.build-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 60%);
  opacity: 0.85;
}
.build-hero-crest-wrap { display: none; }
.build-hero-main { min-width: 0; display: flex; flex-direction: row; align-items: center; gap: var(--sp-5); flex-shrink: 0; position: relative; z-index: 1; }
.build-hero-status { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--text-muted); }
.build-hero-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 6px rgba(var(--accent-rgb),0.0);
  transition: background 0.2s, box-shadow 0.2s;
}
.build-hero-faction {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.05;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 24px rgba(var(--accent-rgb),0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}
.build-hero-sep { color: var(--text-muted); font-weight: 400; }
.build-hero-detachment { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Points block — horizontal row: readout | bar (grows) | pct */
.build-hero-points { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; gap: var(--sp-7); min-width: 0; }
.build-hero-points-readout {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  white-space: nowrap;
  flex-shrink: 0;
}
.build-hero-points-current { font-size: var(--fs-lg); color: var(--accent); line-height: 1; transition: color 0.2s; }
.build-hero.points-over .build-hero-points-current { color: var(--danger); }
.build-hero-points-sep { color: var(--text-muted); font-size: var(--fs-md); }
.build-hero-points-limit { color: var(--text); font-size: var(--fs-md); }
.build-hero-points-label { font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: var(--tr-widest); margin-left: var(--sp-1); }
.build-hero-bar-wrap {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 8px;
  background: var(--sh-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),0.18);
}
.build-hero-bar {
  position: relative;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.7), var(--accent));
  border-radius: var(--radius-pill);
  transition: width 480ms cubic-bezier(0.22, 0.9, 0.32, 1), background 320ms ease, box-shadow 320ms ease !important;
  box-shadow: 0 0 10px rgba(var(--accent-rgb),0.35);
}
.build-hero-bar.over-limit { background: linear-gradient(90deg, #e07b73, var(--danger)); box-shadow: 0 0 10px rgba(217,83,79,0.45); }
.build-hero-bar-shimmer {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( 100deg, transparent 0%, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%, transparent 100% );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: build-hero-shimmer 4.5s linear infinite;
  mix-blend-mode: overlay;
  border-radius: var(--radius-pill);
}
.build-hero-bar-pct { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--tr-wider); white-space: nowrap; flex-shrink: 0; }

/* === Hero header pushed panels off-screen ===
 * .app-main has hard `height: 100vh` (style.css:111). When the hero
 * row is added above it inside #build-mode grid, the app-main still
 * tries to take 100vh — total = hero + 100vh > viewport — pushing
 * the bottom of every panel (composition warning, save status, etc.)
 * below the visible fold.
 * Fix: when build-mode is enhanced, app-main fills the 1fr grid row
 * instead of forcing 100vh. */
/* Desktop only — on mobile the tab-bar offset in mobile.css controls height. */
.build-hero-points-limit-input {
  width: 64px;
  font-size: var(--fs-xl);
  font-weight: 600;
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  text-align: center;
}

/* 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), 0.75) 50%, transparent 100%);
  filter: blur(0.4px);
  opacity: 0.85;
  pointer-events: none;
}
/* 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. */
.build-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: var(--banner-image, none);
  background-repeat: repeat-x;
  background-size: auto 80%;
  background-position: center center;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.18));
  mix-blend-mode: screen;
  transition: opacity 600ms ease;
  animation: yaab-banner-drift 80s linear infinite;
}

/* Hero content stays above the banner. */
.build-hero > * { position: relative; z-index: 1; }
.build-hero--in-topbar .build-hero-name:hover, .build-hero--in-topbar .build-hero-name:focus { border-color: rgba(var(--accent-rgb), 0.4); outline: none; }
.build-hero-name:hover { border-color: rgba(var(--accent-rgb),0.25); }
.build-hero-name:focus { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
.build-hero-bar.near-limit { background: linear-gradient(90deg, #e6c07a, var(--warning)); box-shadow: 0 0 10px rgba(232,184,106,0.4); }
.build-hero-points-limit-input:focus { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; }
.build-hero-status.is-saved .build-hero-status-dot { background: #5fbf6c; box-shadow: 0 0 8px rgba(95,191,108,0.45); }
.build-hero-status.is-unsaved .build-hero-status-dot {
  background: #e8b86a;
  box-shadow: 0 0 8px rgba(232,184,106,0.55);
  animation: build-hero-status-pulse 1.6s ease-in-out infinite;
}
.build-hero-status.is-saved { color: #8fcb98; }
.build-hero-status.is-unsaved { color: #e8b86a; }
.build-hero-faction.is-empty { color: var(--text-muted); font-size: var(--fs-md); letter-spacing: var(--tr-normal); text-shadow: none; }
.build-hero-detachment.is-empty { color: var(--text-muted); font-style: italic; }

/* === Hero points-limit click-to-edit affordance === */
.build-hero-points-limit.is-editable { cursor: pointer; transition: color 120ms ease, text-shadow 120ms ease; }
.build-hero-points-limit.is-editable:hover, .build-hero-points-limit.is-editable:focus-visible {
  color: var(--accent);
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
  outline: none;
}
body[data-faction-banner] .build-hero::after { opacity: 0.20; }

/* Per-archetype motifs. Stroke is white at the SVG level; the parent's
 * mix-blend: screen + low opacity tints it with the faction accent. */
body[data-faction-banner="imperium"] .build-hero {
  /* Gothic arches + winged sigil */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><g opacity='0.7'><path d='M30 64 Q40 32 50 64 Q60 32 70 64'/><path d='M118 18 L114 36 L120 32 L126 36 Z' fill='%23ffffff'/><path d='M104 60 Q120 30 136 60'/><path d='M210 64 Q220 32 230 64 Q240 32 250 64'/></g></svg>");
}
body[data-faction-banner="chaos"] .build-hero {
  /* Eight-pointed star + flanking arrows */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'><g opacity='0.7'><path d='M120 14 L120 66 M94 40 L146 40 M101 21 L139 59 M139 21 L101 59'/><circle cx='120' cy='40' r='8'/><path d='M40 40 L20 22 M40 40 L20 58'/><path d='M200 40 L220 22 M200 40 L220 58'/></g></svg>");
}
body[data-faction-banner="tyranid"] .build-hero {
  /* Bio-organic curve + jagged claws */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'><g opacity='0.7'><path d='M0 44 Q40 8 80 44 T160 44 T240 44'/><path d='M50 54 L62 72 L40 66 Z'/><path d='M170 32 L178 12 L184 32 L194 14 L200 32'/></g></svg>");
}
body[data-faction-banner="ork"] .build-hero {
  /* Jagged hash marks + crude glyph */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'><g opacity='0.7'><path d='M30 50 L40 30 L50 50 L60 30 L70 50'/><path d='M118 22 L118 58 M100 22 L138 22 M100 58 L138 58 M120 36 L138 36'/><path d='M180 50 L185 35 L190 50 L195 35 L200 50 L205 35 L210 50'/></g></svg>");
}
body[data-faction-banner="eldar"] .build-hero {
  /* Concentric rune circles + hairline cross */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'><g opacity='0.7'><circle cx='40' cy='40' r='14'/><path d='M30 40 L50 40 M40 30 L40 50 M33 33 L47 47'/><circle cx='120' cy='40' r='18'/><circle cx='120' cy='40' r='10'/><path d='M120 22 L120 58 M102 40 L138 40'/><circle cx='200' cy='40' r='12'/><path d='M192 33 L208 47 M192 47 L208 33'/></g></svg>");
}
body[data-faction-banner="tau"] .build-hero {
  /* Hexagon array + crosshair */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'><g opacity='0.7'><path d='M30 40 L36 30 L48 30 L54 40 L48 50 L36 50 Z'/><path d='M70 40 L76 30 L88 30 L94 40 L88 50 L76 50 Z'/><circle cx='120' cy='40' r='14'/><path d='M104 40 L136 40 M120 24 L120 56' stroke-dasharray='2 4'/><path d='M186 40 L192 30 L204 30 L210 40 L204 50 L192 50 Z'/></g></svg>");
}
body[data-faction-banner="necron"] .build-hero {
  /* Triangular circuit motif + node markers */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'><g opacity='0.7'><path d='M30 60 L50 24 L70 60 Z'/><path d='M50 24 L50 12 M30 60 L18 60 M70 60 L82 60'/><circle cx='50' cy='24' r='2' fill='%23ffffff'/><path d='M110 50 L130 50 L120 32 Z'/><path d='M170 60 L190 24 L210 60 Z M190 24 L190 12'/><circle cx='190' cy='24' r='2' fill='%23ffffff'/></g></svg>");
}
body[data-faction-banner="votann"] .build-hero {
  /* Heavy chevrons + ingot block */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'><g opacity='0.7'><path d='M20 50 L40 30 L60 50'/><path d='M20 65 L40 45 L60 65'/><path d='M100 30 L130 30 L130 50 L100 50 Z M105 35 L125 35 M105 45 L125 45'/><path d='M180 50 L200 30 L220 50'/><path d='M180 65 L200 45 L220 65'/></g></svg>");
}
@keyframes build-hero-bar-glint {
  0%, 100% { opacity: 0; transform: translateX(-30%); }
  45% { opacity: 0.55; transform: translateX(20%); }
  60% { opacity: 0; transform: translateX(50%); }
}
@keyframes build-hero-status-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
@keyframes build-hero-shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
@keyframes yaab-banner-drift {
  from { background-position: -120px center; }
  to { background-position: 120px center; }
}

@media (max-width: 1200px) {
  /* Below ~1200px the hero cannot have everything. The action buttons are already
   * at their full width by then, and the hero slot gets only what is left over:
   * measured on the live site, 345px of slot at 1100 down to 49px at 860 — against
   * a points read-out that alone needs 84-92px. So the strip sheds, in order of
   * what is least worth keeping:
   * <= 1200px  drop the status + faction text, keep the number. (The faction is
   * named in the army panel a few pixels below; the points total is
   * not shown anywhere else in the chrome.)
   * <= 1000px  drop the hero altogether — below this even the bare read-out is
   * wider than the slot, so anything left would only be clipped.
   * Thresholds are the measured fit points with a margin, and they are the same
   * for both themes: brutalist's action buttons are wider, so it runs out of room
   * first, and one threshold that satisfies it satisfies Grimdark too. */
  .build-hero--in-topbar .build-hero-main { display: none !important; }
}

@media (min-width: 821px) and (max-width: 860px) {
  body #build-mode, body.build-mode-enhanced #build-mode { height: auto !important; min-height: 0 !important; overflow: visible !important; }
}

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

  /* Reduced motion: kill shimmer and crest rotation. */
  .build-hero-bar-shimmer { animation: none; opacity: 0.3; }
  .build-hero-bar { transition: none; }
  .build-hero::after { animation: none; }
}