/* One touch-first game view, with or without native browser fullscreen. */
#board { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
body[data-state="playing"] #board:active { cursor: grabbing; }
body.focus-mode {
  height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none;
}
.focus-mode .site-header { flex: 0 0 auto; width: 100%; max-width: none; margin: 0; padding: 4px 12px; min-height: 52px; gap: 8px; }
.focus-mode .brand { font-size: 17px; min-width: 0; gap: 8px; }
.focus-mode .brand>span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.focus-mode .brand-mark { width: 26px; height: 26px; flex-shrink: 0; }
.focus-mode .brand-sub, .focus-mode .nav-label, .focus-mode footer { display: none; }
.focus-mode .site-header nav { gap: 0; flex-shrink: 0; }
.focus-mode .site-header .quiet-button { min-width: 44px; min-height: 44px; padding: 10px; }
.focus-mode .layout {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 760px;
  margin: 0 auto; padding: 6px 10px 8px; display: grid;
  grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto;
  gap: 6px 12px; align-content: center; align-items: start;
}
.focus-mode .game, .focus-mode .game-aside { display: contents; }
.focus-mode .scoreboard { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(28px,.8fr) minmax(28px,.8fr) 44px; grid-column: 1; grid-row: 1; width: calc(100% - 88px); gap: 8px; padding: 0; min-height: 48px; }
.focus-mode .scoreboard>div, .focus-mode .scoreboard>div:first-child { min-width: 0; }
.focus-mode .scoreboard span { font-size: 12px; margin-bottom: 2px; }
.focus-mode .scoreboard strong { font-size: 24px; }
.focus-mode .scoreboard .pause-button { margin: 0; width: 44px; height: 44px; }
.focus-mode .scoreboard .long-score { font-size: 18px; overflow-wrap: anywhere; }
.focus-mode .board-wrap { grid-column: 1; grid-row: 2; width: var(--play-board-width, 220px); min-width: 0; max-width: 100%; max-height: none; height: auto; aspect-ratio: auto; border-width: 5px; border-radius: 12px; justify-self: center; }
.focus-mode #board { display: block; width: 100%; height: auto; aspect-ratio: 1/2; }
.focus-mode .next-section { grid-column: 1; grid-row: 1; width: 76px; justify-self: end; padding: 0; border: 0; align-self: start; }
.focus-mode .next-section h2 { font-size: 11px; line-height: 1.3; margin: 0; letter-spacing: .7px; }
#next { background: var(--board); border-radius: 7px; }
.focus-mode #next { display: block; width: 76px; height: 40px; margin: 2px 0 0; }
/* Paused and finished rounds remain readable even on short screens. */
.focus-mode .board-overlay { position: fixed; inset: auto; top: calc(50% + 20px); left: 50%; transform: translate(-50%,-50%); width: min(320px,calc(100% - 32px)); height: auto; max-height: calc(100dvh - 86px); z-index: 5; padding: 24px 16px; border: 1px solid #dbe3ce33; border-radius: 14px; background: #253e3afa; box-shadow: 0 8px 40px #14291f40; overflow: auto; justify-content: safe center; }
.focus-mode .board-overlay>* { flex-shrink: 0; }
.focus-mode:not([data-state="playing"]) .board-wrap { z-index: 10; }
.focus-mode .board-overlay h2 { font-size: 32px; }
.focus-mode .board-overlay p { font-size: 15px; }
.focus-mode .board-overlay .overlay-footnote { font-size: 12px; }
.focus-mode .board-overlay .overlay-kicker { font-size: 11px; }
.focus-mode .welcome-mark { margin-bottom: 14px; }
.focus-mode .board-overlay .primary-button, .focus-mode .tempo-choice { width: min(214px, 100%); }
.tempo-choice button, .board-overlay .text-button { min-height: 44px; }
.play-notice { position: fixed; z-index: 20; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: min(420px, calc(100% - 28px)); width: max-content; padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; text-align: center; box-shadow: 0 3px 20px #0002; pointer-events: none; }
.play-notice:empty { display: none; }
@media(max-width:600px) {
  body[data-view="home"] .site-header { margin: 0; padding: 9px 14px; }
  body[data-view="home"] .brand { font-size: 18px; }
  body[data-view="home"] .brand-mark { width: 26px; height: 26px; }
}
@media(orientation:landscape) {
  .focus-mode .site-header { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .focus-mode .layout { max-width: 960px; padding: 6px 16px 8px; grid-template-columns: minmax(0,1fr) 210px; grid-template-rows: 48px minmax(0,1fr); gap: 18px 20px; align-content: center; }
  .focus-mode .board-wrap { grid-column: 1; grid-row: 1/3; align-self: center; }
  .focus-mode .scoreboard { grid-column: 2; grid-row: 1; width: 100%; min-height: 44px; gap: 6px; }
  .focus-mode .scoreboard strong { font-size: 21px; }
  .focus-mode .next-section { grid-column: 2; grid-row: 2; justify-self: start; }
}
@media(orientation:landscape) and (max-height:600px) {
  .focus-mode .board-overlay { width: min(360px,calc(100% - 32px)); max-height: calc(100dvh - 72px); padding: 12px 20px; }
  .focus-mode .welcome-mark, .focus-mode .overlay-footnote { display: none; }
  .focus-mode .board-overlay h2 { font-size: 28px; margin: 0 0 8px; }
  .focus-mode .board-overlay h2 br { display: none; }
  .focus-mode .board-overlay p { margin: 0 0 10px; }
  .focus-mode .tempo-choice { margin-bottom: 9px; padding: 3px; }
  .focus-mode .tempo-choice button { padding: 7px; }
  .focus-mode .board-overlay .primary-button { min-height: 44px; padding: 10px; }
}
@media(max-width:600px) and (max-height:720px) {
  .focus-mode .welcome-mark { display: none; }
  .focus-mode .board-overlay h2 { font-size: 27px; margin: 10px 0; }
  .focus-mode .board-overlay p { margin-bottom: 12px; }
  .focus-mode .board-overlay { padding: 10px; }
}