/* Neon Arena — nardy (backgammon) view: 24 triangular points in four
   quadrants over a dark-wood board with neon edging, center bar strip,
   bear-off trays on the right, dice slot with pip cubes + dice_left chips,
   pending-series row, picker highlights with die-cost labels, bar-forced
   pill, mars banner. Loaded after game.css/checkers.css; reuses
   .fighter/.board-frame/.board-countdown/.rematch-splash primitives. */

/* The match is one screenful. `.view-game` (game.css) is the frame — a
   `minmax(0,1fr) 340px` grid whose height is the SCENE's, written by
   `fitMatchColumn()` into `--match-h`, with the opponent bar pinned to the top
   of the board column, the board taking what is left and the player's own bar
   and the action row at the bottom. This file used to override that with a
   `display:flex` root and an inner `.nd-main` at `align-items:start`, which
   is how the column came out 697px tall inside a 660px scene at 1280×800 —
   the player's own clock clipped by the fold and the buttons below it. */

.view-nd { overflow: visible; }

/* === stage === */
.nd-stage {
  position: relative;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
/* Sized by whichever axis runs out first: `--board-cap` is the free HEIGHT
   `fitMatchColumn()` measured, and 13/9 turns it into a width. 720 stays as
   the ceiling on a wide column. */
.nd-board-wrap {
  container-type: inline-size;
  container-name: ndboard;
  position: relative;
  width: min(100%, calc(var(--board-cap, 60vh) * 13 / 9), 720px);
  margin: 0 auto;
  aspect-ratio: 13 / 9;
}

/* === board frame: dark wood + neon edge === */
.nd-board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 46px;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-radius: 14px;
  padding: 8px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(96, 62, 34, 0.34), rgba(0, 0, 0, 0) 55%),
    linear-gradient(160deg, #241a12 0%, #1a130d 48%, #120d09 100%);
  border: 1px solid rgba(241, 193, 82, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 34px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(241, 193, 82, 0.1);
  user-select: none;
  -webkit-user-select: none;
}
.nd-quad {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 0;
  min-width: 0;
}

/* === points === */
.nd-point {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  line-height: 1;
}
.nd-tri {
  position: absolute;
  inset: 2px 1px;
  opacity: 0.92;
  transition: filter var(--dur-fast), opacity var(--dur-fast);
}
.nd-top .nd-tri { clip-path: polygon(1% 0, 99% 0, 50% 97%); }
.nd-bottom .nd-tri { clip-path: polygon(50% 3%, 99% 100%, 1% 100%); }
.nd-tri-a .nd-tri {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(88, 60, 160, 0.34));
  box-shadow: inset 0 0 12px rgba(167, 139, 250, 0.16);
}
.nd-tri-b .nd-tri {
  background: linear-gradient(180deg, rgba(124, 201, 255, 0.34), rgba(38, 84, 120, 0.26));
  box-shadow: inset 0 0 12px rgba(124, 201, 255, 0.12);
}
.nd-bottom.nd-tri-a .nd-tri {
  background: linear-gradient(0deg, rgba(167, 139, 250, 0.5), rgba(88, 60, 160, 0.34));
}
.nd-bottom.nd-tri-b .nd-tri {
  background: linear-gradient(0deg, rgba(124, 201, 255, 0.34), rgba(38, 84, 120, 0.26));
}
.nd-pt-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(233, 239, 247, 0.34);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.nd-top .nd-pt-label { bottom: 2px; }
.nd-bottom .nd-pt-label { top: 2px; }

/* === stacks === */
.nd-stack {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  gap: 2px;
  padding: 2px 1px;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
}
.nd-top .nd-stack { flex-direction: column; justify-content: flex-start; }
.nd-bottom .nd-stack { flex-direction: column-reverse; justify-content: flex-start; }

