/* =========================================================
   Responsive layout safeguards
   These rules keep controls readable, reachable and inside the viewport
   while preserving the desktop academy composition.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* =========================================================
   Indoor training hall: desktop viewport safety
   The guide bubble stays inside the scene and the setup controls keep
   a comfortable gap above the fixed footer.
   ========================================================= */
@media (min-width: 901px) {
  .indoor-hall-page .rabbit-player .fitai-guide-panel {
    bottom: calc(100% - 58px) !important;
    max-height: min(220px, calc(100dvh - 190px));
    overflow: auto;
  }

  .indoor-hall-page .indoor-control-dock {
    bottom: 34px !important;
    max-height: calc(100% - 172px) !important;
    padding-bottom: 2px;
  }

  .indoor-hall-page .indoor-setup-completion {
    margin-bottom: 2px;
  }
}

@media (min-width: 1051px) and (max-height: 900px) {
  .indoor-hall-page .indoor-control-dock {
    top: 136px !important;
    bottom: 28px !important;
    max-height: calc(100% - 164px) !important;
  }

  .indoor-hall-page .indoor-chooser-card {
    height: 382px !important;
  }

  .indoor-hall-page .workout-choice-tile {
    min-height: 0 !important;
  }

  .indoor-hall-page .indoor-start-workout-btn {
    min-height: 48px;
  }
}

/* =========================================================
   Tablet sizing
   ========================================================= */
@media (min-width: 761px) and (max-width: 1024px) {
  .academy-theme .academy-topbar {
    padding-inline: 18px;
  }

  .academy-brand strong {
    font-size: 20px;
  }

  .mascot-assistant:not(.mascot-assistant--embedded) {
    transform: scale(.88) translate3d(var(--mascot-drag-x), var(--mascot-drag-y), 0);
    transform-origin: right bottom;
  }
}

/* =========================================================
   Shared mobile navigation and page flow
   ========================================================= */
