/* NETWAR duel UI — based on netwar-3a visual design */
@keyframes laser-flow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -20; } }
@keyframes clash-pulse { 0%, 100% { r: 5; opacity: 1; } 50% { r: 8; opacity: 0.6; } }
@keyframes pulse-timer { 50% { opacity: 0.45; } }
@keyframes flash-pop { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes deploy-in { 0% { transform: scaleY(0.3); opacity: 0; filter: brightness(2); } 100% { transform: scaleY(1); opacity: 1; filter: brightness(1); } }
@keyframes card-glitch {
  0% { clip-path: inset(0 0 0 0); transform: scale(1); opacity: 1; filter: none; }
  12% { clip-path: inset(10% 0 62% 0); transform: translate(-3px, 0) scale(1.02); filter: hue-rotate(70deg) brightness(2.2); }
  24% { clip-path: inset(44% 0 18% 0); transform: translate(3px, 1px) scale(0.98); filter: brightness(2.8); }
  36% { clip-path: inset(6% 0 70% 0); transform: translate(-2px, -1px); filter: saturate(2) brightness(3); }
  48% { clip-path: inset(0 0 0 0); transform: scale(1.14); filter: brightness(2.6); }
  62% { transform: scale(0.82) rotate(3deg); opacity: 0.75; filter: blur(1px) brightness(2); }
  100% { transform: scale(0.1) rotate(-10deg); opacity: 0; filter: blur(10px) brightness(4); }
}
@keyframes shard-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.15); }
}
@keyframes death-flash-pop {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}
@keyframes dmg-float { 0% { opacity: 1; transform: translate(-50%,0) scale(1.3); } 100% { opacity: 0; transform: translate(-50%,-28px) scale(1); } }
@keyframes breach-surge { 0% { filter: brightness(2.5); } 100% { filter: brightness(1); } }
@keyframes bar-pulse-green { 0% { filter: brightness(2); } 100% { filter: brightness(1); } }
@keyframes bar-pulse-orange { 0% { filter: brightness(2); } 100% { filter: brightness(1); } }
@keyframes reboot-pulse { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 40px #5ee0a8; } }
@keyframes static-rise { 0% { transform: translateY(40px); opacity: 0.9; } 100% { transform: translateY(-120px); opacity: 0; } }
@keyframes smoke-sweep { 0% { width: 0; opacity: 1; right: 0; } 100% { width: 100%; opacity: 0; left: 0; } }
@keyframes charge-fly { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px); } }
@keyframes charge-fly-down { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px); } }

/* Visual language aligned with the duel-redesign mockup (docs/duel-redesign-mockup.html):
   calmer ground, one clean bordered surface, Chakra Petch for display type, IBM Plex
   Mono for data. The terminal texture is dialled right down — it's atmosphere, not noise. */
#duel { position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(55,245,163,0.06), transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 105%, rgba(255,92,138,0.06), transparent 60%),
    rgba(6, 7, 11, 0.94);
  display: none; align-items: center; justify-content: center; z-index: 100;
  padding: 20px; box-sizing: border-box; min-width: 0; }
#duel.show { display: flex; }

#duel-box {
  --duel-hand-card-w: 112px;
  --duel-hand-gap: 12px;
  --duel-lane-gap: 10px;
  --duel-zone-pad-x: 24px;
  --duel-battle-h: 72px;
  --duel-deck-h: 142px;
  --duel-hand-h: 112px;
  --duel-tip-h: 92px;
  --duel-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --duel-line: #262b38;
  --duel-panel: #12141a;
  /* Fixed shell — large enough that hand cards + END TURN fit without clipping. */
  width: min(98vw, 1180px); max-width: 100%; min-width: 0;
  height: min(90vh, 860px);
  max-height: min(90vh, 860px);
  display: flex; flex-direction: column; min-height: 0; overflow-x: hidden;
  background: #101219;
  background-image: radial-gradient(circle, #171a22 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--duel-line); border-radius: 6px; color: #d9e1f0;
  font-family: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02) inset;
  position: relative; overflow: hidden;
  padding: 0; font-size: 11px;
}
#duel-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* Faint corner washes + a barely-there scanline. No animation. */
  background: radial-gradient(ellipse 500px 300px at 8% 6%, rgba(255,92,138,0.06), transparent 60%),
              radial-gradient(ellipse 500px 300px at 92% 94%, rgba(55,245,163,0.06), transparent 60%),
              repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(94,224,168,0.010) 3px, rgba(94,224,168,0.010) 4px);
}
/* W4 — duel switcher. Hidden while only one duel is live, so the common case is
   unchanged; shown the moment a second duel opens (attacking + defending at once). */
#duel-tabs { display: none; }
#duel-tabs.show {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 5px 10px; border-bottom: 1px solid #2a2e3a;
  background: rgba(10, 12, 18, 0.9); position: relative; z-index: 3;
}
#duel-tabs .duel-tab {
  padding: 4px 9px; border: 1px solid #3a4050; background: rgba(20, 24, 34, 0.9);
  color: #8a94ad; font: bold 9px 'IBM Plex Mono', Consolas, monospace;
  letter-spacing: 0.8px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center;
}
#duel-tabs .duel-tab:hover { color: #cfe0ff; border-color: #5ee0a8; }
#duel-tabs .duel-tab.on {
  color: #0d0e12; background: #5ee0a8; border-color: #5ee0a8; cursor: default;
}
#duel-tabs .duel-tab-dot { color: #ff6fa8; font-size: 11px; line-height: 1; }
#duel-tabs .duel-tab.on .duel-tab-dot { color: #0d0e12; }

#duel-box.duel-frozen { pointer-events: none; }
#duel-box.reboot-flash { animation: reboot-pulse 0.55s ease-out; }

@keyframes god-moment-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -48%) scale(1.02); }
}
.god-moment {
  position: absolute; left: 50%; top: 42%; z-index: 30; pointer-events: none;
  text-align: center; letter-spacing: 2px; animation: god-moment-in 1.1s ease-out forwards;
  text-shadow: 0 0 18px rgba(55, 245, 163, 0.45);
}
.god-moment.legendary { animation-duration: 1.4s; text-shadow: 0 0 22px rgba(255, 111, 168, 0.55); }
.god-moment-title {
  font-size: 18px; font-weight: bold; color: #37f5a3; text-transform: uppercase;
}
.god-moment.legendary .god-moment-title { color: #ff6fa8; font-size: 20px; }
.god-moment-sub { margin-top: 6px; font-size: 10px; color: #8a7fb0; letter-spacing: 1px; }
#duel-head {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 18px 14px;
  background: linear-gradient(180deg, #0a0b10, transparent);
  border-bottom: 1px solid #1c2029;
  position: relative; z-index: 2; flex-shrink: 0; min-width: 0;
}
#duel-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(55,245,163,0.28) 25%, rgba(245,177,58,0.28) 75%, transparent);
}

/* Duel header: identities, wave count, then two independent win-condition bars. */
#duel-hero-top {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
}
#duel-defender { font-family: var(--duel-display); font-weight: 600; font-size: 10px; color: #ff5c8a;
  letter-spacing: 1.4px; text-transform: uppercase;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#duel-operator { font-family: var(--duel-display); font-weight: 600; font-size: 10px; color: #37f5a3;
  letter-spacing: 1.4px; text-transform: uppercase; margin-left: auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#duel-wave-box { flex-shrink: 0; }
.duel-meter-lbl.wave { color: #7a8898; letter-spacing: 2px; font-size: 8px; margin-right: 5px; }

/* Protocol, goal and doctrine share one compact context row. Doctrine details
   use the shared hover/focus tooltip, so they never steal height from the board. */
#duel-context-bar {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 28px;
  position: relative; z-index: 12; margin: 2px 0 4px;
}
#duel-context-bar > [hidden] { display: none !important; }
#duel-context-bar #duel-protocol,
#duel-context-bar #duel-rematch {
  flex: 0 0 auto; margin: 0; padding: 4px 7px;
  border: 1px solid #293646; border-radius: 3px;
  background: rgba(16, 22, 30, 0.82); color: #8ec8d8;
  font: 700 8px/1 var(--duel-display); letter-spacing: 0.12em;
  text-align: left; white-space: nowrap;
}
#duel-context-bar #duel-seat-goal {
  flex: 1 1 auto; min-width: 60px; margin: 0; padding: 0 3px;
  color: #718594; font: 8px/1.2 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: 0.03em; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#duel-doctrine {
  flex: 0 1 auto; min-width: 0; margin-left: auto; position: relative;
  font-family: "IBM Plex Mono", Consolas, monospace;
}
#duel-doctrine .dd-summary {
  display: flex; align-items: center; gap: 6px; max-width: min(48vw, 430px);
  min-height: 26px; padding: 4px 7px; box-sizing: border-box;
  border: 1px solid #35536a; border-radius: 3px;
  background: rgba(10, 21, 32, 0.94); color: #9ec9e0;
  font: 600 8px/1 var(--duel-display); letter-spacing: 0.08em;
  text-transform: uppercase; cursor: help;
}
#duel-doctrine .dd-summary:hover,
#duel-doctrine .dd-summary:focus-visible {
  border-color: #8fd6ff; outline: none;
  box-shadow: 0 0 14px rgba(143, 214, 255, 0.16);
}
#duel-doctrine .dd-summary.dd-danger {
  border-color: #a76538; color: #ffd0a0;
  background: rgba(55, 28, 14, 0.94);
}
#duel-doctrine .dd-kicker { color: #59798b; font-size: 7px; }
#duel-doctrine .dd-label { color: #8fd6ff; font-weight: 700; }
#duel-doctrine .dd-live {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #b6d9df; font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 8px; letter-spacing: 0.02em;
}
#duel-doctrine .dd-danger .dd-live { color: #ffb86b; }
#duel-doctrine .dd-help {
  width: 13px; height: 13px; flex: 0 0 13px;
  border-radius: 50%; background: #6f94a7; color: #081018;
  text-align: center; font: 800 8px/13px "IBM Plex Mono", monospace;
}
.board-chip .chip-badge {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 5;
  font: 800 8px/1 var(--duel-display);
  letter-spacing: 0.8px;
  padding: 3px 5px;
  border: 1px solid #3a6a88;
  background: #0a1520;
  color: #8fd6ff;
  pointer-events: auto;
  cursor: help;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
}
.board-chip .chip-badge-armed,
.board-chip .chip-badge-ctrl {
  border-color: #37f5a3;
  color: #04121a;
  background: #37f5a3;
  box-shadow: 0 0 10px rgba(55, 245, 163, 0.55);
}
.board-chip .chip-badge-held {
  border-color: #6a7488;
  color: #c5ccd6;
  background: #1a1e28;
}
.hand-card.play-sent {
  opacity: 0.35; transform: translateY(8px) scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none;
}
.lane-slot.optimistic-deploy {
  outline: 2px solid #37f5a3; outline-offset: 2px;
  box-shadow: 0 0 16px rgba(55, 245, 163, 0.45);
  animation: optimistic-deploy-pulse 0.7s ease-out;
}
@keyframes optimistic-deploy-pulse {
  0% { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}
#contact-line .v-interdict { color: #ff9a5c; }
#contact-line .v-bulwark { color: #8fd6ff; }

@media (max-width: 560px) {
  #duel-context-bar { gap: 4px; }
  #duel-context-bar #duel-seat-goal { display: none !important; }
  #duel-context-bar #duel-protocol { font-size: 7px; padding: 4px 5px; }
  #duel-doctrine .dd-summary { max-width: 58vw; gap: 4px; padding: 4px 5px; }
  #duel-doctrine .dd-kicker { display: none; }
}

#duel-hero { display: grid; gap: 12px; }
.duel-race { position: relative; }
.duel-race-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--duel-display); font-weight: 700; font-size: 13px; letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.duel-race-label .cap { color: #7a8290; font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 400; font-size: 9px; letter-spacing: 0.3px; }
.duel-race-label b { font-variant-numeric: tabular-nums; font-size: 14px; }
.breach-race .duel-race-label > span:first-child { color: #37f5a3; text-shadow: 0 0 12px rgba(55,245,163,0.35); }
.trace-race .duel-race-label > span:first-child { color: #ff6fa8; text-shadow: 0 0 12px rgba(255,111,168,0.3); }
.duel-race.mine .duel-race-label { filter: brightness(1.12); }
.duel-race.danger .duel-race-label b { color: #ff3860; }
.duel-race.complete .duel-race-label b { color: #fff; text-shadow: 0 0 10px currentColor; }

.duel-race-track {
  position: relative; height: 7px; border-radius: 1px; overflow: hidden;
  background: #040608; border: 1px solid #243038;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}
.duel-race-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
#hero-fill { background: linear-gradient(90deg, rgba(55,245,163,0.12), #37f5a3); box-shadow: 0 0 10px rgba(55,245,163,0.4); }
#trace-fill { background: linear-gradient(90deg, rgba(255,111,168,0.12), #ff6fa8); box-shadow: 0 0 10px rgba(255,111,168,0.4); }
#hero-fill.breach-surge { animation: breach-surge 0.8s ease-out; }
#hero-marker {
  position: absolute; top: 50%; left: 0; width: 2px; height: 14px;
  background: #37f5a3; color: #37f5a3; transform: translate(-50%, -50%);
  transition: left .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 8px currentColor;
  z-index: 2;
}
#hero-marker::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 7px; height: 7px;
  background: currentColor; clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%); filter: drop-shadow(0 0 3px currentColor);
}
#hero-marker.flicker { animation: hero-marker-flicker .26s steps(2, end); }
@keyframes hero-marker-flicker { 0% { opacity: .15; } 40% { opacity: 1; } 55% { opacity: .25; } 100% { opacity: 1; } }
.duel-race.danger .duel-race-track { border-color: #ff3860; box-shadow: 0 0 12px rgba(255,56,96,0.28), inset 0 0 0 1px rgba(0,0,0,0.6); }

.duel-wave { text-align: center; min-width: 84px; flex-shrink: 0; }
.hack-panel { position: relative; padding: 2px 4px 0; }
.hack-panel::before, .hack-panel::after {
  content: ''; position: absolute; width: 7px; height: 7px; pointer-events: none;
}
.hack-panel::before { top: 0; left: 0; border-top: 2px solid #37f5a3; border-left: 2px solid #37f5a3; }
.hack-panel::after { bottom: 0; right: 0; border-bottom: 2px solid #37f5a3; border-right: 2px solid #37f5a3; }
.duel-wave-num {
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  padding: 5px 10px 6px; border-radius: 0;
  border: 1px solid #243038; background: #040608;
  line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}
.duel-wave-num { font-family: var(--duel-display); }
#duel-waves-left { display: block; margin-top: 2px; color: #7a8898; font: 700 7px/1 var(--duel-display); letter-spacing: 1px; white-space: nowrap; }
.duel-wave-num .wave-prefix { font-size: 10px; color: #3a4850; margin-right: 1px; }
.duel-wave-num .wave-now { font-size: 19px; font-weight: 700; color: #37f5a3; letter-spacing: 1px; }
.duel-wave-num .wave-sep { font-size: 12px; font-weight: 600; color: #3a4850; margin: 0 2px; }
.duel-wave-num .wave-max { font-size: 12px; font-weight: 700; color: #6a7488; letter-spacing: 0.5px; }
/* W8: the duel must never end without warning — the wave counter says it is closing. */
.duel-wave { position: relative; }
.duel-wave[data-telegraph]:not([data-telegraph=""])::after {
  content: attr(data-telegraph); position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -12px; font-size: 7px; font-weight: 800; letter-spacing: 1.2px; white-space: nowrap;
  color: #ffb04d; pointer-events: none;
}
.duel-wave.final-wave[data-telegraph]::after { color: #ff3860; animation: pulse-timer 0.9s infinite; }
.duel-wave.final-wave .duel-wave-num { border-color: #ff3860; box-shadow: 0 0 14px rgba(255, 56, 96, 0.3); }
.duel-wave.final-wave .duel-wave-num .wave-now { color: #ff6fa8; }
.duel-wave.near-final .duel-wave-num { border-color: #5a4a2a; }
.duel-wave.near-final .duel-wave-num .wave-now { color: #ffb04d; }

.bar-flash { position: absolute; right: 0; top: -16px; font-size: 10px; font-weight: bold;
  color: #5ee0a8; animation: flash-pop 0.85s ease-out forwards; pointer-events: none; white-space: nowrap; }
.bar-flash.trace { color: #ffb04d; }
.bar-flash.big { font-size: 11px; }

/* P1 (revised) — the turn clock is always on while a deadline is live: MP can't
   wait on a thinking player. It stays calm early (green) and escalates to amber
   then a pulsing red as the cut-off nears; the numeric chip sits in the banner. */
#turn-timer-bar { height: 4px; background: #14161c; position: relative; z-index: 2;
  opacity: 0; transition: opacity .25s; }
#turn-timer-bar.armed { opacity: 1; }
#turn-timer-fill { height: 100%; width: 100%; background: #37f5a3;
  transition: width 0.25s linear, background 0.3s; box-shadow: 0 0 10px rgba(55,245,163,0.35); }
#turn-timer-fill.warn { background: #ffb04d; box-shadow: 0 0 10px rgba(255,176,77,0.45); }
#turn-timer-fill.crit { background: linear-gradient(90deg, #ff3860, #ff6fa8);
  box-shadow: 0 0 12px rgba(255,56,96,0.5); animation: pulse-timer 0.6s infinite; }

/* numeric turn clock, right-aligned inside the turn banner */
.turn-clock {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
  padding: 2px 8px; border-radius: 10px; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.06); color: inherit;
}
.turn-clock.warn { color: #ffb04d; background: rgba(245, 163, 55, 0.16); }
.turn-clock.crit { color: #ff6c7c; background: rgba(245, 80, 79, 0.2); animation: pulse-timer 0.6s infinite; }
#duel-commit-label { text-align: center; font-size: 8px; color: #6a7080; letter-spacing: 2px;
  padding: 4px 0 4px; position: relative; z-index: 2; }
/* P1 — turn ownership as a loud banner. Whose move it is must never be inferred:
   the banner text, its colour, and the whole duel-box edge glow all agree. */
#duel-turn-owner {
  font-family: var(--duel-display);
  text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: 1.1px;
  padding: 10px 16px; margin: 8px 16px 2px; position: relative; z-index: 2;
  color: #8a92a6; text-transform: uppercase; min-height: 20px;
  border: 1px solid var(--duel-line); border-left-width: 3px; border-radius: 3px;
  background: var(--duel-panel);
  transition: color .2s, border-color .2s, background .2s;
}
#duel-turn-owner.mine {
  color: #7dffc4;
  border-color: #37f5a3; background: rgba(55, 245, 163, 0.08);
  text-shadow: 0 0 12px rgba(94, 224, 168, 0.4);
}
#duel-turn-owner.theirs {
  color: #ff8fb0; border-color: #ff6fa8; background: rgba(255, 111, 168, 0.07);
}
#duel-turn-owner.resolving {
  color: #ffc46a; border-color: #f5a337; background: rgba(245, 163, 55, 0.06);
  letter-spacing: 2.2px;
}

/* P2 — RESOLVING step sub-line: which lane is firing right now. Height stays
   reserved always — only opacity toggles, so #duel-box never reflows. */
#duel-resolve-step {
  text-align: center; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: #ffc46a; height: 16px; min-height: 16px; max-height: 16px;
  margin: 1px 16px 3px; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity .12s; opacity: 0;
  font-family: var(--duel-display);
}
#duel-resolve-step.on { opacity: 1; }

/* P2 §4.3 — wave recap, docked flex child of #duel-box (not an absolute overlay —
   it used to grow past #duel-box's own bottom and cover whatever sat behind it).
   Collapsed: 0 height. Open: expands to --duel-recap-h; #duel-arena (flex:1 1 auto)
   yields the space, so #duel-box's own height never changes. */
#duel-box { --duel-recap-h: 160px; }
#duel-recap {
  flex: 0 0 auto; overflow: hidden;
  max-height: 0;
  transition: max-height .22s cubic-bezier(0.2,1,0.4,1);
}
#duel-recap.show { max-height: var(--duel-recap-h); }
#duel-recap[hidden] { display: none !important; }
/* stay clickable even while #duel-box is frozen mid-animation */
#duel-box.duel-frozen #duel-recap { pointer-events: auto; }
#duel-recap .recap-body {
  cursor: pointer;
  margin: 4px 16px 8px;
  background: rgba(8, 10, 15, 0.97);
  border: 1px solid #f5a337; border-left-width: 3px; border-radius: 4px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6);
  padding: 10px 14px 8px;
  font-family: 'IBM Plex Mono', Consolas, monospace;
  opacity: 0; transition: opacity .18s;
}
#duel-recap.show .recap-body { opacity: 1; }
#duel-recap .recap-head {
  font-family: var(--duel-display);
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: #ffc46a; margin-bottom: 6px;
}
#duel-recap .recap-rows {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 76px; overflow-y: auto;
}
#duel-recap .recap-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline;
  font-size: 10.5px; line-height: 1.35; color: #b8c4dc;
}
#duel-recap .recap-row .r-lane { color: #6a7080; letter-spacing: 0.5px; }
#duel-recap .recap-row .r-what { color: #cfd8e8; }
#duel-recap .recap-row .r-out { text-align: right; white-space: nowrap; }
#duel-recap .recap-row .r-out.kill { color: #7dffc4; }
#duel-recap .recap-row .r-out.lost { color: #ff8fb0; }
#duel-recap .recap-row .r-out.breach { color: #5ee0a8; }
#duel-recap .recap-row .r-out.trace { color: #ff9a6a; }
#duel-recap .recap-net {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid #2a2f3a;
  font-size: 10.5px; letter-spacing: 0.6px; color: #cfd8e8;
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
}
#duel-recap .recap-net b.b { color: #5ee0a8; }
#duel-recap .recap-net b.t { color: #ff9a6a; }
#duel-recap .recap-net .n-final { color: #8a92a6; margin-left: auto; }
#duel-recap .recap-dismiss {
  margin-top: 6px; text-align: center;
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: #5a6070;
}

@media (prefers-reduced-motion: reduce) {
  #duel-recap, #duel-recap .recap-body { transition: none; }
  #duel-resolve-step { transition: none; }
  #hero-marker, #hero-fill, #trace-fill, #hero-ghost, #trace-ghost { transition: none; }
}

/* Edge glow — change border colour only. An inset 1px ring on top of the
   real border made corners look stepped/jagged (turn-mine/theirs). */
#duel-box.turn-mine {
  border-color: #37f5a3;
  box-shadow: 0 0 40px -10px rgba(55,245,163,0.4), 0 30px 80px -30px rgba(0,0,0,0.55);
}
#duel-box.turn-theirs {
  border-color: #ff6fa8;
  box-shadow: 0 0 40px -10px rgba(255,111,168,0.35), 0 30px 80px -30px rgba(0,0,0,0.55);
}
#duel-box.turn-resolving {
  border-color: #3a4050;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.55);
}
#duel-commit-label { display: none; }
#duel-ram-lock {
  font-size: 8px; color: #ff6fa8; text-align: center;
  height: 14px; min-height: 14px; max-height: 14px;
  padding: 0 12px; max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-sizing: border-box; flex-shrink: 0;
}
#duel-ram-lock:empty { visibility: hidden; }
#duel-session-note {
  position: relative; z-index: 3;
  margin: 0 14px 4px; padding: 5px 8px;
  border-left: 2px solid #f5a337;
  background: rgba(245,163,55,0.07); color: #d9b979;
  font: 8px/1.45 monospace; letter-spacing: .35px;
}
#duel-session-note[hidden] { display: none; }

