@charset "UTF-8";

/*
  Shared tablet and mobile visual rules.
  Page-specific styles still own composition; this layer keeps interaction
  sizing and shared component meaning consistent below the desktop baseline.
  Active native games keep a separate section below because their playable
  area, player strip, and action dock must be sized as one screen.
*/

/* Touch feedback belongs to the controls and game boards. Suppress the
   browser's extra tap overlay, including on tablets with a mouse attached.
   This inherited touch-only paint setting leaves focus and selection intact. */
:root {
  -webkit-tap-highlight-color: transparent;
}

/* Shared page frame. Routes choose only a maximum content width; this
   primitive owns centering, safe side gutters, and shrink containment. */
.rookx-page-frame {
  --rx-page-frame-max: var(--rx-page-width-standard);
  width: 100%;
  max-width: calc(
    var(--rx-page-frame-max)
    + max(var(--rx-page-gutter), var(--rx-safe-left))
    + max(var(--rx-page-gutter), var(--rx-safe-right))
  );
  min-width: 0;
  margin-inline: auto;
  padding-left: max(var(--rx-page-gutter), var(--rx-safe-left));
  padding-right: max(var(--rx-page-gutter), var(--rx-safe-right));
}

.rookx-page-frame--reading {
  --rx-page-frame-max: var(--rx-page-width-reading);
}

.rookx-page-frame--narrow {
  --rx-page-frame-max: var(--rx-page-width-narrow);
}

.rookx-page-frame--wide {
  --rx-page-frame-max: var(--rx-page-width-wide);
}

/* Shared rail workspace. Analytics and moderation pages choose their rail
   width with variables, while this owner controls the outer two-column to
   one-column transition. */
.rookx-workspace-shell {
  display: grid;
  grid-template-columns:
    minmax(var(--rx-workspace-rail-min, 220px), var(--rx-workspace-rail-size, 270px))
    minmax(0, 1fr);
  min-height: var(--rx-workspace-min-height, calc(100dvh - var(--rx-size-topbar)));
  height: auto;
  align-items: start;
}

.rookx-workspace-main {
  min-width: 0;
  overflow: visible;
}

/* Dense records keep their full meaning inside a local scroll surface instead
   of widening the page. Action-heavy member records use the adaptive pattern
   below because squeezing buttons and identity into table columns is not
   readable or touch-friendly. */
.rookx-data-scroller {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.rookx-data-scroller::-webkit-scrollbar {
  display: block;
  height: 8px;
}

.rookx-data-scroller:focus-visible {
  outline: 3px solid var(--rx-color-focus);
  outline-offset: 2px;
}

.rookx-data-table {
  width: 100%;
}

.rookx-adaptive-member-list {
  min-width: 0;
  container-type: inline-size;
  container-name: rookx-member-list;
}

.rookx-adaptive-member-list > .clan-member-cards {
  display: none;
}

@container rookx-member-list (max-width: 35rem) {
  .rookx-adaptive-member-list > .rookx-data-table {
    display: none;
  }

  .rookx-adaptive-member-list > .clan-member-cards {
    display: grid;
    gap: var(--rx-space-2);
    padding: var(--rx-space-2);
  }

  .rookx-adaptive-member-list .clan-member-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "player player"
      "rank rating"
      "challenge actions";
    gap: var(--rx-space-2);
    padding: var(--rx-space-3);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-control);
    background: var(--rx-color-surface-raised);
  }

  .rookx-adaptive-member-list .clan-member-card:not(:has(.clan-member-actions-cell)) {
    grid-template-areas:
      "player player"
      "rank rating"
      "challenge challenge";
  }

  .rookx-adaptive-member-list .clan-member-card > * {
    min-width: 0;
    min-height: var(--rx-size-tap-min);
    padding: 0;
    border: 0;
  }

  .rookx-adaptive-member-list .clan-member-player-cell {
    grid-area: player;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .rookx-adaptive-member-list .clan-member-cell,
  .rookx-adaptive-member-list .clan-member-cell > div {
    width: 100%;
    min-width: 0;
  }

  .rookx-adaptive-member-list .clan-member-cell .avatar {
    width: 32px;
    height: 32px;
  }

  .rookx-adaptive-member-list .clan-member-name {
    display: block;
    max-width: 100%;
    font-size: 0.9rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .rookx-adaptive-member-list .clan-member-data-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    white-space: normal;
  }

  .rookx-adaptive-member-list .clan-member-data-cell::before {
    content: attr(data-label);
    color: var(--rx-color-text-muted);
    font-size: 0.72rem;
    font-weight: var(--rx-font-weight-heavy);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .rookx-adaptive-member-list .clan-member-rank-cell {
    grid-area: rank;
    align-items: flex-start;
  }

  .rookx-adaptive-member-list .clan-member-rating-cell {
    grid-area: rating;
    align-items: flex-end;
  }

  .rookx-adaptive-member-list .clan-member-challenge-cell {
    grid-area: challenge;
    display: flex;
    align-items: center;
  }

  .rookx-adaptive-member-list .clan-member-challenge-btn {
    width: 100%;
    min-width: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
    font-size: 0.86rem;
  }

  .rookx-adaptive-member-list .clan-member-actions-cell {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .rookx-adaptive-member-list .clan-member-manage-trigger {
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
    height: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
  }

  .rookx-adaptive-member-list > .clan-members-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--rx-space-3);
    padding-inline: var(--rx-space-2);
  }

  .rookx-adaptive-member-list .clan-members-pagination {
    width: 100%;
    min-width: 0;
    margin-right: 0;
    justify-content: center;
  }

  .rookx-adaptive-member-list .clan-rating-filter,
  .rookx-adaptive-member-list .clan-rating-select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* Social rows carry variable player names, role tags, unread counts, and
   actions. Let the component react to its own usable width and to enlarged
   text instead of assuming that every phone gives the row the same space. */
#friendsList {
  container-type: inline-size;
  container-name: rookx-friends-list;
}

