/* Shared player navigation and touch targets. Keep status pills and grids unchanged. */
.app-shell {
  padding-top: max(9px, env(safe-area-inset-top));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
.topbar, .rw-topbar {
  position: relative;
  min-height: 54px;
}
.topbar .brand-lockup, .rw-topbar .rw-brand { min-width: 0; }
.topbar .brand-title, .rw-topbar .rw-brand-name { overflow-wrap: anywhere; }
.rw-shell--play .rw-topbar { min-height: 54px; }
.secondary-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: max(6px, env(safe-area-inset-top));
  min-height: calc(54px + env(safe-area-inset-top));
}
.primary-pill, .secondary-pill, .ghost-pill, .compact-pill { min-height: 44px; }
a.primary-pill, a.secondary-pill, a.ghost-pill { min-height: 48px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.topbar .home-entry, .topbar .menu-btn, .rw-top-control { min-width: 44px; min-height: 44px; }
.rw-tabs a, .rw-back-link { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.rw-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rw-tabs a { overflow-wrap: anywhere; }
.tutorial-prompt-close { width: 44px; height: 44px; }
.tutorial-prompt-copy { padding-right: 40px; }
.tutorial-back-btn + .tutorial-back-btn { margin-top: 8px; }
.rules-modal, .rw-menu-overlay {
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.rules-card, .rw-menu-card {
  max-height: calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  scroll-padding-top: 70px;
}
.dialog-topbar {
  position: sticky;
  top: -14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -14px -14px 12px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid #c8d2e3;
}
.dialog-topbar h2, .dialog-topbar h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dialog-top-close {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #b7c9ef;
  border-radius: 12px;
  background: #fff;
  color: #0f2e80;
  font: 700 .85rem "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}
:where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid #1344b8; outline-offset: 3px; }
:where(.topbar, .rw-topbar, .rw-tabs) :focus-visible { outline-color: #ffd966; }
/* An overflow-scrolling ancestor would prevent tutorial headers sticking. */
.tutorial-shell, .rw-shell--tutorial { overflow: visible; }
/* Keep controls in normal flow so enlarged text cannot collide with branding. */
.topbar, .rw-topbar, .rw-shell--play .rw-topbar {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr);
  gap: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
.topbar::before, .topbar::after, .rw-topbar::before, .rw-topbar::after { content: ""; min-width: 44px; grid-row: 1; }
.topbar::before, .rw-topbar::before { grid-column: 1; }
.topbar::after, .rw-topbar::after { grid-column: 3; }
.topbar .brand-lockup, .rw-topbar .rw-brand { grid-column: 2; grid-row: 1; }
.topbar .ghost-pill.home-entry, .topbar .menu-btn,
.rw-topbar .rw-top-control, .rw-shell--play .rw-top-control {
  position: static;
  height: auto;
  grid-row: 1;
}
.topbar .home-entry, .rw-home-control { grid-column: 1; justify-self: start; }
.topbar .menu-btn, .rw-menu-button { grid-column: 3; justify-self: end; }
@media (max-width: 520px) {
  /* Long difficulty names must stay inside narrow practice selectors. */
  .rw-puzzle-link { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: 2px 6px; padding: 8px 10px; }
  .rw-puzzle-link small { grid-column: 2; margin-left: 0; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .rw-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}