#duel-arena { position: relative; z-index: 2; padding: 0 0 4px; overflow: hidden;
  flex: 1 1 auto; min-height: 0; }
#enemy-zone, #player-zone { position: relative; z-index: 4; }
#battle-line { position: relative; z-index: 3; }
#lane-labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--duel-lane-gap); padding: 0 var(--duel-zone-pad-x);
  font-size: 9px; color: #4a5060; text-align: center; letter-spacing: 1px; }
.zone-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--duel-lane-gap); padding: 6px var(--duel-zone-pad-x); }
#enemy-zone { padding-bottom: 0; }
#player-zone { padding-top: 0; }

/* --- W8: seat-anchored geometry (rationale D6) --------------------------------
   You are always the bottom zone. ICE still lives in #enemy-zone and programs in
   #player-zone — the JS never has to think about seats — and `seat-def` is the one
   place that flips which of them is drawn at the bottom. */
#duel-arena { display: flex; flex-direction: column; justify-content: center; }
#lane-labels { order: 1; }
#enemy-zone { order: 2; }
#battle-line { order: 3; }
#player-zone { order: 4; }
#duel-opp-hand { order: 0; display: flex; align-items: center; justify-content: center;
  gap: 4px; min-height: 28px; padding: 4px 10px 2px; pointer-events: none; }
#duel-opp-hand[hidden] { display: none; }
#duel-opp-hand .opp-hand-lbl {
  font-family: var(--duel-display); font-size: 8px; letter-spacing: 0.14em;
  color: #6a7080; margin-right: 6px; white-space: nowrap; font-weight: 700;
}
#duel-opp-hand .opp-hand-back {
  width: 18px; height: 26px; border-radius: 2px; flex: 0 0 auto;
  background:
    repeating-linear-gradient(135deg, #1a1428 0 3px, #241c38 3px 6px);
  border: 1px solid #4a3868;
  box-shadow: inset 0 0 0 1px rgba(55, 213, 245, 0.12), 0 0 6px rgba(8, 5, 16, 0.6);
}
#duel.seat-def .opp-hand-back {
  border-color: #5a3040;
  box-shadow: inset 0 0 0 1px rgba(255, 111, 168, 0.18), 0 0 6px rgba(8, 5, 16, 0.6);
}
#duel.seat-def #enemy-zone { order: 4; padding-bottom: 6px; padding-top: 0; }
#duel.seat-def #player-zone { order: 2; padding-top: 6px; padding-bottom: 0; }

/* Whose row this is, hung in the gutter so it can never sit over a chip. */
#duel-arena .zone-grid::before {
  content: attr(data-tag); position: absolute; left: 4px;
  font-size: 8px; letter-spacing: 1.2px; font-weight: 700; z-index: 6;
  pointer-events: none; white-space: nowrap; opacity: 0.9;
  max-width: 88px; overflow: hidden; text-overflow: ellipsis;
}
#duel-arena .zone-grid.zone-mine::before { color: #5ee0a8; }
#duel-arena .zone-grid.zone-foe::before { color: #ff6fa8; }
#duel:not(.seat-def) #enemy-zone::before,
#duel.seat-def #player-zone::before { bottom: -13px; }
#duel:not(.seat-def) #player-zone::before,
#duel.seat-def #enemy-zone::before { top: -13px; }
#duel-arena .zone-grid.zone-mine { border-left: 2px solid rgba(94, 224, 168, 0.45); }
#duel-arena .zone-grid.zone-foe { border-left: 2px solid rgba(255, 111, 168, 0.35); }

.lane-slot { border-radius: 8px; min-height: 44px; min-width: 0; position: relative;
  display: flex; align-items: stretch; }
.lane-pad {
  position: absolute; inset: 0; border-radius: 8px;
  display: flex; justify-content: center; align-items: center;
  font-size: 8px; color: #3a4050; z-index: 0;
}
.lane-pad.empty { border: 1px dashed #2a2e3a; background: rgba(13, 14, 18, 0.35); }
.lane-slot.filled .lane-pad.empty {
  border-color: rgba(42, 46, 58, 0.45);
  background: rgba(13, 14, 18, 0.2);
}
.lane-slot.filled .lane-pad.empty span { opacity: 0; }
.lane-pad.empty.lane-link-breach {
  border: 1px dashed rgba(94, 224, 168, 0.45);
  background: rgba(94, 224, 168, 0.04);
  box-shadow: inset 0 0 10px rgba(94, 224, 168, 0.05);
  color: rgba(94, 224, 168, 0.55);
}
.lane-pad.empty.lane-link-trace {
  border: 1px dashed rgba(255, 176, 77, 0.45);
  background: rgba(255, 176, 77, 0.04);
  box-shadow: inset 0 0 10px rgba(255, 176, 77, 0.05);
  color: rgba(255, 176, 77, 0.55);
}
.lane-slot.targetable-ice { cursor: crosshair; outline: 2px solid #ff3860; outline-offset: 2px;
  box-shadow: 0 0 14px rgba(255, 56, 96, 0.35); }
.lane-slot.targetable-buff { cursor: pointer; outline: 2px solid #ffd23f; outline-offset: 2px;
  box-shadow: 0 0 18px rgba(255, 210, 63, 0.4); animation: buff-pick-pulse 1.1s ease-in-out infinite; }
.lane-slot.targetable-buff::after {
  content: 'SHIELD'; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  font-size: 7px; font-weight: 700; letter-spacing: 0.5px; color: #ffd23f;
  background: rgba(26, 21, 8, 0.92); padding: 1px 6px; border-radius: 0;
  border: 1px solid rgba(255, 210, 63, 0.55); z-index: 5; pointer-events: none; white-space: nowrap;
}
#player-zone.buff-picking .lane-slot:not(.targetable-buff):not(.targetable-place) { opacity: 0.38; }
#enemy-zone.ice-picking .lane-slot:not(.targetable-ice) { opacity: 0.38; }
/* The defender places ICE into #enemy-zone — same dimming the attacker gets. */
#enemy-zone.place-picking .lane-slot:not(.targetable-place) { opacity: 0.38; }
@keyframes buff-pick-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 210, 63, 0.3); }
  50% { box-shadow: 0 0 22px rgba(255, 210, 63, 0.55); }
}
.lane-slot.lane-next { outline: 2px dashed #5ee0a8; outline-offset: 2px;
  box-shadow: 0 0 12px rgba(94,224,168,0.35); }
.lane-slot.targetable-place,
.lane-slot.lane-place {
  cursor: pointer;
  outline: 2px solid #5ee0a8;
  outline-offset: 2px;
  animation: place-lane-pulse 0.7s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(94, 224, 168, 0.55), inset 0 0 16px rgba(94, 224, 168, 0.12);
}
.lane-slot.targetable-place .lane-pad.empty span,
.lane-slot.lane-place .lane-pad.empty span {
  color: #5ee0a8;
  font-weight: 700;
  letter-spacing: 0.4px;
}
#player-zone.place-picking .lane-slot:not(.targetable-place):not(.targetable-buff) { opacity: 0.38; }
@keyframes place-lane-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(94, 224, 168, 0.35), inset 0 0 8px rgba(94, 224, 168, 0.08);
    outline-color: rgba(94, 224, 168, 0.7);
  }
  50% {
    box-shadow: 0 0 28px rgba(94, 224, 168, 0.85), inset 0 0 22px rgba(94, 224, 168, 0.22);
    outline-color: #9ff5cd;
  }
}
#duel-place-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%) translateY(6px);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  max-width: 92%;
  padding: 5px 12px;
  border: 1px solid rgba(94, 224, 168, 0.45);
  background: rgba(8, 16, 14, 0.92);
  color: #9ff5cd;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#duel-place-hint.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lane-slot.deploy-flash { animation: deploy-in 0.45s ease-out; }

