/* Route/surface ownership hooks */

html[data-route-class="route-signin"] body #entryAuthSignupDetails,
html[data-route-class="route-signin"] body #entryAuthRecoveryDetails,
html[data-route-class="route-recovery"] body #entryAuthSignupDetails,
html[data-route-class="route-guest"] body #entryAuthSignupDetails,
html[data-route-class="route-guest"] body #entryAuthRecoveryDetails,
body.route-signin #entryAuthSignupDetails,
body.route-recovery #entryAuthSignupDetails,
body.route-guest #entryAuthSignupDetails,
body.route-guest #entryAuthRecoveryDetails,
body.route-signin #entryAuthRecoveryDetails {
  display: none;
}

html[data-route-class="route-signup"] body #entryAuthRecoveryDetails,
html[data-route-class="route-guest"] body #entryAuthSigninBlock,
body.route-signup #entryAuthRecoveryDetails {
  display: none;
}

html[data-route-class="route-signup"] body #entryAuthSignupDetails,
html[data-route-class="route-recovery"] body #entryAuthRecoveryDetails,
html[data-route-class="route-guest"] body #entryAuthGuestDetails,
html[data-route-class="route-signin"] body #entryAuthSigninBlock,
body.route-signup #entryAuthSignupDetails,
body.route-recovery #entryAuthRecoveryDetails,
body.route-guest #entryAuthGuestDetails,
body.route-signin #entryAuthSigninBlock {
  display: block;
}

html[data-route-class="route-signup"] body #entryAuthSigninBlock,
html[data-route-class="route-recovery"] body #entryAuthSigninBlock,
html[data-route-class="route-guest"] body #entryAuthSigninBlock,
body.route-signup #entryAuthSigninBlock,
body.route-recovery #entryAuthSigninBlock,
body.route-guest #entryAuthSigninBlock {
  display: none;
}

html[data-route-class="route-signup"] body #entryAuthSignupDetails,
html[data-route-class="route-recovery"] body #entryAuthRecoveryDetails,
body.route-signup #entryAuthSignupDetails,
body.route-recovery #entryAuthRecoveryDetails {
  border-color: rgba(224, 195, 122, 0.35);
}

html[data-route-class="route-signup"] body #entryAuthSignupDetails[open],
html[data-route-class="route-recovery"] body #entryAuthRecoveryDetails[open],
body.route-signup #entryAuthSignupDetails[open],
body.route-recovery #entryAuthRecoveryDetails[open] {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

html[data-route-class="route-play"] body #entryScreen,
html[data-route-class="route-play"] body #roomScreen,
html[data-route-class="route-room-wait"] body #entryScreen,
html[data-route-class="route-room-match"] body #entryScreen,
body.route-play #entryScreen,
body.route-play #roomScreen,
body.route-room-wait #entryScreen,
body.route-room-match #entryScreen {
  display: none;
}

html[data-route-class="route-watch"] body #lobbyScreen,
html[data-route-class="route-library"] body #lobbyScreen,
body.route-watch #lobbyScreen,
body.route-library #lobbyScreen {
  display: none;
}

html[data-auth-guard="1"] body #entryScreen {
  display: block !important;
}

html[data-auth-guard="1"] body #lobbyScreen,
html[data-auth-guard="1"] body #roomScreen,
html[data-auth-guard="1"] body #serviceScreen {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Final room layout stabilization (2026-03-08)                               */
/* -------------------------------------------------------------------------- */

@media (min-width: 1101px) {
  body.runtime-browser.room-waiting #roomPlayersPanel { grid-area: players !important; }
  body.runtime-browser.room-waiting #waitingPanel { grid-area: waiting !important; }
  body.runtime-browser.room-waiting #roomChatPanel { grid-area: chat !important; }
  body.runtime-browser.room-waiting #roomLogPanel { grid-area: log !important; }
  body.runtime-browser.room-waiting #roomInfoDock { grid-area: info !important; }
}

