/* 01 · the hero as a living splat (js/splat/main.js). The canvas lies over the picture and takes its transform; the picture
   stays in the page (and in the reading order) underneath, and comes back if anything fails. Spandex is the chip in the
   top-left corner, Expandex the index it opens into. Ink on white in both themes, like the plate itself. */
.hero-art.splat-on{position:relative}
.splat-cv{position:absolute;z-index:1;display:block;transform:scale(1.06);transform-origin:50% 100%;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent}
.hero-art.splat-live img{opacity:0}

.spandex{position:absolute;left:10px;top:10px;z-index:4;color:#0b0b0c;font:700 clamp(9px,.85vw,12px)/1 var(--mono);
  text-transform:uppercase;letter-spacing:.07em}
.sx-chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:.6em;padding:.55em .7em;background:#fff;
  border:2px solid #0b0b0c;box-shadow:3px 3px 0 #0b0b0c;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-chip:hover,.spandex.open .sx-chip{background:#d2f783}
.sx-chip:focus-visible,.sx-row:focus-visible{outline:3px solid #0b0b0c;outline-offset:2px}
.sx-dot{width:.7em;height:.7em;border-radius:50%;background:#d2f783;border:1.5px solid #0b0b0c;animation:sx-beat 1.6s ease-in-out infinite}
@keyframes sx-beat{50%{transform:scale(.6)}}
.sx-n{font-weight:400}

.sx-panel{position:absolute;left:0;top:calc(100% + 8px);width:min(372px,calc(100vw - 52px));overflow:auto;overscroll-behavior:contain;
  padding:12px 12px 8px;background:#fff;border:2px solid #0b0b0c;box-shadow:4px 4px 0 #0b0b0c;text-transform:none;letter-spacing:0;
  animation:sx-in .28s cubic-bezier(.2,1.4,.3,1) both}
.sx-panel[hidden],.sx-tag[hidden]{display:none}
@keyframes sx-in{from{opacity:0;transform:translateY(-6px)}}
.sx-how{margin:0 0 10px;font:400 12px/1.45 "Archivo",sans-serif}
.sx-short{display:none}
.sx-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px;font:700 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.sx-key span{display:inline-flex;align-items:center;gap:5px}
.sx-key i{display:inline-block;width:14px;height:8px;border:1px solid #0b0b0c}
.sx-tally{margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid #0b0b0c;font:400 10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;
  font-variant-numeric:tabular-nums}
.sx-rows{list-style:none;margin:0;padding:0}
.sx-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 3.2ch minmax(64px,1.2fr) 9.5ch;align-items:center;gap:8px;
  width:100%;padding:5px 6px 5px 18px;position:relative;cursor:pointer;font:400 11px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.sx-row::before{content:"";position:absolute;left:5px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;border:1.5px solid #0b0b0c;background:#d2f783}
.sx-row:hover{background:#f3f3ee}
.sx-row[aria-pressed="true"]{background:#d2f783}
.sx-row[data-phase="dying"]::before{background:#0b0b0c}
.sx-row[data-phase="dead"]::before{background:#fff;border-style:dotted}
.sx-row[data-phase="regen"]::before{background:#fff;box-shadow:inset 0 0 0 2px #d2f783}
.sx-row[data-phase="dead"] .sx-name,.sx-row[data-phase="dying"] .sx-name{opacity:.55}
.sx-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.sx-gen{text-align:right}
.sx-state{text-align:right;text-transform:uppercase;letter-spacing:.04em;font-size:10px;white-space:nowrap}
.sx-bar{position:relative;display:flex;height:8px;border:1px solid #0b0b0c}
.sx-bar i{display:block;height:100%;flex:none}
.sx-bar b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#0b0b0c}
/* the four spans: life, death, rest, regrowth */
.sx-bar i:nth-child(1),.sx-key i.l{background:#d2f783}
.sx-bar i:nth-child(2),.sx-key i.d{background:#0b0b0c}
.sx-bar i:nth-child(3),.sx-key i.r{background:#c9c9c2}
.sx-bar i:nth-child(4),.sx-key i.g{background:repeating-linear-gradient(-45deg,#d2f783 0 2px,#fff 2px 4px)}

.sx-tag{position:absolute;z-index:4;transform:translate(-50%,-100%);pointer-events:none;padding:.45em .6em;background:#fff;color:#0b0b0c;
  border:2px solid #0b0b0c;box-shadow:3px 3px 0 #0b0b0c;font:700 clamp(9px,.8vw,11px)/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-tag[data-side="r"]{transform:translate(0,-50%)}
.sx-tag[data-side="l"]{transform:translate(-100%,-50%)}
/* phones: the hero is a ~250px strip, so the index goes compact to show five or six rows at a time */
@media (max-width:759px){
  .spandex{left:8px;top:8px}
  .sx-panel{padding:8px 8px 4px}
  .sx-how{margin-bottom:6px;font-size:11px;line-height:1.35}
  .sx-long{display:none}
  .sx-short{display:inline}
  .sx-key{gap:3px 9px;margin-bottom:5px;font-size:9px}
  .sx-key i{width:11px;height:7px}
  .sx-tally{margin-bottom:2px;padding-bottom:5px;font-size:9px}
  .sx-row{grid-template-columns:minmax(0,1fr) 3.2ch minmax(48px,1fr) 8.5ch;gap:6px;min-height:24px;padding:2px 4px 2px 16px;font-size:10px}
  .sx-row::before{left:4px}
  .sx-state{font-size:9px}
}