.board-chip { width: 100%; min-width: 0; border-radius: 4px; overflow: hidden; position: relative; z-index: 2; cursor: help;
  border: 1px solid var(--duel-line); border-top-width: 3px; background: #161922; }
.chip-head { font-family: var(--duel-display); font-size: 10px; font-weight: 600; padding: 4px 8px 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.chip-stats { padding: 3px 8px 6px; font-size: 9px; display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap; min-width: 0; font-variant-numeric: tabular-nums; }
.chip-ice { border-top-color: #ff5c8a; box-shadow: 0 0 16px -4px rgba(255,92,138,0.35); }
.chip-ice .chip-head { color: #ff8fb0; }
.chip-ice .chip-stats { color: #ffb8cd; }
.chip-fighter { border-top-color: #37f5a3; box-shadow: 0 0 16px -4px rgba(55,245,163,0.35); }
.chip-fighter .chip-head { color: #7dffc4; }
.chip-fighter .chip-stats { color: #b8ffd8; }
.chip-wall { border-top-color: #6d8bff; box-shadow: 0 0 16px -4px rgba(109,139,255,0.3); }
.chip-wall .chip-head { color: #b6c6ff; }
.chip-wall .chip-stats { color: #cdd9ff; }
.chip-trap { border-top-color: #ffd23f; box-shadow: 0 0 14px -4px rgba(255,210,63,0.25); }
.chip-trap .chip-head { color: #ffe08a; }
.chip-trap .chip-stats { color: #ffe9a8; }
.board-chip.shatter { animation: card-glitch 0.58s ease-in forwards; pointer-events: none; }
/* --- Proxy_Shield: a living barrier, not a static border --- */
@keyframes shield-idle {
  0%, 100% { box-shadow: 0 0 0 2px #ffd23f, 0 0 9px rgba(255,210,63,0.40), inset 0 0 11px rgba(255,210,63,0.12); }
  50%      { box-shadow: 0 0 0 2px #ffe27a, 0 0 20px rgba(255,210,63,0.80), inset 0 0 20px rgba(255,210,63,0.28); }
}
.board-chip.shielded { animation: shield-idle 1.6s ease-in-out infinite; }
/* ⛨ badge so the shield is legible even when the glow is at its dim phase */
.board-chip.shielded::after {
  content: '⛨'; position: absolute; top: 1px; right: 3px; z-index: 4;
  font-size: 11px; line-height: 1; color: #ffd23f;
  text-shadow: 0 0 6px #ffd23f, 0 0 2px #fff; pointer-events: none;
}
/* HP hit: the heart swells for a second so the small number is readable as it drops */
@keyframes hp-hit-pop {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.9); color: #ff3860; text-shadow: 0 0 10px #ff3860, 0 0 4px #fff; }
  55%  { transform: scale(1.45); color: #ff5c7a; text-shadow: 0 0 8px #ff3860; }
  100% { transform: scale(1); }
}
.chip-stats span.hp-hit {
  animation: hp-hit-pop 1s ease-out; font-weight: 700;
  position: relative; z-index: 3; will-change: transform;
}
/* ⚔ fires: the attack value swells as the unit shoots — tells you WHICH card
   is attacking and with how much (replaces the old confusing strike-through) */
@keyframes atk-fire-pop {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.8); color: #eafff6; text-shadow: 0 0 10px #5ee0a8, 0 0 4px #fff; }
  60%  { transform: scale(1.35); color: #5ee0a8; text-shadow: 0 0 8px #5ee0a8; }
  100% { transform: scale(1); }
}
.chip-stats span.atk-fire {
  animation: atk-fire-pop 0.8s ease-out; font-weight: 700;
  position: relative; z-index: 3; will-change: transform;
}
.chip-ice .chip-stats span.atk-fire { animation-name: atk-fire-pop-ice; }
@keyframes atk-fire-pop-ice {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.8); color: #fff; text-shadow: 0 0 10px #ff3860, 0 0 4px #fff; }
  60%  { transform: scale(1.35); color: #ff6fa8; text-shadow: 0 0 8px #ff3860; }
  100% { transform: scale(1); }
}
/* the lane label (L1–L5) lights up while that lane is actually fighting */
#lane-labels > div.lane-firing {
  color: #eafff6; font-weight: 700; text-shadow: 0 0 10px #5ee0a8;
  transform: scale(1.35); transition: all 0.12s ease-out;
}
.lane-slot.lane-clash {
  outline: 2px solid rgba(120, 245, 255, 0.85); outline-offset: 2px;
  box-shadow: 0 0 22px rgba(255, 56, 96, 0.45), 0 0 28px rgba(94, 224, 168, 0.35);
  animation: lane-clash-pulse 0.55s ease-in-out infinite;
}
@keyframes lane-clash-pulse {
  0%, 100% { filter: brightness(1.05); }
  50% { filter: brightness(1.35); }
}

/* ...and the whole corridor flares with it: red at the ICE end, green at mine */
@keyframes lane-tunnel-flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 0.85; }
  100% { opacity: 0; }
}
/* shield snaps on: a ring collapses onto the chip */
@keyframes shield-on-pop {
  0%   { transform: translate(-50%,-50%) scale(1.7); opacity: 0; }
  45%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
.vfx-shield-on {
  position: absolute; z-index: 6; pointer-events: none; border-radius: 10px;
  border: 2px solid #ffd23f; box-shadow: 0 0 20px #ffd23f, inset 0 0 16px rgba(255,210,63,0.45);
  animation: shield-on-pop 0.5s ease-out forwards;
}
/* shield eats the hit and shatters: white flare blowing outward */
@keyframes shield-break-pop {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; border-color: #fff; }
  100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; border-color: #ffd23f; }
}
.vfx-shield-break {
  position: absolute; z-index: 6; pointer-events: none; border-radius: 10px;
  border: 3px solid #fff; box-shadow: 0 0 30px #fff, inset 0 0 22px rgba(255,255,255,0.65);
  animation: shield-break-pop 0.45s ease-out forwards;
}
.vfx-dmg.shield { color: #ffd23f; font-size: 11px; letter-spacing: 1px; }

.vfx-lane-tunnel {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  border-radius: 8px;
  border-left: 2px solid rgba(120,245,255,0.65);
  border-right: 2px solid rgba(120,245,255,0.65);
  background: linear-gradient(180deg,
    rgba(255,56,96,0.42), rgba(255,56,96,0.12) 38%,
    rgba(120,245,255,0.08) 50%,
    rgba(94,224,168,0.12) 62%, rgba(94,224,168,0.42));
  box-shadow: inset 0 0 32px rgba(120,245,255,0.28), 0 0 24px rgba(120,245,255,0.18);
  animation: lane-tunnel-flash 1s ease-out forwards;
}

#battle-line {
  position: relative; height: var(--duel-battle-h); margin: 0 var(--duel-zone-pad-x);
  overflow: hidden; min-width: 0; flex-shrink: 0;
}
#battle-lasers { position: absolute; inset: 0; width: 100%; height: 100%; }
#battle-lasers line { animation: laser-flow 0.6s linear infinite; }
#battle-lasers .laser-down { animation-direction: reverse; }
#battle-lasers circle { animation: clash-pulse 0.8s ease-in-out infinite; }

/* One floating tooltip for [data-gloss] definitions and [data-tip] rich panels. */
#duel-gloss-tip {
  position: fixed; z-index: 200; max-width: 264px;
  left: 0; top: 0;
  padding: 9px 11px; border: 1px solid #3a4050; border-radius: 5px;
  background: #05060a; color: #b8c4dc;
  font-family: 'IBM Plex Mono', Consolas, monospace;
  font-size: 10.5px; line-height: 1.5; letter-spacing: 0.2px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.9);
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .12s, transform .12s;
}
#duel-gloss-tip.show { opacity: 1; transform: translateY(0); }
/* heading line (GLOSS title, or the contact-badge verdict) */
#duel-gloss-tip .gt-h, #duel-gloss-tip .vd-h {
  display: block; margin-bottom: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #eaf2ff;
}
#duel-gloss-tip span { display: block; }
#duel-gloss-tip b { color: #7dffc4; font-weight: 700; }
#duel-gloss-tip i { color: #ff8fb0; font-style: normal; }
#duel-gloss-tip .dd-tip-warn {
  color: #ffb86b; margin: 2px 0 7px; padding: 5px 7px;
  border-left: 2px solid #f5a337; background: rgba(245, 163, 55, 0.08);
  font-weight: 700;
}
#duel-gloss-tip .dd-tip-rule {
  color: #8fd6ff; margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid #203241; font-weight: 700; text-transform: uppercase;
}
#duel-gloss-tip .dd-tip-status { color: #9fbac7; margin-top: 3px; }

/* tokens carrying a definition get a help cursor; small labels/values also get a
   faint dotted underline as the "there's an explanation here" cue */
[data-gloss], [data-tip] { cursor: help; }
.duel-meter-lbl.wave[data-gloss],
#duel-wave-box[data-gloss] .duel-meter-lbl,
#duel-hero[data-gloss],
#lane-labels [data-gloss],
#inspect [data-gloss],
#stats [data-gloss],
#software-zone [data-gloss] {
  text-decoration: underline dotted rgba(140, 160, 190, 0.45);
  text-underline-offset: 3px;
}
/* SITREP glossary labels are keyboard-focusable (tabindex=0) — give the focus a
   visible ring so the tooltip's focusin path is usable without a mouse. */
#inspect [data-gloss]:focus-visible {
  outline: 1px solid rgba(120, 245, 255, 0.85);
  outline-offset: 2px;
}

/* P3 — contact line: the matchup verdict for each lane, before you commit. */
#contact-line {
  position: absolute; inset: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--duel-lane-gap);
  align-items: center;
  padding-top: 14px;
  box-sizing: border-box;
  pointer-events: none;
}
#contact-line .v {
  position: relative; justify-self: stretch; width: 100%;
  max-width: 100%; min-width: 0; box-sizing: border-box;
  font-size: 8px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.1;
  text-align: center; text-transform: uppercase;
  padding: 3px 14px 3px 4px; border: 1px solid #2a2e3a; border-radius: 3px;
  background: #0c0e13; color: #6a7080; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  pointer-events: auto; cursor: help;
}
#contact-line .v > span:first-child {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 8px;
}
/* "?" affordance so the badge reads as hoverable, like every other label */
#contact-line .v::after {
  content: '?'; position: absolute; top: -5px; right: -5px;
  width: 12px; height: 12px; line-height: 11px; text-align: center;
  font-size: 8px; font-weight: 800;
  color: #0c0e13; background: currentColor; border-radius: 50%;
}
#contact-line .v-none::after { display: none; }
#contact-line .v-none  { opacity: 0.5; }
#contact-line .v-win   { color: #7dffc4; border-color: rgba(55,245,163,0.45); }
#contact-line .v-lose  { color: #ff6b6b; border-color: rgba(245,80,79,0.5); }
#contact-line .v-trade { color: #ffc46a; border-color: rgba(245,163,55,0.45); }
#contact-line .v-leak  { color: #ffb04d; border-color: rgba(245,177,58,0.4); }
/* defender seat: a clean breach for the intruder is the bad outcome, and vice versa */
#duel.seat-def #contact-line .v-win  { color: #ff6b6b; border-color: rgba(245,80,79,0.5); }
#duel.seat-def #contact-line .v-lose { color: #7dffc4; border-color: rgba(55,245,163,0.45); }

/* .vd is just a hidden content carrier read by the shared tooltip — generalized
   past #contact-line so any [data-tip] element (e.g. the toolbar MODULES cards)
   can carry rich per-instance content the same way. */
[data-tip] .vd { display: none; }

@media (max-width: 560px) {
  #contact-line .v { font-size: 7px; padding: 2px 12px 2px 4px; }
  #contact-line .v::after { width: 10px; height: 10px; line-height: 9px; font-size: 7px; }
}

#duel-deck-row {
  border-top: 1px solid #1c2029; background: linear-gradient(0deg, #0a0b10, transparent);
  padding: 10px 18px 12px; display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 2;
  flex: 0 0 var(--duel-deck-h); height: var(--duel-deck-h);
  min-height: var(--duel-deck-h); max-height: var(--duel-deck-h);
  box-sizing: border-box; min-width: 0; overflow: visible;
}
#duel-hand {
  display: flex; gap: var(--duel-hand-gap); flex: 1; justify-content: center; flex-wrap: nowrap;
  min-height: var(--duel-hand-h); height: var(--duel-hand-h); max-height: var(--duel-hand-h);
  align-items: flex-end; overflow-x: auto; overflow-y: visible; min-width: 0;
  scrollbar-width: thin; padding-bottom: 2px;
}
#duel-threads-block { font-family: var(--duel-display); font-size: 9px; color: #838ca2;
  letter-spacing: 1px; text-transform: uppercase; width: 78px; flex-shrink: 0; line-height: 1.5; }
#duel-threads-n { font-family: 'IBM Plex Mono', monospace; color: #37f5a3; font-weight: 700; font-size: 18px; }
.hand-empty { font-size: 9px; color: #6a7080; padding: 8px; }
#duel-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
  height: auto; min-height: 90px; justify-content: center; min-width: 76px; z-index: 3; }
#commit-hint {
  font-size: 8px; color: #5ee0a8; border: 1px solid #2a5a3a; border-radius: 0;
  padding: 0 10px; text-align: center; line-height: 1.1; min-width: 64px;
  height: 32px; min-height: 32px; max-height: 32px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; white-space: nowrap;
}
#commit-hint.soon { animation: pulse-timer 0.6s infinite; color: #ffb04d; border-color: #5a4a2a; }
#commit-hint.idle { color: #6a7080; border-color: #2a2e3a; }
#commit-hint.pick-buff { color: #ffd23f; border-color: #5a4a1a; background: rgba(255, 210, 63, 0.08);
  animation: buff-pick-pulse 1.1s ease-in-out infinite; }
#commit-hint.pick-ice { color: #ff6fa8; border-color: #5a2a3a; background: rgba(255, 56, 96, 0.08); }
#commit-hint.pick-place { color: #5ee0a8; border-color: #2a4a3a; background: rgba(94, 224, 168, 0.08);
  animation: place-lane-pulse 0.7s ease-in-out infinite; }
/* W8: SKIP is the move you make every wave and FOLD is the one you make once — they
   were the same weight, and the quieter of the two was the common one. */
/* P1 — END TURN is the primary gesture (every wave); FOLD is the rare one (once).
   END TURN reads as a filled button, FOLD as a quiet outline beneath it. */
#skip-btn { font-family: var(--duel-display); font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
  color: #04120b;
  border: 1px solid #37f5a3; border-radius: 5px;
  padding: 13px 20px; min-height: 44px; min-width: 108px;
  background: #37f5a3;
  box-shadow: 0 0 22px -5px rgba(55, 245, 163, 0.5);
  cursor: pointer; text-transform: uppercase; }
#skip-btn:hover { filter: brightness(1.1); box-shadow: 0 0 26px -2px rgba(55, 245, 163, 0.6); }
#skip-btn.dis { opacity: 0.3; cursor: not-allowed; box-shadow: none;
  color: #8a92a6; background: transparent; border-color: #2a2e3a; }
#fold-btn { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; color: #ff8fa8;
  border: 1px solid #4a2a3a; border-radius: 5px;
  padding: 7px 12px; min-height: 30px; min-width: 72px; background: transparent;
  cursor: pointer; font-family: inherit; text-transform: uppercase; opacity: 0.8; }
