/* Standalone host reset only. Everything the game owns lives under #tmn-sweeper and
   every name it uses is prefixed swp-, so a host stylesheet cannot reach into it. */



#tmn-sweeper{
  --swp-paper:#F4F1E8; --swp-cream:#EDEADF; --swp-sage-2:#CFDAC4;
  --swp-ink:#0F2220; --swp-forest:#01573B; --swp-deep:#013A28; --swp-lime:#9ECD41; --swp-alert:#A03B2E;
  --swp-display:'indivisible','Helvetica Neue',Helvetica,Arial,sans-serif;
  --swp-text:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --swp-mono:'novel-mono-pro',Menlo,ui-monospace,SFMono-Regular,monospace;
  --swp-chip:#F3F0E4; --swp-chip-hi:#FFFFFF; --swp-chip-lo:rgba(15,34,32,.58);
  --swp-open:#DDD8C6;
  --swp-gap:2px; --swp-cs:52px;
  --swp-pw:600px; --swp-cw:600px; --swp-endpad:40px;
  position:relative;overflow:hidden;min-height:calc(100vh - var(--swp-top,0px));
  background:#02120F;color:var(--swp-cream);font-family:var(--swp-text);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
@supports(height:100dvh){#tmn-sweeper{min-height:calc(100dvh - var(--swp-top,0px))}}
#tmn-sweeper *{box-sizing:border-box}
#tmn-sweeper button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------------- the scene ---------------- */
#tmn-sweeper #swp-sea{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#0E3A30 0%,#0B2C20 18%,#062A1E 42%,#04211A 68%,#02120F 100%)}
#tmn-sweeper #swp-shafts{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;mix-blend-mode:screen;
  background:repeating-linear-gradient(99deg,rgba(158,205,65,0) 0 120px,rgba(198,230,180,.10) 152px 214px,rgba(158,205,65,0) 262px 400px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);mask-image:linear-gradient(180deg,#000,transparent 72%);
  animation:swp-drift 26s linear infinite;transition:opacity .6s}
@keyframes swp-drift{to{background-position:380px 0}}
#tmn-sweeper #swp-floorart{position:absolute;left:-6vw;right:-6vw;bottom:0;width:112vw;z-index:1;pointer-events:none;
  filter:brightness(2.25) saturate(1.1);opacity:.96;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
#tmn-sweeper #swp-floorfar{position:absolute;left:-10vw;right:-10vw;bottom:22vh;width:120vw;z-index:1;pointer-events:none;opacity:.34;
  filter:brightness(1.5) saturate(.9);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 52%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,#000 52%,transparent 96%)}
#tmn-sweeper #swp-vessel{position:absolute;right:5vw;top:5vh;width:min(230px,17vw);z-index:2;pointer-events:none;opacity:.88;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));animation:swp-bob 7.5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes swp-bob{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(7px) rotate(1.6deg)}}
#tmn-sweeper #swp-wake{position:absolute;right:2vw;top:14vh;width:min(980px,68vw);z-index:1;pointer-events:none;opacity:.30;
  transform:rotate(15deg);transform-origin:100% 0;filter:brightness(1.3);
  -webkit-mask-image:linear-gradient(265deg,#000 6%,rgba(0,0,0,.5) 48%,transparent 88%);mask-image:linear-gradient(265deg,#000 6%,rgba(0,0,0,.5) 48%,transparent 88%)}
#tmn-sweeper.swp-out #swp-vessel{filter:grayscale(.55) brightness(.78)}
#tmn-sweeper.swp-out #swp-wake{opacity:.13;filter:brightness(.9) saturate(.5)}
#tmn-sweeper.swp-out #swp-sea{filter:brightness(.62) saturate(.72)}
#tmn-sweeper.swp-out #swp-shafts{opacity:.16}
#tmn-sweeper.swp-out #swp-floorart{filter:brightness(1.2) saturate(.42)}
#tmn-sweeper #swp-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(64% 62% at 50% 47%,rgba(2,18,15,0) 26%,rgba(2,18,15,.30) 62%,rgba(2,18,15,.66) 100%)}

/* ---------------- stage ---------------- */
#tmn-sweeper #swp-stage{position:relative;z-index:3;min-height:calc(100vh - var(--swp-top,0px));display:flex;align-items:center;justify-content:center;padding:18px 28px}
@supports(height:100dvh){#tmn-sweeper #swp-stage{min-height:calc(100dvh - var(--swp-top,0px))}}

/* ---------------- the panel: one paper object ---------------- */
#tmn-sweeper .swp-panel{background:var(--swp-paper);border:2px solid var(--swp-ink);padding:14px;
  box-shadow:20px 20px 0 0 #01573B;position:relative}
#tmn-sweeper .swp-panel.swp-shake{animation:swp-shk .42s cubic-bezier(.3,.7,.4,1)}
@keyframes swp-shk{12%{transform:translate(-7px,3px)}30%{transform:translate(6px,-4px)}48%{transform:translate(-4px,2px)}66%{transform:translate(3px,-1px)}100%{transform:none}}

/* the device head: title bar and counter plate, one ink block */
#tmn-sweeper .swp-dev{background:var(--swp-ink)}
#tmn-sweeper .swp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;
  border-bottom:1px solid rgba(237,234,223,.16);
  font-family:var(--swp-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
#tmn-sweeper .swp-bar .swp-brand{display:inline-flex;align-items:center;gap:8px;color:var(--swp-cream);letter-spacing:.18em}
#tmn-sweeper .swp-bar .swp-brand i{width:9px;height:9px;background:var(--swp-lime);display:block;font-style:normal;
  box-shadow:0 0 11px 1px rgba(158,205,65,.9)}
#tmn-sweeper.swp-out .swp-bar .swp-brand i{background:rgba(237,234,223,.3);box-shadow:none}
#tmn-sweeper .swp-bar .swp-sp{flex:1}
#tmn-sweeper .swp-bar button{font:inherit;letter-spacing:.06em;text-transform:uppercase;color:rgba(237,234,223,.6);
  padding:4px 2px;text-decoration:underline;text-underline-offset:4px}
#tmn-sweeper .swp-bar button:hover{color:var(--swp-cream)}
#tmn-sweeper .swp-bar .swp-snd{padding:4px 2px;line-height:0;text-decoration:none}
#tmn-sweeper .swp-bar .swp-snd svg{width:16px;height:16px;display:block}
#tmn-sweeper .swp-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 18px 14px}
#tmn-sweeper .swp-ctr .swp-lab{display:block;font-family:var(--swp-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(237,234,223,.46)}
#tmn-sweeper .swp-ctr b{display:block;margin-top:5px;font-family:var(--swp-mono);font-weight:700;font-size:44px;line-height:.92;
  letter-spacing:.03em;color:var(--swp-cream);font-variant-numeric:tabular-nums}
#tmn-sweeper .swp-ctr.swp-secs{text-align:right}
#tmn-sweeper.swp-out .swp-ctr b{color:rgba(237,234,223,.62)}

/* the reset: a buoy light, not a face */
#tmn-sweeper .swp-reset{position:relative;width:88px;height:100px;background:#04211A;border:2px solid var(--swp-lime);
  box-shadow:5px 5px 0 0 #000;transition:none;overflow:hidden}
#tmn-sweeper .swp-reset img{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);
  object-fit:contain;object-position:50% 50%;z-index:2;display:block;
  filter:drop-shadow(0 0 9px rgba(158,205,65,.55))}
