/* The Home entry stays in the document flow. Its inline SVG inherits the
   user's tint and theme, including changes made while the page is open. */
.home-global-chat-entry { display: none; }

/* Keep enough width for a usable game before allocating a side conversation.
   This temporary placement never replaces the player's saved preference. */
body.home-route-page #homePage { --rx-home-game-min-width: 640px; }
body.home-route-page.home-layout-constrained #homePage {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "game" "global" "leaderboard" "social" !important;
}
body.home-route-page.home-layout-constrained #globalChatPanel.home-global {
  height: var(--homeGlobalH, 520px) !important;
  min-height: 320px !important;
  max-height: none !important;
  min-width: 0;
}
body.home-route-page.home-layout-constrained .global-chat-messages { max-height: none !important; }
body.home-route-page.home-layout-constrained .home-layout-resize-handle { display: none !important; }

@media (max-width: 900px) {
  /* The game is hidden and channel chat lives in its window on mobile Home.
     Keeping their named rows would leave two empty grid gaps above the cards. */
  body.home-route-page:not(.native-game-active) #homePage {
    grid-template-areas: "leaderboard" "social" !important;
  }

  body.home-route-page:not(.native-game-active) .home-global-chat-entry:not([hidden]) {
    --rx-home-chat-accent: var(--rx-color-accent);
    --rx-home-chat-secondary: var(--rx-color-accent-secondary);
    --rx-home-chat-glint: var(--rx-color-text);
    --rx-home-chat-bright: var(--rx-color-accent);
    --rx-home-chat-face-top: var(--rx-color-surface-raised);
    --rx-home-chat-face-middle: var(--rx-color-overlay-solid);
    --rx-home-chat-face-bottom: var(--rx-color-page);
    --rx-home-chat-edge: var(--rx-color-border-strong);
    --rx-home-chat-edge-secondary: var(--rx-color-accent-secondary);
    --rx-home-chat-grid: var(--rx-color-text);
    --rx-home-chat-shadow: var(--rx-color-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: static;
    width: min(100%, 240px);
    margin: 0 auto var(--rx-space-5);
    padding: 0 var(--rx-space-3) var(--rx-space-3);
    border: 0;
    border-radius: var(--rx-radius-panel);
    background: transparent;
    color: var(--rx-color-text);
    box-shadow: none;
    font: inherit;
    font-size: 18px;
    font-weight: var(--rx-font-weight-strong);
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .home-global-chat-emblem {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
  }

  .home-global-chat-entry:focus-visible {
    outline: 2px solid var(--rx-color-accent);
    outline-offset: var(--rx-space-1);
  }

  .home-global-chat-entry:active .home-global-chat-emblem { transform: scale(.97); }
}

@supports (color: color-mix(in srgb, black, white)) {
  @media (max-width: 900px) {
    body.home-route-page:not(.native-game-active) .home-global-chat-entry:not([hidden]) {
      --rx-home-chat-glint: color-mix(in srgb, var(--rx-color-accent) 15%, white);
      --rx-home-chat-bright: color-mix(in srgb, var(--rx-color-accent) 50%, white);
      --rx-home-chat-face-top: color-mix(in srgb, var(--rx-color-accent) 55%, var(--rx-color-overlay-solid));
      --rx-home-chat-face-middle: color-mix(in srgb, var(--rx-color-accent) 28%, var(--rx-color-overlay-solid));
      --rx-home-chat-face-bottom: color-mix(in srgb, var(--rx-color-accent-secondary) 18%, var(--rx-color-overlay-solid));
      --rx-home-chat-edge: color-mix(in srgb, var(--rx-color-accent) 32%, var(--rx-color-overlay-solid));
      --rx-home-chat-edge-secondary: color-mix(in srgb, var(--rx-color-accent-secondary) 45%, var(--rx-color-overlay-solid));
      --rx-home-chat-grid: color-mix(in srgb, var(--rx-color-accent) 20%, var(--rx-color-text));
      --rx-home-chat-shadow: color-mix(in srgb, var(--rx-color-accent) 20%, black);
    }
  }
}

/* Home composition only. Shared controls and touch sizing remain in their
   shared owners. This boundary matches the existing stacked Home layout.
   Keep source order so keyboard focus follows the visible controls. */
@media (max-width: 1100px) {
  body.home-route-page:not(.native-game-active) .layout > .sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rx-space-3);
    min-width: 0;
    align-content: start;
  }

  body.home-route-page .sidebar > * {
    grid-column: 1 / -1;
    margin: 0;
  }

  body.home-route-page .sidebar .quickplay-heading-row {
    flex-wrap: wrap;
  }

  body.home-route-page .sidebar .quickplay-mode-btn {
    grid-column: auto;
  }

  body.home-route-page .sidebar .quickplay-mode-btn-practice {
    border-color: var(--rx-color-border-strong);
    background: var(--rx-color-surface-raised);
    color: var(--rx-color-text);
  }

  body.home-route-page .sidebar .learn-support-btn,
  body.home-route-page .sidebar .donate-btn {
    grid-column: auto;
  }

  body.home-route-page .sidebar #modeToggle {
    /* At most four columns, reducing naturally as labels or browser text grow. */
    --home-mode-min: max(8rem, calc((100% - 3 * var(--rx-space-2)) / 4));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--home-mode-min)), 1fr));
    grid-auto-rows: minmax(var(--rx-size-tap-min), auto);
    gap: var(--rx-space-2);
  }

  body.home-route-page .sidebar .btn {
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.home-route-page .home-leaderboard {
    align-self: start;
  }

  body.home-route-page .leaderboard-shell {
    flex: 0 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  body.home-route-page .leaderboard-empty-row {
    display: none;
  }
}

/* Home chat is a bounded conversation: a compact heading, channel strip,
   flexible transcript and composer. Its desktop header is restored on rotation. */
/* An expanded composer is content, not overflow. Saved desktop chat heights
   must not constrain the compact picker or push it into the next panel. */
body.home-route-page #globalChatPanel.home-global:has(.chat-emoji-docked){
  height: auto !important;
  min-height: min-content !important;
  max-height: none !important;
  align-self: start;
}
body.home-route-page #globalChatPanel:has(.chat-emoji-docked) #globalChatArea{
  flex: 0 0 auto;
}
body.home-route-page #globalChatPanel:has(.chat-emoji-docked) .global-chat-messages{
  flex: 0 0 auto;
  height: min(200px, 25dvh);
}