#fold-btn:hover { border-color: #ff6fa8; opacity: 1; }
#duel .hand-card {
  width: var(--duel-hand-card-w); border-radius: 0; cursor: pointer; flex: 0 0 auto; overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.hand-card {
  width: 108px; border-radius: 0; cursor: pointer; flex-shrink: 0; overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.hand-card:hover:not(.dis) {
  filter: brightness(1.14); transform: translateY(-6px);
  box-shadow: 0 0 18px rgba(94, 224, 168, 0.4);
}
.hand-card.dis { opacity: 0.32; cursor: not-allowed; }
/* Forced-move demo guide (ACTION_PLAN_FIRST_LOOP.md J7 follow-up) — practice
   rounds 1-2 only, wired in duel.js's updateDuelChrome(). `.forced-guide`
   pulses the one hand card the demo wants played next; `.forced-dim`
   (round 1 only) mutes every other card the same way `.dis` already does —
   and is excluded from click-wiring the same way `.dis` is, so it is
   structurally unclickable, not just styled to look that way. The matching
   lane restriction in renderLanes() needs no CSS of its own: it reuses the
   existing targetable-place dim rule by simply not marking a non-open lane
   targetable in the first place. */
.hand-card.forced-dim { opacity: 0.32; cursor: not-allowed; }
.hand-card.forced-guide {
  animation: forced-guide-pulse 1.1s ease-in-out infinite;
}
@keyframes forced-guide-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(94, 224, 168, 0.4), inset 0 0 0 1px rgba(94, 224, 168, 0.5); }
  50% { box-shadow: 0 0 22px rgba(94, 224, 168, 0.85), inset 0 0 0 2px rgba(94, 224, 168, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .hand-card.forced-guide {
    animation: none;
    box-shadow: 0 0 16px rgba(94, 224, 168, 0.7), inset 0 0 0 2px rgba(94, 224, 168, 0.85);
  }
}
.hand-card.selected { box-shadow: 0 0 16px rgba(94,224,168,0.65); transform: translateY(-4px); }
.hand-card.targeting-buff {
  box-shadow: inset 0 0 0 2px #ffd23f, 0 0 14px rgba(255, 210, 63, 0.55);
}
.hand-card.targeting-ice {
  box-shadow: inset 0 0 0 2px #ff3860, 0 0 14px rgba(255, 56, 96, 0.5);
}
.hand-card.targeting-place {
  box-shadow: inset 0 0 0 2px #5ee0a8, 0 0 16px rgba(94, 224, 168, 0.6);
}
/* Mockup card face: a top accent strip (not a full colour bar), name in the
   display face, cost as a small corner gem, dark tinted body. */
#duel .hand-card, .hand-card {
  border-radius: 4px; border: 1px solid var(--duel-line); border-top-width: 3px;
  background: #161922;
}
.hand-chip-head {
  font-family: var(--duel-display); font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  padding: 6px 7px 4px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 5px;
  background: transparent;
}
.hand-chip-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hand-chip-head .hand-threads {
  flex: 0 0 auto; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0; opacity: 1;
  min-width: 17px; text-align: center; color: #04120b;
  padding: 1px 4px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.hand-chip-head .hand-threads::after { content: ''; }
.hand-chip-body { padding: 3px 7px 8px; font-size: 9px; text-align: left; line-height: 1.4; min-height: 40px; color: #97a0b4; }
.hand-card.card-fighter { border-color: var(--duel-line); border-top-color: #37f5a3; }
.hand-card.card-fighter .hand-chip-head { color: #7dffc4; }
.hand-card.card-fighter .hand-threads { background: #37f5a3; }
.hand-card.card-fighter-heavy { border-top-color: #2a8a58; }
.hand-card.card-fighter-heavy .hand-chip-head { color: #a8e0c0; }
.hand-card.card-fighter-heavy .hand-threads { background: #2a8a58; color: #eafff2; }
.hand-card.card-wall { border-top-color: #6d8bff; }
.hand-card.card-wall .hand-chip-head { color: #b6c6ff; }
.hand-card.card-wall .hand-threads { background: #6d8bff; color: #0a0f1a; }
.hand-card.card-instant { border-top-color: #c88dff; }
.hand-card.card-instant .hand-chip-head { color: #ddc4ff; }
.hand-card.card-instant .hand-threads { background: #c88dff; color: #140a1a; }
.hand-card.card-trap { border: 1px solid #ffd23f; background: #1a1508; }
.hand-card.card-trap .hand-chip-head { background: #ffd23f; color: #1a1508; }
.hand-card.card-trap .hand-chip-body { color: #ffe9a8; }

#duel-card-tip {
  flex: 0 0 var(--duel-tip-h);
  height: var(--duel-tip-h);
  min-height: var(--duel-tip-h);
  max-height: var(--duel-tip-h);
  border-top: 1px solid #1c2029;
  border-bottom: 1px solid #14161c;
  background: #0d0f15;
  padding: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #97a0b4;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
#duel-card-tip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #37f5a3, #f5b13a); opacity: 0.5;
}
#duel-card-tip.foe-card {
  background: linear-gradient(90deg, rgba(255, 92, 138, 0.075), #0d0f15 34%, #0d0f15 66%, rgba(255, 92, 138, 0.05));
  border-top-color: rgba(255, 111, 168, 0.38);
}
#duel-card-tip.foe-card::before {
  background: linear-gradient(180deg, #ff5c8a, #a74268); opacity: 0.95;
}
#duel-card-tip-inner {
  height: 100%; max-height: 100%; padding: 6px 16px 6px 20px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
.tip-card {
  max-width: 760px; margin: 0 auto; width: 100%; max-height: 100%;
  display: grid; grid-template-rows: 16px 20px minmax(0, 1fr); gap: 3px; align-content: start;
  overflow: hidden;
}
#duel-card-tip .tip-pick {
  position: absolute; bottom: 5px; left: 20px; right: 16px;
  margin: 0; font-size: 8px; font-weight: 700; letter-spacing: 0.8px; text-align: center;
}
.tip-header {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: nowrap; margin: 0; overflow: hidden;
}
.tip-name {
  font-family: var(--duel-display); font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%;
}
.tip-role {
  font-family: var(--duel-display); font-size: 7px; font-weight: 700; letter-spacing: 1.4px;
  padding: 1px 6px; border-radius: 2px; border: 1px solid transparent; flex-shrink: 0;
}
.tip-chips {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
  margin: 0; max-width: 100%;
}
/* Left = what the card costs you, right = what it gives — independent-list item
   "Safehouse info density, no left/right separation". */
.tip-chip-group { display: inline-flex; flex-wrap: nowrap; gap: 4px; }
.tip-chip-divider {
  width: 1px; align-self: stretch; min-height: 14px; margin: 0 2px;
  background: rgba(255,255,255,0.14); flex-shrink: 0;
}
.tip-legend {
  flex-basis: 100%; text-align: center; font-size: 7px; letter-spacing: 0.6px;
  color: #5a6070; margin-top: 3px;
}
.tip-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 0; font-size: 9px; font-weight: 600;
  border: 1px solid transparent; line-height: 1; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.tip-tag { font-size: 7px; opacity: 0.55; letter-spacing: 0.6px; font-weight: 700; }
.tip-val { font-weight: 700; letter-spacing: 0.2px; }
.tip-chip.tip-threads { color: #c8a8ff; border-color: rgba(200,141,255,0.35); background: rgba(200,141,255,0.06); }
.tip-chip.tip-atk { color: #5ee0a8; border-color: rgba(94,224,168,0.35); background: rgba(94,224,168,0.06); }
.tip-chip.tip-hp { color: #ffb04d; border-color: rgba(255,176,77,0.35); background: rgba(255,176,77,0.06); }
.tip-chip.tip-warn { color: #ffb04d; border-color: rgba(255,176,77,0.4); background: rgba(255,176,77,0.07); }
.tip-chip.tip-good { color: #5ee0a8; border-color: rgba(94,224,168,0.35); background: rgba(94,224,168,0.06); }
.tip-chip.tip-kill { color: #ff6fa8; border-color: rgba(255,56,96,0.35); background: rgba(255,56,96,0.07); }
.tip-chip.tip-buff { color: #ffd23f; border-color: rgba(255,210,63,0.4); background: rgba(255,210,63,0.07); }
.tip-chip.tip-trap { color: #ffd23f; border-color: rgba(255,210,63,0.35); background: rgba(255,210,63,0.06); }
.tip-chip.tip-block { color: #8aa8ff; border-color: rgba(109,139,255,0.35); background: rgba(109,139,255,0.06); }
.tip-role-fighter .tip-name { color: #5ee0a8; }
.tip-role-fighter .tip-role { color: #5ee0a8; border-color: rgba(94,224,168,0.35); background: rgba(94,224,168,0.06); }
.tip-role-wall .tip-name { color: #8aa8ff; }
.tip-role-wall .tip-role { color: #8aa8ff; border-color: rgba(109,139,255,0.35); background: rgba(109,139,255,0.06); }
.tip-role-instant .tip-name { color: #c8a0ff; }
.tip-role-instant .tip-role { color: #c8a0ff; border-color: rgba(200,141,255,0.35); background: rgba(200,141,255,0.06); }
.tip-role-trap .tip-name { color: #ffd23f; }
.tip-role-trap .tip-role { color: #ffd23f; border-color: rgba(255,210,63,0.35); background: rgba(255,210,63,0.06); }
.tip-role-ice .tip-name { color: #ff6fa8; }
.tip-role-ice .tip-role { color: #ff6fa8; border-color: rgba(255,111,168,0.4); background: rgba(255,111,168,0.08); }
/* The card rework's roles: LURE, VIRUS, STEAL (BLOCKER, ANSWER, TRICK reuse wall, trap, instant). */
.tip-role-lure .tip-name { color: #ff9f43; }
.tip-role-lure .tip-role { color: #ff9f43; border-color: rgba(255,159,67,0.35); background: rgba(255,159,67,0.06); }
.tip-role-virus .tip-name { color: #b6ff3f; }
.tip-role-virus .tip-role { color: #b6ff3f; border-color: rgba(182,255,63,0.35); background: rgba(182,255,63,0.06); }
.tip-role-steal .tip-name { color: #ff5cd6; }
.tip-role-steal .tip-role { color: #ff5cd6; border-color: rgba(255,92,214,0.35); background: rgba(255,92,214,0.06); }
.tip-owner {
  flex: 0 0 auto; padding: 1px 6px; border: 1px solid rgba(255, 92, 138, 0.62);
  border-radius: 2px; background: rgba(255, 92, 138, 0.12); color: #ff8fb0;
  font: 800 7px/1.4 var(--duel-display); letter-spacing: 1.3px;
}
.tip-card.tip-owner-foe .tip-name { color: #ff8fb0; text-shadow: 0 0 10px rgba(255, 92, 138, 0.25); }
.tip-card.tip-owner-foe .tip-role {
  color: #ff9fba; border-color: rgba(255, 111, 168, 0.44);
  background: rgba(255, 111, 168, 0.08);
}
#duel-card-tip .tip-quote,
#duel-card-tip .tip-quote-empty {
  margin: 0; padding-top: 3px; border-top: 1px solid #1a2428;
  color: #7a9084; font-size: 9px; line-height: 1.3; font-style: normal;
  text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal;
}
.tip-empty { display: flex; align-items: center; justify-content: center; height: 100%; }
.tip-placeholder { color: #4a5860; font-style: normal; letter-spacing: 0.5px; font-size: 9px; }
#duel-card-tip .tip-pick-buff { color: #ffd23f; }
#duel-card-tip .tip-pick-ice { color: #ff6fa8; }

/* Combat floaters must sit above lane chips (#enemy-zone/#player-zone z:4).
   Was z-index:1 — damage/+BREACH/+TRACE numbers rendered under card art (B1/B4). */
#duel-vfx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 50; }
.vfx-dmg { position: absolute; font-weight: bold; font-size: 15px; z-index: 51;
  animation: dmg-float 0.9s ease-out forwards; text-shadow: 0 0 6px currentColor;
  transform: translateX(-50%); pointer-events: none; }
.vfx-dmg.hit { color: #ff3860; }
.vfx-dmg.breach { color: #5ee0a8; }
.vfx-dmg.trace { color: #ffb04d; }
.vfx-shard {
  position: absolute; width: 5px; height: 5px; border-radius: 1px; z-index: 2;
  box-shadow: 0 0 6px currentColor;
  animation: shard-burst 0.65s ease-out forwards;
}
.vfx-death-flash {
  position: absolute; width: 64px; height: 64px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, rgba(255,255,255,0.75), transparent 68%);
  animation: death-flash-pop 0.4s ease-out forwards; pointer-events: none;
}
.vfx-beam { position: absolute; width: 5px; border-radius: 3px; z-index: 3;
  background: linear-gradient(0deg, #5ee0a8, rgba(94,224,168,0.15));
  box-shadow: 0 0 16px #5ee0a8; }
.vfx-beam.heavy { width: 10px; }
.vfx-charge { position: absolute; width: 6px; height: 6px; border-radius: 50%; z-index: 35;
  background: #5ee0a8; box-shadow: 0 0 8px #5ee0a8; animation: charge-fly 0.45s ease-in forwards; }
.vfx-charge.enemy { background: #ff3860; box-shadow: 0 0 8px #ff3860; animation-name: charge-fly-down; }
.vfx-static { position: absolute; inset: 0; z-index: 28; opacity: 0.65; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(200,200,255,0.08) 2px, rgba(200,200,255,0.08) 4px);
  animation: static-rise 0.85s ease-out forwards; }
.vfx-smoke { position: absolute; height: 6px; border-radius: 3px; z-index: 22;
  background: linear-gradient(270deg, transparent, #c88dff, #e5cdff);
  box-shadow: 0 0 12px #c88dff; animation: smoke-sweep 0.75s ease-out forwards; }

#duel-result { text-align: center; font-size: 20px; font-weight: bold; letter-spacing: 2px;
  padding: 10px 20px 14px; position: relative; z-index: 2; }
#duel-timer { display: none; }

.stat-atk { color: #5ee0a8; }
.stat-hp { color: #ffb04d; }
.stat-tag { font-size: 8px; color: #6a7080; }
.noise-tag { color: #ff3860; font-size: 8px; }

/* --- Phase 1: war combat VFX (crossing tracers, impacts, lunge, shake) --- */
@keyframes tracer-fly { from { opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0.25; } }
.vfx-tracer { position: absolute; width: 3px; height: 13px; border-radius: 2px; z-index: 36;
  margin-left: -1.5px; margin-top: -6px; will-change: transform;
  animation: tracer-fly var(--dur, 0.24s) linear forwards; pointer-events: none; }
.vfx-tracer.prog { background: linear-gradient(180deg, #eafff6, #5ee0a8); box-shadow: 0 0 9px #5ee0a8; }
.vfx-tracer.ice  { background: linear-gradient(180deg, #ffe3e3, #ff3860); box-shadow: 0 0 9px #ff3860; }

@keyframes muzzle-pop { 0% { transform: translate(-50%,-50%) scale(0.35); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; } }
.vfx-muzzle { position: absolute; width: 24px; height: 24px; border-radius: 50%; z-index: 34;
  background: radial-gradient(circle, rgba(255,255,255,0.95), transparent 62%);
  animation: muzzle-pop 0.22s ease-out forwards; pointer-events: none; }
.vfx-muzzle.prog { box-shadow: 0 0 15px #5ee0a8; }
.vfx-muzzle.ice  { box-shadow: 0 0 15px #ff3860; }

@keyframes impact-ring { 0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0.95; } 100% { transform: translate(-50%,-50%) scale(1.35); opacity: 0; } }
.vfx-impact { position: absolute; width: 36px; height: 36px; border-radius: 50%; z-index: 33;
  border: 2px solid currentColor; box-shadow: 0 0 12px currentColor;
  animation: impact-ring 0.34s ease-out forwards; pointer-events: none; }

@keyframes spark-burst { from { opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.vfx-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; z-index: 34;
  background: currentColor; box-shadow: 0 0 6px currentColor;
  animation: spark-burst 0.4s ease-out forwards; pointer-events: none; }

/* chip lunge (attacking) / recoil (getting hit) */
@keyframes chip-lunge-up   { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.06); } 100% { transform: translateY(0) scale(1); } }
@keyframes chip-lunge-down { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(14px) scale(1.06); }  100% { transform: translateY(0) scale(1); } }
@keyframes chip-recoil { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-2deg); } 60% { transform: translateX(3px) rotate(1.5deg); } }
.board-chip.lunge-up   { animation: chip-lunge-up 0.3s ease-out; }
.board-chip.lunge-down { animation: chip-lunge-down 0.3s ease-out; }
.board-chip.recoil     { animation: chip-recoil 0.3s ease-out; filter: brightness(1.6); }

/* arena screen-shake on heavy hits / breaches / deaths */
@keyframes arena-shake      { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3px,2px); } 40% { transform: translate(3px,-2px); } 60% { transform: translate(-2px,-2px); } 80% { transform: translate(2px,2px); } }
@keyframes arena-shake-hard { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-6px,3px); } 30% { transform: translate(6px,-3px); } 45% { transform: translate(-5px,-3px); } 60% { transform: translate(5px,3px); } 80% { transform: translate(-3px,2px); } }
#duel-arena.shake      { animation: arena-shake 0.32s ease-out; }
#duel-arena.shake-hard { animation: arena-shake-hard 0.42s ease-out; }

/* --- Tug-of-war warviz: full-height background behind duel UI --- */

#duel-box::before,
#duel-box::after { z-index: 1; }

/* --- FINAL BREACH SEQUENCE (clean HUD banner) ----------------------------- */
#duel-finale {
  position: absolute; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  overflow: hidden;
  font-family: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
}
#duel-finale[hidden] { display: none !important; }
#duel-finale.show { opacity: 1; pointer-events: auto; }
#duel-finale.fade-out { opacity: 0; }

/* primary neon + muted top + purple bottom accent */
#duel-finale.theme-capture {
  --fin: #3de8c8; --fin-muted: #6aa8a0; --fin-sub: #c9a0ff;
  --fin-glow: rgba(61, 232, 200, 0.65); --fin-band: rgba(61, 232, 200, 0.08);
}
#duel-finale.theme-raid {
  --fin: #4fd2ff; --fin-muted: #6a9ab0; --fin-sub: #c9a0ff;
  --fin-glow: rgba(79, 210, 255, 0.65); --fin-band: rgba(79, 210, 255, 0.08);
}
#duel-finale.theme-traced {
  --fin: #ff4d6d; --fin-muted: #b07080; --fin-sub: #ffb0c0;
  --fin-glow: rgba(255, 77, 109, 0.7); --fin-band: rgba(255, 77, 109, 0.1);
}
#duel-finale.theme-hold {
  --fin: #ffb04d; --fin-muted: #b08a50; --fin-sub: #c9a0ff;
  --fin-glow: rgba(255, 176, 77, 0.65); --fin-band: rgba(255, 176, 77, 0.08);
}
#duel-finale.theme-fold {
  --fin: #b8a8e0; --fin-muted: #7a708f; --fin-sub: #4fd2ff;
  --fin-glow: rgba(184, 168, 224, 0.55); --fin-band: rgba(184, 168, 224, 0.08);
}

#duel-finale .finale-veil {
  position: absolute; inset: 0;
  background-color: rgba(4, 5, 8, 0.72);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
}

#duel-finale .finale-body {
  position: relative; z-index: 2;
  width: min(78%, 420px);
  padding: 28px 22px 26px;
  text-align: center;
  background:
    linear-gradient(180deg, transparent 38%, var(--fin-band) 46%, var(--fin-band) 58%, transparent 66%),
    rgba(6, 8, 12, 0.94);
  border: 1px solid var(--fin);
  box-shadow:
    0 0 18px var(--fin-glow),
    0 0 40px rgba(0, 0, 0, 0.55),
    inset 0 0 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.96);
}
#duel-finale.show .finale-body {
  opacity: 1;
  transform: scale(1);
  animation: finale-slam 0.32s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

#duel-finale .finale-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--fin-muted);
  margin-bottom: 14px;
}
#duel-finale .finale-title {
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fin);
  text-shadow:
    0 0 16px var(--fin-glow),
    0 0 32px var(--fin-glow),
    1px 0 0 rgba(255, 80, 140, 0.35),
    -1px 0 0 rgba(80, 220, 255, 0.3);
  margin-bottom: 14px;
}
#duel-finale .finale-sub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fin-sub);
  text-shadow: 0 0 12px rgba(201, 160, 255, 0.45);
}

@keyframes finale-slam {
  0% { opacity: 0; transform: scale(1.04); filter: brightness(1.6); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

/* --- Responsive duel overlay (desktop 1100–1600 + short viewports) ----------- */
@media (max-width: 1600px) {
  #duel-box { width: min(98vw, 1140px); min-width: 0; height: min(90vh, 840px); max-height: min(90vh, 840px); }
}

@media (max-width: 1400px) {
  #duel-box {
    width: min(98vw, 1040px);
    height: min(90vh, 800px);
    max-height: min(90vh, 800px);
    --duel-hand-card-w: 100px;
    --duel-hand-gap: 8px;
    --duel-lane-gap: 8px;
    --duel-zone-pad-x: 16px;
    --duel-battle-h: 56px;
    --duel-deck-h: 130px;
    --duel-hand-h: 104px;
    --duel-tip-h: 84px;
  }
  #duel-head { gap: 10px; padding: 10px 14px 12px; }
  #duel-hero { gap: 10px; }
  .duel-race-label { margin-bottom: 5px; }
  #duel-forecast { flex-basis: 42px; height: 42px; min-height: 42px; max-height: 42px; }
  #duel-defender, #duel-operator { font-size: 9px; letter-spacing: 1px; }
  .duel-wave { min-width: 72px; }
  .duel-wave-num { padding: 4px 8px 5px; }
  .duel-wave-num .wave-now { font-size: 16px; }
  .lane-slot { min-height: 40px; }
  .chip-head { font-size: 8px; padding: 2px 5px; }
  .chip-stats { padding: 4px 5px; font-size: 7px; gap: 6px; }
  #duel-deck-row { padding: 8px 12px; gap: 10px; }
  #duel-threads-block { width: 64px; }
  #duel-threads-n { font-size: 16px; }
  #duel-actions { min-width: 80px; gap: 5px; }
  #skip-btn, #fold-btn { min-height: 36px; min-width: 76px; padding: 8px 10px; font-size: 10px; }
  #duel .hand-card .hand-chip-head { font-size: 9px; padding: 3px 5px; }
  #duel .hand-card .hand-chip-body { padding: 6px 4px; font-size: 8px; min-height: 36px; }
  #duel .hand-card .hand-threads { font-size: 11px; }
  #duel-card-tip-inner { padding: 6px 12px 6px 16px; }
  .tip-card { grid-template-rows: 14px 20px 24px; gap: 3px; }
}

@media (max-width: 1200px) {
  #duel-box {
    width: min(99vw, 960px);
    height: min(92vh, 760px);
    max-height: min(92vh, 760px);
    --duel-hand-card-w: 88px;
    --duel-hand-gap: 6px;
    --duel-lane-gap: 6px;
    --duel-zone-pad-x: 10px;
    --duel-battle-h: 48px;
    --duel-deck-h: 120px;
    --duel-hand-h: 96px;
    --duel-tip-h: 76px;
  }
  #duel-head { gap: 6px; padding: 6px 8px 8px; }
  #duel-defender, #duel-operator { font-size: 8px; letter-spacing: 0.6px; }
  .duel-race-label { font-size: 10px; }
  .duel-race-label .cap { font-size: 7px; }
  .duel-wave { min-width: 64px; }
  .duel-wave-num .wave-now { font-size: 14px; }
  #duel-commit-label { letter-spacing: 1px; padding: 2px 0; font-size: 7px; }
  #duel-turn-owner { font-size: 8px; letter-spacing: 0.6px; padding: 5px 40px; min-height: 14px; }
  .turn-clock { right: 5px; font-size: 9px; padding: 1px 5px; }
  #duel-arena .zone-grid::before { font-size: 7px; letter-spacing: 0.6px; }
  #lane-labels { font-size: 8px; letter-spacing: 0.5px; }
  .lane-slot { min-height: 36px; border-radius: 6px; }
  .lane-pad { border-radius: 6px; font-size: 7px; }
  .board-chip { border-radius: 6px; }
  .chip-head { font-size: 7px; padding: 2px 4px; }
  .chip-stats { padding: 3px 4px; gap: 4px; }
  #duel-deck-row { padding: 6px 8px; gap: 8px; }
  #duel-threads-block { width: 56px; font-size: 8px; }
  #duel-threads-n { font-size: 14px; }
  #duel-hand { justify-content: flex-start; padding: 0 2px; }
  #duel .hand-card { width: clamp(70px, 12.5vw, 82px); }
  #duel .hand-card:hover:not(.dis) { transform: translateY(-4px); }
  #duel-actions { min-width: 84px; }
  #skip-btn, #fold-btn { min-height: 38px; min-width: 80px; font-size: 10px; padding: 8px 10px; }
  #commit-hint { min-width: 70px; font-size: 7px; }
  #duel-place-hint { font-size: 9px; white-space: nowrap; max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-height: 820px) {
  #duel-box {
    --duel-battle-h: 44px;
    --duel-tip-h: 72px;
    --duel-deck-h: 124px;
    --duel-hand-h: 100px;
  }
  #duel-commit-label { display: none; }
  #duel-ram-lock { padding-bottom: 2px; }
  .lane-slot { min-height: 34px; }
}
@media (max-height: 780px) {
  #duel-context-bar #duel-seat-goal { display: none !important; }
}

@media (max-width: 1200px) and (max-height: 780px) {
  #duel-box {
    --duel-tip-h: 64px;
    --duel-deck-h: 116px;
    --duel-hand-h: 92px;
    --duel-hand-card-w: 80px;
  }
}
#duel-forecast {
  position: relative;
  z-index: 7;
  flex: 0 0 46px;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  color: #b6d9df;
  font: 10px/1.25 monospace;
  padding: 4px 12px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  background: rgba(4, 7, 11, 0.82);
  border-bottom: 1px solid rgba(62, 87, 105, 0.4);
  pointer-events: none;
}
#duel-forecast > span {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#duel-forecast .forecast-wave {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 4px 8px; color: #d2f4f5; font-weight: 700; letter-spacing: 0.04em;
  white-space: normal;
}
#duel-forecast .forecast-lbl {
  color: #7a96a0; font-size: 8px; letter-spacing: 0.16em; font-weight: 700;
}
#duel-forecast .forecast-delta.breach { color: #5ee0a8; font-size: 15px; font-weight: 800; }
#duel-forecast .forecast-delta.trace { color: #ffb04d; font-size: 15px; font-weight: 800; }
#duel-forecast .forecast-delta.flat { color: #6a7488; font-size: 13px; }
#duel-forecast .forecast-path { color: #9bb4bc; font-size: 10px; font-weight: 600; }
#duel-forecast .forecast-outcome { color: #ffc46a; font-size: 10px; font-weight: 700; }
#duel-forecast .forecast-main { color: #d2f4f5; }
#duel-forecast .forecast-sources {
  color: #84aeb5; font-size: 8px;
  white-space: nowrap; max-width: 100%;
}
#duel-forecast .forecast-doctrine { color: #c9a0ff; font-size: 8px; font-weight: 700; }
#duel-forecast .forecast-main b { color: #ffc46a; }
/* Ghost end-of-wave meter preview (Hearthstone-style "how much this round"). */
.duel-race-ghost {
  position: absolute; inset: 0 auto 0 0; width: 0; pointer-events: none;
  opacity: 0.45; transition: width .35s cubic-bezier(.2,.8,.2,1);
  border-right: 2px solid currentColor;
  box-sizing: border-box;
}
#hero-ghost {
  background: repeating-linear-gradient(
    90deg, rgba(55,245,163,0.28) 0 3px, rgba(55,245,163,0.05) 3px 6px);
  color: #37f5a3;
}
#trace-ghost {
  background: repeating-linear-gradient(
    90deg, rgba(255,176,77,0.28) 0 3px, rgba(255,176,77,0.05) 3px 6px);
  color: #ffb04d;
}
.duel-race-ghost[hidden] { display: none; }
#duel { user-select: none; -webkit-user-select: none; }
#duel-finale .finale-fact {
  max-width: min(620px, 82vw); margin: 14px auto 0;
  color: var(--fin-muted); font: 10px/1.5 monospace;
  letter-spacing: .8px; text-transform: none;
}
#contact-line .v > span:first-child { font-size: 8px; }
/* Keep combat tags clipped — never switch to wrapping (that grew the duel). */

@media (max-width: 560px) {
  #duel-forecast {
    flex-basis: 40px; height: 40px; min-height: 40px; max-height: 40px;
    font-size: 8px; padding: 3px 4px;
  }
  #duel-forecast .forecast-delta.breach,
  #duel-forecast .forecast-delta.trace { font-size: 14px; }
  #duel-forecast .forecast-sources,
  #duel-forecast .forecast-doctrine { font-size: 6px; }
  #contact-line { padding-top: 11px; }
  #contact-line .v > span:first-child { font-size: 7px; }
}

/* =============================================================================
   BREACH TABLE (2026-09) — duel layout + skin from the approved preview.
   Identities and the wave ring on top; TRACE / BREACH as side reactors; the lane
   board in the middle over a perspective floor; one banner row (turn, forecast,
   resolve step, notes, clock); then THREADS · payload rack · INTEL · END TURN.
   Everything below overrides the earlier duel rules by source order. The frame
   is sized to the window height and compacts itself on shorter screens.
   ============================================================================= */
@keyframes bt-blink { 50% { opacity: .3; } }
@keyframes bt-danger { 50% { box-shadow: 0 0 18px rgba(255, 92, 138, .6); } }

#duel-box {
  --bt-breach: #37f5a3; --bt-trace: #f5b13a; --bt-foe: #ff5c8a; --bt-wall: #6d8bff;
  --bt-instant: #c88dff; --bt-trap: #ffd23f; --bt-cyan: #37d5f5;
  --bt-line: #1c2130; --bt-line-2: #2e3548; --bt-muted: #737d92; --bt-text: #e7edf6; --bt-text-2: #aab3c5;
  --bt-ch: clamp(140px, 20vh, 188px);   /* rack card height */
  --bt-lip: 40px; --bt-rest: 8px; --bt-pull: -44px; --bt-pad: 14px;
  --bt-slot-h: 92px;                    /* lane slot: plate + prism */
  --duel-battle-h: 64px;
  width: min(98vw, 1440px);
  height: min(96vh, 980px);
  max-height: min(96vh, 980px);
  background: radial-gradient(120% 70% at 50% 40%, #10152a 0%, #0d0f17 55%, #07080e 100%);
  border-color: var(--bt-line-2);
  border-radius: 4px;
}
#duel-box.turn-mine { box-shadow: 0 0 0 1px rgba(55, 245, 163, .25), 0 0 60px rgba(55, 245, 163, .06) inset, 0 30px 80px -30px rgba(0, 0, 0, .8); }
#duel-box.turn-theirs { box-shadow: 0 0 0 1px rgba(255, 92, 138, .3), 0 0 60px rgba(255, 92, 138, .08) inset, 0 30px 80px -30px rgba(0, 0, 0, .8); }

/* --- head: identities + wave ring ------------------------------------------- */
#duel-head { flex: 0 0 auto; padding: 8px 16px 8px; border-bottom: 1px solid var(--bt-line); background: none; }
#duel-head::after { display: none; }
#duel-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.dh-ident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dh-me { justify-content: flex-end; text-align: right; }
.dh-sigil {
  flex: 0 0 auto; width: 34px; height: 38px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font: 700 11px var(--duel-display);
}
.dh-foe .dh-sigil { background: linear-gradient(160deg, rgba(255, 92, 138, .35), rgba(255, 92, 138, .08)); color: var(--bt-foe); }
.dh-me .dh-sigil { background: linear-gradient(160deg, rgba(55, 245, 163, .35), rgba(55, 245, 163, .08)); color: var(--bt-breach); }
#duel-defender, #duel-operator {
  min-width: 0; font-size: 13px; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#duel-wave-box { position: relative; width: 64px; height: 64px; min-width: 64px; display: grid; place-items: center; padding: 0; text-align: center; }
#duel-wave-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#duel-wave-ring path { fill: none; stroke: #232a3a; stroke-width: 3; }
#duel-wave-ring path.done { stroke: var(--bt-cyan); }
#duel-wave-ring path.now { stroke: var(--bt-breach); stroke-width: 5; filter: drop-shadow(0 0 4px var(--bt-breach)); }
#duel-wave-box.near-final #duel-wave-ring path.now { stroke: #ffb04d; filter: drop-shadow(0 0 4px #ffb04d); }
#duel-wave-box.final-wave #duel-wave-ring path.now { stroke: #ff3860; filter: drop-shadow(0 0 6px #ff3860); }
#duel-wave-box .duel-meter-lbl.wave { display: none; }
#duel-wave-box .duel-wave-num { border: 0; padding: 0; background: none; box-shadow: none; }
#duel-wave-box .duel-wave-num .wave-prefix { display: none; }
#duel-wave-box .duel-wave-num .wave-now { font-size: 18px; }
#duel-wave-box .duel-wave-num .wave-sep, #duel-wave-box .duel-wave-num .wave-max { font-size: 10px; }
#duel-waves-left { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); margin: 0; white-space: nowrap; font-size: 8px; }
#duel-wave-box.final-wave #duel-waves-left { color: #ff6fa8; animation: bt-blink 1s infinite; }
.duel-wave[data-telegraph]:not([data-telegraph=""])::after { display: none; }
#duel-context-bar { justify-content: center; margin-top: 12px; }

/* --- main: reactors + board ------------------------------------------------- */
#duel-main {
  flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr) 104px;
  border-bottom: 1px solid var(--bt-line);
}
#duel-main .duel-race {
  position: relative; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px; padding: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent);
}
#duel-trace-race { border-right: 1px solid var(--bt-line); }
#duel-breach-race { border-left: 1px solid var(--bt-line); }
.race-head { font: 700 12px var(--duel-display); letter-spacing: .22em; text-align: center; }
.trace-race .race-head { color: var(--bt-trace); }
.breach-race .race-head { color: var(--bt-breach); }
.duel-race.mine .race-head { text-shadow: 0 0 10px currentColor; }
.race-tube {
  justify-self: center; width: 34px; min-height: 0; display: flex; flex-direction: column-reverse; gap: 2px;
  padding: 4px; border: 1px solid var(--bt-line-2); background: #07080d;
}
.trace-race .race-tube { --tc: var(--bt-trace); }
.breach-race .race-tube { --tc: var(--bt-breach); }
.race-tube i { flex: 1; min-height: 2px; background: rgba(255, 255, 255, .04); }
.race-tube i.on { background: var(--tc); box-shadow: 0 0 8px var(--tc); }
.race-tube i.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--tc); animation: bt-blink 1.1s infinite; }
.duel-race.danger .race-tube { animation: bt-danger 1s infinite; border-color: #ff3860; }
.duel-race.complete .race-tube { border-color: currentColor; }
#duel-trace-track { display: none; }
.race-val { position: relative; text-align: center; font-family: var(--duel-display); font-weight: 700; line-height: 1; }
.race-val b { font-size: clamp(22px, 3.4vh, 34px); font-variant-numeric: tabular-nums; }
.trace-race .race-val b { color: var(--bt-trace); }
.breach-race .race-val b { color: var(--bt-breach); }
.duel-race.danger .race-val b { color: #ff3860; }
.race-val .cap { font: 400 12px 'IBM Plex Mono', Consolas, monospace; color: var(--bt-muted); }
.race-val .race-cap { display: block; margin-top: 5px; font-size: 9.5px; letter-spacing: .04em; }
.race-val .bar-flash { top: -18px; right: 50%; transform: translateX(50%); }

/* --- the board -------------------------------------------------------------- */
#duel-arena { min-height: 0; padding: 50px 0 22px; justify-content: center; overflow: hidden; }
#duel-floor { position: absolute; inset: 44px 2% 18px; z-index: 0; pointer-events: none; perspective: 900px; }
#duel-floor .floor-plane {
  position: absolute; inset: 0; transform: rotateX(34deg); transform-origin: 50% 100%;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--duel-lane-gap);
  padding: 0 var(--duel-zone-pad-x);
  background-image:
    linear-gradient(rgba(55, 213, 245, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 213, 245, .05) 1px, transparent 1px);
  background-size: 100% 36px, 36px 100%;
}
#duel-floor .floor-plane i {
  background: linear-gradient(0deg, rgba(55, 245, 163, .08), rgba(20, 24, 38, .38) 48%, rgba(255, 92, 138, .09));
  border: 1px solid rgba(120, 140, 180, .16);
}
#duel-floor .floor-gate { position: absolute; left: 0; right: 0; text-align: center; font: 700 9.5px var(--duel-display); letter-spacing: .3em; white-space: nowrap; }
#duel-floor .floor-gate-far { top: -26px; color: var(--bt-foe); }
#duel-floor .floor-gate-far::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 16px; height: 12px;
  border-bottom: 2px solid rgba(255, 92, 138, .9);
  background: linear-gradient(0deg, rgba(255, 92, 138, .3), transparent);
}
#duel-floor .floor-gate-near { bottom: -16px; color: var(--bt-breach); }
#duel-floor .floor-gate-near::before {
  content: ''; position: absolute; left: 0; right: 0; top: -4px; border-top: 2px solid rgba(55, 245, 163, .8);
  box-shadow: 0 0 12px rgba(55, 245, 163, .5);
}
#duel-floor .floor-gate span { position: relative; z-index: 1; padding: 0 8px; background: #0d0f17; }

/* tug-of-war rail above the board */
#duel-hero.duel-tug { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: min(56%, 460px); z-index: 8; display: flex; align-items: center; gap: 8px; }
#duel-hero .duel-tug-rail { flex: 1 1 auto; order: 2; }
#duel-hero .duel-tug-rail { position: relative; height: 4px; border: 0; overflow: visible; background: linear-gradient(90deg, var(--bt-trace), #333a4d 45%, #333a4d 55%, var(--bt-breach)); }
#duel-hero #hero-fill, #duel-hero #hero-ghost { display: none; }
#duel-hero #hero-marker {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: 0; border: 0;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--bt-text); box-shadow: 0 0 10px var(--bt-breach);
  transition: left .8s cubic-bezier(.2, .8, .2, 1);
}
#duel-hero #hero-marker::before { display: none; }
.duel-tug-lab { display: contents; font: 9px 'IBM Plex Mono', monospace; color: var(--bt-muted); letter-spacing: .08em; }
.duel-tug-lab span { font: 9px 'IBM Plex Mono', monospace; color: var(--bt-muted); white-space: nowrap; }
.duel-tug-lab span:first-child { order: 1; } .duel-tug-lab span:last-child { order: 3; }

/* rows: lane labels sit at the near edge; the far row reads smaller (depth) */
#lane-labels { order: 5; position: relative; z-index: 4; margin-top: 6px; font: 700 10px var(--duel-display); letter-spacing: .2em; color: var(--bt-muted); }
#duel:not(.seat-def) #enemy-zone, #duel.seat-def #player-zone { transform: scale(.88); transform-origin: 50% 100%; }
#duel-arena .zone-grid { position: relative; z-index: 4; border-left: 0; }
#duel-arena .zone-grid.zone-mine, #duel-arena .zone-grid.zone-foe { border-left: 0; }
#duel .lane-slot {
  min-height: var(--bt-slot-h); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border-radius: 0;
}
#duel .lane-pad { inset: auto 14% 2px 14%; height: 26px; border-radius: 50%; }
#duel .lane-pad.empty { border: 1px dashed rgba(120, 140, 180, .3); background: rgba(13, 14, 18, .35); }
#duel .lane-pad.empty span { position: relative; top: 1px; font-size: 8px; }
#duel .lane-slot.filled .lane-pad.empty { border-color: transparent; background: radial-gradient(closest-side, rgba(255, 255, 255, .06), transparent); }
#duel .lane-slot.lane-place .lane-pad.empty,
#duel .lane-slot.targetable-place .lane-pad.empty { border-color: var(--bt-breach); background: rgba(55, 245, 163, .1); animation: bt-blink 1.1s infinite; }

/* glass hex prism under each unit (colour per role) */
.chip-prism {
  --pc: 55, 245, 163;
  position: absolute; left: 50%; bottom: 6px; width: min(62%, 64px); height: 44px; transform: translateX(-50%);
  z-index: 1; pointer-events: none; border: 0 !important; box-shadow: none !important; background: none !important;
  filter: drop-shadow(0 0 6px rgba(var(--pc), .55));
}
.chip-prism.chip-ice { --pc: 255, 92, 138; height: 48px; }
.chip-prism.chip-wall { --pc: 109, 139, 255; height: 50px; }
.chip-prism.chip-trap { --pc: 255, 210, 63; height: 34px; }
.chip-prism::before {
  content: ''; position: absolute; left: 0; right: 0; top: 11px; bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), 75% 100%, 25% 100%, 0 calc(100% - 11px));
  background:
    linear-gradient(90deg, transparent 24.4%, rgba(var(--pc), .55) 25%, transparent 25.6%, transparent 74.4%, rgba(var(--pc), .55) 75%, transparent 75.6%),
    linear-gradient(180deg, rgba(var(--pc), .26), rgba(var(--pc), .06));
}
.chip-prism::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: radial-gradient(closest-side, rgba(var(--pc), .55), rgba(var(--pc), .3));
}

/* unit plate above its prism */
#duel .lane-slot.filled .board-chip {
  width: auto; min-width: min(100%, 104px); max-width: 100%; margin: 0 auto 54px; border-radius: 0;
  border: 1px solid rgba(var(--pc, 55, 245, 163), .9); border-top-width: 1px;
  background: rgba(7, 9, 15, .88);
  box-shadow: 0 0 16px rgba(var(--pc, 55, 245, 163), .22);
}
#duel .board-chip.chip-ice { --pc: 255, 92, 138; }
#duel .board-chip.chip-fighter { --pc: 55, 245, 163; }
#duel .board-chip.chip-wall { --pc: 109, 139, 255; }
#duel .board-chip.chip-trap { --pc: 255, 210, 63; }
#duel .board-chip .chip-head { font-size: 11px; padding: 4px 8px 1px; text-align: left; }
#duel .board-chip .chip-stats { justify-content: flex-start; padding: 1px 8px 5px; font-size: 10px; }

/* contact line = the glowing membrane between the rows */
#battle-line { margin: 0 var(--duel-zone-pad-x); }
#battle-line::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 26px; transform: translateY(-40%);
  background: linear-gradient(0deg, rgba(55, 213, 245, .02), rgba(55, 213, 245, .10));
  border-top: 1px solid rgba(55, 213, 245, .35); pointer-events: none;
}
#contact-line .v { font-family: var(--duel-display); font-weight: 700; letter-spacing: .1em; background: rgba(7, 9, 15, .9); box-shadow: 0 0 14px -2px currentColor; }

/* --- banner: turn · forecast / resolve step · notes · clock ----------------- */
#duel-banner {
  position: relative; flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 6px 16px; border-bottom: 1px solid var(--bt-line);
}
#duel-banner #duel-turn-owner {
  grid-column: 1; grid-row: 1; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; min-height: 0;
  font: 700 15px var(--duel-display); letter-spacing: .14em; white-space: nowrap;
}
#duel-banner #duel-turn-owner.mine { color: var(--bt-breach); }
#duel-banner #duel-turn-owner.theirs { color: var(--bt-foe); }
#duel-banner #duel-turn-owner.resolving { color: var(--bt-cyan); }
#duel-banner #duel-forecast,
#duel-banner #duel-resolve-step { grid-column: 2; grid-row: 1; }
#duel-banner #duel-forecast {
  flex: none; height: auto; min-height: 0; max-height: 40px; padding: 0; background: none; border: 0;
  align-items: flex-start; text-align: left;
}
#duel-banner #duel-forecast .forecast-wave { justify-content: flex-start; }
#duel-banner #duel-resolve-step { z-index: 8; height: auto; font: 12px 'IBM Plex Mono', monospace; color: var(--bt-text-2); background: #0d0f17; }
#duel-banner #duel-resolve-step:not(.on) { pointer-events: none; }
.duel-banner-notes { grid-column: 3; grid-row: 1; display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 0; }
#duel-banner #duel-ram-lock { margin: 0; padding: 3px 8px; border: 1px solid rgba(245, 177, 58, .5); color: var(--bt-trace); font-size: 10.5px; white-space: nowrap; }
#duel-banner #duel-ram-lock:empty { display: none; }
#duel-banner #duel-session-note { position: static; margin: 0; max-width: 360px; max-height: 38px; overflow: hidden; padding: 3px 8px; border: 1px solid var(--bt-line-2); font-size: 10px; color: var(--bt-muted); }
#duel-banner #turn-timer-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
#duel-banner #turn-timer-fill { box-shadow: 0 0 10px currentColor; }
#duel-commit-label { display: none; }

/* --- rack row: THREADS · payload rack · INTEL · END TURN -------------------- */
#duel-deck-row {
  flex: 0 0 auto; height: auto; min-height: 0; max-height: none;
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 260px 164px; gap: 14px; align-items: end;
  padding: 8px 16px 10px; background: none; border-top: 0;
}
#duel-threads-block { width: auto; align-self: stretch; display: grid; gap: 6px; align-content: end; line-height: 1.2; }
#duel-threads-block .threads-lbl { font: 700 11px var(--duel-display); letter-spacing: .22em; color: var(--bt-muted); }
#duel-threads-n { font: 700 22px var(--duel-display); color: var(--bt-cyan); }
.threads-pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.threads-pips i { aspect-ratio: 1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #1b2030; }
.threads-pips i.on { background: var(--bt-cyan); box-shadow: 0 0 8px var(--bt-cyan); }
.threads-pips i.spent { background: rgba(55, 213, 245, .25); }
.threads-deck { display: flex; align-items: center; gap: 7px; font: 10.5px 'IBM Plex Mono', monospace; color: var(--bt-muted); letter-spacing: 0; text-transform: none; }
.threads-deck i { width: 18px; height: 24px; border: 1px solid var(--bt-line-2); background: repeating-linear-gradient(135deg, #1a2132 0 3px, #10141f 3px 6px); box-shadow: 3px -3px 0 -1px #0d1019, 3px -3px 0 0 var(--bt-line-2); }
#duel-deck { color: var(--bt-text); }

#duel-rack { min-width: 0; display: grid; gap: 4px; }
.rack-term { font: 11px 'IBM Plex Mono', monospace; color: var(--bt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rack-cur { display: inline-block; width: 7px; height: 12px; margin-left: 4px; vertical-align: -1px; background: var(--bt-breach); animation: bt-blink 1s steps(1) infinite; }
#duel #duel-hand {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 138px); gap: 12px; align-items: end; justify-content: center;
  height: calc(var(--bt-ch) + var(--bt-pad) - var(--bt-pull) + 8px); min-height: 0; max-height: none;
  padding: var(--bt-pad) 12px 0; overflow: hidden;
  border: 1px solid var(--bt-line-2); border-bottom: 0;
  background: linear-gradient(180deg, #0a0c14, #0d1019);
}
#duel #duel-hand .hand-empty { grid-column: 1 / -1; align-self: center; padding-bottom: var(--bt-lip); }
.rack-slot { position: relative; display: grid; align-items: end; height: 100%; min-width: 0; }
.rack-lip {
  position: absolute; left: -6px; right: -6px; bottom: 0; height: var(--bt-lip); z-index: 6;
  border-top: 1px solid var(--bt-line-2); background: linear-gradient(180deg, #171b29, #0c0f18);
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px;
  font: 10.5px 'IBM Plex Mono', monospace; color: var(--bt-muted); pointer-events: none;
}
.rl-led { width: 8px; height: 8px; border-radius: 50%; background: var(--bt-breach); box-shadow: 0 0 8px var(--bt-breach); flex: 0 0 auto; }
.rl-stt { font: 700 10px var(--duel-display); letter-spacing: .18em; color: var(--bt-breach); }
.rack-slot.locked .rl-led { background: var(--bt-trace); box-shadow: 0 0 8px var(--bt-trace); }
.rack-slot.locked .rl-stt { color: var(--bt-trace); }
.rack-slot.armed .rl-led { background: var(--bt-cyan); box-shadow: 0 0 10px var(--bt-cyan); animation: bt-blink .8s infinite; }
.rack-slot.armed .rl-stt { color: var(--bt-cyan); }

#duel .rack-slot .hand-card {
  --hc: var(--bt-breach);
  position: relative; width: 100%; max-width: 138px; justify-self: center; height: var(--bt-ch);
  display: grid; grid-template-rows: auto calc(var(--bt-ch) * .3) auto auto minmax(0, 1fr); gap: 5px;
  padding: 9px 10px; border-radius: 0; border: 1px solid color-mix(in srgb, var(--hc) 55%, transparent);
  background: linear-gradient(170deg, #161a28, #090b12 70%);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transform: translateY(var(--bt-rest)); transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .22s;
  overflow: hidden; box-shadow: none;
}
#duel .rack-slot .hand-card.card-fighter, #duel .rack-slot .hand-card.card-fighter-heavy { --hc: var(--bt-breach); }
#duel .rack-slot .hand-card.card-wall { --hc: var(--bt-wall); }
#duel .rack-slot .hand-card.card-instant { --hc: var(--bt-instant); }
#duel .rack-slot .hand-card.card-trap { --hc: var(--bt-trap); }
#duel .rack-slot .hand-card.card-ice { --hc: var(--bt-foe); }
/* Hover lives on the slot: the card lifts away from the pointer, the slot does not. */
#duel .rack-slot:hover .hand-card, #duel .rack-slot .hand-card:focus-visible { transform: translateY(var(--bt-pull)); z-index: 7; }
#duel .rack-slot .hand-card.selected { transform: translateY(calc(var(--bt-pull) - 6px)); z-index: 7; box-shadow: 0 0 0 1px var(--hc), 0 0 26px color-mix(in srgb, var(--hc) 45%, transparent); }
#duel .rack-slot .hand-card.dis { opacity: 1; filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
#duel .rack-slot .hand-card.forced-dim { filter: grayscale(.8) brightness(.55); }
#duel .rack-slot .hand-card.forced-guide { box-shadow: 0 0 0 1px var(--hc), 0 0 22px color-mix(in srgb, var(--hc) 55%, transparent); }
.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hc-cost {
  width: 20px; height: 22px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--bt-cyan); color: #021018; font: 700 11px var(--duel-display);
}
.hc-role { font: 600 8px var(--duel-display); letter-spacing: .18em; color: var(--hc); }
.hc-art { position: relative; min-height: 0; border: 1px solid rgba(255, 255, 255, .06); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--hc) 28%, transparent), transparent 65%), #05060b; overflow: hidden; }
/* world.html makes every canvas absolute for the map; pin this one to the art frame */
.hc-art canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: inherit; }
.hc-name { font: 600 12px var(--duel-display); color: var(--bt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-stats { display: flex; align-items: baseline; gap: 10px; font-family: var(--duel-display); font-weight: 700; }
.hc-stats .s { font-size: 16px; font-weight: 600; line-height: 1; color: var(--bt-text); }
.hc-stats .s em { font-style: normal; font-size: 11px; color: var(--bt-muted); margin-right: 2px; }
.hc-stats .eff { font-size: 12px; color: var(--hc); letter-spacing: .04em; }
.hc-kw { display: flex; flex-wrap: wrap; gap: 3px; align-content: start; overflow: hidden; }
.hc-kw span { font: 9px 'IBM Plex Mono', monospace; padding: 1px 4px; border: 1px solid var(--bt-line-2); color: var(--bt-text-2); }
.hc-why { font: 10px 'IBM Plex Mono', monospace; color: var(--bt-trace); }

/* INTEL panel (the card tip) */
#duel-deck-row #duel-card-tip {
  flex: none; align-self: stretch; height: auto; min-height: 0; max-height: none;
  border: 1px solid var(--bt-line-2); background: linear-gradient(180deg, #10131e, #0a0c13); overflow: auto;
}
#duel-deck-row #duel-card-tip-inner { height: auto; max-height: none; padding: 10px 12px 10px 14px; display: block; }
#duel-deck-row #duel-card-tip .tip-card { display: grid; grid-template-rows: none; gap: 7px; max-height: none; max-width: none; }
#duel-deck-row #duel-card-tip .tip-header { flex-wrap: wrap; gap: 4px 8px; }
#duel-deck-row #duel-card-tip .tip-name { font: 700 16px var(--duel-display); }
#duel-deck-row #duel-card-tip .tip-chips { flex-wrap: wrap; }
#duel-deck-row #duel-card-tip .tip-chip-group { flex-wrap: wrap; }
#duel-deck-row #duel-card-tip .tip-empty { height: 100%; }

/* END TURN / FOLD */
#duel-actions { display: grid; gap: 8px; align-self: end; min-height: 0; min-width: 0; }
#commit-hint { height: auto; min-height: 26px; max-height: none; white-space: normal; font-size: 10px; }
#skip-btn {
  min-height: 68px; border-radius: 0; font-size: 15px; letter-spacing: .2em;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
#fold-btn { border-radius: 0; letter-spacing: .24em; }

/* --- shorter windows ----------------------------------------------------------- */
@media (max-height: 860px) {
  #duel-box { --bt-ch: clamp(124px, 19vh, 180px); --bt-lip: 30px; --bt-rest: 0px; --bt-pull: -34px; --bt-pad: 8px; --bt-slot-h: 80px; --duel-battle-h: 52px; }
  #duel-head { padding: 3px 16px 4px; }
  #duel-wave-box { width: 48px; height: 48px; min-width: 48px; }
  #duel-wave-box .duel-wave-num .wave-now { font-size: 15px; }
  #duel-context-bar { margin-top: 8px; flex-wrap: nowrap; overflow: hidden; }
  .hc-kw span:nth-child(n+2) { display: none; }
  .hc-stats .s { font-size: 15px; }
  .hc-name { font-size: 11px; }
  #duel .rack-slot .hand-card { padding: 7px 9px; gap: 4px; }
  #skip-btn { min-height: 54px; }
  #duel-banner #duel-session-note { display: none; }
  #duel-deck-row { padding: 6px 16px 8px; }
  #duel .lane-slot.filled .board-chip { margin-bottom: 46px; }
  .chip-prism { height: 38px; } .chip-prism.chip-ice { height: 40px; } .chip-prism.chip-wall { height: 42px; } .chip-prism.chip-trap { height: 30px; }
}
@media (max-height: 700px) {
  #duel-box { --bt-ch: 112px; }
  #duel .rack-slot .hand-card { grid-template-rows: auto 0 auto auto minmax(0, 1fr); }
  .hc-art { display: none; }
  #duel-context-bar { display: none; }
}
@media (max-width: 1100px) {
  #duel-deck-row { grid-template-columns: 96px minmax(0, 1fr) 150px; }
  #duel-deck-row #duel-card-tip { display: none; }
  #duel-main { grid-template-columns: 84px minmax(0, 1fr) 84px; }
}
@media (max-width: 820px) {
  #duel-main { grid-template-columns: 52px minmax(0, 1fr) 52px; }
  #duel-main .duel-race { padding: 8px 4px; }
  .race-head { font-size: 9px; letter-spacing: .08em; }
  .race-tube { width: 16px; padding: 2px; }
  .race-val b { font-size: 18px; }
  .race-val .cap, .race-val .race-cap { display: none; }
  #duel-deck-row { grid-template-columns: minmax(0, 1fr) 120px; }
  #duel-threads-block { display: none; }
  #duel #duel-hand { grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; }
  #duel-banner { grid-template-columns: auto minmax(0, 1fr); }
  .duel-banner-notes { display: none; }
  #duel-hero.duel-tug { display: none; }
  #duel-defender, #duel-operator { font-size: 10px; }
  .dh-sigil { display: none; }
}
html[data-phone="land"] #duel-box { --bt-ch: 96px; --bt-lip: 26px; --bt-rest: 14px; --bt-pull: -30px; --bt-pad: 6px; --bt-slot-h: 62px; --duel-battle-h: 40px; }
html[data-phone="land"] #duel-context-bar, html[data-phone="land"] .hc-art, html[data-phone="land"] .hc-kw { display: none; }
html[data-phone="land"] #duel .rack-slot .hand-card { grid-template-rows: auto 0 auto auto minmax(0, 1fr); }
html[data-phone="land"] #duel .lane-slot.filled .board-chip { margin-bottom: 34px; }
html[data-phone="land"] .chip-prism { height: 28px; }
@media (prefers-reduced-motion: reduce) {
  #duel .rack-slot .hand-card, #duel-hero #hero-marker { transition: none; }
  .race-tube i.ghost, .rack-slot.armed .rl-led, .rack-cur { animation: none; }
}
/* Breach Table banner: the turn clock rides inline after the turn text. */
#duel-banner #duel-turn-owner .turn-clock { position: static; display: inline-block; margin-left: 10px; transform: none; vertical-align: 1px; }

/* Breach Table banner is one fixed-height line: forecast, resolve step and notes
   sit side by side and ellipsize, so a longer forecast (outcome, sources, doctrine)
   or a session note never grows the row and shoves the rack down. */
#duel-banner { height: 36px; min-height: 36px; max-height: 36px; padding-block: 0; overflow: hidden; }
#duel-banner > * { min-width: 0; }
#duel-banner #duel-forecast {
  flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: flex-start;
  gap: 12px; height: 36px; max-height: 36px; line-height: 36px; white-space: nowrap; overflow: hidden;
}
#duel-banner #duel-forecast > span { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#duel-banner #duel-forecast .forecast-wave { flex-wrap: nowrap; white-space: nowrap; }
#duel-banner #duel-forecast .forecast-sources { flex: 1 1 0; }
#duel-banner #duel-resolve-step { height: 36px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#duel-banner .duel-banner-notes { flex-wrap: nowrap; overflow: hidden; }
#duel-banner #duel-ram-lock, #duel-banner #duel-session-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 24px; }
#duel-banner #duel-session-note > div + div { display: none; }
@media (max-height: 860px) {
  #duel-banner { height: 32px; min-height: 32px; max-height: 32px; }
  #duel-banner #duel-forecast, #duel-banner #duel-resolve-step { height: 32px; max-height: 32px; line-height: 32px; }
}

/* ── TRAINING COACH (guest practice duel, attacker seat — duel-coach.js) ─────────── */
/* The objective is the one line a trainee must always see, on every screen size. */
#duel #duel-context-bar #duel-seat-goal.objective {
  display: block !important; flex: 1 1 auto;
  padding: 4px 8px; border: 1px solid rgba(55, 245, 163, 0.45); border-radius: 3px;
  background: rgba(55, 245, 163, 0.08); color: #bfffe2;
  font: 700 10px/1.2 "IBM Plex Mono", Consolas, monospace; letter-spacing: 0.06em;
}
#duel-coach {
  position: absolute; z-index: 60; width: min(320px, calc(100% - 16px));
  padding: 10px 12px 10px; border: 1px solid #37f5a3; border-radius: 4px;
  background: rgba(6, 14, 12, 0.96); color: #e7edf6;
  box-shadow: 0 0 0 1px rgba(55, 245, 163, 0.15), 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(55, 245, 163, 0.25);
  font: 12.5px/1.45 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  pointer-events: none; animation: dc-in 0.18s ease-out;
}
#duel-coach[hidden] { display: none; }
/* Spotlight: the rest of the duel dims while the coach speaks; holes are cut
   around what the step is about (clip-path evenodd, set by duel-coach.js). */
#duel-coach-shade { position: absolute; inset: 0; z-index: 55; pointer-events: none; background: rgba(2, 4, 9, .68); }
#duel-coach-shade[hidden] { display: none; }
#duel-coach.dc-nudge { animation: dc-nudge .45s ease-out; }
@keyframes dc-nudge { 20% { transform: translateX(-6px); box-shadow: 0 0 0 2px #37f5a3, 0 0 30px rgba(55, 245, 163, .7); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
#duel-coach .dc-tag {
  margin-bottom: 5px; color: #37f5a3;
  font: 700 9.5px/1 "IBM Plex Mono", Consolas, monospace; letter-spacing: 0.16em;
}
#duel-coach .dc-text p { margin: 0 0 5px; }
#duel-coach .dc-text p:last-child { margin-bottom: 0; }
#duel-coach .dc-net { margin-top: 7px !important; padding-top: 6px; border-top: 1px solid rgba(55, 245, 163, .25); color: #e7edf6; font-weight: 600; }
#duel-coach .dc-lead { color: #fff; font-weight: 600; font-size: 13.5px; }
#duel-coach .dc-more { color: #b9c3d4; font-size: 12.5px; }
#duel-coach .dc-row { color: #c9d2e0; font-size: 12.5px; padding-left: 8px; border-left: 2px solid #2e3548; }
#duel-coach[data-kind="act"] { border-color: #37d5f5; box-shadow: 0 0 0 1px rgba(55, 213, 245, .15), 0 10px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(55, 213, 245, .25); }
#duel-coach[data-kind="act"] .dc-tag { color: #37d5f5; }
#duel-coach[data-kind="act"]::after { border-color: #37d5f5; }
#duel-coach[data-kind="recap"] .dc-tag { color: #e7edf6; }
#duel-coach .t-breach { color: #37f5a3; font-weight: 700; }
#duel-coach .t-trace { color: #f5b13a; font-weight: 700; }
#duel-coach .t-energy { color: #37d5f5; font-weight: 700; }
#duel-coach .t-foe { color: #ff7aa0; font-weight: 600; }
#duel-coach .t-card { color: #fff; font-weight: 700; font-family: var(--duel-display); letter-spacing: .02em; }
#duel-coach .t-lane { color: #aab3c5; font: 700 11px 'IBM Plex Mono', Consolas, monospace; letter-spacing: .04em; }
#duel-coach .t-key {
  display: inline-block; padding: 0 6px; line-height: 17px; border: 1px solid currentColor; border-radius: 2px;
  color: #37f5a3; background: rgba(55, 245, 163, .1); font: 700 10px var(--duel-display); letter-spacing: .12em; white-space: nowrap; vertical-align: 1px;
}
#duel-coach .t-cost {
  display: inline-grid; place-items: center; width: 17px; height: 17px; vertical-align: -3px;
  background: #37d5f5; color: #041419; font: 700 10px var(--duel-display);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
#duel-coach .dc-ok {
  pointer-events: auto; display: block; margin: 8px 0 0 auto; padding: 5px 14px;
  border: 1px solid #37f5a3; border-radius: 3px; background: rgba(55, 245, 163, 0.14);
  color: #37f5a3; cursor: pointer; font: 700 10px/1 "IBM Plex Mono", Consolas, monospace; letter-spacing: 0.12em;
}
#duel-coach .dc-ok:hover, #duel-coach .dc-ok:focus-visible { background: #37f5a3; color: #041a10; outline: none; }
#duel-coach.dc-center { width: min(400px, calc(100% - 16px)); }
/* Arrow toward the anchor. */
#duel-coach::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  background: inherit; border: 1px solid #37f5a3; transform: rotate(45deg);
}
#duel-coach[data-side="above"]::after { bottom: -6px; left: calc(var(--dc-ax, 50%) - 5px); border-top: 0; border-left: 0; }
#duel-coach[data-side="below"]::after { top: -6px; left: calc(var(--dc-ax, 50%) - 5px); border-bottom: 0; border-right: 0; }
#duel-coach[data-side="right"]::after { left: -6px; top: calc(var(--dc-ay, 50%) - 5px); border-top: 0; border-right: 0; }
#duel-coach[data-side="left"]::after { right: -6px; top: calc(var(--dc-ay, 50%) - 5px); border-bottom: 0; border-left: 0; }
#duel-coach[data-side="none"]::after { display: none; }
@keyframes dc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Pulse ring on whatever the coach is talking about. */
#duel .coach-focus { outline: 2px solid #37f5a3; outline-offset: 3px; animation: dc-pulse 1.3s ease-in-out infinite; }
@keyframes dc-pulse {
  0%, 100% { outline-color: rgba(55, 245, 163, 0.95); box-shadow: 0 0 0 0 rgba(55, 245, 163, 0.35); }
  50% { outline-color: rgba(55, 245, 163, 0.35); box-shadow: 0 0 18px 4px rgba(55, 245, 163, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  #duel-coach, #duel .coach-focus { animation: none; }
}

/* ── SWITCHBOARD (duel-lanes.js canvas + duel.js paintPorts / boardChipHtml) ─────────
   The board is one tilted plane (#duel-board): firewall bar, guard sockets (ICE row),
   a gate shutter under each socket, the lane channel with its state chip (contact
   line), your bays, and the switch's port panel. Every lane is one straight column;
   duel-lanes.js draws the trench, fibre and packets on a canvas inside the plane. */
#duel-floor { display: none !important; }
#duel-arena { perspective: 1400px; perspective-origin: 50% 0%; }
#duel-board {
  order: 2; position: relative; z-index: 3; display: flex; flex-direction: column; flex: 0 0 auto;
  transform: rotateX(12deg); transform-origin: 50% 100%;
  margin: 0 10px; padding: 0 8px 10px;
  background:
    linear-gradient(rgba(55, 213, 245, .045) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(180deg, #0b0e17, #0a0d14);
  border: 1px solid #1c2130;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .02);
}
#duel-firewall { order: 0; }
#duel-board #enemy-zone { order: 2; }
#duel-board #battle-line { order: 3; }
#duel-board #player-zone { order: 4; }
#duel-board #lane-labels { order: 5; }
#duel.seat-def #duel-board #player-zone { order: 2; }
#duel.seat-def #duel-board #enemy-zone { order: 4; }
#duel.seat-def #duel-board #lane-labels { order: 1; margin: 0 0 10px; }
#duel-board .zone-grid::before { display: none; }
#duel-board .zone-grid, #duel-board .zone-grid.zone-mine, #duel-board .zone-grid.zone-foe { border-left: 0; }
/* Both rows at full size: the old far-row scale(.88) would pull the sockets off their lanes. */
#duel #duel-board #enemy-zone, #duel #duel-board #player-zone { transform: none !important; }
#duel-board #battle-line::before, #duel-board #battle-lasers { display: none; }
#lane-fx, #lane-fx-front { position: absolute; left: 0; top: 0; pointer-events: none; }
#lane-fx { z-index: 1; }
#lane-fx-front { z-index: 6; }

/* firewall bar */
#duel-firewall {
  position: relative; height: 30px; margin: 0 -8px 10px; display: grid; place-items: center; overflow: hidden;
  border-bottom: 2px solid #ff5c8a;
  background: linear-gradient(0deg, rgba(255, 92, 138, .22), rgba(255, 92, 138, .04));
  box-shadow: 0 6px 24px -6px rgba(255, 92, 138, .6);
}
#duel-firewall::before {
  content: '0x1F 0xA3 DENY 0x7C 0x00 DROP 0xFF 0x2E DENY 0x91 0x4B DROP 0x1F 0xA3 DENY 0x7C 0x00 DROP 0xFF 0x2E DENY 0x91 0x4B DROP 0x1F 0xA3 DENY 0x7C 0x00 DROP 0xFF 0x2E DENY 0x91 0x4B DROP';
  position: absolute; left: 0; top: 0; bottom: 0; white-space: nowrap;
  font: 400 10px/30px 'IBM Plex Mono', Consolas, monospace; color: rgba(255, 92, 138, .22);
  animation: fw-scroll 26s linear infinite;
}
@keyframes fw-scroll { to { transform: translateX(-50%); } }
#duel-firewall span {
  position: relative; font: 700 11px var(--duel-display); letter-spacing: .34em; color: #ff5c8a;
  background: #150a10; padding: 2px 10px; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}

/* guard sockets (ICE row) and your bays (program row): dashed boxes */
#duel-board .lane-slot {
  margin: 0 6px; border: 1px dashed rgba(120, 140, 180, .22); border-radius: 0;
  background: rgba(7, 9, 15, .5); justify-content: center;
}
#duel-board #player-zone .lane-slot { border-color: rgba(55, 245, 163, .18); background: rgba(7, 9, 15, .45); }
#duel-board #enemy-zone .lane-slot:hover { border-color: rgba(255, 92, 138, .6); }
#duel-board #player-zone .lane-slot.targetable-place {
  border-style: solid; border-color: #37f5a3; box-shadow: inset 0 0 24px rgba(55, 245, 163, .2);
  animation: bay-armed 1s ease-in-out infinite;
}
@keyframes bay-armed { 50% { box-shadow: inset 0 0 30px rgba(55, 245, 163, .34); } }
#duel-board .lane-slot .lane-pad {
  position: absolute; inset: 0; height: auto; display: grid; place-items: center;
  border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; animation: none !important;
}
#duel-board .lane-slot .lane-pad span { position: static; font: 600 10px 'IBM Plex Mono', Consolas, monospace; letter-spacing: .08em; color: #6f7a90; text-align: center; }
#duel-board #player-zone .lane-slot.targetable-place .lane-pad span { color: #37f5a3; }
#duel-board .lane-slot.filled .lane-pad { display: none; }

/* the gate: two shutter halves on the guard line, just under the socket */
#duel-board .gate { position: absolute; left: -4px; right: -4px; height: 14px; display: flex; overflow: hidden; pointer-events: none; z-index: 3; }
#duel:not(.seat-def) #duel-board #enemy-zone .gate { bottom: -22px; }
#duel.seat-def #duel-board #enemy-zone .gate { top: -22px; }
#duel-board .gate u {
  display: block; flex: 1 1 50%; text-decoration: none;
  background: repeating-linear-gradient(90deg, rgba(55, 213, 245, .5) 0 3px, transparent 3px 7px);
  border-top: 1px solid rgba(55, 213, 245, .5); opacity: .35;
  transition: transform .5s cubic-bezier(.3, 1.3, .4, 1), background .3s, opacity .3s, box-shadow .3s;
}
#duel-board .gate u:first-child { transform: translateX(-78%); }
#duel-board .gate u:last-child { transform: translateX(78%); }
#duel-board .lane-slot[data-port="open"] .gate u {
  background: repeating-linear-gradient(90deg, rgba(55, 245, 163, .85) 0 3px, transparent 3px 7px);
  border-top-color: #37f5a3; opacity: .75;
}
#duel-board .lane-slot[data-port="blocked"] .gate u, #duel-board .lane-slot[data-port="shut"] .gate u {
  transform: none; opacity: 1;
  background: repeating-linear-gradient(135deg, rgba(255, 92, 138, .95) 0 5px, #3a0816 5px 10px);
  border-top: 1px solid #ff5c8a; box-shadow: 0 0 14px rgba(255, 92, 138, .7);
}
#duel-board .lane-slot[data-port="blocked"] .gate { animation: gate-spark 1s steps(2) infinite; }
@keyframes gate-spark { 50% { filter: brightness(1.7); } }
#duel-board .gate.clash { animation: gate-clash .45s ease-out 2 !important; }
@keyframes gate-clash { 0% { filter: brightness(3.5); transform: translateY(-3px); } 60% { transform: translateY(2px); } 100% { filter: none; transform: none; } }

