/* Chess Dice: game styles. The vendored kit (assets/ui.css) loads first.
   Screens are flex children of .game-scroll in the kit fit shell; one is
   visible at a time and each pads by the --rr-inset-* tokens. */
.screen {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 16px calc(16px + var(--rr-inset-right)) calc(16px + var(--rr-inset-bottom)) calc(16px + var(--rr-inset-left));
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.screen.visible { display: flex; }
.logo { margin: 0; font-size: 2.2rem; line-height: 1.1; }
.tagline { margin: 0; opacity: 0.85; }
.screen [hidden] { display: none !important; }
.menu-col { display: flex; flex-direction: column; gap: 10px; width: min(100%, 320px); }
.menu-btn { min-height: 48px; min-width: 44px; }
.menu-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.screen-title { margin: 0; font-size: 1.8rem; line-height: 1.1; }
.screen-title:focus { outline: none; }
.screen button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Switch buttons (New match, Settings, the locked Dice Path): label left, state pill right. */
.menu-btn.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.menu-btn.switch .sw-state { white-space: nowrap; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--rr-accent); color: #1a1208; min-width: 3.2em; text-align: center; }
.menu-btn.switch.off .sw-state, .menu-btn.switch .sw-state.locked { background: transparent; border: 1px solid var(--rr-panel-line); color: inherit; opacity: 0.8; }
.settings-note { margin: 0; font-size: 0.9rem; opacity: 0.85; }
.settings-note:empty { display: none; }

/* Result: heading and reason, the move list in a box that scrolls inside itself, then Rematch (own row), New match and Title. */
.screen.result { gap: 10px; }
.result-head { flex: none; display: flex; flex-direction: column; gap: 4px; }
.result-reason { margin: 0; opacity: 0.9; }
.result-moves {
  flex: 0 1 auto; min-height: 0; width: min(100%, 420px); box-sizing: border-box; overflow-y: auto; padding: 8px 10px; text-align: left;
  line-height: 1.5; border-radius: 10px; background: var(--rr-panel); border: 1px solid var(--rr-panel-line); overscroll-behavior: contain;
  -webkit-user-select: text; user-select: text;
}
.result-moves .mv { white-space: nowrap; }
.result-buttons { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-buttons #btn-rematch { grid-column: 1 / -1; }
.result-buttons .btn { min-width: 0; }


/* Title: one rank of the board in the studio squares (pale sand, red-rock clay, ADR-001 section 4). */
.title-board { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 240px); aspect-ratio: 8 / 1; border-radius: 4px; overflow: hidden; }
.title-board i { background: #e8d6b4; }
.title-board i:nth-child(even) { background: #a4553a; }
@media (max-height: 420px) { .title-board { display: none; } }

/* Short portrait phones (T752, P059 B6): Setup and Settings tighten spacing and type by height so every control stays on screen;
   buttons keep the 44 px hit target (menu-btn 44, dice 44). */
@media (orientation: portrait) and (max-height: 560px) {
  .screen.setup, .screen.settings { padding-top: 6px; padding-bottom: calc(6px + var(--rr-inset-bottom)); gap: 6px; }
  .screen-title { font-size: 1.4rem; }
  .menu-col { gap: 6px; }
  .menu-btn { min-height: 44px; }
  .settings-note { font-size: 0.8rem; }
}

/* T760: a tap on a locked Dice mode highlights the unlock note for about 1.2 s (menu.js adds and removes .nudge). */
.settings-note.nudge { color: var(--rr-ink); font-weight: 700; outline: 2px solid var(--rr-accent, #d9822b); outline-offset: 3px; border-radius: 6px; animation: cd-nudge 0.6s ease-in-out 2; }
@keyframes cd-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .settings-note.nudge { animation: none; } }

/* Dice Path (T739): four trial rows (name and opponent left, state pill right), each at least 48 px tall; a locked row is dimmed. */
.path-col { gap: 8px; }
.menu-btn.path-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; min-height: 56px; }
.path-row .pr-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.path-row .pr-sub { font-size: 0.85rem; opacity: 0.85; }
.path-row .pr-state { white-space: nowrap; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--rr-accent); color: #1a1208; min-width: 3.8em; text-align: center; }
.path-row .pr-state.locked { background: transparent; border: 1px solid var(--rr-panel-line); color: inherit; opacity: 0.8; }
.path-row[data-state="cleared"] .pr-state { background: transparent; border: 1px solid var(--rr-accent); color: inherit; }
.path-row[disabled] { opacity: 0.7; }
@media (orientation: portrait) and (max-height: 560px) {
  .screen.path { padding-top: 6px; padding-bottom: calc(6px + var(--rr-inset-bottom)); gap: 6px; }
  .menu-btn.path-row { min-height: 48px; }
}

/* Settings: Reset progress confirm row (T739): the question, then Reset and Cancel, 44 px targets. */
.menu-btn.danger { border-color: #b8382c; }
.confirm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirm-row .confirm-text { grid-column: 1 / -1; font-size: 0.95rem; }
.confirm-row .btn { min-width: 0; }

/* Result for a trial (T739): the trial line sits under the reason; Try again and Dice Path fill the grid. */
.result-trial { font-weight: 700; }
.result-buttons .btn.wide { grid-column: 1 / -1; }