/* PrisonBall Player — match player cards
 * The mugshot cards, stamina rings, action labels and hit/slide/injury
 * animations from PrisonBaLL Manager, so both games feel the same on the pitch.
 * Extracted from the manager game's match overlay layer.
 */

#match-shell{position:relative}
#match-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden;
}
/* The ball gets its own canvas ABOVE the card layer. Drawing it later inside
   the engine's canvas cannot help: #match-overlay covers the whole canvas, so
   any face standing over the ball hid it completely. */
#match-ball-layer{
  position:absolute; inset:0; pointer-events:none; z-index:5;
}
/* The card is anchored on the FACE, not on the stack of labels around it. Its
   box carries no height, so translate(-50%,-50%) puts its origin exactly on the
   inmate's world point and every part is placed around that point.
   As a flow column the whole stack was centred as one unit — and since the
   action label collapses when it is empty, the stack changed height whenever
   BALL/CHASE came and went, so the face drifted up and down over the man it
   belongs to and sat high enough to cover his name. */
.sim-player-card{
  position:absolute; width:88px; height:0; transform:translate(-50%,-50%);
  text-align:center; font-family:var(--font-mono); font-size: 11px; color:var(--text-bright);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.sim-face-wrap{
  width:48px; height:48px; position:absolute; left:50%; top:0;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
}
.sim-player-face{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.4);
  transition: filter .4s, border-color .25s, box-shadow .25s;
  position:relative; z-index:2;
}
/* ── Slide tackle speed streaks: trails behind the charging defender ── */
.sim-slide-streaks{
  position:absolute; inset:-6px; pointer-events:none; z-index:0; opacity:0;
}
.sim-slide-streaks.active{ opacity:1; }
.sim-slide-streak{
  position:absolute; border-radius:2px;
  background:linear-gradient(to right, rgba(255,200,60,0.7), rgba(255,200,60,0));
  height:3.5px; transform-origin:left center;
}
.sim-player-face.ko{ filter:grayscale(1) brightness(.55) !important; }
.sim-stamina-ring{
  position:absolute; inset:0; width:48px; height:48px;
  transform:rotate(-90deg); overflow:visible; pointer-events:none; z-index:1;
}
.sim-stamina-track, .sim-stamina-fill, .sim-endurance-fill{
  fill:none; stroke-width:3; transform-origin:24px 24px;
  stroke-linecap:round; transition:stroke-dashoffset .3s, opacity .25s, stroke .25s;
}
.sim-stamina-track{ opacity:.08; }
.sim-endurance-fill{ stroke-dasharray:131.95 131.95; stroke-dashoffset:0; }
.sim-stamina-fill{ stroke-dasharray:131.95 131.95; stroke-dashoffset:0; }
/* ── Catch reach ✋: shown when ball brushes player's radius (success or fail) ── */
.sim-catch-hand{
  position:absolute; left:4px; top:50%;
  transform:translate(-50%,-50%) scale(0.85);
  font-size:22px; line-height:1; pointer-events:none;
  opacity:0; z-index:5;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
  transition: opacity 0.10s linear;
}
.sim-catch-hand.visible{ opacity:1; }
.sim-catch-hand.catch-success{
  filter: drop-shadow(0 0 8px rgba(60,255,150,0.95)) drop-shadow(0 0 12px rgba(60,255,150,0.55));
}
.sim-catch-hand.catch-fail{
  filter: drop-shadow(0 0 7px rgba(255,80,80,0.90)) drop-shadow(0 0 10px rgba(255,80,80,0.50));
}
/* ── Fight 🤜: shown when player is in a brawl/brutal hit ── */
.sim-fight-fist{
  position:absolute; right:4px; top:50%;
  transform:translate(50%,-50%) scale(0.85);
  font-size:22px; line-height:1; pointer-events:none;
  opacity:0; z-index:5;
  filter: drop-shadow(0 0 7px rgba(255,140,40,0.90)) drop-shadow(0 0 10px rgba(255,80,40,0.55));
  transition: opacity 0.10s linear;
}
.sim-fight-fist.visible{ opacity:1; }
/* ── Slide 🦶: shown when player is sliding/tackling ── */
.sim-slide-foot{
  position:absolute; right:0; bottom:0;
  transform:translate(35%,30%) scale(0.95);
  font-size:24px; line-height:1; pointer-events:none;
  opacity:0; z-index:6;
  filter: drop-shadow(0 0 7px rgba(255,194,0,0.95)) drop-shadow(0 0 12px rgba(255,140,0,0.65));
  transition: opacity 0.08s linear;
}
.sim-slide-foot.visible{ opacity:1; }
/* ── Injury tiers: blood splatter on mugshot + limp jitter on movement ── */
.sim-player-card .sim-blood-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4;
  border-radius:50%; mix-blend-mode:multiply;
  transition: opacity 0.30s ease-out;
  background:
    radial-gradient(circle at 30% 25%, rgba(180,8,8,0.95) 0%, rgba(180,8,8,0) 14%),
    radial-gradient(circle at 68% 35%, rgba(150,5,5,0.85) 0%, rgba(150,5,5,0) 11%),
    radial-gradient(circle at 22% 62%, rgba(130,4,4,0.80) 0%, rgba(130,4,4,0) 9%),
    radial-gradient(circle at 55% 70%, rgba(170,8,8,0.90) 0%, rgba(170,8,8,0) 13%),
    radial-gradient(circle at 78% 78%, rgba(110,3,3,0.75) 0%, rgba(110,3,3,0) 10%);
}
.sim-player-card.injury-tier-1 .sim-blood-overlay{ opacity:0.55; }
.sim-player-card.injury-tier-2 .sim-blood-overlay{
  opacity:0.85;
  filter: saturate(1.2) brightness(0.92);
}
.sim-player-card.injury-tier-3 .sim-blood-overlay{
  opacity:1;
  filter: saturate(1.4) brightness(0.78) contrast(1.1);
  background:
    radial-gradient(circle at 30% 25%, rgba(120,2,2,1) 0%, rgba(120,2,2,0) 18%),
    radial-gradient(circle at 68% 35%, rgba(95,2,2,0.95) 0%, rgba(95,2,2,0) 16%),
    radial-gradient(circle at 22% 62%, rgba(85,2,2,0.92) 0%, rgba(85,2,2,0) 14%),
    radial-gradient(circle at 55% 70%, rgba(110,3,3,1) 0%, rgba(110,3,3,0) 18%),
    radial-gradient(circle at 78% 78%, rgba(75,1,1,0.90) 0%, rgba(75,1,1,0) 15%),
    radial-gradient(circle at 45% 50%, rgba(60,1,1,0.55) 0%, rgba(60,1,1,0) 22%);
}
.sim-player-card.injury-tier-3 .sim-player-face{
  filter: saturate(0.65) brightness(0.78) contrast(1.05);
}
.sim-player-card.injury-tier-2 .sim-player-face{
  filter: saturate(0.82) brightness(0.90);
}
/* The face wrap is centred on the inmate's point with translate(-50%,-50%) —
   every keyframe has to carry that, or a limping man's face jumps off him. */
