/* Arena Core 0.5.3 — Recovery UI Pack 003: hero portrait and combat HUD */
:root{
  --ui003-blue:#68c3ff;
  --ui003-purple:#a86cff;
  --ui003-green:#63e3ad;
  --ui003-gold:#f0c96c;
  --ui003-line:#2f4b67;
  --ui003-surface:#0a1726;
}

/* Player card: use the original high-resolution GitHub art without blur. */
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card.ui003-player-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
  padding:11px;
  overflow:hidden;
  border-color:#31506f;
  background:
    radial-gradient(circle at 50% 0,rgba(83,160,220,.14),transparent 38%),
    linear-gradient(180deg,#101d2e,#07111d);
  box-shadow:inset 0 0 0 1px rgba(104,195,255,.035),0 16px 38px rgba(0,0,0,.36);
}
html.ui002-touch-layout #player-combat-card .fighter{
  display:block;
  min-width:0;
}
.ui003-player-portrait-frame{
  position:relative;
  width:100%;
  height:286px;
  overflow:hidden;
  border:1px solid rgba(121,196,249,.22);
  border-radius:16px;
  background:linear-gradient(180deg,#121d2a,#080e16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 13px 30px rgba(0,0,0,.32);
}
.ui003-player-portrait-frame:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(154,211,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(5,10,16,.02) 0,rgba(5,10,16,.08) 42%,rgba(4,8,14,.88) 100%);
}
.ui003-player-portrait-frame:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 34px rgba(69,157,222,.08);
}
.ui003-player-portrait-img{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 18%;
  filter:none!important;
  image-rendering:auto;
  transform:none!important;
}
.ui003-player-portrait-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:none;
  place-items:center;
  font-size:64px;
  background:radial-gradient(circle,#203b58,#0a111c 70%);
}
.ui003-player-portrait-frame.image-failed .ui003-player-portrait-img{display:none}
.ui003-player-portrait-frame.image-failed .ui003-player-portrait-fallback{display:grid}
.ui003-player-chip{
  position:absolute;
  z-index:4;
  left:11px;
  top:11px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:6px 9px;
  border:1px solid rgba(111,199,255,.28);
  border-radius:999px;
  background:rgba(5,14,24,.76);
  color:#dff3ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.ui003-player-identity{
  position:absolute;
  z-index:4;
  left:12px;
  right:12px;
  bottom:12px;
  padding:10px 11px 9px;
  border:1px solid rgba(150,205,244,.16);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(9,20,33,.64),rgba(5,12,21,.88));
  backdrop-filter:blur(9px);
}
.ui003-player-identity .row{align-items:flex-end}
.ui003-player-identity #player-name{
  font-size:18px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:.01em;
  text-shadow:0 3px 15px rgba(0,0,0,.8);
}
.ui003-player-identity #player-hp{
  color:#f4fbff;
  font-size:15px;
  white-space:nowrap;
  text-shadow:0 3px 12px rgba(0,0,0,.8);
}
.ui003-player-identity #player-meta{
  margin-top:4px;
  color:#bfd0e2;
  font-size:10px;
  line-height:1.35;
}
.ui003-player-identity .bar{
  height:9px;
  margin-top:7px;
  border-color:#31465f;
  background:#050a11;
}
.ui003-player-identity .bar i{
  background:linear-gradient(90deg,#db365c,#ff6680 64%,#ff98aa);
  box-shadow:0 0 16px rgba(255,83,109,.36);
}

html.ui002-touch-layout #player-combat-card .compact-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:0;
}
html.ui002-touch-layout #player-combat-card .compact-stats .stat{
  position:relative;
  min-height:56px;
  padding:9px 10px 8px 38px;
  border:1px solid #263e57;
  border-radius:11px;
  background:linear-gradient(180deg,#102036,#0a1524);
  text-align:left;
}
html.ui002-touch-layout #player-combat-card .compact-stats .stat:before{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:7px;
  background:#162c45;
  font-size:13px;
}
html.ui002-touch-layout #player-combat-card .compact-stats .stat:nth-child(1):before{content:"⚔️"}
html.ui002-touch-layout #player-combat-card .compact-stats .stat:nth-child(2):before{content:"✦";color:#f4ce73}
html.ui002-touch-layout #player-combat-card .compact-stats .stat:nth-child(3):before{content:"🛡️"}
html.ui002-touch-layout #player-combat-card .compact-stats .stat:nth-child(4):before{content:"🪙"}
html.ui002-touch-layout #player-combat-card .compact-stats .stat b{
  font-size:15px;
  line-height:1.1;
  color:#f3f8ff;
}
html.ui002-touch-layout #player-combat-card .compact-stats .stat span{
  display:block;
  margin-top:3px;
  color:#91a6bc;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
html.ui002-touch-layout #player-combat-card #weapon-line{
  position:relative;
  min-height:45px;
  margin:0;
  padding:19px 10px 7px 35px;
  border:1px solid #34465e;
  border-radius:11px;
  background:linear-gradient(135deg,#111c2b,#0a1421);
  color:#dce9f5;
  font-size:11px;
  line-height:1.25;
}
html.ui002-touch-layout #player-combat-card #weapon-line:before{
  content:"ЭКИПИРОВКА";
  position:absolute;
  left:35px;
  top:6px;
  color:#748ca5;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}
html.ui002-touch-layout #player-combat-card #weapon-line:after{
  content:"🗡️";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-38%);
  font-size:17px;
}