@media (max-width: 1100px) {
  body.room-playing #roomScreen,
  body.room-waiting #roomScreen {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  body.room-playing .room-grid-main,
  body.room-waiting .room-grid-main {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
  }

  body.room-playing .room-grid-main > section.right-col,
  body.room-playing .room-grid-main > aside.left-col,
  body.room-waiting .room-grid-main > section.right-col,
  body.room-waiting .room-grid-main > aside.left-col {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  body.room-playing .room-grid-main > section.right-col {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.room-playing .room-grid-main > aside.left-col {
    order: 2;
    flex: 0 0 auto;
    min-height: 0;
  }

  body.room-playing #roomInfoDock {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }

  body.room-playing #gamePanel { order: 1 !important; }
  body.room-playing #roomPhasePanel { order: 2 !important; }
  body.room-playing #actionPanel { order: 3 !important; }
  body.runtime-browser.room-playing #actionPanel { position: static !important; }
  body.room-playing #roomPlayersPanel { order: 4 !important; }
  body.room-playing #roomChatPanel { order: 5 !important; }
  body.room-playing #roomLogPanel { order: 6 !important; }

  body.room-waiting .room-grid-main > section.right-col {
    order: 1;
    flex: 0 0 auto;
    min-height: 0;
  }

  body.room-waiting .room-grid-main > aside.left-col {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.room-waiting #waitingPanel {
    display: grid !important;
    order: 1;
  }

  body.room-waiting #roomInfoDock {
    order: 2;
    display: grid;
    gap: 8px;
  }

  body.room-waiting #roomPlayersPanel {
    order: 3;
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.room-waiting #roomPlayersPanel .player-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.room-waiting #roomChatPanel {
    order: 4;
    flex: 0 0 auto;
    max-height: min(34vh, 280px);
  }

  body.room-waiting #roomPlayersPanel .player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  body.room-waiting #roomPlayersPanel .player-controls .field {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.room-waiting .player-ready-home {
    display: flex;
    flex: 0 0 auto;
  }

  body.room-waiting #readyToggleBtn,
  body.room-waiting #leaveDockBtn {
    width: auto;
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 40px;
    margin-top: 0 !important;
    padding: 8px 10px;
  }

  body.room-waiting #leaveDockBtn {
    font-size: 0.82rem;
  }

  /* Let the browser runtime keep its own scroll/grid model instead of inheriting the standalone dock layout. */
  body.runtime-browser.room-playing #roomScreen,
  body.runtime-browser.room-waiting #roomScreen {
    overflow-y: auto;
  }

  body.runtime-browser.room-playing .room-grid-main,
  body.runtime-browser.room-waiting .room-grid-main {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
  }
}

/* -------------------------------------------------------------------------- */
/*  Final route/layout pass (2026-03-11)                                      */
/* -------------------------------------------------------------------------- */

.topbar-room-meta {
  display: none;
}

body.mode-room header.topbar {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(9, 15, 24, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body.mode-room header.topbar .service-nav,
body.mode-room header.topbar .brand-kicker,
body.mode-room header.topbar #brandTitle,
body.mode-room header.topbar #brandSubtitle,
body.mode-room header.topbar #globalStatus,
body.mode-room header.topbar #nickBadge,
body.mode-room header.topbar #eloBadge,
body.mode-room header.topbar #logoutBtn,
body.mode-room header.topbar #sfxToggleBtn,
body.mode-room header.topbar #langToggleBtn {
  display: none !important;
}

body.mode-room header.topbar .brand {
  justify-self: start;
  width: 100%;
  text-align: left;
}

body.mode-room .topbar-room-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.mode-room #roomTitle {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mode-room #roomStateText {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

body.mode-room header.topbar .status-wrap {
  justify-self: end;
  gap: 8px;
}

body.mode-room header.topbar .status-wrap > *:not(#roomCodeBadge) {
  display: none !important;
}

body.mode-room header.topbar #menuBtn {
  display: inline-flex !important;
}

body.mode-room header.topbar #roomCodeBadge {
  max-width: min(34vw, 180px);
}

body.mode-room.room-playing header.topbar {
  grid-template-areas:
    "menu brand status"
    "nav nav nav";
  row-gap: 8px;
}

body.mode-room.room-playing header.topbar #menuBtn {
  grid-area: menu;
}

body.mode-room.room-playing header.topbar .brand {
  grid-area: brand;
}

body.mode-room.room-playing header.topbar .status-wrap {
  grid-area: status;
}

body.mode-room.room-playing header.topbar .service-nav {
  grid-area: nav;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

body.mode-room.room-playing header.topbar .service-nav .btn {
  min-height: 36px;
  padding: 6px 0;
  font-size: 0.78rem;
}

body.mode-entry #entryScreen,
body.mode-lobby #lobbyScreen,
body.route-watch #serviceScreen,
body.route-library #serviceScreen {
  max-width: 1280px;
  margin: 0 auto;
}

body.mode-entry #entryScreen .entry-card {
  width: min(1240px, 100%);
  gap: 24px;
}

