/* V10.6 Cluster Tetris: the integration puzzle at the bell (TETRIS-owned; view in src/ui/tetris.js).
   A black server rack on the mahogany desk, a CRT strip above it, cream pad keys in the rail.
   GPU colours come from tokens.css (H100 green, H200 blue, B200 copper). Cell size follows the
   space the desk leaves (container units), so the rack fits at 1280, 390 and 320 px without scroll.
   Everything that moves is under prefers-reduced-motion: no-preference. */

#pit .pit-focus.desk-tetris .pit-focus-body{padding:10px 16px 8px}
#pit .tt{--side-w:236px;--ul:20px;--led:14px;height:100%;min-height:0;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;color:#f2e6cb}
#pit .g-h100{--c:var(--h100);--hi:var(--h100-hi);--dk:var(--h100-deep);--die:var(--h100-die)}
#pit .g-h200{--c:var(--h200);--hi:var(--h200-hi);--dk:var(--h200-deep);--die:var(--h200-die)}
#pit .g-b200{--c:var(--b200);--hi:var(--b200-hi);--dk:var(--b200-deep);--die:var(--b200-die)}
#pit .g-sw{--c:#7d8780;--hi:#c9d1cb;--dk:#3a403c;--die:#262b28}

/* ---- The CRT strip: time · ONLINE NOW · rows ------------------------------------------------------ */
#pit .tt-strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 16px;width:min(620px,100%);margin:0 auto;box-sizing:border-box;padding:6px 12px 7px;
 background:radial-gradient(ellipse at 50% 0,#163424,#0b1610 70%);border:1px solid #2f7a47;border-radius:5px;box-shadow:inset 0 0 18px #000c,0 2px 0 #1c110a;font-family:var(--money);color:#9df0b0}
#pit .tt-cap{display:block;font:700 10px/1.1 var(--money);letter-spacing:.14em;color:#5fae7b}
#pit .tt-clock{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:6px;min-width:58px}
#pit .tt-clock .tt-cap{grid-column:1/-1}
#pit .tt-clock b{font:700 26px/1 var(--money);color:#ffd27a;font-variant-numeric:tabular-nums;text-shadow:0 0 8px #ffb54766}
#pit .tt-fuse{grid-column:1/-1;display:block;height:4px;margin-top:3px;background:#24180a;border-radius:2px;overflow:hidden}
#pit .tt-fuse>i{display:block;height:100%;width:calc(var(--left,1) * 100%);background:linear-gradient(90deg,#b23a2e,#ffb547);transition:width .25s linear}
#pit .tt-clock.is-short b{color:#ffb2a2}
#pit .tt-meter{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;min-width:0}
#pit .tt-meter b{grid-column:2;grid-row:1;justify-self:end;font:800 24px/1 var(--money);color:#c9ffd6;font-variant-numeric:tabular-nums;text-shadow:0 0 10px #7cf29a66}
#pit .tt-bar{grid-column:1/-1;position:relative;display:block;height:10px;margin-top:4px;background:#07100b;border:1px solid #2f7a47;border-radius:2px}
#pit .tt-bar-base{position:absolute;left:0;top:0;bottom:0;width:40%;background:repeating-linear-gradient(45deg,#2f7a4766 0 3px,transparent 3px 7px)}
#pit .tt-bar-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,.4) * 100%);background:linear-gradient(90deg,#2b6b42 0,#2b6b42 calc(40% / var(--v,.4)),#5fd486 calc(40% / var(--v,.4)),#c9ffd6);transition:width .35s var(--ease-out)}
#pit .tt-bar-skip{position:absolute;left:75%;top:-4px;bottom:-4px;width:2px;background:#ffb547;box-shadow:0 0 4px #ffb547}
#pit .tt-bar-legend{grid-column:1/-1;position:relative;display:block;height:12px;margin-top:2px;font:600 9px/12px var(--money);letter-spacing:.06em;color:#5fae7b}
#pit .tt-bar-legend span{position:absolute;white-space:nowrap}
#pit .tt-bar-legend span:first-child{left:0}#pit .tt-bar-legend span:last-child{left:75%;transform:translateX(-50%);color:#d6a04c}
#pit .tt-rowcount{text-align:right;min-width:52px}
#pit .tt-rowcount b{font:700 22px/1 var(--money);color:#9df0b0;font-variant-numeric:tabular-nums}

/* ---- The field: rack + side panel, sized by the space it has ------------------------------------ */
#pit .tt-field{position:relative;min-height:0;container-type:size;overflow:hidden}
#pit .tt-stage{--cell:clamp(16px,min(calc((100cqh - 22px) / var(--rows)),calc((100cqw - var(--side-w) - var(--ul) - var(--led) - 44px) / var(--cols))),var(--cell-max,54px));
 height:100%;display:flex;align-items:center;justify-content:center;gap:16px}
