.team-label{align-items:center;gap:6px}
.enemy-label span:nth-child(2){color:#f0c27b;font-size:10px}
.terrain-panel{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;margin:0 0 12px;padding:8px 10px;border:1px solid rgba(229,199,125,.2);border-radius:5px;background:linear-gradient(90deg,rgba(34,63,60,.75),rgba(13,26,28,.58));box-shadow:inset 0 1px rgba(255,255,255,.03)}
.terrain-sigil{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(229,199,125,.55);border-radius:50%;color:var(--gold);font-size:15px;box-shadow:inset 0 0 14px rgba(229,199,125,.1)}
.terrain-panel b{display:block;color:#ecda9f;font-size:13px;font-weight:600;letter-spacing:.08em}.terrain-panel p{margin:3px 0 0;color:#9fb6ae;font:10px/1.45 ui-sans-serif,system-ui,sans-serif}.terrain-favor{align-self:start;color:#7fc4b0;font:10px ui-sans-serif,system-ui,sans-serif;white-space:nowrap;padding-top:2px}
.action-buttons{grid-template-columns:repeat(4,1fr)}
.action-btn.guard{background:#203437;border-color:rgba(121,194,176,.43)}
.combo-meter{color:#9db8ae;font:11px ui-sans-serif;white-space:nowrap}
.combo-meter b{color:var(--gold);font-size:18px}
.reward-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,620px);margin:12px 0 24px}
.reward-card{border:1px solid var(--line);background:rgba(22,40,42,.92);color:var(--ink);padding:16px 10px;text-align:left;min-height:180px;border-radius:4px}
.reward-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.reward-card strong{display:block;color:var(--gold);font-size:18px;margin:10px 0}
.reward-card span{color:var(--muted);font-size:12px;line-height:1.6}
@media (max-width:430px){.terrain-panel{margin-bottom:10px;padding:8px}.terrain-panel p{font-size:9px}.terrain-favor{font-size:9px}.action-buttons{grid-template-columns:repeat(2,1fr)}.action-btn{min-height:64px}.reward-options{grid-template-columns:1fr}.reward-card{min-height:104px}}

/* v3.1 turn-based combat presentation: lunge, impact, cut-in and resonance. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.launch-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:14px}.launch-tools .install-btn{border:1px solid rgba(229,199,125,.28);border-radius:999px;background:rgba(15,29,31,.72);color:#d9c58c;padding:8px 12px;font:600 11px/1 ui-sans-serif,system-ui,sans-serif}.launch-tools .install-btn.is-muted{color:#82958e;border-color:rgba(130,149,142,.25)}.launch-tools #connection-status{flex-basis:100%;color:#738984;font:10px/1.2 ui-sans-serif,system-ui,sans-serif}.battle-tools{display:flex;gap:8px}.battle-tools .icon-btn{width:40px;height:40px}.battle-tools .icon-btn.is-muted{color:#7b8d88}
.battle-fx-layer{position:fixed;inset:0;z-index:18;overflow:hidden;pointer-events:none;contain:layout paint;isolation:isolate}
.battle-screen.fx-busy .action-btn,.battle-screen.fx-busy .combat-card{pointer-events:none}
.battle-screen.fx-busy .arena{box-shadow:inset 0 0 42px rgba(225,194,112,.07)}
.fx-float{position:absolute;z-index:7;transform:translate(-50%,-50%);font:900 24px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em;text-shadow:0 2px 3px #000,0 0 12px currentColor;white-space:nowrap;animation:fx-float-up .78s cubic-bezier(.2,.72,.2,1) forwards;will-change:transform,opacity}
.fx-damage{color:#ffbc7d}.fx-critical{color:#fff0a6;font-size:31px}.fx-heal{color:#8ff0c5}.fx-guard,.fx-buff{color:#9ee8d7;font-size:17px}
.fx-ring{position:absolute;z-index:5;width:44px;height:44px;border:3px solid currentColor;border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;animation:fx-ring-out .56s ease-out forwards;box-shadow:0 0 24px currentColor;will-change:transform,opacity}
.fx-ring.fx-hit::before,.fx-ring.fx-hit::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:3px;border-radius:4px;background:currentColor;box-shadow:0 0 12px currentColor;transform:translate(-50%,-50%) rotate(42deg)}
.fx-ring.fx-hit::after{transform:translate(-50%,-50%) rotate(-42deg)}
.fx-particle{position:absolute;z-index:4;width:6px;height:6px;border-radius:50%;color:#e6c879;background:currentColor;box-shadow:0 0 10px currentColor;transform:translate(-50%,-50%);animation:fx-particle-out .62s var(--delay,0ms) ease-out forwards;will-change:transform,opacity}
.affinity-wood,.affinity-jade{color:#83e0b2}.affinity-fire{color:#ff7b62}.affinity-water{color:#69d9f5}.affinity-earth{color:#d9ad65}.affinity-metal{color:#efe4c2}.affinity-wind,.affinity-sky{color:#9bdde1}.affinity-gold{color:#f4d676}.affinity-neutral{color:#d8c79c}
.fx-cutin{position:absolute;left:-4%;right:-4%;top:31%;height:124px;z-index:10;display:flex;align-items:center;justify-content:center;gap:18px;color:#f8eccd;background:linear-gradient(90deg,transparent 0,rgba(4,13,15,.96) 17%,rgba(25,54,52,.96) 50%,rgba(4,13,15,.96) 83%,transparent);border-top:1px solid currentColor;border-bottom:1px solid currentColor;box-shadow:0 0 46px #000;clip-path:polygon(0 18%,100% 0,97% 82%,3% 100%);animation:fx-cutin-in .64s cubic-bezier(.18,.86,.24,1) forwards}
.fx-cutin::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(112deg,transparent 0 18px,currentColor 19px 20px);opacity:.055}
.fx-cutin-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);box-shadow:0 0 14px currentColor}
.fx-cutin img{position:relative;width:88px;height:108px;object-fit:contain;border:1px solid currentColor;border-radius:48% 48% 8px 8px;background:radial-gradient(ellipse,rgba(103,168,150,.24),rgba(7,17,19,.9) 70%);filter:saturate(1.08) contrast(1.03) drop-shadow(0 5px 3px #000);box-shadow:0 0 0 5px #071113,0 0 22px currentColor;transform:rotate(-2deg)}
.fx-cutin div{position:relative;display:grid;min-width:150px;text-align:left;text-shadow:0 2px 6px #000}
.fx-cutin small{color:currentColor;font:700 10px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.28em}.fx-cutin strong{margin:8px 0 5px;color:#fff3d1;font-size:25px;font-weight:600;letter-spacing:.12em}.fx-cutin b{color:#bbcfc5;font:500 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em}
.fx-resonance{position:absolute;inset:0;z-index:11;display:grid;place-content:center;justify-items:center;color:#f7dfa0;background:radial-gradient(circle,rgba(36,95,88,.7),rgba(3,9,11,.86) 48%,rgba(1,4,5,.94));animation:fx-resonance-in .82s ease-out forwards}
.fx-resonance i{width:130px;height:130px;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 0 18px rgba(244,214,118,.06),0 0 48px rgba(104,224,202,.32);animation:fx-sigil-spin 3s linear infinite}
.fx-resonance i::before,.fx-resonance i::after{content:"";position:absolute;inset:50% auto auto 50%;width:180px;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);transform:translate(-50%,-50%) rotate(45deg)}
.fx-resonance i::after{transform:translate(-50%,-50%) rotate(-45deg)}
.fx-resonance strong{margin-top:-85px;color:#fff1c5;font-size:31px;font-weight:500;letter-spacing:.2em;text-shadow:0 0 18px #d7b75e}.fx-resonance span{margin-top:70px;color:#9fd2c7;font:11px ui-sans-serif,system-ui,sans-serif;letter-spacing:.24em}
@keyframes fx-float-up{0%{opacity:0;transform:translate(-50%,-20%) scale(.68)}18%{opacity:1;transform:translate(-50%,-58%) scale(1.14)}100%{opacity:0;transform:translate(-50%,-155%) scale(.94)}}
@keyframes fx-ring-out{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}24%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.35)}}
@keyframes fx-particle-out{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.1)}}
@keyframes fx-cutin-in{0%{opacity:0;transform:translateX(-28%) skewX(-6deg)}18%{opacity:1;transform:translateX(2%) skewX(-2deg)}76%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(10%)}}
@keyframes fx-resonance-in{0%{opacity:0;transform:scale(1.08)}22%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}
@keyframes fx-sigil-spin{to{transform:rotate(360deg)}}
@media(max-width:430px){.fx-cutin{top:34%;height:112px;gap:13px}.fx-cutin img{width:76px;height:94px}.fx-cutin div{min-width:134px}.fx-cutin strong{font-size:21px}.fx-float{font-size:21px}.fx-critical{font-size:27px}.fx-resonance strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.fx-particle{display:none}.fx-cutin,.fx-resonance,.fx-float,.fx-ring{animation-duration:.08s!important}.fx-resonance i{animation:none}.combat-card{transition:none!important}}

/* v3.2: transparent 2D creature standees replace card-shaped combat units. */
.arena{position:relative;isolation:isolate;overflow:hidden;padding:25px 9px 12px;border:1px solid rgba(213,189,121,.14);border-radius:12px;background:
  radial-gradient(ellipse at 18% 72%,rgba(96,179,157,.16),transparent 37%),
  radial-gradient(ellipse at 82% 24%,rgba(219,115,77,.13),transparent 35%),
  linear-gradient(180deg,rgba(12,34,37,.96),rgba(5,16,19,.92));
  box-shadow:inset 0 0 70px rgba(2,8,10,.7),0 18px 42px rgba(0,0,0,.18)}
.arena::before{content:"";position:absolute;z-index:-2;inset:8% -8% 25%;opacity:.34;background:
  linear-gradient(145deg,transparent 0 37%,rgba(66,107,101,.46) 37.5% 55%,transparent 55.5%) 0 0/42% 100%,
  linear-gradient(215deg,transparent 0 39%,rgba(46,82,80,.5) 39.5% 58%,transparent 58.5%) 100% 0/48% 100%;filter:blur(.2px)}
.arena::after{content:"";position:absolute;z-index:-1;left:-15%;right:-15%;top:47%;height:38%;border-radius:50%;background:radial-gradient(ellipse,rgba(48,101,94,.25),rgba(13,32,34,.11) 42%,transparent 72%);transform:rotate(-2deg);box-shadow:0 0 55px rgba(107,210,182,.08)}
.team-label{position:relative;z-index:3;margin:0 3px 1px;color:#a6b9b1;text-shadow:0 1px 5px #000}
.enemy-label{color:#dca28f}.player-label{margin-top:2px;color:#9cd5c0}
.combat-row{position:relative;z-index:2;align-items:end;gap:1px;height:139px;padding:0 2px}
.combat-row::before{content:"";position:absolute;z-index:-1;left:3%;right:3%;bottom:29px;height:23px;border:1px solid rgba(205,180,111,.16);border-radius:50%;background:radial-gradient(ellipse,rgba(164,198,175,.1),transparent 66%);transform:perspective(100px) rotateX(58deg);box-shadow:0 0 25px rgba(108,212,184,.06)}
#enemy-row{margin:0 0 -5px;transform:translateX(3%)}
#player-row{margin:-5px 0 0;transform:translateX(-3%)}
.combat-card{appearance:none;display:grid;grid-template-rows:minmax(0,1fr) 43px;align-items:end;min-width:0;height:139px;padding:0 2px;border:0!important;border-radius:0;background:transparent!important;color:var(--ink);overflow:visible;isolation:isolate;filter:none!important;box-shadow:none!important;transform:none!important;transition:opacity .25s!important}
.combat-card:focus-visible{outline:1px solid var(--gold);outline-offset:1px;border-radius:8px}
.unit-motion{position:relative;display:grid;place-items:end center;width:100%;height:96px;transform-origin:50% 78%;will-change:transform,filter}
.unit-standee{position:relative;z-index:2;display:grid;place-items:end center;width:100%;height:100%;transform-origin:50% 88%;animation:unit-idle 2.8s ease-in-out var(--idle-delay) infinite;will-change:transform}
.unit-standee img,.combat-card .unit-standee img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:50% 100%;border:0;border-radius:0;filter:drop-shadow(0 7px 4px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(225,199,125,.09));pointer-events:none;user-select:none}
.unit-shadow{position:absolute;z-index:0;left:12%;right:12%;bottom:-2px;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.74),rgba(0,0,0,.28) 52%,transparent 72%);filter:blur(1.5px);transform:perspective(70px) rotateX(66deg)}
.unit-aura{position:absolute;z-index:1;left:16%;right:16%;bottom:-1px;height:22px;border:1px solid transparent;border-radius:50%;opacity:0;transform:perspective(80px) rotateX(63deg);transition:opacity .18s,border-color .18s,box-shadow .18s}
.combat-card.active .unit-aura{opacity:1;border-color:#f0d77d;box-shadow:0 0 13px rgba(240,215,125,.72),inset 0 0 8px rgba(240,215,125,.3);animation:unit-aura-pulse 1.35s ease-in-out infinite}
.combat-card.targetable .unit-aura{opacity:1;border-color:#e47461;box-shadow:0 0 14px rgba(228,116,97,.7),inset 0 0 8px rgba(228,116,97,.26);animation:unit-aura-pulse 1.05s ease-in-out infinite}
.unit-hud{position:relative;z-index:4;display:grid;align-self:end;width:100%;min-width:0;padding:4px 5px 3px;border:1px solid rgba(221,201,145,.2);border-radius:5px;background:linear-gradient(180deg,rgba(17,39,40,.88),rgba(7,20,22,.93));box-shadow:0 5px 12px rgba(0,0,0,.22);backdrop-filter:blur(3px)}
.unit-title{display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0}
.combat-card .combat-name{min-width:0;padding:0;color:#f0e4c9;font-size:11px;line-height:1.1;font-weight:600;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combat-card .badge{position:static;flex:none;padding:1px 3px;border:0;border-radius:3px;background:rgba(230,199,119,.12);color:#d9c279;font:8px/1.35 ui-sans-serif,system-ui,sans-serif;font-style:normal}
.combat-card.targetable .badge{background:rgba(228,116,97,.16);color:#f0a390}
.combat-card .hp-line{height:4px;margin:4px 0 2px;background:#273c39;border-radius:9px;overflow:hidden}
.combat-card .hp-line i{display:block;height:100%;background:linear-gradient(90deg,#c65b52,#edbd72);border-radius:inherit;transition:width .28s}
.combat-card .hp-text{display:block;padding:0;color:#97aaa4;font:7.5px/1.2 ui-sans-serif,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combat-card.active .unit-hud{border-color:rgba(239,211,126,.6);box-shadow:0 0 13px rgba(225,193,103,.15)}
.combat-card.targetable .unit-hud{border-color:rgba(228,116,97,.55);box-shadow:0 0 13px rgba(228,116,97,.12)}
.combat-card.defeated{opacity:.3}
.combat-card.defeated .unit-motion{animation:unit-defeat .64s ease-in forwards}
.combat-card.defeated .unit-standee img{filter:grayscale(1) brightness(.55) drop-shadow(0 5px 3px #000)}
.versus{position:relative;z-index:3;height:20px;margin:-3px 0;color:#738b84;text-shadow:0 1px 4px #000}
.versus b{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(226,196,116,.45);border-radius:50%;background:rgba(7,20,21,.88);font-size:10px;box-shadow:0 0 17px rgba(219,187,99,.12)}
.versus i{width:19%}
@keyframes unit-idle{0%,100%{transform:translate3d(0,1px,0) rotate(-.35deg) scale(1)}50%{transform:translate3d(0,-4px,0) rotate(.35deg) scale(1.018)}}
@keyframes unit-aura-pulse{0%,100%{opacity:.55;transform:perspective(80px) rotateX(63deg) scale(.94)}50%{opacity:1;transform:perspective(80px) rotateX(63deg) scale(1.08)}}
@keyframes unit-defeat{0%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:.65;transform:translateY(7px) rotate(-4deg)}100%{opacity:.2;transform:translateY(18px) rotate(8deg) scale(.82)}}
@media(min-width:650px){.arena{padding:30px 17px 15px}.combat-row{height:166px;gap:6px}.combat-card{height:166px;grid-template-rows:minmax(0,1fr) 47px}.unit-motion{height:119px}.combat-card .combat-name{font-size:13px}.combat-card .hp-text{font-size:8.5px}.unit-hud{padding:5px 7px 4px}}
@media(max-width:430px){.battle-banner{margin:10px 0 8px}.terrain-panel{margin-bottom:7px}.arena{padding-top:19px}.combat-row{height:123px}.combat-card{height:123px;grid-template-rows:minmax(0,1fr) 41px}.unit-motion{height:82px}.unit-hud{padding:3px 4px}.combat-card .combat-name{font-size:10px}.combat-card .hp-text{font-size:7px}.versus{height:18px;margin:-4px 0}.action-panel{margin-top:8px}.battle-log-wrap{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.unit-standee,.unit-aura{animation:none!important}.combat-card.defeated .unit-motion{animation-duration:.08s!important}}

/* v3.3: Five-phase taxonomy, four-skill codex and mobile combat choices. */
#app{overflow-x:hidden;overflow-y:visible}
.phase-filters{display:flex;gap:7px;margin:-6px 0 10px;overflow-x:auto;padding:3px 1px 7px;scrollbar-width:none}
.phase-filters::-webkit-scrollbar{display:none}.phase-filters button{flex:0 0 auto;min-width:48px;border:1px solid rgba(221,201,145,.2);border-radius:999px;padding:7px 9px;color:#aebeb7;background:rgba(16,31,33,.86);font:12px/1 ui-sans-serif,system-ui,sans-serif}.phase-filters button small{margin-left:3px;color:#6f8580;font-size:8px}.phase-filters button.active{border-color:currentColor;color:#f4e6c8;box-shadow:0 0 0 2px rgba(229,199,125,.08),0 5px 16px rgba(0,0,0,.2)}
.phase-cycle{display:flex;align-items:center;gap:7px;margin:0 0 13px;padding:7px 9px;border:1px solid rgba(221,201,145,.13);border-radius:5px;background:rgba(11,24,26,.65);overflow-x:auto;color:#91aaa1;font:9px/1.45 ui-sans-serif,system-ui,sans-serif;white-space:nowrap;scrollbar-width:none}.phase-cycle b{color:#d9bd72;font-weight:600}.phase-cycle span+ b{margin-left:7px}
.deck-phase{position:absolute;left:7px;top:31px;z-index:3;display:grid;place-items:center;width:21px;height:21px;border:1px solid currentColor;border-radius:50%;color:#f4e6c8;background:rgba(6,15,17,.75);font:10px/1 ui-sans-serif,system-ui,sans-serif;box-shadow:0 2px 6px #0008}
.phase-wood{--phase:#72bf8f}.phase-fire{--phase:#e26f54}.phase-earth{--phase:#c7a45c}.phase-metal{--phase:#d8d4c6}.phase-water{--phase:#62aeca}
.deck-card[class*="phase-"]{border-color:color-mix(in srgb,var(--phase) 42%,transparent)}.deck-card[class*="phase-"] .deck-phase{color:var(--phase)}
.skill-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}.skill-buttons .action-btn{min-width:0;min-height:58px;padding:7px 3px;background:linear-gradient(160deg,color-mix(in srgb,var(--phase,#d9bd72) 17%,#21302e),#172625)}.skill-buttons .action-btn.ultimate{border-color:rgba(235,196,99,.58);background:linear-gradient(145deg,#413326,#262b27)}.skill-buttons .action-btn b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.skill-buttons .action-btn span{font-size:15px}.utility-buttons{grid-template-columns:repeat(3,1fr)!important;margin-top:7px}.utility-buttons .action-btn{min-height:48px;padding:5px 3px}.utility-buttons .action-btn span{font-size:15px}
.modal-affinity{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin:7px 0 9px;color:#9fb4ac;font:10px ui-sans-serif,system-ui,sans-serif}.modal-affinity .phase-mark{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--phase);border-radius:50%;color:var(--phase);font-weight:800}.modal-affinity b{color:#e5cf93;font-size:12px}.modal-affinity em{font-style:normal;color:#8ca199}.modal-affinity small{grid-column:1/-1;color:#78928a;line-height:1.45}
.modal-skill-list{display:grid;gap:5px;margin-top:10px}.modal-skill{position:relative;display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;margin:0!important;padding:7px 7px 6px!important;border:1px solid rgba(225,202,145,.15)!important;border-radius:4px;background:rgba(7,20,22,.42)}.modal-skill>span{color:#89baa9!important;font:8px ui-sans-serif,system-ui,sans-serif!important}.modal-skill>b{color:#e8d397!important;font-size:12px!important}.modal-skill>em{color:#a9b8b1;font:8px ui-sans-serif,system-ui,sans-serif;font-style:normal}.modal-skill>p{grid-column:1/-1;margin:0;color:#9eafa8;font:9px/1.45 ui-sans-serif,system-ui,sans-serif}.modal-skill.passive{border-color:rgba(229,199,125,.3)!important;background:rgba(60,49,29,.24)}
.card-modal-panel{max-height:min(90dvh,760px);grid-template-columns:36% 64%;overflow:hidden}.card-modal-panel img{aspect-ratio:9/16;object-fit:contain;align-self:start;background:#0a1517}.modal-copy{min-height:0;overflow-y:auto;padding:13px 12px}.modal-copy h2{font-size:25px}.modal-copy>p{margin:8px 0;font-size:10px}.modal-stats{margin-top:8px}.result-stats{grid-template-columns:repeat(4,1fr)}
.unit-phase{flex:none;display:grid;place-items:center;width:15px;height:15px;border:1px solid var(--phase);border-radius:50%;color:var(--phase);font:7px/1 ui-sans-serif,system-ui,sans-serif;font-style:normal}.combat-card[class*="phase-"] .unit-hud{border-top-color:color-mix(in srgb,var(--phase) 62%,transparent)}
@media(max-width:430px){.hint{margin-bottom:13px;font-size:12px}.phase-cycle{margin-bottom:10px}.skill-buttons{gap:5px}.skill-buttons .action-btn{min-height:54px}.utility-buttons .action-btn{min-height:42px}.action-panel{padding:8px}.resource-row{margin:8px 0 7px}.battle-log{max-height:72px}.card-modal-panel{width:94vw;grid-template-columns:34% 66%;padding:6px}.modal-copy{padding:10px 9px}.modal-copy h2{font-size:22px}.modal-kicker{font-size:8px}.modal-skill{padding:6px!important}.modal-skill>p{font-size:8.5px}.result-stats{grid-template-columns:repeat(2,1fr)}}

/* Species-specific 2D motion stays on the inner standee, leaving combat lunges
   on .unit-motion independent and GPU-friendly. */
.motion-hover .unit-standee{animation:beast-hover 2.15s ease-in-out var(--idle-delay) infinite}.motion-hover .unit-shadow{animation:shadow-hover 2.15s ease-in-out var(--idle-delay) infinite}
.motion-slither .unit-standee{animation:beast-slither 2.7s ease-in-out var(--idle-delay) infinite}.motion-prowl .unit-standee{animation:beast-prowl 2.45s ease-in-out var(--idle-delay) infinite}.motion-primate .unit-standee{animation:beast-primate 2.25s ease-in-out var(--idle-delay) infinite}.motion-spring .unit-standee{animation:beast-spring 2.05s cubic-bezier(.4,0,.25,1) var(--idle-delay) infinite}.motion-spring .unit-shadow{animation:shadow-spring 2.05s cubic-bezier(.4,0,.25,1) var(--idle-delay) infinite}.motion-mystic .unit-standee{animation:beast-mystic 3.1s ease-in-out var(--idle-delay) infinite}.motion-swim .unit-standee{animation:beast-swim 2.8s ease-in-out var(--idle-delay) infinite}
@keyframes beast-hover{0%,100%{transform:translate3d(0,2px,0) rotate(-.8deg) scale(1)}50%{transform:translate3d(0,-7px,0) rotate(.9deg) scale(1.018)}}
@keyframes beast-slither{0%,100%{transform:translate3d(-2px,1px,0) rotate(-.5deg) skewX(-1deg)}50%{transform:translate3d(3px,-3px,0) rotate(.7deg) skewX(1.2deg)}}
@keyframes beast-prowl{0%,100%{transform:translate3d(-1px,1px,0) rotate(-.3deg) scale(1.01,.99)}45%{transform:translate3d(2px,-3px,0) rotate(.25deg) scale(.995,1.018)}}
@keyframes beast-primate{0%,100%{transform:translate3d(0,2px,0) rotate(-.45deg) scale(1.018,.985)}48%{transform:translate3d(0,-4px,0) rotate(.45deg) scale(.995,1.025)}}
@keyframes beast-spring{0%,72%,100%{transform:translate3d(0,2px,0) scale(1.02,.98)}42%{transform:translate3d(0,-8px,0) scale(.99,1.03)}}
@keyframes beast-mystic{0%,100%{transform:translate3d(-1px,1px,0) rotate(-.65deg) scale(1)}50%{transform:translate3d(2px,-5px,0) rotate(.65deg) scale(1.025)}}
@keyframes beast-swim{0%,100%{transform:translate3d(-3px,1px,0) rotate(-1deg) scale(1)}50%{transform:translate3d(4px,-3px,0) rotate(1deg) scale(1.018)}}
@keyframes shadow-hover{0%,100%{opacity:.68;transform:perspective(70px) rotateX(66deg) scale(1)}50%{opacity:.42;transform:perspective(70px) rotateX(66deg) scale(.78)}}
@keyframes shadow-spring{0%,72%,100%{opacity:.72;transform:perspective(70px) rotateX(66deg) scale(1.05)}42%{opacity:.35;transform:perspective(70px) rotateX(66deg) scale(.7)}}
@media(prefers-reduced-motion:reduce){.motion-hover .unit-shadow,.motion-spring .unit-shadow{animation:none!important}}