/*
 * 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;
  }

  /* 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;
  }

  /* 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;
  }

}