#pit .tt-rackframe{position:relative;flex:0 0 auto;padding:6px 8px 8px 6px;background:linear-gradient(90deg,#30352f,#151917 9%,#121614 91%,#30352f);border:2px solid #474f49;border-radius:5px;
 box-shadow:0 12px 26px #000b,inset 0 0 0 1px #000,inset 0 2px 0 #ffffff14}
#pit .tt-rackframe:before,#pit .tt-rackframe:after{content:'';position:absolute;top:8px;bottom:8px;width:4px;background:repeating-linear-gradient(#0008 0 3px,transparent 3px 8px);opacity:.7}
#pit .tt-rackframe:before{left:2px}#pit .tt-rackframe:after{right:2px}
#pit .tt-baylabel{position:absolute;top:5px;left:calc(var(--ul) + 10px);font:700 9px/1 var(--money);letter-spacing:.18em;color:#8a7a5c;pointer-events:none}
#pit .tt-rack{display:grid;grid-template-rows:repeat(var(--rows),var(--cell));touch-action:none;user-select:none;-webkit-user-select:none}
#pit .tt-row{position:relative;display:grid;grid-template-columns:var(--ul) repeat(var(--cols),var(--cell)) var(--led);align-items:center}
#pit .tt-u{font:600 9px/1 var(--money);color:#7d6f55;text-align:center;font-style:normal}
#pit .tt-led{justify-self:end;width:8px;height:8px;border-radius:50%;background:#1b2820;box-shadow:inset 0 1px 1px #000,0 0 0 1px #0006}
#pit .tt-row.is-bay .tt-led{visibility:hidden}
#pit .tt-row.is-bay{background:linear-gradient(90deg,transparent var(--ul),#ffffff05 var(--ul),#ffffff05 calc(100% - var(--led)),transparent 0)}
#pit .tt-row.is-lip:before{content:'';position:absolute;left:var(--ul);right:var(--led);top:-2px;height:2px;background:linear-gradient(90deg,#c9a861,#ecd297,#c9a861);box-shadow:0 0 6px #c9a86155}