/* the lane channel: the contact line's cell becomes the lane-state chip */
#duel-board #contact-line { padding-top: 22px; }
#duel-board #contact-line .v {
  justify-self: center; width: auto; max-width: 94%; padding: 3px 8px; opacity: 1;
  border: 1px solid currentColor; border-radius: 0; background: rgba(7, 9, 15, .85);
  color: #6f7a90; font: 700 10px var(--duel-display); letter-spacing: .18em;
}
#duel-board #contact-line .v > span:first-child { font-size: inherit; }
#duel-board #contact-line .v::after { display: none; }
#duel-board #contact-line .v[data-port="open"], #duel-board #contact-line .v[data-port="armed"] { color: #37f5a3; box-shadow: 0 0 12px rgba(55, 245, 163, .3); }
#duel-board #contact-line .v[data-port="blocked"], #duel-board #contact-line .v[data-port="shut"] { color: #ff5c8a; }
#duel-board #contact-line .v .w { color: #f5b13a; }
#duel-board #contact-line .v.v-out { box-shadow: 0 0 14px -2px currentColor; }

/* the switch's front panel: one port per lane */
#duel-board #lane-labels { margin: 10px 0 0; gap: var(--duel-lane-gap); color: #aab3c5; font-size: inherit; letter-spacing: 0; }
#lane-labels > div {
  position: relative; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 4px;
  padding: 8px 4px 7px; background: linear-gradient(180deg, #161a26, #0f121b); border: 1px solid #2e3548;
  text-decoration: none !important;
}
#lane-labels .jack {
  position: relative; width: 40px; height: 26px; background: #04050a; border: 1px solid #3a4258;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 76% 72%, 76% 100%, 24% 100%, 24% 72%, 0 72%);
}
#lane-labels .jack .pins { position: absolute; left: 6px; right: 6px; top: 4px; height: 5px;
  background: repeating-linear-gradient(90deg, #b58a2c 0 2px, transparent 2px 4px); opacity: .7; }
#lane-labels .jack .boot { position: absolute; inset: 6px 5px 0; background: linear-gradient(180deg, #37f5a3, #0c6b47);
  opacity: 0; transform: translateY(20px); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; }