@media (min-width: 1101px) {
  html:not([data-ui-skin="snapshot"]) body.mode-room #roomPlayersPanel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "players"
      "controls";
  }

  html:not([data-ui-skin="snapshot"]) body.mode-room #roomPlayersPanel > * {
    min-width: 0;
  }

  html:not([data-ui-skin="snapshot"]) body.mode-room #roomPlayersPanel .player-list {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mode-entry #entryScreen .entry-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 420px);
    align-items: start;
  }

  body.mode-entry #entryScreen .entry-card > :is(.hero-mini, .hero-title, .hero-desc, .entry-trust-strip, .entry-loop-strip, #entryProofBlock) {
    grid-column: 1;
  }

  body.mode-entry #entryScreen .entry-card > :is(#entryAuthHomeBlock, #entryAuthResumeBlock, #entryAuthSigninBlock, #entryAuthGuestDetails, #entryAuthSignupDetails, #entryAuthRecoveryDetails) {
    grid-column: 2;
    grid-row: 1 / span 5;
    width: 100%;
    max-width: 420px;
    justify-self: end;
  }
}

body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .hero-mini,
body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .hero-title,
body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .hero-desc,
body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .entry-loop-strip,
body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) #entryProofBlock,
html[data-route-class="route-signin"] body #entryScreen .hero-mini,
html[data-route-class="route-signin"] body #entryScreen .hero-title,
html[data-route-class="route-signin"] body #entryScreen .hero-desc,
html[data-route-class="route-signin"] body #entryScreen .entry-loop-strip,
html[data-route-class="route-signin"] body #entryScreen #entryProofBlock,
html[data-route-class="route-signup"] body #entryScreen .hero-mini,
html[data-route-class="route-signup"] body #entryScreen .hero-title,
html[data-route-class="route-signup"] body #entryScreen .hero-desc,
html[data-route-class="route-signup"] body #entryScreen .entry-loop-strip,
html[data-route-class="route-signup"] body #entryScreen #entryProofBlock,
html[data-route-class="route-recovery"] body #entryScreen .hero-mini,
html[data-route-class="route-recovery"] body #entryScreen .hero-title,
html[data-route-class="route-recovery"] body #entryScreen .hero-desc,
html[data-route-class="route-recovery"] body #entryScreen .entry-loop-strip,
html[data-route-class="route-recovery"] body #entryScreen #entryProofBlock,
html[data-route-class="route-guest"] body #entryScreen .hero-mini,
html[data-route-class="route-guest"] body #entryScreen .hero-title,
html[data-route-class="route-guest"] body #entryScreen .hero-desc,
html[data-route-class="route-guest"] body #entryScreen .entry-loop-strip,
html[data-route-class="route-guest"] body #entryScreen #entryProofBlock,
body.route-signin #entryScreen .hero-mini,
body.route-signin #entryScreen .hero-title,
body.route-signin #entryScreen .hero-desc,
body.route-signin #entryScreen .entry-loop-strip,
body.route-signin #entryScreen #entryProofBlock,
body.route-signup #entryScreen .hero-mini,
body.route-signup #entryScreen .hero-title,
body.route-signup #entryScreen .hero-desc,
body.route-signup #entryScreen .entry-loop-strip,
body.route-signup #entryScreen #entryProofBlock,
body.route-recovery #entryScreen .hero-mini,
body.route-recovery #entryScreen .hero-title,
body.route-recovery #entryScreen .hero-desc,
body.route-recovery #entryScreen .entry-loop-strip,
body.route-recovery #entryScreen #entryProofBlock,
body.route-guest #entryScreen .hero-mini,
body.route-guest #entryScreen .hero-title,
body.route-guest #entryScreen .hero-desc,
body.route-guest #entryScreen .entry-loop-strip,
body.route-guest #entryScreen #entryProofBlock,
html[data-route-class="route-signin"] body #entryScreen #entryAuthHomeBlock,
html[data-route-class="route-signup"] body #entryScreen #entryAuthHomeBlock,
html[data-route-class="route-recovery"] body #entryScreen #entryAuthHomeBlock,
html[data-route-class="route-guest"] body #entryScreen #entryAuthHomeBlock,
body.route-signin #entryScreen #entryAuthHomeBlock,
body.route-signup #entryScreen #entryAuthHomeBlock,
body.route-recovery #entryScreen #entryAuthHomeBlock,
body.route-guest #entryScreen #entryAuthHomeBlock {
  display: none !important;
}

body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .entry-card,
html[data-route-class="route-signin"] body #entryScreen .entry-card,
html[data-route-class="route-signup"] body #entryScreen .entry-card,
html[data-route-class="route-recovery"] body #entryScreen .entry-card,
html[data-route-class="route-guest"] body #entryScreen .entry-card,
body.route-signin #entryScreen .entry-card,
body.route-signup #entryScreen .entry-card,
body.route-recovery #entryScreen .entry-card,
body.route-guest #entryScreen .entry-card {
  width: min(420px, 100%);
  display: block;
}

#lobbyPane_rooms {
  display: grid;
  gap: 16px;
}