#tmn-sweeper .swp-reset .swp-glow{position:absolute;left:50%;top:27%;width:56px;height:56px;margin:-28px 0 0 -28px;z-index:1;
  background:radial-gradient(circle,rgba(158,205,65,.85) 0,rgba(158,205,65,.28) 40%,rgba(158,205,65,0) 72%);
  transition:opacity .25s}
#tmn-sweeper .swp-reset.swp-dn{transform:translate(3px,3px);box-shadow:none}
#tmn-sweeper .swp-reset.swp-dn .swp-glow{opacity:.12}
#tmn-sweeper .swp-reset.swp-dead{border-color:rgba(237,234,223,.34);box-shadow:5px 5px 0 0 #000}
#tmn-sweeper .swp-reset.swp-dead img{filter:grayscale(1) brightness(.52)}
#tmn-sweeper .swp-reset.swp-dead .swp-glow{opacity:0}
#tmn-sweeper .swp-reset.swp-win .swp-glow{opacity:1;width:84px;height:84px;margin:-42px 0 0 -42px}
#tmn-sweeper .swp-reset.swp-win img{filter:drop-shadow(0 0 18px rgba(158,205,65,.95)) brightness(1.12)}

/* ---------------- the board ---------------- */
#tmn-sweeper .swp-boardwrap{position:relative;margin:11px auto 0;overflow:auto;width:max-content;max-width:100%}
#tmn-sweeper .swp-boardin{position:relative;display:block;padding:calc(var(--swp-gap) + 1px);background:var(--swp-ink);
  box-shadow:inset 0 0 0 2px #04100D}