/* Slots and modules. Joined sides (j-t/r/b/l) drop their edge so a module reads as one piece. */
#pit .tt-cell{position:relative;box-sizing:border-box;width:var(--cell);height:var(--cell);border:2px solid transparent;background:#0b110e;background-clip:border-box;box-shadow:inset 0 0 0 1px #1d2923}
#pit .tt-row.is-bay .tt-cell:not([class*=" g-"]){background:transparent;box-shadow:none}
/* A module is one flat-coloured board: outlined on its outer edges only, lit along its top edge. */
#pit .tt-cell[class*=" g-"]{background:var(--c);border-color:color-mix(in srgb,var(--dk) 65%,#000);box-shadow:none}
#pit .tt-cell[class*=" g-"]:not(.j-t){box-shadow:inset 0 2px 0 color-mix(in srgb,var(--hi) 75%,transparent)}
#pit .tt-cell[class*=" g-"]:after{content:'';position:absolute;inset:26%;border-radius:2px;background:var(--die);box-shadow:inset 0 0 0 1px #ffffff1f;opacity:.85}
#pit .tt-cell.g-b200:after{inset:27% 18%;background:linear-gradient(90deg,var(--die) 0 46%,transparent 46% 54%,var(--die) 54%)}  /* two dies */
#pit .tt-cell.g-h200:after{inset:24% 24% 34%;box-shadow:0 calc(var(--cell) * .18) 0 -1px #0005}
#pit .tt-cell.g-sw{background:repeating-linear-gradient(90deg,#4b544e 0 5px,#3a413d 5px 7px);border-color:#000a}
#pit .tt-cell.g-sw:after{inset:38% 18%;border-radius:1px;background:repeating-linear-gradient(90deg,#9df0b0 0 2px,transparent 2px 6px);opacity:.55}
#pit .tt-cell.is-cur{border-color:#fff7e0cc;filter:brightness(1.1)}
#pit .tt-cell.is-ghost{background:color-mix(in srgb,var(--c) 16%,transparent);border-style:dashed;border-color:var(--hi);box-shadow:none;opacity:.8}
#pit .tt-cell.is-ghost:after{display:none}
#pit .tt-cell.is-bounce{background:#b23a2e66;border-color:#ffb2a2;box-shadow:none}
#pit .tt-cell.j-t{border-top-color:transparent}#pit .tt-cell.j-r{border-right-color:transparent}
#pit .tt-cell.j-b{border-bottom-color:transparent}#pit .tt-cell.j-l{border-left-color:transparent}
/* Powered rows glow and keep their LED lit; a row with a covered empty slot can never power. */
#pit .tt-row.is-powered .tt-cell[class*=" g-"]{filter:brightness(1.16) saturate(1.08)}
#pit .tt-row.is-powered{box-shadow:0 0 12px #7cf29a22}
#pit .tt-row.is-powered .tt-led{background:#7cf29a;box-shadow:0 0 8px #7cf29a,0 0 0 1px #0006}
#pit .tt-row.is-dead .tt-led{background:#6b1f17;box-shadow:inset 0 1px 1px #000}
#pit .tt-row.is-dead .tt-cell:not([class*=" g-"]){background:repeating-linear-gradient(45deg,#2a0f0b 0 3px,#0b110e 3px 7px)}

/* ---- Side panel: NEXT, stakes, keys ------------------------------------------------------------------ */
#pit .tt-side{flex:0 0 var(--side-w);width:var(--side-w);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;align-self:center}
#pit .tt-next{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 10px;min-height:40px;background:#0d1c14;border:1px solid #2f7a47;border-radius:4px;box-shadow:inset 0 0 12px #000a;--m:13px}
#pit .tt-next:empty{display:none}
#pit .tt-next-item{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--money);color:#d7f5df}
#pit .tt-next-item.is-later{opacity:.62}#pit .tt-next-item.is-empty{font-weight:600;color:#5fae7b}
#pit .tt-more{font:600 11px/1 var(--money);color:#5fae7b}
#pit .tt-out{padding:3px 6px;border:1px dashed #ffb2a2;border-radius:3px;font:700 10px/1.2 var(--money);color:#ffb2a2}
#pit .tt-mini{display:inline-grid;grid-template-columns:repeat(var(--w),var(--m,12px));grid-template-rows:repeat(var(--h),var(--m,12px));gap:1px;vertical-align:middle}
#pit .tt-mini i{background:linear-gradient(155deg,var(--hi) -40%,var(--c) 40%,var(--dk) 130%);border:1px solid #0009;border-radius:1px}
#pit .tt-side-more{display:flex;flex-direction:column;gap:8px}
#pit .tt-stakes{margin:0;padding:8px 10px;list-style:none;display:flex;flex-direction:column;gap:5px;background:#f3e9d0;color:var(--ink);border:1px solid #cdb889;border-radius:3px;box-shadow:0 2px 0 #b9a378;font:12px/1.3 var(--money)}
#pit .tt-stakes li{display:flex;flex-direction:column}#pit .tt-stakes b{font-size:12px}#pit .tt-stakes span{color:var(--ink-soft)}
#pit .tt-stakes .tt-tune{margin-top:2px;padding-top:5px;border-top:1px dashed #b9a378}#pit .tt-stakes .tt-tune b{color:#7d1d16;letter-spacing:.12em}
#pit .tt-keys{margin:0;font:600 11px/1.6 var(--money);color:#d9c79f}
#pit .tt-keys kbd{display:inline-block;min-width:16px;padding:0 4px;margin:0 1px;border:1px solid #9a8a6a;border-radius:3px;background:#f3e9d0;color:var(--ink);font:700 10px/1.5 var(--money);text-align:center;box-shadow:0 1px 0 #6d5d42}
#pit .tt-rule{margin:0 auto;max-width:640px;text-align:center;font:italic 13px/1.35 Georgia,serif;color:#d9c79f}
#pit .tt-say{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#pit .tt.is-intro .tt-rule,#pit .tt.is-done .tt-rule{visibility:hidden}

