/* frontend/salvage.css — SALVAGE board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Pachisi / Ramp / Crown & Anchor / Yut Nori
 * precedent: a board suite that slices its block out of style.css breaks on someone else's
 * append, and a stylesheet of its own can neither swallow nor be swallowed.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's palette block (docs/design/Batch 5/
 * Salvage.dc.html, `--sv-*`). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the
 * AIR OUT / BACK ABOARD card is a sibling of `.wrap`, outside `.sv-root`, and a var()
 * fallback is not a scope (Pachisi). ⚠️ One sea for both schemes: Classic and Arcade share
 * the palette in slice 1 — the board is its own deep-water scene, not a table cloth.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (owner 2026-09-13, the Canary shape) ──
 * Radii, the display font and the gradients are VARIABLES (`--sv-r*`, `--sv-font`, `--sv-g*`)
 * so the pixel direction (mock F11) is a class that redefines them and NOTHING ELSE — a skin
 * may change colour, radius, shadow and font; it may not move a box.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every band has a FIXED height in every phase (the board is the one flexible band on the
 * phone). The prompt card, the two preview lines, every button and every tally slot hold
 * their space whether lit or not. `min-height` is not a reservation.
 */

#salvage-game-screen, .sv-root {
  --sv-page: #070a0e; --sv-ink: #e9f1f6; --sv-dim: #8ba2b3; --sv-dim2: #55697a;
  --sv-hull: #10202c; --sv-panel: #122636; --sv-line: #244054; --sv-line2: #2f5670;
  --sv-rim1: #4d6a7b; --sv-rim2: #6f7f6a; --sv-rim3: #a8914b; --sv-rim4: #e0a92c;
  --sv-fill1: #1a2f3d; --sv-fill2: #1d3443; --sv-fill3: #213a4a; --sv-fill4: #273f50;
  --sv-gold: #f0b429; --sv-gold-d: #c08c14; --sv-air: #57cfdd; --sv-air-d: #1d5f6b;
  --sv-alarm: #ef5f3c; --sv-safe: #79cf6a; --sv-onlight: #08131b;
  --sv-p1: #f2f6f8; --sv-p2: #f0b429; --sv-p3: #e56d9f; --sv-p4: #79cf6a; --sv-p5: #6aa6f0; --sv-p6: #ef8b3c;
  --sv-lane0: #1d4c63; --sv-lane1: #183c50; --sv-lane2: #133040; --sv-lane3: #0f2533;
  --sv-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sv-r1: 5px; --sv-r2: 9px; --sv-r3: 14px; --sv-rp: 999px; --sv-bw: 1px;
  --sv-g-shell: radial-gradient(120% 90% at 50% -10%, #0e2432 0%, #081722 55%, #04101a 100%);
  --sv-g-board: linear-gradient(180deg, #0d2a3a 0%, #0a2130 45%, #061621 100%);
  --sv-g-sub: linear-gradient(180deg, #28475b, #16303f);
  --sv-g-card: linear-gradient(180deg, #12303f, #0a1d29);
  --sv-die: 34px;
}

@keyframes sv-bub   { 0% { transform: translateY(0) scale(.7); opacity: 0 } 12% { opacity: .75 } 80% { opacity: .5 } 100% { transform: translateY(-120px) scale(1.15); opacity: 0 } }
@keyframes sv-hop   { 0%, 100% { transform: translate(0, 0) } 40% { transform: translate(0, -9px) } 70% { transform: translate(0, 2px) } }
@keyframes sv-arc   { 0%, 100% { transform: translate(0, 0) } 45% { transform: translate(0, -22px) } 75% { transform: translate(0, 2px) } }
@keyframes sv-sink  { 0% { transform: translate(0, 0) rotate(0); opacity: 1 } 70% { opacity: .9 } 100% { transform: translate(var(--dx, 0), var(--dy, 120px)) rotate(28deg); opacity: 0 } }
@keyframes sv-flip  { 0% { transform: rotateY(90deg) } 100% { transform: rotateY(0) } }
@keyframes sv-ring  { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, .55) } 55% { box-shadow: 0 0 0 7px rgba(240, 180, 41, 0) } }
@keyframes sv-alarm { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes sv-rise  { 0% { opacity: 0; transform: translateY(6px) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes sv-swim  { 0% { transform: translate(0, 0) scaleX(var(--fl, 1)); opacity: 0 } 8% { opacity: .55 } 88% { opacity: .55 } 100% { transform: translate(var(--sx), var(--sy, 0)) scaleX(var(--fl, 1)); opacity: 0 } }
@keyframes sv-bobb  { 0%, 100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-3px) rotate(1.5deg) } }
@keyframes sv-wrise { 0% { transform: translateY(0) scale(.5); opacity: 0 } 18% { opacity: .5 } 100% { transform: translateY(var(--rise, -90px)) scale(1); opacity: 0 } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.sv-setup-card { max-width: 520px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.sv-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.sv-setup-title { margin: 0; font-size: 28px; }
.sv-setup-blurb, .sv-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.sv-setup-hint { opacity: .75; font-size: 13px; }
.sv-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sv-setup-lab { font-weight: 700; font-size: 13px; width: 64px; }
.sv-opts { display: flex; gap: 6px; }
.sv-opt { width: 44px; height: 40px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.sv-opt[data-on="1"] { background: var(--sv-gold); border-color: var(--sv-gold-d); color: var(--sv-onlight); }
.sv-start { height: 48px; border: 0; border-radius: 12px; background: var(--sv-gold); color: var(--sv-onlight); font-weight: 800; font-size: 16px; cursor: pointer; }
.sv-start:hover { filter: brightness(1.08); }

/* ── the board root (phone first) ───────────────────────────────────────── */
.sv-root {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  width: 100%; height: var(--sv-phone-h, 740px);
  background: var(--sv-g-shell); color: var(--sv-ink); font-family: var(--sv-font);
  border: var(--sv-bw) solid #1c3446; border-radius: 10px;
}
.sv-root *, .sv-root *::before, .sv-root *::after { box-sizing: border-box; }
.sv-root button { font-family: var(--sv-font); -webkit-tap-highlight-color: transparent; }
.sv-dsk { display: none; }

.sv-head {
  flex: none; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px;
  background: rgba(6, 17, 25, .72); border-bottom: var(--sv-bw) solid var(--sv-line);
}
.sv-brand { display: flex; align-items: center; gap: 7px; }
.sv-brandmark { width: 10px; height: 10px; background: var(--sv-gold); border-radius: 2px; transform: rotate(45deg); }
.sv-brand b { font-family: var(--sv-mono); font-size: 11px; letter-spacing: .2em; color: var(--sv-gold); }
.sv-headspace { flex: 1; }
.sv-stats { display: flex; align-items: center; gap: 8px; font-family: var(--sv-mono); font-size: 9px; letter-spacing: .12em; color: var(--sv-dim); white-space: nowrap; }
.sv-stat b { color: var(--sv-ink); font-weight: 700; display: inline-block; }
#sv-hdive { width: 5.2em; } #sv-htrail { width: 6.8em; } #sv-hturn { width: 5.4em; text-align: left; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sv-sep { width: 1px; height: 12px; background: var(--sv-line); }
.sv-menu, .sv-info {
  flex: none; width: 30px; height: 30px; border-radius: var(--sv-r2); border: var(--sv-bw) solid var(--sv-line2);
  background: var(--sv-panel); color: var(--sv-ink); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.sv-info { font-family: var(--sv-mono); font-weight: 700; }
.sv-menu:hover, .sv-info:hover { border-color: var(--sv-gold); color: var(--sv-gold); }

.sv-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px; }
.sv-colG { order: 1; } .sv-colB { order: 2; } .sv-colR { order: 3; } .sv-colC { order: 4; }

/* ── divers ──────────────────────────────────────────────────────────────── */
.sv-colR { flex: none; height: 58px; display: flex; gap: 5px; }
.sv-collbl { font-family: var(--sv-mono); font-size: 9px; letter-spacing: .18em; color: var(--sv-dim2); padding-left: 2px; }
.sv-card-d {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px;
  background: rgba(10, 26, 36, .75); border: var(--sv-bw) solid var(--sv-line); border-radius: var(--sv-r1);
  transition: border-color .12s, background .12s;
}
.sv-card-d[data-active="1"] { background: rgba(240, 180, 41, .12); border-color: var(--sv-gold); box-shadow: 0 0 12px -4px rgba(240, 180, 41, .6); }
.sv-card-d[data-lost="1"] { opacity: .55; }
.sv-card-d[data-lost="1"] .sv-av { filter: grayscale(1); }
.sv-avwrap { position: relative; width: 20px; height: 20px; flex: none; }
.sv-dmid, .sv-dname, .sv-dstate, .sv-tally { display: none; }
.sv-dmid { min-width: 0; }
.sv-dcarry { font-family: var(--sv-mono); font-size: 8px; letter-spacing: .06em; color: var(--sv-dim2); white-space: nowrap; }
.sv-dcarry[data-on="1"] { color: var(--sv-gold); }
.sv-dscore { display: flex; flex-direction: column; align-items: center; }
.sv-dscore b { font-family: var(--sv-mono); font-size: 11px; font-weight: 700; color: var(--sv-dim2); line-height: 1; }
.sv-dscore b[data-on="1"] { color: var(--sv-gold); }
.sv-dscore small { display: none; font-family: var(--sv-mono); font-size: 7px; letter-spacing: .12em; color: var(--sv-dim2); }

/* avatars — SHAPE and NUMBER first, colour third (owner is colourblind) */
.sv-av { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal; background: var(--sv-pc, var(--sv-p1)); }
.sv-av b { font-family: var(--sv-mono); font-size: 9px; font-weight: 700; color: var(--sv-onlight); line-height: 1; }
.sv-av[data-ci="1"] { --sv-pc: var(--sv-p1); } .sv-av[data-ci="2"] { --sv-pc: var(--sv-p2); } .sv-av[data-ci="3"] { --sv-pc: var(--sv-p3); }
.sv-av[data-ci="4"] { --sv-pc: var(--sv-p4); } .sv-av[data-ci="5"] { --sv-pc: var(--sv-p5); } .sv-av[data-ci="6"] { --sv-pc: var(--sv-p6); }
.sv-av[data-sh="circle"]  { border-radius: 50%; }
.sv-av[data-sh="square"]  { border-radius: 22%; }
.sv-av[data-sh="tri"]     { clip-path: polygon(50% 3%, 100% 100%, 0 100%); }
.sv-av[data-sh="tri"] b, .sv-av[data-sh="penta"] b { padding-top: 22%; }
.sv-av[data-sh="diamond"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sv-av[data-sh="penta"]   { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.sv-av[data-sh="hex"]     { clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%); }
.sv-dir, .sv-pdir {
  position: absolute; display: flex; align-items: center; justify-content: center; font-style: normal;
  font-family: var(--sv-mono); background: #0b1822; color: var(--sv-ink); border: var(--sv-bw) solid var(--sv-onlight); border-radius: 50%;
}
.sv-dir { right: -4px; bottom: -3px; width: 10px; height: 10px; font-size: 6px; }
.sv-dir[data-state="up"], .sv-pawn[data-dir="up"] .sv-pdir { background: var(--sv-air); color: var(--sv-onlight); }
.sv-dir[data-state="safe"] { background: var(--sv-safe); color: var(--sv-onlight); }
.sv-dir[data-state="lost"], .sv-pawn[data-dir="lost"] .sv-pdir { background: var(--sv-alarm); color: var(--sv-onlight); }

/* ── the board ───────────────────────────────────────────────────────────── */
.sv-colB { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.sv-bhead { height: 18px; align-items: center; justify-content: space-between; font-family: var(--sv-mono); font-size: 9px; letter-spacing: .16em; color: var(--sv-dim2); }
.sv-bhead span:last-child { color: var(--sv-dim); }
.sv-board {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--sv-g-board); border: var(--sv-bw) solid var(--sv-line); border-radius: var(--sv-r2);
  --sv-chip: 32px; --sv-pawn: 21px;
}
.sv-amb, .sv-lanes, .sv-spaces, .sv-fx, .sv-pawns { position: absolute; inset: 0; }
.sv-amb, .sv-lanes, .sv-fx { pointer-events: none; }
.sv-amb i { position: absolute; display: block; pointer-events: none; }
.sv-surface { left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(87, 207, 221, 0), rgba(87, 207, 221, .3) 22%, rgba(87, 207, 221, .12) 60%, rgba(87, 207, 221, .26)); opacity: .7; }
.sv-boat { clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); background: linear-gradient(180deg, #8a6a33, #4d3c1d); animation: sv-bobb 4.2s ease-in-out infinite; }
.sv-sail { clip-path: polygon(0 100%, 100% 100%, 0 0); background: #d8e3e8; opacity: .8; animation: sv-bobb 4.2s ease-in-out infinite; }
.sv-fish { border-radius: 50% 45% 45% 50%; background: rgba(178, 212, 226, .34); animation-name: sv-swim; animation-timing-function: linear; animation-iteration-count: infinite; opacity: 0; }
.sv-fish[data-alt="1"] { background: rgba(110, 215, 232, .5); }
.sv-fish::after { content: ''; position: absolute; left: -45%; top: 0; width: 50%; height: 100%; clip-path: polygon(100% 50%, 0 0, 0 100%); background: inherit; }
.sv-wbub { border-radius: 50%; background: rgba(165, 228, 242, .5); box-shadow: inset 0 0 0 1px rgba(205, 244, 252, .8); animation-name: sv-wrise; animation-timing-function: ease-in; animation-iteration-count: infinite; opacity: 0; }

.sv-lane, .sv-bend { position: absolute; display: block; }
.sv-lane { border-radius: var(--sv-rp); background: var(--sv-lane0); }
.sv-lane[data-r="1"], .sv-bend[data-r="0"] { background: var(--sv-lane1); }
.sv-lane[data-r="2"], .sv-bend[data-r="1"] { background: var(--sv-lane2); }
.sv-lane[data-r="3"], .sv-bend[data-r="2"] { background: var(--sv-lane3); }
.sv-bend[data-r="0"], .sv-bend[data-r="2"] { border-radius: 0 0 var(--sv-rp) var(--sv-rp); }
.sv-bend[data-r="1"] { border-radius: 0 0 var(--sv-rp) var(--sv-rp); }
.sv-lane[data-live="0"] { opacity: .28; }
.sv-bend[data-live="0"] { display: none; }

.sv-sub {
  position: absolute; display: flex; align-items: center; justify-content: space-between; padding: 0 7px;
  background: var(--sv-g-sub); border: var(--sv-bw) solid var(--sv-line2); border-radius: var(--sv-rp);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .95);
}
.sv-sub b { font-family: var(--sv-mono); font-size: 8px; letter-spacing: .18em; color: var(--sv-air); }
.sv-sub span { font-family: var(--sv-mono); font-size: 8px; letter-spacing: .06em; color: var(--sv-dim); white-space: nowrap; }

/* spaces — LEVEL BY SHAPE plus an L-mark; the rim is the level colour, the fill is dark */
.sv-space { position: absolute; width: var(--sv-chip); height: var(--sv-chip); transition: left .45s ease, top .45s ease, opacity .3s; }
.sv-chipface {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal;
  font-family: var(--sv-mono); font-size: 8px; font-weight: 700; letter-spacing: .02em; background: var(--sv-rim, var(--sv-rim1)); color: var(--sv-rim, var(--sv-rim1));
}
.sv-chipface::before { content: ''; position: absolute; inset: 2px; background: var(--sv-fill, var(--sv-fill1)); border-radius: inherit; clip-path: inherit; }
.sv-chipface > *, .sv-chipface { z-index: 0; }
.sv-chipface { isolation: isolate; }
.sv-chipface::before { z-index: -1; }
.sv-chipface[data-kind="l1"] { --sv-rim: var(--sv-rim1); --sv-fill: var(--sv-fill1); border-radius: 50%; }
.sv-chipface[data-kind="l2"] { --sv-rim: var(--sv-rim2); --sv-fill: var(--sv-fill2); border-radius: 22%; }
.sv-chipface[data-kind="l3"] { --sv-rim: var(--sv-rim3); --sv-fill: var(--sv-fill3); clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%); }
.sv-chipface[data-kind="l4"], .sv-chipface[data-kind="stack"] { --sv-rim: var(--sv-rim4); --sv-fill: var(--sv-fill4); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* ⛔ clip-path clips box-shadow, so a stack's offset layers ride a drop-shadow on the space */
.sv-space[data-kind="stack"] { filter: drop-shadow(4px 4px 0 rgba(224, 169, 44, .55)) drop-shadow(4px 4px 0 rgba(224, 169, 44, .28)); }
.sv-chipface[data-kind="blank"] { background: transparent; width: 56%; height: 56%; margin: 22%; border: var(--sv-bw) dashed var(--sv-dim2); border-radius: 50%; opacity: .65; }
.sv-chipface[data-kind="blank"]::before { display: none; }
.sv-space[data-dest="1"] .sv-chipface { filter: brightness(1.3); }

.sv-fx i { position: absolute; display: flex; font-style: normal; }
.sv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-gold); opacity: .6; }
.sv-skip {
  width: calc(var(--sv-chip) + 6px); height: calc(var(--sv-chip) + 6px); border: 2px dashed var(--sv-alarm); border-radius: 50%;
  align-items: flex-end; justify-content: center; font-family: var(--sv-mono); font-size: 7px; color: var(--sv-alarm); letter-spacing: .08em;
}
.sv-dest { width: calc(var(--sv-chip) + 12px); height: calc(var(--sv-chip) + 12px); border: 2px solid var(--sv-gold); border-radius: 50%; animation: sv-ring 1.4s ease-out infinite; }
.sv-sink { width: calc(var(--sv-chip) * .6); height: calc(var(--sv-chip) * .6); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--sv-rim4); animation: sv-sink 1.8s ease-in both; opacity: 0; }

/* divers on the trail */
.sv-pawns { pointer-events: none; }
.sv-pawn { position: absolute; width: var(--sv-pawn); height: var(--sv-pawn); transition: left .2s ease, top .2s ease; z-index: 3; }
.sv-pawn .sv-av { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .7)); }
.sv-pawn .sv-av b { font-size: calc(var(--sv-pawn) * .38); }
.sv-pawn[data-dir="up"] .sv-av { filter: drop-shadow(0 0 0 var(--sv-air)) drop-shadow(0 0 2px var(--sv-air)) drop-shadow(0 0 1px var(--sv-air)); }
.sv-pawn[data-active="1"] { z-index: 4; }
.sv-pawn[data-active="1"] .sv-av { filter: drop-shadow(0 0 3px rgba(240, 180, 41, .95)) drop-shadow(0 0 8px rgba(240, 180, 41, .55)); }
.sv-pawn[data-lost="1"] { opacity: .45; filter: grayscale(1); }
.sv-pawn.sv-hopping[data-hop="1"] .sv-av { animation: sv-hop .22s ease-out; }
.sv-pawn.sv-hopping[data-hop="arc"] .sv-av { animation: sv-arc .22s ease-out; }
.sv-pdir { left: -18%; top: -20%; width: 52%; height: 52%; font-size: 7px; }
.sv-pcarry {
  position: absolute; right: -24%; bottom: -22%; min-width: 56%; height: 50%; padding: 0 3px; display: none; align-items: center; justify-content: center; font-style: normal;
  font-family: var(--sv-mono); font-size: 7px; font-weight: 700; background: var(--sv-gold); color: var(--sv-onlight); border: var(--sv-bw) solid var(--sv-onlight); border-radius: 3px;
}
.sv-pcarry[data-on="1"] { display: flex; }

.sv-tag { display: none; }

/* ── the air gauge (a horizontal strip on the phone) ─────────────────────── */
.sv-colG { flex: none; height: 48px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.sv-glbl { font-family: var(--sv-mono); font-size: 9px; letter-spacing: .2em; color: var(--sv-air); }
.sv-gnum { font-family: var(--sv-mono); font-size: 20px; font-weight: 700; line-height: 1; color: var(--sv-ink); width: 1.4em; }
.sv-gnum[data-low="1"] { color: var(--sv-alarm); animation: sv-alarm 1s ease-in-out infinite; }
.sv-gdelta { font-family: var(--sv-mono); font-size: 8.5px; letter-spacing: .06em; color: var(--sv-dim2); white-space: nowrap; }
.sv-gdelta[data-on="1"] { color: var(--sv-alarm); }
.sv-tank {
  position: relative; overflow: hidden; flex: 0 0 100%; height: 22px; display: flex; gap: 2px; padding: 3px;
  background: rgba(4, 16, 26, .8); border: var(--sv-bw) solid var(--sv-air-d); border-radius: var(--sv-r1);
}
.sv-pip { flex: 1 1 0; display: block; border-radius: 2px; border: var(--sv-bw) solid var(--sv-air-d); opacity: .5; transition: background .25s, opacity .25s; }
.sv-pip[data-state="on"] { background: var(--sv-air); border-color: transparent; opacity: 1; }
.sv-pip[data-state="next"] { background: var(--sv-alarm); border-color: transparent; opacity: 1; animation: sv-alarm 1s ease-in-out infinite; }
.sv-bubbles { position: absolute; inset: 0; pointer-events: none; }
.sv-bubbles i { position: absolute; bottom: 8%; width: 5px; height: 5px; border-radius: 50%; background: rgba(87, 207, 221, .6); animation: sv-bub 1.6s ease-in both; }
.sv-gfoot { font-family: var(--sv-mono); font-size: 8px; letter-spacing: .1em; color: var(--sv-dim2); text-align: center; line-height: 1.3; }

/* ── controls ────────────────────────────────────────────────────────────── */
.sv-colC { flex: none; display: flex; flex-direction: column; gap: 5px; }
.sv-prompt {
  flex: none; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 9px; overflow: hidden;
  background: rgba(8, 22, 31, .8); border: var(--sv-bw) solid var(--sv-line); border-radius: var(--sv-r2);
}
.sv-prompt[data-hot="1"] { border-color: var(--sv-gold); }
.sv-prompt[data-hot="alarm"] { border-color: var(--sv-alarm); }
.sv-plbl { font-family: var(--sv-mono); font-size: 8px; letter-spacing: .16em; color: var(--sv-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-prompt[data-hot="alarm"] .sv-plbl { color: var(--sv-alarm); }
.sv-ptxt { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--sv-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sv-prompt[data-hot="1"] .sv-ptxt { color: var(--sv-gold); }
.sv-slot { font-family: var(--sv-mono); font-size: 8px; letter-spacing: .16em; color: var(--sv-dim2); padding-left: 1px; }
.sv-row2, .sv-row3, .sv-rollrow { flex: none; display: flex; gap: 5px; align-items: center; }
.sv-btn {
  height: 40px; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 6px; white-space: nowrap;
  font-weight: 700; letter-spacing: .06em; font-size: 11px; border-radius: var(--sv-r2); cursor: pointer;
  background: var(--sv-panel); border: var(--sv-bw) solid var(--sv-line2); color: var(--sv-ink);
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s, transform .08s, filter .12s;
}
.sv-btn[data-kind="primary"] { background: var(--sv-gold); border-color: var(--sv-gold-d); color: var(--sv-onlight); }
.sv-btn[data-kind="danger"] { background: rgba(239, 95, 60, .16); border-color: var(--sv-alarm); color: #ffd2c4; }
@media (hover: hover) {
  .sv-btn[data-kind="primary"]:not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 0 18px -2px rgba(240, 180, 41, .55); }
  .sv-btn[data-kind="danger"]:not(:disabled):hover { background: rgba(239, 95, 60, .3); box-shadow: 0 0 18px -3px rgba(239, 95, 60, .6); }
  .sv-btn[data-kind="ghost"]:not(:disabled):hover { border-color: var(--sv-gold); color: var(--sv-gold); box-shadow: 0 0 16px -4px rgba(240, 180, 41, .5); }
}
.sv-btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.92); }
/* ⛔ NOT YOUR TURN / NOT ALLOWED: dashed edge + dimmed ink, readable in greyscale — never a recolour alone */
.sv-btn:disabled { background: transparent; border-style: dashed; border-color: var(--sv-line); color: var(--sv-dim2); cursor: not-allowed; box-shadow: none; filter: none; }
.sv-roll { height: 40px; }
.sv-diewrap {
  flex: none; width: calc(var(--sv-die) + 4px); height: calc(var(--sv-die) + 4px); display: flex; align-items: center; justify-content: center;
  border-radius: 8px; box-shadow: 0 0 0 1px var(--sv-dim); opacity: .4; transition: box-shadow .2s, opacity .2s;
}
.sv-diewrap[data-lit="1"] { opacity: 1; box-shadow: 0 0 0 2px var(--sv-gold), 0 0 14px -2px rgba(240, 180, 41, .7); }
.sv-die { width: var(--sv-die); height: var(--sv-die); display: flex; }
.sv-die-fallback { display: flex; align-items: center; justify-content: center; background: #e9f1f6; color: #0b1822; border-radius: 6px; font-weight: 800; }
.sv-preview {
  flex: none; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px; overflow: hidden;
  background: rgba(4, 16, 26, .7); border: var(--sv-bw) dashed var(--sv-line); border-radius: var(--sv-r1);
}
.sv-preview[data-lit="1"] { border-style: solid; border-color: var(--sv-gold); }
.sv-prevlbl { flex: none; font-family: var(--sv-mono); font-size: 8px; letter-spacing: .14em; color: var(--sv-dim2); }
.sv-prevtxt { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-family: var(--sv-mono); letter-spacing: .04em; color: var(--sv-dim2); }
.sv-prevtxt b, .sv-prevtxt span { height: 13px; line-height: 13px; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-prevtxt b { font-weight: 700; }
.sv-preview[data-lit="1"] .sv-prevtxt { color: var(--sv-gold); }
.sv-feed { font-family: var(--sv-mono); font-size: 9px; line-height: 1.45; letter-spacing: .04em; color: var(--sv-dim); overflow: hidden; }

/* ── AIR OUT / BACK ABOARD — a SIBLING of the scaled board, never inside it ──── */
#salvage-card { position: fixed; inset: 0; bottom: var(--sv-barh, 84px); z-index: 60; display: flex; align-items: center; justify-content: center; }
body.chat-collapsed #salvage-card { --sv-barh: 44px; }
.sv-card-scrim { position: absolute; inset: 0; background: rgba(3, 10, 16, .72); }
.sv-card {
  position: relative; width: calc(100% - 32px); max-width: 520px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  background: var(--sv-g-card); color: var(--sv-ink); font-family: var(--sv-font);
  border: 2px solid var(--sv-gold); border-radius: var(--sv-r3); box-shadow: 0 30px 70px -30px #000; animation: sv-rise .4s ease-out;
}
.sv-card[data-alarm="1"] { border-color: var(--sv-alarm); }
.sv-card-title { font-family: var(--sv-mono); font-size: 18px; font-weight: 700; letter-spacing: .14em; color: var(--sv-gold); }
.sv-card[data-alarm="1"] .sv-card-title { color: var(--sv-alarm); }
.sv-card-sub { font-size: 13px; line-height: 1.5; }
.sv-card-row { display: flex; gap: 10px; flex-wrap: wrap; perspective: 600px; }
.sv-card-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sv-card-item .sv-chipface { width: 52px; height: 52px; font-size: 16px; }
.sv-card-item .sv-chipface b { font-size: 18px; color: var(--sv-gold); }
.sv-card-item .sv-chipface em { display: none; }
.sv-card-item small { font-family: var(--sv-mono); font-size: 8px; letter-spacing: .1em; color: var(--sv-dim); }
.sv-flip { animation: sv-flip .5s ease-out both; }
.sv-card-haul { font-family: var(--sv-mono); font-size: 13px; color: var(--sv-ink); }
.sv-card-haul b { color: var(--sv-gold); font-size: 16px; }
.sv-card-foot { font-family: var(--sv-mono); font-size: 10px; letter-spacing: .08em; color: var(--sv-dim); line-height: 1.5; }
.sv-card-btn { align-self: flex-end; height: 42px; padding: 0 20px; border-radius: var(--sv-r2); border: 1px solid var(--sv-gold-d); background: var(--sv-gold); color: var(--sv-onlight); font-weight: 800; font-size: 13px; letter-spacing: .06em; cursor: pointer; }
.sv-card-btn:hover { filter: brightness(1.1); }

/* end screen rows (GameEndScreen html section) */
.sv-endrows { display: flex; flex-direction: column; gap: 6px; }
.sv-endrow { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.sv-endrow[data-win="1"] { background: rgba(240, 180, 41, .14); }
.sv-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sv-endnm .sv-av { width: 20px; height: 20px; flex: none; }
.sv-endst { font-size: 11px; opacity: .75; font-family: ui-monospace, monospace; }
.sv-endsc { text-align: right; font-weight: 800; font-size: 16px; }
.sv-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .sv-amb i, .sv-pip, .sv-dest, .sv-gnum, .sv-card, .sv-flip, .sv-pawn .sv-av { animation: none !important; }
  .sv-fish, .sv-wbub { display: none !important; }
  .sv-space, .sv-pawn { transition: none; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* ⛔ The vertical gutter goes too (the Pachisi / Yut Nori finding), scoped to a live board. */
  #salvage-game-screen.sv-playing .wrap { padding: 0 2px; max-width: none; }
  #salvage-game-screen.sv-playing .topbar { display: none; }
  #salvage-game-screen.sv-playing.sv-topbar-open .topbar { display: flex; }
  .sv-info { display: none; }
}
@media (max-width: 999px) and (max-height: 760px) {
  .sv-colR { height: 50px; }
  .sv-colG { height: 42px; }
  .sv-tank { height: 18px; }
  .sv-btn, .sv-roll { height: 36px; }
  .sv-prompt { height: 40px; }
  .sv-root { --sv-die: 30px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit ─────────────── */
@media (min-width: 1000px) {
  #salvage-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .sv-root { width: 1280px; height: 553px; --sv-die: 40px; }
  .sv-dsk { display: inline; }
  .sv-menu { display: none; }
  .sv-head { height: 44px; padding: 0 12px 0 16px; gap: 14px; }
  .sv-brand b { font-size: 13px; }
  .sv-stats { font-size: 10.5px; gap: 14px; }
  .sv-stats .sv-dsk { display: inline-block; }
  .sv-info { width: 28px; height: 28px; }

  /* L1: 224 + 680 + 88 + 224 + 3×12 + 2×14 = 1280 — the mock's 688 overran its own box */
  .sv-body { display: grid; grid-template-columns: 224px 680px 88px 224px; gap: 12px; padding: 14px; height: 509px; flex: none; }
  .sv-colG, .sv-colB, .sv-colR, .sv-colC { order: 0; min-height: 0; }

  .sv-colR { height: auto; flex-direction: column; gap: 6px; }
  .sv-collbl { display: block; height: 11px; }
  .sv-card-d { flex: none; height: 52px; flex-direction: row; justify-content: flex-start; gap: 9px; padding: 7px 9px; border-radius: var(--sv-r2); }
  .sv-avwrap { width: 28px; height: 28px; }
  .sv-av b { font-size: 12px; }
  .sv-dir { width: 14px; height: 14px; right: -6px; bottom: -4px; font-size: 8px; }
  .sv-dmid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .sv-dtop { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .sv-dname { display: block; font-family: var(--sv-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--sv-dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sv-card-d[data-o="0"] .sv-dname { color: var(--sv-ink); }
  .sv-dstate { display: inline-block; flex: none; width: 44px; text-align: center; font-style: normal; font-family: var(--sv-mono); font-size: 8px; letter-spacing: .1em; padding: 1px 0; border-radius: var(--sv-r1); color: var(--sv-dim2); border: var(--sv-bw) solid var(--sv-line); }
  .sv-dstate[data-state="lost"] { color: var(--sv-alarm); border-color: var(--sv-alarm); }
  .sv-dstate[data-state="safe"] { color: var(--sv-safe); border-color: var(--sv-safe); }
  /* L3: five fixed tally slots — L1 L2 L3 L4 and stacks — never a chip row that runs out */
  .sv-tally { display: flex; gap: 3px; height: 14px; }
  .sv-t { width: 22px; display: flex; align-items: center; gap: 2px; opacity: .35; }
  .sv-t[data-on="1"] { opacity: 1; }
  .sv-t b { font-family: var(--sv-mono); font-size: 9px; font-weight: 700; color: var(--sv-ink); line-height: 1; }
  .sv-ts { display: block; width: 11px; height: 11px; flex: none; }
  .sv-ts[data-kind="l1"] { border-radius: 50%; background: var(--sv-rim1); }
  .sv-ts[data-kind="l2"] { border-radius: 22%; background: var(--sv-rim2); }
  .sv-ts[data-kind="l3"] { clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%); background: var(--sv-rim3); }
  .sv-ts[data-kind="l4"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--sv-rim4); }
  .sv-ts[data-kind="stack"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--sv-gold); box-shadow: none; outline: 1px solid var(--sv-gold); }
  .sv-dcarry { display: none; }
  .sv-dscore { width: 34px; align-items: flex-end; gap: 2px; }
  .sv-dscore b { font-size: 15px; }
  .sv-dscore small { display: block; }

  .sv-colB { gap: 6px; }
  .sv-bhead { display: flex; }
  .sv-sub b, .sv-sub span { font-size: 10px; }
  .sv-sub { padding: 0 10px; }
  .sv-chipface { font-size: 11px; }
  .sv-skip, .sv-pdir, .sv-pcarry { font-size: 9px; }
  .sv-pawn .sv-av b { font-size: 12px; }
  .sv-tag {
    display: block; position: absolute; left: 250px; top: 6px; padding: 3px 7px; white-space: nowrap; z-index: 5; pointer-events: none;
    font-family: var(--sv-mono); font-size: 10px; letter-spacing: .1em; color: var(--sv-gold);
    background: rgba(4, 16, 26, .9); border: var(--sv-bw) solid var(--sv-gold); border-radius: var(--sv-r1);
  }
  .sv-tag[data-on="0"] { visibility: hidden; }
  .sv-tag[data-tone="dim"] { color: var(--sv-dim); border-color: var(--sv-dim); }
  .sv-tag[data-tone="alarm"] { color: var(--sv-alarm); border-color: var(--sv-alarm); }

  .sv-colG {
    height: auto; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 8px 6px;
    background: rgba(8, 22, 31, .7); border: var(--sv-bw) solid var(--sv-line); border-radius: var(--sv-r2);
  }
  .sv-gnum { font-size: 28px; width: 44px; text-align: center; }
  .sv-gdelta { font-size: 8px; text-align: center; white-space: normal; line-height: 1.3; height: 21px; }
  .sv-tank { flex: 1 1 auto; width: 46px; height: auto; min-height: 0; flex-direction: column-reverse; }
  .sv-pip { width: 100%; }
  .sv-gfoot { display: block; }

  .sv-colC { gap: 5px; }
  .sv-prompt { height: 52px; }
  .sv-ptxt { font-size: 12.5px; }
  .sv-slot { display: block; height: 10px; }
  .sv-btn { height: 38px; font-size: 12px; }
  .sv-roll { height: 44px; }
  .sv-preview { height: 40px; }
  .sv-prevtxt b, .sv-prevtxt span { font-size: 10.5px; height: 15px; line-height: 15px; }
  .sv-feed { display: block; margin-top: auto; height: 56px; }

  .sv-card { padding: 20px; gap: 12px; }
  .sv-card-sub { font-size: 14px; }
  .sv-card-item .sv-chipface { width: 56px; height: 56px; }
}

/* ── MP turn clock (salvage_mp.js, 2026-09-13) ────────────────────────────────
   15s a step, always on. A 3px bar pinned to the prompt card's bottom edge — ABSOLUTE, so it
   reserves nothing and moves nothing (locked layout), and scaleX, so it never reflows. Solo
   never turns it on. */
.sv-prompt { position: relative; }
.sv-clock {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center; transform: scaleX(0);
  background: var(--sv-dim2); opacity: 0; transition: transform .25s linear, opacity .2s; pointer-events: none;
}
.sv-clock[data-on="1"] { opacity: .8; }
.sv-clock[data-on="1"][data-mine="1"] { background: var(--sv-gold); opacity: 1; }
.sv-clock[data-on="1"][data-mine="1"][data-low="1"] { background: var(--sv-alarm); }
@media (prefers-reduced-motion: reduce) { .sv-clock { transition: none; } }