#tmn-sweeper .swp-bed{position:absolute;inset:0;background:var(--swp-ink)}
#tmn-sweeper .swp-board{position:relative;display:grid;gap:var(--swp-gap);z-index:2}
#tmn-sweeper .swp-board.swp-reading{cursor:crosshair}
#tmn-sweeper .swp-board.swp-engine{cursor:default}
#tmn-sweeper .swp-c{position:relative;width:var(--swp-cs);height:var(--swp-cs);background:var(--swp-chip);cursor:pointer;
  box-shadow:inset 3px 3px 0 0 var(--swp-chip-hi), inset -3px -3px 0 0 var(--swp-chip-lo), 2px 2px 0 0 rgba(3,14,11,.92)}
#tmn-sweeper .swp-c.swp-dn{background:#DBD7C4;transform:translate(2px,2px);
  box-shadow:inset 3px 3px 0 0 rgba(15,34,32,.42), inset -1px -1px 0 0 rgba(255,255,255,.45)}
/* opened: one flat clean ground, a touch darker than the chip, sunken at the top-left.
   No painting inside the grid. Raised chip = unknown, flat sunken cell = known. */
#tmn-sweeper .swp-c.swp-r{background:var(--swp-open);cursor:default;
  box-shadow:inset 0 0 0 1px rgba(15,34,32,.17), inset 3px 3px 0 0 rgba(15,34,32,.09)}
#tmn-sweeper.swp-out .swp-c.swp-r{background:#CFD0C5;
  box-shadow:inset 0 0 0 1px rgba(15,34,32,.16), inset 3px 3px 0 0 rgba(15,34,32,.08)}
#tmn-sweeper .swp-c .swp-n{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--swp-mono);font-weight:700;
  font-size:calc(var(--swp-cs) * .64);line-height:1;letter-spacing:-.03em}
/* the eight. Brand hues, separated by hue and by value. Measured ratios in NOTES.md */
#tmn-sweeper .swp-n1{color:#01573B}#tmn-sweeper .swp-n2{color:#A03B2E}#tmn-sweeper .swp-n3{color:#0F2220}#tmn-sweeper .swp-n4{color:#42580A}
#tmn-sweeper .swp-n5{color:#6B2119}#tmn-sweeper .swp-n6{color:#013A28}#tmn-sweeper .swp-n7{color:#444F48}#tmn-sweeper .swp-n8{color:#2A5215}
#tmn-sweeper .swp-c .swp-mk{position:absolute;left:14%;top:14%;width:72%;height:72%;z-index:3}
#tmn-sweeper .swp-c .swp-mk svg{width:100%;height:100%;display:block}
/* DECLINED: the flag every sweeper knows, stamped in ink on the raised chip */
#tmn-sweeper .swp-c.swp-dec{background:var(--swp-chip);
  box-shadow:inset 3px 3px 0 0 var(--swp-chip-hi), inset -3px -3px 0 0 var(--swp-chip-lo), 2px 2px 0 0 rgba(3,14,11,.92);
  animation:swp-slam .13s cubic-bezier(.2,1.5,.4,1)}
#tmn-sweeper .swp-c.swp-dec .swp-mk{left:16%;top:13%;width:68%;height:74%}
@keyframes swp-slam{from{transform:scale(1.34)}}
/* AWAITING DATA */
#tmn-sweeper .swp-c.swp-awt{background:var(--swp-chip);box-shadow:inset 3px 3px 0 0 var(--swp-chip-hi), inset -3px -3px 0 0 var(--swp-chip-lo), 2px 2px 0 0 rgba(3,14,11,.92)}
/* live findings, shown on an outage. Ink blocks, no red */
#tmn-sweeper .swp-c.swp-live{background:#0B1D19;box-shadow:inset 0 0 0 2px #030D0B;cursor:default}
#tmn-sweeper .swp-c.swp-boom{background:var(--swp-cream);box-shadow:0 0 0 4px var(--swp-ink), inset 0 0 0 3px var(--swp-ink);z-index:4;cursor:default;
  animation:swp-slam .18s cubic-bezier(.2,1.5,.4,1)}
#tmn-sweeper .swp-c.swp-wrong{background:var(--swp-cream);box-shadow:inset 0 0 0 2px var(--swp-ink)}

