/* ==========================================================================
   Styles: layout, unit cards, controls, panels, and party planner
   ========================================================================== */
:root {
  --bg:#10131f;
  --panel:#1a2034;
  --text:#f3f6ff;
  --muted:#aeb7d4;
  --good:#46d47f;
  --bad:#ff5b68;
  --mana:#58a6ff;
  --gold:#ffd166;
  --purple:#a78bfa
}
* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent
}
body {
  margin:0;
  background:radial-gradient(circle at top,#26304d 0,#10131f 45%,#090b12 100%);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  overflow:hidden;
  touch-action:manipulation
}
#game {
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding:10px 10px 128px;
  gap:8px;
  max-width:520px;
  margin:0 auto;
  position:relative
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-weight:800
}
.pill {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  padding:6px 9px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted)
}
.battlefield {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  min-height:0;
  flex:1
}
.zone {
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.zone-title {
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px 2px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:800
}
#enemies {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px
}
#party {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  align-items:start
}
.partyCol {
  display:grid;
  gap:7px;
  align-content:start;
  min-width:0
}
.unitGroup {
  display:grid;
  grid-template-rows:auto auto;
  gap:4px;
  min-height:0;
  align-self:start
}
.card {
  position:relative;
  background:rgba(16,19,31,.86);
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  padding:7px;
  min-height:93px;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:7px;
  overflow:hidden
}
.card.allyTile {
  height:93px;
  min-height:93px;
  max-height:93px;
  box-sizing:border-box
}
.card.allyTile .role {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px
}
.card.allyTile .bars {
  gap:3px
}
.card.allyTile .bar {
  height:9px
}
.card.allyTile .numbers {
  line-height:1.05;
  margin-top:1px
}
.card.allyTile .stanceWrap {
  gap:1px;
  margin-top:1px
}
.card.allyTile .stanceBar {
  height:6px
}
.card.omenLayer {
  overflow:visible;
  z-index:80
}
.card.omenLayer .fortuneBar,
.card.omenLayer .fortuneSymbol,
.card.omenLayer .fortuneMergeGhosts,
.card.omenLayer .fortuneDetonateGhosts {
  z-index:90
}
.card.selected {
  outline:2px solid var(--gold);
  box-shadow:0 0 18px rgba(255,209,102,.3)
}
.card.possessedMystic {
  outline:2px solid var(--purple);
  box-shadow:0 0 22px rgba(167,139,250,.65),inset 0 0 18px rgba(167,139,250,.12)
}
.card.mysticAnchor {
  background:rgba(33,10,52,.30);
  border-color:rgba(167,139,250,.35);
  box-shadow:inset 0 0 18px rgba(91,33,182,.18);
  cursor:default
}
.card.mysticAnchor .bars {
  display:none
}
.card.mysticAnchor .numbers {
  color:var(--purple)
}
.summonMini.possessedMystic {
  outline:2px solid var(--purple);
  box-shadow:0 0 18px rgba(167,139,250,.55)
}
.dead {
  filter:grayscale(1);
  opacity:.55
}
.portrait {
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:28px;
  background:linear-gradient(145deg,#384466,#1a2034);
  border:1px solid rgba(255,255,255,.14)
}
.portraitWrap {
  position:relative;
  width:48px;
  height:48px;
  margin-top:13px;
  align-self:start
}
.portraitWrap .portrait {
  margin-top:0
}
.statusTray {
  position:absolute;
  left:50%;
  z-index:6;
  display:flex;
  justify-content:center;
  gap:2px;
  width:max-content;
  max-width:76px;
  pointer-events:none;
  transform:translateX(-50%)
}
.statusTray.buffTray {
  bottom:calc(100% - 1px)
}
.statusTray.debuffTray {
  top:calc(100% - 1px)
}
.statusPill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:15px;
  padding:0 3px;
  border-radius:999px;
  font-size:9px;
  line-height:1;
  font-weight:850;
  color:#f8fbff;
  background:rgba(15,23,42,.90);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 6px rgba(0,0,0,.28)
}
.statusPill.buff {
  border-color:rgba(134,239,172,.58);
  background:rgba(20,83,45,.88)
}
.statusPill.debuff {
  border-color:rgba(248,113,113,.58);
  background:rgba(69,10,10,.88)
}
.portrait.omenPortraitImpact {
  animation:omenPortraitImpact .62s 1.28s
}
.tank {
  background:linear-gradient(145deg,#4b5563,#1f2937)
}
.healer {
  background:linear-gradient(145deg,#2dd4bf,#14532d)
}
.priest {
  background:linear-gradient(145deg,#fde68a,#7c2d12)
}
.oracle {
  background:linear-gradient(145deg,#7c3aed,#111827)
}
.druid {
  background:linear-gradient(145deg,#22c55e,#14532d)
}
.shade {
  background:linear-gradient(145deg,#581c87,#111827)
}
.fairy {
  background:linear-gradient(145deg,#f0abfc,#166534)
}
.mystic {
  background:linear-gradient(145deg,#38bdf8,#312e81)
}
.card.mysticAnchor .portrait.mystic {
  background:rgba(49,46,129,.35);
  border-color:rgba(167,139,250,.55);
  box-shadow:0 0 18px rgba(167,139,250,.25)
}
.starborn {
  background:linear-gradient(145deg,#bae6fd,#312e81)
}
.rogue {
  background:linear-gradient(145deg,#475569,#111827)
}
.wildstalker {
  background:linear-gradient(145deg,#166534,#312e81)
}
.mage {
  background:linear-gradient(145deg,#7c3aed,#1e1b4b)
}
.goblin {
  background:linear-gradient(145deg,#65a30d,#1f2d12)
}
.orc {
  background:linear-gradient(145deg,#7f1d1d,#201515)
}
.shaman {
  background:linear-gradient(145deg,#9333ea,#1e1b4b)
}
.dragon {
  background:linear-gradient(145deg,#dc2626,#3b0d0d)
}
.info {
  min-width:0;
  overflow:hidden
}
.name {
  font-weight:850;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.role {
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px
}
.bars {
  display:grid;
  gap:4px;
  min-width:0
}
.bar {
  position:relative;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06)
}
.fill {
  position:relative;
  z-index:1;
  height:100%;
  width:100%;
  transition:width .25s ease
}
.shieldSegment {
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  background:linear-gradient(90deg,#93c5fd,#bae6fd);
  border-left:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 4px rgba(255,255,255,.35)
}
.darkShieldSegment {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  z-index:3;
  background:linear-gradient(90deg,#6d28d9,#2e1065);
  border-left:1px solid rgba(216,180,254,.62);
  box-shadow:inset 0 0 4px rgba(216,180,254,.38)
}
.shieldText {
  color:#bfdbfe;
  font-weight:850;
  white-space:nowrap
}
.darkShieldText {
  color:#c4b5fd;
  font-weight:850;
  white-space:nowrap
}
.hp {
  background:linear-gradient(90deg,var(--bad),#ffb86b,var(--good))
}
.hp.shadeHp {
  background:linear-gradient(90deg,#4c1d95,var(--purple),#c084fc)
}
.mp {
  background:linear-gradient(90deg,#1d4ed8,var(--mana))
}
.numbers {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin-top:2px
}
.numbers.shadeText {
  color:var(--purple);
  font-weight:800
}
.stanceWrap {
  position:relative;
  display:grid;
  gap:2px;
  margin-top:2px
}
.stanceLabel {
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:9px;
  font-weight:850;
  color:var(--muted)
}
.stanceBar {
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07)
}
.stanceFill {
  height:100%;
  width:100%;
  transition:width var(--stance-transition,.25s) linear
}
.stanceCounter {
  position:absolute;
  right:0;
  top:-10px;
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  line-height:1;
  text-align:right;
  text-shadow:0 1px 3px rgba(0,0,0,.85)
}
.stanceFill.wolf {
  background:linear-gradient(90deg,#7f1d1d,#dc2626,#fca5a5)
}
.stanceFill.falcon {
  background:linear-gradient(90deg,#f8fafc,#facc15,#fb923c)
}
.stanceFill.scorpion {
  background:linear-gradient(90deg,#581c87,#16a34a,#bef264)
}
.stanceFill.empowered {
  box-shadow:0 0 10px rgba(255,209,102,.85)
}
.stanceFill.ready {
  filter:brightness(1.28) saturate(1.25);
  animation:stanceReadyPulse 1s ease-in-out infinite
}
.stanceFill.wolf.ready {
  box-shadow:0 0 12px rgba(248,113,113,.85)
}
.stanceFill.falcon.ready {
  box-shadow:0 0 12px rgba(250,204,21,.85)
}
.stanceFill.scorpion.ready {
  box-shadow:0 0 12px rgba(34,197,94,.85),0 0 18px rgba(168,85,247,.45)
}
.intent {
  position:absolute;
  right:7px;
  bottom:7px;
  font-size:11px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:2px 6px
}
.flash {
  animation:flash .25s
}
.hitAlly {
  animation:hitAlly .25s
}
.attackAlly {
  animation:attackAlly .25s
}
.hitEnemy {
  animation:hitEnemy .25s
}
.attackEnemy {
  animation:attackEnemy .25s
}
.wildLunge {
  animation:wildLunge .34s
}
.wildHeavy {
  animation:wildHeavy .48s
}
.falconStrike {
  animation:falconStrike .28s
}
.scorpionCharge {
  animation:scorpionCharge .55s
}
.scorpionStrike {
  animation:scorpionStrike .65s
}
.dotShake {
  animation:dotShake .32s
}
.healJump {
  animation:healJump .38s
}
@keyframes flash {
  50% {
    transform:translateY(-2px);
    filter:brightness(1.8)
  }
}
@keyframes hitAlly {
  50% {
    transform:translateY(4px);
    filter:brightness(1.55)
  }
}
@keyframes attackAlly {
  50% {
    transform:translateY(-4px);
    filter:brightness(1.55)
  }
}
@keyframes hitEnemy {
  50% {
    transform:translateY(-4px);
    filter:brightness(1.55)
  }
}
@keyframes attackEnemy {
  50% {
    transform:translateY(4px);
    filter:brightness(1.55)
  }
}
@keyframes wildLunge {
  50% {
    transform:translateX(8px) scale(1.04);
    filter:brightness(1.8) saturate(1.25)
  }
}
@keyframes wildHeavy {
  40% {
    transform:translateX(12px) translateY(-3px) scale(1.08);
    filter:brightness(2) saturate(1.4)
  }
  75% {
    transform:translateX(-3px) scale(.98)
  }
}
@keyframes falconStrike {
  35% {
    transform:translateY(-8px) scale(.96);
    filter:brightness(1.9)
  }
  70% {
    transform:translateY(4px) scale(1.03)
  }
}
@keyframes scorpionCharge {
  50% {
    transform:scale(1.04);
    box-shadow:0 0 18px rgba(34,197,94,.45);
    filter:brightness(1.45)
  }
}
@keyframes scorpionStrike {
  30% {
    transform:translateY(-7px) scale(1.1);
    filter:brightness(2) saturate(1.6)
  }
  65% {
    transform:translateY(8px) scale(1.04);
    box-shadow:0 0 24px rgba(190,242,100,.55)
  }
}
@keyframes stanceReadyPulse {
  50% {
    filter:brightness(1.75) saturate(1.55)
  }
}
@keyframes omenCast {
  0% { transform:translate(var(--sx,-92px),var(--sy,-26px)) rotate(var(--r0,-30deg)) scale(.52); opacity:.05 }
  48% { transform:translate(var(--cx,-31px),var(--cy,-13px)) rotate(var(--r1,95deg)) scale(1.22); opacity:1; filter:brightness(1.95) }
  78% { transform:translate(var(--fx,-5px),var(--fy,2px)) rotate(var(--r2,18deg)) scale(1.06); opacity:1; filter:brightness(1.35) }
  100% { transform:translate(0,0) rotate(0deg) scale(1); opacity:1 }
}
@keyframes omenFail {
  25% { transform:translateX(-2px); filter:brightness(1.8) }
  50% { transform:translateX(2px); opacity:.45 }
  75% { transform:translateX(-1px); filter:brightness(1.5) }
}
@keyframes omenMerge {
  0% { transform:translateX(var(--dx,0)) scale(1); opacity:1; filter:brightness(2) }
  72% { transform:translateX(0) scale(.35) rotate(12deg); opacity:.85 }
  100% { transform:translateX(0) scale(.05); opacity:0 }
}
@keyframes omenOphiuchusBorn {
  0% { transform:translateX(14px) scale(.08); opacity:0 }
  58% { transform:translateX(5px) scale(1.42); opacity:1; filter:brightness(2.5); box-shadow:0 0 18px rgba(250,204,21,.58) }
  100% { transform:translateX(0) scale(1) }
}
@keyframes omenSymbolExplode {
  0% { transform:translate(0,0) rotate(0deg) scale(1); opacity:1 }
  13% { transform:translate(var(--outx,18px),var(--outy,13px)) rotate(var(--r1,-58deg)) scale(1.28); opacity:1; filter:brightness(2.4); box-shadow:0 0 18px rgba(250,204,21,.55) }
  32% { transform:translate(var(--m1x,-10px),var(--m1y,-58px)) rotate(var(--r2,-138deg)) scale(1.08); opacity:1; filter:brightness(2.25) }
  52% { transform:translate(var(--m2x,-67px),var(--m2y,-58px)) rotate(var(--r3,-212deg)) scale(.84); opacity:.96; filter:brightness(2.35) }
  72% { transform:translate(var(--m3x,-101px),var(--m3y,-14px)) rotate(var(--r4,-284deg)) scale(.55); opacity:.88; filter:brightness(2.65) }
  89% { transform:translate(var(--m4x,-88px),var(--m4y,-26px)) rotate(var(--r5,-332deg)) scale(.28); opacity:.72; filter:brightness(3.15) }
  100% { transform:translate(var(--tx,-130px),var(--ty,-28px)) rotate(var(--rot,-360deg)) scale(.04); opacity:0; filter:brightness(4) }
}
@keyframes omenOphiuchusToIcon {
  0% { transform:translate(0,0) rotate(0deg) scale(1); opacity:1 }
  12% { transform:translate(var(--outx,22px),var(--outy,15px)) rotate(var(--r1,-72deg)) scale(1.42); opacity:1; filter:brightness(2.7); box-shadow:0 0 20px rgba(250,204,21,.7) }
  31% { transform:translate(var(--m1x,-8px),var(--m1y,-63px)) rotate(var(--r2,-164deg)) scale(1.14); opacity:1; filter:brightness(2.55) }
  51% { transform:translate(var(--m2x,-71px),var(--m2y,-62px)) rotate(var(--r3,-246deg)) scale(.84); opacity:.96; filter:brightness(2.6) }
  72% { transform:translate(var(--m3x,-106px),var(--m3y,-13px)) rotate(var(--r4,-326deg)) scale(.52); opacity:.88; filter:brightness(2.9) }
  89% { transform:translate(var(--m4x,-89px),var(--m4y,-27px)) rotate(var(--r5,-382deg)) scale(.26); opacity:.74; filter:brightness(3.35) }
  100% { transform:translate(var(--tx,-130px),var(--ty,-28px)) rotate(var(--rot,-430deg)) scale(.04); opacity:0; filter:brightness(4.2) }
}
@keyframes omenRedirect {
  0% { transform:translate(-88px,-24px) scale(.62); opacity:.3 }
  44% { transform:translate(-43px,13px) scale(1.18); opacity:1; filter:brightness(1.8) }
  100% { transform:translateX(0) translateY(0) scale(1) }
}
@keyframes omenGaze {
  50% { transform:scale(1.16); filter:brightness(1.9) hue-rotate(25deg) }
}
@keyframes omenPortraitImpact {
  0% { transform:scale(1); filter:brightness(1) }
  18% { transform:scale(.72) rotate(4deg); filter:brightness(1.8) saturate(1.6); box-shadow:0 0 16px rgba(15,23,42,.95),inset 0 0 22px rgba(0,0,0,.95) }
  43% { transform:scale(1.32) rotate(-5deg); filter:brightness(3.2) saturate(2.15); box-shadow:0 0 42px rgba(250,204,21,1),0 0 24px rgba(14,165,233,.8),inset 0 0 18px rgba(0,0,0,.8) }
  72% { transform:scale(.90) rotate(3deg); filter:brightness(1.75) }
  100% { transform:scale(1); filter:brightness(1) }
}
@keyframes dotShake {
  18% { transform:translateX(-3px) rotate(-1.5deg); filter:brightness(1.7) }
  36% { transform:translateX(3px) rotate(1.5deg) }
  54% { transform:translateX(-2px) rotate(-1deg); filter:brightness(1.45) }
  72% { transform:translateX(2px) rotate(.8deg) }
}
@keyframes healJump {
  35% { transform:translateY(-8px) scale(1.03); filter:brightness(1.9) saturate(1.25) }
  70% { transform:translateY(2px) scale(.99); filter:brightness(1.35) }
}
#log {
  height:86px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  font-size:12px;
  line-height:1.25;
  color:#dbe3ff;
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:8px;
  border:1px solid rgba(255,255,255,.08)
}
#log div {
  margin-bottom:2px
}
.healText {
  color:#9cffbd
}
.dmgText {
  color:#ff9aa3
}
.warnText {
  color:#ffd166
}
.manaText {
  color:#8ec5ff
}
.darkText {
  color:#d8b4fe
}
.natureText {
  color:#86efac
}
#controls {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  max-width:520px;
  background:linear-gradient(180deg,rgba(16,19,31,.72),rgba(16,19,31,.98) 18%);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  z-index:10
}
#targetLine {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-size:12px;
  color:var(--muted)
}
#targetName {
  color:var(--gold);
  font-weight:800
}
.spells {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px
}
button {
  border:0;
  border-radius:14px;
  padding:9px 5px;
  background:linear-gradient(180deg,#2d3758,#1b2238);
  color:var(--text);
  font-weight:850;
  font-size:11px;
  box-shadow:0 3px 0 #0a0d16;
  min-height:56px
}
button:active {
  transform:translateY(2px);
  box-shadow:0 1px 0 #0a0d16
}
.spellButton {
  position:relative;
  overflow:hidden;
  height:76px;
}
.spellButton .cooldownTrack {
  position:absolute;
  inset:0;
  z-index:0;
  height:auto;
  overflow:hidden;
  border:0;
  border-radius:inherit;
  background:transparent;
  box-shadow:none;
  pointer-events:none
}
.spellButton .cooldownProgress {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(148,163,184,.82) 0%,rgba(148,163,184,.76) 84%,rgba(226,232,240,.58) 100%);
  box-shadow:none;
  transform:scaleX(var(--ma-cooldown-progress,0));
  transform:scaleX(var(--ma-cooldown-visual,var(--ma-cooldown-progress,0)));
  transform-origin:left center;
  transition:none;
  will-change:transform
}
/* Compatibility for older cached runtime markup. */
.spellButton .cdFill {
  position:absolute;
  inset:0!important;
  width:100%;
  max-width:none;
  height:100%;
  border:0;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(148,163,184,.82) 0%,rgba(148,163,184,.76) 84%,rgba(226,232,240,.58) 100%)!important;
  box-shadow:none;
  z-index:0;
  pointer-events:none;
  transform:scaleX(var(--ma-cooldown-progress,0));
  transform-origin:left center;
  transition:none
}
.spellButton .cdOrb {
  position:absolute;
  top:6px;
  right:7px;
  z-index:5;
  display:grid;
  place-items:center;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border:1px solid rgba(254,202,202,.55);
  border-radius:999px;
  background:#7f1d1d;
  color:#fff;
  font-size:11px;
  font-weight:950;
  line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.32)
}
.spellButton .spellContent {
  position:relative;
  z-index:1
}
.spellButton.cooling {
  color:#d5dbe6
}
.spellButton.cooling .spellContent {
  opacity:.82;
  filter:grayscale(.35)
}
.spellButton.cooling.fragmentReady {
  background:linear-gradient(180deg,#1e3a8a,#0f172a);
  box-shadow:0 0 14px rgba(56,189,248,.28),0 3px 0 #0a0d16;
  filter:none
}
.spellButton.cooling.fragmentReady .spellContent {
  opacity:1;
  filter:none
}
.spellButton.fragmentReady .cooldownProgress,
.spellButton.fragmentReady .cdFill {
  background:linear-gradient(90deg,rgba(14,165,233,.78),rgba(99,102,241,.62) 70%,rgba(186,230,253,.4) 100%)!important
}
.spellButton.cooldownReady {
  animation:maCooldownReady .42s cubic-bezier(.2,.82,.3,1)
}
.spells.moonFull {
  filter:drop-shadow(0 0 12px rgba(255,209,102,.55))
}
.spells.moonFull .spellButton {
  border:1px solid rgba(255,209,102,.62);
  box-shadow:0 0 16px rgba(255,209,102,.35),0 3px 0 #0a0d16
}
.spells.moonNew {
  filter:drop-shadow(0 0 12px rgba(167,139,250,.58))
}
.spells.moonNew .spellButton {
  border:1px solid rgba(167,139,250,.65);
  box-shadow:0 0 16px rgba(167,139,250,.38),0 3px 0 #0a0d16
}
.spellButton.invalidTarget,
.spellButton:disabled {
  opacity:.42;
  filter:grayscale(.85);
  cursor:not-allowed;
  color:rgba(232,236,255,.7);
}
.spellButton:disabled:active {
  transform:none;
  box-shadow:0 3px 0 #0a0d16
}
.spellButton.castActivated {
  animation:maSpellButtonCast .28s cubic-bezier(.2,.82,.3,1)
}
.spellButton.castActivated::before {
  content:"";
  position:absolute;
  top:-28%;
  bottom:-28%;
  left:-48%;
  z-index:3;
  width:46%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  transform:skewX(-18deg);
  animation:maSpellButtonSheen .28s ease-out;
  pointer-events:none
}
html body .card.castSource {
  z-index:2;
  outline:2px solid rgba(167,139,250,.78);
  outline-offset:2px;
  animation:maSpellCastSource .36s cubic-bezier(.2,.82,.3,1)
}
html body .card.castImpact {
  --ma-cast-impact-rgb:255,91,104;
  z-index:3;
  outline:2px solid rgba(var(--ma-cast-impact-rgb),.82);
  outline-offset:2px
}
html body .card.castImpact.castImpactEnemy {
  animation:maSpellImpactEnemy .36s ease-out
}
html body .card.castImpact.castImpactAlly {
  --ma-cast-impact-rgb:70,212,127;
  animation:maSpellImpactAlly .36s ease-out
}
.castTravelFx {
  --ma-cast-fx-rgb:251,113,133;
  position:fixed;
  top:0;
  left:0;
  z-index:1500;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border:1px solid rgba(var(--ma-cast-fx-rgb),.88);
  border-radius:999px;
  background:radial-gradient(circle at 35% 30%,#fff 0 8%,rgba(var(--ma-cast-fx-rgb),.98) 30%,rgba(var(--ma-cast-fx-rgb),.22) 68%,transparent 72%);
  color:#fff;
  box-shadow:0 0 8px rgba(var(--ma-cast-fx-rgb),.9),0 0 18px rgba(var(--ma-cast-fx-rgb),.55);
  text-shadow:0 1px 2px rgba(0,0,0,.72);
  pointer-events:none;
  transform:translate3d(calc(var(--ma-cast-from-x,0px) - 50%),calc(var(--ma-cast-from-y,0px) - 50%),0) scale(.24);
  animation:maSpellTravel .44s cubic-bezier(.22,.7,.24,1) forwards;
  will-change:transform,opacity
}
.castTravelFx::before {
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(var(--ma-cast-fx-rgb),.48);
  border-radius:inherit;
  animation:maSpellTravelAura .44s ease-out
}
.castTravelFx::after {
  content:"✦";
  font-size:12px;
  font-weight:950;
  line-height:1
}
.castTravelFx.castTravelDamage {
  --ma-cast-fx-rgb:251,113,133
}
.castTravelFx.castTravelHeal {
  --ma-cast-fx-rgb:74,222,128;
  width:22px;
  height:22px
}
.castTravelFx.castTravelHeal::after {
  content:"+";
  font-size:16px
}
.combatFloater {
  position:fixed;
  z-index:1600;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#fecaca;
  font-weight:950;
  font-size:18px;
  line-height:1;
  letter-spacing:.02em;
  pointer-events:none;
  text-shadow:0 1px 2px #000,0 0 10px rgba(0,0,0,.45);
  transform:translate(-50%,0);
  animation:maCombatFloater .68s cubic-bezier(.2,.8,.3,1) forwards
}
.combatFloater-heal {
  color:#bbf7d0
}
.combatFloater-crit {
  color:#fde68a;
  font-size:21px
}
@keyframes maCombatFloater {
  0% {
    opacity:0;
    transform:translate(-50%,8px) scale(.72)
  }
  18% {
    opacity:1;
    transform:translate(-50%,-6px) scale(1.08)
  }
  100% {
    opacity:0;
    transform:translate(-50%,-38px) scale(.9)
  }
}
@keyframes maCooldownReady {
  0% {
    filter:grayscale(.5) brightness(.8)
  }
  40% {
    filter:grayscale(0) brightness(1.28) saturate(1.18);
    box-shadow:0 0 0 2px rgba(255,209,102,.42),0 16px 26px rgba(0,0,0,.27)
  }
  100% {
    filter:none
  }
}
@keyframes maSpellButtonCast {
  0%,100% {
    transform:translateY(0) scale(1);
    filter:brightness(1)
  }
  36% {
    transform:translateY(2px) scale(.95);
    filter:brightness(1.32) saturate(1.2)
  }
  72% {
    transform:translateY(-1px) scale(1.025);
    filter:brightness(1.48) saturate(1.3)
  }
}
@keyframes maSpellButtonSheen {
  from {
    transform:translateX(0) skewX(-18deg);
    opacity:0
  }
  28% {
    opacity:1
  }
  to {
    transform:translateX(430%) skewX(-18deg);
    opacity:0
  }
}
@keyframes maSpellCastSource {
  0%,100% {
    transform:translateY(0) scale(1);
    filter:brightness(1)
  }
  42% {
    transform:translateY(-4px) scale(1.025);
    filter:brightness(1.7) saturate(1.28) drop-shadow(0 0 7px rgba(167,139,250,.72))
  }
  76% {
    transform:translateY(1px) scale(.995);
    filter:brightness(1.28)
  }
}
@keyframes maSpellImpactEnemy {
  0%,100% {
    transform:translateX(0) scale(1);
    filter:brightness(1)
  }
  20% {
    transform:translateX(-4px) scale(.985);
    filter:brightness(1.75) saturate(1.45) drop-shadow(0 0 7px rgba(255,91,104,.7))
  }
  43% {
    transform:translateX(4px) scale(1.025);
    filter:brightness(2) saturate(1.55)
  }
  68% {
    transform:translateX(-2px) scale(.995);
    filter:brightness(1.3)
  }
}
@keyframes maSpellImpactAlly {
  0%,100% {
    transform:translateY(0) scale(1);
    filter:brightness(1)
  }
  42% {
    transform:translateY(-5px) scale(1.035);
    filter:brightness(1.8) saturate(1.35) drop-shadow(0 0 8px rgba(70,212,127,.72))
  }
  74% {
    transform:translateY(1px) scale(.995);
    filter:brightness(1.3)
  }
}
@keyframes maSpellTravel {
  0% {
    opacity:0;
    transform:translate3d(calc(var(--ma-cast-from-x,0px) - 50%),calc(var(--ma-cast-from-y,0px) - 50%),0) scale(.24) rotate(-12deg)
  }
  16%,76% {
    opacity:1
  }
  100% {
    opacity:0;
    transform:translate3d(calc(var(--ma-cast-to-x,0px) - 50%),calc(var(--ma-cast-to-y,0px) - 50%),0) scale(.78) rotate(18deg)
  }
}
@keyframes maSpellTravelAura {
  0% {
    transform:scale(.35);
    opacity:0
  }
  36% {
    transform:scale(1.16);
    opacity:1
  }
  100% {
    transform:scale(.72);
    opacity:0
  }
}
.fortuneBar {
  position:relative;
  display:flex;
  align-items:center;
  gap:3px;
  min-height:19px;
  margin-top:4px;
  padding:2px 5px;
  border:1px solid rgba(125,211,252,.20);
  border-radius:9px;
  background:rgba(8,13,28,.48);
  overflow:visible;
  white-space:nowrap
}
.fortuneSymbol {
  position:relative;
  z-index:1;
  display:inline-grid;
  place-items:center;
  min-width:17px;
  height:17px;
  font-size:13px;
  line-height:1;
  border-radius:50%;
  background:rgba(255,255,255,.055);
  will-change:transform,opacity,filter
}
.fortuneBase {
  background:rgba(56,189,248,.16);
  color:#bfdbfe
}
.fortuneOph {
  background:rgba(250,204,21,.18);
  color:#fde68a
}
.fortuneGaze {
  margin-left:auto;
  background:rgba(167,139,250,.17);
  color:#ddd6fe;
  animation:omenGaze 1.6s infinite
}
.fortuneAnimAdd {
  animation:omenCast var(--dur,.78s);
  animation-delay:var(--delay,0ms);
  animation-fill-mode:both
}
.fortuneAnimFail {
  animation:omenFail .42s;
  animation-delay:var(--delay,0ms);
  animation-fill-mode:both
}
.fortuneAnimMerge {
  animation:omenOphiuchusBorn .82s;
  animation-delay:var(--delay,0ms);
  animation-fill-mode:both
}
.fortuneAnimDetonate {
  animation:omenSymbolExplode 1.22s forwards;
  animation-delay:var(--delay,0ms)
}
.fortuneOph.fortuneAnimDetonate {
  animation:omenOphiuchusToIcon 1.30s forwards;
  animation-delay:var(--delay,0ms)
}
.fortuneAnimRedirect,
.fortuneAnimSeed {
  animation:omenCast var(--dur,.82s);
  animation-delay:var(--delay,0ms);
  animation-fill-mode:both
}
.fortuneMergeGhosts,
.fortuneDetonateGhosts {
  position:absolute;
  left:38px;
  top:2px;
  display:flex;
  align-items:center;
  gap:3px;
  z-index:4;
  pointer-events:none
}
.fortuneMergeGhost,
.fortuneDetonateGlyph {
  display:inline-grid;
  place-items:center;
  min-width:17px;
  height:17px;
  font-size:13px;
  line-height:1;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  will-change:transform,opacity,filter
}
.fortuneMergeGhost {
  animation:omenMerge .82s forwards;
  animation-delay:var(--delay,0ms)
}
.fortuneDetonateGlyph {
  animation:omenSymbolExplode var(--dur,1.24s) forwards;
  animation-delay:var(--delay,0ms)
}
.fortuneDetonateGlyph.fortuneOph {
  animation:omenOphiuchusToIcon var(--dur,1.34s) forwards;
  animation-delay:var(--delay,0ms);
  background:rgba(250,204,21,.20);
  color:#fde68a
}
/* MYTHIC HUD SAFETY NOTE: when the player is Mystic/Mythic, never remove #mythicFragmentCounter and never place other UI over it. */
.mythicFragmentCounter {
  position:fixed;
  right:max(10px,calc((100vw - 520px)/2 + 10px));
  bottom:calc(118px + env(safe-area-inset-bottom));
  z-index:19;
  display:none;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(147,197,253,.7);
  box-shadow:0 0 14px rgba(56,189,248,.35);
  font-weight:1000;
  color:#bfdbfe;
  letter-spacing:1px;
  white-space:nowrap;
  pointer-events:none;
  line-height:1;
  font-size:15px
}
.mythicFragments {
  font-weight:900;
  color:#93c5fd;
  letter-spacing:1px;
  white-space:nowrap
}
.coolNum {
  display:block;
  font-size:10px;
  color:#fff7ed;
  font-weight:900;
  margin-top:2px
}
.cost {
  display:block;
  font-size:10px;
  color:#9fcaff;
  font-weight:700;
  margin-top:2px
}
.cost.hpCost {
  color:#ff5b68
}
.utility {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:7px;
  margin-top:7px
}
.utility button {
  min-height:38px;
  font-size:12px;
  background:linear-gradient(180deg,#3b2f63,#1c1732)
}
.slidePanel {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  max-width:520px;
  max-height:70dvh;
  overflow:auto;
  background:linear-gradient(180deg,#202842,#121624);
  border:1px solid rgba(255,255,255,.14);
  border-bottom:0;
  border-radius:20px 20px 0 0;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  z-index:30;
  box-shadow:0 -18px 50px rgba(0,0,0,.45);
  display:none
}
#talentPanel {
  padding-bottom:0;
  z-index:60
}
#traitPanel {
  z-index:40;
  bottom:130px;
  border-radius:20px;
  margin-bottom:8px;
}
.slidePanel.show {
  display:block
}
.panelHead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px
}
.panelHead h2 {
  margin:0;
  font-size:16px
}
.panelHead button {
  min-height:auto;
  padding:8px 12px;
  font-size:12px
}
.panelActions {
  display:flex;
  gap:6px;
  align-items:center
}
.panelHead .traitUndoBtn {
  background:linear-gradient(180deg,rgba(255,91,104,.92),rgba(185,28,28,.72)),linear-gradient(180deg,#2d3758,#1b2238);
  border-color:rgba(255,145,155,.45);
  box-shadow:0 7px 18px rgba(127,29,29,.22)
}
.panelBlock {
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:9px;
  margin-bottom:8px
}
.panelBlock h3 {
  font-size:13px;
  margin:0 0 5px
}
.spellDesc {
  font-size:11px;
  line-height:1.3;
  color:var(--muted);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:7px;
  margin:0 0 8px
}
.choices {
  display:grid;
  gap:6px
}
.choice {
  display:grid;
  grid-template-columns:22px 1fr;
  gap:7px;
  text-align:left;
  align-items:start;
  min-height:auto;
  padding:8px;
  border-radius:13px;
  background:rgba(255,255,255,.07);
  box-shadow:none;
  font-size:11px;
  font-weight:750
}
.choice.active {
  outline:2px solid var(--gold);
  background:rgba(255,209,102,.14)
}
.choice.ultimateChoice {
  grid-template-columns:28px 1fr;
  background:linear-gradient(135deg,rgba(76,29,149,.32),rgba(17,24,39,.75));
  border-color:rgba(167,139,250,.45);
  box-shadow:inset 0 0 18px rgba(167,139,250,.12)
}
.ultimateBadge {
  display:inline-block;
  margin-bottom:3px;
  color:#a78bfa;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase
}
.ultimateBlock {
  border-color:rgba(167,139,250,.32);
  background:rgba(49,46,129,.18)
}
.choice.locked {
  opacity:.45;
  filter:grayscale(.6)
}
.spellVariantPair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.spellGroupHeader {
  grid-column:1/-1;
  background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(167,139,250,.13));
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;
  padding:10px
}
.spellGroupHeader h3 {
  margin:0 0 5px;
  font-size:14px
}
.spellGroupHeader .spellDesc {
  margin:0
}
.spellVariantPair .spellDesc {
  font-size:11px;
  line-height:1.3
}
.spellVariantBlock {
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px
}
.talentPanelHeader {
  position:sticky;
  top:0;
  z-index:5;
  background:#121624;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:9px;
  margin-bottom:8px
}
.footerActions {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  position:sticky;
  bottom:0;
  padding:9px 10px calc(10px + env(safe-area-inset-bottom));
  margin:8px -10px 0 -10px;
  z-index:5;
  background:#121624;
  border:1px solid rgba(255,255,255,.09);
  border-radius:0
}
.footerActions button {
  min-height:auto;
  padding:8px 12px;
  font-size:12px
}
.levelBadge {
  display:inline-block;
  margin-left:6px;
  color:var(--gold);
  font-size:10px;
  font-weight:900
}
.choice small {
  display:block;
  color:var(--muted);
  font-weight:650;
  margin-top:2px;
  line-height:1.2
}
.dot {
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  margin-top:2px
}
.choice.active .dot {
  background:var(--gold);
  border-color:var(--gold)
}
.classIcon {
  font-size:20px
}
.classDesc small {
  display:block
}
.tag {
  font-size:10px;
  color:var(--gold);
  margin-left:6px
}
.roleSwapBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  width:auto;
  min-height:0;
  padding:6px 10px;
  border-radius:9px;
  border:1px solid rgba(96,165,250,.36);
  background:linear-gradient(180deg,rgba(59,130,246,.22),rgba(30,41,59,.38));
  color:#dbeafe;
  font-size:10px;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.16)
}
.roleStatusText {
  font-size:10px;
  color:var(--gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:nowrap
}
.bigMsg {
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  text-align:center;
  background:rgba(5,7,12,.82);
  z-index:20;
  padding:20px
}
.bigMsg.show {
  display:grid
}
.modal {
  background:#171d30;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  width:min(100%,480px)
}
.modal h1 {
  margin:0 0 8px;
  font-size:24px
}
.modal p {
  color:var(--muted);
  font-size:14px
}
.modal button {
  font-size:14px;
  padding:12px 18px;
  min-height:auto
}
.classChoices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px
}
.classChoices button {
  text-align:left;
  min-height:74px
}
.classChoices small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
  line-height:1.2
}
.versionTag {
  font-size:10px;
  color:var(--muted);
  font-weight:800;
  margin-left:4px
}
.settingsBtn {
  min-height:auto;
  padding:6px 8px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,.08);
  box-shadow:none;
  border:1px solid rgba(255,255,255,.12)
}
.titleRow {
  display:flex;
  align-items:center;
  gap:6px
}
.rangeRow {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center
}
.rangeRow input {
  width:100%;
  accent-color:#ffd166
}
.difficultyValue {
  font-size:22px;
  color:var(--gold);
  font-weight:900;
  text-align:center
}
.settingsNote {
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
  margin-top:8px
}
.developerToggleRow {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px
}
.developerModeToggle,
.developerMiniButton {
  min-height:auto;
  padding:8px 12px;
  font-size:12px;
  border-radius:999px;
  background:linear-gradient(180deg,#4b5563,#1f2937);
  box-shadow:0 2px 0 #0a0d16
}
.developerModeToggle.active {
  background:linear-gradient(180deg,#dc2626,#7f1d1d);
  color:#fff;
  border:1px solid rgba(255,255,255,.2)
}
.developerExportPanel {
  display:grid;
  gap:7px;
  margin-top:8px
}
.developerNotesTextarea {
  width:100%;
  min-height:120px;
  resize:vertical;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--text);
  padding:8px;
  font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.35
}
.developerList {
  display:grid;
  gap:8px;
  margin-top:8px
}
.developerGroup {
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:8px
}
.developerGroup h4 {
  margin:0 0 6px;
  font-size:12px;
  color:var(--gold)
}
.developerTalentRow {
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:7px;
  align-items:start;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.07)
}
.developerTalentRow:first-of-type {
  border-top:0
}
.developerTalentName {
  font-weight:850;
  font-size:11px
}
.developerTalentDesc {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  line-height:1.25
}
.developerSavedNote {
  display:block;
  margin-top:4px;
  color:#fecaca;
  font-size:10px;
  font-weight:800;
  line-height:1.25
}
.developerSuggestionRow {
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:7px;
  align-items:start;
  padding:7px 0;
  border-top:1px solid rgba(248,113,113,.18);
  background:rgba(220,38,38,.045)
}
.developerSuggestionLabel {
  display:inline-block;
  color:#fecaca;
  font-size:10px;
  font-weight:900;
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:.45px
}
.developerAddSuggestion {
  width:100%;
  min-height:auto;
  padding:8px 10px;
  margin-top:7px;
  border-radius:12px;
  font-size:11px;
  text-align:left;
  background:rgba(255,255,255,.07);
  border:1px dashed rgba(248,113,113,.45);
  color:#fecaca;
  box-shadow:none
}
.developerDeleteSuggestion {
  display:inline-grid;
  place-items:center;
  min-height:auto;
  min-width:30px;
  padding:5px 7px;
  margin-top:5px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background:rgba(0,0,0,.22);
  color:#fecaca;
  border:1px solid rgba(248,113,113,.28);
  box-shadow:none;
  cursor:pointer
}
.developerPencil {
  display:inline-grid;
  place-items:center;
  min-height:auto;
  min-width:30px;
  padding:5px 7px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background:rgba(220,38,38,.22);
  color:#fecaca;
  border:1px solid rgba(248,113,113,.35);
  box-shadow:none;
  cursor:pointer
}
.choice.devChoice {
  grid-template-columns:22px 1fr auto
}
.choice.devChoice .developerPencil {
  align-self:center
}
.bossBadge {
  position:absolute;
  left:6px;
  top:6px;
  z-index:3;
  font-size:15px;
  background:rgba(255,209,102,.16);
  border:1px solid rgba(255,209,102,.5);
  border-radius:999px;
  padding:1px 5px
}
.detailsBtn {
  position:absolute;
  right:6px;
  top:6px;
  z-index:3;
  min-height:auto;
  padding:3px 6px;
  border-radius:999px;
  font-size:9px;
  line-height:1;
  background:rgba(0,0,0,.48);
  box-shadow:none;
  border:1px solid rgba(255,255,255,.18);
  color:#dbe3ff
}
.portrait {
  margin-top:13px
}
.detailGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:8px 0
}
.detailCell {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:7px;
  font-size:11px
}
.detailCell b {
  display:block;
  color:var(--gold);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:2px
}
.effectList {
  display:grid;
  gap:6px;
  margin-top:8px
}
.effectItem {
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:7px;
  font-size:11px;
  line-height:1.25
}
.effectItem b {
  color:#fff
}
.muted {
  color:var(--muted)
}
.summonRow {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(42px,1fr));
  gap:4px;
  align-items:start
}
.unitGroup.summonerHasSummons {
  gap:0
}
.unitGroup.summonerHasSummons .summonRow {
  position:relative;
  margin:-1px 0 0;
  padding:5px 5px 6px;
  border:1px solid rgba(167,139,250,.28);
  border-top:0;
  border-radius:0 0 15px 15px;
  background:rgba(39,16,67,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
.unitGroup.summonerHasSummons .summonRow::before {
  content:'';
  position:absolute;
  left:24px;
  top:0;
  width:20px;
  height:10px;
  border-left:2px solid rgba(167,139,250,.45);
  border-bottom:2px solid rgba(167,139,250,.45);
  border-radius:0 0 0 8px
}
.summonMini {
  position:relative;
  min-height:54px;
  border-radius:12px;
  padding:5px;
  background:rgba(88,28,135,.24);
  border:1px solid rgba(167,139,250,.28);
  font-size:10px;
  overflow:hidden
}
.unitGroup.summonerHasSummons .summonMini {
  min-height:48px;
  background:rgba(88,28,135,.22);
  border-color:rgba(196,181,253,.30)
}
.summonMini.selected {
  outline:2px solid var(--gold)
}
.summonMini .miniTop {
  display:flex;
  gap:4px;
  align-items:center;
  min-width:0
}
.summonMini .miniIcon {
  font-size:17px
}
.summonMini .miniName {
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.summonMini .detailsBtn {
  top:3px;
  right:3px;
  font-size:8px;
  padding:2px 4px
}
.summonMini .bar {
  height:7px;
  margin-top:4px
}
.summonMini .numbers {
  font-size:9px
}
.summonMini.seedlingMini {
  display:grid;
  place-items:center;
  min-height:42px;
  height:42px;
  max-width:48px;
  aspect-ratio:1;
  justify-self:center;
  padding:0
}
.summonMini.seedlingMini .seedlingIcon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(52,211,153,.25),rgba(21,128,61,.20));
  border:1px solid rgba(134,239,172,.44);
  font-size:24px;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 5px 12px rgba(5,46,22,.22)
}
.seedlingFlyAnim {
  position:fixed;
  left:var(--sx);
  top:var(--sy);
  z-index:9999;
  pointer-events:none;
  font-size:25px;
  filter:drop-shadow(0 5px 10px rgba(52,211,153,.45));
  animation:seedlingFly .78s cubic-bezier(.18,.78,.24,1) forwards
}
@keyframes seedlingFly {
  0% {opacity:1;transform:translate(-50%,-50%) scale(.95) rotate(0deg)}
  28% {opacity:1;transform:translate(calc(var(--dx) * .22 - 8px),calc(var(--dy) * .18 - 32px)) scale(1.2) rotate(-12deg)}
  70% {opacity:1;transform:translate(calc(var(--dx) * .78 + 10px),calc(var(--dy) * .72 - 14px)) scale(1.05) rotate(14deg)}
  100% {opacity:0;transform:translate(var(--dx),var(--dy)) scale(.28) rotate(30deg)}
}
.summonerHasSummons {
  border-color:rgba(167,139,250,.32)
}
.ascendedPriest {
  background:linear-gradient(145deg,rgba(255,215,0,.42),rgba(180,83,9,.30));
  border-color:rgba(255,215,0,.75);
  box-shadow:0 0 18px rgba(255,215,0,.35)
}
/* Mobile party planner layout */
#overlay.plannerOverlay {
  align-items:stretch;
  overflow:hidden;
  padding:10px;
}
#overlay.plannerOverlay .modal {
  height:calc(100dvh - 20px);
  max-height:calc(100dvh - 20px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:14px;
}
#overlay.plannerOverlay #classSelectButtons {
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:2px 2px 90px;
  display:grid;
  gap:10px;
  margin-top:6px;
}
#overlay.plannerOverlay .modal h1 {
  overflow-wrap:break-word;
  word-break:break-word;
}
#overlay.plannerOverlay #endText {
  margin:4px 0 8px;
  flex:0 0 auto;
  overflow-wrap:break-word;
  word-break:break-word;
}
#overlay.plannerOverlay .panelBlock {
  margin:0;
}
#overlay.plannerOverlay .panelBlock .choices {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#overlay.plannerOverlay .choice {
  grid-template-columns:1fr;
  text-align:center;
  min-height:118px;
  padding:9px;
  align-content:start;
}
#overlay.plannerOverlay .choice b {
  overflow-wrap:break-word;
  word-break:break-word;
}
#overlay.plannerOverlay .classIcon {
  font-size:26px;
  display:block;
  margin-bottom:3px;
}
#overlay.plannerOverlay .choice small {
  font-size:10px;
  line-height:1.22;
}
#overlay.plannerOverlay .classPick {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:110px;
  padding:14px 10px;
  border-radius:16px;
  font-size:12px;
  font-weight:750;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  gap:6px;
}
#overlay.plannerOverlay .classPick .classPickHead {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
#overlay.plannerOverlay .classPick .classIcon {
  font-size:32px;
  display:block;
}
#overlay.plannerOverlay .classPick .classPickName {
  font-size:14px;
}
#overlay.plannerOverlay .classPick small {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:650;
  line-height:1.3;
}
#overlay.plannerOverlay .classPick.priest {
  background:linear-gradient(180deg,rgba(253,230,138,.18),rgba(124,45,18,.12));
  border-color:rgba(253,230,138,.25);
}
#overlay.plannerOverlay .classPick.oracle {
  background:linear-gradient(180deg,rgba(124,58,237,.18),rgba(17,24,39,.12));
  border-color:rgba(124,58,237,.25);
}
#overlay.plannerOverlay .classPick.druid {
  background:linear-gradient(180deg,rgba(34,197,94,.18),rgba(20,83,45,.12));
  border-color:rgba(34,197,94,.25);
}
#overlay.plannerOverlay .classPick.mystic {
  background:linear-gradient(180deg,rgba(56,189,248,.18),rgba(49,46,129,.12));
  border-color:rgba(56,189,248,.25);
}
#overlay.plannerOverlay #endButton {
  position:sticky;
  bottom:0;
  z-index:4;
  width:100%;
  margin-top:8px;
  flex:0 0 auto;
  background:linear-gradient(180deg,#facc15,#b45309);
  color:#14100a;
  box-shadow:0 3px 0 #4a2504;
}
@media(max-width:430px) {
  #overlay.plannerOverlay .panelBlock .choices {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .modal h1 {
    font-size:21px
  }
  #overlay.plannerOverlay .panelBlock h3 {
    font-size:12px;
    margin-bottom:6px
  }
}
@media(max-width:340px) {
  #overlay.plannerOverlay .panelBlock .choices {
    grid-template-columns:1fr;
  }
}
@media(max-height:680px) {
  body {
    overflow-x:hidden;
    overflow-y:auto
  }
  #game {
    height:auto;
    min-height:100dvh;
    padding-bottom:calc(184px + env(safe-area-inset-bottom))
  }
  html body #game .card {
    min-height:92px!important
  }
  .portrait {
    width:42px;
    height:42px;
    font-size:24px
  }
  .portraitWrap {
    width:42px;
    height:42px
  }
  .card {
    grid-template-columns:42px 1fr
  }
  html body #game .card.allyTile {
    height:auto!important;
    min-height:92px!important;
    max-height:none!important
  }
  #log {
    height:66px
  }
  .spells button {
    min-height:50px;
    font-size:10px
  }
  html body #controls .spellButton {
    height:auto!important;
    min-height:76px!important
  }
  html body #overlay.bigMsg {
    position:fixed
  }
  .slidePanel {
    max-height:65dvh
  }
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:3px
}

@media(prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
  .spellButton.castActivated,
  .card.castSource,
  .card.castImpact {
    transform:none!important
  }
  .spellButton.castActivated {
    filter:brightness(1.2) saturate(1.08)!important
  }
  .spellButton.castActivated::before,
  .castTravelFx,
  .combatFloater {
    opacity:0!important
  }
  .spellButton .cooldownProgress,
  .spellButton .cdFill {
    transform:scaleX(var(--ma-cooldown-progress,0))!important
  }
}
.spellButton.ascended {
  box-shadow:0 0 14px rgba(255,215,0,.35),0 3px 0 #0a0d16;
  border:1px solid rgba(255,215,0,.5);
  background:linear-gradient(180deg,rgba(255,215,0,.15),#2d3758);
}
.pairedSkillGroup {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.pairedSkillGroup .panelBlock {
  margin:0;
}
@media(max-width:620px) {
  .pairedSkillGroup {
    grid-template-columns:1fr;
  }
}
.summonDockRow {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  align-items:stretch;
}
.summonDockRow.summonSpanHalfRow {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.summonMini.summonSpan3 {
  grid-column:span 3;
}
.summonMini.summonSpanHalf,
.summonMini.summonSpan1 {
  grid-column:span 1;
}