/* =====================================================================================================================
   V20 THE SCALE-UP: Cable Mania and Kernel Snake in the HSC system (paper, ink, Mac windows, one Note Yellow
   highlight; GPU colours and textures as the one colour exception; LED green only for live links and the strip).
   They reuse Node Tetris's frame: the LED strip (.tt-strip), the intro card (.tt-card), the result stamp (.tt-result)
   and the grade line, so the three games read as one family. Everything that moves is under no-preference motion.
   ===================================================================================================================== */
#pit .arc { --side-w: 176px; }
#pit .arc-field { position: relative; min-height: 0; container-type: size; overflow: hidden; }
#pit .arc-stage { height: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; }
#pit .arc-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 .arc-nodes { margin: 0; padding: 8px 10px; list-style: none; display: flex; flex-direction: column; gap: 5px; background: var(--hsc-coupon); border: 1.5px dashed var(--hsc-ink); font: 400 13px/1.25 var(--hsc-sans); color: var(--hsc-ink); }
#pit .arc-nodes li { display: flex; align-items: center; gap: 6px; }
#pit .arc-nodes li > i { flex: none; width: 12px; height: 12px; background: var(--tx, none), var(--c); box-shadow: 0 0 0 1.5px var(--hsc-ink); }
#pit .arc-nodes b { font-weight: 700; }
#pit .arc-nodes .arc-goal { padding-top: 4px; border-top: 1px dashed var(--hsc-ink); }
#pit .arc-card h3 { margin-top: 2px; }
#pit .arc-scale { margin: 0; font: 400 13px/1.35 var(--hsc-sans); color: var(--hsc-grey); }
#pit .arc-card .arc-nodes { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; background: transparent; border: 0; padding: 0; }
#pit .arc-milestone { display: grid; gap: 3px; margin: 2px 0 2px; padding: 9px 12px; background: var(--hsc-note); border: 2px solid var(--hsc-ink); box-shadow: var(--hsc-shadow-sm); }
#pit .arc-milestone b { font: 500 12px/1.2 var(--hsc-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--hsc-ink); }
#pit .arc-milestone span { font: italic 15px/1.4 var(--hsc-serif); color: var(--hsc-ink); }
#pit .arc-pad { flex: 1 1 auto; display: grid; gap: 8px; max-width: 560px; margin: 0 auto; }
#pit .arc-pad .tt-key { min-height: 52px; font: 700 18px/1 system-ui, sans-serif; }
#pit .arc-pad .tt-key .wide { display: inline; font: 700 14px/1 var(--hsc-ui); letter-spacing: .04em; }
/* A long intro (the first-time milestone on a small phone) scrolls from its top instead of being cut at both ends. */
#pit .arc .tt-overlay.tt-intro { place-items: safe center; }