@container rookx-friends-list (max-width: 16em) {
  body:not(.native-game-active) #homePage #friendsList .friend-row {
    flex-direction: column;
    align-items: stretch;
  }

  body:not(.native-game-active) #homePage #friendsList .friend-main,
  body:not(.native-game-active) #homePage #friendsList .friend-actions {
    width: 100%;
  }

  body:not(.native-game-active) #homePage #friendsList .friend-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body:not(.native-game-active) #homePage #friendsList .friend-actions .pill.unread {
    margin-right: auto;
  }
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  /* Safari zooms small editable text on focus, including on iPads and in
     landscape. One shared floor covers every form and game/chat composer. */
  :root body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    font-size: max(16px, 1rem) !important;
  }

  /* Ordinary controls keep the same touch contract inside game screens.
     Board cells and cards have their own geometry and do not use .btn. */
  body .btn,
  body .community-post-action,
  body .community-rail-add,
  body .community-rail-create,
  body .chat-message-avatar-button,
  body .chat-channel-rail-button,
  body .chat-channel-rail-add,
  body:not(.native-game-active) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.chat-channel-select-legacy),
  body:not(.native-game-active) select:not(.chat-channel-select-legacy),
  body:not(.native-game-active) textarea {
    min-width: var(--rx-size-tap-min) !important;
    min-height: var(--rx-size-tap-min) !important;
    box-sizing: border-box;
  }

  /* Artwork remains 18px; only the touch area grows. */
  body .chat-back-button {
    width: var(--rx-size-tap-min);
    height: var(--rx-size-tap-min);
    flex-basis: var(--rx-size-tap-min);
  }

  /* Inline chat authors share an avatar action. Conversation identities own
     a two-row profile button. Neither uses this generic one-row link layout. */
  body:not(.native-game-active) button.player-link:not(.global-name, .chat-peer-details),
  body:not(.native-game-active) .site-footer a,
  body:not(.native-game-active) .rookx-privacy-choices-link {
    display: inline-flex;
    min-height: var(--rx-size-tap-min) !important;
    align-items: center;
  }

  body:not(.native-game-active) .leaderboard-mode-toggle .btn,
  body:not(.native-game-active) .leaderboard-page-btn,
  body:not(.native-game-active) .friend-challenge-btn,
  body:not(.native-game-active) .friend-menu-toggle,
  body:not(.native-game-active) .chat-toolbar .btn.btn-icon,
  body:not(.native-game-active) .chat-layout-actions .btn.btn-icon {
    min-height: var(--rx-size-tap-min) !important;
  }

  body:not(.native-game-active) .leaderboard-page-btn,
  body:not(.native-game-active) .friend-menu-toggle {
    min-width: var(--rx-size-tap-min) !important;
  }

  body:not(.native-game-active) #homePage #friendsList .friend-menu-toggle {
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
    height: var(--rx-size-tap-min);
  }

  body .topbar-right > #chatOverlayToggle.topbar-chat-btn,
  body .topbar-actions > #chatOverlayToggle.topbar-chat-btn {
    width: var(--rx-size-tap-min) !important;
    min-width: var(--rx-size-tap-min) !important;
    height: var(--rx-size-tap-min) !important;
    min-height: var(--rx-size-tap-min) !important;
  }

  body:not(.native-game-active) .clan-hq-tab {
    min-height: var(--rx-size-tap-min) !important;
  }

  body:not(.native-game-active) .community-back-link,
  body:not(.native-game-active) #profileClan a.player-link {
    display: inline-flex;
    min-height: var(--rx-size-tap-min) !important;
    align-items: center;
  }

  body:not(.native-game-active) .community-post-gallery-arrow {
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
    height: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
  }

  body:not(.native-game-active) .moderation-type-filter,
  body:not(.native-game-active) .community-report-filters button {
    min-height: var(--rx-size-tap-min) !important;
  }

  body:not(.native-game-active) .community-moderation-header-actions .community-refresh-button {
    width: var(--rx-size-tap-min) !important;
    min-width: var(--rx-size-tap-min) !important;
    height: var(--rx-size-tap-min) !important;
    min-height: var(--rx-size-tap-min) !important;
  }

  body:not(.native-game-active) .community-feed-search button,
  body:not(.native-game-active) .community-feed-scope-tabs button,
  body:not(.native-game-active) .community-feed-sort-menu > summary,
  body:not(.native-game-active) .community-feed-sort-section button {
    min-height: var(--rx-size-tap-min) !important;
  }

  body:not(.native-game-active) .community-feed-sort-menu > summary {
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
  }

  body:not(.native-game-active) .community-feed-scope-tabs button {
    min-width: var(--rx-size-tap-min);
  }

  .chat-message-actions {
    max-width: calc(100vw - (2 * var(--rx-space-2)));
  }
}

/* Touch users keep a comfortable 44px hit target around the compact desktop
   control artwork. The toolbar floats outside message flow, so selecting a
   short or grouped message never moves the transcript. */
:root.chat-touch-actions-enabled :is(.global-msg:not(.global-system), .chat-msg-card, .native-game-chat-msg:not(.system)) {
  --chat-message-avatar-visual-size: var(--chatCompactAvatarVisualSize, 38px);
  --chat-message-action-hit-size: var(--rx-size-tap-min);
  --chat-message-action-visual-width: 30px;
  --chat-message-action-visual-height: 28px;
}

:root.chat-touch-actions-enabled :is(.global-msg, .chat-msg-card, .native-game-chat-msg) > .chat-message-actions {
  position: fixed;
  z-index: var(--rx-layer-overlay);
  top: var(--chat-message-actions-fixed-top, var(--rx-space-2)) !important;
  right: auto !important;
  left: var(--chat-message-actions-fixed-left, var(--rx-space-2)) !important;
  gap: 0;
}

:root.chat-touch-actions-enabled .chat-message-actions > :is(
  .chat-reply-button,
  .community-message-tools-button,
  .staff-chat-message-tools-button,
  .chat-reaction-add-overlay
) {
  position: relative !important;
  inset: auto !important;
  width: var(--chat-message-action-hit-size) !important;
  min-width: var(--chat-message-action-hit-size) !important;
  height: var(--chat-message-action-hit-size) !important;
  min-height: var(--chat-message-action-hit-size) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: inherit !important;
  transform: none !important;
}

:root.chat-touch-actions-enabled .chat-message-actions > :is(
  .chat-reply-button,
  .community-message-tools-button,
  .staff-chat-message-tools-button,
  .chat-reaction-add-overlay
)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: var(--chat-message-action-visual-width);
  height: var(--chat-message-action-visual-height);
  border: 1px solid var(--rx-color-border);
  border-radius: 8px;
  background: var(--rx-color-control);
  transform: translate(-50%, -50%);
}

:root.chat-touch-actions-enabled .chat-message-actions > :is(
  .chat-reply-button,
  .community-message-tools-button,
  .staff-chat-message-tools-button,
  .chat-reaction-add-overlay
):is(:hover, :focus-visible)::before {
  border-color: var(--rx-color-border-strong);
  background: var(--rx-color-control-hover);
}

:root.chat-touch-actions-enabled .chat-message-actions > :is(
  .chat-reply-button,
  .community-message-tools-button,
  .staff-chat-message-tools-button,
  .chat-reaction-add-overlay
) > * {
  position: relative;
}

/* Shared header geometry belongs here so every route receives the same tablet
   and phone lockup. Only an open notification menu may release phone clipping;
   that explicit exception remains with the notification component. */
body:not(.rx-landscape-shell) .topbar {
  --rx-header-gutter: 16px;
  padding-top: var(--rx-safe-top) !important;
  padding-left: max(var(--rx-header-gutter), var(--rx-safe-left)) !important;
  padding-right: max(var(--rx-header-gutter), var(--rx-safe-right)) !important;
}

