@media (max-width: 900px) {
  .global-top-logo {
    width: clamp(192px, 40.8vw, 288px);
  }

  .site-header {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-actions {
    margin-left: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .level-overview {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .xp-overview {
    width: 100%;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .battlefield {
    gap: 8px;
  }

  .deck-builder-grid {
    grid-template-columns: 1fr;
  }

  .deck-builder-stage {
    grid-template-columns: 1fr;
  }

  .deck-preview-panel {
    position: static;
    width: auto;
    margin-bottom: 12px;
  }

  .deck-collection-book {
    min-height: 0;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-side-card h3 {
    font-size: 24px;
  }

  .dash-stats {
    grid-template-columns: 1fr;
  }

  .leaderboard-columns {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding: 18px;
  }

  .home-hero-grid {
    grid-template-columns: 1fr;
  }

  .home-feature-grid {
    grid-template-columns: 1fr;
  }

  .home-metrics {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  body.landing-page {
    --home-auth-panel-left: 50%;
    --home-auth-panel-shift-x: 100px;
    --home-auth-panel-top: 50%;
    --home-auth-panel-shift-y: 70px;
    --home-copy-open-x: -124px;
    --home-copy-open-y: -126px;
  }

  .auth-shell {
    max-width: 980px;
    margin: 0 auto 30px;
    min-height: calc(100vh - 170px);
    padding-top: clamp(18px, 6vh, 72px);
    gap: 14px;
    align-items: start;
    align-content: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  }

  .auth-card {
    width: 100%;
    max-width: none;
    margin: 0;
    justify-self: stretch;
  }

  .auth-card.auth-card-modern {
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .auth-card .auth-head,
  .auth-card .auth-form,
  .auth-card .auth-error,
  .auth-card .auth-footer {
    max-width: 500px;
  }

  .auth-side-card {
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-left: 1px solid rgba(220, 168, 101, 0.36);
    padding: 2px 0 0 20px;
    background: transparent;
    max-width: none;
    justify-self: stretch;
    align-self: center;
  }

  .auth-side-card h3 {
    font-size: 22px;
    line-height: 1.2;
    margin: 6px 0 8px;
  }

  .auth-side-card p {
    line-height: 1.45;
  }

  .home-hero {
    max-width: 980px;
    margin-top: -50px;
    margin-bottom: 12px;
    padding: 30px 0 16px;
    min-height: calc(100vh - 220px);
    display: grid;
    align-content: center;
    border: 0;
    border-radius: 0;
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    margin-left: clamp(-26px, -1.4vw, -8px);
    margin-right: auto;
  }

  body.landing-page.landing-page-auth .container {
    max-width: none;
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .home-hero.home-hero-dashboard {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .home-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-orbit {
    display: none;
  }

  .home-hero::after {
    display: none;
  }

  .home-hero-grid {
    gap: 18px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
  }

  .home-copy {
    justify-self: start;
    width: min(100%, 760px);
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    transform-origin: top left;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition: transform 340ms cubic-bezier(0.22, 0.78, 0.22, 1), opacity 280ms ease;
  }

  .home-copy.home-copy-dashboard {
    width: 100%;
  }

  .home-title {
    margin: 10px 0 14px;
    text-align: left;
    text-shadow: none;
    transition: transform 320ms cubic-bezier(0.22, 0.78, 0.22, 1), opacity 260ms ease;
  }

  .home-title-logo {
    width: min(100%, clamp(196px, 24vw, 332px));
    max-height: clamp(64px, 8.2vw, 102px);
    margin-left: 0;
    margin-right: 0;
  }

  .home-subtitle {
    max-width: 620px;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.45;
    color: rgba(235, 221, 200, 0.9);
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    text-shadow: none;
    transition: opacity 260ms ease, transform 320ms cubic-bezier(0.22, 0.78, 0.22, 1);
  }

  .home-kicker {
    color: rgba(214, 186, 148, 0.82);
    letter-spacing: 0.14em;
    font-size: 11px;
  }

  .home-cta-row {
    margin-top: 24px;
    gap: 12px;
    justify-content: flex-start;
    transition: transform 320ms cubic-bezier(0.22, 0.78, 0.22, 1), opacity 260ms ease;
  }

  body.landing-page.landing-auth-open .home-copy {
    transform: translate(var(--home-copy-open-x, -132px), var(--home-copy-open-y, -116px));
  }

  body.landing-page.landing-auth-open .home-title {
    transform: translateY(-4px);
    opacity: 0.98;
  }

  body.landing-page.landing-auth-open .home-subtitle {
    transform: translateY(-4px);
    opacity: 0.9;
  }

  body.landing-page.landing-auth-open .home-cta-row {
    transform: translateY(-6px);
    opacity: 0.95;
  }

  .home-inline-auth {
    left: calc(var(--home-auth-panel-left, 50%) + var(--home-auth-panel-shift-x, 0px));
    top: calc(var(--home-auth-panel-top, 50%) + var(--home-auth-panel-shift-y, 0px));
    width: clamp(350px, 29vw, 480px);
  }


  .home-cta-row .btn-link {
    border-radius: 0;
    box-shadow: none;
    transform: none;
    min-height: clamp(42px, 4vw, 46px);
    padding: 0 clamp(14px, 1.8vw, 18px);
    font-size: clamp(13px, 1.05vw, 15px);
    transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  }

  .home-primary-btn {
    background: rgba(245, 250, 255, 0.5);
    border-color: rgba(180, 220, 252, 0.72);
    color: #f4fbff;
    box-shadow: none;
  }

  .home-primary-btn:hover,
  .home-primary-btn:focus-visible {
    background: rgba(245, 250, 255, 1);
    border-color: rgba(180, 220, 252, 0.72);
    color: #f4fbff;
    transform: none;
    box-shadow: none;
  }

  .home-primary-btn:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .home-ghost-btn {
    background: rgba(61, 134, 205, 0.22);
    border-color: rgba(117, 201, 255, 0.72);
    color: #d8eeff;
    box-shadow: none;
  }

  .home-ghost-btn:hover,
  .home-ghost-btn:focus-visible {
    background: rgba(61, 134, 205, 1);
    border-color: rgba(117, 201, 255, 0.72);
    color: #d8eeff;
    transform: none;
    box-shadow: none;
  }

  .home-ghost-btn:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .home-auth-tab:hover,
  .home-auth-tab:focus-visible {
    box-shadow: none;
    filter: none;
    transform: none;
  }

  .home-auth-tab[data-auth-tab="register"]:hover,
  .home-auth-tab[data-auth-tab="register"]:focus-visible,
  .home-auth-tab[data-auth-tab="register"][aria-selected="true"] {
    background: rgba(242, 126, 52, 1);
    border-color: rgba(255, 164, 106, 0.72);
    color: #fff1e9;
  }

  .home-auth-tab[data-auth-tab="login"]:hover,
  .home-auth-tab[data-auth-tab="login"]:focus-visible,
  .home-auth-tab[data-auth-tab="login"][aria-selected="true"] {
    background: rgba(61, 134, 205, 1);
    border-color: rgba(117, 201, 255, 0.72);
    color: #d8eeff;
  }

  .home-level-wrap,
  .home-metrics-card,
  .home-pass-preview-card {
    max-width: 560px;
  }

  .home-copy-dashboard {
    width: 100%;
  }

  .home-dashboard-shell {
    max-width: 900px;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 48px;
    transform: none;
  }

  .home-dashboard-primary {
    max-width: min(100%, 860px);
    justify-self: center;
  }

  .home-dashboard-actions {
    gap: 14px;
  }

  .home-dashboard-actions-row {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    gap: 32px;
  }

  .home-play-center-btn {
    min-width: 230px;
  }

  .home-collection-btn {
    min-width: 230px;
  }

  .home-collection-preview-card {
    width: 220px;
  }

  .home-profile-progress-stack {
    top: 58px;
    right: 54px;
  }

  .home-profile-progress-stats {
    transform: translateX(74px);
    margin-top: 12px;
  }

  .home-dashboard-primary .home-pass-preview-card,
  .home-dashboard-side .home-metrics-card {
    max-width: min(100%, 860px);
  }

  .home-pass-preview-card-lower-left {
    margin-top: 8px;
  }

  .home-progress-card {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 10px 0 0;
  }

  .home-metrics-card {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 8px 0 0;
  }

  .home-pass-preview-card {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 10px 0 0;
  }

  .home-live-panel {
    border-radius: 0;
    border: 0;
    border-left: 1px solid rgba(236, 166, 75, 0.28);
    padding: 2px 0 0 22px;
    box-shadow: none;
    backdrop-filter: none;
    background: transparent;
  }

  .home-live-panel h2 {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 26px;
    color: #fff1dc;
    text-shadow: none;
  }


  .home-panel-head {
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .home-panel-head p {
    color: rgba(232, 215, 191, 0.86);
    letter-spacing: 0.1em;
  }

  .home-live-dot {
    animation: none;
    box-shadow: none;
    opacity: 0.86;
  }

  .home-updates {
    width: 100%;
    max-width: 900px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    margin-left: auto;
    margin-right: auto;
  }

  .home-updates.home-updates-secondary {
    max-width: 820px;
  }

  .home-updates .card-head {
    justify-content: flex-end;
    margin-bottom: 4px;
    padding: 0;
  }

  .home-updates .card-head h2 {
    font-size: 16px;
    letter-spacing: 0;
    opacity: 0.88;
  }

  .home-updates .updates-grid {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: visible;
    padding: 12px 2px 4px;
  }

  .home-updates .updates-grid::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 16px;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(236, 152, 74, 0.42) 0%,
      rgba(98, 178, 236, 0.4) 52%,
      rgba(204, 106, 210, 0.38) 100%
    );
    pointer-events: none;
  }

  .home-updates .update-item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent !important;
    border-top: 0;
    padding: 10px 0 4px;
    transition: color var(--transition), opacity var(--transition);
  }

  .home-updates .update-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd39d 0%, #f0a05f 42%, #7ab7f3 72%, #c16ad8 100%);
    box-shadow: 0 0 0 3px rgba(156, 124, 222, 0.16);
  }

  .home-updates .update-item:hover {
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
  }

  .home-updates .update-item:hover h3 {
    color: #eaf6ff;
  }

  .home-updates .update-item:hover .update-date {
    color: #eaf6ff;
    opacity: 0.88;
  }

  .home-updates .update-item:hover .tag {
    filter: brightness(1.08);
  }

  .home-updates .update-item-link:focus-visible {
    outline: 0;
  }

  .home-updates .update-item h3 {
    font-size: 13px;
    line-height: 1.3;
    margin: 5px 0 0;
  }

  .home-updates .update-item p {
    display: none;
  }

  .home-updates .tag-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    opacity: 0.86;
  }

  .home-updates .tag {
    border-radius: 0;
    padding: 1px 6px;
    font-size: 9px;
    letter-spacing: 0.02em;
  }

  .home-updates .tag-date {
    padding: 2px 7px;
    font-size: 10px;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  .home-updates .update-date {
    font-size: 10px;
    opacity: 0.76;
  }

  .home-updates .subtle-link {
    font-size: 11px;
    opacity: 0.86;
  }

  .home-feature-grid {
    gap: 22px;
    margin-bottom: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-feature-card {
    border-radius: 0;
    border: 0;
    border-left: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .home-feature-card h3 {
    font-size: 24px;
    line-height: 1.16;
    margin: 6px 0 8px;
  }

  .home-feature-card p {
    line-height: 1.45;
  }

  .home-panel-media {
    margin: 10px 0 4px;
    border-radius: 6px;
    border: 1px solid rgba(232, 164, 72, 0.14);
    box-shadow: none;
    background: transparent;
    overflow: hidden;
  }

  .home-panel-media img {
    width: 112%;
    max-width: none;
    margin-left: -6%;
    display: block;
  }

  .home-panel-media::before,
  .home-panel-media::after {
    display: none;
    animation: none;
  }

  /* Desktop homepage uses intrinsic sizing for crisp rendering (no transform scaling). */
}

@media (min-width: 901px) and (max-width: 1439px) and (hover: hover) and (pointer: fine) {
  body.landing-page {
    --home-auth-panel-shift-x: 80px;
    --home-auth-panel-shift-y: 58px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) and (hover: hover) and (pointer: fine) {
  body.landing-page {
    --home-auth-panel-shift-x: 92px;
    --home-auth-panel-shift-y: 66px;
  }
}

@media (min-width: 2560px) and (hover: hover) and (pointer: fine) {
  body.landing-page {
    --home-auth-panel-shift-x: 120px;
    --home-auth-panel-shift-y: 82px;
  }
}

@media (min-width: 901px) and (min-height: 1200px) and (hover: hover) and (pointer: fine) {
  .home-hero {
    min-height: calc(100vh - 220px);
    margin-left: clamp(-62px, -3.4vw, -30px);
  }

  .home-copy {
    width: min(100%, 760px);
    margin-left: 0;
  }

  .home-title-logo {
    width: min(100%, clamp(220px, 20vw, 320px));
    max-height: clamp(72px, 7.8vw, 98px);
  }

  .home-subtitle {
    font-size: clamp(16px, 1.15vw, 18px);
    max-width: 620px;
    line-height: 1.45;
  }

  .home-kicker {
    font-size: 12px;
  }

  .home-cta-row .btn-link {
    min-height: clamp(42px, 3.4vw, 46px);
    padding: 0 clamp(14px, 1.4vw, 18px);
    font-size: clamp(13px, 1vw, 15px);
  }

  .home-progress-level {
    font-size: 20px;
  }

  .home-metric-stat {
    font-size: 18px;
  }

  .home-inline-auth {
    width: clamp(350px, 29vw, 480px);
  }

  .home-auth-tabs {
    gap: 10px;
    margin-bottom: 14px;
  }

  .home-auth-tab {
    font-size: 12px;
    padding: 5px 10px;
  }

  .home-auth-panel {
    min-height: 286px;
  }

  .home-inline-auth-form label {
    font-size: 14px;
  }

  .home-inline-auth-form input[type="text"],
  .home-inline-auth-form input[type="password"],
  .home-inline-auth-form input[type="email"] {
    min-height: 46px;
    font-size: 16px;
  }

  .home-auth-field-status {
    top: 40px;
    min-width: 16px;
    min-height: 16px;
    font-size: 16px;
  }

  .home-auth-password-rules li {
    font-size: 12px;
  }

  .home-inline-auth-submit {
    min-height: 48px;
    font-size: 14px;
  }

}

@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .side-rail-desktop-toggle {
    display: none;
  }

  .home-profile-progress-stack {
    position: static;
    margin: 0 0 10px;
  }

  .home-profile-progress-stats {
    transform: none;
  }

  .home-play-center-btn {
    min-width: 0;
    width: 100%;
  }

  .home-dashboard-actions-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-dashboard-shell {
    transform: none;
  }

  .home-collection-btn {
    min-width: 0;
    width: 100%;
  }

  .home-collection-preview-card {
    width: 188px;
  }

  .home-pass-preview-card-lower-left {
    margin-top: 10px;
  }

  body.app-shell-topbar {
    --app-shell-content-offset: 32px;
  }

  .container {
    margin-top: 68px;
  }

  .side-rail-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .side-rail-nav {
    top: 58px;
    left: 14px;
    width: 107px;
    min-height: 356px;
    height: auto;
    padding: 10px 8px 10px 5px;
    border-radius: 18px;
    border-left: 1px solid rgba(120, 200, 255, 0.34);
    gap: 8px;
    transform: translateX(calc(-100% - 28px));
    opacity: 0;
    visibility: hidden;
    transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
  }

  body.mobile-side-rail-open .side-rail-nav {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .side-rail-link {
    min-width: 0;
    padding: 4px 8px;
    font-size: 13px;
  }

  .sessions-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  h2 {
    font-size: 26px;
  }

  .deck-filter-row {
    grid-template-columns: 1fr;
  }

  .deck-collection-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .deck-book-pagination {
    justify-content: space-between;
  }

  .deck-collection-book {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .deck-slot-controls {
    grid-template-columns: 1fr;
  }

  .queue-status-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-session-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-title {
    font-size: clamp(28px, 10vw, 40px);
  }

  .home-live-panel h2 {
    font-size: 24px;
  }

}

@media (min-width: 1700px) and (hover: hover) and (pointer: fine) {
  .home-inline-auth {
    width: min(760px, calc(100vw - 72px));
  }

  .home-auth-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: clamp(18px, 1.2vw, 24px);
    align-items: start;
  }

  .home-auth-main {
    min-width: 0;
    max-width: 460px;
  }

  .home-auth-side {
    display: block;
    border-left: 1px solid rgba(220, 168, 101, 0.36);
    padding: 2px 0 0 clamp(16px, 1vw, 22px);
    margin-top: 15px;
  }
}

@media (max-width: 560px), (max-height: 500px) and (max-width: 900px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .container {
    margin-top: 68px;
  }

  .top-strip-nav {
    height: 62px;
    gap: 18px;
    padding: 0 16px;
  }

  .top-strip-link,
  .top-strip-logout {
    font-size: 16px;
  }

  .top-strip-brand-logo {
    width: 99px;
    max-width: 99px;
    max-height: 29px;
  }

  .side-rail-nav {
    width: 107px;
    min-height: 356px;
    height: auto;
  }

  .side-rail-link {
    font-size: 13px;
    padding: 4px 8px;
  }
}

@media (hover: none) and (pointer: coarse) and (max-height: 560px) and (orientation: landscape) {
  .container-match {
    margin-top: 0;
  }
}

@media (hover: none) and (pointer: coarse) {
  .play-device-unsupported {
    display: block;
  }

  .play-desktop-only {
    display: none;
  }
}