/* read: the lead line descending */
#tmn-sweeper .swp-fx{position:absolute;inset:var(--swp-gap);z-index:4;pointer-events:none}
#tmn-sweeper .swp-lead{position:absolute;top:0;width:3px;background:var(--swp-lime);height:0;margin-left:-1.5px;
  box-shadow:0 0 16px 2px rgba(158,205,65,.85);transition:height .5s cubic-bezier(.35,0,.25,1)}
#tmn-sweeper .swp-lead i{position:absolute;left:-5.5px;bottom:-7px;width:14px;height:14px;background:var(--swp-lime);display:block;
  box-shadow:0 0 16px 3px rgba(158,205,65,.9)}
#tmn-sweeper .swp-verdict{position:absolute;font-family:var(--swp-mono);font-weight:700;font-size:12px;letter-spacing:.14em;
  padding:5px 7px;transform:translate(-50%,-116%);white-space:nowrap;animation:swp-vpop .16s cubic-bezier(.2,1.5,.4,1)}
@keyframes swp-vpop{from{transform:translate(-50%,-90%) scale(.8);opacity:0}}
#tmn-sweeper .swp-verdict.swp-safe{background:var(--swp-lime);color:var(--swp-ink);border:1.5px solid var(--swp-ink)}
#tmn-sweeper .swp-verdict.swp-risky{background:var(--swp-cream);color:var(--swp-ink);border:1.5px solid var(--swp-ink)}
/* the top row has no room above it: the tag drops under the tile instead */
#tmn-sweeper .swp-verdict.swp-below{transform:translate(-50%,16%)}
@keyframes swp-vpopb{from{transform:translate(-50%,-6%) scale(.8);opacity:0}}
#tmn-sweeper .swp-verdict.swp-below{animation-name:swp-vpopb}
#tmn-sweeper .swp-verdict.swp-gone{opacity:0;transition:opacity .15s linear;animation:none}
#tmn-sweeper .swp-botcur{position:absolute;z-index:5;transition:left .34s cubic-bezier(.3,0,.2,1),top .34s cubic-bezier(.3,0,.2,1)}
#tmn-sweeper .swp-botcur svg{display:block;filter:drop-shadow(2px 2px 0 rgba(15,34,32,.8))}
#tmn-sweeper .swp-botcur .swp-lbl{position:absolute;left:15px;top:15px;background:var(--swp-cream);color:var(--swp-ink);border:1.5px solid var(--swp-ink);
  font-family:var(--swp-mono);font-size:12px;letter-spacing:.1em;padding:3px 5px;white-space:nowrap}
/* the engine's own cursor: lime, labelled engine */
#tmn-sweeper .swp-botcur.swp-engcur{transition:left .3s cubic-bezier(.3,0,.2,1),top .3s cubic-bezier(.3,0,.2,1)}
#tmn-sweeper .swp-botcur.swp-engcur svg{filter:drop-shadow(2px 2px 0 rgba(15,34,32,.85))}
#tmn-sweeper .swp-botcur.swp-engcur .swp-lbl{background:var(--swp-lime);color:var(--swp-ink);border-color:var(--swp-ink)}
/* small tiles get a small label and a small tag, or the two cannot both fit around a 22px cell */
#tmn-sweeper .swp-boardin.swp-tiny .swp-verdict{font-size:10px;padding:2px 4px;letter-spacing:.1em}
/* type and padding only: setting top/left here would out-specify the flip rules and
   squash the label between a top and a bottom that both apply */
#tmn-sweeper .swp-boardin.swp-tiny .swp-botcur .swp-lbl{font-size:10px;padding:1px 4px}
/* on the last rows a tag and the label both want the strip above the tile and neither fits
   outside the board. The tag is the event, the label is only a name: the label stands down
   for the second the tag is up. The arrow itself never goes. */
#tmn-sweeper .swp-botcur.swp-quiet .swp-lbl{opacity:0;transition:none}
#tmn-sweeper .swp-botcur .swp-lbl{transition:opacity .14s linear .1s}
/* near an edge the label turns inward, so the board well never cuts it off */
#tmn-sweeper .swp-botcur.swp-flipx .swp-lbl{left:auto;right:6px}
#tmn-sweeper .swp-botcur.swp-flipy .swp-lbl{top:auto;bottom:var(--swp-lblup,8px)}
#tmn-sweeper .swp-botcur.swp-hidden{display:none}
#tmn-sweeper .swp-c.swp-botpick{outline:2px solid var(--swp-cream);outline-offset:-2px}