@media (max-width: 900px) {
  .rookx-workspace-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar .brand > img.brand-mark {
    width: 42px;
    height: 39px;
  }

  .topbar .brand .brand-copy > img.brand-wordmark {
    height: 26px;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .topbar {
    --rx-header-gutter: 10px;
    height: auto;
    min-height: var(--rx-size-topbar-min);
    gap: 8px;
    overflow: hidden;
  }

  .topbar .brand {
    /* Give spare space to the wordmark, but never shrink the Home target
       below its artwork. The action group wraps when zoom leaves less room. */
    flex: 1 1 0;
    min-width: var(--rx-size-tap-min);
    max-width: 142px;
    gap: 7px;
    /* Artwork already shrinks to fit. Clipping its shadows here creates a
       rectangular patch, especially with the black tint's wider glow. */
    overflow: visible;
  }

  .topbar .brand > img.brand-mark {
    width: 38px;
    height: 36px;
  }

  .topbar .brand .brand-copy {
    flex: 1 1 auto;
    overflow: visible;
  }

  .topbar .brand .brand-copy > img.brand-wordmark {
    width: 100%;
    height: auto;
    max-height: 24px;
  }

  .topbar-right,
  .topbar-actions {
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-width: var(--rx-size-tap-min);
    gap: 5px;
  }

  .topbar-right > #chatOverlayToggle.topbar-chat-btn,
  .topbar-actions > #chatOverlayToggle.topbar-chat-btn,
  .topbar-right > .notification-anchor > .btn,
  .topbar-actions > .notification-anchor > .btn,
  .mobile-nav-toggle {
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
    height: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
  }
}

@media (max-width: 700px) {
  /* A player may have an automatic rank badge plus three chosen badges.
     Wrapping preserves each badge as readable metadata instead of squeezing
     or painting the row across the popup close control. */
  .player-popover-badges {
    min-height: 32px;
    max-height: none;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
  }

  .player-popover-badges .player-badge-chip:not(.player-badge-chip-tier),
  .player-popover-badges .player-badge-chip:not(.player-badge-chip-tier) > span:last-child {
    min-width: 0;
  }

  .player-popover-badges .player-badge-chip:not(.player-badge-chip-tier) {
    flex: 0 0 auto;
  }

  .player-popover-badges .player-badge-chip:not(.player-badge-chip-tier) > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 430px) {
  /* The puzzle is itself the primary control. Let it use the phone width so
     every one of its eight columns retains a real 44px tap area. */
  body:not(.native-game-active) .puzzle-board-shell {
    left: 50%;
    width: calc(100vw - 6px);
    max-width: none;
    margin-inline: 0;
    transform: translateX(-50%);
  }
}

/* Login, registration, and Direct Messages are the same kind of phone
   workspace: one fixed surface below the shared header, with scrolling owned
   by the surface content rather than by the page behind it. */
@media (max-width: 720px) {
  body.rookx-overlay-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Safari can pan the visual viewport as well as shrink it for a keyboard.
     The retained header and workspace must move together within that view. */
  body.rookx-overlay-open:not(.rx-landscape-shell) .topbar {
    top: var(--rx-visual-top, 0px);
  }

  /* The retained header can open its account menu above any phone workspace.
     Keep the menu and its dismissal surface together above the modal layer. */
  body.rookx-overlay-open .mobile-nav-backdrop {
    z-index: calc(var(--rx-layer-modal) + var(--rx-layer-dropdown));
  }
  body.rookx-overlay-open .mobile-nav-menu {
    z-index: calc(var(--rx-layer-modal) + var(--rx-layer-dropdown) + 1);
  }

  :root body [data-rx-overlay-active] {
    position: fixed;
    inset: calc(var(--rx-size-topbar) + var(--rx-visual-top, 0px)) 0 var(--rx-keyboard-bottom, 0px) !important;
    width: auto;
    height: auto;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none !important;
    z-index: var(--rx-layer-chat);
  }

  :root body [data-rx-overlay-suspended] { display: none !important; }
  :root body :is(.modal, .auth-modal)[data-rx-overlay-active] { z-index: var(--rx-layer-modal); outline: 0; }
  :root body [data-rx-overlay-backdrop] {
    inset: calc(var(--rx-size-topbar) + var(--rx-visual-top, 0px)) 0 0;
  }
  /* Retained editor parents keep delegated events and form ownership. They
     must not provide a transformed, clipped or blurred box around the phone
     workspace; the active panel owns the full visible area. */
  :root body [data-rx-overlay-keep-parent] { display: contents; animation: none; }
  :root body [data-rx-overlay-keep-parent][data-rx-overlay-suspended] { display: none !important; }
  body.rookx-overlay-open .community-action-dialog-backdrop:not([data-rx-overlay-backdrop]) {
    z-index: calc(var(--rx-layer-modal) + 1);
  }

  :root body .rookx-overlay-shell {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    font-size: var(--rx-font-size-body);
  }

  .rookx-overlay-toolbar {
    display: flex;
    align-items: center;
    gap: var(--rx-space-3);
    flex: 0 0 auto;
    padding: var(--rx-space-3) max(var(--rx-space-4), var(--rx-safe-right)) var(--rx-space-3) max(var(--rx-space-4), var(--rx-safe-left));
    border-bottom: 1px solid var(--rx-color-border);
    background: var(--rx-color-surface-quiet);
  }
  .rookx-overlay-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 1.15rem; }
  .rookx-overlay-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
  .rookx-overlay-back[hidden] { display: none; }
  .rookx-overlay-footer {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--rx-space-3) max(var(--rx-space-4), var(--rx-safe-right)) max(var(--rx-space-3), var(--rx-safe-bottom)) max(var(--rx-space-4), var(--rx-safe-left));
    border-top: 1px solid var(--rx-color-border);
    background: var(--rx-color-surface-quiet);
  }
  .rookx-overlay-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--rx-space-4) max(var(--rx-space-4), var(--rx-safe-right)) max(var(--rx-space-4), var(--rx-safe-bottom)) max(var(--rx-space-4), var(--rx-safe-left));
    overflow-wrap: anywhere;
  }
  .rookx-overlay-shell .notification-menu-title,
  .rookx-overlay-shell .player-popover-close { display: none; }
  .rookx-overlay-shell .notification-menu-header .muted.small { font-size: 0.9rem; }
  .rookx-overlay-shell .notification-menu-list { align-content: start; }
  .rookx-overlay-shell .notification-item { padding: var(--rx-space-3); background: var(--rx-color-surface); }
  /* The banner and summary form one card. Keep their outer edges aligned,
     including profiles whose older banner rules supply their own corners. */
  .player-popover.rookx-overlay-shell .player-popover-header {
    grid-template-columns: auto minmax(0, 1fr);
    border-radius: var(--rx-radius-panel) var(--rx-radius-panel) 0 0;
    border: 1px solid var(--rx-color-border);
    border-bottom: 0;
    background-clip: padding-box;
    box-shadow: none;
    min-height: 136px;
  }
  .player-popover.rookx-overlay-shell .player-popover-stats {
    border: 1px solid var(--rx-color-border);
    border-radius: 0 0 var(--rx-radius-panel) var(--rx-radius-panel);
    background-clip: padding-box;
    overflow: hidden;
  }
  .player-popover.rookx-overlay-shell .player-popover-avatar-wrap {
    border: 0;
    background: none;
    box-shadow: none;
  }
  .player-popover.rookx-overlay-shell .player-popover-avatar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }
  .player-popover.rookx-overlay-shell.has-profile-banner .player-popover-presence {
    color: var(--rx-color-on-media);
  }
  .rookx-overlay-shell:not(.has-profile-banner) .player-popover-header { background: var(--rx-color-surface); }
  .rookx-overlay-shell .player-popover-bio { max-height: none; overflow: visible; margin-inline: 0; background: var(--rx-color-surface); font-size: 1rem; }
  .rookx-overlay-shell .player-popover-bio-text { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; white-space: pre-wrap; }
  .rookx-overlay-shell .player-popover-actions { margin-inline: 0; }
  .rookx-overlay-shell .player-popover-btn { min-width: 0; height: auto; white-space: normal; }
  :root body .rookx-overlay-shell #playerPopoverQuickActions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rx-space-2); }
  :root body .rookx-overlay-shell #playerPopoverQuickActions .player-popover-btn { grid-column: auto; padding: var(--rx-space-3) var(--rx-space-2); font-size: 0.9rem; }
  :root body .rookx-overlay-shell #playerPopoverQuickActions .player-popover-action-label {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
  :root body .rookx-overlay-shell #playerPopoverOpen { font-size: 0.9rem; }

  #addFriendDialog.rookx-overlay-shell { gap: 0; }
  .community-notification-preview.rookx-overlay-shell .modal-header { display: none; }
  :root body .community-notification-preview.rookx-overlay-shell .modal-body {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
  }
  #addFriendDialog.rookx-overlay-shell > .rookx-overlay-body {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-3);
    overflow: hidden;
  }
  #addFriendDialog.rookx-overlay-shell :is(.add-friend-dialog-header, .field) { flex: 0 0 auto; }
  #addFriendDialog.rookx-overlay-shell :is(h2, [data-add-friend-close]) { display: none; }
  #addFriendDialog.rookx-overlay-shell .player-search-results {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    align-content: start;
  }
  #addFriendDialog.rookx-overlay-shell .player-search-result-profile { min-height: var(--rx-size-tap-min); }
  #addFriendDialog.rookx-overlay-shell .player-search-result-name { font-size: 1rem; }
  #challengeDialog.rookx-overlay-shell > .rookx-overlay-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  #challengeDialog.rookx-overlay-shell .modal-header,
  #challengeDialog.rookx-overlay-shell #btnChallengeDialogCancel { display: none; }
  #challengeDialog.rookx-overlay-shell .challenge-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
  #challengeDialog.rookx-overlay-shell .rookx-overlay-footer > .btn-primary { flex: 1; }

  /* Group forms use one scrolling body and the same viewport/keyboard owner as
     chats. Lists grow naturally; actions and feedback stay outside the scroll. */
  .group-chat-dialog.rookx-overlay-shell { gap: 0; }
  .group-chat-dialog.rookx-overlay-shell > .rookx-overlay-body {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-4);
  }
  .group-chat-dialog.rookx-overlay-shell > .rookx-overlay-body > * { flex: 0 0 auto; min-width: 0; }
  .group-chat-dialog.rookx-overlay-shell .group-chat-dialog-header h2,
  .group-chat-dialog.rookx-overlay-shell :is([data-group-chat-close], [data-group-chat-manage-close]) { display: none; }
  .group-chat-dialog.rookx-overlay-shell :is(.group-chat-friends, .group-chat-search-results, .group-chat-manage-members) {
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .group-chat-dialog.rookx-overlay-shell :is(.group-chat-user, .group-chat-manage-member) {
    min-height: var(--rx-size-tap-min);
    background: var(--rx-color-surface);
  }
  .group-chat-dialog.rookx-overlay-shell .group-chat-user.selected {
    background: rgba(var(--rx-color-accent-rgb), .12);
    border-color: var(--rx-color-accent);
  }
  .group-chat-dialog.rookx-overlay-shell :is(.group-chat-user > .player-name-color, .group-chat-manage-member-copy strong) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .group-chat-dialog.rookx-overlay-shell :is(.group-chat-section-label, .group-chat-manage-member-copy span) { font-size: var(--rx-font-size-sm); }
  .group-chat-dialog.rookx-overlay-shell .group-chat-manage-form { grid-template-columns: minmax(0, 1fr); }
  .group-chat-dialog.rookx-overlay-shell .group-chat-manage-section { order: 1; }
  .group-chat-dialog.rookx-overlay-shell .group-chat-invite-row { flex-wrap: wrap; }
  .group-chat-dialog.rookx-overlay-shell .group-chat-invite-row > .row { flex-wrap: wrap; }
  .group-chat-dialog.rookx-overlay-shell .rookx-overlay-footer .btn { flex: 1; }
  .group-chat-dialog.rookx-overlay-shell .status-text:empty { display: none; }
  .group-chat-dialog.rookx-overlay-shell .rookx-overlay-footer .status-text { max-height: 4.5em; overflow: auto; }

  :is(.clan-invite-dialog, .no-party-dialog).rookx-overlay-shell .modal-header { display: none; }
  :root body :is(.clan-invite-dialog, .no-party-dialog).rookx-overlay-shell .modal-body {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
  }
  .clan-invite-dialog.rookx-overlay-shell #btnClanInviteDialogCancel { display: none; }
  .clan-invite-dialog.rookx-overlay-shell .btn-primary { flex: 1; }
  :is(.clan-invite-dialog, .no-party-dialog).rookx-overlay-shell .rookx-overlay-footer {
    display: grid;
    gap: var(--rx-space-3);
  }
  :is(.clan-invite-dialog, .no-party-dialog).rookx-overlay-shell .rookx-overlay-footer :is(.notice, .no-party-error) {
    margin: 0;
    max-height: 4.5em;
    overflow: auto;
    overflow-wrap: anywhere;
  }
  .no-party-dialog.rookx-overlay-shell :is(.no-party-room, .no-party-invites) {
    min-width: 0;
    padding: var(--rx-space-3);
    border-color: var(--rx-color-border);
    background: var(--rx-color-surface);
  }
  .no-party-dialog.rookx-overlay-shell :is(.no-party-room-heading, .no-party-invite-row) { flex-wrap: wrap; }
  .no-party-dialog.rookx-overlay-shell :is(.no-party-room-heading, .no-party-invite-row) > span { min-width: 0; overflow-wrap: anywhere; }
  .no-party-dialog.rookx-overlay-shell .no-party-member {
    padding: var(--rx-space-2);
    gap: var(--rx-space-2);
    border-color: var(--rx-color-border);
    background: var(--rx-color-surface-quiet);
  }
  .no-party-dialog.rookx-overlay-shell :is(small, .no-party-ready, .no-party-error) { font-size: var(--rx-font-size-sm); }
  .no-party-dialog.rookx-overlay-shell :is(.no-party-ready, .no-party-room-heading .eyebrow) { color: var(--rx-color-text-muted); }
  .no-party-dialog.rookx-overlay-shell .no-party-player-result > span:last-child { color: var(--rx-color-text); }
  .no-party-dialog.rookx-overlay-shell .no-party-error {
    color: var(--rx-color-text);
    background: var(--rx-color-surface);
    border: 1px solid var(--rx-color-danger);
  }
  .no-party-dialog.rookx-overlay-shell .no-party-capacity-picker > small { text-align: start; }
  .no-party-dialog.rookx-overlay-shell .no-party-invite-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .no-party-dialog.rookx-overlay-shell :is(.no-party-player-search-wrap, .no-party-friend-picker) { grid-column: 1 / -1; }
  .no-party-dialog.rookx-overlay-shell :is(.no-party-player-results, .no-party-friend-picker) {
    position: static;
    width: auto;
    max-height: none;
    margin-top: var(--rx-space-2);
    overflow: visible;
    border-color: var(--rx-color-border);
    background: var(--rx-color-surface-quiet);
    box-shadow: none;
  }
  .no-party-dialog.rookx-overlay-shell .no-party-player-result { min-height: var(--rx-size-tap-min); }
  .no-party-dialog.rookx-overlay-shell .no-party-player-result strong { white-space: normal; overflow-wrap: anywhere; }
  .no-party-dialog.rookx-overlay-shell .no-party-room-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .no-party-dialog.rookx-overlay-shell .no-party-room-actions > * { flex: 1 1 110px; min-width: 0; white-space: normal; }

  :root body :is(.community-dialog, .community-settings-dialog, .community-topic-dialog, .community-report-dialog, .community-action-dialog, .board-crop-modal, .player-report-modal).rookx-overlay-shell {
    z-index: var(--rx-layer-modal);
    gap: 0;
    color: var(--rx-color-text);
  }
  :is(.community-dialog, .community-settings-dialog, .community-topic-dialog, .community-report-dialog, .community-action-dialog).rookx-overlay-shell .group-chat-dialog-header :is(h2, .btn-close),
  .board-crop-modal.rookx-overlay-shell .board-crop-modal-title,
  .board-crop-modal.rookx-overlay-shell [data-crop-close-slot],
  .player-report-modal.rookx-overlay-shell .modal-header { display: none; }
  :root body :is(.community-dialog, .community-settings-dialog, .community-topic-dialog, .community-report-dialog, .community-action-dialog).rookx-overlay-shell :is(.community-dialog-body, .community-owner-settings, .community-topic-dialog-body, .community-post-composer, .community-topic-rules, .community-results, .community-revision-history) {
    max-height: none;
    overflow: visible;
    min-width: 0;
  }
  :root body .community-topic-dialog.rookx-overlay-shell .community-topic-dialog-body { display: flex; flex-direction: column; align-items: stretch; }
  :root body .community-topic-dialog.rookx-overlay-shell .community-topic-rules { position: static; width: auto; }
  :root body :is(.community-dialog, .community-settings-dialog, .community-topic-dialog, .community-report-dialog, .community-action-dialog).rookx-overlay-shell :is(input, textarea, select) { font-size: 1rem; max-width: 100%; }
  :root body :is(.community-dialog, .community-settings-dialog, .community-topic-dialog, .community-report-dialog, .community-action-dialog).rookx-overlay-shell :is(.group-chat-dialog-actions, .community-form-actions) {
    position: sticky;
    bottom: calc(-1 * var(--rx-space-4));
    z-index: 1;
    padding: var(--rx-space-3);
    border-top: 1px solid var(--rx-color-border);
    background: var(--rx-color-overlay-solid);
    flex-wrap: wrap;
    gap: var(--rx-space-2);
  }
  :root body .community-topic-dialog.rookx-overlay-shell .community-form-actions { display: flex; flex-direction: row; align-items: center; }
  :root body .community-topic-dialog.rookx-overlay-shell .community-form-actions .btn { width: auto; }
  .community-topic-dialog.rookx-overlay-shell .community-form-feedback { flex: 1 1 160px; min-width: 0; }
  .community-topic-dialog.rookx-overlay-shell .community-form-error { max-height: 4.5em; overflow: auto; }
  .community-topic-dialog.rookx-overlay-shell .community-form-feedback > .muted { display: none; }
  :root body .player-report-modal.rookx-overlay-shell > .rookx-overlay-body { display: flex; padding: 0; overflow: hidden; }
  :root body .player-report-modal.rookx-overlay-shell .player-report-form { flex: 1; min-height: 0; max-height: none; margin: 0; }
  :root body .player-report-modal.rookx-overlay-shell .player-report-form-scroll { min-height: 0; flex: 1; }
  :root body .board-crop-modal.rookx-overlay-shell .board-crop-editor { padding: var(--rx-space-3); background: var(--rx-color-surface); }
  .board-crop-modal.rookx-overlay-shell .rookx-overlay-footer .btn { flex: 1; }
  .board-crop-modal.rookx-overlay-shell input[type="range"] { min-height: var(--rx-size-tap-min); }
  :root body .profile-banner-crop-modal.rookx-overlay-shell .profile-banner-crop-viewport { max-width: 100%; }
  :root body .board-crop-modal.rookx-overlay-shell [data-crop-viewport-slot] { max-width: 100%; height: auto; }
  .board-crop-modal.rookx-overlay-shell :is([data-crop-error], [data-banner-crop-error]) { flex-basis: 100%; margin: 0; max-height: 4.5em; overflow: auto; }

  body:has(.rookx-mobile-workspace:not(.hidden)) {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .rookx-mobile-workspace:is(#modalAuth, #dmPanel) {
    inset: var(--rx-size-topbar) 0 var(--rx-keyboard-bottom, 0px);
    top: max(var(--rx-size-topbar), var(--rx-visual-top, 0px));
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #modalBackdrop:not(.hidden) {
    /* Follow the same visible header boundary as the form. A fixed layout-
       viewport inset covers the retained header when Safari pans to a field. */
    inset: calc(var(--rx-size-topbar) + var(--rx-visual-top, 0px)) 0 0;
    /* Safari's translucent keyboard chrome reveals the layout viewport below
       the form. Continue the phone workspace surface behind those controls. */
    background: var(--rx-color-overlay-solid);
  }

  #modalAuth.rookx-mobile-workspace {
    transform: none !important;
  }

  #modalAuth.rookx-mobile-workspace:not(.hidden) {
    animation: rookxPopupSurfaceIn 220ms cubic-bezier(.2,.86,.24,1) both;
  }

  #modalAuth.rookx-mobile-workspace > .modal-header {
    padding-right: max(14px, var(--rx-safe-right));
    padding-left: max(14px, var(--rx-safe-left));
  }

  #modalAuth.rookx-mobile-workspace > .modal-body {
    padding-right: max(14px, var(--rx-safe-right));
    padding-bottom: max(14px, var(--rx-safe-bottom));
    padding-left: max(14px, var(--rx-safe-left));
  }

  #dmPanel.chat-overlay-panel.rookx-mobile-workspace {
    padding:
      var(--rx-space-3)
      max(var(--rx-space-3), var(--rx-safe-right))
      max(var(--rx-space-3), var(--rx-safe-bottom))
      max(var(--rx-space-3), var(--rx-safe-left));
  }
}