.play-public-rooms-panel {
  margin-top: 0;
}

.play-decision-grid {
  margin: 0;
}

#lobbyPane_rooms[data-play-path="quick"] [data-play-panel="join"],
#lobbyPane_rooms[data-play-path="quick"] [data-play-panel="create"],
#lobbyPane_rooms[data-play-path="join"] [data-play-panel="quick"],
#lobbyPane_rooms[data-play-path="join"] [data-play-panel="create"],
#lobbyPane_rooms[data-play-path="create"] [data-play-panel="quick"],
#lobbyPane_rooms[data-play-path="create"] [data-play-panel="join"] {
  display: none !important;
}

#serviceScreen {
  max-width: 1280px;
  margin: 0 auto;
}

.service-overview {
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.service-hero-card {
  padding: 14px 16px;
}

.service-signal-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-signal-card {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
}

.service-lane-grid {
  gap: 14px;
}

#librarySurface .library-grid {
  grid-template-columns: 420px minmax(0, 1fr);
}

#librarySurface .library-replay {
  position: sticky;
  top: 78px;
}

@media (min-width: 901px) {
  #librarySurface[data-replay-state="empty"] .library-grid {
    grid-template-columns: minmax(320px, 420px) minmax(320px, 520px);
    justify-content: start;
  }

  #librarySurface[data-replay-state="empty"] .library-replay {
    min-height: 0;
  }
}

.room-command-stash {
  display: none !important;
}

.room-utility-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.room-waiting #roomPhasePanel,
body.room-playing #roomPhasePanel[data-phase="main"],
body.room-playing #roomPhasePanel[data-phase="intro"],
body.room-playing #roomPhasePanel[data-phase="cleanup"],
body.room-playing #roomPhasePanel[data-phase="end"] {
  display: none !important;
}

body.room-playing #openHostConfigBtn,
body.room-playing #hostConfigPanel {
  display: none !important;
}

#gamePanel {
  gap: 12px;
  overflow: visible;
}

body.room-playing #gamePanel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  align-content: start;
}

body.room-playing #gamePanel > * {
  grid-column: 1 !important;
  grid-row: auto !important;
}

.match-hud {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

#gamePanel .board-header {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.phase-badge {
  border-width: 1px;
  border-color: rgba(211, 176, 106, 0.32);
  background: rgba(211, 176, 106, 0.12);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.timer-wrap {
  gap: 6px;
  font-size: 12px;
}

.timer-meter {
  height: 6px;
  margin: 0;
  border-width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

#turnIndicator {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font-size: 13px;
}

#phaseExplainerPill {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#phaseExplainerPillLabel {
  padding: 0;
  background: transparent;
  color: var(--soft);
  font-size: 12px;
  letter-spacing: 0.04em;
}

#phaseExplainerPill strong {
  color: var(--muted);
  font-size: 13px;
}

#phaseExplainer {
  display: none !important;
}

#compactScoreStrip {
  gap: 8px;
  margin: 0;
}

.compact-score-card {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.compact-score-name,
.compact-score-meta {
  font-size: 12px;
}

.compact-score-total strong {
  font-size: 20px;
}

.board-legend {
  margin: 0;
  justify-content: flex-start;
  gap: 12px;
  font-size: 12px;
}

.board-frame {
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
}

.board-frame::before {
  inset: 4px;
  opacity: 0.45;
}

.board {
  width: min(100%, var(--board-fit, 780px));
  border-radius: 12px;
  background:
    linear-gradient(180deg, #e4cca3 0%, #ddc08f 100%),
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.16) 0%, transparent 40%);
  box-shadow:
    inset 0 0 0 1px rgba(43, 38, 38, 0.16),
    inset 0 12px 18px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.28);
}

#boardModeCue {
  width: fit-content;
  max-width: min(100%, 520px);
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11, 17, 26, 0.92);
  box-shadow: none;
}

#boardModeCue p {
  font-size: 12px;
  line-height: 1.35;
}

#spectatorModeBanner {
  padding: 10px 12px;
  border-radius: 16px;
}

#scoreDetails {
  width: 100%;
  max-width: 360px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

#scoreDetails .details-summary {
  min-height: 0;
  padding: 12px 14px;
  font-size: 13px;
}

#scoreDetails .score-grid {
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#actionPanel .action-dock-row-primary,
#actionPanel .action-dock-row-utility {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#actionPanel .action-dock-row-secondary {
  grid-template-columns: 1fr;
}

body.room-waiting #waitingPanel {
  text-align: left;
  gap: 14px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.room-waiting #waitingPanel .waiting-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

body.room-waiting #waitingPanel .waiting-flow-strip {
  display: flex !important;
}

body.room-waiting #waitingSeatSummary {
  margin-top: 0;
}