/* ---------------- attract: the engine sweeps, a plate sits over it ----------------
   The plate covers the middle of the board only. The engine keeps working behind and
   around it, and the status line below it keeps narrating. */
/* the well hugs the board, so the scrim dims the board and never the paper beside it */
#tmn-sweeper .swp-well{position:relative;width:max-content;max-width:100%;margin:0 auto}
/* the scrim sits over the tiles but under the effects layer, so the cursor, its label and
   the SAFE / RISKY tags keep their full colour while the board behind them goes quiet */
#tmn-sweeper .swp-wscrim{position:absolute;inset:0;z-index:3;background:rgba(15,34,32,.38);pointer-events:none}
#tmn-sweeper .swp-plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
  width:min(90%,430px);padding:22px 26px 24px;text-align:center;
  background:var(--swp-paper);border:2px solid var(--swp-ink);box-shadow:10px 10px 0 0 var(--swp-ink);
  animation:swp-slam .17s cubic-bezier(.2,1.5,.4,1)}
#tmn-sweeper .swp-plate h5{font-family:var(--swp-display);font-weight:700;font-size:clamp(21px,2.3vw,29px);
  line-height:1.04;letter-spacing:-.025em;margin:0 0 13px;color:var(--swp-ink)}
#tmn-sweeper .swp-plate p{font-size:14.5px;line-height:1.45;margin:0;color:rgba(15,34,32,.8)}
#tmn-sweeper .swp-plate p+p{margin-top:5px}
#tmn-sweeper .swp-plate .swp-go{margin-top:18px;font-family:var(--swp-mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--swp-lime);color:var(--swp-ink);border:2px solid var(--swp-ink);
  padding:15px 24px;box-shadow:5px 5px 0 0 var(--swp-ink);animation:swp-blink 1.5s steps(1,end) infinite}
#tmn-sweeper .swp-plate .swp-go:active{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--swp-ink)}
#tmn-sweeper .swp-plate .swp-go:focus-visible{outline:2px solid var(--swp-ink);outline-offset:3px}
/* a hard step, never a fade, and never a frame where the call to action looks switched off */
@keyframes swp-blink{0%,64%{background:var(--swp-lime)}65%,100%{background:#CBE68A}}
@media (prefers-reduced-motion:reduce){#tmn-sweeper .swp-plate .swp-go{background:var(--swp-lime)}}

/* foot: status and Read, then the level rail */
/* the status line speaks the verdict, then the detail. The counts are their own row,
   so the verdict line never has to carry a number it does not mean. */
#tmn-sweeper .swp-foot{display:flex;align-items:center;gap:14px;margin-top:11px;padding:0 2px}
#tmn-sweeper .swp-stwrap{flex:1;min-width:0}
#tmn-sweeper .swp-st{font-family:var(--swp-mono);font-size:13px;letter-spacing:.05em;color:rgba(15,34,32,.68);
  min-height:25px;display:flex;align-items:center;gap:0;flex-wrap:wrap}
#tmn-sweeper .swp-st .swp-v:empty{display:none}
#tmn-sweeper .swp-st .swp-v{font-weight:400;color:var(--swp-ink);letter-spacing:.13em;padding:4px 7px}
#tmn-sweeper .swp-st .swp-v.swp-vidle{padding:4px 0;letter-spacing:.05em;color:rgba(15,34,32,.6)}
#tmn-sweeper .swp-st .swp-v.swp-vsafe{background:var(--swp-lime);color:var(--swp-ink)}
#tmn-sweeper .swp-st .swp-v.swp-vrisky{background:var(--swp-cream);color:var(--swp-ink);box-shadow:inset 0 0 0 1.5px var(--swp-ink)}
#tmn-sweeper .swp-st .swp-v.swp-vawait{background:var(--swp-ink);color:var(--swp-cream)}
#tmn-sweeper .swp-st .swp-v.swp-voutage{background:var(--swp-ink);color:var(--swp-cream)}
#tmn-sweeper .swp-st .swp-v.swp-vbot{background:var(--swp-cream);color:var(--swp-ink);box-shadow:inset 0 0 0 1.5px rgba(15,34,32,.4)}
#tmn-sweeper .swp-st .swp-v.swp-vengine{background:var(--swp-ink);color:var(--swp-lime)}
#tmn-sweeper .swp-st .swp-d{padding-left:2px}
#tmn-sweeper .swp-counts{font-family:var(--swp-mono);font-size:12px;letter-spacing:.06em;color:rgba(15,34,32,.5);margin-top:5px}
#tmn-sweeper .swp-rail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:0 2px}
#tmn-sweeper .swp-rail .swp-lvl{display:flex}
#tmn-sweeper .swp-rail .swp-lvl button+button{margin-left:-2px}
#tmn-sweeper .swp-rail button{font-family:var(--swp-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:7px 10px;
  border:2px solid rgba(15,34,32,.3);color:rgba(15,34,32,.6)}
#tmn-sweeper .swp-rail button:hover{border-color:var(--swp-ink);color:var(--swp-ink)}
#tmn-sweeper .swp-rail button.swp-on{background:var(--swp-lime);border-color:var(--swp-ink);color:var(--swp-ink);position:relative;z-index:2}
#tmn-sweeper .swp-rail button.swp-eng-btn{border-color:var(--swp-forest);color:var(--swp-forest)}
#tmn-sweeper .swp-rail button.swp-eng-btn:hover{border-color:var(--swp-ink);color:var(--swp-ink)}
#tmn-sweeper .swp-rail .swp-sp{flex:1}
#tmn-sweeper .swp-rail .swp-break{flex-basis:100%;height:0;margin:0}
#tmn-sweeper .swp-rd{font-family:var(--swp-mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  background:var(--swp-paper);color:var(--swp-ink);border:2px solid var(--swp-ink);padding:11px 20px;
  box-shadow:4px 4px 0 0 var(--swp-ink);transition:transform .12s,box-shadow .12s}
