/* Slab Lab · S01, the yard: the Quaig Laser Lab's steel yard. Each game is a bolted plate on a pallet rack; an overhead gantry
   crane carries the chosen plate to the burn bay, where it fills the screen and the game opens. yard.js drives the motion
   (GSAP, vendored); without scripts the plates are plain links.
   10-22 (owner: "brighten it up and Quaig it and laser it up"): the yard wears the /lab Founders pass skin (lab/glam/glam.css):
   hot-pink velvet under pink and gold stage light, glitter, gold trim, Bungee for names and Figtree for lines, the Quaig mark and
   the gold Slab Lab diamond. The laser is the Lab's pink: beams off the gantry, a scan line down the racks, the bay's burned mark,
   Play's cut. Every moving light is a transform or opacity animation on its own layer (no repaint), and none runs with reduced
   motion. */
:root {
  --velvet-0: #1a0713; --velvet-1: #2a0619; --velvet-2: #4b0c31; --velvet-3: #8e1857;
  --hot: #ff5fae; --hot-deep: #c22f78; --hot-lt: #ffd2ea; --laser: 255, 95, 174;
  --gold: #f4c34a; --gold-lt: #f7d774; --gold-dk: #b9852a;
  --cream: #fbf3ff; --lilac: #d9c6e6;
  --bg: var(--velvet-0);
  --ink: var(--cream);
  --muted: var(--lilac);
  --hz: var(--gold);
  --hzk: var(--velvet-0);
  --name: 'Bungee', Impact, 'Arial Black', sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --diamond: url("/lab/s01/img/diamond.svg");
  --mark: url("/lab/s01/img/mark.svg");
  /* the /lab glitter and faint scan lines, baked into one tile: painted once, where gradients would be re-rastered every frame
     by a software renderer while the crane moves over them */
  --glitter: url("/lab/s01/img/glitter.svg") 0 0 / 240px 240px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 8px 12px; border-radius: 6px; background: var(--gold); color: var(--velvet-1); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- stage: velvet under pink and gold stage light, glitter, faint scan lines ---------- */
#stage { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
#lamps {
  position: absolute; inset: 0; pointer-events: none; opacity: 1;
  background:
    var(--glitter),
    radial-gradient(55% 42% at 14% -4%, rgba(var(--laser), .46), transparent 70%),
    radial-gradient(55% 42% at 86% -4%, rgba(247,215,116,.32), transparent 70%),
    radial-gradient(90% 60% at 50% 108%, rgba(var(--laser), .24), transparent 70%),
    linear-gradient(180deg, #6a1042, var(--velvet-2) 46%, #33081f);
}
html.door-on #lamps { opacity: .12; }
#yard { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#yard.locked { overflow: hidden; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 80px 18px 0; }
.crumb { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 15px; font-weight: 600; color: var(--lilac); letter-spacing: .01em; }
.crumb a { display: inline-flex; align-items: center; gap: 8px; color: var(--lilac); text-decoration: underline; text-decoration-color: rgba(217,198,230,.5); text-underline-offset: 4px; }
.crumb a:hover { color: var(--cream); }
.qmark { flex: none; width: 22px; height: 22px; }
.crumb b { color: var(--cream); font-weight: 700; }
.crumb .sep { opacity: .55; margin: 0 .5em; }
.crumb .badge { margin: 0 0 0 10px; align-self: center; }
@media (max-width: 599px) { .crumb { padding-right: 100px; } }   /* clear of the grab, parked at the rail's right end */
h1 { margin: 10px 0 0; font-family: var(--name); font-weight: 400; font-size: clamp(44px, 12.6vw, 92px); line-height: .98; letter-spacing: 0; color: var(--hot);
  text-shadow: 3px 4px 0 var(--gold), 6px 8px 0 rgba(26,7,19,.55); }
h1 span { display: block; white-space: nowrap; }
h1 span + span { color: var(--gold-lt); text-shadow: 3px 4px 0 var(--hot-deep), 6px 8px 0 rgba(26,7,19,.55); }
.lede { margin: 16px 0 0; max-width: 36em; font-size: clamp(16px, 2vw, 19px); font-weight: 500; line-height: 1.4; color: var(--cream); text-shadow: 0 1px 2px rgba(26,7,19,.85); }
.lede.small { margin-top: 8px; font-size: 14.5px; font-weight: 500; color: var(--lilac); }

/* ---------- the laser rig: beams off the gantry and a scan line running down the racks (transform only, behind the yard) ---------- */
#lasers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#lasers .beam { position: absolute; top: 32px; left: 0; width: 2px; height: 165vh; margin-left: -1px; transform-origin: 50% 0; opacity: .5; will-change: transform;
  background: linear-gradient(rgba(255,230,243,.95), rgba(var(--laser),.65) 16%, rgba(var(--laser),.2) 58%, rgba(var(--laser),0) 86%);
  box-shadow: 0 0 6px 1px rgba(var(--laser),.4); }
