/* Shared skin atlas; the square canvas contains six columns and two rows. */
.player-art { background: url('assets/rebirth/travelers.png') var(--skin-x) var(--skin-y) / 600% 200% no-repeat; }
.bv-person { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.bv-person legend { font-size: 12px; padding: 0 6px; color: var(--ink-2); }
.bv-person input { min-width: 0; width: 100%; }
.bv-person select, #g-pace { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 5px; }
.player-choices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 96px)); justify-content: center; gap: 6px; }
.player-choice { border: 2px solid transparent; border-radius: 8px; padding: 4px; background: color-mix(in srgb, var(--ink) 5%, transparent); cursor: pointer; }
.player-choice[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.player-choice .player-art { display: block; width: 44px; aspect-ratio: 1/2; margin: auto; }
.player-choice:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bv-ask-in { width: min(94vw, 620px); max-width: 620px; max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
.bv-ask-in > p { font-size: 13px; line-height: 1.5; margin: 0; }
.bv-ask-act { position: sticky; bottom: -20px; background: var(--card); padding: 12px 0; z-index: 1; }
.bv-who .pip-dot.player-art { width: 18px; height: 36px; border-radius: 0; background-color: transparent; flex: none; border-bottom: 3px solid var(--player-colour); }
.bv-pt.turn { box-shadow: inset 0 -2px var(--accent); }
.bv-tok.player-art { width: 12px; height: 24px; border-radius: 0; background-color: transparent; border: 0; border-bottom: 3px solid var(--player-colour); box-shadow: 0 1px 2px #0005; }
.rb-pl b.player-art { display: inline-block; width: 14px; height: 28px; border-radius: 0; background-color: transparent; }
.bv-views .t { display: inline; margin-left: 4px; font-size: 10px; }
.bv-turn { display: block; font-size: 11px; margin: 0 0 4px; }
.bv-tools, .bv-options { position: relative; align-self: center; }
.bv-tools-body, .bv-options-body { position: absolute; bottom: calc(100% + 8px); right: 0; padding: 14px; width: min(320px, 82vw); max-height: 55dvh; overflow: auto; z-index: 12; }
body.board-only .bv-tools-body, body.board-only .bv-options-body { bottom: auto; top: calc(100% + 8px); }
.bv-tools-body { font-size: 13px; line-height: 1.5; }
/* Inside the game menu these two are rows of a list, not chips set side by
   side: the move log opened under whichever of them it happened to sit
   beside and pushed the other out of line. */
.bv-tools-body .bv-new, .bv-tools-body .bv-more { display: block !important; width: 100%; }
.bv-tools-body .bv-new { margin-top: 6px; }
.bv-tools-body .bv-more > summary { display: block; width: 100%; text-align: center; }
.bv-tools-body .bv-more-body {
  position: static; width: auto; box-shadow: none; border: 0; background: none;
  padding: 4px 0 0;
}
.bv-save { color: var(--ink-2); font-size: 11px; }
.bv-option { display: block; width: 100%; text-align: left; padding: 10px 6px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.bv-sq.roll-option, .bv-option.roll-option { outline: 3px solid var(--accent); outline-offset: -3px; filter: brightness(1.18); z-index: 2; }
.bv-card-in, body.board-only .bv-card-in { max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px; }
.bv-card-context { font-size: 12px; line-height: 1.5; max-width: 38ch; margin: 10px auto 0; text-align: left; }
.bv-summary { font-size: 12px; line-height: 1.5; margin-top: 12px; }
.bv-card .num, body.board-only .bv-card .num { font-size: 36px; }
.bv-card-art { max-height: 110px; }
.bv-card-end { max-height: 160px; object-fit: contain; }
.bv-traveling { position: fixed; pointer-events: none; z-index: 30; width: 22px; height: 44px; transform: translate(-50%, -75%); filter: drop-shadow(0 2px 3px #0008); border-bottom: 3px solid var(--player-colour); }
.bv-board-ghost { position: fixed !important; display: grid !important; margin: 0 !important; pointer-events: none; z-index: 20; }
.assembling > .bv-sq { animation: board-assemble 400ms both; animation-delay: var(--tile-delay); }
.disassembling > .bv-sq { animation: board-disassemble 400ms both; animation-delay: var(--tile-delay); }
@keyframes board-assemble { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes board-disassemble { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-24px) scale(.9); } }
@media (max-width: 700px) {
  .bv-person { gap: 6px; padding: 8px; }
  .player-choices { gap: 3px; }
  .player-choice { padding: 2px; }
  .bv-ask-in { padding: 14px; }
  /* two acts, side by side and the width of a thumb each, rather than a pair
     of small ones huddled against the right edge of the sheet */
  .bv-ask-act { display: flex; gap: 8px; }
  .bv-ask-act .btn { flex: 1 1 0; min-height: 46px; }
  .bv-tools > summary, .bv-options > summary { font-size: 10px; padding: 7px 4px; }
  /* Both fold out as a sheet across the foot of the screen, clear of the
     control bar and of whatever the phone reserves below it. */
  .bv-tools-body, .bv-options-body {
    position: fixed; left: 9px; right: 9px; width: auto; box-sizing: border-box;
    bottom: calc(72px + var(--sa-b)); border-radius: 12px; padding: 10px 12px;
  }
  body.board-only .bv-tools-body, body.board-only .bv-options-body { top: auto; bottom: calc(72px + var(--sa-b)); }
  /* Scrollable sideways, but not forced into view: the middle arrangement
     names the players over the model itself and hides this row. */
  .bv-who { overflow-x: auto; max-width: 100%; }
  .bv-pt { flex: none; }
  .bv-card-in, body.board-only .bv-card-in { max-height: calc(100dvh - 130px); padding: 14px 18px; }
}
/* A screen with no height to spare — a phone on its side, a small window —
   still has to be able to choose four travelers and start. The dialog takes
   all of the height it is given and the portraits come down to fit it. */
@media (max-height: 560px) {
  .bv-ask-in { max-height: calc(100dvh - 24px); padding: 12px 14px; gap: 9px; }
  .bv-person { padding: 7px; gap: 6px; }
  .player-choice .player-art { width: 32px; }
  .player-choice-caption { font-size: 10px; }
  .bv-ask-act { padding: 9px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .assembling > .bv-sq, .disassembling > .bv-sq { animation: none; }
}
body.board-only .bv-views .t, body.game-view .bv-views .t { display: inline; }
body.board-only .bv-views .btn, body.game-view .bv-views .btn { padding: 8px; min-height: 36px; }
/* The printed board's own order for the card, kept off the phone: there the
   rail is laid out once for all three arrangements and this fought it. */
@media (min-width: 701px) {
  body.board-only .bv-tools { order: 4; }
  body.board-only .bv-options { order: 3; }
  body.board-only .bv-views { order: 2; }
  body.board-only .bv-act { min-width: 140px; }
}
body.game-view .board-view.large-squares .bv-grid { overflow: auto; grid-template-columns: repeat(8, minmax(100px, 1fr)); grid-template-rows: repeat(13, minmax(76px, 1fr)); }
body.game-view .board-view.large-squares .bv-sq .nm { font-size: 11px; line-height: 1.2; }
body.game-view .board-view.large-squares .bv-sq .n { font-size: 12px; }
/* Backdrop filters otherwise make fixed phone menus relative to the rail.
   Night gives every card its filter back, and the rail is a card: at night
   the six destinations and the game menu were laid out against the rail
   instead of the screen and opened off the top of the phone. */
.bv-rail, body.night .bv-rail { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 700px) {
  body.game-view .bv-views .g { display: none; }
  body.game-view .bv-views .t { margin: 0; font-size: 10px; }
  body.game-view .bv-views .btn { padding: 9px 4px; min-height: 36px; }
  .bv-tools > summary, .bv-options > summary { letter-spacing: .06em; }
}

.player-origin { grid-column: 1 / -1; }
.player-origin select { flex: 1; }
.player-choice-caption { display: block; font: 11px/1.4 Georgia, serif; color: var(--ink); margin-top: 4px; }