/*
 * Tablet landscape keeps the app's computer-style layouts instead of
 * triggering phone breakpoints; controls and artwork scale with the viewport.
 */
@media (min-width: 701px) and (max-width: 1440px) and (orientation: landscape) {
  body {
    overflow-x: hidden;
  }

  /* Lobby: retain the desktop's main-content + player-panel composition. */
  .lobby.home-shell {
    width: min(1380px, 100%);
    padding: 8px clamp(12px, 2vw, 24px);
    gap: 8px;
  }
  .lobby-grid {
    grid-template-columns: minmax(0, 1fr) clamp(225px, 29vw, 340px);
    gap: 10px;
  }
  .lobby-stage { gap: 8px; }
  .lobby-hero { min-height: 112px; padding: 10px 16px; }
  .lobby-hero h1 { font-size: clamp(24px, 4vh, 38px); }
  .lobby-hero-hero { width: clamp(88px, 16vh, 144px); }
  .lobby-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .lobby-tile-label { margin: 0 6px 5px; padding: 4px 7px; font-size: 13px; }
  .lobby-side.home-player-panel { gap: 8px; }

  /* Game mode selection: keep all choices side by side at tablet widths. */
  .gm-shell {
    width: min(1200px, calc(100% - 32px));
    margin: auto;
    padding: clamp(8px, 1.5vh, 16px) 12px;
    gap: clamp(8px, 1.5vh, 14px);
    overflow: visible;
  }
  .gm-intro h1 { font-size: clamp(32px, 5vh, 54px); }
  .gm-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 14px);
  }
  .gm-mode { min-width: 0; padding: clamp(12px, 1.8vh, 19px) clamp(10px, 1.4vw, 18px); }
  .gm-mode h2 { font-size: clamp(20px, 2.6vh, 28px); }
  .gm-mode p { font-size: clamp(12px, 1.7vh, 14px); }
  .gm-deco { width: clamp(56px, 8vw, 92px); }

  /* Match board retains the fit-to-window layout and remains non-scrolling. */
  body.match-page { height: 100dvh; overflow: hidden; }
  body.match-page .game-window { max-width: 100vw; }
  body.match-page .field-slots { min-width: 0; }

  /* Deck overview and builder remain dense enough to browse like desktop. */
  body.decks-page { height: 100dvh; overflow: hidden; }
  .decks-shell {
    width: min(1240px, calc(100% - 32px));
    gap: clamp(8px, 1.4vh, 14px);
    padding: clamp(8px, 1.5vh, 16px) 0;
  }
  .decks-intro h1 { font-size: clamp(28px, 4vh, 42px); }
  .decks-intro { gap: 12px; }
  .decks-footer { padding-top: 6px; }
  .deck-builder-page .deck-intro h1 { font-size: clamp(28px, 4vh, 44px); }
  .deck-builder-page .card-collection {
    grid-template-columns: repeat(auto-fill, minmax(clamp(165px, 16vw, 210px), 1fr));
  }

  /* Profile: keep the company, progression, and match record as desktop panels. */
  .profile-page .login-shell {
    width: min(1360px, calc(100% - 32px));
    padding: clamp(8px, 1.5vh, 16px) 12px;
  }
  .profile-page .login-card {
    width: 100%;
    padding: clamp(14px, 2vw, 26px);
  }
  .profile-page .pl-hero { padding-bottom: 10px; }
  .profile-page .pl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .profile-page .pl-col { gap: 8px; }
  .profile-page .profile-record { margin: 8px 0; padding: 10px 14px; }
  .profile-page .profile-record h2 { font-size: 19px; }
  .profile-page .profile-record-stat strong { font-size: clamp(24px, 3vh, 34px); }

  /* Shop: preserve the multi-column catalogue and give each product room. */
  .shop-shell {
    width: min(1380px, calc(100% - 32px));
    padding: clamp(8px, 1.5vh, 16px) 0 20px;
  }
  .shop-topbar { margin-bottom: 8px; }
  .shop-hero { gap: 10px; padding: clamp(12px, 2vh, 20px); }
  .shop-hero h1 { font-size: clamp(28px, 4vh, 42px); }
  .shop-hero p:not(.shop-kicker) { font-size: 13px; }
  .shop-section { margin-top: 14px; }
  .shop-section-heading { margin-bottom: 8px; }
  .shop-grid--cards,
  .shop-grid--packs,
  .shop-grid--cash { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

  /* Progress pages keep their established desktop tracks and scrolling. */
  .season-pass-shell {
    width: min(1380px, calc(100% - 32px));
    padding: 10px 0 24px;
  }
  .sp-nav { margin-bottom: 8px; }
  .sp-hero { gap: 12px; padding: clamp(12px, 1.8vh, 18px); }
  .sp-hero h1 { font-size: clamp(32px, 4.5vh, 50px); }
  .sp-tier-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .seasonal-shell { width: min(1380px, calc(100% - 32px)); padding: 12px 0 24px; }
  .seasonal-nav { margin-bottom: 8px; }
  .seasonal-hero { gap: clamp(12px, 2vw, 26px); padding: 8px 0 16px; }
  .seasonal-hero h1 { font-size: clamp(34px, 4.8vh, 54px); }
  .seasonal-premium { gap: 12px; padding: 14px 18px; }
  .seasonal-status { margin: 4px 0 18px; padding: 10px 14px; }
  .track-heading { margin-bottom: 12px; }

  /* Events, tutorials, rewards, and reports use the available width. */
  .events-shell { width: min(1440px, calc(100% - 32px)); padding: 10px 0 24px; }
  .events-nav { margin-bottom: 8px; }
  .events-heading { gap: 12px; padding: 12px 18px; }
  .events-heading h1 { font-size: clamp(28px, 4vh, 42px); }
  .events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }
  .tutorial-formation-page .tutorial-formation-shell {
    width: min(1140px, calc(100% - 32px));
    padding: clamp(10px, 1.6vh, 18px) 0;
  }
  .event-panel {
    min-width: 0;
    min-height: clamp(320px, 54vh, 470px);
    padding: clamp(12px, 1.5vw, 18px);
  }
  .tutorial-shell { width: min(1180px, calc(100% - 32px)); padding: 12px 16px 20px; }
  .tutorial-header { margin-bottom: 12px; }
  .tutorial-intro { margin-bottom: 12px; }
  .tutorial-intro h1 { font-size: clamp(32px, 4.7vh, 52px); }
  .tutorial-step { min-height: 0; gap: clamp(12px, 2vw, 28px); }
  .tutorial-illustration { min-height: clamp(150px, 27vh, 210px); padding: 10px; }
  .tutorial-controls { margin-top: 12px; }
  .br-shell { width: min(1000px, calc(100% - 32px)); padding: 12px 0 20px; }
  .reward-reveal-shell {
    width: min(1240px, calc(100% - 32px));
    min-height: 100dvh;
    padding: 10px 0 18px;
    justify-content: center;
  }
  .reward-reveal-panel { padding: clamp(12px, 1.8vw, 22px); }
  .reward-reveal-panel > h1 { font-size: clamp(28px, 4.5vh, 46px); }
  .reward-contents { min-height: 0; }
  .reward-card-face { min-height: clamp(250px, 44vh, 340px); }

  /* Entry and sign-in remain legible in short landscape viewports. */
  .entry-shell,
  .legal-shell { width: min(1360px, calc(100% - 40px)); }
  .entry-shell { padding-block: clamp(8px, 1.5vh, 16px); }
  .twcr-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
    align-items: center;
    gap: clamp(16px, 3vw, 36px);
    padding-block: clamp(8px, 1.5vh, 16px);
  }
  .twcr-title { font-size: clamp(36px, 5.5vh, 56px); }
  .twcr-scene { height: clamp(118px, 21vh, 180px); }
  .twcr-panel { width: min(560px, 100%); padding: clamp(14px, 2vw, 24px); }
  .login-page:not(.profile-page) .login-shell {
    width: min(1100px, calc(100% - 32px));
    padding: clamp(8px, 1.5vh, 16px) 12px;
  }
  .login-page:not(.profile-page) .login-card {
    width: min(620px, 100%);
    padding: clamp(16px, 2.5vh, 25px);
  }
  .login-page:not(.profile-page) .login-card h1 {
    font-size: clamp(32px, 5vh, 48px);
  }
  .legal-page .legal-shell { padding-block: 12px 24px; }
}

@media (min-width: 701px) and (max-width: 899px) and (orientation: landscape) {
  .events-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 701px) and (max-width: 1440px) and (orientation: landscape) and (max-height: 700px) {
  .lobby.home-shell { padding-block: 6px; gap: 6px; }
  .lobby-grid { gap: 7px; }
  .lobby-hero { min-height: 96px; }
  .lobby-hero-hero { width: clamp(76px, 13vh, 106px); }
  .lobby-stage,
  .lobby-side.home-player-panel { gap: 6px; }
  .gm-shell { gap: 6px; padding-block: 6px; }
  .gm-mode { gap: 6px; padding-block: 9px; }
  .decks-intro h1 { font-size: 28px; }
  .shop-hero { padding-block: 10px; }
  .shop-section { margin-top: 8px; }
  .sp-hero { padding-block: 10px; }
  .events-grid { gap: 8px; margin-top: 8px; }
  .event-panel { min-height: 300px; }
  .seasonal-premium { padding-block: 10px; }
  .tutorial-shell { padding-block: 8px 12px; }
  .tutorial-step { gap: 10px; }
  .tutorial-illustration { min-height: 130px; }
}