#lasers .b1 { left: 9%; transform: rotate(26deg); animation: sway1 13s ease-in-out infinite alternate; }
#lasers .b2 { left: 34%; transform: rotate(-10deg); opacity: .36; animation: sway2 17s ease-in-out infinite alternate; }
#lasers .b3 { left: 66%; transform: rotate(12deg); opacity: .36; animation: sway3 15s ease-in-out infinite alternate; }
#lasers .b4 { left: 91%; transform: rotate(-26deg); animation: sway4 12s ease-in-out infinite alternate; }
@keyframes sway1 { to { transform: rotate(10deg); } }
@keyframes sway2 { to { transform: rotate(8deg); } }
@keyframes sway3 { to { transform: rotate(-9deg); } }
@keyframes sway4 { to { transform: rotate(-11deg); } }
#lasers .scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .6; will-change: transform; transform: translate3d(0, -20px, 0);
  background: linear-gradient(90deg, transparent, rgba(var(--laser),.85) 10%, #ffe6f3 50%, rgba(var(--laser),.85) 90%, transparent);
  box-shadow: 0 0 10px 2px rgba(var(--laser),.55); animation: scanDown 7s linear infinite; }
@keyframes scanDown { from { transform: translate3d(0, 34px, 0); } to { transform: translate3d(0, 100vh, 0); } }
html.door-on #lasers { display: none; }
#stage.rig-still #lasers > i { animation-play-state: paused; }   /* the crane or the cut has the stage: the rig holds still (yard.js) */

/* ---------- rack: pink enamel uprights, gold beams ---------- */
#wall { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 16px; }
#wall::before, #wall::after { content: ""; position: absolute; top: 6px; bottom: 0; width: 9px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(26,7,19,.6) 9px 13px, transparent 13px 22px), linear-gradient(90deg, #7a1049, #d23a86 42%, #6a0f40);
  box-shadow: 0 0 12px rgba(var(--laser),.25); }