/* ---- The intro card (before START): what is at stake, one line of rules, the choice -------------- */
#pit .tt-overlay.tt-intro{position:absolute;inset:0;z-index:4;display:grid;place-items:center;overflow:auto;padding:6px;background:#0b0e0ab8}
#pit .tt-card{width:min(560px,100%);box-sizing:border-box;padding:14px 18px 14px;border-radius:3px;display:flex;flex-direction:column;gap:9px}
#pit .tt-eyebrow{margin:0;font:700 11px/1 var(--money);letter-spacing:.16em;color:#7d1d16}
#pit .tt-card h3{margin:0;font:700 22px/1.15 Georgia,serif;color:var(--ink)}
#pit .tt-manifest{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;--m:11px}
#pit .tt-manifest li{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}
#pit .tt-manifest .tt-shapes{grid-row:1/3;display:flex;gap:4px;align-items:flex-end}
#pit .tt-manifest b{font:700 14px/1.1 var(--money);color:var(--dk)}#pit .tt-manifest small{font:600 11px/1.1 var(--money);color:var(--ink-soft)}
#pit .tt-rule-big{margin:0;font:600 14px/1.35 Georgia,serif;color:var(--ink)}
#pit .tt-card .tt-stakes{background:#fffaf0;box-shadow:none}
#pit .tt-card .tt-keys{color:var(--ink-soft)}#pit .tt-card .tt-keys kbd{background:#fff}

/* ---- The finish: a stamp in the loading bay over the lit rack ------------------------------------- */
#pit .tt-overlay.tt-finish{position:absolute;z-index:3;left:0;right:0;top:0;min-height:calc(var(--cell) * 4 + 6px);display:grid;place-items:center;pointer-events:none}
#pit .tt-result{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:calc(100% - 8px);padding:6px 10px;text-align:center;background:#0b0e0ad9;border:1px solid #c9a861;border-radius:4px;box-shadow:0 8px 20px #000c}
#pit .tt-stamp{display:inline-block;padding:3px 10px;border:4px double currentColor;color:#9df0b0;font:900 clamp(15px,calc(var(--cell) * .6),24px)/1.05 var(--money);letter-spacing:.06em;white-space:nowrap;transform:rotate(-4deg);text-shadow:0 0 10px #7cf29a88}
#pit .tt-result p{margin:0;font:600 12px/1.3 var(--money);color:#e9dcbd}#pit .tt-result p b{color:#fff3d4}
#pit .tt-result .tt-score{font-size:11px;color:#c9a861;letter-spacing:.04em}
#pit .tt-result.is-crew .tt-stamp{color:#ecd297;text-shadow:none}
#pit .tt-result.is-perfect{border-color:#f3d27a;background:radial-gradient(ellipse at 50% 30%,#3d2c0bf0,#0b0e0ae6 75%)}
#pit .tt-result.is-perfect .tt-stamp{color:#ffd77a;font-size:clamp(18px,calc(var(--cell) * .75),30px);text-shadow:0 0 14px #ffd77a,0 0 2px #fff}
#pit .tt.is-perfect .tt-rackframe{border-color:#ecd297;box-shadow:0 0 0 2px #c9a861,0 0 36px #f3d27a77,0 12px 26px #000b}
#pit .tt.is-perfect .tt-row.is-rack .tt-cell[class*=" g-"]{filter:brightness(1.3) saturate(1.15)}
#pit .tt.is-perfect .tt-row.is-rack .tt-led{background:#ffe9a8;box-shadow:0 0 10px #ffd77a}
#pit .tt.is-done .tt-next{display:none}