/* Stronger, immediately readable tactical selection. */
html.ui002-touch-layout body[data-screen="arena"] .body-zone{
  min-width:76px;
  min-height:40px;
  border-width:1px;
  background:rgba(5,12,21,.72);
}
html.ui002-touch-layout body[data-screen="arena"] .body-zone.on,
html.ui002-touch-layout body[data-screen="arena"] .body-zone.selected,
html.ui002-touch-layout body[data-screen="arena"] .body-zone[aria-pressed="true"]{
  z-index:6;
  transform:scale(1.055);
  border-color:var(--zone-accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--zone-accent) 34%,#0a101b),color-mix(in srgb,var(--zone-accent) 18%,#080d16));
  color:#fff;
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--zone-accent) 28%,transparent),
    0 0 28px color-mix(in srgb,var(--zone-accent) 40%,transparent),
    inset 0 0 16px color-mix(in srgb,var(--zone-accent) 18%,transparent);
}
html.ui002-touch-layout body[data-screen="arena"] .body-zone.on:after,
html.ui002-touch-layout body[data-screen="arena"] .body-zone.selected:after,
html.ui002-touch-layout body[data-screen="arena"] .body-zone[aria-pressed="true"]:after{
  content:"✓";
  position:absolute;
  right:-6px;
  top:-7px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:2px solid #07101a;
  border-radius:50%;
  background:var(--zone-accent);
  color:#06101a;
  font-size:10px;
  font-weight:950;
  text-shadow:none;
}
html.ui002-touch-layout body[data-screen="arena"] .tactical-figure:has(.body-zone.on),
html.ui002-touch-layout body[data-screen="arena"] .tactical-figure:has(.body-zone[aria-pressed="true"]){
  border-color:color-mix(in srgb,var(--zone-accent) 56%,#38516b);
  box-shadow:inset 0 0 40px color-mix(in srgb,var(--zone-accent) 8%,transparent),0 0 25px color-mix(in srgb,var(--zone-accent) 15%,transparent),0 15px 32px rgba(0,0,0,.28);
}

/* One visual language for Attack / Defense / Shield and the primary action. */
html.ui002-touch-layout body[data-screen="arena"] .combat-stepbar{gap:7px}
html.ui002-touch-layout body[data-screen="arena"] .combat-step{
  min-height:52px;
  border:1px solid #2a415a;
  border-radius:11px;
  background:linear-gradient(180deg,#101c2c,#091320);
  color:#9eb0c3;
  box-shadow:none;
}
html.ui002-touch-layout body[data-screen="arena"] .combat-step span{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:7px;
  background:#1a2a3e;
  color:#9eb2c8;
}
html.ui002-touch-layout body[data-screen="arena"] .combat-step b{color:#dbe6f2}
html.ui002-touch-layout body[data-screen="arena"] .combat-step small{
  color:#8799ac;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html.ui002-touch-layout body[data-screen="arena"] .combat-step.active,
html.ui002-touch-layout body[data-screen="arena"] .combat-step.selected,
html.ui002-touch-layout body[data-screen="arena"] .combat-step[aria-current="step"]{
  border-color:#9d69ef;
  background:linear-gradient(135deg,#332253,#182039);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(181,118,255,.28),0 0 20px rgba(152,92,255,.15);
}
html.ui002-touch-layout body[data-screen="arena"] .combat-step.active span,
html.ui002-touch-layout body[data-screen="arena"] .combat-step.selected span,
html.ui002-touch-layout body[data-screen="arena"] .combat-step[aria-current="step"] span{
  background:#9b66ed;
  color:#fff;
}
html.ui002-touch-layout body[data-screen="arena"] .combat-step.ui003-complete{
  border-color:#3d765f;
  background:linear-gradient(180deg,#143126,#0c1d18);
}
html.ui002-touch-layout body[data-screen="arena"] .combat-step.ui003-complete span{
  background:#4dc18c;
  color:#06140e;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-hit-button{
  position:relative;
  min-height:56px;
  margin-top:8px;
  border:1px solid rgba(141,201,255,.35);
  border-radius:12px;
  background:linear-gradient(135deg,#307bb5,#7655d3);
  color:#fff;
  font-size:14px;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:0 12px 28px rgba(55,125,190,.23);
}
html.ui002-touch-layout body[data-screen="arena"] .compact-hit-button:before{
  content:"⚔️";
  margin-right:8px;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-hit-button:disabled{
  border-color:#24384d;
  background:linear-gradient(180deg,#122033,#0c1725);
  color:#75899e;
  opacity:1;
  box-shadow:none;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-hit-button:disabled:before{
  content:"◌";
  color:#60758a;
}

html.ui002-touch-layout body[data-screen="arena"] .compact-player-card,
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card,
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics{align-self:stretch}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics{
  border-color:#2f4a65;
  background:linear-gradient(180deg,#101d2e,#081321);
}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics-head{
  padding-bottom:8px;
  border-bottom:1px solid #20364d;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactical-stage{margin-top:8px}

@media(max-width:1050px){.ui003-player-portrait-frame{height:250px}}
@media(max-width:760px){
  .ui003-player-portrait-frame{height:235px}
  html.ui002-touch-layout #player-combat-card .compact-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.ui002-touch-layout #player-combat-card .compact-stats .stat{min-height:50px;padding:8px 4px;text-align:center}
  html.ui002-touch-layout #player-combat-card .compact-stats .stat:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  html.ui002-touch-layout body[data-screen="arena"] .body-zone.on,
  html.ui002-touch-layout body[data-screen="arena"] .body-zone.selected,
  html.ui002-touch-layout body[data-screen="arena"] .body-zone[aria-pressed="true"]{transform:none}
}