#tmn-sweeper .swp-rd:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--swp-ink)}
#tmn-sweeper .swp-rd:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--swp-ink)}
#tmn-sweeper .swp-rd.swp-on{background:var(--swp-lime)}
#tmn-sweeper .swp-rd.swp-def{background:var(--swp-lime)}
#tmn-sweeper .swp-rd:disabled{opacity:.36;box-shadow:2px 2px 0 0 var(--swp-ink);transform:none;cursor:default}

/* ---------------- cards over the scene ---------------- */
#tmn-sweeper .swp-scrim{position:fixed;inset:0;z-index:40;background:rgba(2,18,15,.72);display:flex;align-items:center;
  justify-content:center;padding:26px;overflow:auto}
/* the card never sits on the board it talks about. Panel and card are one centred pair,
   64px apart, the pair measured and centred in the viewport. */
#tmn-sweeper.swp-aside #swp-stage{justify-content:flex-start;padding-left:var(--swp-endpad);padding-right:0}
#tmn-sweeper.swp-aside .swp-scrim{justify-content:flex-start;align-items:center;
  padding:26px 0 26px calc(var(--swp-endpad) + var(--swp-pw) + 64px);
  background:rgba(2,18,15,.14)}
#tmn-sweeper.swp-aside .swp-scrim .swp-card{margin:0;width:var(--swp-cw);box-shadow:16px 16px 0 0 #01573B}
#tmn-sweeper .swp-card{background:var(--swp-paper);color:var(--swp-ink);border:2px solid var(--swp-ink);box-shadow:16px 16px 0 0 rgba(1,87,59,.7);
  width:min(760px,100%);padding:clamp(22px,3vw,34px);animation:swp-cpop .2s cubic-bezier(.2,1.3,.4,1);margin:auto}
@keyframes swp-cpop{from{transform:translateY(-12px);opacity:0}}
#tmn-sweeper .swp-card.swp-clean{border-top:8px solid var(--swp-lime)}
#tmn-sweeper .swp-card h4{font-family:var(--swp-display);font-weight:700;font-size:clamp(23px,2.6vw,34px);line-height:1.1;
  letter-spacing:-.02em;margin:0 0 12px}
#tmn-sweeper .swp-card p{font-size:15.5px;line-height:1.55;margin:0 0 13px;color:rgba(15,34,32,.82);max-width:62ch}
#tmn-sweeper .swp-card pre{font-family:var(--swp-mono);font-size:12.5px;line-height:1.75;white-space:pre-wrap;margin:0;
  color:rgba(15,34,32,.84);max-height:52vh;overflow:auto}
#tmn-sweeper .swp-pair{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid rgba(15,34,32,.24);
  border-bottom:1.5px solid rgba(15,34,32,.24);margin:18px 0}