/* ---- The pad (in the rail while playing) ------------------------------------------------------------- */
#pit .pit-focus-footer .tt-pad{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,minmax(48px,1fr)) minmax(80px,1.6fr);gap:8px;max-width:560px;margin:0 auto}
#pit .tt-key{min-height:52px;min-width:48px;padding:0 4px;font:700 22px/1 var(--money);color:var(--ink);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#pit .tt-key.is-down{transform:translateY(3px);box-shadow:0 1px 0 #6d5d42,0 1px 2px #0005}
#pit .tt-key-drop{font-size:16px;letter-spacing:.08em;background:linear-gradient(#fbe8ae,#d9b45d 48%,#b48d3e 52%,#caa452);border-color:#6e5420;box-shadow:inset 0 1px 0 #fff8,0 4px 0 #4b3714,0 5px 8px #0006}
#pit .tt-key-drop.is-down{box-shadow:inset 0 1px 0 #fff8,0 1px 0 #4b3714}
#pit .pit-focus-footer .tt-skip{white-space:nowrap}

/* ---- Phones: strip on top, rack + a slim NEXT column, the pad under your thumbs --------------------- */
@media (max-width:768px){
 #pit .pit-focus.desk-tetris .pit-focus-body{padding:6px 6px 4px}
 #pit .tt{--side-w:54px;--ul:14px;--led:11px;--cell-max:46px;gap:5px}
 #pit .tt-strip{padding:4px 8px 3px;gap:2px 10px}
 #pit .tt-clock{min-width:44px}#pit .tt-clock b{font-size:20px}
 #pit .tt-meter b{font-size:19px}#pit .tt-rowcount b{font-size:18px}#pit .tt-rowcount{min-width:40px}
 #pit .tt-cap{font-size:9px;letter-spacing:.1em}
 #pit .tt-bar-legend{font-size:8px}
 #pit .tt-stage{gap:6px}
 #pit .tt-rackframe{padding:5px 5px 6px 4px}
 #pit .tt-baylabel{font-size:8px;letter-spacing:.12em}
 #pit .tt-u{font-size:7px}
 #pit .tt-side{align-self:flex-start;margin-top:8px}
 #pit .tt-next{padding:6px 4px;gap:7px;align-items:center;--m:8px}
 #pit .tt-next-item{flex-direction:column;gap:3px;font-size:9px}
 #pit .tt-side-more{display:none}
 #pit .tt-rule{font-size:11px;line-height:1.25}
 #pit .tt.is-play .tt-rule{display:none}
 #pit .tt-card{padding:10px 12px;gap:7px}
 #pit .tt-card h3{font-size:18px}
 #pit .tt-rule-big{font-size:13px}
 #pit .tt-card .tt-keys{display:none}
 #pit .tt-stakes{font-size:11px;padding:6px 8px}
 #pit .tt-result{padding:4px 6px;gap:2px}
 #pit .tt-result p{font-size:11px}
 #pit .pit-focus-footer .tt-pad{gap:6px;grid-template-columns:repeat(4,minmax(46px,1fr)) minmax(70px,1.5fr)}
 #pit .tt-key{min-width:46px;min-height:50px;font-size:20px}
 #pit .tt-key-drop{font-size:14px;letter-spacing:.04em}
}
@media (max-width:360px){
 #pit .tt{--side-w:44px}
 #pit .tt-next{--m:7px}
 #pit .tt-bar-legend span:first-child{display:none}
 #pit .tt-manifest{gap:6px 10px}
 #pit .pit-focus-footer .tt-pad{gap:5px;grid-template-columns:repeat(4,minmax(44px,1fr)) minmax(62px,1.4fr)}
 #pit .tt-key{min-width:44px;font-size:19px}
 #pit .tt-key-drop{font-size:13px;letter-spacing:0}
}