/* ---- Cable Mania: the data-hall floor ----------------------------------------------------------------------- */
#pit .arc-cable .arc-stage { --cell: clamp(34px, min(calc((100cqh - 26px) / 7), calc((100cqw - var(--side-w) - 52px) / 7)), 76px); }
#pit .ch-frame { position: relative; flex: 0 0 auto; padding: 18px 8px 8px; background: var(--hsc-ink); border-radius: 3px; box-shadow: 0 0 0 2px var(--hsc-paper), 0 0 0 4px var(--hsc-ink), 5px 5px 0 4px var(--hsc-ink); }
#pit .ch-frame .tt-baylabel { left: 10px; top: 5px; }
#pit .arc .tt-baylabel .arc-seal { display: inline-block; height: 10px; width: auto; margin-right: 6px; vertical-align: -1px; }  /* the house seal on the hardware */
#pit .ch-board { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell)); background: var(--hsc-paper); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#pit .ch-board, #pit .ch-queue { touch-action: none; }
#pit .ch-drop-valid { outline: 3px solid var(--hsc-led); outline-offset: -3px; }
#pit .ch-drop-invalid { outline: 2px dashed var(--hsc-led-warn); outline-offset: -2px; }
.ch-drag-ghost { position: fixed; z-index: 10000; width: 42px; height: 42px; transform: translate(-50%, -50%); pointer-events: none; background: var(--hsc-paper); border: 1px solid var(--hsc-ink); opacity: .9; }
.ch-drag-ghost.is-invalid { opacity: .55; }
.ch-drag-ghost svg { width: 100%; height: 100%; }
.ch-drag-ghost .ch-wire { stroke: var(--hsc-ink); stroke-width: 9; }
.ch-drag-ghost .ch-core { stroke: var(--hsc-paper); stroke-width: 3; }
.ch-drag-ghost .ch-joint, .ch-drag-ghost .ch-leaf { fill: var(--hsc-ink); }
#pit .ch-cell { position: relative; display: block; width: var(--cell); height: var(--cell); min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--hsc-paper); box-shadow: inset 0 0 0 .5px var(--hsc-grey-light); cursor: default; -webkit-tap-highlight-color: transparent; }
#pit .ch-cell svg { display: block; width: 100%; height: 100%; overflow: visible; }
#pit .ch-cell.can-lay { cursor: pointer; }
@media (hover: hover) { #pit .arc-cable.is-play .ch-cell.can-lay:hover { background: var(--hsc-coupon); } }
#pit .ch-cell.is-cursor { z-index: 2; box-shadow: inset 0 0 0 3px var(--hsc-note), 0 0 0 2px var(--hsc-ink); }
#pit .ch-cell.is-b { background: var(--pat-hatch), var(--hsc-paper); }
#pit .ch-wire { stroke: var(--hsc-ink); stroke-width: 9; stroke-linecap: square; }
#pit .ch-core { stroke: var(--hsc-paper); stroke-width: 3; stroke-linecap: square; }
#pit .ch-core.is-lit { stroke: var(--hsc-led); stroke-width: 4.5; }
#pit .ch-stub { stroke: var(--hsc-ink); stroke-width: 4; stroke-dasharray: 2 2; }
#pit .ch-joint { fill: var(--hsc-ink); }
#pit .ch-leaf { fill: var(--hsc-ink); stroke: var(--hsc-paper); stroke-width: 1.5; }
#pit .ch-ghost { opacity: .5; }
/* V22.8: the preview of the cable in hand is dashed and hollow, so an empty tile never reads as a laid cable. */
#pit .ch-ghost .ch-wire { stroke-dasharray: 5 4; stroke-width: 6; stroke-linecap: butt; }
#pit .ch-ghost .ch-core { stroke: none; }
#pit .ch-ghost .ch-joint { fill: none; stroke: var(--hsc-ink); stroke-width: 1.5; }
#pit .ch-spine { fill: var(--hsc-ink); stroke: var(--hsc-paper); stroke-width: 1.5; }
#pit .ch-spine-t { fill: var(--hsc-paper); font: 700 6.4px/1 var(--hsc-sans); letter-spacing: .06em; text-anchor: middle; dominant-baseline: middle; }
#pit .ch-ports rect { fill: var(--hsc-grey); }
#pit .ch-ports rect.is-lit { fill: var(--hsc-led); }
#pit .ch-node { fill: var(--c); stroke: var(--hsc-ink); stroke-width: 2; }
#pit .ch-slot { stroke: var(--hsc-ink); stroke-width: 1.2; opacity: .55; }
#pit .ch-led { fill: var(--hsc-ink); stroke: var(--hsc-paper); stroke-width: 1; }
#pit .ch-led.is-lit { fill: var(--hsc-led); }
#pit .ch-node-port line { stroke: var(--hsc-ink); stroke-width: 7; stroke-linecap: square; }
#pit .ch-node-port circle { fill: var(--hsc-paper); stroke: var(--hsc-ink); stroke-width: 2.5; }
#pit .ch-node-port.is-lit line { stroke: var(--hsc-led); stroke-width: 7; }
#pit .ch-node-port.is-lit circle { fill: var(--hsc-led); stroke: var(--hsc-ink); }
#pit .ch-block { fill: var(--hsc-grey-light); stroke: var(--hsc-ink); stroke-width: 2; }
#pit .ch-block-in { fill: none; stroke: var(--hsc-ink); stroke-width: 1; stroke-dasharray: 2 2; }
#pit .ch-dot { fill: var(--hsc-grey-light); }
#pit .ch-spark circle { fill: var(--hsc-led-warn); stroke: var(--hsc-ink); stroke-width: 1.5; }
#pit .ch-spark path { stroke: var(--hsc-paper); stroke-width: 1.5; }
#pit .ch-node-label { position: absolute; z-index: 1; left: 50%; top: 2px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; max-width: calc(100% - 4px); padding: 0 2px; background: var(--hsc-paper); box-shadow: 0 0 0 1px var(--hsc-ink); font: 700 clamp(7px, calc(var(--cell) * .16), 11px)/1.1 var(--hsc-sans); color: var(--hsc-ink); white-space: nowrap; pointer-events: none; }
#pit .ch-cell.port-north .ch-node-label { top: auto; bottom: 2px; }
#pit .ch-cell.is-n.is-live .ch-node-label { background: var(--hsc-led); }
#pit .ch-queue { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; background: var(--hsc-paper); border: 2px solid var(--hsc-ink); border-radius: 2px; box-shadow: var(--hsc-shadow-sm); }
#pit .ch-q { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px; border: 1px solid var(--hsc-ink); background: var(--hsc-paper); color: var(--hsc-ink); cursor: pointer; }
#pit .ch-q:disabled { opacity: .45; cursor: default; }
#pit .ch-q small { font: 700 11px/1.1 var(--hsc-sans); }
#pit .ch-q svg { width: 34px; height: 34px; background: var(--hsc-paper); box-shadow: 0 0 0 1.5px var(--hsc-ink); }
#pit .ch-q.is-hand svg { width: 58px; height: 58px; box-shadow: 0 0 0 2px var(--hsc-ink), 0 0 0 5px var(--hsc-note), 0 0 0 6.5px var(--hsc-ink); }
#pit .ch-q.is-hand small { font: 700 12px/1.2 var(--hsc-sans); color: var(--hsc-ink); text-transform: none; }
#pit .ch-q.is-next { opacity: .9; }
#pit .ch-q.is-spare svg { background: var(--pat-12), var(--hsc-paper); }
#pit .ch-empty { margin: 0; font: italic 13px var(--hsc-serif); color: var(--hsc-grey); }
#pit .ch-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pit .ch-pad [data-arc-key="send"] { grid-column: 1 / -1; }

/* ---- Kernel Snake: the fleet --------------------------------------------------------------------------------- */
#pit .arc-kernel .arc-stage { --cell: clamp(17px, min(calc((100cqh - 26px) / 12), calc((100cqw - var(--side-w) - 52px) / 12)), 46px); }
#pit .ks-frame { position: relative; flex: 0 0 auto; padding: 18px 8px 8px; background: var(--hsc-ink); border-radius: 3px; box-shadow: 0 0 0 2px var(--hsc-paper), 0 0 0 4px var(--hsc-ink), 5px 5px 0 4px var(--hsc-ink); }
#pit .ks-frame .tt-baylabel { left: 10px; top: 5px; }
#pit .ks-board { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell)); background: var(--hsc-paper); touch-action: none; user-select: none; -webkit-user-select: none; }
#pit .ks-cell { position: relative; background: color-mix(in srgb, var(--c) 16%, var(--hsc-paper)); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--hsc-ink) 22%, transparent); }
#pit .ks-cell.is-busy { background: var(--tx, none), color-mix(in srgb, var(--c) 62%, var(--hsc-paper)); }
#pit .ks-cell.is-job::after { content: ''; position: absolute; inset: 16%; background: var(--tx, none), var(--c); border: 2px solid var(--hsc-ink); box-shadow: 1.5px 1.5px 0 var(--hsc-ink); }
#pit .ks-cell.is-hot { background: var(--pat-hatch), var(--hsc-paper); box-shadow: inset 0 0 0 2px var(--hsc-led-warn); }
#pit .ks-cell.is-hot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--hsc-led-warn); box-shadow: 0 0 0 1.5px var(--hsc-ink); }
#pit .ks-cell.is-body { background: var(--hsc-ink); box-shadow: inset 0 0 0 1.5px var(--hsc-paper); }
#pit .ks-cell.is-body::after { content: ''; position: absolute; inset: 38%; background: var(--hsc-led); }
#pit .ks-cell.is-tail::after { background: var(--hsc-grey-light); }
#pit .ks-cell.is-head { z-index: 1; background: var(--hsc-ink); box-shadow: 0 0 0 2px var(--hsc-note), 0 0 0 3.5px var(--hsc-ink); }
#pit .ks-cell.is-head::after { content: ''; position: absolute; width: 26%; height: 26%; background: var(--hsc-note); }
#pit .ks-cell.is-head.dir-up::after { left: 37%; top: 10%; } #pit .ks-cell.is-head.dir-down::after { left: 37%; bottom: 10%; }
#pit .ks-cell.is-head.dir-left::after { left: 10%; top: 37%; } #pit .ks-cell.is-head.dir-right::after { right: 10%; top: 37%; }
#pit .ks-cell.is-crash { background: var(--hsc-led-warn); box-shadow: 0 0 0 2px var(--hsc-ink); }
#pit .ks-pad { grid-template-columns: repeat(4, minmax(52px, 1fr)); }

/* ---- Phones: strip on top, the board as large as it fits, the side panel under it ------------------------------- */
@media (max-width: 768px) {
  #pit .arc { --side-w: 0px; }
  #pit .arc-stage { flex-direction: column; gap: 8px; justify-content: flex-start; padding-top: 4px; }
  #pit .arc-cable .arc-stage { --cell: clamp(30px, min(calc((100cqh - 120px) / 7), calc((100cqw - 26px) / 7)), 64px); }
  #pit .arc-kernel .arc-stage { --cell: clamp(16px, min(calc((100cqh - 70px) / 12), calc((100cqw - 26px) / 12)), 36px); }
  #pit .ch-frame, #pit .ks-frame { padding: 15px 5px 5px; }
  #pit .arc-side { flex: 0 0 auto; width: 100%; align-self: stretch; flex-direction: row; justify-content: center; overflow: visible; }
  #pit .arc-side .arc-nodes { display: none; }
  #pit .arc-kernel .arc-side { display: none; }
  #pit .ch-queue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; padding: 3px; gap: 3px; }
  #pit .ch-queue .ch-empty { grid-column: 1 / -1; }
  #pit .ch-q { flex-direction: column; justify-content: center; gap: 1px; min-width: 0; min-height: 47px; padding: 2px; }
  #pit .ch-q svg, #pit .ch-q.is-hand svg { width: 25px; height: 25px; }
  #pit .ch-q small, #pit .ch-q.is-hand small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
  #pit .arc-milestone span { font-size: 13px; }
  #pit .arc-card .arc-nodes { gap: 4px 10px; font-size: 12px; }
  #pit .arc-pad .tt-key { min-height: 50px; }
}
@media (max-width: 360px) {
  #pit .ch-q.is-hand small { display: block; }
  #pit .arc-scale { font-size: 12px; }
}
@media (max-width: 768px) and (max-height: 700px), (max-width: 360px) {
  #pit .arc-card { gap: 6px; }
  #pit .arc-scale { display: none; }
  #pit .arc-milestone { padding: 6px 9px; }
  #pit .arc-milestone span { font-size: 12.5px; line-height: 1.3; }
  #pit .arc-card h3 { font-size: 17px; }
  #pit .arc-card .tt-rule-big { font-size: 17px; }
  #pit .arc-card .tt-rule-big::before { margin-bottom: 6px; }
}

/* ---- Motion ----------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  #pit .ch-cell.is-new svg { animation: arc-seat .26s cubic-bezier(.2, 1.5, .5, 1); }
  #pit .ch-core.is-lit { animation: arc-flow .5s ease-out; }
  #pit .ch-cell.is-n.is-live svg { animation: arc-online .6s ease-out; }
  #pit .ch-spark { animation: arc-spark .5s ease-out both; transform-box: fill-box; transform-origin: center; }
  #pit .ks-cell.is-job::after { animation: arc-job 1.1s ease-in-out infinite alternate; }
  #pit .ks-cell.is-eat { animation: arc-eat .25s ease-out; }
  #pit .tt.arc.is-perfect .ch-frame, #pit .tt.arc.is-perfect .ks-frame { box-shadow: 0 0 0 3px var(--hsc-note), 0 0 0 5px var(--hsc-ink), 5px 5px 0 5px var(--hsc-ink); }
}
@keyframes arc-seat { from { transform: scale(1.18); } to { transform: none; } }
@keyframes arc-flow { from { stroke: var(--hsc-paper); } to { stroke: var(--hsc-led); } }
@keyframes arc-online { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes arc-spark { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes arc-job { from { transform: scale(.9); } to { transform: scale(1.04); } }
@keyframes arc-eat { 0% { box-shadow: 0 0 0 2px var(--hsc-note), 0 0 0 6px var(--hsc-ink); } 100% { box-shadow: 0 0 0 2px var(--hsc-note), 0 0 0 3.5px var(--hsc-ink); } }

/* ---- The project rail late in a game ----------------------------------------------------------------------------
   A flagship card with a two-line name, a capital line and three recipe bars (with RELEASE), or a 16-GPU mix whose
   chip rows wrap, is taller than a short desktop card (1280×800 and below). V10.18 has the same limit; its campaigns
   never reached those states, V20's late-game bells do. One-line bar labels, tighter bar rows and the dense chip
   size V10.18 already uses below 240px keep the build rail inside the card. (Codex's GPU grouping owns chip layout
   from here; see docs/V10_19_INTEGRATION_CONTRACT.md §9.) */
@container (max-height: 280px) {
  .cards .is-dense .slot { width: 18px; height: 20px; --chip: 13px; }
  .cards .slot-row.is-bar, .cards .slot-bar-btn { min-height: 19px; }
  .cards .slot-row.is-bar .slot-label { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
  .cards .fc-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* the full line is on the card desk */
  #pit .cards .slot-bar-release { min-height: 19px; line-height: 1; }
}
/* Short desktop boards (1280×720): the name and reward also take one line (the card desk shows them in full), so a
   dense late-game card keeps its build rail inside the card. */
@container (max-height: 240px) {
  .cards .fc-name, .cards .fc-reward { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

#pit .ks-hazard-legend { margin: 2px 0; font: 600 11px/1.2 var(--hsc-sans); color: var(--hsc-ink); }
#pit .arc-kernel { grid-template-rows: auto auto minmax(0, 1fr) auto; }