/* $SEED — STREAM MODE: the fullscreen control room for screen-recording and live-streaming the heist.
   Everything in here is scoped under .strm (the layer) or .strm-btn (the header toggle).
   The layer sits above every other module (intro tops out at 120) and locks the page scroll while it is on.
   Brand: brushed steel, safety orange, hazard yellow, ink. Stamped plates and hard shadows, never glow. */

/* ---------- the header toggle (#mount-head, matches the ALERT ME / speaker buttons beside it) ---------- */
.strm-btn{
  display:inline-flex;align-items:center;gap:7px;flex:none;position:relative;
  border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;
  padding:7px 10px;line-height:1;
  font-family:var(--stencil);font-weight:900;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s,box-shadow .1s,background .2s,color .2s;
}
.strm-btn:hover{background:var(--plate)}
.strm-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.strm-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* the REC dot: steel while off, pulsing orange while the room is open */
.strm-btn i{width:9px;height:9px;border-radius:50%;background:var(--steel-2);border:2px solid var(--ink);flex:none;box-sizing:content-box}
.strm-btn.on{background:var(--ink);color:#fff}
.strm-btn.on i{background:var(--orange);border-color:var(--orange);animation:strmRec 1.1s steps(2) infinite}
@keyframes strmRec{50%{opacity:.25}}

/* the page underneath does not scroll while the room is open (the layer is opaque, this stops rubber-banding) */
body.stream-on{overflow:hidden!important}

/* ---------- the layer ---------- */
.strm{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:var(--steel);color:var(--ink);font-family:var(--body);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#e6e8e4,#d6d9d5);
  overflow:hidden;overscroll-behavior:contain;
  -webkit-user-select:none;user-select:none;
}
.strm *{box-sizing:border-box;min-width:0}
.strm button{font:inherit;color:inherit}

/* ---------- top bar: LIVE badge · brand · controls ---------- */
.strm-top{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:8px clamp(10px,2vw,22px);padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:var(--plate);border-bottom:3px solid var(--ink);position:relative;z-index:3;
}
.strm-live{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:var(--ink);color:#fff;border:2px solid var(--ink);padding:5px 10px 5px 8px;line-height:1;
}
.strm-live i{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--orange);animation:strmPulse 1.2s ease-in-out infinite}
.strm-live b{font-family:var(--stencil);font-weight:900;font-size:18px;letter-spacing:.1em}
.strm-live time{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--yellow);font-variant-numeric:tabular-nums;border-left:2px solid #4a4d4b;padding-left:8px}
@keyframes strmPulse{50%{transform:scale(.6);box-shadow:0 0 0 2px var(--ink),0 0 0 2px var(--orange)}}