#wall::before { left: -13px; }
#wall::after { right: -13px; }
@media (min-width: 600px) { #wall { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; } }
@media (min-width: 820px) { #wall { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 26px; } }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .wrap { padding-top: 62px; }
  #field { margin-top: 10px; }
  h1 { font-size: 40px; }
  h1 span { display: inline; }
  .lede { font-size: 15.5px; margin-top: 8px; }
  .lede.small { font-size: 14px; margin-top: 2px; }
}
.slot { position: relative; padding: 24px 0 22px; scroll-margin: 90px 0 24px; }
.slot::after { content: ""; position: absolute; left: -14px; right: -14px; bottom: 9px; height: 13px; z-index: 0; border-radius: 1px;
  background: linear-gradient(var(--gold-lt), var(--gold) 45%, var(--gold-dk)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 10px rgba(26,7,19,.6); }
.plate { display: block; position: relative; z-index: 1; color: inherit; text-decoration: none; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transform-origin: 50% 100%; transition: transform .32s cubic-bezier(.2,.9,.25,1.25); }
.plate:focus { outline: none; }
.slot.pop .plate { transform: translateY(-12px) scale(1.05); }
.slot.pop .pb { box-shadow: var(--pb-shadow), 0 30px 34px -10px rgba(26,7,19,.8), 0 0 0 2px rgba(247,215,116,.8), 0 0 30px rgba(var(--laser),.5); }
.plate:focus-visible .pb { outline: 3px solid var(--gold-lt); outline-offset: 4px; }
/* the plate a player just came back from: a slow pink pulse on its frame */
.slot.last .pb { animation: lastPulse 1.6s ease-in-out 3; }
@keyframes lastPulse { 50% { box-shadow: var(--pb-shadow), 0 0 0 3px rgba(255,95,174,.9), 0 0 34px rgba(var(--laser),.6); } }

/* the plate: brushed steel like the Season 1 plate on /lab, a container, so every part scales with its width */
.pb { --pb-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(42,6,25,.4), inset 1px 0 0 rgba(255,255,255,.3), inset -1px 0 0 rgba(0,0,0,.22), 0 3px 0 #6b6e75, 0 5px 0 #2c2e33;
  container-type: inline-size; position: relative; display: block; padding: 8% 8% 0; border-radius: 5px; text-align: left;
  background:
    linear-gradient(160deg, rgba(255,255,255,.4), transparent 34%, rgba(75,12,49,.14)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 4px),
    linear-gradient(135deg, #dfe2e6, #a9adb3 45%, #cdd0d4 62%, #8f9399);
  box-shadow: var(--pb-shadow), 0 18px 24px -8px rgba(26,7,19,.75); transition: box-shadow .3s; }
/* the maker's mark, burned into the plate's top edge */
.pb::after { content: ""; position: absolute; top: 2.2cqw; right: 9cqw; width: 4.8cqw; height: 4.8cqw; background: rgba(42,6,25,.72);
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.lug { position: absolute; left: 50%; top: -8.6cqw; width: 16cqw; height: 11cqw; transform: translateX(-50%);
  border: 2.8cqw solid #9da1a7; border-bottom: 0; border-radius: 8cqw 8cqw 0 0;
  border-top-color: #c3c6cb; border-left-color: #8a8e94; border-right-color: #6f7379; filter: drop-shadow(0 .6cqw .5cqw rgba(26,7,19,.55)); }
.bolt { position: absolute; width: 4.6cqw; height: 4.6cqw; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f6e7a8, #c69a3a 45%, #6a4a10 80%); box-shadow: 0 .5cqw .7cqw rgba(26,7,19,.55); }
.bolt.tl { top: 2.1cqw; left: 2.1cqw; } .bolt.tr { top: 2.1cqw; right: 2.1cqw; }
.bolt.bl { bottom: 2.6cqw; left: 2.1cqw; } .bolt.br { bottom: 2.6cqw; right: 2.1cqw; }
.no { position: absolute; top: 2.2cqw; left: 9cqw; font-family: var(--name); font-size: 3.9cqw; line-height: 1; color: rgba(42,6,25,.72); text-shadow: 0 .25cqw 0 rgba(255,255,255,.45); }
.pocket { display: block; padding: 1.1cqw; border-radius: 1cqw; background: var(--velvet-0); box-shadow: inset 0 1.2cqw 1.6cqw rgba(0,0,0,.85), 0 .3cqw 0 rgba(255,255,255,.55); }
.pocket img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: .4cqw; user-select: none; -webkit-user-drag: none; }
.strip { display: flex; align-items: center; justify-content: center; height: 15cqw; padding: 0 3cqw; }
.ttl { font-family: var(--body); font-weight: 800; font-size: 7.6cqw; line-height: 1; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--velvet-1); text-shadow: 0 .3cqw 0 rgba(255,255,255,.55); }
.tag { position: absolute; left: 50%; bottom: 4px; z-index: 2; transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
  font-size: 13px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; color: var(--velvet-1); background: var(--gold-lt); padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(26,7,19,.45), 0 4px 12px rgba(var(--laser),.4); transition: opacity .2s, transform .25s; }
.slot.pop .tag, .slot.last .tag { opacity: 1; transform: translate(-50%, 0); }
#field.busy .tag { opacity: 0; }
.gone { position: absolute; inset: 30% 6% auto; z-index: 0; opacity: 0; visibility: hidden; text-align: center; font-family: var(--name);
  font-size: clamp(15px, 2.4vw, 21px); color: rgba(247,215,116,.75); border: 2px dashed rgba(247,215,116,.45); padding: .7em .2em; border-radius: 6px; }

/* the deck plate at the foot of the yard, the Slab Lab mark burned into it */
.floor { position: relative; min-height: 190px; margin-top: 6px; overflow: hidden; background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)), var(--diamond); background-size: auto, 26px 26px;
  box-shadow: inset 0 3px 0 var(--gold), inset 0 6px 0 rgba(26,7,19,.45), inset 0 60px 60px -20px rgba(26,7,19,.55); }
.floor::before { content: ""; position: absolute; left: 50%; top: 14px; width: 200px; height: 150px; margin-left: -100px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,4,10,.6), rgba(60,14,30,.32) 55%, rgba(60,14,30,0)); }
.floor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 50% 0%, rgba(var(--laser),.22), transparent 70%), linear-gradient(transparent 45%, rgba(26,7,19,.7)); }
.floormark { position: absolute; left: 50%; top: 30px; width: 104px; height: 104px; margin-left: -52px; overflow: visible; }
.floormark path { fill: none; stroke: rgba(18,3,9,.85); stroke-width: 4.6; stroke-linejoin: miter; stroke-linecap: square; }
.foot { position: relative; z-index: 1; margin: 0; padding: 146px 18px 34px; text-align: center; font-size: 15px; font-weight: 600; color: var(--lilac); }
.foot a { color: var(--gold-lt); }

/* ---------- burn bay ---------- */
#dim { position: absolute; inset: 0; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 55%, rgba(42,6,25,.5), rgba(20,5,14,.88)); }
#bay { position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; visibility: hidden; pointer-events: none; }
#bay .glow { position: absolute; inset: -60px; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255,180,220,.6), rgba(var(--laser),.22) 55%, transparent); }
#bay .pad { position: absolute; inset: 0; border-radius: 6px; padding: 5px; background: repeating-linear-gradient(-45deg, var(--hz) 0 11px, var(--hzk) 11px 22px);
  box-shadow: 0 20px 40px rgba(20,5,14,.6), 0 0 26px rgba(var(--laser),.35); }
