/* Shared compact layouts. Viewport space owns layout; pointer queries only
   adjust interactions. Desktop geometry remains in the owning page styles. */
.appLogoPicture { display: block; max-width: 100%; }
.menuRibbonMobileOnly { display: none; }
.compactConfigurationToggle[hidden] { display: none; }

@media (max-width: 980px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  body { padding: 12px 8px; }
  body .appShell { padding: 10px; border-radius: 18px; }
  .customisationsPage .cursorsManager { display: none; }
  .app-titlebar { gap: 8px; flex-wrap: wrap; }
  .app-titlebar .app-title-left { width: 100%; min-width: 0; }
  .app-titlebar .app-title-meta { display: none; }
  .app-titlebar .app-title-left .appLogoFrame { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; }
  body .app-titlebar .appLogoFrame .app-logo { display: block; width: 100%; max-width: 100%; height: auto; }
  .menuRibbonSeoDisclosure { display: none; }
  .app-titlebar #musicPlayer { display: none; }
  body.hasMobileDock { --mobile-dock-height: 64px; padding-bottom: calc(var(--mobile-dock-height) + 42px + env(safe-area-inset-bottom, 0px)); }
  body.hasMobileDock.loginPage .titleNavLinks,
  body.hasMobileDock.testersPage .titleNavLinks { display: none; }
  .hasMobileDock .menuRibbonHeader {
    position: fixed;
    inset: auto 0 0;
    z-index: 10010;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--menu-ribbon-dark);
  }
  .hasMobileDock .menuRibbonHeader[hidden] { display: none; }
  .hasMobileDock .menuRibbonMobile {
    height: var(--mobile-dock-height);
    padding: 0 6%;
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,245,205,.16), 0 -5px 14px rgba(52,31,10,.28);
  }
  .hasMobileDock .menuRibbonMobile > .menuRibbonMobileItem,
  .hasMobileDock .menuRibbonMobile > .menuRibbonMobileProfileGroup { flex: 1 1 0; min-width: 0; }
  .hasMobileDock .menuRibbonMobile > .menuRibbonMobileItem { padding-left: 0; padding-right: 0; }
  .hasMobileDock .menuRibbonMobileItem { height: var(--mobile-dock-height); }
  .hasMobileDock .menuRibbonMobileItem.isActive { transform: translate3d(0, -16px, 0); }
  .hasMobileDock .menuRibbonMobileItem.isActive .menuRibbonMobileIcon { animation-name: mobileDockIconActivate; }
  .hasMobileDock .menuRibbonMobileIndicator { top: auto; bottom: calc(100% - 1px); width: 29.6%; }
  .hasMobileDock .menuRibbonHeader[data-active-menu="customisations"] .menuRibbonMobileIndicator { transform: translateX(59.459459%); }
  .hasMobileDock .menuRibbonHeader[data-active-menu="profile"] .menuRibbonMobileIndicator { transform: translateX(118.918919%); }
  .hasMobileDock .menuRibbonHeader[data-active-menu="login"] .menuRibbonMobileIndicator { transform: translateX(237.837838%); }
  .hasMobileDock .menuRibbonMobileIndicatorShape {
    transform: none;
    filter: drop-shadow(0 -1px 0 rgba(243,221,145,.76)) drop-shadow(0 -5px 5px rgba(45,27,8,.2));
  }
  .hasMobileDock .menuRibbonMobileProfileToggle { rotate: 180deg; }
  .hasMobileDock .menuRibbonMobileDropdown {
    top: auto;
    bottom: calc(100% + 34px);
    max-height: calc(100dvh - var(--mobile-dock-height) - 52px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hasMobileDock .menuRibbonSeoDisclosure { margin: 0 0 6px; }
  .menuRibbonMobileMusicToggle:disabled { opacity: .45; cursor: wait; }
  .mobileMusicNote { display: block; width: 28px; height: 28px; fill: currentColor; overflow: visible; }
  .mobileMusicNoteStem { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .mobileMusicNoteSlash { fill: none; stroke: var(--menu-ribbon-gold-bright); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 1px var(--menu-ribbon-dark-deep)); }
  .menuRibbonMobileMusicToggle.isPlaying .mobileMusicNoteSlash { display: none; }
  .menuRibbonMobileMusicToggle.isPlaying { color: var(--menu-ribbon-gold-bright); }
  .menuRibbonMobileItem:focus-visible { outline: 2px solid var(--menu-ribbon-gold-bright); outline-offset: -5px; }
  .titlebarMusicSpacer { display: none; }
  .loginCharacterVideo,
  .loginDragonflySprite { display: none; }
  .loginMain { min-width: 0; width: 100%; }
  .loginRegistryPanel {
    width: min(460px, 100%);
    max-width: 100%;
    min-width: 0;
    padding: 20px;
    box-sizing: border-box;
  }
  .hasMenuRibbon .menuRibbonHeader { margin-right: 0; margin-left: 0; }
  .hasMenuRibbon .menuRibbonMobileProfileToggle {
    width: 44px;
    height: 44px;
    top: -7px;
    right: -8px;
    border: 0;
    background: transparent;
    isolation: isolate;
  }
  .hasMenuRibbon .menuRibbonMobileProfileToggle::before {
    content: "";
    position: absolute;
    inset: 11px;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid var(--menu-ribbon-gold);
    background: var(--menu-ribbon-gold-bright);
  }
  .hasMenuRibbon .menuRibbonMobileDropdown > a,
  .hasMenuRibbon .menuRibbonMobileDropdown > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }
  .hasMenuRibbon .menuRibbonMobileDropdown {
    width: max-content;
    min-width: 170px;
    max-width: calc(100vw - 32px);
  }
  .hasMenuRibbon .menuRibbonMobileCustomisationsGroup .menuRibbonMobileDropdown {
    left: 0;
    transform: none;
  }
  .hasMenuRibbon .menuRibbonMobileProfileGroup:not(.menuRibbonMobileCustomisationsGroup) .menuRibbonMobileDropdown {
    left: auto;
    right: 0;
    transform: none;
  }
  .gamePage .mainRow { gap: 12px; }
  .compactConfigurationToggle { min-height: 44px; margin-top: 10px; }
  #gameConfigurationBody[hidden] ~ .configActionRow #confirmBtn,
  #gameConfigurationBody[hidden] ~ .configNotes { display: none; }
  #gameConfigurationBody[hidden] ~ .configActionRow {
    display: inline-flex;
    width: auto;
    margin: 10px 0 0 8px;
    vertical-align: top;
  }
  .gamePage .configActionRow button { min-height: 44px; }
  .gamePage .leftPanel,
  .gamePage .rightPanel,
  .gamePage .boardStage,
  .gamePage .capturedRow,
  .gamePage .timerRowUnderBoard {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .gamePage .leftPanel,
  .gamePage .rightPanel { flex: 1 1 100%; }
  .gamePage .boardStage #board { width: 100%; }
  .gamePage .modeHintText { max-width: 100%; }
  .gamePage .botSetupRow { column-gap: 16px; }
  .gamePage .botDifficultyWrap { min-width: 0; max-width: 100%; }
  .gamePage .gameModeRow { gap: 8px; }
  .gamePage .gameModeRow > .radioGroupLabel { flex-basis: 100%; }
  .gamePage .radioPill,
  .profileGuildAffiliationButton,
  .profileConnectionsSummary,
  .profileEditActions button,
  .loginSubmit { min-height: 44px; }
  .gamePage #inputModeControl { max-width: 100%; }
  .gamePage #fenInput { width: 100%; min-width: 0; box-sizing: border-box; }
  .gamePage .capturedRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "captured-label captured-label" "white-captured black-captured";
    gap: 8px;
  }
  .gamePage .capturedLabel { grid-area: captured-label; justify-self: center; }
  .gamePage #whiteCaptured { grid-area: white-captured; }
  .gamePage #blackCaptured { grid-area: black-captured; }
  .gamePage #whiteCaptured,
  .gamePage #blackCaptured { width: 100%; min-width: 0; justify-self: stretch; }
  .gamePage .capturedRow.isTrayStacked {
    grid-template-areas: "captured-label captured-label" "white-captured white-captured" "black-captured black-captured";
  }
  dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    box-sizing: border-box;
    overflow: auto;
    overscroll-behavior: contain;
  }
  input:is([type="text"], [type="email"], [type="password"], [type="search"]),
  textarea { font-size: 16px; }
  .profileEditGrid,
  .profileConnectionsGrid { min-width: 0; }
  .profileEditGrid > *,
  .profileConnectionsGrid > * { min-width: 0; }
  .historyArchive {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 0;
    padding: 10px 14px 18px;
  }
  .historyArchive > .bookShowcase { grid-column: 1; grid-row: 1; width: 100%; gap: 0; margin: 0; padding: 0; }
  .historyArchive > .historyCopy { grid-column: 1; grid-row: 2; width: 100%; max-width: none; min-width: 0; text-align: center; }
  .historyArchive .historyEyebrow,
  .historyArchive .historyCopy h1,
  .historyArchive .historyCopy p,
  .historyArchive .bookHint { display: none; }
  .historyArchive .bookStage {
    /* Retain the original book scale and stage height for each input/layout.
       Only fit the stage container into the new single-column arrangement. */
    width: 100%;
  }
  .historyArchive .historyMetaGrid { gap: 6px; margin-top: 0; }
  .historyArchive .historyMetaGrid div { padding: 8px 6px; border-radius: 8px; }
  .historyArchive .historyMetaGrid span { font-size: 9px; }
  .historyArchive .historyMetaGrid b { font-size: 12px; }
  .historyArchive .openHistoryBtn { display: block; width: min(240px, 100%); min-width: 0; min-height: 44px; margin: 16px auto 0; }
  .musicPlayerPage .musicPreviewPlayer { min-height: 0; }
  .musicPlayerPage .musicPreviewVisualizer { height: clamp(100px, 22svh, 180px); }
  .musicPlayerPage .musicPreviewControls { gap: 4px; min-height: 0; padding: 8px 4px 12px; flex-wrap: wrap; }
  .musicPlayerPage .musicTransportBtn { width: 44px; min-width: 44px; height: 44px; }
  .musicPlayerPage .musicPlayPauseBtn { width: 52px; min-width: 52px; height: 52px; }
  .musicPlayerPage .musicPreviewSeek { padding: 0 12px 12px; }
  .musicPlayerPage .musicPreviewTrackText {
    width: 100%; min-width: 0; padding: 0 12px; margin: 8px 0 12px; box-sizing: border-box;
  }
  .musicPlayerPage .musicPreviewUtilities {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 8px 12px;
  }
  .musicPlayerPage .musicUtilityBtn { width: 44px; height: 44px; }
  .musicPlayerPage .musicPreviewNowPlaying {
    position: static;
    inset: auto;
    display: flex;
    justify-content: center;
    min-height: 0;
    margin: 0 12px 14px;
  }
  .musicPlayerPage .musicPreviewAlbumArt { position: static; width: 96px; height: 96px; }
  .musicPlayerPage .musicPlaylistGrid { grid-template-columns: minmax(0, 1fr); }
  .musicPlayerPage .musicPlaylistNav {
    position: static;
    display: flex;
    overflow-x: auto;
    align-items: stretch;
    gap: 6px;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
  }
  .musicPlayerPage .musicPlaylistTab {
    flex: 0 0 auto;
    width: auto;
    min-width: 110px;
    min-height: 44px;
    margin: 0;
    border: 1px solid rgba(31,31,31,.16);
    border-radius: 8px;
    pointer-events: auto;
    scroll-snap-align: start;
  }
  .musicPlayerPage .musicPlaylistTab.isActive .musicPlaylistTabHeader { width: 100%; }
  .musicPlayerPage .musicPlaylistNav .musicPlaylistAlbumArt { display: none; }
  .musicPlayerPage .musicPhasePanel { min-width: 0; }
  .musicPlayerPage .musicTrackBtn { min-height: 48px; }
  .musicPlayerPage .musicTrackLabel { flex-direction: column; align-items: flex-start; gap: 3px; }
  .musicPlayerPage .musicTrackWaveform { max-width: 64px; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 980px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  body { padding-top: 8px; padding-bottom: 8px; }
  body.hasMobileDock { --mobile-dock-height: 56px; }
  .app-titlebar { flex-direction: row; flex-wrap: nowrap; align-items: center; }
  .app-titlebar .app-title-left { width: auto; flex: 1 1 auto; }
  .app-titlebar .app-logo { width: 100%; max-height: none; }
  .app-titlebar #musicPlayer { flex: 0 0 auto; align-self: center; }
  .gamePage .mainRow {
    display: grid;
    grid-template-columns: minmax(200px, min(52vw, calc(100svh - var(--mobile-dock-height, 0px) - 42px))) minmax(220px, 1fr);
    align-items: start;
  }
  .gamePage .rightPanel { width: 100%; }
  .musicPlayerPage .musicPreviewVisualizer { height: 90px; }
}

@keyframes mobileDockIconActivate {
  0% { transform: scale(.78) translateY(5px); }
  62% { transform: scale(1.14) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hasMobileDock .menuRibbonMobileItem,
  .hasMobileDock .menuRibbonMobileItem::before,
  .hasMobileDock .menuRibbonMobileIndicator { transition: none; }
  .hasMobileDock .menuRibbonMobileItem.isActive .menuRibbonMobileIcon { animation: none; }
}

@media (max-width: 380px) {
  .musicPlayerPage .musicPreviewControls { gap: 3px; }
  .musicPlayerPage .musicPlayPauseBtn { width: 44px; min-width: 44px; height: 44px; }
  .profileGuildAffiliationActions { grid-template-columns: 1fr; }
  .gamePage .botDifficultyWrap { grid-template-columns: minmax(0, 1fr); }
  .gamePage .botDifficultyTop .radioGroupLabel,
  .gamePage .botDifficultyRecommendation,
  .gamePage .botDifficultySliderWrap { grid-column: 1; grid-row: auto; }
}