/* Chess Dice: the Play screen (T726). The kit header is hidden here (a whole-screen play screen, root contract
   rule 10); the banner row carries the 44 px Play menu button that opens RR_gameMenu. Portrait, top to bottom:
   banner and menu, the captured rows, the board (the largest square that fits), the action row. Portrait only
   (P067): a sideways phone gets the kit guard, a wide window the kit's centred column. */
.game-shell[data-screen="play"] > .menu-bar { display: none; }
.play [hidden] { display: none !important; }

.screen.play {
  position: relative;
  justify-content: flex-start;           /* T727: banner and captured rows at the top, the board right under them, the action row under the board */
  align-items: center;
  gap: 8px;
  text-align: left;
  overflow: hidden;
  padding: calc(var(--rr-inset-top) + 10px) calc(10px + var(--rr-inset-right)) calc(10px + var(--rr-inset-bottom)) calc(10px + var(--rr-inset-left));
}
.play-head, .play-foot { flex: none; width: min(100%, 560px); }

.play-top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.banner { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.banner.over { color: var(--rr-warn); }
.play-menu {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--rr-ink); border: 1px solid var(--rr-panel-line);
}

.caps { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.cap-row { display: flex; align-items: center; gap: 6px; height: 26px; }
.cap-row canvas { flex: 1 1 auto; min-width: 0; height: 26px; display: block; }
.cap-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; width: 4.4em; font-size: 0.85rem; font-weight: 700; }
.cap-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid; box-sizing: border-box; }
.cap-dot-w { background: #dcb678; border-color: #1c110a; }
.cap-dot-b { background: #323d4d; border-color: #f3e7c8; }
.cap-lead { flex: none; min-width: 2.2em; font-size: 0.85rem; color: var(--rr-muted); text-align: right; }

.board-wrap { flex: 0 1 auto; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; min-height: 0; position: relative; }
.board-wrap canvas#board {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  border-radius: 4px;
}

.play button { -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
.actions { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.act {
  flex: 1 1 0; min-width: 44px; min-height: 48px; padding: 0 12px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--rr-panel); color: var(--rr-ink); border: 2px solid var(--rr-panel-line);
}
.act:disabled { opacity: 0.4; cursor: default; }
.act.blocked, .act[aria-disabled="true"] { opacity: 0.4; cursor: default; }   /* T760: tappable, but reads as unavailable */
.act.danger { border-color: #b8382c; }
.actions.hot { flex-wrap: wrap; gap: 6px; }
.actions.hot .act { flex: 1 1 0; padding: 0 6px; font-size: 0.95rem; white-space: nowrap; }
.confirm-text { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.confirm .act { flex: none; }

/* The promotion picker: covers the board slot; a tap on the backdrop cancels. */
.promo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box;
  background: rgba(20, 16, 12, 0.6); border-radius: 4px;
}
.promo-panel {
  max-width: 100%; box-sizing: border-box; padding: 10px 12px 12px; border-radius: 14px; background: var(--rr-panel); border: 2px solid var(--rr-accent); text-align: center;
}
.promo-head { margin: 0 0 8px; font-weight: 700; }
.promo-box { display: flex; gap: 8px; justify-content: center; }
.promo-btn {
  flex: 1 1 0; display: block; max-width: 64px; min-width: 44px; aspect-ratio: 1 / 1; padding: 0; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--rr-panel-line); background: #ecdcb8; overflow: hidden;
}
.promo-btn:hover, .promo-btn:focus-visible { border-color: var(--rr-accent); }
.promo-btn canvas { display: block; width: 100%; height: 100%; pointer-events: none; }

/* The dice zone (T734, Dice matches only; hidden in Classic): the last face and caption over the tray (T797: one button per die of
   the set, up to five), or, while a piece and a die are chosen, the die's bands with the bag's chances in place of the caption (the
   tray stays: the chosen die is tapped again to roll); the chooser replaces both. The zone keeps one height so the board does not resize. */
.dz-zone { flex: none; width: min(100%, 560px); min-height: 126px; display: flex; flex-direction: column; }
.dz-main, .dz-pane { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dz-result { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.dz-facebox { position: relative; flex: none; width: 34px; height: 34px; }
.dz-face-art { position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: none; pointer-events: none; }
.dz-facebox.art .dz-face-art { display: block; }
.dz-facebox.art .dz-face { background: transparent; border-color: transparent; color: transparent; }
.dz-face {
  position: absolute; left: 2px; top: 2px; box-sizing: border-box; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px;
  background: #ecdcb8; color: #1c110a; border: 2px solid #1c110a; font-size: 1rem; line-height: 1;
}
.dz-caption { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 0.95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-tray { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.dz-tray[data-n="4"] .dz-name, .dz-tray[data-n="5"] .dz-name { font-size: 0.85rem; }
.dz-tray[data-n="4"] .dz-state, .dz-tray[data-n="5"] .dz-state { font-size: 0.7rem; }
.dz-die {
  min-width: 44px; min-height: 70px; padding: 3px 6px; border-radius: 10px; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--rr-panel); color: var(--rr-ink); border: 2px solid var(--rr-panel-line);
}
.dz-icon { flex: none; width: 34px; height: 34px; display: block; pointer-events: none; }
.dz-name { font-weight: 700; font-size: 1rem; line-height: 1.1; }
.dz-state { font-size: 0.78rem; line-height: 1.1; color: var(--rr-muted); text-align: center; }
.dz-die.sel .dz-state { color: var(--rr-ink); font-weight: 700; }
.dz-die.sel { border-color: var(--rr-accent); background: #3a2c1c; }
.dz-die.spent { opacity: 0.6; }
.dz-die:disabled { cursor: default; }
.dz-die:not(.spent):disabled { opacity: 0.6; }
.dz-title { margin: 0; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.dz-lines { margin: 0; padding: 0; list-style: none; font-size: 0.8rem; line-height: 1.2; display: flex; flex-wrap: wrap; align-content: center; gap: 3px 5px; min-height: 34px; }
.dz-lines[hidden] { display: none; }
.dz-lines li { padding: 2px 6px; border-radius: 6px; background: var(--rr-panel); border: 1px solid var(--rr-panel-line); white-space: nowrap; }
.dz-lines li.dz-fizzle { color: var(--rr-muted); }
.dz-lines li.dz-out { opacity: 0.5; }
.dz-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; min-height: 0; max-height: 100px; overscroll-behavior: contain; }
.dz-opt { min-height: 44px; padding: 0 6px; font-size: 0.9rem; }