@keyframes limpWobbleLight{
  0%,100% { transform: translate(-50%,-50%) rotate(0deg) translateX(0); }
  50%     { transform: translate(-50%,-50%) rotate(-1.5deg) translateX(-0.5px); }
}
@keyframes limpWobbleHeavy{
  0%   { transform: translate(-50%,-50%) rotate(-2deg) translateX(-1px) translateY(0); }
  40%  { transform: translate(-50%,-50%) rotate(2deg)  translateX( 1px) translateY(-0.5px); }
  80%  { transform: translate(-50%,-50%) rotate(-1deg) translateX(-0.5px) translateY(0.3px); }
  100% { transform: translate(-50%,-50%) rotate(-2deg) translateX(-1px) translateY(0); }
}
.sim-player-card.injury-tier-2 .sim-face-wrap{ animation: limpWobbleLight 0.55s ease-in-out infinite; }
.sim-player-card.injury-tier-3 .sim-face-wrap{ animation: limpWobbleHeavy 0.42s ease-in-out infinite; }
/* ── Parry 👐: shown when keeper parries — bottom of face, ABOVE the name ── */
.sim-parry-hands{
  position:absolute; left:50%; bottom:2px;
  transform:translate(-50%,0) scale(0.85);
  font-size:22px; line-height:1; pointer-events:none;
  opacity:0; z-index:5;
  filter: drop-shadow(0 0 8px rgba(120,200,255,0.95)) drop-shadow(0 0 12px rgba(80,160,255,0.55));
  transition: opacity 0.10s linear;
}
.sim-parry-hands.visible{ opacity:1; }
/* Name under the chin, archetype under the name, action label over the head —
   all measured from the face's centre point, so nothing moves when a label
   appears or clears. */