body.room-waiting #waitingInfoGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.waiting-mini-panel {
  gap: 6px;
}

.waiting-mini-actions {
  display: grid;
  gap: 8px;
}

.waiting-mini-action-dock .btn,
#waitingMiniCtaBtn {
  width: 100%;
}

.result-dialog {
  width: min(520px, calc(100vw - 32px));
  text-align: left;
  padding: 24px;
}

.result-title {
  font-size: 28px;
  line-height: 1.08;
}

.result-reason {
  font-size: 15px;
  color: var(--muted);
}

.result-summary {
  font-size: 14px;
  color: var(--soft);
}

.result-details {
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.result-details-summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
}

.result-breakdown-detail-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.result-breakdown-detail-row {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.result-next-action {
  min-height: 48px;
  margin-top: 14px;
}

.result-secondary-actions,
.result-post-actions {
  gap: 16px;
  justify-content: flex-start;
}

.result-post-actions {
  display: none;
}

@media (min-width: 1101px) {
  body.room-playing .room-grid-main {
    grid-template-columns: 236px minmax(0, 1fr) 292px !important;
    grid-template-areas:
      "players board action"
      "chat board action"
      "log board info";
    gap: 16px;
    align-items: start;
  }

  body.room-playing #roomPlayersPanel { grid-area: players !important; }
  body.room-playing #gamePanel { grid-area: board !important; }
  body.room-playing #actionPanel { grid-area: action !important; }
  body.room-playing #roomChatPanel { grid-area: chat !important; }
  body.room-playing #roomLogPanel { grid-area: log !important; }
  body.room-playing #roomInfoDock { grid-area: info !important; }

  body.room-waiting .room-grid-main {
    grid-template-columns: 236px minmax(0, 1fr) 292px !important;
    grid-template-areas:
      "players waiting info"
      "chat waiting info"
      ". waiting .";
    gap: 16px;
    align-items: start;
  }

  body.room-waiting #roomPlayersPanel { grid-area: players !important; }
  body.room-waiting #waitingPanel { grid-area: waiting !important; }
  body.room-waiting #roomInfoDock { grid-area: info !important; }
  body.room-waiting #roomChatPanel { grid-area: chat !important; }

  body.room-waiting.room-waiting-no-host-config .room-grid-main {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    grid-template-areas:
      "players waiting"
      "chat waiting"
      ". waiting";
  }

  body.room-waiting.room-waiting-no-host-config #roomInfoDock {
    display: none !important;
  }

  body.room-waiting:not(.room-waiting-no-host-config) .room-grid-main {
    grid-template-columns: 236px minmax(0, 1fr) 292px !important;
  }

  body.room-waiting #waitingMiniPanel,
  body.room-playing #waitingMiniPanel {
    display: none !important;
  }

  body.room-playing #roomChatPanel,
  body.room-playing #roomLogPanel {
    max-height: 240px;
  }
}

@media (min-width: 1101px) and (max-width: 1280px) and (orientation: portrait) {
  body.room-waiting:not(.room-waiting-no-host-config) .room-grid-main {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    grid-template-areas:
      "players waiting"
      "chat waiting"
      ". info";
  }

  body.room-waiting:not(.room-waiting-no-host-config) #roomInfoDock {
    width: min(100%, 520px);
    justify-self: start;
  }
}

@media (min-width: 1281px) and (orientation: portrait) {
  body.room-waiting:not(.room-waiting-no-host-config) .room-grid-main {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    grid-template-areas:
      "players waiting"
      "chat waiting"
      ". info";
  }

  body.room-waiting:not(.room-waiting-no-host-config) #waitingPanel {
    width: min(100%, 960px);
    justify-self: start;
  }

  body.room-waiting:not(.room-waiting-no-host-config) #roomInfoDock {
    width: min(100%, 520px);
    justify-self: start;
  }

  body.runtime-browser.room-waiting.room-waiting-no-host-config #waitingPanel {
    width: min(100%, 960px);
    justify-self: start;
  }
}

@media (min-width: 1366px) and (orientation: landscape) {
  body.room-waiting.room-waiting-no-host-config #waitingPanel {
    width: min(100%, 960px);
    justify-self: start;
  }
}

@media (min-width: 2200px) and (min-height: 1300px) and (orientation: landscape) {
  body.runtime-browser.room-playing:not(.room-focus-play) .room-grid-main {
    grid-template-areas:
      "players board action"
      "chat board info"
      "log board ." !important;
  }

  body.runtime-browser.room-playing:not(.room-focus-play) #roomInfoDock {
    align-self: start;
  }
}