@media (max-width: 760px) {
  html {
    width: 100%;
    min-width: 0;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .page-width {
    width: min(100% - 24px, 1180px);
  }

  .academy-brand {
    min-width: 0;
  }

  .academy-brand img {
    flex: 0 0 auto;
  }

  .academy-brand strong {
    white-space: nowrap;
  }

  .academy-footer {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .academy-footer-inner {
    width: min(100% - 28px, 1180px);
    min-height: 0 !important;
    padding: 16px 0 !important;
  }

  .mascot-assistant:not(.mascot-assistant--embedded) {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(230px, calc(100vw - 18px));
  }

  .mascot-assistant:not(.mascot-assistant--embedded) .mascot-assistant__character {
    width: 112px;
    height: 124px;
  }

  .mascot-assistant:not(.mascot-assistant--embedded) .mascot-assistant__bubble {
    width: min(280px, calc(100vw - 24px));
    padding: 14px 15px 13px;
  }
}

/* =========================================================
   Landing page mobile layout
   Header controls use two rows so Start, About and language controls
   remain visible without overlapping the brand.
   ========================================================= */
@media (max-width: 760px) {
  .landing-academy .landing-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    height: auto !important;
    min-height: 0;
    padding: 10px 12px 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand language"
      "start about";
    gap: 9px 12px;
    align-items: center;
  }

  .landing-topbar > .academy-brand {
    grid-area: brand;
  }

  .landing-topbar .landing-nav-start {
    grid-area: start;
    justify-self: start;
  }

  .landing-topbar .academy-header-actions {
    display: contents;
  }

  .landing-topbar .academy-header-actions .academy-nav-link {
    grid-area: about;
    display: inline-flex !important;
    justify-self: end;
    align-items: center;
    min-height: 38px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .landing-topbar .language-picker {
    grid-area: language;
    justify-self: end;
  }

  .landing-topbar .academy-nav-start-button {
    min-height: 38px;
    padding: 0 14px;
  }

  .landing-academy .academy-hero {
    margin-top: 0 !important;
    min-height: 570px;
    height: 570px;
  }

  .landing-academy .academy-hero-shell {
    width: min(100% - 24px, 1180px);
    padding-bottom: 46px;
  }

  .landing-academy .academy-welcome-panel,
  .landing-academy .academy-archive-panel,
  .landing-academy .academy-video-panel {
    width: 100%;
    max-width: none;
    padding: 22px 20px;
  }

  .landing-academy .academy-section-heading h2 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.02;
  }

  .landing-academy .academy-stat-card {
    width: 100%;
    min-width: 0;
  }

  .landing-academy .academy-stat-copy,
  .landing-academy .academy-stat-detail {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .landing-topbar .academy-brand strong {
    font-size: 16px;
  }

  .landing-topbar .academy-brand img {
    width: 34px;
    height: 34px;
  }

  .landing-topbar .language-switch {
    transform: scale(.92);
    transform-origin: right center;
  }

  .landing-academy .academy-hero {
    min-height: 610px;
    height: 610px;
  }

  .landing-academy .academy-welcome-panel h1,
  .landing-academy .academy-welcome-panel h2 {
    font-size: clamp(2rem, 11vw, 2.65rem);
  }
}

/* =========================================================
   Setup page mobile layout
   Preference cards become a single readable column and the guide rail
   follows the form instead of competing for horizontal space.
   ========================================================= */
@media (max-width: 760px) {
  .setup-page {
    overflow-x: hidden;
  }

  .setup-page .setup-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    height: auto !important;
    min-height: 64px;
    padding: 10px 12px;
  }

  .setup-page .setup-main.page-width {
    width: min(100% - 22px, 680px);
    max-width: none;
    padding: 86px 0 42px;
  }

  .setup-page .setup-hero {
    display: block;
    margin-bottom: 16px;
  }

  .setup-page .setup-hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .setup-page .setup-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .setup-page .setup-form {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 12px;
  }

  .setup-page .setup-card {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px;
  }

  .setup-page .choice-grid,
  .setup-page .choice-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .setup-page .choice-pill {
    min-width: 0;
    min-height: 50px;
    padding: 8px;
    overflow-wrap: anywhere;
  }

  .setup-page .choice-grid--activities,
  .setup-page .choice-grid--goal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-page .choice-grid--setting {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .setup-page .safety-toggle {
    align-items: flex-start;
  }

  .setup-page .setup-actions {
    width: 100%;
    padding-bottom: 0;
  }

  .setup-page .setup-save-btn {
    width: 100%;
    min-width: 0;
  }

  .setup-page .setup-rail {
    position: static !important;
    top: auto !important;
    width: 100%;
    height: auto !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .setup-page .setup-quote,
  .setup-page .academy-values {
    width: 100%;
  }

  .setup-page .mascot-assistant--embedded {
    width: 100%;
    max-width: 100%;
    position: relative;
    inset: auto;
    transform: none;
  }
}

@media (max-width: 480px) {
  .setup-page .choice-grid,
  .setup-page .choice-grid--activities,
  .setup-page .choice-grid--goal {
    grid-template-columns: 1fr;
  }

  .setup-page .choice-grid--age,
  .setup-page .choice-grid--baseline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   Indoor page mobile layout
   The training scene, setup controls and activity HUD participate in the
   normal document flow so every control can be reached by scrolling.
   ========================================================= */
@media (max-width: 760px) {
  html:has(.indoor-hall-page) {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .indoor-hall-page {
    --hall-topbar-height: 0px;
    --hall-footer-height: 0px;
    width: 100%;
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .indoor-hall-page .hall-topbar.academy-topbar {
    position: fixed !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1500;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 12px 12px !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
  }

  .indoor-hall-page .hall-topbar-brand {
    flex: 1 1 100%;
    min-width: 0;
  }

  .indoor-hall-page .hall-topbar-actions {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .indoor-hall-page .hall-topbar-nav {
    order: 3;
    display: flex !important;
    flex: 1 1 100%;
    width: 100%;
    justify-content: space-around;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .indoor-hall-page .hall-topbar-nav::-webkit-scrollbar {
    display: none;
  }

  .indoor-hall-page .hall-topbar-nav .academy-nav-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .indoor-hall-page .hall-app-shell {
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .indoor-hall-page .training-hall-scene {
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    background: #07142a;
  }

  .indoor-hall-page .hall-stage {
    order: 1;
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 24px) !important;
    height: clamp(390px, 72dvh, 560px) !important;
    min-height: 390px;
    margin: 12px auto 0;
    overflow: hidden !important;
    border: 1px solid rgba(212,175,55,.34);
    border-radius: 22px;
  }

  .indoor-hall-page .hall-background-image {
    object-fit: cover !important;
    object-position: 62% center;
  }

  .indoor-hall-page .indoor-progress-widget {
    order: 0;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 12px auto 0;
    padding: 12px 14px;
  }

  .indoor-hall-page .indoor-progress-title {
    margin-bottom: 8px;
  }

  .indoor-hall-page .indoor-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .indoor-hall-page .rabbit-player,
  .indoor-hall-page .rabbit-player[data-pose],
  .indoor-hall-page .rabbit-player[data-active-activity] {
    left: 50% !important;
    top: 94% !important;
    width: min(56vw, 250px) !important;
    transform: translate(-50%, -100%) !important;
  }

  .indoor-hall-page .rabbit-player .fitai-guide-panel {
    left: 50% !important;
    bottom: calc(100% - 22px) !important;
    width: min(84vw, 330px) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 170px;
    padding: 12px 14px !important;
    overflow: auto;
    transform: translateX(-50%) !important;
  }

  .indoor-hall-page .fitai-guide-kicker {
    font-size: 10px !important;
  }

  .indoor-hall-page .fitai-guide-message,
  .indoor-hall-page .fitai-guide-suggestion {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .indoor-hall-page .fitai-suggest-link {
    font-size: 13px;
  }

  .indoor-hall-page .indoor-control-dock {
    order: 2;
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 14px auto 18px !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .indoor-hall-page .indoor-control-dock .indoor-chooser {
    height: auto !important;
    display: grid !important;
    grid-template-rows: none !important;
    gap: 12px;
    overflow: visible !important;
  }

  .indoor-hall-page .indoor-chooser-cards {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
    max-height: none !important;
    overflow: visible !important;
  }

  .indoor-hall-page .indoor-chooser-card {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px;
  }

  .indoor-hall-page .workout-choice-grid {
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none !important;
    gap: 8px;
  }

  .indoor-hall-page .workout-choice-tile {
    min-height: 116px !important;
    height: auto !important;
    padding: 12px 8px;
  }

  .indoor-hall-page .workout-choice-glyph {
    width: 46px;
    height: 46px;
  }

  .indoor-hall-page .workout-choice-label {
    font-size: 12px;
  }

  .indoor-hall-page .session-setup-rows {
    display: grid !important;
    gap: 8px;
    overflow: visible !important;
  }

  .indoor-hall-page .session-setup-row {
    min-height: 0;
    padding: 9px;
  }

  .indoor-hall-page .session-setup-options,
  .indoor-hall-page .session-setup-row:first-child .session-setup-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .indoor-hall-page .session-setup-options button,
  .indoor-hall-page .indoor-session-setup-card .settings-time-btn {
    min-height: 40px;
    font-size: 12px;
  }

  .indoor-hall-page .indoor-start-workout-btn {
    width: 100%;
    min-height: 54px;
    font-size: 17px;
  }

  .indoor-hall-page .indoor-setup-completion {
    margin: 0;
    padding: 0 8px 4px;
    line-height: 1.35;
  }

  .indoor-hall-page .training-hall-scene[data-scene-state="active"] .indoor-control-dock,
  .indoor-hall-page .training-hall-scene[data-scene-state="active"] .indoor-chooser,
  .indoor-hall-page .training-hall-scene[data-scene-state="active"] .indoor-progress-widget {
    display: none !important;
  }

  .indoor-hall-page .current-activity-hud {
    order: 3;
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 14px auto 20px;
    transform: none !important;
  }

  .indoor-hall-page .current-activity-hud[hidden] {
    display: none !important;
  }

  .indoor-hall-page .hud-expanded {
    padding: 18px 16px 16px;
  }

  .indoor-hall-page .hud-controls {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .indoor-hall-page .footer.academy-footer,
  .indoor-hall-page .indoor-hall-footer {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0;
  }
}

@media (max-width: 430px) {
  .indoor-hall-page .hall-topbar-actions {
    justify-content: center !important;
  }

  .indoor-hall-page .sound-toggle {
    font-size: 11px;
  }

  .indoor-hall-page .hall-stage {
    height: 430px !important;
    min-height: 430px;
  }

  .indoor-hall-page .rabbit-player,
  .indoor-hall-page .rabbit-player[data-pose],
  .indoor-hall-page .rabbit-player[data-active-activity] {
    width: min(60vw, 235px) !important;
  }
}

/* =========================================================
   Outdoor map mobile layout
   The map stays interactive at the top and the recommendation drawer
   becomes a normal scrolling section underneath it.
   ========================================================= */
@media (max-width: 760px) {
  .map-academy.find-break-page {
    width: 100%;
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .map-academy .academy-map-topbar {
    position: fixed !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1800;
    width: 100%;
    height: auto !important;
    min-height: 0;
    padding: 10px 12px 12px !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
  }

  .map-academy .map-topbar-left {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .map-academy .academy-map-actions {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    justify-content: center !important;
    gap: 6px;
  }

  .map-academy .academy-map-actions .weather-chip {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
    overflow: hidden;
  }

  .map-academy .academy-map-actions .weather-chip > span:not(.weather-chip-icon) {
    display: none;
  }

  .map-academy .academy-map-nav {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    display: flex !important;
    justify-content: space-around;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .map-academy .academy-map-nav::-webkit-scrollbar {
    display: none;
  }

  .map-academy .academy-map-nav .academy-nav-link {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  .map-academy .map-app-shell {
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: visible !important;
    background: #071421;
  }

  .map-academy .movement-content {
    order: 1;
    position: relative;
    width: 100%;
    height: clamp(500px, 68dvh, 650px) !important;
    min-height: 500px;
    overflow: hidden;
  }

  .map-academy .outdoor-view,
  .map-academy .movement-map {
    width: 100%;
    height: 100% !important;
  }

  .map-academy .academy-map-frame {
    inset: 8px;
    border-radius: 14px;
  }

  .map-academy .map-search-row,
  .map-academy .academy-search-row,
  .map-academy .map-app-shell.sidebar-collapsed .map-search-row,
  .map-academy .map-app-shell.route-panel-open .map-search-row {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 1200 !important;
    transform: none !important;
    display: block !important;
    pointer-events: auto !important;
  }

  .map-academy .map-search-cluster {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 8px;
  }

  .map-academy .map-search-row .map-search-wrap {
    min-width: 0;
  }

  .map-academy .map-search-wrap input {
    height: 46px;
    padding-left: 42px;
    padding-right: 48px;
    font-size: 14px;
  }

  .map-academy .map-search-row .map-locate-button,
  .map-academy .map-search-row .map-dark-toggle {
    width: 44px;
    height: 44px;
  }

  .map-academy .map-search-suggestions {
    max-height: 260px;
  }

  .map-academy .movement-sidebar,
  .map-academy .movement-sidebar.is-docked,
  .map-academy .movement-sidebar.academy-drawer {
    order: 2;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    margin: 12px auto 22px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 20px !important;
  }

  .map-academy .map-app-shell.sidebar-collapsed .movement-sidebar {
    display: none !important;
  }

  .map-academy .movement-sidebar .movement-panel.is-active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px !important;
    overflow: visible !important;
  }

  .map-academy .quest-category-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .map-academy .outdoor-quick-filters .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .map-academy .outdoor-quick-filters .filter-pills::-webkit-scrollbar {
    display: none;
  }

  .map-academy .outdoor-quick-filters .type-filter {
    flex: 0 0 auto;
  }

  .map-academy .outdoor-select-row {
    grid-template-columns: 1fr;
  }

  .map-academy .outdoor-select {
    min-height: 46px;
  }

  .map-academy .outdoor-select select {
    font-size: 13px;
  }

  .map-academy .quest-result-list,
  .map-academy .recommendation-list {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .map-academy .quest-row-layout {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .map-academy .quest-thumb {
    width: 64px;
    height: 64px;
  }

  .map-academy .map-legend {
    display: none;
  }

  .map-academy .route-detail-panel,
  .map-academy .academy-route-summary {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-height: 46dvh;
    overflow-y: auto;
  }

  .map-academy .leaflet-control-zoom {
    margin-right: 12px !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 430px) {
  .map-academy .academy-brand strong {
    font-size: 16px;
  }

  .map-academy .academy-brand img {
    width: 34px;
    height: 34px;
  }

  .map-academy .movement-content {
    height: 540px !important;
    min-height: 540px;
  }

  .map-academy .quest-row-layout {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .map-academy .quest-thumb {
    width: 56px;
    height: 56px;
  }
}

/* =========================================================
   Dashboard book mobile layout
   Only the selected book view is displayed, and the section tabs stay
   reachable as a horizontal control bar beneath the book.
   ========================================================= */
@media (max-width: 760px) {
  .dashboard-book-page {
    overflow-x: hidden;
    background-attachment: scroll;
  }

  .dashboard-book-page .dashboard-book-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    height: auto !important;
    min-height: 0;
    padding: 10px 12px 12px;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
  }

  .dashboard-book-page .dashboard-book-topbar .academy-brand {
    flex: 1 1 100%;
    min-width: 0;
  }

  .dashboard-book-page .dashboard-book-topbar .language-picker {
    order: 2;
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
  }

  .dashboard-book-page .dashboard-book-links {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    display: flex !important;
    justify-content: space-around;
    gap: 8px;
  }

  .dashboard-book-page .magic-book-shell {
    min-height: 0;
    padding: 146px 10px 18px !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-book-page .magic-book {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 24px 14px 26px !important;
    background: linear-gradient(180deg, #f9e7bd, #f4d99f) !important;
    border: 3px solid #c79534;
    border-radius: 22px;
  }

  .dashboard-book-page .book-view {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .dashboard-book-page .book-view[hidden],
  .dashboard-book-page .book-view:not(.is-active) {
    display: none !important;
  }

  .dashboard-book-page .book-page {
    width: 100%;
    min-width: 0;
    max-height: none !important;
    padding: 18px 12px !important;
    overflow: visible !important;
  }

  .dashboard-book-page .book-page-left {
    border-right: 0;
    border-bottom: 1px solid rgba(112,75,28,.2);
  }

  .dashboard-book-page .dashboard-page-heading h1 {
    font-size: clamp(2.3rem, 12vw, 3.4rem);
  }

  .dashboard-book-page .body-map-visual.anatomy-body-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding-inline: 0;
  }

  .dashboard-book-page .anatomy-bunny {
    width: min(100%, 145px);
    height: auto;
    max-height: 270px;
  }

  .dashboard-book-page .dashboard-book-mini-grid,
  .dashboard-book-page .dashboard-book-mini-grid-refined,
  .dashboard-book-page .profile-reference-grid,
  .dashboard-book-page .preference-pair-grid,
  .dashboard-book-page .activity-lower-reference-grid,
  .dashboard-book-page .notification-reference-card {
    grid-template-columns: 1fr !important;
  }

  .dashboard-book-page .history-row {
    grid-template-columns: 24px minmax(0, 1fr) 54px 12px;
  }

  .dashboard-book-page .history-row small {
    display: none;
  }

  .dashboard-book-page .profile-medallion {
    width: 160px;
    height: 160px;
  }

  .dashboard-book-page .profile-medallion img {
    width: 118px;
    height: 118px;
  }

  .dashboard-book-page .preference-activity-grid,
  .dashboard-book-page .duration-reference-grid,
  .dashboard-book-page .time-reference-grid,
  .dashboard-book-page .achievements-right-reference .progress-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-book-page .favorite-reference-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   About page mobile layout
   Team details stack vertically and the member selector becomes a
   horizontally scrollable deck instead of shrinking every card.
   ========================================================= */
@media (max-width: 760px) {
  .about-us-page {
    overflow-x: hidden;
  }

  .about-us-page .about-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    height: auto !important;
    min-height: 64px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .about-us-page .academy-header-actions {
    gap: 8px;
  }

  .about-us-page .academy-inline-nav {
    display: none;
  }

  .about-us-page .academy-story-main {
    width: min(100% - 24px, 1180px);
    margin-inline: auto;
  }

  .about-us-page .academy-story-hero,
  .about-us-page .arcane-member-panel {
    grid-template-columns: 1fr !important;
  }

  .about-us-page .academy-story-copy h1 {
    font-size: clamp(2.35rem, 12vw, 3.6rem);
  }

  .about-us-page .academy-crest-showcase {
    min-height: 280px;
  }

  .about-us-page .academy-symbol-grid {
    grid-template-columns: 1fr !important;
  }

  .about-us-page .arcane-feature-portrait {
    max-width: 300px;
    margin-inline: auto;
  }

  .about-us-page .arcane-member-copy {
    min-width: 0;
  }

  .about-us-page .arcane-card-deck {
    display: flex !important;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .about-us-page .arcane-card-deck::-webkit-scrollbar {
    display: none;
  }

  .about-us-page .arcane-select-card {
    flex: 0 0 145px;
    scroll-snap-align: start;
  }
}


/* =========================================================
   Dashboard book mobile overflow guards
   Long sections stay readable and the quest journey wraps cleanly.
   ========================================================= */
@media (max-width: 760px) {
  .dashboard-book-page .magic-book,
  .dashboard-book-page .book-page,
  .dashboard-book-page .preferences-page-fill,
  .dashboard-book-page .quest-plan-page,
  .dashboard-book-page .quest-outdoor-page,
  .dashboard-book-page .profile-left-page,
  .dashboard-book-page .profile-right-page,
  .dashboard-book-page .activity-left-reference,
  .dashboard-book-page .activity-right-reference,
  .dashboard-book-page .achievements-left-reference,
  .dashboard-book-page .achievements-right-reference {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .dashboard-book-page .quest-journey-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .dashboard-book-page .quest-journey-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
  }

  .dashboard-book-page .quest-journey-sep {
    display: none !important;
  }

  .dashboard-book-page .book-subnav-row {
    margin-bottom: 10px;
  }

  .dashboard-book-page .book-back-button {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   V10 mobile interaction and spacing safeguards
   Mobile headers remain in document flow, map controls stay above Leaflet,
   and long dashboard sections use their natural content height.
   ========================================================= */
@media (max-width: 760px) {
  /* Keep the outdoor header visible without covering the map search controls. */
  .map-academy .academy-map-topbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }

  .map-academy .map-app-shell {
    margin-top: 0 !important;
  }

  .map-academy .map-search-row,
  .map-academy .academy-search-row,
  .map-academy .map-app-shell.sidebar-collapsed .map-search-row,
  .map-academy .map-app-shell.route-panel-open .map-search-row,
  .map-academy .map-app-shell.route-panel-open.sidebar-collapsed .map-search-row {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 2600 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .map-academy .map-search-cluster,
  .map-academy .map-search-wrap,
  .map-academy .map-locate-button,
  .map-academy .map-dark-toggle {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .map-academy .map-dark-toggle {
    position: relative !important;
    z-index: 2602 !important;
    touch-action: manipulation;
  }

  .map-academy .map-search-suggestions {
    z-index: 2610 !important;
  }

  /* The indoor header stays in flow so the FitAI bubble is not covered. */
  .indoor-hall-page .hall-topbar.academy-topbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }

  .indoor-hall-page .hall-app-shell {
    margin-top: 0 !important;
  }

  .indoor-hall-page .rabbit-player .fitai-guide-panel {
    bottom: calc(100% - 110px) !important;
    max-height: 158px !important;
  }

  /* Keep the quest journey compact instead of stretching into empty space. */
  .dashboard-book-page .book-view[data-book-view="quests"] {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .dashboard-book-page .quest-journey-row {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 14px 0 0 !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    text-align: left !important;
    background: rgba(255, 244, 218, 0.5) !important;
  }

  .dashboard-book-page .quest-journey-steps {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .dashboard-book-page .quest-journey-steps > span {
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 9px 5px !important;
    border-radius: 10px;
    background: rgba(255, 248, 229, 0.68);
    text-align: center;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .dashboard-book-page .quest-journey-sep {
    display: none !important;
  }

  .dashboard-book-page .quest-journey-links {
    width: 100% !important;
    flex: 0 0 auto !important;
    text-align: right;
  }
}

@media (max-width: 430px) {
  .indoor-hall-page .rabbit-player .fitai-guide-panel {
    bottom: calc(100% - 118px) !important;
    width: min(86vw, 326px) !important;
    max-height: 152px !important;
  }

  .dashboard-book-page .quest-journey-steps > span {
    font-size: 9px !important;
  }
}


/* =========================================================
   Dashboard and Indoor mobile finishing rules
   Hidden book spreads stay hidden, compact controls remain above the fixed
   dock, and the FitAI message sits above the rabbit instead of covering it.
   ========================================================= */
@media (max-width: 760px) {
  /* One dashboard spread at a time. */
  .dashboard-book-page .book-view,
  .dashboard-book-page .book-view[data-book-view="quests"],
  .dashboard-book-page .book-view[data-book-view="dashboard"],
  .dashboard-book-page .book-view[data-book-view="profile"],
  .dashboard-book-page .book-view[data-book-view="preferences"],
  .dashboard-book-page .book-view[data-book-view="activity"],
  .dashboard-book-page .book-view[data-book-view="achievements"] {
    display: none !important;
  }

  .dashboard-book-page .book-view.is-active:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .dashboard-book-page .book-view[hidden],
  .dashboard-book-page .book-view[aria-hidden="true"] {
    display: none !important;
  }

  /* Keep the journey controls compact and clear of the fixed bottom dock. */
  .dashboard-book-page .quest-journey-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 12px 14px 14px !important;
    margin: 12px 0 18px !important;
    gap: 10px 12px !important;
  }

  .dashboard-book-page .quest-journey-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center;
  }

  .dashboard-book-page .quest-journey-links {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
    text-align: right !important;
    align-self: center;
  }

  .dashboard-book-page .quest-journey-links a {
    display: inline-flex !important;
    align-items: center;
    min-height: 36px;
    padding: 6px 4px;
    white-space: nowrap;
  }

  .dashboard-book-page .quest-journey-steps {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .dashboard-book-page .magic-book-shell {
    padding-bottom: 106px !important;
  }

  /* Mobile profile level card: emblem, title and XP never overlap. */
  .dashboard-book-page .profile-level-reference .level-reference-row {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "emblem info"
      "xp xp" !important;
    gap: 10px 12px !important;
    align-items: center !important;
  }

  .dashboard-book-page .profile-level-reference .level-emblem {
    grid-area: emblem !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    box-sizing: border-box !important;
    border-width: 3px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
  }

  .dashboard-book-page .profile-level-reference .level-reference-row > div:nth-child(2) {
    grid-area: info !important;
    min-width: 0 !important;
  }

  .dashboard-book-page .profile-level-reference .level-reference-row h2 {
    margin: 0 0 2px !important;
    font-size: 21px !important;
    line-height: 1.05 !important;
  }

  .dashboard-book-page .profile-level-reference .level-reference-row strong {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .dashboard-book-page .profile-level-reference .level-reference-row small {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .dashboard-book-page .profile-level-reference .level-xp {
    grid-area: xp !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 4px !important;
  }

  .dashboard-book-page .profile-level-reference .level-xp b {
    margin-bottom: 7px !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  /* The guide belongs above the rabbit, leaving the face and body visible. */
  .indoor-hall-page .rabbit-player .fitai-guide-panel {
    left: 50% !important;
    top: auto !important;
    bottom: calc(100% + 14px) !important;
    width: min(84vw, 330px) !important;
    max-height: 142px !important;
    padding: 10px 12px !important;
    overflow-y: auto !important;
    transform: translateX(-50%) !important;
  }

  .indoor-hall-page .rabbit-player .fitai-guide-dialog {
    padding: 3px 6px !important;
  }

  .indoor-hall-page .rabbit-player .fitai-guide-message,
  .indoor-hall-page .rabbit-player .fitai-guide-suggestion {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .indoor-hall-page .rabbit-player .fitai-suggest-link {
    margin-top: 5px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  .dashboard-book-page .quest-journey-row {
    grid-template-columns: 1fr auto !important;
    padding-inline: 10px !important;
  }

  .dashboard-book-page .quest-journey-label {
    font-size: 9px !important;
  }

  .dashboard-book-page .quest-journey-links a {
    font-size: 10px !important;
  }

  .indoor-hall-page .rabbit-player .fitai-guide-panel {
    bottom: calc(100% + 10px) !important;
    width: min(82vw, 312px) !important;
    max-height: 136px !important;
  }
}