/* Uncovered Lines: a hydrographer's survey notebook. Thin ink on graph paper, nothing filled,
   one red pen mark kept for the key move. Colours and fonts come only from kit.css. */

:root {
  --ink: var(--ak-ink);
  --paper: var(--ak-bg);
  --pen: var(--ak-accent);
  --red-pen: var(--ak-accent-2);
  --rule: 32px;
  --gap: 16px;
  /* Room the rail keeps under the board when the phone is upright. */
  --rail-min: 120px;
  --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);
  --board: min(
    calc(100dvw - 8px - var(--safe-l) - var(--safe-r)),
    calc(100dvh - var(--status) - var(--rail-min) - 12px - var(--safe-b)),
    720px
  );
  --sq: calc(var(--board) / 8);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

/* Plain paper. Tournament-hall calm wins over the painted desk: no backdrop picture, no page grid,
   so the board's own ink lines and the notation are the only marks on the sheet. */
body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.play {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  height: 100dvh;
  padding: calc(var(--status) + 4px) calc(4px + var(--safe-r)) var(--safe-b) calc(4px + var(--safe-l));
  touch-action: manipulation;
}
.play[hidden] { display: none; }

/* Upright, the logo heads the status line in the top-left corner: one line, then the board. */
.play-logo {
  position: fixed;
  z-index: 31;
  top: calc(max(12px, var(--safe-t)) + 10px);
  left: max(12px, var(--safe-l));
  height: 28px;
  width: auto;
  object-fit: contain;
}
html.ul-on:not(.ul-land) #activity-chrome-status { left: calc(max(12px, var(--safe-l)) + 68px); }
/* The status bar as a ruled heading line, not a row of boxed cells. */
html #activity-chrome-status.site-profoundepth {
  border: 0;
  border-bottom: 1px solid var(--ak-ink);
  background: var(--paper);
}
.preview-cap { display: none; }
.rail-logo { display: none; }

/* ---- the board, drawn on the paper in thin ink ---------------------------------- */

.board-wrap { width: var(--board); }

.board {
  position: relative;
  width: var(--board);
  height: var(--board);
  outline: 1.5px solid var(--ink);
  outline-offset: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(color-mix(in srgb, var(--pen) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pen) 10%, transparent) 1px, transparent 1px);
  background-size: calc(var(--sq) / 4) calc(var(--sq) / 4);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.under, .over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.under { z-index: 0; }
.over { z-index: 2; }

.squares {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.sq {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--ink) 55%, transparent);
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: none;
}
.sq.dark {
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--ink) 62%, transparent) 0 1.2px,
    transparent 1.2px 5.5px
  );
}
.sq:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: -3px; z-index: 3; }

