/* Canonical digital-front status bar.
   Used unchanged for Likes, Smashes, and Victories. The public bar is intentionally theatrical:
   raw totals stay in state; the display is rubber-banded/smoothed and the center seam visibly fights. */
.war-status-slot{
  position:sticky;
  top:0;
  z-index:30;
  width:100%;
  padding:0 0 5px;
  background:var(--bg);
}
.war-status{
  --war-haunted:50%;
  --war-status-surface:#111419;
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center;
  gap:7px;
  width:100%;
  min-height:58px;
  padding:8px 9px;
  overflow:visible;
  border:0;
  background:var(--war-status-surface);
  box-shadow:none;
  transition:background .35s ease;
}
.war-status[data-leader="haunted"]{
  --war-status-surface:#111419;
}
.war-status[data-leader="damned"]{
  --war-status-surface:#111419;
}
.war-status-icon{
  position:relative;
  z-index:3;
  display:grid;
  width:60px;
  height:60px;
  place-items:center;
  justify-self:center;
  color:var(--muted);
  transition:width .4s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1),color .3s ease;
}
.war-status-icon svg{display:none}
.war-status-icon.haunted{color:var(--haunted)}
.war-status-icon.damned{color:var(--damned)}
.war-status-icon::before,
.war-status-icon::after{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.war-status-icon::before{
  z-index:0;
  background-color:var(--war-status-surface);
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.war-status-icon.haunted::before{-webkit-mask-image:var(--art-war-insignia-mask-haunted);mask-image:var(--art-war-insignia-mask-haunted)}
.war-status-icon.damned::before{-webkit-mask-image:var(--art-war-insignia-mask-damned);mask-image:var(--art-war-insignia-mask-damned)}
.war-status-icon::after{
  z-index:1;
  opacity:.76;
  animation:war-status-icon-pulse 3s ease-in-out infinite;
  filter:drop-shadow(0 0 2px currentColor);
}
.war-status-icon.haunted::after{background-image:var(--art-war-insignia-haunted)}
.war-status-icon.damned::after{background-image:var(--art-war-insignia-damned)}
.war-status-icon.haunted{grid-column:1;grid-row:1}
.war-status-icon.damned{grid-column:3;grid-row:1}
.war-status[data-leader="haunted"] .war-status-icon.haunted,
.war-status[data-leader="damned"] .war-status-icon.damned,
.war-status[data-leader="tie"] .war-status-icon.haunted,
.war-status[data-leader="tie"] .war-status-icon.damned{
  width:72px;
  height:72px;
  opacity:1;
}
.war-status[data-leader="haunted"] .war-status-icon::after,
.war-status[data-leader="damned"] .war-status-icon::after,
.war-status[data-leader="tie"] .war-status-icon::after{
  opacity:1;
  animation-name:war-status-icon-pulse-large;
  filter:drop-shadow(0 0 5px currentColor);
}
@keyframes war-status-icon-pulse{
  0%,100%{filter:drop-shadow(0 0 2px currentColor)}
  50%{filter:drop-shadow(0 0 4px currentColor)}
}
@keyframes war-status-icon-pulse-large{
  0%,100%{filter:drop-shadow(0 0 5px currentColor)}
  50%{filter:drop-shadow(0 0 9px currentColor)}
}
.war-status-track{
  position:relative;
  z-index:1;
  grid-column:1/-1;
  grid-row:1;
  height:clamp(68px,18vw,112px);
  /* Stop each beam at the centerline of its insignia so the art covers the
     inner endpoint without energy showing beyond the emblem. */
  margin-inline:20px;
  overflow:hidden;
  border:0;
  background:transparent;
  box-shadow:none;
}
.war-status-energy{
  position:absolute;
  top:0;
  bottom:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  filter:url("assets/war/darken-white-fringe.svg#darken-white-fringe");
  transition:width .9s cubic-bezier(.2,.9,.2,1);
}
.war-status-energy.haunted{
  left:0;
  width:var(--war-haunted);
  background-image:var(--art-war-energy-haunted);
  filter:url("assets/war/darken-white-fringe.svg#darken-white-fringe") drop-shadow(0 0 7px color-mix(in srgb,var(--haunted) 82%,transparent));
}
.war-status-energy.damned{
  right:0;
  width:calc(100% - var(--war-haunted));
  background-image:var(--art-war-energy-damned);
  filter:url("assets/war/darken-white-fringe.svg#darken-white-fringe") drop-shadow(0 0 7px color-mix(in srgb,var(--damned) 82%,transparent));
}
/* Keep the competition name centered inside the bar without covering the struggle underneath it. */
.war-status-label{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:block;
  width:clamp(88px,9vw,104px);
  height:clamp(88px,9vw,104px);
  padding:0;
  border:0;
  background-color:transparent;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  color:transparent;
  box-shadow:none;
  filter:drop-shadow(0 2px 2px rgb(0 0 0 / 65%));
  font-size:0;
  pointer-events:none;
  text-shadow:none;
}
.war-status-label-art{
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:1;
  transition:opacity .38s ease;
}
.war-status-label-art.is-entering,
.war-status-label-art.is-exiting{opacity:0}
.war-status-label-art[data-tombstone="likes"]{background-image:var(--art-war-tombstone-likes)}
.war-status-label-art[data-tombstone="wins"]{background-image:var(--art-war-tombstone-battles)}
.war-status-label-art[data-tombstone="smashes"]{background-image:var(--art-war-tombstone-smashes)}
.war-status[data-leader="haunted"] .war-status-label{
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--haunted) 90%,transparent));
}
.war-status[data-leader="damned"] .war-status-label{
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--damned) 90%,transparent));
}
.war-status[data-leader="tie"] .war-status-label{
  filter:drop-shadow(-5px 0 6px color-mix(in srgb,var(--haunted) 90%,transparent))
    drop-shadow(5px 0 6px color-mix(in srgb,var(--damned) 90%,transparent));
}
/* Damned camera chrome should always read as Damned blue, even in the warm
   embedded camera where --active-faction may still reflect the parent shell. */
body[data-home-faction="damned"] .camera-wordmark{
  color:var(--damned)!important;
}
body[data-home-faction="damned"] .shutter,
body[data-home-faction="damned"] .camera-bubble{
  background:var(--damned)!important;
  border-color:var(--damned)!important;
  color:#071017!important;
  box-shadow:0 0 16px color-mix(in srgb,var(--damned) 42%,transparent)!important;
}
body[data-home-faction="damned"] .shutter{
  outline-color:var(--damned)!important;
}

@media(prefers-reduced-motion:reduce){
  :root{
    --art-war-energy-haunted:var(--art-war-energy-haunted-static);
    --art-war-energy-damned:var(--art-war-energy-damned-static);
  }
  .war-status-energy,.war-status-icon,.war-status-label-art{transition:none}
  .war-status-icon::after{animation:none}
}
@media(max-width:380px){
  .war-status{grid-template-columns:36px minmax(0,1fr) 36px;gap:5px;min-height:54px;padding:7px}
  .war-status-track{height:64px;margin-inline:18px}
  .war-status-icon{width:54px;height:54px}
  .war-status[data-leader="haunted"] .war-status-icon.haunted,
  .war-status[data-leader="damned"] .war-status-icon.damned,
  .war-status[data-leader="tie"] .war-status-icon.haunted,
  .war-status[data-leader="tie"] .war-status-icon.damned{width:64px;height:64px}
  .war-status-label{width:82px;height:82px}
}