#tmn-sweeper .swp-pair>div{padding:16px 0}
#tmn-sweeper .swp-pair>div+div{border-left:1.5px solid rgba(15,34,32,.24);padding-left:22px}
#tmn-sweeper .swp-pair .swp-k{display:block;font-family:var(--swp-mono);font-size:12px;letter-spacing:.16em;color:rgba(15,34,32,.55);margin-bottom:9px}
#tmn-sweeper .swp-pair .swp-fig{font-family:var(--swp-display);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.1;
  letter-spacing:-.025em;color:var(--swp-ink);margin-bottom:9px;white-space:nowrap}
#tmn-sweeper .swp-pair .swp-v{font-family:var(--swp-mono);font-size:12.5px;line-height:1.6;color:rgba(15,34,32,.66)}
#tmn-sweeper .swp-pair .swp-eng .swp-fig{color:var(--swp-forest)}
#tmn-sweeper .swp-pair .swp-eng .swp-v{color:rgba(1,87,59,.8)}
#tmn-sweeper .swp-pair .swp-eng .swp-k{color:var(--swp-forest)}
#tmn-sweeper .swp-line{font-family:var(--swp-display);font-weight:700;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.015em;
  margin:0 0 20px;color:var(--swp-ink)}
#tmn-sweeper .swp-rcpt{border-collapse:collapse;font-family:var(--swp-mono);font-size:13px;margin:0 0 15px;width:100%;max-width:440px}
#tmn-sweeper .swp-rcpt th,#tmn-sweeper .swp-rcpt td{text-align:left;padding:6px 16px 6px 0;border-bottom:1px solid rgba(15,34,32,.14)}
#tmn-sweeper .swp-rcpt th{font-weight:400;letter-spacing:.12em;font-size:12px;color:rgba(15,34,32,.55)}
#tmn-sweeper .swp-rcpt td.swp-hot{background:var(--swp-cream);font-weight:700;padding-left:6px}
#tmn-sweeper .swp-best{border-collapse:collapse;font-family:var(--swp-mono);font-size:13px;width:100%;margin-bottom:14px}
#tmn-sweeper .swp-best td{padding:6px 14px 6px 0;border-bottom:1px solid rgba(15,34,32,.14)}
#tmn-sweeper .swp-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
#tmn-sweeper .swp-b{display:inline-flex;align-items:center;font-family:var(--swp-mono);font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;padding:15px 22px;border:2px solid var(--swp-ink);color:var(--swp-ink);text-decoration:none;
  box-shadow:5px 5px 0 0 var(--swp-ink);transition:transform .14s,box-shadow .14s}
#tmn-sweeper .swp-b:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--swp-ink)}
#tmn-sweeper .swp-b:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--swp-ink)}
#tmn-sweeper .swp-b.swp-pri{background:var(--swp-lime)}
#tmn-sweeper .swp-b.swp-sec{background:var(--swp-paper)}
#tmn-sweeper .swp-b.swp-eng-b{background:var(--swp-paper);border-color:var(--swp-forest);color:var(--swp-forest);box-shadow:5px 5px 0 0 var(--swp-forest)}
#tmn-sweeper .swp-b.swp-eng-b:hover{box-shadow:7px 7px 0 0 var(--swp-forest)}
#tmn-sweeper .swp-b.swp-ter{background:none;border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px;padding:15px 6px}
#tmn-sweeper .swp-b.swp-ter:hover{transform:none;box-shadow:none}
#tmn-sweeper .swp-b:focus{outline:none}
#tmn-sweeper .swp-b:focus-visible{outline:2px solid var(--swp-ink);outline-offset:3px}
#tmn-sweeper .swp-rd:focus{outline:none}
#tmn-sweeper .swp-rd:focus-visible{outline:2px solid var(--swp-ink);outline-offset:3px}
#tmn-sweeper .swp-c:focus{outline:none}
#tmn-sweeper .swp-field{font-family:var(--swp-mono);font-size:14px;padding:11px 12px;border:2px solid var(--swp-ink);background:#fff;
  color:var(--swp-ink);width:min(320px,100%);margin-bottom:16px;border-radius:0}
#tmn-sweeper .swp-field:focus{outline:none;box-shadow:0 0 0 3px var(--swp-lime)}
#tmn-sweeper .swp-field::selection{background:var(--swp-lime);color:var(--swp-ink)}
#tmn-sweeper .swp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;background:var(--swp-ink);color:var(--swp-cream);
  border:1.5px solid var(--swp-lime);font-family:var(--swp-mono);font-size:12.5px;letter-spacing:.08em;padding:11px 15px;
  animation:swp-cpop .18s ease}

