/* Counter Galaxy mobile shell and page-specific responsive corrections. */
@media (max-width: 800px) {
  :root {
    --mobile-top: 56px;
    --mobile-nav: 64px;
    --mobile-gutter: 10px;
  }

  html {
    min-width: 320px;
    overflow-x: hidden;
    scroll-padding-top: calc(var(--mobile-top) + 12px);
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    padding-bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom));
    -webkit-text-size-adjust: 100%;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  button,
  a,
  select,
  input[type="range"] {
    touch-action: manipulation;
  }

  /* Shared app header and bottom navigation. */
  .product-page .topbar,
  body:not(.product-page) > .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: var(--mobile-top);
    min-height: var(--mobile-top);
    padding: 0 12px;
    flex-wrap: nowrap;
    background: rgba(3, 7, 18, .96);
    border-bottom: 1px solid rgba(108, 247, 255, .16);
    backdrop-filter: blur(18px);
  }

  .product-page .brand,
  body:not(.product-page) > .topbar .brand {
    min-width: 0;
    min-height: var(--mobile-top);
    padding: 0;
    border: 0;
    gap: 9px;
    font-size: 10px;
    letter-spacing: .13em;
  }

  .product-page .brand-mark,
  body:not(.product-page) > .topbar .brand-mark {
    width: 22px;
    height: 22px;
  }

  .product-page .brand-mark:after,
  body:not(.product-page) > .topbar .brand-mark:after {
    left: 8px;
    top: 8px;
  }

  .product-page .page-nav,
  body:not(.product-page) > .topbar > nav {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: 0;
    order: initial;
    width: 100%;
    height: calc(var(--mobile-nav) + env(safe-area-inset-bottom));
    margin: 0;
    padding: 0 4px env(safe-area-inset-bottom);
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: rgba(3, 7, 18, .98);
    border-top: 1px solid rgba(108, 247, 255, .2);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .34);
    backdrop-filter: blur(20px);
    overscroll-behavior-x: contain;
  }

  .product-page .page-nav::-webkit-scrollbar,
  body:not(.product-page) > .topbar > nav::-webkit-scrollbar {
    display: none;
  }

  .product-page .page-nav a,
  body:not(.product-page) > .topbar > nav a {
    position: relative;
    flex: 1 1 0;
    min-width: 44px;
    min-height: var(--mobile-nav);
    padding: 29px 4px 8px;
    display: block;
    border: 0;
    color: #7887a4;
    background: none;
    text-align: center;
    white-space: nowrap;
    font-size: 7px;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .product-page .page-nav a:before,
  body:not(.product-page) > .topbar > nav a:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 19px;
    height: 19px;
    transform: translateX(-50%);
    background: currentColor;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
    opacity: .82;
    transition: opacity .18s ease, filter .18s ease, transform .18s ease;
  }

  .page-nav a[href="galaxy.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="galaxy.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cellipse cx='12' cy='12' rx='9' ry='4.7' transform='rotate(-28 12 12)'/%3E%3Cpath d='M12 3v2M12 19v2'/%3E%3C/g%3E%3Ccircle cx='19.2' cy='8.2' r='1.25' fill='black'/%3E%3C/svg%3E");
  }
  .page-nav a[href="heroes.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="heroes.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7v5c0 4.7-3.1 7.4-8 9-4.9-1.6-8-4.3-8-9V7l8-4Z'/%3E%3Cpath d='m8 14 4-6 4 6-4 3-4-3Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  .page-nav a[href="index.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="index.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='6' cy='16.5' r='2.5'/%3E%3Ccircle cx='18' cy='16.5' r='2.5'/%3E%3Cpath d='m10.5 9.6-3 4.7m6-4.7 3 4.7M8.5 16.5h7'/%3E%3C/g%3E%3C/svg%3E");
  }
  .page-nav a[href="matches.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="matches.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h5M8 16h8'/%3E%3Ccircle cx='17' cy='12' r='1' fill='black' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  }
  .page-nav a[href="replay.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="replay.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='m10 8 6 4-6 4V8Z'/%3E%3Cpath d='M6 2v4M18 2v4'/%3E%3C/g%3E%3C/svg%3E");
  }
  .page-nav a[href="patches.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="patches.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16M5 16l4-5 3 2 6-7'/%3E%3Cpath d='M14 6h4v4'/%3E%3C/g%3E%3C/svg%3E");
  }
  .page-nav a[href="profile.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="profile.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.8 20c.8-4 3.2-6 7.2-6s6.4 2 7.2 6'/%3E%3C/g%3E%3C/svg%3E");
  }
  .page-nav a[href="skill-challenge.html"]:before,
  body:not(.product-page) > .topbar > nav a[href="skill-challenge.html"]:before {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 1.5v4M12 18.5v4M1.5 12h4M18.5 12h4'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E");
  }

  .product-page .page-nav a.active,
  body:not(.product-page) > .topbar > nav a.active {
    color: #eefcff;
    background: linear-gradient(0deg, rgba(108, 247, 255, .09), transparent);
  }

  .product-page .page-nav a.active:before,
  body:not(.product-page) > .topbar > nav a.active:before {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(108, 247, 255, .72));
    transform: translateX(-50%) translateY(-1px);
  }

  .product-page .page-nav a.active:after,
  body:not(.product-page) > .topbar > nav a.active:after {
    left: 12px;
    right: 12px;
    top: 0;
    bottom: auto;
    height: 1px;
    margin: 0;
  }

  .product-page .live,
  body:not(.product-page) > .topbar .live {
    display: none;
  }

  .product-page .player {
    min-width: 0;
    max-width: 52%;
    height: 38px;
    margin-left: auto;
    padding: 3px;
    overflow: hidden;
  }

  .product-page .player img { width: 30px; height: 30px; flex: 0 0 auto; }
  .product-page .player a { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-page .player .viewing-other-badge,
  .product-page .player .player-action,
  .product-page .player .player-logout { display: none !important; }

  .drawer-open,
  .hero-detail-open { padding-bottom: 0; }
  .drawer-open > .topbar,
  .hero-detail-open > .topbar { display: none; }

  .product-page > .legend,
  .product-page > .loading-status {
    bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 8px);
  }

  .analytics-launchpad {
    display: flex;
    width: 100%;
    padding: 7px 10px;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .analytics-launchpad::-webkit-scrollbar { display: none; }
  .analytics-launchpad-title { display: none; }
  .analytics-launchpad > a {
    min-width: 178px;
    min-height: 52px;
    scroll-snap-align: start;
  }

  /* Pool. */
  .product-page .login-panel {
    min-height: calc(100dvh - var(--mobile-top) - var(--mobile-nav));
    padding: 16px 10px;
    align-items: flex-start;
  }
  .product-page .login-card { width: 100%; max-width: 440px; padding: 20px 16px; }
  .product-page .login-card h2 { font-size: 24px; }
  .manual-login-form,
  .nick-search-form { grid-template-columns: minmax(0, 1fr) auto; }
  .manual-login-form input,
  .nick-search-form input { min-width: 0; }
  .nick-search-results { max-height: min(340px, 42dvh); }

  .pool-history-summary { margin: 10px 10px 0; padding: 10px 12px; }
  .hero-picker { margin: 8px 10px 0; padding: 10px; }
  .hero-picker-toolbar { grid-template-columns: 1fr; gap: 8px; }
  .hero-picker-title { grid-column: auto; }
  .hero-picker-search input,
  .hero-picker-sort,
  .hero-picker-toggle { min-height: 44px; }
  .hero-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hero-picker-card { min-width: 0; }

  .product-page .stage { width: 100%; padding: 10px 10px 32px; }
  .product-page .stage-frame.pool-flat-frame,
  .product-page .pool-guides,
  .product-page .hero-consult,
  .product-page .personal-ai { width: 100%; max-width: none; }
  .pool-flat-schema { grid-template-columns: 1fr; gap: 10px; }
  .pool-flat-center { order: -1; min-height: 0; padding: 18px 14px; }
  .pool-flat-main-glow { width: min(190px, 70vw); height: 205px; margin: 12px 0 8px; }
  .pool-flat-center small { display: none; }
  .pool-flat-zone { padding: 14px; }
  .pool-flat-zone header { min-height: 0; margin-bottom: 12px; padding-bottom: 12px; }
  .pool-flat-zone h2 { font-size: 19px; }
  .pool-flat-grid { grid-template-columns: 1fr; gap: 7px; }
  .pool-flat-node { min-height: 76px; grid-template-columns: 50px minmax(0, 1fr); padding: 9px; }
  .pool-flat-portrait { width: 50px; height: 50px; }
  .drag-hint { padding: 8px 12px; text-align: center; line-height: 1.45; }
  .pool-guide-section { padding: 13px; }
  .pool-guide-grid,
  .personal-ai-columns,
  .personal-ai-recommendations,
  .hero-consult-answer,
  .match-consult-list { grid-template-columns: 1fr; }
  .hero-consult,
  .personal-ai { padding: 14px; }
  .hero-consult-head { align-items: flex-start; }
  .hero-consult-head img { width: 46px; height: 46px; }
  .match-analysis-actions,
  .match-auto-analysis { grid-template-columns: 1fr; }
  .match-analysis-actions button,
  .match-auto-analysis button { min-height: 44px; }
  .tooltip {
    position: fixed !important;
    z-index: 1200 !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(var(--mobile-nav) + 8px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 62dvh !important;
    overflow: auto;
  }

  /* Heroes. */
  .heroes-page,
  .matches-page,
  .profile-page { width: calc(100% - 20px); padding: 12px 0 32px; }
  .heroes-hero { min-height: 0; padding: 18px 16px; }
  .heroes-hero h1 { font-size: clamp(24px, 8vw, 31px); }
  .heroes-hero p { font-size: 10px; }
  .heroes-controls { grid-template-columns: 1fr; margin: 8px 0; padding: 8px; }
  .heroes-controls input,
  .heroes-controls select { height: 44px; font-size: 16px; }
  .hero-order { grid-column: auto; min-width: 0; }
  .hero-order div { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .hero-order button { min-width: max-content; min-height: 40px; }
  .heroes-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hero-summary-card { min-width: 0; padding: 12px; }
  .heroes-grid-head { align-items: flex-start; gap: 8px; }
  .heroes-grid-head small { max-width: 48%; text-align: right; }
  .heroes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .meta-hero-card { min-width: 0; min-height: 166px; }
  .meta-hero-image { height: 86px; }
  .meta-hero-copy { padding: 2px 8px 9px; }
  .meta-hero-stats { gap: 4px; }
  .meta-hero-stats span { min-width: 0; padding: 5px; }
  .hero-detail-panel { width: 100%; max-width: none; }
  .hero-detail-panel > header { padding: 11px; }
  .hero-detail-title { min-width: 0; gap: 10px; }
  .hero-detail-title img { width: 82px; height: 48px; }
  .hero-detail-title h2 { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
  .hero-detail-content { padding: 10px; }
  .detail-metrics,
  .hero-patch-history { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-relations { grid-template-columns: 1fr; }
  .detail-actions { flex-direction: column; }
  .detail-actions a { min-height: 44px; text-align: center; }

  /* Matches and shared match drawer. */
  .matches-hero { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 16px; }
  .matches-player { min-width: 0; }
  .matches-player img { width: 58px; height: 58px; }
  .matches-player h1 { max-width: 65vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
  .matches-hero > button { width: 100%; min-height: 44px; }
  .matches-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .matches-summary article { min-width: 0; padding: 12px; }
  .matches-content .profile-match,
  .profile-match { grid-template-columns: minmax(0, 1fr) 56px; min-height: 66px; padding: 8px; }
  .matches-content .profile-match .match-mode-badge,
  .matches-content .profile-match .match-duration,
  .matches-content .profile-match .match-date,
  .matches-content .profile-match .match-kda,
  .profile-match .match-mode-badge,
  .profile-match .match-duration,
  .profile-match .match-date,
  .profile-match .match-kda { display: none; }
  .match-analysis-box { padding: 15px 13px; }
  .match-analysis-copy { padding-right: 0; }
  .match-analysis-box > button { position: relative; right: auto; top: auto; width: 100%; min-height: 44px; margin-top: 13px; }
  .analysis-toast { left: 8px; right: 8px; bottom: calc(var(--mobile-nav) + 8px); grid-template-columns: 9px 1fr; }
  .analysis-toast button { grid-column: 2; min-height: 38px; }
  .match-drawer-panel { width: 100%; max-width: none; }
  .match-drawer-head { padding: 14px; }
  .match-drawer-body { padding: 10px; }
  .match-preview-summary { grid-template-columns: 1fr auto 1fr; gap: 7px; padding: 12px 8px; }
  .match-player-row { grid-template-columns: 32px minmax(0, 1fr) 42px; gap: 7px; }
  .match-player-row span:nth-last-child(-n+4) { display: none; }
  .match-ai-form { grid-template-columns: 1fr; padding: 10px; }
  .match-ai-form button { min-height: 44px; }
  .match-stratz { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px 10px; }
  .match-demo-map-head,
  .match-demo-world > header { align-items: flex-start; flex-direction: column; }
  .demo-world-toolbar { grid-template-columns: 1fr; }
  .demo-world-toolbar button { min-height: 40px; }
  .demo-world-toolbar span { text-align: center; }
  .match-demo-vision-grid,
  .match-demo-vision-windows ul { grid-template-columns: 1fr; }
  .match-demo-world { padding: 7px; }
  .match-demo-world text { display: none; }

  /* Profile. */
  .profile-identity { grid-template-columns: 66px minmax(0, 1fr); gap: 13px; min-height: 0; padding: 16px; }
  .profile-avatar-wrap { width: 64px; height: 64px; }
  .profile-identity h1 { max-width: 58vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; }
  .profile-source-badges { margin-top: 10px; }
  .profile-source-badges b:nth-child(n+3) { display: none; }
  .profile-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .profile-actions a,
  .profile-actions button { min-width: 0; min-height: 42px; display: grid; place-items: center; }
  .profile-actions button { grid-column: 1 / -1; }
  .profile-section-nav {
    top: var(--mobile-top);
    margin: 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .profile-section-nav::-webkit-scrollbar { display: none; }
  .profile-section-nav a { min-height: 40px; padding: 8px 11px; white-space: nowrap; }
  .profile-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .profile-metric { min-width: 0; min-height: 76px; padding: 12px; }
  .profile-card > header { padding: 14px; flex-direction: column; }
  .profile-card header h2 { font-size: 17px; }
  .hero-sort,
  .match-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .hero-sort button,
  .match-filters button { min-height: 38px; white-space: nowrap; }
  .match-list-controls { width: 100%; align-items:stretch; justify-content:flex-start; }
  .match-sort,.match-consult-title>.match-sort { width:100%; min-width:0; margin-left:0; }
  .match-sort select { min-height:42px; font-size:10px; }
  .profile-heroes { grid-template-columns: 1fr; padding: 7px; }
  .profile-hero-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
  .profile-hero-row img { width: 44px; height: 44px; }
  .performance-content { flex-direction: column; padding: 16px; }
  .mode-bars { width: 100%; }
  .consultation-history,
  .report-columns,
  .profile-achievement-grid { grid-template-columns: 1fr; }
  .profile-skill-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Patch analytics. */
  .product-page .patches-page { width: 100%; max-width: none; padding: 12px 10px 32px; }
  .product-page .intro-card,
  .product-page .chart-card { padding: 15px 13px; }
  .product-page .intro-card h1 { font-size: 23px; }
  .chart-card-head { flex-direction: column; }
  .patch-sort { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .patch-sort button { min-height: 38px; white-space: nowrap; }
  .patch-browser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-card { overflow-x: auto; }
  .meta-table { min-width: 570px; }
  .line-chart-wrap { min-width: 500px; }
  .div-row { grid-template-columns: 24px 76px minmax(100px, 1fr) 42px; gap: 6px; }

  /* Skill lab overview and arena. */
  .challenge-page { width: calc(100% - 20px); padding: 10px 0 32px; }
  .challenge-hero { min-height: 0; padding: 28px 18px 0; }
  .challenge-hero-copy h1 { font-size: clamp(34px, 10vw, 44px); line-height: 1.06; }
  .challenge-hero-copy p { font-size: 12px; }
  .challenge-hero-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-bottom: 22px; }
  .challenge-hero-actions button,
  .challenge-hero-actions a { min-height: 44px; display: grid; place-items: center; }
  .challenge-radar { display: none; }
  .challenge-totals { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: 1fr; margin: 0 -18px; padding: 0 18px; }
  .challenge-totals article { display: grid; grid-template-columns: 1fr auto; min-height: 60px; padding: 12px 0; }
  .challenge-totals article:after { display: none; }
  .challenge-totals span,
  .challenge-totals small { grid-column: 1; }
  .challenge-totals b { grid-column: 2; grid-row: 1 / 3; }
  .challenge-games { grid-template-columns: 1fr; }
  .challenge-game-card { min-height: 300px; }
  .challenge-board-section,
  .roadmap-list { grid-template-columns: 1fr; }
  .challenge-board-main,
  .achievement-panel { padding: 13px; }
  .board-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .board-tabs button { min-height: 38px; white-space: nowrap; }
  .leader-head,
  .leader-row { grid-template-columns: 42px minmax(0, 1fr) 72px; }
  .leader-head span:nth-child(4),
  .leader-row time { display: none; }
  .challenge-arena { padding-bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); }
  .challenge-playing { padding-bottom: 0; }
  .challenge-playing > .topbar { display: none; }
  .challenge-playing .challenge-arena { padding-bottom: 0; }
  .arena-header { min-height: 104px; padding: 7px 8px; flex-wrap: wrap; }
  .arena-name { min-width: calc(100% - 68px); }
  .arena-name span { display: none; }
  .arena-name h2 { font-size: 13px; }
  .arena-hud { order: 3; width: 100%; height: 46px; }
  .arena-hud article { flex: 1; min-width: 0; padding: 0 6px; }
  .arena-hud article:nth-child(3) { display: none; }
  .difficulty-control { display: none; }
  .arena-exit { position: absolute; right: 8px; top: 8px; min-height: 36px; }
  .arena-mount { min-height: calc(100dvh - 104px); overflow: auto; }
  .quiz-game,
  .roshan-game { grid-template-columns: 1fr; gap: 14px; padding: 24px 12px; overflow: auto; }
  .quiz-portrait { width: min(100%, 420px); }
  .quiz-options,
  .roshan-question > div { grid-template-columns: 1fr; }
  .build-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .build-items button { min-width: 0; }
  .invoker-game-v2 { grid-template-columns: 1fr; grid-template-rows: minmax(250px, 45dvh) auto; gap: 8px; padding: 8px; }
  .invoker-hero-card { width: min(100%, 430px); height: 100%; justify-self: center; }
  .invoker-training { width: 100%; padding: 12px 6px 20px; }
  .invoker-game-v2 .invoker-keys { gap: 3px; }
  .invoker-game-v2 .invoker-keys button { width: 52px; height: 66px; }
  .invoker-game-v2 .invoker-keys img,
  .invoker-game-v2 .cast-rune { width: 43px; height: 43px; }
  .invoker-game-v2 .combo-sequence i { width: 35px; height: 35px; }
  .arena-result { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 20px 14px; overflow: auto; }
  .result-actions { display: grid; grid-template-columns: 1fr; }
  .result-actions button { min-height: 44px; }
}

@media (max-width: 380px) {
  .product-page .page-nav a,
  body:not(.product-page) > .topbar > nav a { min-width: 42px; font-size: 6.5px; }
  .product-page .brand > span:last-child,
  body:not(.product-page) > .topbar .brand > span:last-child { max-width: 116px; overflow: hidden; }
  .heroes-grid { grid-template-columns: 1fr; }
  .meta-hero-card { min-height: 190px; }
  .meta-hero-image { height: 108px; }
  .profile-metrics,
  .heroes-summary,
  .patch-browser,
  .hero-picker-grid { grid-template-columns: 1fr; }
  .match-stratz { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  :root { --mobile-top: 48px; --mobile-nav: 54px; }
  .product-page .page-nav a,
  body:not(.product-page) > .topbar > nav a { min-height: 54px; padding-top: 25px; }
  .product-page .page-nav a:before,
  body:not(.product-page) > .topbar > nav a:before { top: 7px; }
  .galaxy-page main,
  body:not(.product-page) main { height: calc(100dvh - var(--mobile-top) - var(--mobile-nav)); }
  .challenge-arena { padding-bottom: var(--mobile-nav); }
  .arena-header { min-height: 50px; flex-wrap: nowrap; }
  .arena-hud { order: initial; width: auto; height: 42px; }
}

/* Galaxy uses a fixed viewport, so its mobile layout is kept outside the product shell. */
@media (max-width: 800px) {
  .galaxy-page {
    height: 100dvh;
    padding-bottom: var(--mobile-nav);
    overflow: hidden;
  }
  .galaxy-page > main { height: calc(100dvh - var(--mobile-top) - var(--mobile-nav)); }
  .galaxy-page .hero-copy { left: 12px; top: 12px; width: min(235px, 62vw); }
  .galaxy-page .hero-copy h1 { font-size: 25px; }
  .galaxy-page .hero-copy .eyebrow { margin-bottom: 8px; }
  .galaxy-page .controls {
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    padding: 9px;
  }
  .galaxy-page .controls .search { height: 42px; }
  .galaxy-page .controls .control-block,
  .galaxy-page .controls .layers,
  .galaxy-page .controls .legend { display: none; }
  .galaxy-page .inspector {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    width: auto;
    max-height: min(62dvh, 520px);
    padding: 14px;
    overflow-y: auto;
  }
  .galaxy-page .inspector .relations-scroll { overflow: visible; }
  .galaxy-page .relation-highlights { grid-template-columns: 1fr; }
  .galaxy-page .metrics { margin: 10px 0; }
  .galaxy-page .zoom-tools { right: 8px; bottom: 62px; }
  .galaxy-page .personal-panel,
  .galaxy-page .profile-prompt {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
  }
  .galaxy-page .personal-panel { bottom: 8px; }
  .galaxy-page .profile-prompt { top: 8px; }
  .galaxy-page .axis-label[data-role] { font-size: 7px; padding: 4px 6px; }
  .galaxy-page .stats-strip,
  .galaxy-page .orbit-help { display: none; }
  .galaxy-page.galaxy-expanded { padding-bottom: 0; }
  .galaxy-page.galaxy-expanded main { height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}