/* Skirmish feel v2 (outputs/design/skirmish-feel-v2.md): outlines, hover weight, turn cues and battle overlays.
   Colours follow the Unreal native layer: playable/ready green #14D129 at 68%, selected blue #40A6FF, target gold #FFB826,
   armor deflection blue #59BFFF, hit amber #FFB038. Only transform and opacity animate; pulses run on pseudo-elements. */
@property --feel-glint{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---- Hand: weight on hover, playable glow, unplayable dim ------------------------------------------- */
.arena .hand.hand-fits{overflow:visible}
.arena .hand-card{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s;transform-origin:50% 85%;will-change:transform}
.arena .hand-card:hover:not(.dragging),.arena .hand-card:focus-visible{z-index:6;transform:perspective(700px) translateY(-22px) scale(1.14) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 26px 34px #000c,0 0 0 1px #ffffff30}
.arena .hand:not(.hand-fits) .hand-card:hover:not(.dragging){transform:perspective(700px) translateY(-8px) scale(1.04) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.arena .hand-card.selected{transform:translateY(-12px) scale(1.04)}
.arena .hand-card.playable{outline:2px solid #14d129ad;outline-offset:1px;box-shadow:0 0 16px #14d12950,0 8px 15px #0006}
.arena .hand-card.playable::before{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px #14d129,inset 0 0 26px #14d12970;opacity:.3;animation:feel-pulse 2.6s ease-in-out infinite}
.arena .hand-card.playable::after{content:'';position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;padding:2px;background:conic-gradient(from var(--feel-glint),transparent 0 84%,#d1ffb8d9 90%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:feel-glint 4.5s linear infinite}
.arena .hand-card.unplayable{filter:saturate(.45) brightness(.72)}
.arena .hand-card.unplayable:hover{filter:saturate(.7) brightness(.9)}
.arena .hand-card.unplayable .mana{border-color:#ff7b7b99;color:#ffc2c2}

/* ---- Board: attack-ready, selection, targets, dimming, Taunt ---------------------------------------- */
.unit .ready-strip{position:absolute;top:0;left:0;right:0;z-index:5;display:block;width:auto;margin:0;padding:3px 4px;background:#03100bf2;color:#59ff47;font:700 10px/1.2 var(--uw-font-display,inherit);letter-spacing:.14em;text-transform:uppercase;text-align:center;pointer-events:none;border-bottom:1px solid #14d12988}
.unit.ability-ready .ready-strip{color:#8ff0ff;border-bottom-color:#46c8dd88}
.unit.attack-ready{outline:2px solid #14d129ad;outline-offset:1px;box-shadow:0 0 18px #14d12950,0 8px 16px #0008}
.unit.attack-ready::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px #14d129,inset 0 0 24px #14d12970;opacity:.3;animation:feel-pulse 2.6s ease-in-out infinite}
.unit.attack-ready:hover{transform:translateY(-5px) scale(1.03)}
.unit.selected,.arena .unit.selected{outline:3px solid #40a6ff;outline-offset:2px;box-shadow:0 0 26px #40a6ff77,0 10px 18px #000a;transform:translateY(-6px) scale(1.03)}
.arena .unit.target,.arena .commander.target,.arena .orbital-panel.target{outline:3px solid #ffb826;outline-offset:3px;box-shadow:0 0 26px #ffb82677!important;cursor:crosshair}
.arena.targeting .unit.target::after{content:'◎ TARGET';position:absolute;left:0;right:0;top:0;bottom:auto;height:auto;border-radius:0;pointer-events:none;z-index:6;padding:3px;background:#1a1203ee;color:#ffd36a;font:700 10px/1.2 var(--uw-font-display,inherit);letter-spacing:.16em;text-align:center;box-shadow:none;opacity:1;animation:none}
.arena.targeting .unit.target:hover{transform:translateY(-4px) scale(1.04)}
.arena.targeting .unit.target .power-target-label{top:19px}
.arena .feel-dim{filter:saturate(.3) brightness(.5);transition:filter .15s}
.arena .unit.feel-dim .ready-strip{opacity:.4}
.unit .taunt-plate{position:absolute;top:24px;right:4px;z-index:5;display:grid;place-items:center;width:24px;height:28px;background:linear-gradient(#c9d9ee,#6f86a6);color:#101822;font-size:15px;line-height:1;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);filter:drop-shadow(0 2px 2px #000a);pointer-events:none}
.unit.has-taunt{box-shadow:0 0 0 2px #a1c4f2aa,0 8px 16px #0008}
.unit.has-taunt.attack-ready{box-shadow:0 0 0 2px #a1c4f2aa,0 0 18px #14d12950,0 8px 16px #0008}

/* ---- End Turn: gold while plays remain, green and pulsing when done ---------------------------------- */
.game-layout #end-turn[data-feel=done]{--uw-cta:#3bd65a;outline:3px solid #3bd65a;outline-offset:2px;animation:feel-endturn 1.5s ease-in-out infinite}
.game-layout #end-turn[data-feel=moves-left]{--uw-cta:#f3cf7a}
@keyframes feel-endturn{50%{outline-color:#3bd65a33;outline-offset:6px}}
.commander .health.feel-health-hit{animation:feel-health-hit .6s ease-out}
.commander .health.feel-health-heal{animation:feel-health-heal .7s ease-out}
@keyframes feel-health-hit{0%{background:#ff3048;color:#fff;transform:scale(1.35)}100%{transform:none}}
@keyframes feel-health-heal{0%{background:#2fbf5a;color:#fff;transform:scale(1.25)}100%{transform:none}}
@keyframes feel-pulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes feel-glint{to{--feel-glint:360deg}}

/* ---- Overlays ---------------------------------------------------------------------------------------- */
#feel-layer{position:fixed;inset:0;z-index:10003;pointer-events:none;overflow:hidden;contain:strict}
#feel-layer>*{position:absolute;pointer-events:none}
.battle-ghost::before,.battle-ghost::after{animation:none!important}
.battle-ghost .ready-strip{display:none}
.feel-num{white-space:nowrap;font-family:var(--uw-font-display,system-ui);font-weight:800;line-height:1;letter-spacing:.02em;color:#ffcf4a;text-shadow:0 3px 0 #000,0 0 3px #000,0 0 18px currentColor;transform:translate(-50%,-50%)}
.feel-num.num-s{font-size:28px}.feel-num.num-m{font-size:38px}.feel-num.num-l{font-size:50px}.feel-num.num-xl{font-size:64px}
.feel-num.num-damage{color:#ff7a3d}
.feel-num.num-commander{color:#ff4d5e}
.feel-num.num-block{color:#7cc8ff}
.feel-num.num-heal{color:#6dff9a}
.feel-num.num-blocked{color:#cfeaff;font-size:18px;letter-spacing:.18em}
.feel-num.num-lethal{color:#ffb4a0;font-size:16px;letter-spacing:.22em}
.feel-spark{border-radius:2px;box-shadow:0 0 6px currentColor}
.feel-ring{border:2px solid currentColor;border-radius:50%;box-shadow:0 0 14px currentColor}
.feel-ring.ring-block{border-width:3px}
.feel-ring.ring-spokes::after{content:'';position:absolute;inset:-14%;border-radius:50%;background:repeating-conic-gradient(from 23deg,currentColor 0 3deg,transparent 3deg 30deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 72%,transparent 74%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 72%,transparent 74%)}
.feel-flash{border-radius:10px}
.feel-block svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px #59bfff)}
.feel-block polygon{fill:#59bfff38;stroke:#59bfff;stroke-width:5}
.feel-block polygon.inner{fill:none;stroke:#d6efff;stroke-width:2}
.feel-heal{border-radius:10px;background:radial-gradient(ellipse at 50% 60%,#5cf08a30,transparent 70%);box-shadow:inset 0 0 30px 6px #5cf08acc,0 0 24px #5cf08a88}
.feel-mote{border-radius:50%;background:#c9ffd6;box-shadow:0 0 8px #5cf08a}
.feel-streak{margin-top:-2px;border-radius:2px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,currentColor 70%,#fff2b8);box-shadow:0 0 10px currentColor}
.feel-shock{border-radius:50%;border:3px solid #4db3ff;box-shadow:0 0 18px #4db3ff,inset 0 0 12px #4db3ff88}
.feel-vignette{border-radius:22px;background:radial-gradient(ellipse at 50% 50%,transparent 35%,#000000b8 100%)}
.feel-banner{display:flex;justify-content:center;overflow:visible}
.feel-banner>div{margin-top:-34px;padding:12px 90px;background:linear-gradient(90deg,transparent,#06140cea 18%,#06140cea 82%,transparent);border-block:1px solid #3bd65a88}
.feel-banner span{display:block;font:800 36px/1 var(--uw-font-display,system-ui);letter-spacing:.32em;text-transform:uppercase;color:#dfffe6;text-shadow:0 0 18px #3bd65a,0 2px 0 #000}
.feel-banner.banner-enemy>div{background:linear-gradient(90deg,transparent,#1a0609ea 18%,#1a0609ea 82%,transparent);border-color:#ff5d6c88}
.feel-banner.banner-enemy span{color:#ffe1e4;text-shadow:0 0 18px #ff5d6c,0 2px 0 #000}

/* ---- Aim line ---------------------------------------------------------------------------------------- */
#feel-aim{position:fixed;inset:0;width:100vw;height:100vh;z-index:10004;pointer-events:none;opacity:0;transition:opacity .1s;color:#8ff0ff}
#feel-aim.on{opacity:1}
#feel-aim.snapped{color:#ffb826}
#feel-aim.hostile{color:#ff5d6c}
#feel-aim path{fill:none;stroke:currentColor}
#feel-aim .aim-path{stroke-width:4;stroke-dasharray:12 8;stroke-linecap:round;animation:feel-dash .6s linear infinite}
#feel-aim .aim-glow{stroke-width:12;opacity:.22}
#feel-aim marker path{fill:currentColor;stroke:none}
#feel-aim .aim-reticle{fill:none;stroke:currentColor;stroke-width:2;opacity:0}
#feel-aim.snapped .aim-reticle{opacity:.9}
@keyframes feel-dash{to{stroke-dashoffset:-20}}

/* ---- Game feel: Reduced (setting) and minimal (prefers-reduced-motion) ------------------------------ */
:root[data-feel=reduced] .arena .hand-card:hover:not(.dragging){transform:translateY(-12px) scale(1.06)}
:root[data-feel=reduced] :is(.arena .hand-card.playable,.unit.attack-ready)::before,:root[data-feel=reduced] :is(.arena .hand-card.playable,.unit.attack-ready)::after{animation:none;opacity:.8}
:root[data-feel=reduced] .game-layout #end-turn[data-feel=done]{animation:none}
:root[data-feel=reduced] #feel-aim .aim-path{animation:none}
:root[data-feel=minimal] .arena .hand-card:hover:not(.dragging){transform:none}
:root[data-feel=minimal] .arena .hand-card.playable::after{display:none}
@media(prefers-reduced-motion:reduce){.arena .hand-card.playable::after{display:none}.arena .hand-card:hover:not(.dragging){transform:none}}