/* Living creatures. On the battlefield a creature is a figure standing on the ground, sized by its current Strength:
   a Strength 2 goblin stands at 85% and a Strength 6 dragon at 145%. The Cards setting brings back uniform card-shaped pieces. */

/* Figures share a ground line, so the larger ones tower over their neighbours. */
/* Safe alignment keeps tall figures' overflow measurable, so the field shrinks every figure together instead of clipping heads. */
body:not([data-creature-style=cards]) .creatures{align-items:safe flex-end!important}
body:not([data-creature-style=cards]) .unit:has(.piece--creature){width:auto!important;height:auto!important;flex:0 0 auto!important}
body:not([data-creature-style=cards]) .piece--unit.piece--creature{height:auto;justify-content:flex-end}
/* Battlefield camera: both fields share one zoom (--board-zoom, set by creatures.js) that pulls in when few, small
   creatures are out and pulls back as more or larger ones arrive. Within that view each figure keeps its Strength size. */
body:not([data-creature-style=cards]) .creatures{flex-wrap:nowrap!important}
body:not([data-creature-style=cards]) .unit:has(.piece--creature){min-width:0}
/* A crowded field can use two ranks while keeping the original button and tab order.
   Intrinsic columns accommodate different Strength sizes and center each pair of units. */
body:not([data-creature-style=cards]) .creatures[data-ranks="2"]{
  display:grid!important;grid-template-columns:repeat(var(--rank-columns),max-content);
  grid-template-rows:repeat(2,max-content);align-content:safe center;justify-content:safe center;
  justify-items:center;column-gap:clamp(3px,1vw,12px);row-gap:clamp(4px,1vh,10px);
  padding-block:clamp(6px,1vh,10px)!important;
}
.creatures[data-ranks="2"]>.unit{position:relative;left:-18px}
.creatures[data-ranks="2"]>.unit[data-second-rank]{left:18px}
@media (pointer:coarse){
  .creatures[data-camera]{--hit-size:var(--target-1,0px)}
  body:not([data-creature-style=cards]) .creatures[data-ranks="2"]{--hit-size:var(--target-2,0px);column-gap:4px;padding-inline:8px!important}
  body:not([data-creature-style=cards]) .creatures[data-camera][data-touch-targets]>.unit{
    min-width:calc(var(--hit-size) / var(--board-zoom,1))!important;
    min-height:calc(var(--hit-size) / var(--board-zoom,1))!important;
  }
}
/* Every permanent on a field moves with the camera; artifacts and enchantments keep their usual size within it. */
body:not([data-creature-style=cards]) .creatures[data-camera]>*{zoom:var(--board-zoom,1)}
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-visual{width:calc(104px*var(--size,1));height:calc(104px*var(--size,1))}

/* No medallion: the figure stands on a soft shadow and glow; the damage ring lies flat on the ground at its feet. */
body:not([data-creature-style=cards]) .piece--unit.piece--creature .has-cutout .piece-portrait{display:none}
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-aura{inset:auto -8% -4% -8%;height:38%;background:radial-gradient(ellipse 50% 50%,#020a10b3,#020a1055 45%,transparent 72%),radial-gradient(ellipse 50% 50%,var(--piece-glow),transparent 75%);filter:blur(4px)}
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-cutout{left:-16%;width:132%;height:128%;bottom:2%;/* Feet fade into the ground; any edge the illustration cropped fades out too. */-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 14%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(0deg,transparent 0,#000 14%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent);mask-composite:intersect;transform-origin:50% 100%}
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-resistance{inset:auto 10% -2% 10%;width:80%;height:20%;transform:none;z-index:1;display:none}
body:not([data-creature-style=cards]) .piece--unit.piece--creature:has(.piece-damage) .piece-resistance{display:block}
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-resistance circle{stroke-width:2.4}
/* Without a cut-out figure, the painting dissolves into the arena instead of sitting in a frame. */
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-visual:not(.has-cutout) .piece-portrait{inset:-6% -10% 4%;border:0;border-radius:0;background:none;box-shadow:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 52%,transparent 100%)}
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-visual:not(.has-cutout) .piece-portrait::after{display:none}
body:not([data-creature-style=cards]) .piece--unit.piece--creature .piece-visual:not(.has-cutout) .dr-art{object-position:50% 35%!important}

/* Selection and hover light the figure itself. */
body:not([data-creature-style=cards]) .piece--creature.piece--selected .piece-cutout,
body:not([data-creature-style=cards]) .piece--creature.piece--selected .piece-visual:not(.has-cutout) .piece-portrait{filter:drop-shadow(0 0 3px #ffd176) drop-shadow(0 0 14px #ffbf4599)}
body:not([data-creature-style=cards]) .piece--creature.piece--selected .piece-aura{background:radial-gradient(ellipse 50% 50%,#ffcf6a66,transparent 72%)}

/* Alive: figures breathe; fliers hover above their shadow. Exhausted creatures slump and hold still. */
@keyframes creature-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.2%) scale(1.012,1.018)}}
@keyframes creature-hover{0%,100%{transform:translateY(-7%)}50%{transform:translateY(-12%)}}
@keyframes creature-shadow{0%,100%{transform:scale(.86);opacity:.75}50%{transform:scale(.78);opacity:.6}}
body:not([data-creature-style=cards]) .piece--creature:not(.piece--exhausted) .piece-cutout{animation:creature-breathe 3.8s ease-in-out var(--idle,0s) infinite}
body:not([data-creature-style=cards]) .piece--creature.piece--flying:not(.piece--exhausted) .piece-cutout,
body:not([data-creature-style=cards]) .piece--creature.piece--flying:not(.piece--exhausted) .piece-visual:not(.has-cutout) .piece-portrait{animation:creature-hover 3.2s ease-in-out var(--idle,0s) infinite}
body:not([data-creature-style=cards]) .piece--creature.piece--flying:not(.piece--exhausted) .piece-aura{animation:creature-shadow 3.2s ease-in-out var(--idle,0s) infinite}
body:not([data-creature-style=cards]) .piece--creature.piece--exhausted .piece-cutout{transform:rotate(-5deg) translateY(3%)}
body:not([data-creature-style=cards]) .unit:hover .piece--creature .piece-cutout{animation-play-state:paused}

/* Cards setting: every creature is the same card-shaped piece with its full art. */
body[data-creature-style=cards] .piece--unit.piece--creature .piece-visual{width:calc(var(--unit,146px)*.78);height:calc(var(--unit,146px)*.98)}
body[data-creature-style=cards] .piece--unit.piece--creature .piece-portrait{inset:0;border-radius:10px;border:1px solid var(--piece-accent);box-shadow:0 6px 16px #02101b88}
body[data-creature-style=cards] .piece--unit.piece--creature .piece-portrait>.dr-art{opacity:1!important;filter:none!important;object-position:50% 20%!important}
body[data-creature-style=cards] .piece--unit.piece--creature .piece-cutout,
body[data-creature-style=cards] .piece--unit.piece--creature .piece-resistance{display:none}
body[data-creature-style=cards] .piece--creature.piece--selected .piece-portrait{border-color:#ffcb69;box-shadow:0 0 0 2px #ffd17666,0 0 26px #ffbf4540}

@media(prefers-reduced-motion:reduce){
  body .piece--creature .piece-cutout,body .piece--creature .piece-portrait,body .piece--creature .piece-aura{animation:none!important}
}