@media (min-width: 1366px) and (max-height: 950px) and (orientation: landscape) {
  body.runtime-wrapper.platform-android.room-playing:not(.room-focus-play) .room-grid-main {
    grid-template-areas:
      "players board action"
      "chat board info"
      "log board ." !important;
  }

  body.runtime-wrapper.platform-android.room-playing:not(.room-focus-play) #roomInfoDock {
    align-self: start;
  }

  body.runtime-wrapper.platform-android.room-playing:not(.room-focus-play) #gamePanel {
    padding: 10px;
    gap: 8px;
  }

  body.runtime-wrapper.platform-android.room-playing:not(.room-focus-play) #gamePanel .board-header,
  body.runtime-wrapper.platform-android.room-playing:not(.room-focus-play) #phaseExplainerPill {
    padding: 8px 10px;
  }

  body.runtime-wrapper.platform-android.room-playing:not(.room-focus-play) #compactScoreStrip {
    display: none !important;
  }

  body.runtime-wrapper.platform-android.room-playing:not(.room-focus-play) #gamePanel {
    --board-fit: min(68vmin, 700px);
  }

  body.runtime-wrapper.platform-android.room-playing.room-focus-play .room-grid-main {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    grid-template-areas: "board actions" !important;
    gap: 12px;
    align-items: start;
  }

  body.runtime-wrapper.platform-android.room-playing.room-focus-play #gamePanel {
    grid-area: board !important;
    padding: 12px;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 220px;
    --board-fit: min(64vmin, 640px);
  }

  body.runtime-wrapper.platform-android.room-playing.room-focus-play #actionPanel {
    grid-area: actions !important;
    width: min(320px, 100%);
    position: sticky !important;
    top: 10px;
    align-self: start;
  }
}

