.panel{
  position:relative;
  background:var(--void-2);
  border:3px solid var(--ink);border-radius:2px;
  box-shadow:6px 6px 0 var(--ink);
  height:100%;padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
  cursor:pointer;text-align:left;width:100%;color:inherit;font:inherit;
  animation:panel-in 400ms cubic-bezier(.22,1,.36,1) both;
}
.cell:nth-child(odd){transform:rotate(-.6deg);}
.cell:nth-child(even){transform:rotate(.4deg);}
@media(max-width:767px){.cell:nth-child(odd),.cell:nth-child(even){transform:none;}}
.cell:nth-child(2) .panel{animation-delay:60ms}
.cell:nth-child(3) .panel{animation-delay:120ms}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}}
.panel:focus-visible{outline:4px solid var(--cyan);outline-offset:4px;}
.panel:hover{box-shadow:9px 9px 0 var(--ink);}

.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--void-dot) 1px,transparent 1.4px);
  background-size:4px 4px;opacity:.6;
}
.panel > *{position:relative;z-index:2;}
.panel > .symbiote{z-index:1;}
.is-critical .integrity__value,.is-critical .codename{
  text-shadow:0 2px 10px var(--symbiote),4px 0 var(--pink),-4px 0 var(--cyan);
}
.is-critical .chip,.is-degraded .chip{background:rgba(20,6,31,.82);}

.symbiote{
  position:absolute;inset:-6px;z-index:1;pointer-events:none;
  filter:url(#symbiote-turbulence);
  animation:symbiote-breathe 9s ease-in-out infinite;
}
.symbiote__body{
  position:absolute;inset:0;background:var(--symbiote);
  --reach:calc(var(--spread,0) * 82%);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 var(--reach),transparent calc(var(--reach) + 11%));
  mask-image:linear-gradient(to top,#000 0,#000 var(--reach),transparent calc(var(--reach) + 11%));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:-webkit-mask-image 800ms cubic-bezier(.22,1,.36,1),mask-image 800ms cubic-bezier(.22,1,.36,1);
}
.symbiote::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,transparent 0,transparent calc(var(--spread,0) * 100%),var(--symbiote-edge) calc(var(--spread,0) * 100% + 2%),transparent calc(var(--spread,0) * 100% + 9%));
  opacity:.85;mix-blend-mode:screen;
}
@keyframes symbiote-breathe{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}
.is-purging .symbiote__body{transition:-webkit-mask-image 900ms ease-out,mask-image 900ms ease-out;}

.panel > .panel__no{
  position:absolute;left:-3px;top:-3px;z-index:3;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:var(--t-tick);font-weight:600;line-height:1;letter-spacing:.06em;
  color:var(--paper);background:var(--ink);
  padding:3px 5px 2px;opacity:.55;
}
.panel--big > .panel__no{font-size:var(--t-micro);padding:4px 7px 3px;}
.is-unwatched > .panel__no{opacity:.4;}

.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;}
.phead > div{min-width:0;flex:1 1 auto;}
.codename{
  font-family:Anton,Impact,sans-serif;font-size:var(--t-codename);
  letter-spacing:.03em;margin:0;line-height:1;overflow-wrap:anywhere;
  text-shadow:1px 0 var(--pink),-1px 0 var(--cyan);
}
.is-degraded .codename{text-shadow:2px 0 var(--pink),-2px 0 var(--cyan);}
.is-critical .codename{text-shadow:4px 0 var(--pink),-4px 0 var(--cyan);}
.universe{font-family:"IBM Plex Mono",monospace;font-size:var(--t-data);color:#9E7BC7;margin:4px 0 0;overflow-wrap:anywhere;}

.badge{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:5px 9px;border:2px solid var(--ink);color:var(--ink);flex:0 0 auto;
}
.badge--healthy{background:var(--healthy);}
.badge--degraded{background:var(--degraded);}
.badge--critical{background:var(--critical);color:var(--ink);}
.badge--reweaving{background:var(--reweaving);}
.badge--unwatched{background:var(--unwatched);color:#9A90AF;}

.integrity{text-align:center;margin-top:auto;}
.integrity__value{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:var(--t-data-xl);font-weight:600;line-height:1;display:block;
}
.is-healthy .integrity__value{color:var(--healthy);}
.is-degraded .integrity__value{color:var(--degraded);}
.is-critical .integrity__value{color:var(--critical);}
.is-reweaving .integrity__value{color:var(--reweaving);}

.spark{display:block;width:100%;height:44px;}

.bar{height:14px;border:2px solid var(--ink);background:var(--void);overflow:hidden;}
.bar__fill{
  height:100%;width:0;background:var(--healthy);
  transition:width 600ms cubic-bezier(.22,1,.36,1),background-color 300ms linear;
}
.is-degraded .bar__fill{background:var(--degraded);}
.is-critical .bar__fill{background:var(--critical);}
.is-reweaving .bar__fill{background:var(--reweaving);}

.chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;
  padding:7px 8px;border:2px solid var(--ink);background:var(--void);
  display:inline-flex;align-items:center;gap:5px;
  min-width:0;max-width:100%;overflow-wrap:anywhere;
}
.chip--live{color:var(--healthy);}
.chip--infected{color:var(--infected);border-color:var(--infected);animation:chip-pulse 5s ease-in-out infinite;}
.chip--dead{color:var(--dimmer);text-decoration:line-through;text-decoration-thickness:2px;}
@keyframes chip-pulse{0%,100%{opacity:1}50%{opacity:.62}}

.lastscan{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);}

.panel[data-drowned] .universe{color:#C9B6E4;}
.panel[data-drowned] .spark__note,
.panel[data-drowned] .lastscan .label{color:#B9AACB;}
.panel[data-drowned] .lastscan .mono{color:var(--paper);}
.panel[data-drowned] .chip{
  background:var(--ink);border-color:#4B4160;
  box-shadow:0 0 0 3px rgba(5,4,8,.85);
}
.panel[data-drowned] .chip--dead{color:#A99BC0;}
.panel[data-drowned] .bar{box-shadow:0 0 0 3px rgba(5,4,8,.9);}
.panel[data-drowned] .codename,
.panel[data-drowned] .integrity__value{
  text-shadow:0 2px 14px var(--symbiote),0 0 26px var(--symbiote),4px 0 var(--pink),-4px 0 var(--cyan);
}