/* === pieces: ivory vs anthracite-neon === */
.nd-piece {
  position: relative;
  width: 88%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 50%;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), opacity 200ms ease;
}
.nd-piece::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}
.nd-piece-w {
  background: radial-gradient(circle at 34% 28%, #fffdf4, #efe6cf 52%, #c9bc9c 88%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), 0 0 10px rgba(241, 193, 82, 0.2);
}
.nd-piece-w::before { border-color: rgba(180, 150, 80, 0.45); }
.nd-piece-b {
  background: radial-gradient(circle at 34% 28%, #525b72, #232936 55%, #0e1119 92%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6), 0 0 11px rgba(167, 139, 250, 0.3);
}
.nd-piece-b::before { border-color: rgba(167, 139, 250, 0.45); }
.nd-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8px, 2.6cqi, 13px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

/* === bar strip === */
.nd-bar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 1px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(10, 7, 5, 0.85), rgba(24, 16, 10, 0.85));
  border-left: 1px solid rgba(241, 193, 82, 0.14);
  border-right: 1px solid rgba(241, 193, 82, 0.14);
  overflow: hidden;
}
.nd-bar-line {
  height: 3px;
  flex: 0 0 auto;
  background: var(--gold-grad);
  opacity: 0.55;
  box-shadow: 0 0 8px rgba(241, 193, 82, 0.5);
}
.nd-bar-half {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 0;
  background: none;
  line-height: 1;
}
.nd-bar-stack {
  padding: 3px 1px;
  gap: 2px;
}
.nd-bar-top .nd-bar-stack { flex-direction: column; justify-content: flex-start; }
.nd-bar-bottom .nd-bar-stack { flex-direction: column-reverse; justify-content: flex-start; }
.nd-bar-half.nd-can-move { cursor: pointer; }
.nd-bar-half.nd-can-move .nd-piece:last-child {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), 0 0 12px rgba(124, 201, 255, 0.55);
}
.nd-bar-half.nd-bar-hot {
  background: radial-gradient(80% 60% at 50% 50%, rgba(255, 93, 108, 0.16), rgba(0, 0, 0, 0) 70%);
  animation: ndBarHot 1.4s ease-in-out infinite;
}
@keyframes ndBarHot {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 93, 108, 0.3); }
  50% { box-shadow: inset 0 0 0 2px rgba(255, 93, 108, 0.7), inset 0 0 18px rgba(255, 93, 108, 0.35); }
}

/* === bear-off trays === */
.nd-off {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.nd-off-tray {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(9, 12, 17, 0.72), rgba(16, 22, 30, 0.72));
  border: 1px dashed rgba(233, 239, 247, 0.14);
  line-height: 1;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.nd-off-stack {
  padding: 4px 2px;
  gap: 2px;
}
.nd-off-top .nd-off-stack { flex-direction: column; justify-content: flex-start; }
.nd-off-bottom .nd-off-stack { flex-direction: column-reverse; justify-content: flex-start; }
.nd-off-stack .nd-piece {
  width: 76%;
  aspect-ratio: 2.6 / 1; /* borne-off checkers lie flat */
  border-radius: 40%;
}
.nd-off-count {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(241, 193, 82, 0.55);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.nd-off-top .nd-off-count { bottom: auto; top: 3px; }
.nd-off-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  z-index: 2;
  text-align: center;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(233, 239, 247, 0.3);
  pointer-events: none;
}
.nd-off-top .nd-off-tag { bottom: auto; top: 3px; }
.nd-off-tray.nd-hint {
  cursor: pointer;
  border-style: solid;
  border-color: rgba(241, 193, 82, 0.75);
  box-shadow: 0 0 16px rgba(241, 193, 82, 0.35), inset 0 0 14px rgba(241, 193, 82, 0.18);
  animation: ndHintBob 1.1s ease-in-out infinite;
}
.nd-off-tray.nd-last-to {
  border-style: solid;
  border-color: rgba(241, 193, 82, 0.55);
}

/* === picker highlights === */
.nd-point.nd-can-move { cursor: pointer; }
.nd-point.nd-can-move .nd-stack .nd-piece:last-child {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), 0 0 12px rgba(124, 201, 255, 0.55);
}
@media (hover: hover) {
  .nd-point.nd-can-move:hover .nd-stack .nd-piece:last-child { transform: scale(1.07); }
}
.nd-point.nd-sel .nd-stack .nd-piece:last-child,
.nd-bar-half.nd-sel .nd-stack .nd-piece:last-child {
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2.5px rgba(241, 193, 82, 0.85), 0 0 18px rgba(241, 193, 82, 0.55);
  animation: ndSelPulse 1.3s ease-in-out infinite;
}
@keyframes ndSelPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2.5px rgba(241, 193, 82, 0.85), 0 0 12px rgba(241, 193, 82, 0.4); }
  50% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2.5px rgba(241, 193, 82, 1), 0 0 24px rgba(241, 193, 82, 0.7); }
}
.nd-point.nd-hint { cursor: pointer; }
.nd-point.nd-hint .nd-tri {
  filter: brightness(1.7) saturate(1.2);
  opacity: 1;
  animation: ndHintBob 1.1s ease-in-out infinite;
}
@keyframes ndHintBob {
  0%, 100% { filter: brightness(1.45); }
  50% { filter: brightness(2); }
}
.nd-cost {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  background: rgba(20, 16, 8, 0.85);
  border: 1px solid rgba(241, 193, 82, 0.6);
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nd-top .nd-cost { bottom: 12px; }
.nd-bottom .nd-cost { top: 12px; }
.nd-off-tray .nd-cost { top: 50%; transform: translate(-50%, -50%); }

/* last step tint */
.nd-point.nd-last-from .nd-tri { filter: brightness(1.25); }
.nd-point.nd-last-to .nd-tri { filter: brightness(1.6) saturate(1.3); }
.nd-point.nd-last-to::after {
  content: "";
  position: absolute;
  inset: 2px 1px;
  z-index: 1;
  clip-path: inherit;
  pointer-events: none;
}

/* === ghost overlay (step animation) === */
.nd-ghost-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.nd-piece.nd-ghost {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  width: auto;
  margin: 0;
  transition: transform 200ms ease-in-out;
  will-change: transform;
}

/* === bar-forced pill === */
.nd-bar-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 93, 108, 0.6);
  background: rgba(20, 10, 14, 0.88);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 93, 108, 0.6);
  box-shadow: var(--shadow-glow-danger);
  animation: ndBarPill 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ndBarPill {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 93, 108, 0.25); }
  50% { box-shadow: 0 0 24px rgba(255, 93, 108, 0.55); }
}

