/*
 * Landscape Mobile Overrides
 *
 * Every rule in this file is wrapped in a single media query that only
 * matches phones held in landscape orientation. Edits here cannot leak
 * into desktop, tablet, or portrait-mobile layouts.
 *
 * Match conditions:
 *   - orientation: landscape   -> wider than tall
 *   - max-height: 500px        -> short viewport (excludes tablets/desktops)
 *   - pointer: coarse          -> touch input (excludes laptops with small windows)
 *
 * Loaded LAST in layout.jsx so these rules win the cascade at equal specificity.
 * If an existing rule still wins, prefer raising specificity over !important.
 */

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {

  /* ---------------------------------------------------------------------
   * Home hero: banner left, small logo top-right, Play Now buttons under it.
   *
   * The three targets live under different DOM ancestors, so we use
   * `display: contents` to dissolve the intermediate wrappers and make
   * banner / .hero-text / .get-started-section all become direct grid
   * items of .hero-overlay. No JSX changes, no position:fixed.
   * ------------------------------------------------------------------- */

  .hero-overlay {
    display: grid;
    grid-template-columns: minmax(140px, 240px) 1fr 1fr;
    grid-template-areas:
      "banner logo academy"
      "banner play campaign";
    grid-auto-flow: row;
    align-items: start;
    justify-items: stretch;
    gap: 8px 12px;
    padding: 8px 16px;
  }

  /* Dissolve the wrappers so their children become hero-overlay's grid items.
     We also dissolve the get-started section's own wrappers so Play Now,
     Academy and Campaign each become direct grid items. */
  .hero-heading,
  .home-wrap,
  .home-content,
  .menu-sections,
  .menu-section.get-started-section,
  .get-started-section .menu-section-content,
  .get-started-section .menu-grid,
  .get-started-section .menu-button-split {
    display: contents;
  }

  /* Banner: pinned to the left, spans both top rows. */
  .cg-banner-slot.cg-banner-hero,
  .banner-on-home {
    grid-area: banner;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Logo block: top-right cell. Centered and stretched so the logo
     fills the empty space above Play Now instead of hugging the corner. */
  .hero-text {
    grid-area: logo;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    align-self: stretch;
    padding: 4px 0;
  }

  .game-logo-img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
  }

  .hero h1 {
    font-size: 1.1rem;
    margin: 0 0 4px;
  }

  .hero-subtitle,
  .hero p {
    display: none;
  }

  /* The Get Started header is hidden — buttons become direct grid items. */
  .get-started-section .section-header {
    display: none;
  }

  /* Play Now: under the logo (column 2, row 2). */
  .get-started-section .play-now-button {
    grid-area: play;
  }

  /* Academy: top-right (column 3, row 1). Campaign: bottom-right (column 3, row 2).
     Targeted by hx-get since the buttons share .split-button. */
  .get-started-section [hx-get="/academy"] {
    grid-area: academy;
  }

  .get-started-section [hx-get="/map/campaign"] {
    grid-area: campaign;
  }

  /* Any remaining menu sections (Explore, etc.) flow into rows below,
     spanning the full width so they don't squeeze into one column. */
  .menu-section:not(.get-started-section) {
    grid-column: 1 / -1;
  }

  /* Tighter buttons so they fit at landscape phone height.
     Split buttons (Academy/Campaign) default to row layout — force column
     so icon stacks over text and nothing gets clipped by the gui-corners frame.
     align-self: stretch makes them fill their grid cell so Academy/Campaign
     match Play Now's height instead of looking short. */
  .get-started-section .menu-button {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-self: stretch;
    min-height: 56px;
    height: auto;
    padding: 8px 12px;
    gap: 4px;
  }

  .get-started-section .menu-button > i {
    font-size: 1.15rem;
  }

  .get-started-section .button-title {
    font-size: 0.8rem;
  }

  .get-started-section .button-subtitle {
    font-size: 0.65rem;
  }

  /* ---------------------------------------------------------------------
   * Navbar: spread icons across the full width.
   * Mobile defaults to justify-content: flex-start with overflow-x: auto,
   * which clumps everything left when the row fits (i.e. landscape phone).
   * ------------------------------------------------------------------- */
  .navbar-inner {
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
  }

  /* Phantom flex spacers act as left/right padding. Unlike real padding,
     these stay visible when the navbar overflows and the user scrolls —
     so icons never butt against the bracket frame, fitting or scrolling. */
  .navbar-inner::before,
  .navbar-inner::after {
    content: "";
    flex: 0 0 24px;
  }

  /* Sticky with a negative top: when the user scrolls down, the navbar
     pins to the top with most of itself hidden above the viewport,
     leaving roughly its bottom 20% poking out as a hint that it's there.
     Scrolling back to the top reveals it fully. */
  .navbar {
    position: sticky;
    top: -40px;
  }

  /* ---------------------------------------------------------------------
   * Theme toggle: mobile.css shrinks --toggle-height to 20px but leaves
   * --toggle-width at 60px and the emoji at 18px, so the sun overflows
   * the track. At this size the white slider crowds the emoji against
   * the track edge — hide the slider and let the emoji itself swap from
   * sun (light, left) to moon (dark, right).
   * ------------------------------------------------------------------- */
  :root {
    --toggle-width: 40px;
    --toggle-height: 22px;
  }

  .toggle-label .slider {
    display: none;
  }

  .toggle-label .tgl-icon {
    font-size: 13px;
  }

  /* ---------------------------------------------------------------------
   * Tutorial / academy speech bubble: lay out card and text side-by-side.
   * Default stacks card-thumbnail above text, which makes the bubble tall
   * enough to spill off the top of a landscape phone. With flex + order,
   * the card sits on the left and text wraps to its right; tutorial
   * buttons drop to a new row via flex-basis: 100%.
   * ------------------------------------------------------------------- */
  .bubble.speech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: flex-start;
  }

  .speech-cards-row {
    order: 1;
    flex: 0 0 auto;
    margin: 0;
  }

  /* Hide card name, cost, and effect rows below the card art to save
     vertical space — only the card image remains. */
  .speech-card-thumb > span {
    display: none;
  }

  .speech-text {
    order: 2;
    flex: 1 1 200px;
    min-width: 0;
  }

  .speech-color-buttons,
  .speech-tutorial-buttons {
    order: 3;
    flex-basis: 100%;
  }

  /* ---------------------------------------------------------------------
   * In-game: shrink castle, wall, and last-played card so the hand of
   * cards has more room on short landscape viewports.
   * ------------------------------------------------------------------- */
  .image-container {
    max-height: 100px;
    max-width: 120px;
  }

  .texture-container {
    max-height: 100px;
    max-width: 22px;
  }

  .last-played-card {
    width: 70px;
    height: 140px;
    top: auto;
    bottom: 0;
    left: 50vw;
    transform: translateX(-50%);
  }

  /* Shrink hand cards too — 100×200 → 70×140, 30% smaller. */
  .card {
    width: 70px;
    height: 140px;
  }

  /* ---------------------------------------------------------------------
   * World map header: keep the stats block above the map in landscape,
   * with a 2-column / 3-row stats grid on the left and tax actions on
   * the right so the header stays compact on short screens.
   * ------------------------------------------------------------------- */
  .worldmap-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .worldmap-title {
    width: 100%;
    font-size: 1.05rem;
  }

  .worldmap-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
  }

  .worldmap-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .worldmap-stat {
    font-size: 0.78rem;
    padding: 4px 7px;
    justify-content: flex-start;
    min-width: 0;
  }

  .worldmap-tax-actions {
    width: auto;
    align-items: stretch;
    justify-self: end;
    align-self: stretch;
  }

  .worldmap-claim-taxes-btn {
    justify-content: center;
    min-height: 100%;
    padding-inline: 12px;
  }

  .worldmap-tax-note {
    max-width: 150px;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .card-container:last-child {
    width: 70px;
  }

  .hand {
    padding: 6px;
  }

  /* Match the desktop compact-hand rule (cards.css) — keep small hands
     centered with the landscape card width (70px) instead of 100px. */
  .hand:not(.hand-fan):has(.card-container:nth-child(-n+4):last-child) .card-container {
    width: 70px;
  }

  /* Cards are tiny in landscape for the whole hand to fit. To read them,
     scale up on hover / focus (1.8x — the "preview" state). Selected
     state stays smaller (1.5x) since the player has already committed
     and an oversized selected card would crowd the screen. */
  .hand:not(.hand-fan) .card-container.card-hovered {
    transform: translateY(-40px) scale(1.8) !important;
    animation: none;
    z-index: 10;
  }

  .hand:not(.hand-fan) .card-container.long-press {
    transform: translateY(-35px) scale(1.5);
    z-index: 10;
  }

  .hand-fan .card-container:hover,
  .hand-fan .card-container:focus {
    transform: translateY(-55px) scale(1.8) rotate(0deg) !important;
    animation: none;
    z-index: 10;
  }

  .hand-fan .card-container.long-press {
    transform: translateY(-45px) scale(1.5) rotate(0deg) !important;
    z-index: 10;
  }

  .academy-demo-selected {
    transform: translateY(-30px) scale(1.5);
    z-index: 9;
  }

  /* Card name pinned to the very bottom edge, tiny font, flush. */
  .card-name {
    bottom: 0;
    font-size: 9px;
    max-width: 100%;
    padding: 1px 2px;
    border-radius: 0;
  }

  /* Corner icons pushed onto the card border, no padding gap. */
  .card-top-left {
    top: 0;
    left: 0;
    padding: 1px 2px;
    border-radius: 0;
    gap: 2px;
  }

  .card-top-right {
    top: 0;
    right: 0;
    padding: 1px 2px;
    border-radius: 0;
    gap: 2px;
  }

  .card-icon {
    width: 11px;
    height: 11px;
  }

  /* Cost block flush to the left edge with shrunk icon + value. */
  .card-costs {
    left: 0;
    gap: 2px;
  }

  .card-cost {
    padding: 1px 2px;
    border-radius: 0;
    gap: 2px;
  }

  .card-value {
    font-size: 10px;
  }

  .cost-icon {
    width: 11px;
    height: 11px;
  }

  /* Tone down the playable (yellow) and long-press (teal) glows so they
     stay proportional to the shrunk cards. */
  .your-turn .card-container.playable .card {
    box-shadow:
      -3px 0 6px #000c,
      0 0 8px rgba(255, 215, 0, 0.55),
      0 0 14px rgba(255, 215, 0, 0.35);
  }

  .long-press .card,
  .academy-demo-selected .card {
    box-shadow:
      -3px 0 6px #000c,
      0 0 8px rgba(46, 196, 182, 0.7),
      0 0 14px rgba(46, 196, 182, 0.45);
  }

  /* Tutorial / academy "tap me" highlight: the default rule applies the
     yellow ring to .card-container, which is wider than the 70px card
     and leaves a visible yellow gap. Move the ring + animation onto the
     .card element itself so it hugs the actual card edge. */
  .card-container.tutorial-highlight {
    box-shadow: none;
    animation: none;
  }

  .card-container.tutorial-highlight .card {
    animation: landscapeTutorialPulse 1.1s ease-in-out infinite;
  }

  @keyframes landscapeTutorialPulse {
    0%, 100% {
      box-shadow:
        -3px 0 6px #000c,
        0 0 0 2px rgba(255, 230, 80, 0.85),
        0 0 8px rgba(255, 215, 0, 0.65),
        0 0 14px rgba(255, 215, 0, 0.4);
    }
    50% {
      box-shadow:
        -3px 0 6px #000c,
        0 0 0 2px rgba(255, 230, 80, 1),
        0 0 12px rgba(255, 215, 0, 0.95),
        0 0 22px rgba(255, 215, 0, 0.7);
    }
  }

  /* ---------------------------------------------------------------------
   * Academy victory screen: drop "Episode Complete" and "What You Learned"
   * rows so only "Academy Progress" remains. Also hide the finishing-card
   * showcase to free up vertical space.
   *
   * Rows are targeted via :has() on their FA icon since they share the
   * same class. The :has() on .fa-graduation-cap on the section ensures
   * we don't strip rows from the campaign-mode star list.
   * ------------------------------------------------------------------- */
  .campaign-stars-section:has(.fa-graduation-cap) .campaign-star-row:has(.fa-graduation-cap),
  .campaign-stars-section:has(.fa-graduation-cap) .campaign-star-row:has(.fa-bolt) {
    display: none;
  }

  .finishing-card-section {
    display: none;
  }

  /* ---------------------------------------------------------------------
   * Footer + page width: links don't wrap until <480px width, so on
   * 600–900px landscape phones they stay in one row and force horizontal
   * scroll. Wrap them and clamp body width to prevent any sideways scroll.
   * ------------------------------------------------------------------- */
  body {
    overflow-x: hidden;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .footer-link {
    font-size: 0.75rem;
  }

  /* Add landscape-mobile-only rules below this line. */

  /* ---------------------------------------------------------------------
   * Pregame color choice: put color selection and online players side by
   * side while choosing a color and while waiting after a color is picked.
   * ------------------------------------------------------------------- */
  .pregame-wrapper.pregame-color-choice-layout {
    display: grid;
    grid-template-columns: minmax(190px, 36%) minmax(0, 1fr);
    grid-template-areas:
      "color players"
      "timer players"
      "name players"
      "actions players"
      "help players";
    align-items: start;
    gap: 8px 10px;
    width: 100%;
    max-width: 900px;
    padding: 8px;
  }

  .pregame-wrapper.pregame-color-choice-layout.pregame-color-picked-layout {
    grid-template-areas:
      "color timer"
      "color players"
      "actions players"
      "help players"
      "name players";
  }

  .pregame-color-choice-layout .color-picker-container {
    grid-area: color;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 14px 16px;
  }

  .pregame-color-choice-layout .color-picker-status {
    gap: 7px;
    margin-bottom: 10px;
    font-size: 0.95rem;
  }

  .pregame-color-choice-layout .color-picker-status i {
    font-size: 1rem;
  }

  .pregame-color-choice-layout .color-picker-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    width: 100%;
  }

  .pregame-color-choice-layout .color-button {
    width: 100%;
    min-width: 0;
    padding: 11px 10px;
    gap: 5px;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
  }

  .pregame-color-choice-layout .color-button i {
    font-size: 1.2rem;
  }

  .pregame-color-choice-layout .color-picker-label,
  .pregame-color-choice-layout .color-picker-taken,
  .pregame-color-choice-layout .color-picker-spectate {
    min-width: 0;
    justify-content: center;
    font-size: 0.8rem;
  }

  .pregame-color-choice-layout .color-picker-taken,
  .pregame-color-choice-layout .color-picker-spectate {
    padding: 8px 10px;
  }

  .pregame-color-choice-layout .pregame-timer-panel {
    grid-area: timer;
    width: 100%;
    padding: 8px 10px;
  }

  .pregame-color-choice-layout .quick-name-prompt {
    grid-area: name;
    width: 100%;
    padding: 8px 10px;
  }

  .pregame-color-choice-layout .pregame-actions {
    grid-area: actions;
    width: 100%;
    padding: 0;
    gap: 6px;
  }

  .pregame-color-choice-layout .pregame-action-btn {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    font-size: 0.78rem;
  }

  .pregame-color-choice-layout .invite-details,
  .pregame-color-choice-layout .invite-dropdown {
    width: 100%;
  }

  .pregame-color-choice-layout .pregame-help,
  .pregame-color-choice-layout .pregame-deck-selector {
    grid-area: help;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .pregame-color-choice-layout .online-users-panel {
    grid-area: players;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 14px 16px;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pregame-color-choice-layout.pregame-color-picked-layout .online-users-panel {
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
  }

  .pregame-color-choice-layout.pregame-color-picked-layout .pregame-timer-panel {
    padding: 10px 12px;
  }

  .pregame-color-choice-layout.pregame-color-picked-layout .timer-actions {
    gap: 10px;
  }

  .pregame-color-choice-layout.pregame-color-picked-layout .timer-actions .timer-btn {
    min-height: 48px;
    justify-content: center;
    padding: 10px 12px;
    font-size: 0.86rem;
  }

  .pregame-color-choice-layout .online-users-header {
    margin-bottom: 7px;
    font-size: 12px;
  }

  .pregame-color-choice-layout .online-users-list {
    gap: 7px;
  }

  .pregame-color-choice-layout .online-user-row {
    padding: 5px 6px;
    font-size: 12px;
  }

  .pregame-color-choice-layout .online-section-label {
    padding-bottom: 3px;
    font-size: 10px;
  }

  /* ---------------------------------------------------------------------
   * In-game layout: each player's column stacks resources on top, castle
   * below. Both columns hug the left/right edges; the hand is centered in
   * the middle gap and squeezed to fit between them.
   * Overrides the short-height rules in mobile.css that absolutely position
   * the castle behind the resource row.
   * ------------------------------------------------------------------- */
  .castle-row {
    width: 100%;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  #red-castle,
  #blue-castle {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .castle-and-resources {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px;
  }

  /* Cancel the short-height rule that hides castle behind resources */
  .castle-visual-group {
    position: static !important;
    z-index: auto !important;
    order: 1 !important;
  }
  .main-resources-group {
    order: 0;
  }

  /* Info bar: split the score banners so red sits at the left edge and blue at
     the right, with HP bars on the inside and turn indicator in the middle.
     display:contents dissolves the .score and .score-banners wrappers so each
     banner becomes a direct grid child of .info-bar-above-game. */
  /* Keep the info-bar's default flex layout for HP bars and turn indicator.
     Score banners are pulled out and absolutely positioned right next to the
     last-played card in the center. */
  .info-bar-above-game {
    position: relative;
  }

  .score:not(.tournament-match-info),
  .score-banners {
    display: contents;
  }

  /* Each in-game banner absolutely positioned just outside the 44px last-played
     card. Exclude .final-score-banner — those are the larger victory-screen
     banners and need their default sizing. */
  .score-banner:not(.final-score-banner) {
    position: absolute;
    top: 8px;
    z-index: 4;
  }
  .score-banner:not(.final-score-banner):nth-child(1) {
    /* Red banner: right edge sits 26px left of viewport center */
    right: calc(50% + 26px);
  }
  .score-banner:not(.final-score-banner):nth-child(2) {
    /* Blue banner: left edge sits 52px right of viewport center */
    left: calc(50% + 52px);
  }

  /* Shrink banner so it fits the short info-bar without dominating */
  .score-banner:not(.final-score-banner) .score-banner-img {
    width: 20px;
    max-height: 32px;
    object-fit: contain;
  }
  .score-banner:not(.final-score-banner) .score-banner-val {
    font-size: 0.55rem;
  }

  /* Last-played card: absolute relative to #state so it lives at the top of
     the game area (just below the navbar) instead of inside .castle-container.
     #state becomes its positioning context. */
  #state {
    position: relative;
  }
  .castle-container {
    position: static;
  }
  .last-played-card {
    position: absolute;
    top: 4px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 88px;
    z-index: 5;
  }

  /* Turn-action / hint sits in the middle gap, just below the last-played card */
  #current-turn-wrap,
  .current-turn {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - 280px);
    margin: 0;
    padding: 2px 6px;
    z-index: 5;
    text-align: center;
  }

  /* Hand sits below the turn hint, in the middle horizontal gap between castles */
  .hands {
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(100vw - 280px);
    margin: 0;
    padding: 0;
    justify-content: center;
    z-index: 5;
  }

  .hand-container {
    flex: 0 0 auto;
    max-width: none;
  }

  .hand {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    gap: 2px;
    padding: 4px;
  }

  .hand:not(.hand-fan) .card-container {
    flex-grow: 0;
    width: 70px;
  }

  /* Hide the help panel by default — it's unreadable behind the cards, so
     there's no point showing it unless the player is actually inspecting a card.
     !important is needed because main.js sets element.style.display = "block"
     directly when help text loads. */
  .card-help-container {
    display: none !important;
  }

  /* While a card is hovered/focused, float the help panel at the top of the
     viewport (just below the navbar) so the description is clearly readable. */
  #state:has(.card-container:hover) .card-help-container,
  #state:has(.card-container.card-hovered) .card-help-container,
  #state:has(.card-container.long-press) .card-help-container {
    display: block !important;
    position: fixed;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 480px;
    margin: 0;
    padding: 0;
    z-index: 9500;
  }

}