@media (max-width: 1100px) {
  body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) #entryProofBlock,
  body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .entry-loop-strip,
  html[data-route-class="route-signin"] body #entryScreen #entryProofBlock,
  html[data-route-class="route-signin"] body #entryScreen .entry-loop-strip,
  html[data-route-class="route-signup"] body #entryScreen #entryProofBlock,
  html[data-route-class="route-signup"] body #entryScreen .entry-loop-strip,
  html[data-route-class="route-recovery"] body #entryScreen #entryProofBlock,
  html[data-route-class="route-recovery"] body #entryScreen .entry-loop-strip,
  html[data-route-class="route-guest"] body #entryScreen #entryProofBlock,
  html[data-route-class="route-guest"] body #entryScreen .entry-loop-strip,
  body.route-signin #entryScreen #entryProofBlock,
  body.route-signin #entryScreen .entry-loop-strip,
  body.route-signup #entryScreen #entryProofBlock,
  body.route-signup #entryScreen .entry-loop-strip,
  body.route-recovery #entryScreen #entryProofBlock,
  body.route-recovery #entryScreen .entry-loop-strip,
  body.route-guest #entryScreen #entryProofBlock,
  body.route-guest #entryScreen .entry-loop-strip {
    display: none !important;
  }

  body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .entry-trust-strip,
  html[data-route-class="route-signin"] body #entryScreen .entry-trust-strip,
  html[data-route-class="route-signup"] body #entryScreen .entry-trust-strip,
  html[data-route-class="route-recovery"] body #entryScreen .entry-trust-strip,
  html[data-route-class="route-guest"] body #entryScreen .entry-trust-strip,
  body.route-signin #entryScreen .entry-trust-strip,
  body.route-signup #entryScreen .entry-trust-strip,
  body.route-recovery #entryScreen .entry-trust-strip,
  body.route-guest #entryScreen .entry-trust-strip {
    display: flex !important;
    gap: 6px;
    margin: 4px 0 2px;
  }

  body.mode-entry #entryScreen[data-auth-view]:not([data-auth-view="home"]) .entry-trust-pill,
  html[data-route-class="route-signin"] body #entryScreen .entry-trust-pill,
  html[data-route-class="route-signup"] body #entryScreen .entry-trust-pill,
  html[data-route-class="route-recovery"] body #entryScreen .entry-trust-pill,
  html[data-route-class="route-guest"] body #entryScreen .entry-trust-pill,
  body.route-signin #entryScreen .entry-trust-pill,
  body.route-signup #entryScreen .entry-trust-pill,
  body.route-recovery #entryScreen .entry-trust-pill,
  body.route-guest #entryScreen .entry-trust-pill {
    padding: 5px 8px;
    font-size: 0.66rem;
  }

  .play-decision-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .play-decision-card {
    min-height: auto;
    padding: 12px 10px;
  }

  .play-decision-kicker,
  .play-decision-copy,
  .play-decision-meta {
    display: none;
  }

  .lobby-grid,
  #librarySurface .library-grid,
  .service-lane-grid {
    grid-template-columns: 1fr;
  }

  body.room-waiting #waitingMiniPanel {
    display: none !important;
  }

  body.room-waiting #waitingPanel {
    display: grid !important;
    position: relative;
  }

  body.room-playing #gamePanel {
    order: 1 !important;
  }

  body.room-playing #actionPanel {
    order: 2 !important;
  }

  body.room-playing #roomPlayersPanel {
    order: 3 !important;
  }

  body.room-playing #roomChatPanel {
    order: 4 !important;
    max-height: 56dvh;
  }

  body.room-playing #roomLogPanel {
    order: 5 !important;
  }

  .match-hud {
    padding: 10px 12px;
  }

  #gamePanel .board-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #phaseExplainerPill {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #compactScoreStrip {
    grid-template-columns: 1fr 1fr;
  }

  #scoreDetails .score-grid {
    grid-template-columns: 1fr;
  }

  .result-dialog {
    width: 100%;
    max-width: none;
    min-height: 74vh;
    margin-top: auto;
    border-radius: 20px 20px 0 0;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body.room-playing #roomScreen {
    display: block !important;
    overflow: visible;
  }

  body.room-playing .room-grid-main {
    display: grid !important;
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    grid-template-areas: "side main";
    gap: 10px;
    min-height: 0;
    overflow: visible;
  }

  body.room-playing .room-grid-main > aside.left-col {
    grid-area: side;
    display: grid !important;
    gap: 10px;
    width: auto;
    min-width: 0;
    order: initial !important;
    flex: none !important;
  }

  body.room-playing .room-grid-main > section.right-col {
    grid-area: main;
    display: grid !important;
    gap: 10px;
    width: auto;
    min-width: 0;
    order: initial !important;
    flex: none !important;
    overflow: visible;
  }

  body.room-playing #roomInfoDock {
    display: grid !important;
    gap: 10px;
  }

  body.room-playing #gamePanel {
    order: 1 !important;
    --board-fit: min(52vw, 48vh, 520px);
    overflow: visible;
  }

  body.room-playing #gamePanel .board-frame {
    width: min(100%, var(--board-fit, 560px));
    max-width: 100%;
    margin: 0 auto;
  }

  body.room-playing #gamePanel #board {
    width: min(100%, var(--board-fit, 520px)) !important;
    max-width: min(100%, var(--board-fit, 520px)) !important;
    height: auto !important;
  }

  body.room-playing #actionPanel {
    order: 1 !important;
    position: sticky !important;
    top: 10px;
  }

  body.runtime-browser.room-playing #actionPanel {
    position: sticky !important;
  }

  body.room-playing #roomPlayersPanel {
    order: 2 !important;
    display: block !important;
  }

  body.room-playing #roomInfoDock {
    order: 3 !important;
  }

  body.room-playing #roomPhasePanel {
    display: none !important;
  }

  body.room-playing #roomChatPanel {
    order: 2 !important;
    display: flex !important;
    max-height: clamp(220px, 28vh, 320px);
  }

  body.room-playing #actionPanel .action-dock-row-primary,
  body.room-playing #actionPanel .action-dock-row-secondary,
  body.room-playing #actionPanel .action-dock-row-utility {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.room-playing .match-hud {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    grid-template-areas:
      "header indicator"
      "meter meter"
      "phase phase"
      "compact compact";
    gap: 10px;
    padding: 10px 12px;
  }

  body.room-playing .match-hud > * {
    min-width: 0;
  }

  body.room-playing #gamePanel .board-header { grid-area: header; }
  body.room-playing #gamePanel #turnIndicator {
    grid-area: indicator;
    display: flex;
    align-items: center;
  }
  body.room-playing #gamePanel .timer-meter { grid-area: meter; }
  body.room-playing #phaseExplainerPill {
    grid-area: phase;
    flex-direction: row;
    gap: 8px;
  }
  body.room-playing #compactScoreStrip { grid-area: compact; }
}

