/* ══════════════════════════════════════════════════════════════ v0.1 Fight Phase — Overrides All shared styles are in ../../shared/components/*.css This file contains ONLY fight-phase-specific overrides. ══════════════════════════════════════════════════════════════ */ /* ── Wider roll overlay for weapon picker ── */ #roll-overlay { max-width: 720px; } /* ── Override shared action-bar label to be visible + not flex-expand ── */ /* active-faction: mode label tracks the activating side */ #status-label { flex: 0 0 auto !important; color: var(--active-faction) !important; min-width: auto !important; } #status-label.fight-pile-in { color: var(--action) !important; } #status-label.fight-consolidate { color: var(--action) !important; } /* All "active player is doing X" labels track the activating faction. `--active-faction` is set on by scene-registry.refreshFactionUI on every `ui:active-faction-changed` event, resolving to the activating side's color (Custodes attacks → gold, UM attacks → cobalt). Falls back to --faction-a so the rule still produces a sensible color before the first faction-change event fires. */ #status-label.fight-target { color: var(--active-faction, var(--faction-a)) !important; } #status-label.fight-attack { color: var(--active-faction, var(--faction-a)) !important; } /* ── Engagement range highlight on hulls ── */ .unit-hull.fight-engaged { filter: drop-shadow(0 0 6px rgba(0,255,120,0.4)); } /* ── Fight-eligible hull pulse (on SVG hulls for activatable units) ── */ .unit-hull.fight-eligible { animation: fight-hull-pulse 1.4s ease-in-out infinite; } @keyframes fight-hull-pulse { 0%, 100% { stroke-opacity: 0.5; filter: none; } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(0,255,180,0.5)); } } /* ── Fight range chips (pile-in / consolidate) ── */ .fight-range-chip { padding: 5px 10px; font: 600 10px/1 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; background: transparent; border: 1px solid color-mix(in srgb, var(--action) 40%, transparent); color: color-mix(in srgb, var(--action) 80%, transparent); cursor: pointer; transition: all .15s; } .fight-range-chip:hover { border-color: color-mix(in srgb, var(--action) 70%, transparent); color: var(--action); } .fight-range-chip.active { background: var(--action-tint); border-color: var(--action); color: var(--action); } .fight-range-chip:disabled { opacity: 0.3; cursor: default; } /* ── Shake error animation ── */ @keyframes shake-error { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .shake-error { animation: shake-error 0.4s ease-out; } /* ── Ineligible units dimmed ── */ .unit-hull.fight-ineligible { opacity: 0.35; } /* ── Weapon Strike (Chainsword) — from design system v4 ── */ .slash-arena { position: relative; display: inline-block; } .slash-svg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); pointer-events: none; overflow: visible; } @keyframes slash-draw { 0% { stroke-dashoffset: 200; opacity: .85; } 35% { stroke-dashoffset: 0; opacity: .85; } 60% { stroke-dashoffset: 0; opacity: .25; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes slash-score { 0% { stroke-dashoffset: 200; opacity: 0; } 35% { stroke-dashoffset: 40; opacity: .45; } 65% { stroke-dashoffset: 0; opacity: .3; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes slash-spark { 0% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1); } 50% { opacity: .7; } 100% { opacity: 0; transform: translate(calc(var(--sx) + var(--dx)), calc(var(--sy) + var(--dy))) scale(0); } } @keyframes slash-point-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 20% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } } @keyframes slash-recoil { 0% { transform: translateX(0) scale(1); } 15% { transform: translateX(4px) scale(.96); } 40% { transform: translateX(-3px) scale(1.03); } 65% { transform: translateX(2px); } 100% { transform: translateX(0) scale(1); } } .slash-spark { position: absolute; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; } .slash-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #ffffffcc 0%, #ffffff00 70%); pointer-events: none; opacity: 0; } .anim-slash-recoil { animation: slash-recoil .3s ease-out forwards; } /* Fix: slash animation must render above SVG model layer (z-index:6) */ #fx-layer { z-index: 10 !important; } /* ── Invalid model highlight (orange ring + orange icon) ── */ .model-base.fight-invalid-model > :first-child { stroke: var(--action) !important; stroke-width: 3 !important; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--action) 90%, transparent)) drop-shadow(0 0 16px var(--action-glow)) !important; } /* Turn the unit icon (+ ★ ◆ etc.) orange on invalid models */ .model-base.fight-invalid-model > g { color: var(--action) !important; }