body.rx-landscape-home .home-global > .panel-title-row { display: none; }
body.rx-landscape-home #globalChatPanel.home-global {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 8px;
}
.rx-landscape-home-chat-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.rx-landscape-home-chat-header .panel-title { margin: 0; }
.rx-landscape-home-chat-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rx-landscape-home-chat-controls .chat-name-color-picker { position: relative; inset: auto; width: 44px; min-width: 44px; flex: 0 0 44px; }
body.rx-landscape-home .home-global #chatChannelRail { margin: 0; padding: 0; border: 0; min-width: 0; }
body.rx-landscape-home .home-global #globalChatArea { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; }
body.rx-landscape-home .home-global #globalChatMessages.global-chat-messages { height: auto; min-height: 0; max-height: none; margin: 0; padding: 12px; }
body.rx-landscape-home .home-global #globalChatArea > .row { margin: 0; gap: 8px; }
body.rx-landscape-home .home-global #globalChatArea > .muted.small { display: none; }


/* Landscape launcher + conversation. Tablet keeps the horizontal header;
   short phones use the shared rail. Secondary panels follow the first screen. */
body.home-route-page.rx-landscape-home:not(.native-game-active) > .layout {
  --rx-home-stage-height: calc(100dvh - var(--rx-size-topbar) - 16px);
  position: absolute;
  inset: var(--rx-size-topbar) 0 auto var(--rx-landscape-rail, 0px);
  display: grid;
  grid-template-columns: minmax(218px, 29%) minmax(0, 1fr);
  /* Only the launcher/chat stage is screen-sized. The secondary row owns its
     content height, even when the scroll viewport has no space left over. */
  grid-template-rows: var(--rx-home-stage-height) max-content;
  gap: 12px;
  width: auto;
  height: calc(100dvh - var(--rx-size-topbar));
  min-height: 0;
  padding: 8px max(8px, var(--rx-safe-right)) max(8px, var(--rx-safe-bottom)) 8px;
  overflow: auto;
  overflow-anchor: none;
}
body.home-route-page.rx-landscape-home:not(.native-game-active) .layout > .sidebar {
  position: static;
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  align-self: start;
  min-height: 0;
  margin: 0;
  padding: 8px;
  overflow: auto;
}
body.home-route-page.rx-landscape-home:not(.native-game-active) .layout > .main,
body.home-route-page.rx-landscape-home:not(.native-game-active) #homePage { display: contents; }
body.rx-landscape-home:not(.native-game-active) .home-game { display: none; }
body.rx-landscape-home:not(.native-game-active) #homePage > * { grid-area: auto; min-width: 0; }
body.rx-landscape-home:not(.native-game-active) #homePage > #globalChatPanel { grid-area: 1 / 2; }
body.rx-landscape-home:not(.native-game-active) #homePage > .home-leaderboard { grid-area: 2 / 2; }
body.rx-landscape-home:not(.native-game-active) #homePage > :is(#friendsArea, #friendsLocked) {
  grid-area: 2 / 1;
  align-self: start;
}
.rx-landscape-launcher { display: grid; gap: 6px; }
body.rx-landscape-home .sidebar .rx-landscape-launcher > .quickplay-heading-row { margin: 0; flex-direction: row; flex-wrap: nowrap; gap: 4px; min-height: 22px; }
.rx-landscape-launcher > .quickplay-heading-row h3 { margin:0; line-height:22px; }
body.rx-landscape-home .quickplay-rating { flex:0 0 auto; width:auto; min-width:0; max-width:none; font-size:var(--rx-font-size-xs); }
body.rx-landscape-home .quickplay-rating-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.rx-landscape-game-choices, .rx-landscape-play-actions { min-width: 0; }
.rx-landscape-play-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.rx-landscape-home .rx-landscape-play-actions > * { margin: 0; width: 100%; }
body.rx-landscape-home .rx-landscape-play-actions :is(#poolSelectField, #lichessStatusCard) { grid-column: 1 / -1; }
body.rx-landscape-home .sidebar .game-mode-field { margin: 0; gap: 0; }
body.rx-landscape-home .sidebar .game-mode-field > span { display: none; }
body.rx-landscape-home .sidebar #poolSelectField { gap: 2px; }
body.rx-landscape-home .sidebar #poolSelect { height:44px; padding-block:8px; }
body.rx-landscape-home .sidebar #poolSelectField > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.rx-landscape-home .rx-landscape-play-actions > .btn { min-height: 44px; padding: 4px; }
body.rx-landscape-home .sidebar > h3 { margin-top: 20px; }
body.rx-landscape-home .sidebar #modeToggle .btn:not(.active):hover { background: transparent; border-color: var(--rx-color-accent); }
body.rx-landscape-home .rx-landscape-home-chat-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; }
body.rx-landscape-home .rx-landscape-home-chat-header .panel-title { font-size: var(--rx-font-size-body); }
body.rx-landscape-home .rx-landscape-home-chat-header > #chatChannelRail { grid-column: 2; grid-row: 1; }
body.rx-landscape-home .home-global #globalChatArea > .row { flex-wrap: nowrap; }
body.rx-landscape-home .home-global #globalChatInput { min-width: 0; width: 100%; }
html[data-rx-keyboard-open] body.rx-landscape-home:has(#globalChatInput:focus) > .layout {
  top: var(--rx-visual-top);
  height: var(--rx-visual-height);
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
html[data-rx-keyboard-open] body.rx-landscape-home:has(#globalChatInput:focus) .layout > .sidebar,
html[data-rx-keyboard-open] body.rx-landscape-home:has(#globalChatInput:focus) #homePage > :not(#globalChatPanel) { display: none; }
html[data-rx-keyboard-open] body.rx-landscape-home:has(#globalChatInput:focus) #homePage > #globalChatPanel { grid-area: 1 / 1; }
html[data-rx-keyboard-open] body.rx-landscape-home:has(#globalChatInput:focus) .rx-landscape-home-chat-header { display: none; }
html[data-rx-keyboard-open] body.rx-landscape-home:has(#globalChatInput:focus) #globalChatPanel { grid-template-rows: minmax(0, 1fr); }