#lane-labels .plugged .jack .boot { opacity: .9; transform: none; }
#lane-labels .leds { position: absolute; top: 9px; left: 8px; right: 8px; display: flex; justify-content: space-between; pointer-events: none; }
#lane-labels .leds i { width: 8px; height: 5px; background: #232838; }
#lane-labels .plugged .leds i:first-child { background: #37f5a3; box-shadow: 0 0 6px #37f5a3; }
#lane-labels .plugged[data-act="open"] .leds i:last-child { background: #37f5a3; animation: pt-act .28s steps(2) infinite; }
#lane-labels .plugged[data-act="blocked"] .leds i:last-child, #lane-labels [data-act="shut"] .leds i:last-child { background: #ff5c8a; box-shadow: 0 0 6px #ff5c8a; }
#lane-labels .watched .leds i:last-child { background: #f5b13a !important; animation: pt-act .6s steps(2) infinite; }
#lane-labels .negotiating .leds i:first-child { background: #f5b13a !important; animation: pt-act .16s steps(2) infinite; }
#lane-labels [data-act="armed"] .jack { border-color: #37f5a3; box-shadow: 0 0 8px rgba(55, 245, 163, .6); }
#lane-labels .lane-firing { border-color: #37d5f5; box-shadow: 0 0 14px rgba(55, 213, 245, .4); }
@keyframes pt-act { 50% { opacity: .15; } }
#lane-labels .pn { font: 700 11px var(--duel-display); letter-spacing: .2em; color: #aab3c5; }
#lane-labels .ps { font: 600 9.5px 'IBM Plex Mono', Consolas, monospace; letter-spacing: .04em; color: #6f7a90; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#lane-labels [data-act="open"] .ps, #lane-labels [data-act="armed"] .ps { color: #37f5a3; }
#lane-labels [data-act="blocked"] .ps, #lane-labels [data-act="shut"] .ps { color: #ff5c8a; }
#lane-labels .watched .ps { color: #f5b13a; }