/* A software keyboard can shrink the visible screen without changing CSS
   viewport units. Ordinary dialogs and floating tablet chat use that same
   measured screen; their existing inner scroll regions keep actions reachable. */
:root[data-rx-keyboard-open] .modal:not(.rookx-mobile-workspace):not(.player-report-modal):not([data-rx-overlay-active]) {
  top: calc(var(--rx-visual-top) + var(--rx-visual-height) / 2);
  max-height: min(820px, calc(var(--rx-visual-height) - 24px));
}

:root[data-rx-keyboard-open] .modal.player-report-modal:not([data-rx-overlay-active]) {
  top: calc(var(--rx-visual-top) + 12px);
  bottom: calc(var(--rx-keyboard-bottom) + 12px);
  max-height: calc(var(--rx-visual-height) - 24px);
  left: 50%;
  right: auto;
  width: min(620px, calc(100% - 24px));
  transform: translateX(-50%) !important;
}

@media not all and (max-width: 720px) {
  :root[data-rx-keyboard-open] body:not(.rx-landscape-shell) :is(#dmPanel.chat-overlay-panel, #modalAuth.rookx-mobile-workspace) {
    top: calc(var(--rx-visual-top) + 12px);
    bottom: calc(var(--rx-keyboard-bottom) + 12px);
    height: auto;
    max-height: calc(var(--rx-visual-height) - 24px);
  }

  :root[data-rx-keyboard-open] body:not(.rx-landscape-shell) #modalAuth.rookx-mobile-workspace {
    /* The entrance animation retains its final centered transform. Keyboard
       positioning owns the vertical offset while this form is top anchored. */
    transform: translateX(-50%) !important;
  }
}