.coord {
  position: absolute;
  font-family: var(--ak-font-display);
  font-size: clamp(11px, calc(var(--sq) * 0.24), 15px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
  background: var(--paper);
  padding: 1px 3px;
  /* Over the pieces, so a letter is never hidden behind one. */
  z-index: 1;
}
.coord.rank { top: 2px; left: 2px; }
.coord.file { right: 2px; bottom: 2px; }

.pc {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  pointer-events: none;
  overflow: visible;
}
/* Plain class selectors: they style the shapes inside each <use>, which inherit the custom properties. */
.pc use { --sw: 4.5; }
.pb { fill: var(--pc-fill); stroke: var(--pc-stroke); stroke-width: var(--sw); stroke-linejoin: round; stroke-linecap: round; }
.pd { fill: none; stroke: var(--pc-detail); stroke-width: 2.2; stroke-linecap: round; }
.ps { fill: none; stroke: var(--pc-slit); stroke-width: 4; stroke-linecap: round; }
.ps-dot { fill: var(--pc-slit); stroke: none; }
.pc-w { --pc-fill: var(--paper); --pc-stroke: var(--ink); --pc-detail: transparent; --pc-slit: var(--ink); }
.pc-b { --pc-fill: var(--ink); --pc-stroke: var(--ink); --pc-detail: var(--paper); --pc-slit: var(--paper); }
/* A paper halo under every piece, so it reads on hatched squares. */
.pc .halo { --pc-fill: var(--paper); --pc-stroke: var(--paper); --pc-detail: transparent; --pc-slit: transparent; --sw: 13; }

.sq.lifted .pc { opacity: 0.25; }
.sq.selected { box-shadow: inset 0 0 0 0.5px var(--ink), inset 0 0 0 3px var(--pen); }

.ghost {
  position: fixed;
  z-index: 50;
  width: var(--sq);
  height: var(--sq);
  pointer-events: none;
  translate: -50% -60%;
}
.ghost .pc { inset: 0; width: 100%; height: 100%; }

/* SVG layers: 100 units per square. */
.hatch-line { stroke: var(--pen); stroke-width: 2.4; opacity: 0.55; }
.last { fill: url(#hatch-last); }
.dot { fill: var(--ink); }
.cap-ring { fill: none; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 9 6; }
.note-circle { fill: none; stroke: var(--pen); stroke-width: 5; stroke-linecap: round; }
.note-arrow { fill: none; stroke: var(--pen); stroke-width: 9; stroke-linecap: round; opacity: 0.8; }
.arrow-tip { fill: var(--pen); }
.note-live { opacity: 0.5; }
.key-ring { fill: none; stroke: var(--red-pen); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.chosen { fill: none; stroke: var(--ink); stroke-width: 5; }
.blot { fill: var(--ink); opacity: 0.18; }
.teach-ring { fill: none; stroke: var(--pen); stroke-width: 5; stroke-linecap: round; }
.strike { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.target-mark { fill: none; stroke: var(--pen); stroke-width: 3.5; stroke-dasharray: 9 7; stroke-linecap: round; }
.target-mark path { stroke-dasharray: none; }
.lead-ring { fill: none; stroke: var(--pen); stroke-width: 5; stroke-dasharray: 14 8; stroke-linecap: round; }
/* The square's name beside a ring or target, pencilled on the paper so it reads over the hatching. */
.sq-tag { font-family: var(--ak-font-display); font-size: 22px; font-weight: 700; fill: var(--pen); stroke: var(--paper); stroke-width: 6px; paint-order: stroke; stroke-linejoin: round; }
/* The move just played, drawn as a thin ink arrow so the reply can be read off the board. */
.move-arrow { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; opacity: 0.7; }
.move-tip { fill: var(--ink); }
/* A hint: a pencil arrow from the piece in the way to its square, and a ring on that square. */
.hint-arrow { fill: none; stroke: var(--pen); stroke-width: 6; stroke-dasharray: 12 9; stroke-linecap: round; }
.hint-ring { fill: none; stroke: var(--pen); stroke-width: 5; stroke-linecap: round; }

/* ---- the rail: ruled notebook lines, not a panel ------------------------------- */

.rail {
  width: var(--board);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 4px 16px;
  font-size: 16px;
  line-height: 24px;
}

.note {
  position: relative;
  margin: 4px 0 8px;
  padding: 2px 0 6px 14px;
  border-left: 2px solid var(--ink);
}
.note-head {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.note-head:empty { display: none; }
.note-text { margin: 2px 0 0; font-size: 17px; line-height: 25px; color: var(--ink); }
/* A wrong move: the margin rule turns dashed, the words left plain until the next move. */
.note.is-wrong { border-left-style: dashed; }
.note.is-wrong .note-head { color: var(--ink); }
.note.is-stamped { padding-right: 92px; min-height: 64px; }
/* A solved note is a little smaller, so the key move and the idea end above the ending card. */
.note.is-stamped .note-text { font-size: 15px; line-height: 21px; }

.sheet-head .to-move { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sheet-head .to-move::after { content: ' to move'; font-variant: normal; font-size: 12px; color: var(--ak-ink-muted); }

.board.pen-on .sq { cursor: crosshair; }
.next[hidden], .pen-btn[hidden] { display: none; }

.teach {
  margin: 4px 0 12px;
  padding: 12px 14px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.teach[hidden] { display: none; }
.teach-text { margin: 0; font-size: 16px; line-height: 23px; color: var(--ink); }
/* The one way on, straight under the heading so it is never below the fold: filled in pen. */
.teach .teach-go { width: 100%; min-height: 56px; margin: 4px 0 10px; font-size: 20px; font-weight: 700; background: var(--pen); border-color: var(--pen); color: var(--paper); }
.teach .teach-go svg { width: 22px; height: 22px; }

.promote { margin: 4px 0 12px; }
.promote[hidden] { display: none; }
.promote-text { margin: 0 0 6px; font-size: 16px; }
.promote-row { display: flex; gap: 8px; }
.promote-row button { width: 56px; height: 56px; padding: 4px; position: relative; }
.promote-row .pc { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }

.pen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  min-width: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 2px 6px 3px 5px / 5px 2px 6px 3px;
  background: transparent;
  color: var(--ink);
  font-family: var(--ak-font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.pen-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pen-btn[aria-pressed="true"] { border-width: 3px; border-color: var(--pen); color: var(--pen); text-decoration: underline wavy; text-underline-offset: 4px; }
.pen-btn:disabled { opacity: 0.45; cursor: default; }
.pen-btn:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 2px; }
.pen-btn.is-next { border-width: 3px; }

.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.tools .pen-btn { flex: 1 1 auto; padding: 0 10px; }
/* The answer slot: Show answer, Next move, Next position. Drawn with a heavier pen so it is the one to find. */
.tools .answer { flex: 2 1 auto; border-width: 3px; font-size: 17px; font-weight: 700; }
.tools .answer.is-next { border-color: var(--pen); color: var(--pen); }
/* After a wrong move, Hint joins Show answer in the heavier pen: the two ways out. */
.tools #hint.is-next { border-color: var(--pen); color: var(--pen); }

.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 0; border-top: 1px dashed var(--ink); border-bottom: 1px dashed var(--ink); }
.confirm[hidden] { display: none; }
.confirm span { flex: 1 1 100%; }

.sheet-wrap {
  position: relative;
  margin: 8px 0;
  background-image: linear-gradient(transparent calc(var(--rule) - 1px), color-mix(in srgb, var(--pen) 35%, transparent) calc(var(--rule) - 1px));
  background-size: 100% var(--rule);
}
.sheet-head {
  display: grid;
  grid-template-columns: 2.5em 1fr 1fr auto;
  height: var(--rule);
  align-items: end;
  padding-bottom: 4px;
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--ak-ink-muted);
}
.sheet-head span:first-child { grid-column: 2; }
.sheet-head b { color: var(--ink); }
.sheet { list-style: none; margin: 0; padding: 0; min-height: calc(var(--rule) * 2); }
.sheet li {
  display: grid;
  grid-template-columns: 2.5em 1fr 1fr;
  height: var(--rule);
  align-items: end;
  padding-bottom: 4px;
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sheet .num { color: var(--ak-ink-muted); font-weight: 600; }
.sheet .key { position: relative; justify-self: start; }
.sheet .key svg { position: absolute; inset: -9px -12px -6px -12px; width: calc(100% + 24px); height: calc(100% + 15px); overflow: visible; }
.run { margin: 0 0 6px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.taken { min-height: var(--rule); margin: 0; padding-top: 6px; font-size: 14px; color: var(--ak-ink-muted); }

.stamp-slot { position: absolute; right: 0; top: 2px; width: 88px; height: 49px; pointer-events: none; }
.stamp { display: block; width: 100%; height: 100%; rotate: -7deg; color: var(--ink); }
.stamp rect { fill: none; stroke: currentColor; }
.stamp text { fill: currentColor; font-family: var(--ak-font-display); font-weight: 800; letter-spacing: 0.08em; }

.set { margin: 12px 0 8px; }
.set-head {
  margin: 0 0 4px;
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.set-group { margin: 0 0 6px; }
.set-group-name { margin: 0; font-size: 13px; font-variant: small-caps; letter-spacing: 0.06em; color: var(--ak-ink-muted); }
.set-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pos {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  background: transparent;
  color: var(--ink);
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pos[aria-current="true"] { border: 2px solid var(--ink); }
/* Under par: a small pen star in the lower corner, clear of the tick above it. */
.par-star { position: absolute; right: 2px; bottom: 0; font-size: 13px; line-height: 1; color: var(--pen); }
.pos svg { position: absolute; right: 1px; top: 1px; width: 20px; height: 20px; overflow: visible; }
.pos:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 1px; }
.mk { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.set-key { margin: 6px 0 0; font-size: 13px; line-height: 22px; color: var(--ak-ink-muted); }
.set-key svg { width: 16px; height: 16px; vertical-align: -3px; margin-left: 6px; }

.saves { margin: 8px 0 0; font-size: 13px; color: var(--ak-ink-muted); }
.saves.is-error { color: var(--ink); font-weight: 600; }

/* The narrowest phones upright: a smaller stamp and tighter lines keep a solved note above the card. */
@media (orientation: portrait) and (max-width: 374px) {
  .note.is-stamped { padding-right: 74px; }
  .note.is-stamped .note-text { font-size: 14px; line-height: 19px; }
  .stamp-slot { width: 72px; height: 40px; }
}

/* The time on this position, in the score sheet's own column. */
.clock { justify-self: end; font-family: var(--ak-font-display); font-size: 13px; font-weight: 700; font-variant: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink); }
/* Past the time to beat: the clock is underlined in pen, a count, not an alarm. */
.clock.is-over { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
/* Upright phones and small phones sideways: the side names need the width, and the note head already carries the time to beat. */
@media (max-width: 440px), (orientation: landscape) and (max-width: 760px) { .clock-target { display: none; } }

/* The set complete: counts by type, a ruled table in tabular numerals, then the move worth keeping. */
.summary { margin: 0 0 6px; padding: 0 0 0 12px; border-left: 2px solid var(--ink); }
.summary[hidden] { display: none; }
.summary table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.summary th, .summary td { padding: 0 3px; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--pen) 35%, transparent); text-align: right; }
.summary th[scope="row"] { text-align: left; font-weight: 600; }
.summary th[scope="col"] { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ak-ink-muted); }
.summary-says { margin: 0 0 2px; font-size: 13px; line-height: 18px; }
.summary-key { margin: 2px 0 0; font-size: 13px; font-weight: 600; line-height: 18px; }

/* ---- the opening: start.js's scene sits where the rail will be, beside the real first position ---- */

html.ul-preview { --status: 64px; }
html.ul-preview .play-logo,
html.ul-preview .rail-logo { display: none; }
html.ul-preview .preview-cap {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 31;
  top: max(8px, var(--safe-t));
  left: max(12px, var(--safe-l));
  right: max(12px, var(--safe-r));
  height: 56px;
  margin: 0;
  border-bottom: 1px solid var(--ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}
/* Only the opening scene is placed; start.js's instructions and help keep their own full sheet. */
html.ul-preview #activity-start.is-scene {
  inset: var(--ul-rail-top, 0px) 0 0 var(--ul-rail-left, 0px);
  padding: 8px max(16px, var(--safe-r)) max(8px, var(--safe-b)) 16px;
  border-top: 4px solid var(--ak-ink);
  background: var(--paper);
}
html.ul-preview #activity-start.is-scene::before,
html.ul-preview #activity-start.is-scene::after { display: none; }
html.ul-preview #activity-start.is-scene .ak-scene {
  width: auto;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
}
html.ul-preview #activity-start.is-scene .ak-head { align-items: flex-start; }
html.ul-preview #activity-start.is-scene .ak-title { font-size: 24px; }
html.ul-preview #activity-start.is-scene .ak-logo { height: 30px; width: auto; }
/* The three opening lines as a numbered notation table. */
html.ul-preview #activity-start.is-scene .ak-scene-lines { max-width: none; gap: 0; }
html.ul-preview #activity-start.is-scene .ak-scene-line {
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pen) 35%, transparent);
  font-size: 15px;
  line-height: 20px;
}
html.ul-preview #activity-start.is-scene .ak-scene-actions { align-items: stretch; gap: 4px; }
html.ul-preview #activity-start.is-scene .ak-go { width: 100%; min-width: 0; min-height: 48px; margin: 0; }

/* ---- the ending keeps to the rail -------------------------------------------------- */

/* The chrome's ending card lands in the rail: under the board upright, beside it sideways. The board,
   the red ring on the key move and the margin note above the card all stay in view. */
html.ul-on #activity-chrome-ending {
  top: var(--ul-rail-top, 0px);
  left: var(--ul-rail-left, 0px);
  background: transparent;
  pointer-events: none;
}
/* Only the card takes taps; the rail around it (Next position, Try it yourself, the set) stays in use. */
html.ul-on #activity-chrome-ending .ac-card { pointer-events: auto; }
/* Sideways the card is written small, two short lines and one button, so the score sheet above it stays clear. */
html.ul-land #activity-chrome-ending .ac-card { gap: 2px 12px; padding-top: 8px; padding-bottom: 8px; }
html.ul-land #activity-chrome-ending .ac-number { font-size: 20px; }
html.ul-land #activity-chrome-ending .ac-verdict { font-size: 16px; line-height: 20px; }
html.ul-land #activity-chrome-ending .ac-line { font-size: 13px; line-height: 18px; }
html.ul-land #activity-chrome-ending .ac-actions button { min-height: 44px; }

/* ---- sideways: the board on one side, the rail on the other --------------------- */

@media (orientation: landscape) {
  :root {
    /* The board takes the full height it can, squares 44px or more; the rail keeps at least 360px
       for its controls, and gets up to 460px when the screen is wide. */
    --board: min(
      calc(100dvh - 8px - var(--safe-t) - var(--safe-b)),
      max(calc(100dvw - 392px - var(--safe-l) - var(--safe-r)), 352px),
      760px
    );
  }
  .play {
    grid-template-columns: auto minmax(0, 460px);
    grid-template-rows: minmax(0, 1fr);
    justify-content: center;
    align-items: start;
    column-gap: var(--gap);
    padding: calc(4px + var(--safe-t)) calc(8px + var(--safe-r)) calc(4px + var(--safe-b)) calc(8px + var(--safe-l));
  }
  .play-logo { display: none; }
  /* Sideways squares are smallest, so the grid references are written larger. */
  .coord { font-size: clamp(12px, calc(var(--sq) * 0.3), 16px); font-weight: 700; }
  /* Sideways the rail is short, so every part is written tight and the whole rail fits under the
     status bar: the note, the controls, the move list as one notation line, and the set as a strip. */
  .rail {
    --rule: 24px;
    position: relative;
    width: auto;
    height: calc(100dvh - 8px - var(--safe-t) - var(--safe-b));
    padding-top: calc(var(--status) - 4px - var(--safe-t));
    padding-bottom: 0;
  }
  /* The logo sits small in the corner of the margin note, at the top of the rail. */
  .rail-logo {
    display: block;
    position: absolute;
    top: calc(var(--status) - 4px - var(--safe-t));
    right: 4px;
    height: 18px;
    width: auto;
    object-fit: contain;
  }
  .note { margin: 0 0 2px; padding: 0 0 2px 12px; }
  .note-head { font-size: 12px; line-height: 18px; padding-right: 48px; }
  .note-text { font-size: 14px; line-height: 20px; }
  .note.is-stamped { min-height: 64px; padding-right: 96px; }
  .stamp-slot { top: 22px; width: 88px; height: 49px; }
  /* The one-line move list sits right on the ending card's edge; the board's red ring marks the key move. */
  .sheet .key svg { display: none; }
  .tools { margin-bottom: 0; }
  .sheet-wrap { margin: 0; background-image: none; border-bottom: 1px solid color-mix(in srgb, var(--pen) 35%, transparent); }
  .sheet-head { height: 18px; padding-bottom: 0; font-size: 12px; }
  .sheet { display: flex; flex-wrap: wrap; column-gap: 14px; min-height: 24px; }
  .sheet li { display: flex; gap: 8px; height: 24px; align-items: center; padding-bottom: 0; font-size: 15px; }
  .taken { min-height: 0; padding: 0; font-size: 12px; line-height: 16px; }
  .set { margin: 0; }
  .set-head, .set-group-name, .set-key { display: none; }
  .run { margin: 0; font-size: 12px; line-height: 16px; }
  /* Twenty numbers in two rows of ten (more rows on a narrower phone); a heavier rule marks where
     each harder theme starts. */
  .set-groups { display: grid; grid-template-columns: repeat(auto-fill, 44px); }
  .set-group, .set-row { display: contents; }
  .pos { width: 44px; height: 44px; font-size: 14px; }
  .pos.theme-start { box-shadow: inset 2px 0 0 var(--ink); }
  .pos svg { width: 16px; height: 16px; }
  .saves { margin: 0; font-size: 12px; line-height: 16px; }
  /* The status bar rides over the rail, so the board can take the whole height. */
  html.ul-land #activity-chrome-status { left: var(--ul-rail-left, 12px); }
  html.ul-preview .preview-cap { left: var(--ul-rail-left, 12px); }
  html.ul-preview #activity-start.is-scene { inset: 72px 0 0 var(--ul-rail-left, 0px); border-top: 0; border-left: 4px solid var(--ak-ink); }
  html.ul-preview #activity-start.is-scene .ak-scene-line { font-size: 14px; line-height: 19px; }
  /* Sideways the start button runs the full width of the rail, first, with the skip link under it, so
     its label is never squeezed on a narrow phone. */
  html.ul-preview #activity-start.is-scene .ak-scene-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  html.ul-preview #activity-start#activity-start.is-scene .ak-scene-actions > .ak-go { width: 100%; order: 0; margin: 4px 0 0; padding: 0 12px; letter-spacing: 0.08em; }
  html.ul-preview #activity-start#activity-start.is-scene .ak-scene-actions > .ak-jump { order: 1; margin: 0; padding: 6px 12px; align-self: center; }
}

/* ---- motion, only when the player has not asked for less ------------------------ */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .pc.slide { transition: translate 210ms cubic-bezier(0.22, 1, 0.36, 1); }
  :root:not(.ac-still) .pc.settle { animation: settle 240ms cubic-bezier(0.34, 1.3, 0.64, 1); }
  :root:not(.ac-still) .pc.settle-late { animation: settle 300ms cubic-bezier(0.34, 1.3, 0.64, 1) both; animation-delay: var(--delay, 0ms); }
  :root:not(.ac-still) .blot { animation: blot 420ms ease-out both; transform-box: fill-box; transform-origin: center; }
  :root:not(.ac-still) .water { animation: water-fill 500ms cubic-bezier(0.4, 0, 0.2, 1) both; }
  :root:not(.ac-still) .key-ring { stroke-dasharray: 520; animation: pen-draw 520ms ease-out both; }
  :root:not(.ac-still) .key .mk-draw { stroke-dasharray: 400; animation: pen-draw 520ms ease-out both; }
  :root:not(.ac-still) .stamp { animation: stamp-land 360ms cubic-bezier(0.3, 1.4, 0.6, 1) both; animation-delay: 380ms; }
  :root:not(.ac-still) .chosen { animation: chosen 700ms ease-out both; }
  :root:not(.ac-still) .lead-ring { animation: lead 1600ms ease-in-out infinite; }
  :root:not(.ac-still) .thinking::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 900ms steps(4) infinite; }
}

@keyframes settle {
  from { transform: translateY(-4%) scale(1.06); }
  to { transform: none; }
}
@keyframes blot {
  from { transform: scale(0.3); opacity: 0.35; }
  to { transform: scale(1); opacity: 0.18; }
}
@keyframes water-fill {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes pen-draw {
  from { stroke-dashoffset: 520; }
  to { stroke-dashoffset: 0; }
}
@keyframes stamp-land {
  0% { opacity: 0; transform: scale(1.7); }
  70% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lead {
  0%, 100% { stroke-width: 4; }
  50% { stroke-width: 8; }
}
@keyframes chosen {
  from { stroke-width: 9; }
  to { stroke-width: 4; }
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}