/* shorter windows: slimmer firewall, one-row ports */
@media (max-height: 860px) {
  #duel-arena { padding-top: 30px; }
  #duel-firewall { height: 22px; margin-bottom: 8px; }
  #duel-firewall::before { line-height: 22px; }
  #duel-firewall span { font-size: 9.5px; padding: 1px 8px; }
  #duel-board #lane-labels { margin-top: 6px; }
  #lane-labels > div { grid-template-columns: auto minmax(0, 1fr); justify-items: start; column-gap: 8px; row-gap: 0; padding: 4px 22px 4px 8px; }
  #lane-labels .jack { grid-row: span 2; width: 30px; height: 19px; }
  #lane-labels .leds { top: 50%; left: auto; right: 6px; width: 8px; flex-direction: column; gap: 3px; transform: translateY(-50%); }
  #lane-labels .pn { font-size: 10px; }
  #lane-labels .ps { font-size: 8.5px; }
}
@media (max-width: 820px) {
  #lane-labels .ps { display: none; }
  #lane-labels .pn { letter-spacing: .06em; }
  #duel-board #contact-line .v { font-size: 8px; letter-spacing: .06em; padding: 2px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #duel-firewall::before, #duel-board .gate, #lane-labels .leds i, #duel-board .lane-slot.targetable-place { animation: none !important; }
}