/*
  Native game screen contract

  The active board owns the available screen. Square and card games keep their
  own artwork rules in styles.css; this layer owns only the shared frame:
  usable viewport height, board/panel composition, and the root action dock.
*/
@media (min-height: 620px) {
  body.native-game-active.has-unity-embed {
    --unityH: clamp(560px, calc(100dvh - var(--topbarH) - 84px), 800px) !important;
  }
}

/* Poker hands must distribute all five cards inside the board column. The old
   fixed-width tracks let card five paint underneath the side panel at compact
   laptop widths. */
@media (min-width: 701px) and (max-width: 1180px) and (min-height: 620px) {
  body.native-game-active .native-game-shell.mode-battleship .native-game-main {
    grid-template-columns: minmax(0, 1fr) clamp(210px, 26vw, 250px);
    gap: 10px;
  }

  body.native-game-active .native-poker-board {
    grid-template-columns: minmax(0, 1fr);
    max-height: 100%;
    overflow: hidden;
  }

  body.native-game-active .native-poker-hand {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(4px, 1cqw, 10px);
  }

  body.native-game-active .native-poker-card {
    width: 100%;
    min-width: 0;
  }

  body.native-game-active .native-game-shell.mode-pokerduel .native-game-board-column,
  body.native-game-active .native-game-shell.mode-pokerduel :is(.worker-spectate-board-wrap, [data-native-board-slot]) {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  body.native-game-active .native-game-shell.mode-no .native-no-game {
    grid-template-rows: 50px minmax(0, 1fr) 180px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.native-game-active .native-game-shell.mode-no :is(.native-no-table, .native-no-hand-area) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

/* Desktop hands are fitted to both dimensions by native-poker-layout. */
@media (max-width: 1180px) and (min-height: 620px) {
  @container (min-width: 600px) {
    body.native-game-active .native-poker-hand {
      grid-template-columns: repeat(5, minmax(0, 116px));
      justify-content: space-between;
    }
  }
}

/* The game receives only part of a desktop window when chat is beside it.
   Measure that panel, not the window. Phone composition keeps its own dock. */
@media (min-width: 701px) {
  .game-shell.home-game {
    container: rookx-game / inline-size;
  }
}

/* Compact-width controls reserve their natural height; the board uses the rest.
   Information scrolls within that strip so a growing move log cannot shrink
   the board or push the actions out of view. Near-square windows need this too:
   orientation alone cannot choose a composition. The dedicated short-landscape
   shell remains its own owner. Never let the board size this measured frame. */
@container rookx-game (max-width: 900px) {
  body.native-game-active:where(:not(.rx-landscape-shell)) #nativeWorkerGameRoot,
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-root {
    height: 100%;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell,
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell .worker-spectate-content,
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell .worker-spectate-content-main {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-main,
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-battleship .native-game-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    align-content: stretch;
    align-items: stretch;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-board-column {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-pokerduel .native-game-board-column {
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-main .worker-spectate-board-wrap,
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-main [data-native-board-slot] {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    place-items: center;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-main [data-native-panel-slot] {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-pokerduel :is(.worker-spectate-board-wrap, [data-native-board-slot]) {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-pokerduel .native-poker-board {
    max-height: 100%;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-pokerduel .native-poker-hand {
    grid-template-columns: repeat(5, minmax(0, var(--native-poker-card-width, 96px)));
    justify-content: space-between;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-side,
  body.native-game-active:where(:not(.rx-landscape-shell)) .worker-spectate-side.native-game-side {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 38%);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "body actions";
    gap: 8px;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-side .native-game-tabs {
    display: none;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-side .native-game-panel-body {
    contain: size;
    overflow-y: auto;
  }

  /* Search information participates in the auto-sized footer row. Size
     containment is for growing logs, not for the picker and elapsed timer. */
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-practice-side[data-native-queue-practice="true"] .native-game-panel-body {
    contain: none;
    align-content: start;
    overflow: visible;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-practice-side[data-native-queue-practice="true"] .native-practice-summary {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 8px;
    padding: 4px;
    border: 0;
    background: transparent;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-practice-side[data-native-queue-practice="true"] :is(.native-practice-kicker, [data-native-practice-mode], [data-native-practice-difficulty], .native-practice-status, .native-practice-moves) {
    display: none;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-practice-side[data-native-queue-practice="true"] :is(.native-practice-game-picker, .native-practice-queue) {
    min-width: 0;
    margin: 0;
    gap: 2px;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-practice-side[data-native-queue-practice="true"] .native-practice-queue {
    font-size: .86rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-practice-side[data-native-queue-practice="true"] [data-native-queue-timer] {
    font-size: 1.1rem;
    line-height: 1.25;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-side .native-game-panel-actions {
    align-self: stretch;
    display: grid;
    align-items: end;
    padding: 0 0 0 8px;
    border-top: 0;
    border-left: 1px solid var(--rx-color-border);
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-side .native-game-actions {
    align-content: end;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-side .btn {
    min-height: var(--rx-size-tap-min);
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-no {
    height: 100%;
    min-height: 0;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-no .native-no-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    align-content: stretch;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-no .native-no-game {
    grid-template-rows: 42px minmax(0, 1fr) clamp(140px, 19svh, 170px);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-no :is(.native-no-table, .native-no-hand-area) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-no .native-game-side {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    border-left: 0;
  }
}

/* Short phone landscape keeps both player strips fully visible. Ocean gets the
   height that was previously lost to two conflicting subtraction rules. */
@media (max-width: 700px) and (max-height: 560px) and (orientation: landscape) {
  body.native-game-active .native-game-shell:not(.mode-battleship):not(.mode-pokerduel):not(.mode-no) {
    --native-mobile-board-size: min(calc(100svh - var(--topbarH) - 66px), calc(66vw - 18px), 440px);
  }


}

@media (max-width: 700px), (max-width: 1180px) and (orientation: landscape) {
  /* Promotion is a blocking choice, so it follows the visible small viewport
     instead of the board slot. The slot is intentionally clipped to protect
     board geometry and used to cut the chooser off in short landscape. */
  body.native-game-active .native-game-promotion {
    box-sizing: border-box;
    position: fixed;
    z-index: 7300;
    right: auto;
    bottom: calc(74px + var(--rx-safe-bottom));
    left: 50%;
    width: min(430px, calc(100dvw - 16px));
    max-height: calc(100dvh - var(--topbarH) - 90px - var(--rx-safe-bottom));
    margin: 0;
    overflow: auto;
    transform: translateX(-50%);
  }

  body.native-game-active .native-game-promotion-actions .btn {
    min-height: var(--rx-size-tap-min);
    font-size: max(.86rem, 16px);
  }
}

/* The action dock is moved to the game root on phones. A true viewport-level
   fixed element cannot be shifted sideways by a transformed game board. */
@media (max-width: 700px) {
  body.native-game-active #nativeWorkerGameRoot.has-responsive-action-dock .native-game-shell {
    padding-bottom: calc(66px + var(--rx-safe-bottom));
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] {
    box-sizing: border-box;
    z-index: 7250;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 6px max(6px, var(--rx-safe-right)) calc(6px + var(--rx-safe-bottom)) max(6px, var(--rx-safe-left));
    border: 1px solid color-mix(in srgb, var(--rx-color-accent) 28%, var(--rx-color-border));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
    background:
      linear-gradient(90deg, rgba(var(--rx-color-accent-rgb), .10), rgba(var(--rx-color-accent-secondary-rgb), .08)),
      var(--rx-color-surface-raised);
    transform: none;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] :is(.native-game-actions, .native-practice-actions) {
    display: flex;
    width: 100%;
    gap: 4px;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 12px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none !important;
  }

  /* RookX has five phone actions. Keep every draw state on two readable lines
     without changing the font or the neighbouring buttons. */
  body.native-game-active #nativeWorkerGameRoot:not(.has-mobile-controls):has(> .native-game-shell.mode-rookx) > .native-game-panel-actions[data-native-responsive-action-dock] .native-game-draw-label {
    inline-size: min-content;
    white-space: normal;
    overflow-wrap: normal;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] [data-native-action="queue-search-toggle"] {
    transition-property: transform, box-shadow;
  }

  :root[data-theme] body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] [data-native-action="resign"],
  :root[data-theme] body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] [data-native-queue-action="pause"] {
    border-color: var(--rx-color-danger);
    background: var(--rx-color-danger);
    color: #fff;
  }

  :root[data-theme] body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] [data-native-queue-action="resume"] {
    border-color: var(--rx-color-success);
    background: var(--rx-color-success);
    color: #052e16;
  }

  :root[data-theme] body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] [data-native-practice-action="difficulty"]:disabled {
    color: var(--rx-color-text);
    opacity: 1;
  }

  /* Queue practice uses one viewport-level tray: information above actions in
     portrait, then one compact row in landscape. Keeping both pieces at the
     root avoids transformed game layouts shifting either row off-screen. */
  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell {
    padding-bottom: calc(131px + var(--rx-safe-bottom));
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-main {
    grid-template-rows: minmax(0, 1fr);
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-main [data-native-panel-slot] {
    display: none;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell:not(.mode-no) {
    --native-mobile-board-size: min(calc(100vw - 20px), calc(100svh - var(--topbarH) - 188px), 410px);
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-battleship {
    --native-battleship-mobile-grid-size: min(calc(100vw - 24px), calc(100svh - var(--topbarH) - 295px), 500px);
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-battleship .native-battleship-board.practice-challenge {
    --battle-practice-grid-size: var(--native-ocean-grid-size, var(--native-battleship-mobile-grid-size));
    width: min(100%, calc(var(--battle-practice-grid-size) + 12px)) !important;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-layout {
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-game {
    grid-template-rows: 34px minmax(0, 1fr) 156px;
    height: 100%;
    min-height: 0;
    gap: 4px;
    padding: 4px 6px;
    overflow: hidden;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-announcements {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-hand-area {
    height: 156px;
    min-height: 0;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-hand {
    height: 125px;
    min-height: 125px;
    padding-top: 18px;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-hand .native-no-card:not(.is-playable),
  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-hand .native-no-card:disabled,
  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-hand .native-no-card[aria-disabled="true"] {
    --no-card-settled-filter: saturate(.42) brightness(.7) contrast(.94);
    --no-card-settled-shadow: 0 7px 14px rgba(0, 0, 0, .28);
    opacity: 1;
    filter: var(--no-card-settled-filter);
    box-shadow: var(--no-card-settled-shadow);
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell.mode-no .native-no-hand .native-no-card.is-playable:not(:disabled):not([aria-disabled="true"]) {
    --no-card-settled-filter: saturate(1.04) brightness(1.025);
    --no-card-settled-shadow: 0 13px 25px rgba(0, 0, 0, .46);
    opacity: 1;
    filter: var(--no-card-settled-filter);
    box-shadow: var(--no-card-settled-shadow);
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] {
    box-sizing: border-box;
    z-index: 7240;
    right: 0;
    bottom: calc(57px + var(--rx-safe-bottom));
    left: 0;
    display: block;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    padding: 4px max(8px, var(--rx-safe-right)) 4px max(8px, var(--rx-safe-left));
    border: 1px solid color-mix(in srgb, var(--rx-color-accent) 28%, var(--rx-color-border));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
    background:
      linear-gradient(90deg, rgba(var(--rx-color-accent-rgb), .10), rgba(var(--rx-color-accent-secondary-rgb), .08)),
      var(--rx-color-surface-raised);
    transform: none;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-game-panel-body {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(168px, .9fr);
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] :is(
    .native-practice-kicker,
    [data-native-practice-mode],
    [data-native-practice-difficulty],
    .native-practice-status
  ) {
    display: none;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-game-picker {
    display: grid;
    grid-template-rows: 11px 44px;
    width: 100%;
    min-width: 0;
    gap: 3px;
    margin: 0;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-game-picker > span,
  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-queue::before {
    display: block;
    color: var(--rx-color-text-muted);
    font-size: .62rem;
    font-weight: 850;
    line-height: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-queue::before {
    content: "Queue";
    grid-column: 1 / -1;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-game-picker select {
    width: 100%;
    min-width: 0;
    height: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
    padding: 4px 30px 4px 10px;
    font-size: .86rem;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-game-picker select:focus-visible {
    border-color: var(--rx-color-accent);
    outline: 2px solid var(--rx-color-focus);
    outline-offset: -2px;
    box-shadow: none;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-game-picker::after {
    bottom: 18px;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-queue {
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 11px 44px;
    align-items: center;
    min-width: 0;
    min-height: 0;
    gap: 3px 6px;
    margin: 0;
    line-height: 1;
    text-align: left;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-queue > span {
    display: block;
    max-width: none;
    overflow: hidden;
    color: var(--rx-color-text-muted);
    font-size: .68rem;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] [data-native-queue-timer]:not([hidden]) {
    display: grid;
    min-width: 36px;
    min-height: var(--rx-size-tap-min);
    place-items: center;
    color: var(--rx-color-text);
    font-size: .9rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock-kind="queue"] {
    border-top-color: var(--rx-color-border);
    border-radius: 0;
    box-shadow: none;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-promotion {
    bottom: calc(139px + var(--rx-safe-bottom));
    max-height: calc(100dvh - var(--topbarH) - 155px - var(--rx-safe-bottom));
  }
}


/* Fleet setup uses the same bounded frame before queueing and after accepting
   a match. This phase owns one scroll surface; the outer stage and action dock
   never scroll. Its layout signal also drives native-ocean-layout.js. */
@media (max-width: 900px) {
  body.native-game-active:where(:not(.rx-landscape-shell)) #nativeWorkerGameRoot .native-game-shell.has-ocean-setup .native-game-main {
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) #nativeWorkerGameRoot .native-game-shell.has-ocean-setup .native-game-board-column {
    grid-template-areas: "board";
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    gap: 0;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.has-ocean-setup .native-game-matchbar {
    display: none !important;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) #nativeWorkerGameRoot .native-game-shell.has-ocean-setup :is([data-native-board-wrap], [data-native-board-slot]) {
    grid-area: board;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    align-items: stretch;
    overflow: hidden;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) #nativeWorkerGameRoot .native-game-shell.has-ocean-setup [data-native-board-slot] {
    grid-area: 1 / 1;
    display: block;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 8px;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) #nativeWorkerGameRoot .native-game-shell.has-ocean-setup .native-battleship-setup-board {
    --native-ocean-setup-layout: stacked;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max-content max-content;
    align-content: start;
    gap: 5px;
    padding: 4px 6px;
    overflow: visible;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.has-ocean-setup .native-battleship-setup-grid {
    width: var(--native-battleship-setup-grid-size, 200px);
    height: var(--native-battleship-setup-grid-size, 200px);
    justify-self: center;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.has-ocean-setup .native-battleship-ship-btn {
    min-height: var(--rx-size-tap-min);
  }
}

/* Above 600px the grid and a 260px control panel fit beside each other,
   including open foldables below the tablet breakpoint. */
@media (min-width: 601px) and (max-width: 900px) {
  body.native-game-active:where(:not(.rx-landscape-shell)) #nativeWorkerGameRoot .native-game-shell.has-ocean-setup .native-battleship-setup-board {
    --native-ocean-setup-layout: columns;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
    grid-template-rows: max-content;
    align-items: start;
    gap: 12px;
  }
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.has-ocean-setup .native-battleship-setup-panel {
    gap: 8px;
    padding: 10px;
  }
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.has-ocean-setup .native-battleship-dock {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.has-ocean-setup .native-battleship-ship-btn {
    padding-block: 5px;
  }
}

/* Wide compact Ocean battles use two complete grids. Stacking desktop-sized
   squares inside the bounded game frame clips rows on an unfolded phone. */
@media (min-width: 701px) and (max-width: 900px) {
  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-battleship:not(.has-ocean-setup) [data-native-board-slot] {
    place-items: start center;
    overflow: auto;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-battleship .native-battleship-board:not(.native-battleship-setup-board) {
    --native-ocean-battle-layout: columns;
    width: 100% !important;
    grid-template-rows: max-content max-content;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-battleship .native-battleship-boards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-battleship .native-battleship-boards.single {
    grid-template-columns: minmax(0, 1fr);
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-battleship .native-battleship-grid-panel {
    width: 100%;
    grid-template-rows: max-content max-content;
  }

  body.native-game-active:where(:not(.rx-landscape-shell)) .native-game-shell.mode-battleship.has-fitted-ocean-grid .native-battleship-grid {
    width: var(--native-ocean-grid-size);
    height: var(--native-ocean-grid-size);
  }
}

/* Portrait games fit the measured stage row instead of growing from phone
   width alone. This keeps the same composition across narrow, wide, short,
   and tall phones without device-specific breakpoints. */
@media (max-width: 700px) {
  body.native-game-active.mobile-portrait #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell:is(.mode-battleship, .mode-pokerduel) .native-game-main {
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    align-content: stretch;
    overflow: hidden;
  }

  body.native-game-active.mobile-portrait #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell.mode-battleship:not(.has-ocean-setup) .native-game-board-column {
    grid-template-rows: minmax(30px, auto) minmax(0, 1fr) minmax(30px, auto);
    height: 100%;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
  }

  body.native-game-active.mobile-portrait #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell.mode-battleship:not(.has-ocean-setup) .native-game-board-column
    :is(.worker-spectate-board-wrap, [data-native-board-slot]) {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  body.native-game-active.mobile-portrait #nativeWorkerGameRoot.has-responsive-queue-tray
    .native-game-shell.mode-battleship:not(.has-ocean-setup) .native-game-board-column
    :is(.worker-spectate-board-wrap, [data-native-board-slot]) {
    overflow: visible;
  }

  body.native-game-active.mobile-portrait #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell.mode-battleship .native-battleship-board:not(.native-battleship-setup-board) {
    max-width: 100%;
    max-height: 100%;
  }



}

@media (max-width: 700px) and (orientation: landscape) {
  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell {
    padding-bottom: calc(66px + var(--rx-safe-bottom));
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-main {
    grid-template-columns: minmax(0, 1fr);
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] {
    right: auto;
    bottom: 0;
    width: clamp(220px, 36vw, 260px);
    height: calc(57px + var(--rx-safe-bottom));
    min-height: calc(57px + var(--rx-safe-bottom));
    max-height: calc(57px + var(--rx-safe-bottom));
    padding: 6px 6px calc(6px + var(--rx-safe-bottom));
    border-right: 1px solid var(--rx-color-border);
    border-radius: 12px 0 0 0;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-summary {
    grid-template-columns: minmax(112px, 1fr) minmax(88px, .8fr);
    gap: 4px;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-game-picker {
    display: block;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-game-picker > span,
  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-queue::before {
    display: none;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] .native-practice-queue {
    grid-template-rows: var(--rx-size-tap-min);
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock-kind="queue"] {
    left: clamp(220px, 36vw, 260px);
    width: calc(100vw - clamp(220px, 36vw, 260px));
    border-radius: 0 12px 0 0;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-promotion {
    bottom: calc(74px + var(--rx-safe-bottom));
    max-height: calc(100dvh - var(--topbarH) - 90px - var(--rx-safe-bottom));
  }
}

/* Universal compact game frame
   ----------------------------
   The shell, queue summary, and action dock are separate rows in one bounded
   game frame. Nothing in the playable stage is allowed to continue behind the
   controls. This replaces viewport-height guesses with the space that remains
   after the real footer content has been laid out. */
@media (max-width: 700px) {
  body.native-game-active #nativeWorkerGameRoot,
  body.native-game-active .native-game-root {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "game-stage"
      "game-actions";
    align-items: stretch;
    min-height: 0;
    overflow: hidden !important;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray {
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "game-stage"
      "game-queue"
      "game-actions";
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-shell {
    grid-area: game-stage;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-block: 0 !important;
    overflow: hidden;
  }

  /* The shell owns the compact game's checker pattern. Keep non-chat panels
     transparent in both themes so light mode cannot cover the game log with
     an older white desktop panel surface. */
  body.native-game-active #nativeWorkerGameRoot > .native-game-shell
    .native-game-side:not([data-native-panel="chat"]),
  body.native-game-active #nativeWorkerGameRoot > .native-game-shell
    .worker-spectate-side.native-game-side:not([data-native-panel="chat"]) {
    background: transparent;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] {
    grid-area: game-actions;
    position: relative;
    inset: auto;
    align-self: end;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-shadow: none;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-game-panel-actions[data-native-responsive-action-dock] .btn {
    min-height: var(--rx-size-tap-min);
    font-size: .86rem;
  }

  body.native-game-active #nativeWorkerGameRoot > .native-practice-side[data-native-responsive-queue-tray] {
    grid-area: game-queue;
    position: relative;
    inset: auto;
    align-self: end;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-shadow: none;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-action-dock .native-game-shell,
  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray .native-game-shell {
    padding-block: 0 !important;
  }

  /* Square and grid boards fill the actual stage slot. The existing board-fit
     model then chooses the largest board that fits both dimensions. */
  body.native-game-active #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell:not(.mode-battleship):not(.mode-pokerduel):not(.mode-no)
    .native-game-board-column {
    grid-template-rows: minmax(30px, auto) minmax(0, 1fr) minmax(30px, auto);
    align-self: stretch;
    height: auto;
    min-height: 0;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell:not(.mode-no) .native-game-main {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell:not(.mode-battleship):not(.mode-pokerduel):not(.mode-no)
    :is(.native-game-main, .worker-spectate-content, .worker-spectate-content-main) {
    height: 100%;
    min-height: 0;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell:not(.mode-battleship):not(.mode-pokerduel):not(.mode-no)
    .native-game-main :is(.worker-spectate-board-wrap, [data-native-board-slot]) {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  body.native-game-active #nativeWorkerGameRoot.has-responsive-action-dock
    .native-game-shell:not(.mode-battleship):not(.mode-pokerduel):not(.mode-no)
    .native-game-board-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(30px, auto) minmax(0, 1fr);
    grid-template-areas:
      "opponent player"
      "board board";
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray {
    grid-template-columns: clamp(220px, 36vw, 260px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "game-stage game-stage"
      "game-queue game-actions";
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray > .native-practice-side[data-native-responsive-queue-tray],
  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray > .native-game-panel-actions[data-native-responsive-action-dock-kind="queue"] {
    width: 100%;
    height: calc(57px + var(--rx-safe-bottom));
    min-height: calc(57px + var(--rx-safe-bottom));
    max-height: none;
  }

  body.native-game-active #nativeWorkerGameRoot.has-responsive-queue-tray > .native-game-panel-actions[data-native-responsive-action-dock-kind="queue"] {
    left: auto;
  }
}

/* Ocean's square uses the measured board slot, including short browser viewports. */
@media (max-width: 700px) and (orientation: portrait) {
  body.native-game-active .native-game-shell.mode-battleship.has-fitted-ocean-grid .native-battleship-board {
    --battle-practice-grid-size: var(--native-ocean-grid-size);
    width: 100% !important;
    height: auto !important;
    grid-template-rows: auto auto;
  }

  body.native-game-active .native-game-shell.mode-battleship .native-battleship-boards.single {
    grid-template-columns: minmax(0, 1fr);
  }

  body.native-game-active .native-game-shell.mode-battleship.has-fitted-ocean-grid .native-battleship-grid {
    width: var(--native-ocean-grid-size);
    height: var(--native-ocean-grid-size);
    max-width: 100%;
    justify-self: center;
  }

  body.native-game-active .native-game-shell.mode-battleship.has-fitted-ocean-grid .battle-live:not(.practice-challenge) .native-battleship-boards {
    width: var(--native-ocean-grid-size);
    height: calc(var(--native-ocean-grid-size) + var(--native-ocean-grid-header));
    justify-self: center;
  }
}