/* Back Rank Mates: an analysis console. The board is the screen; the rail is a control panel of
   boxed readouts, lit lamps and square push-keys. Colours and fonts come from kit.css only. */

:root {
  --pad: 2px;
  --gap: 8px;
  --plate-h: 30px;
  --rail-min: 288px;
  --status: var(--ac-status-h, 64px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The board: as wide as the phone allows, never less than 8 squares of 44px plus the bezel when
     the width has room, and short enough that the rail still fits under it. */
  --bd-w: calc(100dvw - 2 * var(--pad) - var(--safe-l) - var(--safe-r));
  --bd-h: calc(100dvh - var(--status) - var(--plate-h) - var(--rail-min) - 3 * var(--gap) - var(--safe-b));
  --bd: max(min(var(--bd-w), 356px), min(var(--bd-w), var(--bd-h), 600px));
  --rail-w: var(--bd);
  --steel-hi: #C9CCD3;
  --steel-lo: #5A5D66;
  --well: #0A0A0C;
  --smoke: rgba(24, 25, 30, 0.55);
  --key-travel: 3px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

.engraved {
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ak-ink-muted);
  text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(232, 232, 234, 0.08);
}

/* ---------- the play screen grid ---------- */

.play {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-areas: "plate" "board" "rail";
  grid-template-rows: var(--plate-h) var(--bd) minmax(0, 1fr);
  grid-template-columns: var(--bd);
  justify-content: center;
  row-gap: var(--gap);
  padding:
    calc(var(--status) + 4px)
    calc(var(--pad) + var(--safe-r))
    calc(var(--pad) + var(--safe-b))
    calc(var(--pad) + var(--safe-l));
  touch-action: manipulation;
}

.plate {
  grid-area: plate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.logo {
  display: block;
  height: 24px;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  object-position: left center;
}

/* The position clock: a boxed readout, this attempt's time and the best clean time here. */
.clock {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--ak-outline);
  border-top-color: #000;
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  white-space: nowrap;
}
.clock b { font-weight: 600; color: var(--ak-ink); }
.clock .engraved { font-size: 10px; }

.sides {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.thinking {
  color: var(--ak-ink);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ---------- lamps (side to move, the 22 positions, the Mark key) ---------- */

.lamp {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #232328;
  box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3A3A42;
  flex: none;
}

.side.is-on .lamp,
.lamp.is-shown { background: var(--ak-accent-2); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.45), 0 0 0 1px #000; }
.side.is-on .engraved { color: var(--ak-ink); }
.lamp.is-solved { background: var(--ak-accent); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px #000; }
/* Solved with help: an ember ring around a dark centre, so it reads apart from a clean solve by shape too. */
.lamp.is-ring { background: #232328; box-shadow: inset 0 0 0 2px var(--ak-accent), 0 0 0 1px #000; }

/* ---------- the board ---------- */

.board-col {
  grid-area: board;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.bezel {
  position: relative;
  width: var(--bd);
  height: var(--bd);
  padding: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  box-shadow: 0 0 0 1px #000;
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
  /* The painted board's 8 by 8 field fills the box; its own bezel is cropped away. */
  background-color: #1C1C20;
  background-image: url("./art/board.png");
  background-size: calc(100% * 384 / 355) calc(100% * 384 / 354);
  background-position: 51.72% 53.33%;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  outline: none;
  cursor: pointer;
}

.cell > * { position: absolute; pointer-events: none; }

.cell .last { inset: 0; background: var(--smoke); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); }

.cell .flight {
  inset: 0;
  background: url("./art/flight-marker.png") center / 100% 100% no-repeat;
}

.cell .dot {
  left: 50%;
  top: 50%;
  width: 24%;
  height: 24%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ak-accent-2);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(10, 10, 12, 0.85);
  z-index: 3;
}

.cell .dot.on-piece {
  inset: 4%;
  width: auto;
  height: auto;
  translate: none;
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 3px var(--ak-accent-2), 0 0 0 2px rgba(10, 10, 12, 0.85);
}

.cell .mark {
  inset: 10%;
  border-radius: 50%;
  border: 3px solid var(--ak-accent);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
  z-index: 4;
}

.cell .pick { inset: 0; box-shadow: inset 0 0 0 3px var(--ak-ink), inset 0 0 0 5px #000; z-index: 1; }

.refute-arrow {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}
.refute-arrow line { stroke-linecap: round; }
.refute-arrow .refute-under { stroke: #000; stroke-width: 0.2; }
.refute-arrow .refute-line { stroke: var(--ak-ink); stroke-width: 0.1; stroke-dasharray: 0.22 0.14; }
.refute-arrow marker path { fill: var(--ak-ink); stroke: #000; stroke-width: 1; }

.cell .resource { inset: 6%; border: 3px dashed var(--ak-ink); box-shadow: 0 0 0 1px #000; z-index: 4; }

.cell .flash { inset: 0; box-shadow: inset 0 0 0 3px var(--ak-accent-2); z-index: 1; }

.cell .piece {
  inset: 0;
  z-index: 2;
}

.piece > svg { display: block; width: 100%; height: 100%; }
.piece svg svg, .drag-ghost svg svg, .promote-keys svg svg { overflow: hidden; }

.cell.is-lifted .piece { opacity: 0.35; }

.cell .coord {
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  z-index: 5;
}
.cell .coord.rank { top: 3px; left: 3px; }
.cell .coord.file { bottom: 3px; right: 3px; }
.cell.light .coord { color: #1A1A1E; }
.cell.dark .coord { color: #A6A9B2; }

.cell:focus-visible { box-shadow: inset 0 0 0 3px var(--ak-focus); z-index: 6; }

.cell .guide {
  inset: -6%;
  border-radius: 50%;
  border: 4px solid var(--ak-ink);
  box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #000;
  z-index: 7;
}

.guide-arrow {
  position: absolute;
  width: calc((var(--bd) - 4px) / 8);
  height: calc((var(--bd) - 4px) / 8);
  pointer-events: none;
  z-index: 8;
}
.guide-arrow path {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 9;
  stroke-linecap: square;
  paint-order: stroke;
  filter: drop-shadow(0 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

.drag-ghost {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  translate: -50% -50%;
}
.drag-ghost svg { width: 100%; height: 100%; display: block; }

/* ---------- the rail ---------- */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding-bottom: 2px;
}

/* Panel parts keep their full height; on a short screen the panel scrolls, never the board. */
.rail > * { flex-shrink: 0; }

.window {
  position: relative;
  padding: 16px 10px 8px;
  border: 1px solid var(--ak-outline);
  border-top-color: #000;
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.window-label {
  position: absolute;
  top: 4px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.window-label .lamp { width: 8px; height: 8px; }
.message .window-label .engraved { color: var(--ak-ink); }
.window-label .san { font-variant: normal; text-transform: none; letter-spacing: 0.02em; font-size: 12px; }

.message { min-height: 74px; padding-top: 20px; }

.message-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ak-ink);
}

.message-text.is-teach { font-size: 18px; line-height: 1.3; }
.message-text strong { font-weight: 600; letter-spacing: 0.02em; }
.message-text .judged { display: block; margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--ak-ink-muted); }


.notation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 12px;
  min-height: 60px;
}

.moves {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  min-height: 24px;
}

.moves li { white-space: nowrap; }
.moves .num { color: var(--ak-ink-muted); margin-right: 4px; }
.moves .ply + .ply { margin-left: 8px; }
.moves .ply.is-black { color: var(--ak-ink-muted); }
.moves .is-refuted .ply { color: var(--ak-ink-muted); }
.moves .is-refuted .ply.is-tried { color: var(--ak-ink); text-decoration: line-through; text-decoration-thickness: 1px; }
.moves .is-refuted .ply.is-answer { color: var(--ak-ink); font-weight: 600; }
.moves .refutes { margin-left: 8px; font-size: 10px; }

.taken {
  margin: 0;
  font-size: 12px;
  color: var(--ak-ink);
  white-space: nowrap;
}

.lamps {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 2px 0;
}

.lamps { align-items: stretch; }

/* Each lamp group is a recessed key that jumps to the first position of its kind. */
.lamp-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 4px 4px 3px;
  border: 0;
  border-top: 1px solid var(--ak-outline);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.lamp-group:active { transform: translateY(1px); }
.lamp-group.is-current { border-top-color: var(--ak-ink); }
.lamp-group:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 2px; }

.lamp-group .engraved { font-size: 10px; line-height: 1.1; visibility: hidden; white-space: nowrap; }
/* Only the group the position on the board belongs to says what it is. */
.lamp-group.is-current .engraved { visibility: visible; }

.lamp-row { display: flex; gap: 3px; }

.lamp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lamp-slot .tick {
  width: 8px;
  height: 2px;
  background: transparent;
}
.lamp-slot.is-current .tick { background: var(--ak-ink); }

.keys {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding-bottom: var(--key-travel);
}

.key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  min-width: 48px;
  padding: 6px 2px;
  border: 1px solid #000;
  border-radius: var(--ak-radius);
  background: linear-gradient(180deg, #D3D6DD 0%, var(--ak-btn-fill) 55%, #A3A7B1 100%);
  color: var(--ak-btn-ink);
  box-shadow: 0 var(--key-travel) 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.key svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ak-btn-ink);
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.key-label {
  font-size: 12px;
  font-weight: 600;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-align: center;
}

.key:active:not(.is-dim),
.key[aria-pressed="true"] {
  transform: translateY(var(--key-travel));
  box-shadow: 0 0 0 #000, inset 0 2px 4px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #9EA2AC 0%, var(--ak-btn-fill) 100%);
}

.key.is-dim { opacity: 0.45; }
.key:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 2px; }

.key-lamp {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #50535B;
  box-shadow: inset 0 1px 1px #000;
}
.key[aria-pressed="true"] .key-lamp,
.key.is-lit .key-lamp { background: var(--ak-accent); box-shadow: 0 0 0 1px #000; }

.save-line {
  margin: 0;
  font-size: 12px;
  color: var(--ak-ink-muted);
}

/* ---------- the chrome's status and ending, made easy to read on a phone ---------- */

html body #activity-chrome-status.site-profoundepth { font-size: 15px; }

/* The toast never swallows a tap meant for a key, and upright it sits above the key row. */
html body #activity-chrome-toast { pointer-events: none; }
@media (orientation: portrait) {
  html body #activity-chrome-toast[data-at] { bottom: calc(var(--pad) + var(--safe-b) + 96px); }
}

/* The ending is the chrome's own notation strip, kept compact: the board stays clear behind it
   so the filled flight squares keep saying why, and the lines stay readable on a phone. */
html body #activity-chrome-ending.site-profoundepth { background: none; }
html body #activity-chrome-ending.site-profoundepth .ac-line { font-size: 15px; line-height: 1.35; }
html body #activity-chrome-ending.site-profoundepth .ac-line:first-child { color: var(--ak-ink); }

/* ---------- promotion ---------- */

.promote {
  position: fixed;
  inset: 0;
  z-index: 36;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: color-mix(in srgb, var(--ak-bg) 70%, transparent);
}

.promote-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ak-outline);
  border-bottom: 4px solid var(--ak-ink);
  background: var(--ak-surface);
}
.promote-panel p { margin: 0; font-size: 13px; }
.promote-keys { display: grid; grid-template-columns: repeat(4, 64px); gap: 6px; padding-bottom: var(--key-travel); }
.promote-keys .key { height: 64px; }
.promote-keys svg { width: 44px; height: 44px; stroke: none; }

/* ---------- a short phone held upright: the panel compacts, the keys never leave the screen ---------- */

/* Everything in the panel keeps its height except the message window, which scrolls inside
   itself when the screen is short, so the move list, lamps and keys always stay in view. */
.rail > .message { flex-shrink: 1; min-height: 64px; overflow-y: auto; }

@media (orientation: portrait) and (max-height: 780px) {
  .key { min-height: 48px; padding: 3px 2px; gap: 2px; }
  .key svg { width: 16px; height: 16px; }
  .key-label { font-size: 11px; }
  .notation { min-height: 48px; }
  .rail { gap: 5px; }
  .message { padding-bottom: 6px; }
  /* Before the first move the sheet has nothing on it; on a short phone it waits off screen. */
  .notation.is-empty { display: none; }
  .message-text:not(.is-teach) { font-size: 15px; line-height: 1.3; }
}

/* ---------- sideways: board on the left, the panel on the right ---------- */

@media (orientation: landscape) {
  :root {
    --pad: 6px;
    --rail-min-w: 300px;
    /* Sideways, a wider gutter lets the board stand on its own beside the panel. */
    --gap: 18px;
    --bd-w: calc(100dvw - 2 * var(--pad) - var(--safe-l) - var(--safe-r) - var(--rail-min-w) - var(--gap));
    --bd-h: calc(100dvh - 2 * var(--pad) - var(--safe-t) - var(--safe-b));
    --bd: max(min(var(--bd-h), 356px), min(var(--bd-w), var(--bd-h), 760px));
    --rail-w: min(460px, calc(100dvw - 2 * var(--pad) - var(--safe-l) - var(--safe-r) - var(--bd) - var(--gap)));
    --play-left: max(calc(var(--pad) + var(--safe-l)), calc((100dvw - var(--bd) - var(--gap) - var(--rail-w)) / 2));
    --rail-left: calc(var(--play-left) + var(--bd) + var(--gap));
  }

  .play {
    grid-template-areas: "board plate" "board rail";
    grid-template-rows: calc(var(--status) - var(--pad) - var(--safe-t) + var(--plate-h)) minmax(0, 1fr);
    grid-template-columns: var(--bd) var(--rail-w);
    column-gap: var(--gap);
    row-gap: 6px;
    align-content: center;
    padding:
      calc(var(--pad) + var(--safe-t))
      calc(var(--pad) + var(--safe-r))
      calc(var(--pad) + var(--safe-b))
      calc(var(--pad) + var(--safe-l));
  }

  .plate { align-items: flex-end; }

  .board-col { align-items: flex-start; }

  /* Sideways the panel is short: keys keep a 48px target with a smaller icon. */
  .key { min-height: 48px; padding: 3px 2px; gap: 2px; }
  .key svg { width: 16px; height: 16px; }
  .key-label { font-size: 11px; }
  .message { min-height: 0; padding-bottom: 6px; }
  .notation { min-height: 48px; }
  .rail { gap: 5px; }

  /* The chrome's status bar and ending sit over the panel, so the board keeps the full height. */
  #activity-chrome-status {
    left: var(--rail-left) !important;
    right: auto !important;
    width: min(var(--rail-w), calc(100dvw - var(--rail-left) - 72px - var(--safe-r)));
  }

  /* Sideways, the ending is a strip at the foot of the panel; the board keeps its side whole. */
  #activity-chrome-ending {
    top: var(--status) !important;
    left: var(--rail-left) !important;
    right: auto !important;
    width: min(var(--rail-w), calc(100dvw - var(--rail-left) - var(--pad) - var(--safe-r)));
    padding-bottom: calc(var(--pad) + var(--safe-b));
  }
  html body #activity-chrome-ending.site-profoundepth .ac-card { padding-bottom: 10px; }
}

/* ---------- motion: mechanical clicks and snaps, only when wanted ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .cell .guide { animation: guide-pulse 1.1s steps(2, jump-none) infinite; }
  :root:not(.ac-still) .cell .flight { animation: flight-snap 120ms steps(3, end) both; }
  :root:not(.ac-still) .lamp.is-clicked { animation: lamp-click 240ms steps(2, end) both; }
  :root:not(.ac-still) .side.is-thinking .lamp { animation: lamp-blink 400ms steps(2, jump-none) infinite; }
  :root:not(.ac-still) .message-text.is-print { animation: print-line 360ms steps(14, end) both; }
  :root:not(.ac-still) .cell .dot { animation: dot-in 90ms steps(2, end) both; }
}

@keyframes guide-pulse {
  from { transform: scale(1); }
  to { transform: scale(0.88); }
}

@keyframes flight-snap {
  from { transform: scale(0.6); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes lamp-click {
  0% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes lamp-blink {
  from { background: var(--ak-accent-2); }
  to { background: #232328; }
}

@keyframes print-line {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes dot-in {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* ---------- the opening: the board's own materials, quiet, and the first position shown ---------- */

/* Plain obsidian behind the opening, as behind the board; no marble. */
html body #activity-start.has-backdrop::before { background-image: none; background-color: var(--ak-bg); }
html body #activity-start#activity-start .ak-logo { max-height: 48px; width: auto; }
html body #activity-start .ak-scene { gap: var(--ak-space-4, 16px); }

.br-preview {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 320px);
  margin: 0 auto 12px;
  text-align: left;
}

.br-preview-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(78vw, 300px, 40dvh);
  aspect-ratio: 1;
  border: 2px solid var(--steel-hi);
  border-radius: 2px;
  background-color: #1C1C20;
  background-image: url("./art/board.png");
  background-size: calc(100% * 384 / 355) calc(100% * 384 / 354);
  background-position: 51.72% 53.33%;
  box-shadow: 0 0 0 1px #000;
}

.br-preview-cell { position: relative; }
.br-preview-cell svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.br-preview-cell svg svg { overflow: hidden; }
.br-preview-step { position: absolute; inset: 0; background: var(--smoke); box-shadow: inset 0 0 0 2px var(--ak-ink); }

.br-preview-arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.br-preview-arrow line { stroke: var(--ak-ink); stroke-width: 0.12; stroke-linecap: square; }
.br-preview-arrow path { fill: var(--ak-ink); }

.br-preview figcaption {
  max-width: 34ch;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 15px;
  line-height: 1.4;
}

.br-preview-label {
  display: block;
  margin-bottom: 2px;
  color: var(--ak-ink-muted);
  font-size: 11px;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

@media (orientation: landscape) and (max-height: 500px) {
  .br-preview { grid-template-columns: auto minmax(0, 1fr); align-items: center; width: min(100%, 560px); }
  .br-preview-board { width: min(52dvh, 220px); }
}