/* === mars banner === */
.nd-mars {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(60% 46% at 50% 50%, rgba(10, 8, 4, 0.72), rgba(0, 0, 0, 0) 75%);
}
.nd-mars-text {
  font-family: var(--font-display);
  font-size: clamp(28px, 12cqi, 74px);
  font-weight: 800;
  letter-spacing: 4px;
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(241, 193, 82, 0.5));
  animation: ndMarsPop 0.7s var(--spring) both;
}
@keyframes ndMarsPop {
  0% { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* === dice row === */
.nd-dice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin: 2px auto 0;
  min-height: 48px;
}
.nd-dice-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nd-dice-faces {
  display: flex;
  gap: 8px;
}
.nd-die {
  width: 42px;
  height: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 6px;
  border-radius: 9px;
  background: linear-gradient(145deg, #f8f2e2, #d9cfae);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(241, 193, 82, 0.22),
    inset 0 -2px 5px rgba(120, 100, 60, 0.35);
}
.nd-die i {
  border-radius: 50%;
  margin: 12%;
  background: transparent;
}
.nd-die i.on {
  background: radial-gradient(circle at 35% 30%, #3a4356, #141a26 75%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.nd-die-empty {
  background: rgba(233, 239, 247, 0.07);
  box-shadow: none;
  border: 1px dashed rgba(233, 239, 247, 0.16);
}
.nd-die.nd-shake { animation: ndDiceShake 0.55s var(--spring) both; }
.nd-die:nth-child(2).nd-shake { animation-delay: 70ms; }
@keyframes ndDiceShake {
  0% { transform: translate(0, 0) rotate(0deg); }
  18% { transform: translate(-4px, -7px) rotate(-28deg); }
  36% { transform: translate(5px, 2px) rotate(19deg); }
  54% { transform: translate(-3px, 4px) rotate(-13deg); }
  72% { transform: translate(3px, -3px) rotate(9deg); }
  88% { transform: translate(-1px, 1px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.nd-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.nd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(241, 193, 82, 0.12);
  border: 1px solid rgba(241, 193, 82, 0.45);
  box-shadow: 0 0 8px rgba(241, 193, 82, 0.18);
  font-variant-numeric: tabular-nums;
}
.nd-chip.spent {
  opacity: 0.28;
  box-shadow: none;
  text-decoration: line-through;
}
.nd-roll-btn { min-width: 132px; box-shadow: var(--shadow-glow-gold); }
.nd-pass-btn { min-width: 132px; }

/* === pending series row === */
.nd-pending-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
  margin: 2px auto 0;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
}
.nd-pending-steps {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
.nd-step-chip {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(124, 201, 255, 0.1);
  border: 1px solid rgba(124, 201, 255, 0.35);
  color: var(--cool);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nd-done-btn { box-shadow: var(--shadow-glow-ok); }
.nd-done-btn.pulse { animation: ndDonePulse 1.3s ease-in-out infinite; }
@keyframes ndDonePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(53, 199, 131, 0.25); }
  50% { box-shadow: 0 0 26px rgba(53, 199, 131, 0.6); }
}

/* === fighter card material pips === */
/* Two text chips, not a strip of cap icons — so no wrapping (game.css bans it:
   the ★ bar chip appearing mid-game grew the card a row and shifted the
   board) and no clipping either: ⏏ is the only place the bear-off race is
   scored, so like arcomage's tower/wall the counters keep their width and
   the ellipsizing name gives way. */
.nd-material { gap: 6px; }
.view-nd .fighter-mid { flex: 0 0 auto; }
.nd-offcount {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nd-offcount-w { color: #efe6cf; }
.nd-offcount-b { color: var(--violet); }

/* === pip row ===
   Derived entirely on the client from points/bar (see pipCount in
   views/nardy.js) and parked under the dice, where the move is chosen. */
.nd-pips-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.3;
}
.nd-pips-label {
  color: var(--text-faint);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.nd-pips-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nd-barcount { color: var(--danger); text-shadow: 0 0 8px rgba(255, 93, 108, 0.45); }

/* === moves log === */
.nd-moves { max-height: 300px; }
.nd-move-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
}
.nd-move-row:nth-child(odd) { background: var(--panel-soft); }
.nd-move-ico { font-size: 12px; width: 16px; text-align: center; flex: 0 0 auto; }
.nd-move-path { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.4px; }
.nd-move-who {
  font-weight: 600;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* === responsive ===
   Was `@media (max-width: 520/390)` — window questions; the empty `@container`
   stub above was the abandoned half of this conversion. The rail and the
   context column are subtracted from the window before the scene gets anything
   (shell.css «WINDOW CLASSES»), so an authed player at an 800-1279px window
   got the desktop board inside a 486-527px scene and these rules never fired.
   The numbers stay; the box changes — below an 800px window scene == window,
   so every phone measures byte-identical before and after. durak.css and
   game.css carry the same conversion with the full argument. */
@container scene (max-width: 520px) {
  .nd-stage { padding: 8px; }
  .nd-board { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 38px; padding: 6px; border-radius: 11px; }
  .nd-die { width: 36px; height: 36px; padding: 5px; border-radius: 8px; }
  .nd-chip { width: 21px; height: 21px; font-size: 11px; }
  .nd-roll-btn, .nd-pass-btn { min-width: 0; flex: 0 0 auto; }
  .nd-off-tag { display: none; }
  .nd-pt-label { font-size: 7.5px; }
  .nd-cost { font-size: 8.5px; padding: 1px 4px; }
  .nd-pending-row { gap: 5px; padding: 6px 7px; }
}
@container scene (max-width: 390px) {
  .nd-board { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 32px; padding: 5px; }
  .nd-stack { gap: 1.5px; padding: 1.5px 0; }
  .nd-die { width: 32px; height: 32px; padding: 4px; }
  .nd-dice-row { min-height: 40px; gap: 7px; }
  .nd-pips-row { font-size: 11px; gap: 8px; }
  .nd-pt-label { font-size: 7px; }
  .nd-bar-pill { font-size: 11px; padding: 5px 10px; }
}

/* Why the ~21px point columns at 360px are ACCEPTED, not a defect: the tap
   target is the whole `.nd-point` button — ~21×100+px, over 2100px² against
   the 44×44 guideline's 1936 — because `.nd-stack` and the labels are
   pointer-events:none. A stray tap costs nothing (onPointClick commits only
   through the two-tap select→target flow, with a local undo before the roll
   is sent), and widening a point's hit area sideways would overlap the
   NEIGHBOURING candidate point — strictly worse than the tall-narrow truth. */

/* === phone landscape ===
   Sideways on a match route the shell leaves a wide, ~330px-tall scene
   (shell.css `.is-game`); the two fighter bars and the actions row held the
   13:9 board near the 160px floor. They go — back on rotation — and
   `min(100%, cap×13/9, 720px)` above turns the freed height straight into
   board width; the dice row stays, at its own 44px floor via base.css. */
@media (orientation: landscape) and (max-height: 500px) {
  .view-nd .g-board-col > .fighter-slot { display: none; }
  .view-nd .g-board-col > .g-actions-row { display: none; }
  .view-nd .nd-pips-row { display: none; }
  .view-nd .nd-die { width: 34px; height: 34px; padding: 4px; }
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .nd-piece.nd-ghost { transition: none; }
  .nd-die.nd-shake,
  .nd-mars-text,
  .nd-bar-half.nd-bar-hot,
  .nd-bar-pill,
  .nd-point.nd-sel .nd-stack .nd-piece:last-child,
  .nd-bar-half.nd-sel .nd-stack .nd-piece:last-child,
  .nd-point.nd-hint .nd-tri,
  .nd-off-tray.nd-hint,
  .nd-done-btn.pulse { animation: none; }
}