/* ---------------- phone ---------------- */
@media (max-width:600px){
  /* the host page keeps a 79px sticky header, so the whole panel has to live in what is
     left of the phone. Every band of chrome here is measured, not guessed. */
  #tmn-sweeper #swp-stage{padding:10px 9px;align-items:flex-start}
  #tmn-sweeper .swp-panel{padding:8px;box-shadow:8px 8px 0 0 #01573B;width:100%}
  #tmn-sweeper .swp-bar{padding:6px 9px;gap:7px;font-size:11px;letter-spacing:.07em}
  #tmn-sweeper .swp-bar .swp-brand{letter-spacing:.09em}
  #tmn-sweeper .swp-bar .swp-brand i{width:8px;height:8px}
  #tmn-sweeper .swp-bar button{padding:2px 2px}
  #tmn-sweeper .swp-boardwrap{margin-top:7px}
  #tmn-sweeper .swp-rail{gap:5px;margin-top:7px}
  #tmn-sweeper .swp-rail button{padding:6px 8px;font-size:11px;letter-spacing:.04em}
  #tmn-sweeper .swp-rail .swp-sp{display:none}
  #tmn-sweeper #swp-vessel{width:120px;right:2vw;top:1.5vh;opacity:.7}
  #tmn-sweeper #swp-wake{opacity:.2;top:9vh}
  #tmn-sweeper #swp-floorfar{display:none}
  #tmn-sweeper .swp-head{padding:6px 10px 7px;gap:8px}
  #tmn-sweeper .swp-ctr b{font-size:25px;margin-top:3px}
  #tmn-sweeper .swp-ctr .swp-lab{font-size:10px;letter-spacing:.11em}
  #tmn-sweeper .swp-reset{width:44px;height:52px;box-shadow:3px 3px 0 0 #000}
  #tmn-sweeper .swp-reset img{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
  #tmn-sweeper .swp-reset .swp-glow{width:34px;height:34px;margin:-17px 0 0 -17px}
  #tmn-sweeper .swp-reset.swp-win .swp-glow{width:50px;height:50px;margin:-25px 0 0 -25px}
  /* the plate must leave the top and bottom rows of the board in plain sight */
  /* measured off the viewport, not off the board: a narrow board would wrap the second line
     to three and push the plate past the two rows it has to leave showing */
  #tmn-sweeper .swp-plate{width:min(93vw,332px);padding:11px 12px 12px;box-shadow:6px 6px 0 0 var(--swp-ink)}
  #tmn-sweeper .swp-plate h5{font-size:18px;margin:0 0 7px}
  #tmn-sweeper .swp-plate p{font-size:11.5px;line-height:1.34}
  #tmn-sweeper .swp-plate p+p{margin-top:3px}
  #tmn-sweeper .swp-plate .swp-go{margin-top:10px;padding:10px 13px;font-size:11.5px;letter-spacing:.09em;
    box-shadow:4px 4px 0 0 var(--swp-ink)}
  #tmn-sweeper .swp-foot{gap:8px;margin-top:7px}
  #tmn-sweeper .swp-st{font-size:11.5px;letter-spacing:.03em;min-height:21px}
  #tmn-sweeper .swp-st .swp-v{padding:3px 5px}
  #tmn-sweeper .swp-counts{font-size:11px;margin-top:3px}
  #tmn-sweeper .swp-rd{padding:9px 13px;font-size:11.5px}
  #tmn-sweeper .swp-scrim{padding:12px;align-items:flex-start}
  #tmn-sweeper .swp-card{padding:18px 16px;box-shadow:8px 8px 0 0 rgba(1,87,59,.7)}
  #tmn-sweeper .swp-pair{grid-template-columns:1fr}
  #tmn-sweeper .swp-pair>div+div{border-left:0;padding-left:0;border-top:1.5px solid rgba(15,34,32,.24)}
  #tmn-sweeper .swp-acts{gap:9px}
  #tmn-sweeper .swp-b{padding:14px 16px;font-size:12px;width:100%;justify-content:center}
  #tmn-sweeper .swp-b.swp-ter{width:auto}
}
@media (prefers-reduced-motion:reduce){#tmn-sweeper *{animation:none!important;transition:none!important}}