/* Survive the backlog - deploy stylesheet.
   Everything is scoped to #stb-game so nothing leaks onto the Webflow page.
   Keyframe names are prefixed stb- for the same reason.
   Static-box layout rules are listed in DESIGNER-STYLES.md. */

#stb-game{--cream:#F4F1E8;--bone:#EDEADF;--ink:#0F2220;--deep:#01573B;--forest:#013A28;--lime:#9ECD41;--brick:#A03B2E;
--display:indivisible,Inter,system-ui,sans-serif;--mono:novel-mono-pro,ui-monospace,SFMono-Regular,Menlo,monospace;--surf:112px;--floor:128px;
position:relative;display:block;width:100%;height:calc(100vh - 79px);overflow:hidden;background:#050e0d;color:var(--cream);
font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#stb-game *{box-sizing:border-box}
#stb-game button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#stb-game .lab{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,232,.55)}

/* the world */
#stb-game #world{position:absolute;inset:0;overflow:hidden;background:#050e0d}
#stb-game #world.shake{animation:stb-shake .5s cubic-bezier(.3,.7,.4,1)}
@keyframes stb-shake{10%{transform:translate(-9px,4px)}25%{transform:translate(8px,-5px)}40%{transform:translate(-6px,3px)}55%{transform:translate(5px,-2px)}70%{transform:translate(-3px,1px)}100%{transform:none}}
#stb-game .sky{position:absolute;left:0;right:0;top:0;height:var(--surf);background:linear-gradient(180deg,#081715,#0b201d)}
#stb-game .water{position:absolute;left:0;right:0;top:var(--surf);bottom:0;background:linear-gradient(180deg,#0f3a32 0%,#0b2a27 16%,#08201f 38%,#06151a 64%,#050e0d 100%)}
#stb-game .shafts{position:absolute;left:0;right:0;top:var(--surf);height:70%;pointer-events:none;opacity:.5;mix-blend-mode:screen;
 background:repeating-linear-gradient(101deg,rgba(158,205,65,0) 0 90px,rgba(190,225,170,.07) 120px 170px,rgba(158,205,65,0) 210px 330px);
 -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);animation:stb-drift 22s linear infinite}