/* ---- Motion: seat, power-up sweep, bounce, the jackpot cascade ------------------------------------- */
@media (prefers-reduced-motion:no-preference){
 #pit .tt-cell.is-new{animation:tt-seat .36s var(--ease-out)}
 #pit .tt-row.is-fresh .tt-cell{animation:tt-power .9s var(--ease-out)}
 #pit .tt-row.is-fresh:after{content:'';position:absolute;top:0;bottom:0;left:var(--ul);width:30%;background:linear-gradient(90deg,transparent,#fffbe8bb,transparent);pointer-events:none;animation:tt-sweep .7s ease-out forwards}
 #pit .tt-cell.is-bounce{animation:tt-bounce .9s ease-out forwards}
 #pit .tt-clock.is-short b{animation:tt-blink 1s steps(2,jump-none) infinite}
 #pit .tt.is-perfect .tt-row.is-rack .tt-cell{animation:tt-jackpot 1.1s calc(var(--i) * 110ms) var(--ease-out) both}
 #pit .tt.is-perfect .tt-row.is-rack .tt-led{animation:tt-led .5s calc(var(--i) * 110ms) both}
 #pit .tt.is-perfect .tt-rackframe{animation:tt-halo 1.8s 1s ease-in-out infinite alternate}
 #pit .tt.is-done .tt-stamp{animation:tt-slam .55s .15s var(--ease-slam) both}
 #pit .tt-result.is-perfect:before,#pit .tt-result.is-perfect:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;pointer-events:none;
  box-shadow:-70px -30px 0 #ffd77a,60px -36px 0 #9df0b0,-50px 34px 0 #a9cbff,80px 26px 0 #f3c98a,0 -52px 0 #fff3d4,-96px 4px 0 #9df0b0,98px -6px 0 #ffd77a;animation:tt-sparks 1s .3s ease-out both}
 #pit .tt-result.is-perfect:after{transform:rotate(40deg);animation-delay:.5s}
 #pit .tt-result.is-perfect{position:relative}
 #pit .tt-overlay.tt-intro .tt-card{animation:tt-card-in .35s var(--ease-out) both}
}
@keyframes tt-seat{0%{transform:translateY(-3px) scale(1.06);filter:brightness(1.7)}100%{transform:none;filter:none}}
@keyframes tt-power{0%{filter:brightness(2.4) saturate(.4)}100%{filter:brightness(1.16) saturate(1.08)}}
@keyframes tt-sweep{0%{transform:translateX(-40%);opacity:0}20%{opacity:1}100%{transform:translateX(330%);opacity:0}}
@keyframes tt-bounce{0%{transform:none;opacity:1}100%{transform:translateY(-10px);opacity:0}}
@keyframes tt-blink{50%{opacity:.35}}
@keyframes tt-jackpot{0%{filter:none}35%{filter:brightness(2.6) saturate(.5);box-shadow:0 0 18px #fff3d4}100%{filter:brightness(1.3) saturate(1.15)}}
@keyframes tt-led{0%{transform:scale(1)}50%{transform:scale(1.8)}100%{transform:scale(1)}}
@keyframes tt-halo{0%{box-shadow:0 0 0 2px #c9a861,0 0 22px #f3d27a55,0 12px 26px #000b}100%{box-shadow:0 0 0 3px #ecd297,0 0 48px #f3d27a99,0 12px 26px #000b}}
@keyframes tt-slam{0%{transform:scale(2.3) rotate(-14deg);opacity:0}60%{transform:scale(.94) rotate(-3deg);opacity:1}100%{transform:rotate(-4deg)}}
@keyframes tt-sparks{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes tt-card-in{0%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}

#pit .broker-gpu{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;vertical-align:middle}
#pit .broker-piece{--m:8.5px}