/* Spec 30 (Jake, 12 Nov): "after fight I should have the option to heal up before moving" and
   "I think the skin should be more visible". The Patch up block on the raid screen, and the PMC figure
   reworked so the outfit is the star: no wireframe over the art, a thin outline that hugs the silhouette,
   a soft tint on the hurt part only, condition icons beside it, a brief flash on a hit. Loaded after main.css. */

/* ===================================================================== Patch up block */
.care {
  display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-3);
  background: color-mix(in srgb, var(--red-wash) 45%, var(--panel)); border: 1px solid var(--red-dim); border-left: 4px solid var(--red);
}
.care__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.care__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.care__title .icon { width: 1.1em; height: 1.1em; color: var(--red); }
.care__hp { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.care__hp.is-low { color: var(--red); }
.care.is-low .care__meter .meter__fill { background: var(--red); }
.care__meter { margin: 0; }
.care__line { margin: 0; color: var(--text); }
.care__fx { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.care__cond { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--fs-s); }
.care__note { color: var(--text-dim); }
.care__best .opt { width: 100%; border-color: var(--cyan); background: var(--cyan-wash); }
.care__meds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.care__meds .opt { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
.care__meds .opt__label { font-size: var(--fs-m); }
.care__none { margin: 0; color: var(--text-faint); font-style: italic; }

/* ===================================================================== the figure: the outfit is the star */
/* a soft backlight behind the figure, and the art itself a little brighter with a cyan rim that follows its edge */
.fig__backlight { fill: color-mix(in srgb, var(--cyan) 20%, transparent); stroke: none; filter: blur(12px); pointer-events: none; }
.fig .fig__base {
  filter: brightness(1.14) contrast(1.06)
    drop-shadow(0 0 0.7px color-mix(in srgb, var(--cyan-hi) 90%, transparent))
    drop-shadow(0 0 4px color-mix(in srgb, var(--cyan) 40%, transparent));
}
.fig--outfit .fig__base { filter: brightness(1.08) drop-shadow(0 0 0.6px color-mix(in srgb, var(--cyan-hi) 70%, transparent)) drop-shadow(0 0 3px color-mix(in srgb, var(--cyan) 30%, transparent)); }
/* the painting at full strength, never recoloured (the old hurt filter turned every outfit red) */
.fig .fig__paint--kit { opacity: 1; }
.fig.is-hurt .fig__paint, .figstage.is-hurt .fig__paint { filter: none; }
/* below half health: the rim turns red, thin */
.fig.is-hurt .fig__base {
  filter: brightness(1.1) contrast(1.06)
    drop-shadow(0 0 0.8px var(--red))
    drop-shadow(0 0 4px color-mix(in srgb, var(--red) 45%, transparent));
}
.fig.is-hurt .fig__backlight { fill: color-mix(in srgb, var(--red) 14%, transparent); }
/* the gun in hand: a dark silhouette with a thin edge, not a cyan wireframe */
.fig--pmc .fig__weapon .fig__ln, .fig--pmc .fig__weapon .fig__dim { fill: #161c20; stroke: color-mix(in srgb, var(--cyan-hi) 75%, transparent); stroke-width: 1; }
/* the hurt part: a soft red tint that breathes; nothing outside that part */
.fig__sore ellipse { fill: var(--red); opacity: 0.34; filter: blur(3.5px); mix-blend-mode: screen; animation: care-sore 2.6s ease-in-out infinite; }
@keyframes care-sore { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.36; } }
/* a hit: that part flashes once, the rim flares, then both fade */
.fig__zone ellipse { fill: var(--red); opacity: 0; filter: blur(2.5px); }
.figstage.is-hit[data-hit="head"] .fig__zone[data-part="head"] ellipse,
.figstage.is-hit[data-hit="thorax"] .fig__zone[data-part="thorax"] ellipse,
.figstage.is-hit[data-hit="stomach"] .fig__zone[data-part="stomach"] ellipse,
.figstage.is-hit[data-hit="arms"] .fig__zone[data-part="arms"] ellipse,
.figstage.is-hit[data-hit="legs"] .fig__zone[data-part="legs"] ellipse { animation: care-zone 520ms ease-out; }
@keyframes care-zone { 0% { opacity: 0.85; } 100% { opacity: 0; } }
.figstage.is-hit:not([data-hit]) .fig__zone[data-part="thorax"] ellipse { animation: care-zone 520ms ease-out; }
.figstage.is-hit .figstage__flash { animation: care-flash 420ms ease-out; }
@keyframes care-flash { 0% { opacity: 0.3; } 100% { opacity: 0; } }
.figstage__flash { background: radial-gradient(ellipse at 50% 45%, transparent 40%, color-mix(in srgb, var(--red) 40%, transparent) 75%, transparent 90%); }
/* condition icons beside the figure */
.fig__ico-bg { fill: color-mix(in srgb, var(--bg-deep) 88%, transparent); stroke: var(--red); stroke-width: 1.2; }
.fig__ico-fill { fill: var(--red); stroke: none; }
.fig__ico-ln { fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fig__ico-ln--bold { stroke-width: 2.2; }
.fig__cond--stim .fig__ico-bg { stroke: var(--cyan-hi); }
.fig__cond--stim .fig__ico-fill { fill: var(--cyan-hi); }
/* night: cooler and a little darker, never so dark the outfit is lost */
.figstage.is-night { filter: brightness(0.9) saturate(0.8); }
.figstage.is-night .fig__backlight { fill: color-mix(in srgb, #7aa6ff 18%, transparent); }
/* reduced motion: the tint holds still, no flash (main.css also stops every animation) */
html[data-motion="reduced"] .fig__sore ellipse { animation: none; opacity: 0.32; }
@media (prefers-reduced-motion: reduce) { .fig__sore ellipse { animation: none; opacity: 0.32; } }

/* ---- sizes: large enough on desktop, not tiny on phones */
@media (min-width: 1000px) {
  .raid__fig { flex: 1 1 0; min-height: 210px; display: flex; justify-content: center; align-items: flex-start; }
  .raid__fig .figstage { width: auto; height: 100%; max-height: 440px; aspect-ratio: 120 / 200; }
  .raid__fig .fig { width: 100%; height: 100%; }
}
/* phones: the figure gets its own column at the right of the status bar, at full strength */
@media (max-width: 559px) {
  .screen.raid.has-fig .hud { grid-template-columns: repeat(6, minmax(0, 1fr)) 58px; }
  .screen.raid.has-fig .hud__cell { padding: 1px 3px; }
  .screen.raid.has-fig .hud__cell .hud__v { font-size: 11px; letter-spacing: -0.03em; }
  .screen.raid.has-fig .hud__effects, .screen.raid.has-fig .hud__clock, .screen.raid.has-fig .hud__heading { grid-column: 1 / 7; }
  .screen.raid .hud > .hud__fig { position: relative; right: auto; top: auto; grid-column: 7; grid-row: 1 / span 4; width: 58px; height: auto; min-height: 0; opacity: 1; align-self: stretch; }
  .screen.raid .hud__fig .figstage { position: absolute; inset: -4px 0 -2px; width: auto; height: auto; }
}
/* tablets: beside the status bar */
@media (min-width: 560px) and (max-width: 999px) {
  .screen.raid.has-fig .hud { padding-right: 100px; }
  .screen.raid .hud > .hud__fig { opacity: 1; width: 86px; height: auto; top: 4px; bottom: 4px; right: 8px; }
}
/* the Loadout summary figure */
.sumfig .fig { width: 140px; height: 234px; }
/* desktop: the mini map gives up some height so the figure has room */
@media (min-width: 1000px) {
  .raid__side .minimap .nodemap { max-height: 30vh; }
}
@media (max-width: 559px) {
  .screen.raid.has-fig .hud__cell .hud__unit { display: none; }
}

/* ===================================================================== a heal on the HP bar (spec 30) */
.hud__hp { position: relative; }
.hud__hp.is-healed .meter--hp { animation: care-heal 900ms ease-out; }
@keyframes care-heal { 0% { box-shadow: 0 0 0 2px #4ee08a, 0 0 14px #4ee08a; } 100% { box-shadow: none; } }
.hud__gain { position: absolute; right: 0; top: -2px; color: #5ef09a; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 0 6px color-mix(in srgb, #4ee08a 60%, transparent); animation: care-gain 1.4s ease-out forwards; }
@keyframes care-gain { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
html[data-motion="reduced"] .hud__gain { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hud__gain { animation: none; opacity: 1; } }
.bag__med { font-weight: 400; color: var(--text-dim); }
.bag__why { font-weight: 400; }
/* conditions from gas and toxins on the figure */
.fig__cond--poisoned .fig__ico-bg, .fig__cond--gassed .fig__ico-bg { stroke: #9fd25a; }
.fig__cond--poisoned .fig__ico-fill, .fig__cond--gassed .fig__ico-fill { fill: #9fd25a; }
.fig__cond--gassed .fig__ico-ln { stroke: #9fd25a; }