#bay .pad i { display: grid; place-items: center; height: 100%; border-radius: 3px; background: var(--diamond); background-size: 22px 22px; box-shadow: inset 0 0 30px rgba(20,5,14,.75); }
.padmark { width: 44%; height: 44%; overflow: visible; color: var(--gold); filter: drop-shadow(0 0 2px rgba(255,205,95,.8)) drop-shadow(0 0 7px rgba(var(--laser),.55)); }
.padmark path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linejoin: miter; stroke-linecap: square; }
#bay .lbl { position: absolute; left: 0; right: 0; bottom: -32px; text-align: center; font-family: var(--name); font-size: 18px; letter-spacing: .02em; color: var(--gold-lt); text-shadow: 2px 2px 0 var(--hot-deep); }
#scan { position: absolute; left: 0; top: 0; z-index: 9; height: 3px; opacity: 0; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent); box-shadow: 0 0 10px 3px rgba(var(--laser),.9), 0 0 30px 6px rgba(var(--laser),.5); }
#carry { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
#carry .cl { position: absolute; left: 0; top: 0; transform-origin: 50% 0; will-change: transform; visibility: hidden; }
#carry .pb { box-shadow: var(--pb-shadow), 0 40px 40px -14px rgba(20,5,14,.85); }

/* ---------- crane: steel girder with a pink neon tube under it, the trolley in the Lab's gold ---------- */
#crane { position: absolute; left: 0; top: 0; right: 0; height: 0; z-index: 10; pointer-events: none; }
.girder { position: absolute; left: -4px; right: -4px; top: 8px; height: 22px;
  background:
    radial-gradient(circle at 50% 50%, #f7d774 0 1.5px, transparent 2.1px) 0 9px / 34px 6px repeat-x,
    linear-gradient(#c3c7cc 0, #858a90 4px, #3d4046 4px, #50535a 11px, #2e3035 18px, var(--gold-lt) 18px, var(--gold-dk) 22px);
  box-shadow: 0 10px 18px rgba(20,5,14,.6); }
.girder::before, .girder::after { content: ""; position: absolute; top: -2px; width: 14px; height: 26px; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--hz) 0 5px, var(--hzk) 5px 10px); }
.girder::before { left: 4px; } .girder::after { right: 4px; }
.neon { position: absolute; left: 0; right: 0; top: 32px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffc2e2 3%, #fff0f8 50%, #ffc2e2 97%, transparent);
  box-shadow: 0 0 6px 1px rgba(var(--laser),.9), 0 0 18px 4px rgba(var(--laser),.45); }
.shade { position: absolute; left: 0; right: 0; top: 0; height: 64px; background: linear-gradient(rgba(26,7,19,.9), rgba(26,7,19,.5) 55%, transparent); }
/* the trolley's moving parts (gears, flywheel, drum, ratchet pawl, wheels) turn by their SVG transform attribute, set in yard.js */
#trolley { position: absolute; left: 0; top: 12px; width: 120px; height: 66px; will-change: transform; transform: translate3d(-180px, 0, 0); }
#trolley svg { display: block; overflow: visible; }
.beacon { position: absolute; left: 6px; top: 51px; width: 10px; height: 7px; border-radius: 5px 5px 2px 2px; background: #7a1049; transition: background .2s; }
.beacon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, rgba(255,120,190,.6), transparent 18%, transparent 50%, rgba(255,120,190,.6) 50%, transparent 68%);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent); transition: opacity .25s; }
#crane.on .beacon { background: var(--hot); box-shadow: 0 0 8px var(--hot); }
#crane.on .beacon::after { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#hoist { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; transform: translate3d(-180px, 45px, 0); }
.ropeclip { position: absolute; left: -2px; top: 0; width: 4px; height: 1600px; overflow: hidden; }
#rope { position: absolute; left: 0; top: 0; width: 4px; height: 1600px; will-change: transform; transform: translate3d(0, -1580px, 0);
  background: linear-gradient(90deg, rgba(0,0,0,.5), transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%, rgba(0,0,0,.5)),
              repeating-linear-gradient(162deg, #b5b8bd 0 2px, #5d6066 2px 4px); }
#claw { position: absolute; left: 0; top: 0; width: 56px; height: 62px; will-change: transform; transform: translate3d(-28px, 20px, 0); }
#claw svg { display: block; overflow: visible; }

/* ---------- play view: the plate fills the screen, then the game opens ---------- */
#play { position: absolute; inset: 0; z-index: 7; visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 118px 18px 24px; overflow: hidden; }
.play-bg { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(70% 55% at 50% 40%, rgba(var(--laser),.34), transparent 70%), linear-gradient(#4b0c31, #2a0619); }
/* (no glitter here: Play's cut paints this view once per shard of the floor, and glitter tiles are dear to paint) */
.pp { position: relative; z-index: 1; width: min(84vw, calc((100dvh - 400px) / 1.12), 560px); min-width: 200px; transform-origin: 0 0; will-change: transform; }
.pp .pb { box-shadow: var(--pb-shadow), 0 40px 60px -16px rgba(20,5,14,.85), 0 0 80px rgba(var(--laser),.28); }
.info { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; max-width: 420px; }
.info > * { opacity: 0; visibility: hidden; }
.ptag { margin: 0; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--gold-lt); }
.info h2 { margin: 0; font-family: var(--name); font-weight: 400; font-size: clamp(28px, 7.4vw, 50px); line-height: 1; color: var(--hot); overflow-wrap: anywhere;
  text-shadow: 2px 3px 0 var(--gold), 4px 6px 0 rgba(26,7,19,.5); }
.blurb { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--cream); }
.note { margin: 0; font-size: 14px; color: var(--lilac); }
.coaster-line { margin: 0; font-size: 16px; font-weight: 700; color: var(--gold-lt); }
.actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.playbtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 230px; height: 60px; padding: 0 30px; border-radius: 10px;
  font-family: var(--name); font-weight: 400; font-size: 26px; letter-spacing: .02em; color: var(--velvet-1); text-decoration: none; touch-action: manipulation;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold) 55%, #d99a2c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(120,60,0,.3), 0 0 0 2px rgba(26,7,19,.5), 0 10px 30px rgba(var(--laser),.4); transition: transform .15s, box-shadow .2s, filter .2s; }