@keyframes stb-drift{to{background-position:330px 0}}
#stb-game .surface{position:absolute;left:0;right:0;top:calc(var(--surf) - 2px);height:3px;background:var(--lime);box-shadow:0 0 26px 3px rgba(158,205,65,.5);transition:opacity .2s}
#stb-game .surface.flick{animation:stb-flick .6s steps(2) 1}@keyframes stb-flick{0%,40%,80%{opacity:.15}20%,60%,100%{opacity:1}}
#stb-game #snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#stb-game .floorart{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;min-height:300px;object-fit:cover;object-position:50% 100%;filter:brightness(1.55) saturate(1.1);
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%);mask-image:linear-gradient(180deg,transparent 0,#000 46%);pointer-events:none}
#stb-game .floorline{position:absolute;left:0;right:0;bottom:var(--floor);height:0;border-top:1px dashed rgba(244,241,232,.14)}
#stb-game .gauge{position:absolute;right:18px;top:calc(var(--surf) + 26px);bottom:calc(var(--floor) + 8px);width:2px;background:rgba(244,241,232,.14)}
#stb-game .gauge i{position:absolute;right:12px;font:500 11px var(--mono);letter-spacing:.08em;color:rgba(244,241,232,.42);white-space:nowrap;font-style:normal;transform:translateY(-50%)}
#stb-game .gauge b{position:absolute;left:-5px;width:12px;height:12px;background:var(--lime);box-shadow:0 0 14px rgba(158,205,65,.8);transform:translateY(-50%);transition:top .25s linear}

/* HUD, above the surface */
#stb-game .hud{position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);top:0;height:var(--surf);display:flex;align-items:center;gap:clamp(20px,4vw,56px);z-index:6}
#stb-game .clock{font:700 clamp(44px,5.4vw,70px)/.9 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#stb-game .clock.low{animation:stb-low 1s steps(2) infinite}@keyframes stb-low{50%{color:#9ECD41}}
#stb-game .hud .lab{display:block;margin-bottom:6px}
#stb-game .score{font:700 clamp(26px,3vw,40px)/1 var(--display);font-variant-numeric:tabular-nums}
#stb-game .engine{font:500 12.5px/1.5 var(--mono);color:rgba(244,241,232,.72);border-left:1px solid rgba(244,241,232,.18);padding-left:clamp(14px,2.4vw,32px)}
#stb-game .engine b{color:var(--lime);font-weight:500}
#stb-game .buoys{margin-left:auto;display:flex;align-items:flex-end;gap:10px;align-self:flex-end;transform:translateY(34px)}
#stb-game .buoys span{align-self:center;margin-right:6px;transform:translateY(-34px)}
#stb-game .buoy{height:104px;display:block;transform-origin:50% 86%;animation:stb-bob 4.2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(158,205,65,.35));transition:filter .5s}
#stb-game .buoy:nth-of-type(2){animation-delay:-1.3s}#stb-game .buoy:nth-of-type(3){animation-delay:-2.6s}
#stb-game .buoy.out{filter:grayscale(1) brightness(.4);animation-duration:7s}
@keyframes stb-bob{0%,100%{transform:translateY(0) rotate(-2.2deg)}50%{transform:translateY(5px) rotate(2.2deg)}}
#stb-game .snd{position:absolute;right:clamp(20px,5vw,72px);bottom:18px;z-index:9;font:500 11px var(--mono);letter-spacing:.1em;color:rgba(244,241,232,.5);padding:8px 10px;border:1px solid rgba(244,241,232,.18)}

/* sinking findings */
#stb-game #tags{position:absolute;inset:0;z-index:2;pointer-events:none}
#stb-game .tag{position:absolute;width:212px;margin-left:-106px;background:var(--cream);color:var(--ink);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--forest);padding:10px 12px;font:500 11px/1.35 var(--mono);will-change:transform,opacity;transition:box-shadow .2s,opacity .3s}
#stb-game .tag b{display:block;font:700 14px/1.2 var(--display);letter-spacing:-.01em;margin-top:4px}
#stb-game .tag.focus{box-shadow:0 0 0 2px var(--lime),0 0 26px rgba(158,205,65,.55);z-index:3}
#stb-game .tag.dim{opacity:.62}
#stb-game .tag .st{display:none;margin-top:7px;font:700 10.5px var(--mono);letter-spacing:.1em;padding:4px 6px;text-align:center}
#stb-game .tag.v-safe .st{display:block;background:var(--lime)}#stb-game .tag.v-risky .st{display:block;background:var(--ink);color:var(--bone)}#stb-game .tag.v-ask .st{display:block;border:1.5px dashed var(--ink)}
#stb-game .tag.rise{transition:transform .9s cubic-bezier(.3,0,.2,1),opacity .9s;opacity:0;box-shadow:0 0 0 2px var(--lime),0 0 40px rgba(158,205,65,.9)}
#stb-game .tag.gone{transition:opacity .5s,transform .5s;opacity:0}
#stb-game .tag.plunge{transition:transform .55s cubic-bezier(.5,0,1,.6),opacity .55s;opacity:.0}
#stb-game .tag.settle{transition:transform .35s ease-out;box-shadow:3px 3px 0 var(--forest)}

/* the arm */
#stb-game .arm{position:absolute;right:-560px;top:0;width:min(520px,44vw);z-index:4;transform:scaleX(-1);transition:right .38s cubic-bezier(.2,.9,.3,1),top .1s;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));pointer-events:none}
#stb-game .arm.in{right:-70px}

/* focus card */
#stb-game .card{position:absolute;left:46%;top:calc(var(--surf) + 96px);width:min(620px,92vw);transform:translateX(-50%);background:var(--cream);color:var(--ink);border:1.5px solid var(--ink);box-shadow:12px 12px 0 var(--deep);padding:26px 28px 24px;z-index:5}
#stb-game .card.pop{animation:stb-pop .32s cubic-bezier(.2,1.4,.4,1)}@keyframes stb-pop{from{transform:translateX(-50%) translateY(-14px) scale(.97);opacity:.4}}
#stb-game .card .id{display:flex;gap:12px;align-items:center;font:500 12.5px var(--mono);letter-spacing:.08em;color:rgba(15,34,32,.6)}
#stb-game .sev{background:var(--brick);color:#fff;font:700 11px var(--mono);letter-spacing:.1em;padding:4px 8px}
#stb-game .card .eta{margin-left:auto;font-variant-numeric:tabular-nums}#stb-game .card .eta.hot{color:var(--brick);font-weight:700}
#stb-game .card h3{font:700 clamp(22px,2.3vw,31px)/1.12 var(--display);letter-spacing:-.02em;margin:15px 0 0}
#stb-game .ev{margin-top:17px;border-top:1px solid rgba(15,34,32,.2);padding-top:14px;min-height:70px}
#stb-game .ev .hid{font:500 13px/1.5 var(--mono);color:rgba(15,34,32,.55)}
#stb-game .ev .bar{height:3px;background:rgba(15,34,32,.15);margin-top:12px;position:relative;overflow:hidden}#stb-game .ev .bar i{position:absolute;inset:0;background:var(--deep);transform-origin:0 50%;transform:scaleX(0)}
#stb-game .ev .shown{font:500 15.5px/1.5 var(--mono);color:var(--deep);animation:stb-rev .35s ease}@keyframes stb-rev{from{opacity:0;transform:translateY(5px)}}
#stb-game .acts{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:10px;margin-top:20px}
#stb-game .a{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:15px 6px;border:1.5px solid var(--ink);color:var(--ink);white-space:nowrap;transition:transform .12s,box-shadow .12s}
#stb-game .a small{display:block;font:400 11px var(--mono);opacity:.55;margin-top:5px}
#stb-game .a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}#stb-game .a:active{transform:none;box-shadow:none}
#stb-game .a.e{background:var(--ink);color:var(--cream)}#stb-game .a.e:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
#stb-game .a.c{background:var(--lime)}#stb-game .a.r{background:var(--bone)}#stb-game .a.q{border-style:dashed}
#stb-game .calm{position:absolute;left:46%;top:calc(var(--surf) + 170px);transform:translateX(-50%);z-index:5;font:500 14px var(--mono);letter-spacing:.06em;color:rgba(244,241,232,.55);text-align:center}

/* the floor pile */
#stb-game .pilewrap{position:absolute;left:clamp(20px,5vw,72px);bottom:34px;z-index:3}
#stb-game .pilewrap .lab{display:block;margin-bottom:10px;color:rgba(244,241,232,.75)}#stb-game .pilewrap .lab.hot{color:var(--cream);animation:stb-low 1s steps(2) infinite}
#stb-game .pile{display:flex;gap:8px}
#stb-game .slot{width:clamp(56px,7vw,104px);height:44px;border:1.5px dashed rgba(244,241,232,.42);background:rgba(5,14,13,.35)}
#stb-game .slot.f{background:var(--cream);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--forest);animation:stb-land .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes stb-land{from{transform:translateY(-40px);opacity:0}}
#stb-game .floorcap{position:absolute;right:clamp(20px,5vw,72px);bottom:64px;z-index:3;font:500 11.5px var(--mono);letter-spacing:.1em;color:rgba(244,241,232,.45)}
#stb-game .toast{position:absolute;left:46%;top:calc(var(--surf) + 40px);transform:translateX(-50%);z-index:7;font:700 12.5px var(--mono);letter-spacing:.1em;padding:9px 14px;opacity:0;pointer-events:none;white-space:nowrap}
#stb-game .toast.go{animation:stb-toast 1.5s ease}@keyframes stb-toast{0%{opacity:0;transform:translateX(-50%) translateY(8px)}12%,70%{opacity:1;transform:translateX(-50%)}100%{opacity:0}}
#stb-game .toast.t-good{background:var(--lime);color:var(--ink)}#stb-game .toast.t-bad{background:var(--bone);color:var(--ink)}#stb-game .toast.t-meh{border:1.5px dashed var(--bone);color:var(--bone)}

/* overlays: start + end  — DESIGNER: static boxes from here down */
#stb-game .over{position:absolute;inset:0;z-index:20;display:none;overflow:auto}
#stb-game .over.on{display:block}
#stb-game #s-end{background:linear-gradient(180deg,rgba(5,14,13,0) 0,rgba(5,14,13,.55) 30%,rgba(5,14,13,.9) 100%)}
#stb-game #world.menu .gauge,#stb-game #world.menu .floorcap,#stb-game #world.menu .floorline{display:none}
#stb-game .over div.in{width:min(1160px,90vw);margin:0 auto;padding:calc(var(--surf)*.55 + clamp(10px,2vh,26px)) 0 44px;position:relative}
#stb-game h1{font:700 clamp(44px,6.4vw,96px)/.98 var(--display);letter-spacing:-.03em;margin:0}#stb-game h1 em{font-style:normal;color:var(--lime)}
#stb-game .lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:54ch;margin:24px 0 0;color:rgba(244,241,232,.88)}
#stb-game .btn{font:700 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);background:var(--lime);color:var(--ink);padding:17px 28px;box-shadow:6px 6px 0 var(--cream);transition:transform .15s,box-shadow .15s}
#stb-game .btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--cream)}
#stb-game .btn.ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:none}#stb-game .btn.ghost:hover{background:rgba(244,241,232,.08);transform:none}
#stb-game .row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:34px}
#stb-game .keys{font:500 12px var(--mono);letter-spacing:.06em;color:rgba(244,241,232,.55)}
#stb-game .rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(16px,2.6vh,32px);max-width:980px;border-top:1px solid rgba(244,241,232,.2)}
#stb-game .rule{padding:18px 22px 0 0}#stb-game .rule+.rule{border-left:1px solid rgba(244,241,232,.2);padding-left:22px}
#stb-game .rule b{display:inline-block;font:700 12px var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;margin-bottom:12px}
#stb-game .rule .k1{background:var(--lime);color:var(--ink)}#stb-game .rule .k2{background:var(--bone);color:var(--ink)}#stb-game .rule .k3{border:1.5px dashed var(--bone)}#stb-game .rule .k4{background:var(--cream);color:var(--ink)}
#stb-game .rule span{display:block;font-size:14.5px;line-height:1.5;color:rgba(244,241,232,.78)}
#stb-game .heroarm{position:absolute;right:-2vw;top:0;height:min(92vh,900px);z-index:-1;opacity:.95;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));animation:stb-sway 9s ease-in-out infinite;transform-origin:50% 0}
@keyframes stb-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(3deg)}}
#stb-game .share0{margin-top:26px;font:500 12px var(--mono);letter-spacing:.08em;color:rgba(244,241,232,.5)}