.sim-player-name{position:absolute; left:0; right:0; top:26px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Archetype marker — sits under the name. Deliberately small and low contrast:
   it is an identity cue you read when you look for it, not a label competing
   with the action text. Colour is set inline from the quadrant. Only your own
   crew gets one — you do not know what the other seven are. */
.sim-archetype{position:absolute; left:0; right:0; top:39px;
  font-size:8px; letter-spacing:1px; font-family:var(--font-head);
  opacity:0.8; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.95)}
.sim-player-action{
  position:absolute; left:0; right:0; bottom:28px;
  font-size: 11px; font-weight:700; letter-spacing:0.5px;
  color:var(--cyan); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  animation: actionPulseUp 0.45s ease-out;
}
.sim-player-action.ko-label{ color:#ff3355 !important; font-weight:700; letter-spacing:1px; }
@keyframes actionPulseUp {
  0%   { opacity:0; transform:translateY(6px) scale(0.85); }
  40%  { opacity:1; transform:translateY(-2px) scale(1.08); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.sim-player-action.action-tackle{ color:#ffc200 !important; }
.sim-player-action.action-slide{ color:#ffc200 !important; text-shadow:0 0 8px rgba(255,194,0,0.6); }
.sim-player-action.action-steal{ color:#00ff88 !important; }
.sim-player-action.action-beat{ color:#00ff88 !important; }
.sim-player-action.action-hit{ color:#ff5e5e !important; }
.sim-player-action.action-shot{ color:#ff7700 !important; }
.sim-player-action.action-burst{ color:#47b0ff !important; }

/* ── The tactic banner ───────────────────────────────────────────────────
   Fires when one of the coach's tactics triggers (js/tactics.js). It sits
   inside #match-shell rather than over the HUD so it reads as something the
   crew did on the pitch. z-index 6 puts it above the ball layer (5) — a
   tactic firing is worth covering the ball for a second and a half. */
.tactic-banner{
  position:absolute; left:50%; top:14px; transform:translate(-50%,-14px);
  z-index:6; pointer-events:none;
  display:flex; align-items:baseline; gap:10px;
  padding:7px 16px; border-radius:6px;
  background:rgba(3,3,10,.88); border:1px solid var(--border);
  font-family:var(--font-head); font-size:13px; letter-spacing:2px;
  opacity:0; transition:opacity .18s ease, transform .18s ease;
}
.tactic-banner span{ font-family:var(--font-mono); font-size:10px; letter-spacing:1px; }
.tactic-banner.show{ opacity:1; transform:translate(-50%,0); }
.tactic-banner.fam-defensive{ color:#47b0ff; border-color:rgba(71,176,255,.55); }
.tactic-banner.fam-center{    color:#00ff88; border-color:rgba(0,255,136,.55); }
.tactic-banner.fam-offensive{ color:#ff7700; border-color:rgba(255,119,0,.55); }
.tactic-banner.perfect{ box-shadow:0 0 22px currentColor; }