/* board unit = the card as a 3D slab (Safehouse face — name, THR, ⚔/♥, one line — on a
   body with real thickness, a lit seam, idle float, pointer tilt and a sheen) */
#duel .board-chip.chip-instant { --pc: 184, 120, 255; }
#duel .lane-slot.filled .board-chip.ssd {
  --d: 12px; --lean: 12deg;
  width: min(134px, 94%); min-width: 0; height: calc(var(--bt-slot-h) - 14px);
  margin: 4px auto 0; padding: 0; overflow: visible; border: 0; border-radius: 0;
  background: none; box-shadow: none; perspective: 520px; cursor: help;
  color: rgb(var(--pc)); border-top-color: rgb(var(--pc)); /* death shards read this colour */
}
#duel .board-chip.ssd .ssd-float { position: absolute; inset: 0; transform-style: preserve-3d; animation: ssd-idle 3.6s ease-in-out infinite; }
#duel #enemy-zone .board-chip.ssd .ssd-float { animation-delay: -1.8s; }
@keyframes ssd-idle { 50% { transform: translateY(-3px); } }
#duel .board-chip.ssd .ssd-body {
  position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: rotateX(calc(var(--lean) + var(--rx, 0deg))) rotateY(var(--ry, 0deg));
  transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
#duel .ssd-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Same face as a Safehouse deck card: one continuous teal panel, a LEFT accent
   stripe by card type, the clipped top-right corner. */
#duel .ssd-front {
  transform: translateZ(calc(var(--d) / 2)); display: flex; flex-direction: column; justify-content: center; gap: 4px;
  overflow: hidden; padding: 7px 9px 8px;
  border: 1px solid #144452; border-left: 3px solid rgb(var(--pc));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #0a2836, #04121a);
  box-shadow: 0 0 16px -4px rgba(var(--pc), .5);
}
#duel .chip-trap .ssd-front { border: 1px solid #ffd23f; border-left-width: 3px; }
#duel .ssd-front::after {              /* holographic sheen */
  content: ''; position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .14) 46%, rgba(var(--pc), .22) 50%, rgba(55, 213, 245, .1) 54%, transparent 62%);
  animation: ssd-sheen 4.5s ease-in-out infinite;
}
@keyframes ssd-sheen { 0%, 100% { transform: translateX(-35%); } 50% { transform: translateX(35%); } }
#duel .ssd-back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: linear-gradient(160deg, #0a2836, #04121a); border: 1px solid #144452;
}
#duel .ssd-edge { position: absolute; display: block; box-shadow: 0 0 8px rgba(var(--pc), .3); }
#duel .ssd-edge::after { content: ''; position: absolute; inset: 0; margin: auto; background: rgb(var(--pc)); box-shadow: 0 0 8px rgb(var(--pc)); }
#duel .ssd-edge.t, #duel .ssd-edge.b { left: 0; width: 100%; height: var(--d); background: linear-gradient(180deg, #164456, #07202c 55%, #0f3342); }
#duel .ssd-edge.t { top: calc(var(--d) / -2); transform: rotateX(90deg); }
#duel .ssd-edge.b { bottom: calc(var(--d) / -2); transform: rotateX(-90deg); }
#duel .ssd-edge.l, #duel .ssd-edge.r { top: 0; height: 100%; width: var(--d); background: linear-gradient(90deg, #143e4f, #061a24 55%, #0e2f3d); }
#duel .ssd-edge.l { left: calc(var(--d) / -2); transform: rotateY(-90deg); }
#duel .ssd-edge.r { right: calc(var(--d) / -2); transform: rotateY(90deg); }
#duel .ssd-edge.t::after, #duel .ssd-edge.b::after { height: 2px; left: 6%; right: 6%; }
#duel .ssd-edge.l::after, #duel .ssd-edge.r::after { width: 2px; top: 8%; bottom: 8%; }
#duel .board-chip.ssd .ssd-shadow {
  position: absolute; left: -10%; right: -10%; bottom: -9px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--pc), .5), rgba(var(--pc), .1) 60%, transparent);
  animation: ssd-shadow 3.6s ease-in-out infinite;
}
@keyframes ssd-shadow { 50% { transform: scale(.9); opacity: .7; } }

/* face text — Safehouse type: Chakra Petch name, amber THR chip, pink ⚔ / cyan ♥, pale one-liner */
#duel .bc-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
#duel .board-chip.ssd .chip-head {
  padding: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  font: 700 11.5px/1.1 'Chakra Petch', var(--duel-display); letter-spacing: .03em; color: #dff0f5;
}
#duel .bc-thr {
  flex: 0 0 auto; padding: 1px 5px; background: #ffb01f; color: #04121a;
  font: 700 9px/1.3 'IBM Plex Mono', Consolas, monospace; letter-spacing: .1em; white-space: nowrap;
}
#duel .chip-trap .bc-thr { background: #1a1508; color: #ffd23f; border: 1px solid #ffd23f; }
#duel .board-chip.ssd .chip-stats {
  padding: 0; gap: 8px; justify-content: flex-start; align-items: baseline;
  font: 700 10.5px/1 'IBM Plex Mono', Consolas, monospace; letter-spacing: .04em; color: #45fff0;
}
#duel .board-chip.ssd .chip-stats span:first-child { color: #ff8fa8; }
#duel .ssd-say {
  font: 400 9px/1.4 'IBM Plex Sans', 'Segoe UI', sans-serif; color: rgba(168, 198, 207, .75);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* damage / shield on the drive */
/* Damaged (below max HP): the ♥ value turns hot and the face picks up a red edge glow.
   (Earlier two white diagonal "crack" lines read as a big X — as if the card was void.) */
#duel .board-chip.ssd.shield-cracked .ssd-front { box-shadow: inset 0 0 14px rgba(255, 92, 92, .35), 0 0 16px -4px rgba(var(--pc), .5); }
#duel .board-chip.ssd.shield-cracked .chip-stats span:last-child { color: #ff8a5c; text-shadow: 0 0 6px rgba(255, 90, 60, .6); }
#duel .board-chip.ssd.shielded { animation: none; }
#duel .board-chip.ssd.shielded .ssd-front { border-color: #ffd23f; box-shadow: 0 0 16px rgba(255, 210, 63, .6), inset 0 0 14px rgba(255, 210, 63, .2); }
#duel .lane-slot.deploy-flash .board-chip.ssd .ssd-float { animation: ssd-drop .7s cubic-bezier(.25, 1.35, .45, 1); }
@keyframes ssd-drop {
  0% { transform: translateY(-60px) rotateX(-50deg) rotateZ(8deg); opacity: 0; filter: brightness(3); }
  60% { opacity: 1; }
  100% { transform: none; filter: none; }
}

/* shorter windows: one line for the summary, then none */
@media (max-height: 860px) {
  #duel .lane-slot.filled .board-chip.ssd { --d: 10px; }
  #duel .ssd-front { padding: 5px 8px 6px; gap: 3px; }
  #duel .ssd-say { -webkit-line-clamp: 1; }
}
html[data-phone="land"] #duel .lane-slot.filled .board-chip.ssd { --d: 7px; width: min(96px, 94%); }
html[data-phone="land"] #duel .ssd-say { display: none; }
html[data-phone="land"] #duel .bc-thr { font-size: 7.5px; padding: 0 3px; }
@media (max-width: 820px) {
  #lane-labels .ps { display: none; }
  #duel .ssd-say { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #duel .board-chip.ssd .ssd-float, #duel .ssd-front::after,
  #duel .board-chip.ssd .ssd-shadow, #lane-labels .pj i { animation: none !important; }
}