#stb-game .endgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:38px}
#stb-game .badgebox canvas{width:100%;height:auto;display:block}
#stb-game .vs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(244,241,232,.2)}
#stb-game .vs>div{padding:20px 0}#stb-game .vs>div+div{border-left:1px solid rgba(244,241,232,.2);padding-left:24px}
#stb-game .vs .lab{display:block;margin-bottom:10px}#stb-game .vs .big{font:500 clamp(15px,1.4vw,19px)/1.4 var(--mono)}#stb-game .vs .eng{color:var(--lime)}
#stb-game .vs p{font-size:13.5px;line-height:1.5;color:rgba(244,241,232,.68);margin:10px 0 0;max-width:40ch}
#stb-game .rc{margin-top:34px;display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,56px);align-items:start}
#stb-game .rc img{width:100%;display:block;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
#stb-game .rc h3{font:700 22px var(--display);letter-spacing:-.015em;margin:0 0 8px}
#stb-game .rcp{display:grid;grid-template-columns:96px 1fr 132px;gap:14px;padding:11px 0;border-bottom:1px solid rgba(244,241,232,.14);font:500 13px/1.45 var(--mono);color:rgba(244,241,232,.84)}
#stb-game .rcp small{display:block;color:rgba(244,241,232,.52);font-size:12.5px;margin-top:3px}
#stb-game .vd{font:700 10.5px var(--mono);letter-spacing:.09em;padding:5px 6px;text-align:center;align-self:start}
#stb-game .vd.s{background:var(--lime);color:var(--ink)}#stb-game .vd.d{background:var(--bone);color:var(--ink)}#stb-game .vd.a{border:1.5px dashed var(--bone);color:var(--bone)}#stb-game .vd.x{background:var(--cream);color:var(--ink);text-decoration:line-through}
#stb-game details summary{cursor:pointer;font:500 12.5px var(--mono);letter-spacing:.08em;color:rgba(244,241,232,.7);margin-top:14px}
#stb-game .fine{font:500 12px/1.7 var(--mono);letter-spacing:.04em;color:rgba(244,241,232,.42);margin-top:44px}
@media (max-width:860px){#stb-game{--surf:96px;--floor:104px}#stb-game .engine,#stb-game .gauge,#stb-game .floorcap{display:none}#stb-game .tag{width:128px;margin-left:-64px;padding:7px 8px}#stb-game .tag b{display:none}#stb-game .card{left:50%;top:auto;bottom:calc(var(--floor) + 56px);padding:18px 16px}#stb-game .acts{grid-template-columns:1fr 1fr}#stb-game .a small{display:none}#stb-game .rules{grid-template-columns:1fr 1fr}#stb-game .rule:nth-child(3){border-left:0;padding-left:0}#stb-game .endgrid,#stb-game .rc{grid-template-columns:1fr}#stb-game .rc img{width:140px}#stb-game .rcp{grid-template-columns:1fr}#stb-game .heroarm{opacity:.35}#stb-game .buoy{height:74px}#stb-game .buoys{transform:translateY(24px)}#stb-game .calm{left:50%}#stb-game .toast{left:50%}}
@media (prefers-reduced-motion:reduce){#stb-game *{animation:none!important}#stb-game .shafts{display:none}}

/* 2026-09-19: the site nav is sticky and 79px tall. The stage is sized to the space below it so the HUD is never covered while playing. */
@supports (height:100dvh){#stb-game{height:calc(100dvh - 79px)}}

/* 2026-09-19. The site runs its own headline script (tmnpass179): it splits every h1 into
   .tmn-line > .tmn-l wrappers and the site stylesheet paints those ink green. Inside the game the
   world is near black, so the title was rendering invisible, and the wrappers doubled its height,
   which pushed the rules off the stage. The game keeps its own colour and rhythm here. */
#stb-game h1 .tmn-line,#stb-game h1 .tmn-l{color:var(--cream);display:block;line-height:.98;overflow:visible;opacity:1}
#stb-game h1 em .tmn-l,#stb-game h1 .tmn-l em{color:var(--lime)}
#stb-game h1{color:var(--cream);padding:0}  /* the site stylesheet adds ~124px of padding to every h1; the stage has no room for it */

/* the site reveal script adds the class in to elements it reveals, which collides with the game intro container class in. The container rule is tag-scoped to div.in so it can never land on the h1 as well. */

/* 2026-09-19, second pass against the site stylesheet leaking into the game.
   1. The rules block inherited ink from the site, so the ASK chip, which is a dashed outline with no
      fill, was rendering ink on near-black water and could not be read at all. */
#stb-game .rules,#stb-game .rule,#stb-game .rule span{color:var(--cream)}
#stb-game .rule .k3{color:var(--bone)}
#stb-game .rule .k1{color:var(--ink)}
#stb-game .rule .k2{color:var(--ink)}
#stb-game .rule .k4{color:var(--ink)}
/* 2. On a phone the four rules stack two by two and the start screen needs about 1080px, which does not
      fit a 773px stage. The stage grows to its content for the start screen and the page scrolls
      normally; during play the content is absolutely placed, so the minimum height takes over and the
      world is a full screen again. */
@media (max-width:860px){
  #stb-game{height:auto;min-height:calc(100vh - 79px)}
  #stb-game .over div.in{padding-top:calc(var(--surf)*.35 + clamp(8px,1.5vh,18px));padding-bottom:32px}
  #stb-game .rule{padding-top:12px}
}
@supports (height:100dvh){@media (max-width:860px){#stb-game{min-height:calc(100dvh - 79px)}}}

/* The start and end overlays are absolutely placed inside the stage, so on a phone their content
   scrolled inside a 773px box instead of the page scrolling. On phone they join the normal flow and
   the stage grows to fit them; during play the overlay is hidden, the world is absolute, and the
   minimum height puts the stage back to a full screen. */
@media (max-width:860px){
  #stb-game .over{position:relative;inset:auto;overflow:visible}
}

/* The world layer is absolutely placed and fills the stage, so on a phone it capped the start screen
   at one screen no matter what the overlay did. While the start or end screen is up, the world layer
   joins the flow on phone and the stage grows to the content; during play it returns to absolute and
   fills the stage again. */
@media (max-width:860px){
  #stb-game #world.menu{position:relative;inset:auto;height:auto;min-height:calc(100vh - 79px)}
}
@supports (height:100dvh){@media (max-width:860px){#stb-game #world.menu{min-height:calc(100dvh - 79px)}}}

/* 2026-09-19. The lime line is the water surface, drawn at --surf from the top of the stage. When the
   inherited heading padding was removed the start screen rose and the title sat across that line. The
   screen now begins below the surface, as it was drawn, and the space is taken back from the gaps. */
#stb-game .over div.in{padding-top:calc(var(--surf) + 12px);padding-bottom:28px}
#stb-game .lead{margin-top:16px}
#stb-game .row{margin-top:24px}
#stb-game .share0{margin-top:16px}
#stb-game .rule{padding-top:12px}
@media (max-width:860px){#stb-game .over div.in{padding-top:calc(var(--surf) + 10px);padding-bottom:28px}}

/* 2026-09-20. The surface was a 3px lime bar with a 26px bloom, which read as a laser rather than
   water. It is now the painted waterline from the site library, brightened so it carries on the dark
   ground, drifting slowly sideways. The gauge still calls this level SURFACE, so the line keeps its job. */
#stb-game .surface{
  height:22px;
  top:calc(var(--surf) - 11px);
  background-color:transparent;
  box-shadow:none;
  background-image:url(https://cdn.prod.website-files.com/6a8a11b3236395481fb3ff9d/6aaf01ec5370a4232d9350bb_tmn-fleet-waterline.webp);
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0 50%;
  opacity:.62;
  filter:brightness(2.2) saturate(1.1);
  animation:stb-drift 46s linear infinite;
}
@keyframes stb-drift{from{background-position:0 50%}to{background-position:-1800px 50%}}
@media (prefers-reduced-motion:reduce){#stb-game .surface{animation:none}}

/* 2026-09-20. Yoni: everything is cramped, it needs to be airier.
   The start and end screens were squeezed to fit one fixed screen, which is what made them tight.
   They now set their own height at every width, the same way the phone already did, and the world
   layer joins the flow while a screen is up. During play the overlay is hidden, the world is
   absolute again and the minimum height keeps the stage exactly one screen. */
#stb-game #world.menu{position:relative;inset:auto;height:auto;min-height:calc(100vh - 79px)}
#stb-game .over{position:relative;inset:auto;overflow:visible}
#stb-game .over div.in{padding-top:calc(var(--surf) + 44px);padding-bottom:84px}
#stb-game .lead{margin-top:30px;max-width:60ch}
#stb-game .row{margin-top:44px}
#stb-game .rules{margin-top:clamp(40px,5.5vh,72px)}
#stb-game .rule{padding-top:24px;padding-right:32px}
#stb-game .rule+.rule{padding-left:32px}
#stb-game .share0{margin-top:32px}
@supports (height:100dvh){#stb-game #world.menu{min-height:calc(100dvh - 79px)}}
@media (max-width:860px){
  #stb-game .over div.in{padding-top:calc(var(--surf) + 28px);padding-bottom:56px}
  #stb-game .rule{padding-top:18px;padding-right:18px}
  #stb-game .rule+.rule{padding-left:18px}
}

/* The stage itself was still a fixed one-screen height at desktop, so the roomier start and end
   screens had nowhere to go. It now sizes to its content with a one-screen floor; during play the
   content is absolute, so the floor decides and the world is exactly one screen again. */
#stb-game{height:auto;min-height:calc(100vh - 79px)}
@supports (height:100dvh){#stb-game{min-height:calc(100dvh - 79px)}}

/* v13 2026-09-21: end screen fits a phone. The single 1fr column took its minimum width from the longest button (423px in a 393px viewport), clipping the primary button and "Copy the post". */
@media (max-width:860px){#stb-game .endgrid,#stb-game .rc{grid-template-columns:minmax(0,1fr)}#stb-game .row .btn{max-width:100%;min-width:0;white-space:normal;text-align:center;line-height:1.35}}

/* v14 2026-09-21: on phones the end screen leads with the score and the primary button; the badge and share buttons follow. The primary button was below the fold behind three share buttons. */
@media (max-width:860px){#stb-game .endgrid>.badgebox{order:2}}


/* v15 2026-09-21: end screen. The site stylesheet paints headings and .big ink green, which vanished on the dark floor; both now carry their own colour. The score leads the "you" column in the display face. The receipts heading sits in a row with its download button. */
#stb-game .vs .big{color:var(--cream)}
#stb-game .vs .eng{color:var(--lime)}
#stb-game .vs .score{font:700 clamp(40px,4.6vw,68px)/1 var(--display);letter-spacing:-.03em;color:var(--cream);margin:0 0 14px}
#stb-game .rc h3{color:var(--cream);font-size:clamp(22px,2.2vw,30px);margin:0 0 14px}
#stb-game .rc h3 .tmn-l,#stb-game .rc h3 .tmn-line{color:var(--cream)}
#stb-game .rcdl{margin:0 0 18px;padding:12px 20px;font-size:12px}
#stb-game .vs .score small{display:block;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,232,.55);margin:0 0 8px}
#stb-game .vs .score{white-space:nowrap}

/* v16 2026-09-21: collision shield. The site stylesheet owns bare classes the game also uses. Each one silently restyled the game:
   img.arm{display:none !important} hid the arm for good; .on painted every shown screen ink; .bar turned the 3px evidence line into a padded block; .s padded the receipt stamps; .floorcap carried a gradient. Every game rule is id-scoped, so these resets win without touching the site. */
#stb-game img.arm{display:block !important;opacity:1;max-width:none;width:min(520px,44vw);z-index:4}
#stb-game .over,#stb-game .over.on{color:var(--cream);font-family:inherit;letter-spacing:normal;cursor:auto}
#stb-game .ev .bar{display:block;padding:0;height:3px;min-height:0;font:inherit;letter-spacing:0;background:rgba(15,34,32,.15)}
#stb-game .vd,#stb-game .vd.s{border-right:0;padding:5px 6px}
/* The depth gauge already labels the floor and the pile counts what settles there; the site stylesheet had stretched this caption across the scene. Hidden rather than said a third time. */
#stb-game .floorcap{display:none}
#stb-game .tag .st{grid-column-start:auto;justify-self:auto}

/* v16: phone play layout. The finding card sat on top of the clock and the score, the production buoys overlapped its corner, the id line wrapped into fragments and the sea was hidden. Now: a one-line HUD, a tight card docked just above the seabed strip, the sea visible between them. */
@media (max-width:860px){
  #stb-game .hud{left:16px;right:16px;gap:18px;align-items:center}
  #stb-game .hud .lab{font-size:9.5px;letter-spacing:.08em;white-space:nowrap;margin-bottom:3px}
  #stb-game .hud .clock{font-size:38px}
  #stb-game .hud .score{font-size:24px}
  #stb-game .buoys{transform:none;align-self:center;gap:6px}
  #stb-game .buoys span{display:none}
  #stb-game .buoy{height:48px}
  #stb-game .card{left:12px;right:12px;width:auto;transform:none;top:auto;bottom:calc(var(--floor) + 10px);padding:14px 14px 12px;box-shadow:6px 6px 0 var(--deep)}
  #stb-game .card.pop{animation:stb-pop-m .26s ease-out}
  #stb-game .card .id{font-size:10.5px;gap:8px;letter-spacing:.05em;white-space:nowrap}
  #stb-game .card .eta{overflow:hidden;text-overflow:ellipsis}
  #stb-game .card h3{font-size:19px;margin:9px 0 0}
  #stb-game .ev{margin-top:10px;padding-top:9px;min-height:52px}
  #stb-game .ev .hid{font-size:11.5px;line-height:1.4}
  #stb-game .ev .shown{font-size:13px;line-height:1.4}
  #stb-game .ev .bar{margin-top:8px}
  #stb-game .acts{gap:8px;margin-top:10px}
  #stb-game .a{padding:0 6px;height:44px;font-size:11.5px}
  #stb-game .a.q{border:1.5px dashed var(--ink);background:transparent}
  #stb-game .tag{width:118px;margin-left:-59px;padding:6px 8px;font-size:9.5px;box-shadow:3px 3px 0 var(--forest)}
  #stb-game .tag b{font-size:11.5px;margin-top:2px}
}
@keyframes stb-pop-m{from{transform:translateY(12px);opacity:.4}}

/* v17 2026-09-21: the end screen leads with its point. The you-versus-engine comparison and the primary button take the first column; the share badge follows. On phones the comparison stacks instead of squeezing two columns into 390px. The primary button outweighs the share buttons. Waiting findings read as findings, not as disabled. */
#stb-game .endgrid>.badgebox{order:2}
#stb-game .endgrid #demo{font-size:14px;padding:21px 34px;box-shadow:8px 8px 0 var(--cream)}
#stb-game .badgebox .btn{padding:13px 20px;font-size:12px}
#stb-game .tag.dim{opacity:.82}
@media (max-width:860px){
  #stb-game .vs{grid-template-columns:minmax(0,1fr)}
  #stb-game .vs>div+div{border-left:0;padding-left:0;border-top:1px solid rgba(244,241,232,.2)}
  #stb-game .endgrid #demo{font-size:12.5px;padding:18px 18px}
}