@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  body.room-playing #roomScreen {
    display: block !important;
    overflow: visible;
  }

  body.room-playing .room-grid-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "side";
    gap: 12px;
    min-height: 0;
    overflow: visible;
  }

  body.room-playing .room-grid-main > section.right-col {
    grid-area: main;
    display: grid !important;
    gap: 12px;
    width: auto;
    min-width: 0;
    order: initial !important;
    flex: none !important;
    overflow: visible;
  }

  body.room-playing .room-grid-main > aside.left-col {
    grid-area: side;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "action info"
      "players players";
    gap: 12px;
    width: auto;
    min-width: 0;
    order: initial !important;
    flex: none !important;
    overflow: visible;
  }

  body.room-playing #gamePanel {
    order: 1 !important;
    --board-fit: min(68vw, 560px, max(320px, calc(100dvh - 35rem)));
    overflow: visible;
  }

  body.platform-android.room-playing #gamePanel {
    --board-fit: min(54vw, 486px);
  }

  body.room-playing #gamePanel .board-frame {
    width: min(100%, var(--board-fit, 560px));
    max-width: 100%;
    margin: 0 auto;
  }

  body.room-playing #gamePanel #board {
    width: min(100%, var(--board-fit, 560px)) !important;
    max-width: min(100%, var(--board-fit, 560px)) !important;
    height: auto !important;
  }

  body.room-playing #actionPanel {
    grid-area: action !important;
    order: 1 !important;
    position: static !important;
    top: auto;
  }

  body.runtime-browser.room-playing #actionPanel {
    position: static !important;
  }

  body.room-playing #roomPlayersPanel {
    grid-area: players !important;
    order: 2 !important;
    display: block !important;
  }

  body.room-playing #roomInfoDock {
    grid-area: info !important;
    order: 3 !important;
    display: grid !important;
    gap: 10px;
  }

  body.room-playing #roomPhasePanel {
    display: none !important;
  }

  body.room-playing #roomChatPanel {
    order: 2 !important;
    display: none !important;
    max-height: min(48dvh, 360px);
  }

  body.room-playing.room-chat-open #roomChatPanel {
    display: flex !important;
  }

  body.room-playing .match-hud {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
    grid-template-areas:
      "header indicator"
      "meter meter"
      "phase phase"
      "compact compact";
    gap: 10px;
    padding: 10px 12px;
  }
}

@media (min-width: 768px) and (max-width: 860px) and (max-height: 1280px) and (orientation: portrait) {
  body.room-playing .room-grid-main,
  body.room-playing .room-grid-main > section.right-col,
  body.room-playing .room-grid-main > aside.left-col {
    gap: 10px;
  }

  body.room-playing .room-grid-main > aside.left-col {
    grid-template-areas:
      "action info"
      "players players";
    align-items: stretch;
  }

  body.room-playing #gamePanel {
    --board-fit: min(60vw, 520px, max(320px, calc(100dvh - 41rem)));
    padding: 10px;
    gap: 8px;
  }

  body.runtime-browser.room-playing #gamePanel {
    --board-fit: min(60vw, 520px, max(320px, calc(100dvh - 41rem))) !important;
  }

  body.platform-android.room-playing #gamePanel {
    --board-fit: min(54vw, 470px, max(320px, calc(100dvh - 41rem)));
  }

  body.runtime-browser.platform-android.room-playing #gamePanel {
    --board-fit: min(54vw, 470px, max(320px, calc(100dvh - 41rem))) !important;
  }

  body.room-playing #roomInfoDock {
    gap: 8px;
  }

  body.room-playing #roomPlayersPanel {
    padding: 8px 10px;
    align-self: stretch;
  }

  body.room-playing #roomPlayerList {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-height: 840px) {
  body.room-playing #gamePanel {
    padding: 10px;
    gap: 8px;
  }

  body.room-playing .match-hud {
    gap: 8px;
  }

  body.room-playing #gamePanel .board-header {
    padding: 8px 10px;
  }

  body.room-playing #phaseExplainerPill {
    padding: 8px 10px;
  }

  body.room-playing #phaseExplainerPill strong {
    font-size: 0.8rem;
    line-height: 1.45;
  }
}

@media (max-width: 720px) {
  body.mode-room header.topbar {
    min-height: 56px;
    padding: 8px 10px;
  }

  body.mode-room #roomTitle {
    font-size: 16px;
  }

  body.mode-room #roomStateText {
    font-size: 12px;
  }

  body.mode-room header.topbar #roomCodeBadge {
    max-width: min(44vw, 156px);
  }

  #actionPanel .action-dock-row-primary,
  #actionPanel .action-dock-row-utility {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #actionPanel .action-dock-row-secondary {
    grid-template-columns: 1fr;
  }

  body.device-mobile.room-playing #matchRuleCard,
  body.device-mobile.room-playing #phaseExplainer {
    display: none !important;
  }

  body.device-mobile.room-playing #boardModeCue {
    width: 100%;
    max-width: none;
  }

  body.device-mobile.room-playing #roomInfoDock {
    display: grid !important;
    gap: 8px;
  }

  body.device-mobile.room-playing #roomInfoDock > :not(.room-utility-row) {
    display: none !important;
  }

  body.device-mobile.room-playing #roomInfoDock .room-utility-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  body.device-mobile.room-playing #roomInfoDock .room-utility-row > .btn {
    min-width: 0;
    min-height: 42px;
  }
}