.playbtn > span, .playbtn > svg { position: relative; z-index: 1; }
.playbtn svg { width: 20px; height: 20px; }
/* the charge that runs across the button while the game opens by itself: a pink laser filling the gold */
.playbtn .fill { position: absolute; inset: 0; z-index: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(255,95,174,.35), rgba(255,95,174,.7) 82%, #ffd2ea 97%, #fff); }
.playbtn:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(120,60,0,.3), 0 0 0 2px rgba(26,7,19,.5), 0 12px 40px rgba(var(--laser),.6); }
.playbtn:active { transform: translateY(2px); }
.playbtn:focus-visible, .backbtn:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.backbtn { appearance: none; cursor: pointer; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(251,243,255,.45); background: rgba(26,7,19,.35);
  font-size: 16px; font-weight: 600; color: var(--cream); }
.backbtn:hover { background: rgba(26,7,19,.6); }
@media (min-aspect-ratio: 1/1) {
  #play { flex-direction: row; gap: clamp(18px, 4vw, 56px); padding: 64px 24px 20px; }
  .pp { width: min(46vw, calc((100dvh - 96px) / 1.12), 600px); }
  .info { align-items: flex-start; text-align: left; }
  .actions { align-items: flex-start; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 480px) {
  .info { gap: 5px; } .info h2 { font-size: 28px; } .blurb { font-size: 16px; } .playbtn { height: 50px; font-size: 22px; min-width: 190px; } .backbtn { height: 38px; }
}

/* ---------- skip catcher ---------- */
#skip { position: absolute; inset: 0; z-index: 20; display: none; align-items: flex-end; justify-content: flex-end; padding: 0 16px 18px; border: 0; background: transparent; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#skip.on { display: flex; }
#skip span, #door .hint { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--cream); background: rgba(26,7,19,.62); box-shadow: inset 0 0 0 1px rgba(247,215,116,.4); padding: 5px 12px; border-radius: 999px; }

/* ---------- loading door: a roll-up shutter in the Lab's pink (shown only when gate.js sets html.door-on) ---------- */
#door { display: none; position: fixed; inset: 0; z-index: 40; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.door-on #door { display: block; animation: doorBail .4s 8s forwards; }   /* if yard.js never runs, the door gets out of the way */
html.door-run #door { animation: none; }
@keyframes doorBail { to { opacity: 0; visibility: hidden; } }
#door .light { position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 100%, rgba(var(--laser),.55), transparent 70%), var(--velvet-1); }
#door .panel { position: absolute; inset: 0; will-change: transform;
  background:
    linear-gradient(rgba(26,7,19,.12), rgba(0,0,0,0) 30%, rgba(26,7,19,.32) 85%, rgba(26,7,19,.55)),
    radial-gradient(120% 70% at 30% 20%, rgba(255,210,234,.18), transparent 60%),
    repeating-linear-gradient(180deg, #8e1857 0, #b22d74 3px, #9c1f62 9px, #721149 15px, #3d0a28 17px, #8e1857 18px);
  box-shadow: inset 22px 0 30px -10px rgba(26,7,19,.7), inset -22px 0 30px -10px rgba(26,7,19,.7); }
#door .panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(var(--gold-lt), var(--gold) 45%, var(--gold-dk)); box-shadow: 0 -2px 0 rgba(26,7,19,.35), 0 2px 16px rgba(var(--laser),.7); }
#door .handle { position: absolute; left: 50%; bottom: 30px; width: 70px; height: 12px; margin-left: -35px; border-radius: 3px; background: linear-gradient(var(--gold-lt), var(--gold-dk)); box-shadow: 0 3px 4px rgba(26,7,19,.5); }
#door .rails { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #24070f 0 10px, var(--gold-dk) 10px 13px, transparent 13px calc(100% - 13px), var(--gold-dk) calc(100% - 13px) calc(100% - 10px), #24070f calc(100% - 10px)); }
#door .housing { position: absolute; left: 0; right: 0; top: 0; height: 40px; will-change: transform;
  background: linear-gradient(#3d0a28, #6a1042 35%, #4b0c31 70%, #24070f); box-shadow: inset 0 -3px 0 var(--gold), 0 6px 14px rgba(26,7,19,.7); }
#door .from { position: absolute; left: 24px; right: 24px; top: 58px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: rgba(251,243,255,.85); }
#door .from > span:first-child { display: inline-flex; align-items: center; gap: 0 .3em; }
#door .from .qmark { margin-right: 6px; }
#door .from b { color: var(--gold-lt); font-weight: 800; }
#mark { position: absolute; left: 50%; top: 49%; width: min(92vw, 760px); height: auto; transform: translate(-50%, -50%); overflow: visible; }
.doormark { position: absolute; left: 50%; top: calc(49% - min(23vw, 190px) - 78px); width: 62px; height: 62px; margin-left: -31px; overflow: visible; color: var(--gold);
  filter: drop-shadow(0 0 2px rgba(255,205,95,.8)) drop-shadow(0 1px 0 rgba(90,50,0,.45)); }
.doormark path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: miter; stroke-linecap: square; }
#door .meta { position: absolute; left: 0; right: 0; top: calc(49% + min(23vw, 190px)); text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: rgba(251,243,255,.7); }
#door .hint { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); }

#fx { position: fixed; inset: 0; z-index: 45; pointer-events: none; }

/* ---------- the coaster line ---------- */
.coaster { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 10px; max-width: 36em; padding: 6px 12px 6px 6px; border-radius: 8px;
  background: rgba(26,7,19,.5); border: 1px solid rgba(247,215,116,.6); font-size: clamp(15px, 1.9vw, 17px); font-weight: 700; line-height: 1.3; color: var(--cream); }
.cork { flex: none; width: 30px; height: 30px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08);
  background: radial-gradient(circle at 30% 35%, #7a5233 0 1px, transparent 1.5px) 0 0 / 5px 5px, radial-gradient(circle at 70% 65%, #d9b582 0 1px, transparent 1.5px) 0 0 / 7px 6px,
    radial-gradient(circle at 50% 50%, #8e6440 0 .8px, transparent 1.3px) 2px 3px / 4px 4px, #b98a59; }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) { .coaster { margin-top: 6px; font-size: 14.5px; padding: 4px 10px 4px 4px; } .cork { width: 24px; height: 24px; } }

/* ---------- background racks: deep shelving of blank 4-inch slabs (a few burned), in parallax, dimmer than the plates ---------- */
#racks { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; overflow: hidden; }
#racks .far, #racks .near { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
#racks .far { height: 300%; opacity: .3; background: url("/lab/s01/img/far-rack.svg") 0 40px / 168px 84px repeat; }
#racks .near { opacity: .5; }
#racks .shelf { position: absolute; left: 0; right: 0; }
#racks .shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; background: linear-gradient(var(--gold), var(--gold-dk)); box-shadow: 0 4px 8px rgba(20,5,14,.6); }
#racks .post { position: absolute; top: 0; bottom: -7px; width: 7px; background: linear-gradient(90deg, #5a0d37, #b02a72 45%, #4b0c31); }
#racks .bs { position: absolute; bottom: 0; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px), linear-gradient(135deg, #c9ccd1, #989ca2 55%, #7d8187);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 3px rgba(20,5,14,.6); }
#racks .bs.burned { background-size: cover; filter: brightness(.82) sepia(.1); }
#racks .bs.taken { visibility: hidden; }
#racks::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(60,9,38,.38), rgba(42,6,25,.62)); }

/* ---------- the ambient steam vent (fixed, at the left edge) ---------- */
#vent { position: absolute; left: 0; top: 58%; width: 34px; height: 42%; pointer-events: none; }
#vent .pipe { position: absolute; left: 6px; top: 14px; bottom: 0; width: 9px; background: linear-gradient(90deg, #4a4d53, #a3a7ad 45%, #3d4046); border-radius: 2px; }
#vent .valve { position: absolute; left: 1px; top: 30px; width: 19px; height: 6px; border-radius: 3px; background: var(--hot-deep); box-shadow: 0 0 0 1px #4b0c31; }
#vent .cap { position: absolute; left: 4px; top: 6px; width: 22px; height: 10px; border-radius: 3px 6px 2px 2px; background: linear-gradient(#b3b6bb, #5d6066); }
html.door-on #vent { opacity: 0; }

/* ---------- speaker ---------- */
.sound { position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 25; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(247,215,116,.55); background: rgba(26,7,19,.75); color: var(--gold-lt); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sound svg { width: 22px; height: 22px; }
.sound .off { display: none; }
.sound[aria-pressed="false"] { color: #a08aa6; }
.sound[aria-pressed="false"] .on { display: none; }
.sound[aria-pressed="false"] .off { display: inline; }
.sound:focus-visible { outline: 3px solid var(--gold-lt); outline-offset: 2px; }

/* ---------- a bare blank slab (the pull off the wall): steel face over the burn, cork on the back ---------- */
.blank { position: relative; display: block; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; }
.blank .face, .blank .back { position: absolute; inset: 0; border-radius: 3%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #2c2e33, 0 18px 26px -10px rgba(20,5,14,.85); }
.blank .face img { position: absolute; inset: 0; width: 100%; height: 100%; }
.blank .cover { position: absolute; inset: 0; transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), linear-gradient(135deg, #d7dade, #b3b7bc 55%, #9fa3a8); }
.blank .back { transform: rotateY(180deg); display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 30% 35%, #7a5233 0 1px, transparent 1.6px) 0 0 / 6px 6px, radial-gradient(circle at 70% 65%, #d9b582 0 1px, transparent 1.6px) 0 0 / 9px 8px,
    radial-gradient(circle at 50% 50%, #8e6440 0 .9px, transparent 1.4px) 2px 3px / 5px 5px, #b98a59;
  box-shadow: inset 0 0 0 3px #9ca0a5, inset 0 0 0 4px rgba(0,0,0,.35), 0 18px 26px -10px rgba(20,5,14,.85); }
.blank .back span { font-family: var(--name); font-size: clamp(14px, 6.6cqw, 34px); line-height: 1.1; color: #4a2f17; text-shadow: 0 1px 0 rgba(255,230,190,.35); padding: 0 8%; }
.pp.slabview { perspective: 900px; container-type: inline-size; }
#carry .cl .blank .face { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #2c2e33, 0 30px 30px -12px rgba(20,5,14,.9); }
#play.bought .playbtn .fill { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plate, .tag, .pb { transition: none; }
  .slot.pop .plate { transform: none; }
  .slot.last .pb { animation: none; box-shadow: var(--pb-shadow), 0 0 0 3px rgba(255,95,174,.9); }
  #crane.on .beacon::after { animation: none; }
  #lasers .beam { animation: none; }
  #lasers .scanline { display: none; }
}

/* ---------- the field: the wall of eight, and the Burn Run bay beside it (10-21) ----------
   Phones and tablets: the bay is its own row under the wall, the plate at one wall column's width beside its copy. From 1100 px:
   the bay stands to the right of the two rows of four. The bay's accent is gold. */
#field { position: relative; margin-top: 28px; display: grid; row-gap: 40px; }
.bay-s01 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 14px 14px 4px; border-radius: 12px;
  background: linear-gradient(rgba(42,6,25,.6), rgba(26,7,19,.82)), var(--diamond); background-size: auto, 22px 22px;
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px rgba(26,7,19,.55), inset 0 0 40px rgba(26,7,19,.6), 0 0 30px rgba(var(--laser),.22); }
.bay-head { grid-column: 1 / -1; margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: var(--name); font-weight: 400; font-size: clamp(22px, 4.4vw, 30px); line-height: 1.05; letter-spacing: 0; color: var(--gold-lt);
  text-shadow: 2px 3px 0 var(--hot-deep); }
.bay-head span { font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--lilac); text-shadow: none; }
.bay-note { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--cream); }
.bay-s01 { margin-bottom: 26px; }
.bay-s01 .slot { scroll-margin: 90px 0 24px; }
/* the bay's sill: hazard stripes edged in gold, in place of the rack's gold beam */
.bay-s01 .slot::after { left: -6px; right: -6px; background: repeating-linear-gradient(-45deg, var(--hz) 0 8px, var(--hzk) 8px 16px);
  box-shadow: 0 0 0 2px var(--gold), 0 6px 10px rgba(20,5,14,.6); }
.bay-s01 .pb { box-shadow: var(--pb-shadow), 0 0 0 2px rgba(244,195,74,.85), 0 18px 22px -8px rgba(20,5,14,.75); }
.bay-s01 .slot.pop .pb { box-shadow: var(--pb-shadow), 0 0 0 2px var(--gold-lt), 0 30px 34px -10px rgba(20,5,14,.85), 0 0 30px rgba(var(--laser),.45); }
.bay-s01 .ttl { color: #4a2f05; }
.bay-s01 .no { color: rgba(74,47,5,.75); }
@media (min-width: 600px) { .bay-s01 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 22px; padding-inline: 22px; } }
@media (min-width: 820px) { .bay-s01 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 26px; } .bay-note { max-width: 30em; } }
@media (min-width: 1100px) {
  .wrap { max-width: 1340px; }
  #field { grid-template-columns: minmax(0, 4fr) minmax(0, 1.15fr); column-gap: 44px; align-items: start; }
  .bay-s01 { margin-bottom: 0; grid-template-columns: minmax(0, 1fr); align-self: stretch; align-content: start; padding: 18px 20px 16px; row-gap: 6px; }
  .bay-head { flex-direction: column; gap: 6px; font-size: 24px; }
  .bay-note { font-size: 15px; }
}

/* ---------- Play (10-22): the laser cuts the slab free, the floor falls through, then the game drops in ----------
   yard.js builds #drop over the play view when Play is pressed: the dark below the floor, the floor's shards (clones of the
   play view, each clipped to one piece of the break), the cracks, the empty plate, the cut slab with its kerf, the beam and the
   laser's spot. The shards, the plate and the slab show from the first frame (together they are the play view, pixel for
   pixel), so they are painted at the press and the break only moves them. The sparks, smoke and embers are on the #fx canvas
   above it all. The laser is the Lab's pink; the kerf runs white-hot and cools to gold, as the mark does on /lab. */
/* while the cut runs, the floor's shards and the dark cover the screen: the yard under them is not painted at all */
#stage.cutting > #lamps, #stage.cutting > #racks, #stage.cutting > #lasers, #stage.cutting > #vent, #stage.cutting > #yard { visibility: hidden; }
#drop { position: absolute; inset: 0; z-index: 30; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#drop .void { position: absolute; inset: 0; visibility: hidden;
  background: radial-gradient(38% 30% at 50% 50%, rgba(var(--laser),.2), rgba(var(--laser),.06) 55%, transparent 75%),
    radial-gradient(130% 100% at 50% 50%, #22071a, #0e030a 65%, #040103); }
#drop .shards { position: absolute; inset: 0; perspective: 1000px; }
#drop .shard { position: absolute; overflow: hidden; will-change: transform; }   /* layers made at the press, so the break only moves them */
#drop .shard-src { position: absolute; left: 0; top: 0; pointer-events: none; }
/* glows are drawn as wide faint strokes under the lines, not filters: a filter would repaint the whole screen every frame */
#drop .cracks { position: absolute; left: 0; top: 0; visibility: hidden; overflow: visible; pointer-events: none; }
#drop .cracks polyline { fill: none; stroke: #ffe6f3; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
#drop .cracks polyline.glow { stroke: rgba(var(--laser),.45); stroke-width: 9; }
#drop .drop-frame { position: absolute; margin: 0; z-index: auto; transform-origin: 50% 40%; will-change: transform; }
#drop .drop-frame .pocket { position: relative; }
#drop .drop-frame .hot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px rgba(255,214,236,.95), inset 0 0 18px 3px rgba(var(--laser),.8); }
#drop .drop-slab { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
#drop .drop-slab img { position: relative; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
#drop .drop-slab .shadow { position: absolute; inset: 10% 2% -8%; border-radius: 8px; background: rgba(10,2,6,.9); filter: blur(16px); opacity: 0; }
#drop .kerf { position: absolute; overflow: visible; pointer-events: none; }
#drop .kerf path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#drop .kerf .glow { stroke: rgba(var(--laser),.42); stroke-width: 10; }
#drop .kerf .trail { stroke: #ff8cc6; stroke-width: 2.6; }
#drop .kerf .head { stroke: #fff6fb; stroke-width: 3.6; }
#drop .beam { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; opacity: 0; }
#drop .beam line { stroke-linecap: round; }
#drop .beam .glow { stroke: rgba(var(--laser),.3); stroke-width: 7; }
#drop .beam .core { stroke: rgba(255,232,244,.85); stroke-width: 1.4; }
#drop .dot { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
#drop .dot .in { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, #ffd2ea 15%, rgba(var(--laser),.72) 32%, rgba(var(--laser),0) 70%); }