.strm-brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.strm-logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--stencil);font-weight:900;font-size:28px;line-height:1;letter-spacing:.02em;flex:none}
.strm-dial{width:22px;height:22px;border-radius:50%;background:var(--orange);border:3px solid var(--ink);position:relative;animation:strmSpin 8s linear infinite}
.strm-dial::after{content:"";position:absolute;left:50%;top:-3px;width:4px;height:50%;background:var(--ink);transform:translateX(-50%)}
@keyframes strmSpin{to{transform:rotate(360deg)}}
.strm-brand-t{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--yellow);border:2px solid var(--ink);padding:4px 8px;line-height:1;white-space:nowrap}
.strm-brand code{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.strm-ctl{display:flex;gap:8px;flex:none;margin-left:auto}
.strm-ctl button{
  display:inline-flex;align-items:center;gap:7px;border:2px solid var(--ink);background:#fff;cursor:pointer;
  padding:6px 9px;line-height:1;font-family:var(--stencil);font-weight:900;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .2s;
}
.strm-ctl button:hover{background:var(--plate)}
.strm-ctl button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.strm-ctl button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.strm-ctl kbd{font-family:var(--mono);font-size:11px;font-weight:600;background:var(--ink);color:#fff;padding:2px 5px;line-height:1}
.strm-ctl .strm-x{background:var(--orange);color:#fff;font-size:16px;padding:6px 10px}
.strm-ctl .strm-x:hover{background:var(--orange-d)}

/* a hazard tag that drops from the bar for 1.6 s (keyboard hints) */
.strm-hint{
  position:absolute;left:50%;top:calc(58px + env(safe-area-inset-top,0px));transform:translate(-50%,-14px);z-index:4;
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--stencil);font-weight:900;font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  padding:6px 12px 5px;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;
}
.strm-hint.show{animation:strmHint 1.6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes strmHint{0%{opacity:0;transform:translate(-50%,-14px)}14%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}

/* ---------- the grid ---------- */
.strm-grid{
  flex:1;min-height:0;position:relative;
  display:grid;gap:clamp(10px,1.6vw,22px);
  padding:clamp(10px,1.6vw,22px) clamp(12px,2.4vw,32px);
}
.strm-col{display:flex;flex-direction:column;min-height:0;min-width:0;gap:clamp(8px,1.2vh,14px)}

/* 16:9 — door | market cap + track + countdown | plates + feed */
.strm[data-layout="land"] .strm-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
.strm[data-layout="land"] .strm-col-door{justify-content:center;align-items:center}
.strm[data-layout="land"] .strm-col-mid{justify-content:center}
.strm[data-layout="land"] .sdoor-wrap{width:min(100%,calc(100vh - 210px))}
.strm[data-layout="land"] .strm-feed{flex:1}

/* 9:16 — stacked, scrolls if the phone is short; sized to read on a phone recording */
.strm[data-layout="port"] .strm-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.strm[data-layout="port"] .strm-col-door{align-items:center}
.strm[data-layout="port"] .sdoor-wrap{width:min(66vw,34vh,420px)}
.strm[data-layout="port"] .strm-feed{max-height:200px;flex:none}

/* registration marks in the corners of the stage (stencil "cut here" brackets) */
.strm-cnr{position:absolute;width:18px;height:18px;border:3px solid var(--ink);pointer-events:none;opacity:.55}
.strm-cnr.tl{left:6px;top:6px;border-right:0;border-bottom:0}
.strm-cnr.tr{right:6px;top:6px;border-left:0;border-bottom:0}
.strm-cnr.bl{left:6px;bottom:6px;border-right:0;border-top:0}
.strm-cnr.br{right:6px;bottom:6px;border-left:0;border-top:0}

/* ---------- the jackpot door (built from state, sized by its box; cqw keeps type in proportion) ---------- */
.strm .sdoor-wrap{position:relative;aspect-ratio:1;flex:none;container-type:inline-size;max-width:100%}
.strm .sdoor{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f7f8f6,#c3c7c3 55%,#9ea39f 100%);
  border:5px solid var(--ink);box-shadow:10px 12px 0 var(--ink),inset 0 0 0 14px rgba(0,0,0,.06);
  transition:box-shadow .4s;
}
.strm .sdoor.shake{animation:strmShake .5s}
@keyframes strmShake{20%{transform:translate(-6px,2px) rotate(-1deg)}40%{transform:translate(5px,-3px) rotate(1deg)}60%{transform:translate(-4px,3px)}80%{transform:translate(3px,-1px)}}
.strm .sdoor-ring{
  position:absolute;inset:11%;border-radius:50%;border:4px solid var(--ink);
  background:repeating-conic-gradient(var(--ink) 0 1deg,transparent 1deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 78%,#000 79%);mask:radial-gradient(circle,transparent 78%,#000 79%);
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.strm .sdoor-bolts{position:absolute;inset:0;pointer-events:none}
.strm .sdoor-bolts i{
  position:absolute;width:clamp(8px,3.4cqw,16px);height:clamp(8px,3.4cqw,16px);transform:translate(-50%,-50%);
  border-radius:50%;background:#8e938f;border:clamp(2px,.6cqw,3px) solid var(--ink);
}
.strm .sdoor-face{
  position:absolute;inset:27%;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:clamp(3px,1.1cqw,5px) solid var(--orange);padding:4%;z-index:1;
  transition:border-color .4s;
}
.strm .sdoor-tag{font-size:clamp(7px,2.3cqw,11px);font-weight:800;letter-spacing:.1em;color:var(--yellow)}
.strm .sdoor-sol{font-family:var(--stencil);font-weight:900;font-size:clamp(26px,15cqw,84px);line-height:.95;margin-top:2%}
.strm .sdoor-unit{font-weight:800;letter-spacing:.2em;font-size:clamp(8px,2.6cqw,12px);color:var(--orange)}
.strm .sdoor-usd{font-family:var(--mono);font-size:clamp(8px,2.8cqw,13px);margin-top:2%;color:#cfd3cf;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strm .sdoor-known{margin-top:4%;font-size:clamp(7px,2.3cqw,11px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);padding:2% 5%;white-space:nowrap}
/* the door while its seed is falling: the core border strobes hazard yellow */
.strm .sdoor.dropping .sdoor-face{border-color:var(--yellow);animation:strmFaceHot 1s steps(2) infinite}
@keyframes strmFaceHot{50%{border-color:var(--orange)}}
/* swept: blue core, hatched plate */
.strm .sdoor.cracked{background:repeating-linear-gradient(-45deg,#e3e5e1 0 10px,#c9cdc9 10px 20px)}
.strm .sdoor.cracked .sdoor-face{border-color:var(--won)}
.strm .sdoor.cracked .sdoor-known{background:var(--won)}
.strm .sdoor.cracked .sdoor-unit{color:var(--won)}

/* 12 word slots on a ring: dim stamped plate while hidden, engraved hazard plate once the word is out */
.strm .sdoor-slots{position:absolute;inset:0;z-index:2;pointer-events:none}
.strm .sslot{
  position:absolute;transform:translate(-50%,-50%);
  width:clamp(44px,21cqw,92px);height:clamp(18px,6.8cqw,30px);
  display:flex;align-items:center;justify-content:center;gap:3px;
  font-family:var(--mono);font-size:clamp(8px,2.9cqw,13px);font-weight:600;line-height:1;
  background:#c9cdc9;color:var(--ink-2);border:2px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.18);overflow:hidden;white-space:nowrap;
}
.strm .sslot small{color:var(--mute);font-size:clamp(7px,2cqw,9px);font-weight:600}
.strm .sslot span{letter-spacing:.06em}
.strm .sslot.on{
  background:var(--yellow);color:var(--ink);box-shadow:2px 2px 0 var(--ink),inset 0 0 0 1px rgba(0,0,0,.08);
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.25);
}
.strm .sslot.on small{color:var(--orange-d)}
.strm .sslot.new{animation:strmStamp .6s cubic-bezier(.3,1.6,.5,1) both;z-index:1}
@keyframes strmStamp{0%{transform:translate(-50%,-50%) scale(1.9) rotate(-6deg);opacity:0}60%{transform:translate(-50%,-50%) scale(.92);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}

/* a fee just landed: "+0.012" lifts off the core / plate balance */
.strm-drip{
  position:absolute;right:6%;top:6%;font-family:var(--mono);font-size:clamp(9px,3cqw,13px);font-weight:600;
  color:var(--yellow);pointer-events:none;animation:strmDrip 1.4s forwards;
}
@keyframes strmDrip{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-18px)}}

/* the word slam: the dropped word punches in big over the door, holds, fades (1.2 s; JS clears the class at 1.3 s) */
.strm .sdoor-slam{
  position:absolute;inset:-6%;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;
  opacity:0;
}
.strm .sdoor-slam .sl-idx{
  background:var(--ink);color:var(--yellow);font-weight:800;font-size:clamp(8px,2.6cqw,13px);letter-spacing:.1em;text-transform:uppercase;
  padding:.5em .9em;border:2px solid var(--yellow);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.strm .sdoor-slam .sl-word{
  display:block;max-width:100%;font-family:var(--stencil);font-weight:900;font-size:clamp(34px,22cqw,120px);line-height:.9;text-transform:uppercase;
  color:#fff;background:var(--orange);border:clamp(3px,1cqw,5px) solid var(--ink);box-shadow:8px 8px 0 var(--ink);
  padding:.08em .18em .04em;text-align:center;overflow-wrap:anywhere;
}
.strm .sdoor-slam .sl-word.long{font-size:clamp(20px,11cqw,60px);line-height:1}
.strm .sdoor-slam.go{animation:strmSlam 1.2s cubic-bezier(.2,.9,.3,1) both}
@keyframes strmSlam{
  0%{opacity:0;transform:scale(2.4) rotate(-7deg)}
  12%{opacity:1;transform:scale(.94) rotate(1deg)}
  20%{transform:scale(1) rotate(0)}
  82%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.9)}
}

/* ---------- the middle: market cap odometer ---------- */
.strm-cap{border:3px solid var(--ink);background:var(--plate);box-shadow:6px 6px 0 var(--ink);padding:clamp(8px,1.4vh,14px) clamp(10px,1.6vw,18px);overflow:hidden}
.strm-cap-k{display:flex;align-items:center;gap:10px;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.strm-cap-k em{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:600;padding:2px 7px;border:2px solid var(--ink);line-height:1;background:#fff}
.strm-cap-k em.up{background:var(--yellow);color:var(--ink)}
.strm-cap-k em.down{background:var(--ink);color:#fff}
.strm-odo-wrap{overflow:hidden;margin-top:2px;line-height:1}
.strm-odo{
  display:inline-flex;align-items:flex-start;white-space:nowrap;transform-origin:0 50%;
  font-family:var(--stencil);font-weight:900;line-height:1;font-size:min(7.2vw,16vh);letter-spacing:.01em;
}
.strm[data-layout="port"] .strm-odo{font-size:clamp(44px,15vw,78px)}
.strm-odo .odo-cur{color:var(--orange);margin-right:.04em}
.strm .odo-digits{display:inline-flex;align-items:flex-start}
.strm .odo-sep{display:inline-block;height:1em;line-height:1;color:var(--ink-2);margin:0 .02em}
/* each digit is a 30-glyph strip; the strip moves in whole em steps, only the 1em window shows (clip, not overflow, so wide glyphs keep their sides) */
.strm .odo-d{display:inline-block;position:relative;height:1em;width:.52em;clip-path:inset(0 -.3em);text-align:center}
.strm .odo-strip{display:block;will-change:transform;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.strm .odo-strip.snap{transition:none}
.strm .odo-strip i{display:block;height:1em;line-height:1;font-style:normal}
.strm-odo.rebuilt{animation:strmRebuilt .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes strmRebuilt{0%{opacity:0;transform:translateY(.2em)}}

/* ---------- the ladder as a horizontal track ---------- */
.strm-track{position:relative;height:66px;padding:0 26px;flex:none}
.strm .trk-rail{position:absolute;left:26px;right:26px;top:24px;height:14px;border:3px solid var(--ink);background:#fff;overflow:hidden}
.strm .trk-fill{height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--orange) 0 8px,var(--orange-d) 8px 16px);transition:width 1s}
.strm .trk-steps{position:absolute;left:26px;right:26px;top:0;bottom:0}
.strm .trk-step{position:absolute;top:0;bottom:0;width:0}
.strm .trk-step i{position:absolute;left:-2px;top:18px;width:4px;height:26px;background:var(--ink)}
.strm .trk-step span{position:absolute;left:0;top:44px;transform:translateX(-50%);font-family:var(--stencil);font-weight:900;font-size:17px;line-height:1;white-space:nowrap;color:var(--ink-2)}
.strm .trk-step.jack span{transform:translateX(-85%)}
.strm .trk-step.hit span{color:var(--orange-d)}
.strm .trk-step.dropping span{color:var(--orange-d);animation:strmBlink 1s steps(2) infinite}
.strm .trk-step.dropping i{background:var(--orange-d)}
.strm .trk-step.open span{color:var(--ink);background:var(--yellow);padding:1px 3px}
.strm .trk-step.cracked span{color:var(--won);text-decoration:line-through}
.strm .trk-step.cracked i{background:var(--won)}
@keyframes strmBlink{50%{opacity:.4}}
.strm .trk-pin{position:absolute;top:0;transform:translateX(-50%);transition:left 1s;z-index:1;white-space:nowrap}
.strm .trk-pin span{display:inline-block;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600;padding:3px 7px;line-height:1;position:relative}
.strm .trk-pin span::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top:7px solid var(--ink);border-bottom:0}

/* ---------- the countdown ---------- */
.strm-next{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  border:3px solid var(--ink);background:var(--plate);box-shadow:6px 6px 0 var(--ink);
  padding:clamp(8px,1.2vh,14px) clamp(12px,1.6vw,20px);
}
.strm .nx-ring{width:clamp(64px,9vh,104px);height:clamp(64px,9vh,104px);flex:none;transform:rotate(-90deg);display:block}
.strm .nx-bg{fill:none;stroke:#fff;stroke-width:10}
.strm .nx-fg{fill:none;stroke:var(--orange);stroke-width:10;stroke-linecap:butt;transition:stroke-dashoffset .25s linear,stroke .3s}
.strm .nx-txt{display:flex;flex-direction:column;min-width:0}
.strm .nx-txt b{font-family:var(--stencil);font-weight:900;font-size:clamp(36px,6vh,66px);line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap}
.strm .nx-txt span{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
/* counting: ring drains to the next word; hot = under 5 s */
.strm-next.counting .nx-txt b{color:var(--orange-d)}
.strm-next.hot{border-color:var(--orange-d);box-shadow:6px 6px 0 var(--orange)}
.strm-next.hot .nx-fg{stroke:var(--orange-d)}
.strm-next.hot .nx-txt b{animation:strmBlink .5s steps(2) infinite}
/* idle: nothing drops, the number is the distance to the next cap, the ring is a plain steel dial */
.strm-next.idle .nx-fg{stroke:var(--steel-2);stroke-dashoffset:0!important}
.strm-next.idle .nx-bg{stroke:#fff}
.strm-next.allout{background:var(--yellow)}
.strm-next.allout .nx-fg{stroke:var(--ink);stroke-dashoffset:0!important}
.strm-next.done{background:var(--won);color:#fff;border-color:var(--ink)}
.strm-next.done .nx-txt span{color:#cfe0ff}
.strm-next.done .nx-fg{stroke:#fff;stroke-dashoffset:0!important}
.strm-next.done .nx-bg{stroke:rgba(255,255,255,.3)}

/* the crowd line */
.strm-net{display:flex;gap:18px;flex-wrap:wrap;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.strm-net span{display:inline-flex;align-items:baseline;gap:6px}
.strm-net b{font-family:var(--stencil);font-weight:900;font-size:24px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- the side: 4 small vault plates ---------- */
.strm-plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,12px);flex:none}
.strm .splate{border:3px solid var(--ink);background:var(--plate);box-shadow:4px 4px 0 var(--ink);display:flex;flex-direction:column;position:relative;overflow:hidden}
.strm .sp-top{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 8px;background:var(--ink);color:#fff}
.strm .sp-top b{font-family:var(--stencil);font-weight:900;font-size:clamp(18px,2.4vh,26px);line-height:1}
.strm .sp-badge{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;background:#fff;color:var(--ink);white-space:nowrap;line-height:1.3}
.strm .sp-sol{display:flex;align-items:baseline;gap:5px;padding:6px 8px 0;position:relative}
.strm .sp-sol b{font-family:var(--stencil);font-weight:900;font-size:clamp(22px,3.2vh,34px);line-height:1}
.strm .sp-sol span{font-weight:800;font-size:11px;color:var(--orange-d);letter-spacing:.1em}
.strm .sp-sol em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap}
.strm .sp-sol .strm-drip{right:8px;top:-4px;color:var(--orange-d);font-size:11px}
.strm .sp-bar{padding:6px 8px 0;font-size:11px;font-weight:600;color:var(--ink-2)}
.strm .sp-bar i{display:block;height:8px;border:2px solid var(--ink);background:#fff;margin-top:3px;position:relative;overflow:hidden}
.strm .sp-bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--orange);transition:width .6s}
.strm .sp-foot{padding:6px 8px 7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--orange-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* plate states */
.strm .splate.locked .sp-foot{color:var(--ink-2)}
.strm .splate.dropping{border-color:var(--orange-d);box-shadow:4px 4px 0 var(--orange)}
.strm .splate.dropping .sp-top{background:var(--orange)}
.strm .splate.dropping .sp-badge{background:var(--ink);color:var(--yellow);animation:strmBlink 1s steps(2) infinite}
.strm .splate.open .sp-badge{background:var(--yellow)}
.strm .splate.open .sp-bar i::after{background:var(--ink)}
.strm .splate.cracked{background:repeating-linear-gradient(-45deg,var(--plate) 0 10px,#dcdfdb 10px 20px)}
.strm .splate.cracked .sp-badge{background:var(--won);color:#fff}
.strm .splate.cracked .sp-foot{color:var(--won)}
.strm .splate.cracked .sp-bar i::after{background:var(--won)}
.strm .splate.you{box-shadow:4px 4px 0 var(--orange)}
.strm .splate.you .sp-foot{color:var(--orange-d)}

/* ---------- the live feed (last 8) ---------- */
.strm-feed{list-style:none;margin:0;padding:0;border:3px solid var(--ink);background:#fff;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.strm-feed li{display:flex;gap:10px;padding:7px 10px;border-bottom:1px solid #d2d5d1;font-size:clamp(12px,1.7vh,14px);line-height:1.3;align-items:baseline;flex:none}
.strm-feed li time{font-family:var(--mono);font-size:11px;color:var(--mute);flex:none;font-variant-numeric:tabular-nums}
.strm-feed li span{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.strm-feed li code{font-size:12px}
.strm-feed li.word{background:#fff8d6}
.strm-feed li.jack{background:var(--yellow)}
.strm-feed li.crack{background:var(--won);color:#fff}
.strm-feed li.crack time{color:#cfe0ff}
.strm-feed li.open{background:var(--orange);color:#fff}
.strm-feed li.open time{color:#ffe0d6}
.strm-feed li code.you{background:var(--orange);color:#fff;padding:0 4px}
.strm-feed li.crack code.you{background:#fff;color:var(--orange-d)}
.strm-feed li.new{animation:strmFeedIn .5s}
@keyframes strmFeedIn{from{transform:translateX(-14px);opacity:0}}

/* ---------- bottom hazard tape (same text as the page's own tape) ---------- */
.strm-tape{flex:none;background:var(--yellow);border-top:3px solid var(--ink);overflow:hidden;white-space:nowrap;position:relative;height:calc(34px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.strm-tape::before,.strm-tape::after{content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2;background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px)}
.strm-tape::before{left:0}.strm-tape::after{right:0}
.strm-tape-run{display:inline-flex;gap:48px;padding:7px 0 0 60px;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;animation:strmTape 60s linear infinite;will-change:transform}
.strm-tape-run span b{color:var(--orange-d)}
@keyframes strmTape{to{transform:translateX(-50%)}}

/* ---------- RED ALERT: a cap was hit (2.6 s) ---------- */
.strm-alert{position:absolute;inset:0;z-index:8;pointer-events:none;display:none;overflow:hidden}
.strm-alert.go{display:block}
.strm .al-tint{position:absolute;inset:0;background:var(--orange);opacity:0}
.strm-alert.go .al-tint{animation:strmTint 2.5s ease-out both}
@keyframes strmTint{0%{opacity:.7}18%{opacity:.25}30%{opacity:.5}44%{opacity:.18}100%{opacity:0}}
.strm .al-band{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  background:var(--ink);border-top:6px solid var(--yellow);border-bottom:6px solid var(--yellow);
  padding:clamp(14px,3vh,30px) 0;
}
.strm .al-band::before,.strm .al-band::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--yellow) 14px 28px)}
.strm .al-band::before{top:0}.strm .al-band::after{bottom:0}
.strm-alert.go .al-band{animation:strmBand 2.5s cubic-bezier(.2,.9,.3,1) both}
@keyframes strmBand{0%{transform:translate(-100%,-50%)}14%,84%{transform:translate(0,-50%)}100%{transform:translate(100%,-50%)}}
.strm .al-txt{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;color:#fff}
.strm .al-txt b{font-family:var(--stencil);font-weight:900;font-size:clamp(44px,11vw,150px);line-height:.9;text-transform:uppercase;color:var(--yellow);overflow-wrap:anywhere}
.strm .al-txt span{font-weight:800;font-size:clamp(12px,1.8vw,20px);letter-spacing:.14em;text-transform:uppercase;margin-top:10px}
.strm.red .strm-live i{animation-duration:.4s}

/* ---------- CRACKED: blue flash + the number (3.1 s) ---------- */
.strm-crack{position:absolute;inset:0;z-index:9;pointer-events:none;display:none;align-items:center;justify-content:center;padding:24px}
.strm-crack.go{display:flex}
.strm .cr-flash{position:absolute;inset:0;background:var(--won);opacity:0}
.strm-crack.go .cr-flash{animation:strmFlash 3s ease-out both}
@keyframes strmFlash{0%{opacity:.85}10%{opacity:.35}16%{opacity:.6}40%{opacity:.2}100%{opacity:0}}
.strm .cr-card{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  background:var(--plate);border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);
  padding:clamp(16px,3vh,32px) clamp(20px,4vw,48px);max-width:min(92vw,900px);
}
.strm .cr-card::before{content:"";position:absolute;left:-5px;right:-5px;top:-5px;height:12px;background:repeating-linear-gradient(-45deg,var(--ink) 0 12px,var(--won) 12px 24px)}
.strm .cr-k{font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--won);margin-top:8px}
.strm .cr-card b{font-family:var(--stencil);font-weight:900;font-size:clamp(40px,9vw,128px);line-height:.9;text-transform:uppercase;color:var(--won);overflow-wrap:anywhere}
.strm .cr-who{font-family:var(--mono);font-size:clamp(11px,1.4vw,15px);font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.strm-crack.go .cr-card{animation:strmCard 3s cubic-bezier(.3,1.5,.5,1) both}
@keyframes strmCard{0%{opacity:0;transform:scale(1.8) rotate(-4deg)}12%{opacity:1;transform:scale(.96)}18%{transform:scale(1)}86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}

/* ---------- narrow screens (phones, 375 wide) ---------- */
@media (max-width:720px){
  .strm-top{gap:8px;padding-left:10px;padding-right:10px}
  .strm-live{padding:4px 8px 4px 6px;gap:6px}
  .strm-live b{font-size:15px}
  .strm-live time{font-size:11px;padding-left:6px}
  .strm-logo{font-size:22px}
  .strm-dial{width:18px;height:18px}
  .strm-brand-t,.strm-brand code{display:none}
  .strm-ctl button{padding:5px 7px;font-size:13px}
  .strm-ctl button span{display:none}
  .strm-ctl .strm-x{font-size:15px;padding:5px 9px}
  .strm-hint{font-size:13px;padding:5px 9px 4px}
  .strm-grid{padding:10px 12px;gap:12px}
  .strm-cap{padding:8px 10px}
  .strm-track{height:60px;padding:0 20px}
  .strm .trk-rail,.strm .trk-steps{left:20px;right:20px}
  .strm .trk-step span{font-size:14px;top:42px}
  .strm .trk-pin span{font-size:11px;padding:2px 5px}
  .strm-next{padding:8px 12px;gap:12px}
  .strm .nx-ring{width:64px;height:64px}
  .strm .nx-txt b{font-size:34px}
  .strm .nx-txt span{font-size:11px}
  .strm-net b{font-size:20px}
  .strm-plates{gap:8px}
  .strm .sp-top{padding:4px 7px}
  .strm .sp-sol{padding:5px 7px 0}
  .strm .sp-foot{font-size:10px}
  .strm-feed li{padding:6px 8px;font-size:12px}
  .strm-tape-run{font-size:12px;padding-top:8px}
  .strm .al-txt span{font-size:11px;letter-spacing:.1em}
  .strm .cr-card{box-shadow:8px 8px 0 var(--ink)}
}
/* a short landscape window (OBS at 720p, laptops): keep the three columns but shrink the heavy type */
@media (max-height:620px) and (min-aspect-ratio:1/1){
  .strm[data-layout="land"] .sdoor-wrap{width:min(100%,calc(100vh - 150px))}
  .strm-track{height:54px}
  .strm .trk-step span{font-size:14px;top:40px}
  .strm-cap{padding:6px 12px}
  .strm-next{padding:6px 12px}
}

/* ---------- reduced motion: no tape run, no pulses, no shake — moments still show, they just cut in and out ---------- */
@media (prefers-reduced-motion:reduce){
  .strm-tape-run,.strm-live i,.strm-dial,.strm-btn.on i,.strm .sdoor.dropping .sdoor-face,.strm .trk-step.dropping span,
  .strm .splate.dropping .sp-badge,.strm-next.hot .nx-txt b,.strm .sdoor.shake,.strm-feed li.new,.strm .sslot.new,.strm-odo.rebuilt{animation:none!important}
  .strm-tape-run{transform:none}
  .strm .odo-strip,.strm .sdoor-ring,.strm .trk-fill,.strm .trk-pin,.strm .nx-fg{transition:none!important}
  .strm .sdoor-slam.go{animation:none!important;opacity:1}
  .strm-hint.show{animation:none!important;opacity:1;transform:translate(-50%,0)}
  .strm-alert.go .al-tint{animation:none!important;opacity:.3}
  .strm-alert.go .al-band{animation:none!important;transform:translateY(-50%)}
  .strm-crack.go .cr-flash{animation:none!important;opacity:.3}
  .strm-crack.go .cr-card{animation:none!important;opacity:1;transform:none}
  .strm-drip{animation:none!important;opacity:1}
}