/*
 * Dual layout layer
 * - Landscape: keep the existing tablet/16:9 presentation.
 * - Portrait phones: switch to a dedicated touch-first 9:16 presentation.
 *
 * This file is intentionally loaded last so the landscape UI stays stable while
 * portrait rules can decisively override the older responsive fallbacks.
 */
:root {
  --ui-safe-top: env(safe-area-inset-top, 0px);
  --ui-safe-right: env(safe-area-inset-right, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-safe-left: env(safe-area-inset-left, 0px);
}

/* Landscape/tablet is the existing game UI. Only make its intent explicit. */
@media (orientation: landscape) {
  body.ui-tablet-landscape .game-shell {
    width: min(1380px, 100%);
    max-width: 1380px;
  }
}

/* Dedicated smartphone portrait UI. */
@media (orientation: portrait) and (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overscroll-behavior: none;
  }

  body:not(.title-active):not(.prologue-active):not(.event-active):not(.shop-active):not(.rest-active) {
    min-height: 100dvh;
    background-attachment: scroll;
  }

  .game-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    margin: 0 !important;
    padding:
      calc(5px + var(--ui-safe-top))
      calc(7px + var(--ui-safe-right))
      calc(6px + var(--ui-safe-bottom))
      calc(7px + var(--ui-safe-left)) !important;
  }

  /* Compact, thumb-readable run HUD. */
  .topbar {
    position: relative;
    z-index: 30;
    min-height: 0;
    margin: 0 0 2px !important;
    align-items: center !important;
  }

  .run-status {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
  }

  .run-status span {
    min-width: 0;
    padding: 5px 7px !important;
    font-size: 9px !important;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .relic-tray {
    width: 100%;
    min-height: 30px !important;
    display: flex !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 1px 0 3px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .relic-tray::-webkit-scrollbar { display: none; }
  .relic-chip { flex: 0 0 auto; padding: 4px 7px !important; }
  .relic-chip span { font-size: 15px; }
  .relic-chip small { font-size: 9px; }

  /* ---------------- Battle: upper battlefield / lower hand ---------------- */
  .battle-view {
    display: grid !important;
    grid-template-rows: minmax(0, 56fr) minmax(0, 44fr) !important;
    gap: 2px !important;
    width: 100%;
    height: calc(100dvh - 66px - var(--ui-safe-top) - var(--ui-safe-bottom));
    min-height: 0 !important;
    overflow: visible;
  }

  .enemy-zone {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 16px;
  }

  .intent {
    top: 3px !important;
    left: 50%;
    z-index: 25;
    max-width: calc(100% - 14px);
    padding: 6px 9px !important;
    font-size: 10px !important;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fighter-player {
    left: -1% !important;
    bottom: -1% !important;
    width: 47% !important;
    height: 58% !important;
    z-index: 5 !important;
  }

  .fighter-player .fighter-hud {
    top: -37px !important;
    width: 112% !important;
    min-width: 138px !important;
  }

  .fighter-player .fighter-hp-label,
  .fighter-player .fighter-hp-label strong { font-size: 9px !important; }

  .fighter-player .fighter-health-row { gap: 4px; }
  .fighter-player .fighter-hp-track { height: 7px; }

  /* Single enemy. */
  .enemies-container {
    right: 1% !important;
    left: auto !important;
    bottom: -7px !important;
    width: 52% !important;
    height: 59% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .enemies-container .fighter-enemy,
  .fighter-enemy {
    position: relative !important;
    inset: auto !important;
    bottom: 0 !important;
    flex: 0 0 auto !important;
    width: 59% !important;
    height: auto !important;
    max-height: 100% !important;
  }

  .enemies-container .fighter-enemy > img,
  .fighter-enemy > img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .enemy-hud {
    top: -30% !important;
    width: 126% !important;
    min-width: 88px;
  }

  .enemy-hud-top,
  .enemy-hud-bottom {
    gap: 3px !important;
    padding: 3px 4px !important;
    font-size: 8px !important;
  }

  .enemy-status-row { margin-bottom: 2px !important; min-height: 10px !important; font-size: 7px !important; }
  .enemy-hp-track { height: 14px !important; }
  .enemy-block { min-width: 29px !important; height: 14px !important; padding: 0 3px !important; }

  /* Two/three enemies get their own portrait formation on the right side. */
  .enemies-container[data-enemy-count="2"],
  .enemies-container[data-enemy-count="3"] {
    right: 0 !important;
    left: 0 !important;
    bottom: -5px !important;
    width: 100% !important;
    height: 55% !important;
    display: block !important;
    padding: 0 !important;
  }

  .enemies-container[data-enemy-count="2"] .fighter-enemy,
  .enemies-container[data-enemy-count="3"] .fighter-enemy {
    position: absolute !important;
    bottom: 0 !important;
    width: 25% !important;
    max-height: 100% !important;
  }

  .enemies-container[data-enemy-count="2"] .enemy-slot-1,
  .enemies-container[data-enemy-count="3"] .enemy-slot-1 {
    left: auto !important;
    right: 2% !important;
  }

  .enemies-container[data-enemy-count="2"] .enemy-slot-2,
  .enemies-container[data-enemy-count="3"] .enemy-slot-2 {
    left: 53% !important;
    right: auto !important;
  }

  .enemies-container[data-enemy-count="3"] .enemy-slot-3 {
    left: 29% !important;
    right: auto !important;
  }

  .enemies-container[data-enemy-count="2"] .enemy-hud,
  .enemies-container[data-enemy-count="3"] .enemy-hud {
    top: -35% !important;
    width: 120% !important;
  }

  .summons {
    top: 36px !important;
    right: 5px !important;
    max-width: 58% !important;
    gap: 4px !important;
  }

  .summon-chip { padding: 5px 6px !important; font-size: 9px !important; }

  /* Potions move into a short horizontal thumb row beside the player. */
  .potion-tray {
    left: 2px !important;
    top: 40% !important;
    bottom: auto !important;
    z-index: 45 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
  }

  .potion-slot {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
  }

  .potion-detail-panel {
    left: 50% !important;
    top: 50% !important;
    width: min(310px, calc(100vw - 28px)) !important;
    transform: translate(-50%, -50%) !important;
  }

  .player-zone {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 0;
  }

  .combat-log {
    flex: 0 0 auto;
    min-height: 16px !important;
    margin: 0 0 2px !important;
    padding: 0 2px;
    font-size: 9px !important;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hand-controls {
    flex: 1 1 auto;
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 88px !important;
    gap: 5px !important;
    align-items: stretch !important;
    margin: 0 !important;
    overflow: visible;
  }

  .hand,
  .hand.is-overflowing {
    min-width: 0;
    min-height: 0;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 24px 8px 3px 2px !important;
    scroll-padding-inline: 6px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hand::-webkit-scrollbar,
  .hand.is-overflowing::-webkit-scrollbar { display: none; }

  .hand .card,
  .hand.is-overflowing .card {
    flex: 0 0 124px !important;
    width: 124px !important;
    min-width: 124px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 190px;
    aspect-ratio: 2 / 3;
    scroll-snap-align: center;
  }

  .hand .card.is-selected {
    z-index: 80 !important;
    transform: translateY(calc(-46px + var(--swipe-y, 0px))) scale(1.18) !important;
  }

  .hand .card .selected-flavor {
    bottom: calc(100% + 8px) !important;
    max-width: min(245px, 72vw) !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }

  .card.card-live .card-live-cost { font-size: 20px !important; }
  .card.card-live .card-live-name { font-size: 11px !important; }
  .card.card-live .card-live-type { font-size: 8px !important; }
  .card.card-live .card-live-effect { font-size: 10px !important; }

  .side-actions {
    min-width: 0;
    min-height: 0;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 5px !important;
    margin: 0 !important;
    padding: 24px 0 3px !important;
  }

  .energy-panel {
    padding: 6px 3px !important;
    border-radius: 10px !important;
  }

  .energy-panel span { font-size: 7px !important; }
  .energy-panel strong { margin: 0 !important; font-size: 15px !important; }

  .controls {
    min-height: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(44px, 1fr) minmax(40px, .82fr);
    gap: 5px !important;
  }

  .controls .primary-button,
  .controls .secondary-button {
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    height: 100%;
    padding: 5px 3px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 1.15;
  }

  /* ---------------- Route: true vertical 9:16 map ---------------- */
  #routeView.route-panel {
    width: 100%;
    height: calc(100dvh - 54px - var(--ui-safe-top) - var(--ui-safe-bottom));
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden !important;
    padding: 8px 7px 6px !important;
  }

  #routeView .eyebrow { display: none; }

  #routeView h2 {
    flex: 0 0 auto;
    margin: 0 0 2px !important;
    font-size: 21px !important;
    line-height: 1.1;
  }

  #routeView .route-progress {
    flex: 0 0 auto;
    margin: 0 0 4px !important;
    font-size: 9px;
    line-height: 1.25;
  }

  #routeView .route-map {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 15px !important;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  #routeView .route-map-canvas {
    width: 100% !important;
    min-width: 100% !important;
  }

  #routeView .route-lines {
    left: 0 !important;
    top: 0 !important;
  }

  #routeView .map-node {
    width: 56px !important;
    height: 56px !important;
    border-width: 2px !important;
  }

  #routeView .map-node-boss {
    width: 64px !important;
    height: 64px !important;
  }

  #routeView .map-node span { font-size: 22px !important; }
  #routeView .map-node small { font-size: 7px !important; }

  #routeView .route-legend {
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 5px !important;
    margin: 5px 0 0 !important;
    font-size: 7px !important;
    line-height: 1.2;
  }

  /* ---------------- Rewards / relic selection / deck dialogs ---------------- */
  #rewardView,
  #relicView {
    min-height: calc(100dvh - 54px - var(--ui-safe-top) - var(--ui-safe-bottom)) !important;
    max-height: calc(100dvh - 54px - var(--ui-safe-top) - var(--ui-safe-bottom));
    align-content: start !important;
    overflow-y: auto !important;
    padding: 16px 8px 12px !important;
  }

  .overlay-panel h2 { font-size: 25px !important; }

  .reward-cards {
    width: 100%;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 12px 4px 18px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .reward-cards .card {
    flex: 0 0 min(44vw, 168px) !important;
    width: min(44vw, 168px) !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 3;
    scroll-snap-align: center;
  }

  .relic-choices {
    width: 100%;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .relic-choice {
    min-height: 118px !important;
    padding: 11px !important;
    gap: 5px !important;
  }

  .relic-choice-icon { font-size: 36px !important; }
  .relic-choice strong { font-size: 15px !important; }
  .relic-choice p { font-size: 10px !important; line-height: 1.35 !important; }

  dialog {
    width: calc(100vw - 12px) !important;
    max-height: 90dvh !important;
    padding: 12px !important;
    border-radius: 15px !important;
  }

  /* ---------------- Shop: stack inventory for portrait reading ---------------- */
  body.shop-active { overflow: hidden !important; }

  .shop-panel {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding:
      calc(50px + var(--ui-safe-top))
      calc(9px + var(--ui-safe-right))
      calc(68px + var(--ui-safe-bottom))
      calc(9px + var(--ui-safe-left)) !important;
    background-position: 62% center !important;
  }

  .shop-title {
    top: calc(11px + var(--ui-safe-top)) !important;
    right: calc(9px + var(--ui-safe-right)) !important;
    font-size: 9px !important;
  }

  .shop-balance {
    top: calc(10px + var(--ui-safe-top)) !important;
    left: calc(9px + var(--ui-safe-left)) !important;
    font-size: 12px !important;
  }

  .shop-card-section,
  .shop-relic-section,
  .shop-potion-section {
    width: 100% !important;
    margin: 0 auto 12px !important;
  }

  .shop-card-section h3,
  .shop-relic-section h3,
  .shop-potion-section h3 { font-size: 9px !important; }

  .shop-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .shop-item {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    padding: 5px !important;
    gap: 4px !important;
  }

  .shop-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 3 !important;
  }

  .shop-meta { font-size: 8px !important; }
  .shop-buy { min-height: 38px !important; padding: 5px 7px !important; font-size: 10px !important; }

  .shop-relics,
  .shop-potions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .shop-relic-item,
  .shop-potion-item {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 8px !important;
  }

  .shop-relic-icon,
  .shop-potion-icon { font-size: 26px !important; }

  .shop-relic-copy strong,
  .shop-potion-copy strong { font-size: 11px !important; }

  .shop-relic-copy p,
  .shop-potion-copy p { font-size: 9px !important; }

  .shop-leave {
    left: calc(9px + var(--ui-safe-left)) !important;
    right: calc(9px + var(--ui-safe-right)) !important;
    bottom: calc(7px + var(--ui-safe-bottom)) !important;
    width: auto !important;
    min-height: 46px !important;
    background: rgba(18, 20, 15, .96) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55) !important;
  }

  /* ---------------- Rest: portrait actions and card upgrade browser ---------------- */
  .rest-panel {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding:
      calc(56px + var(--ui-safe-top))
      calc(9px + var(--ui-safe-right))
      calc(14px + var(--ui-safe-bottom))
      calc(9px + var(--ui-safe-left)) !important;
  }

  .rest-panel > .eyebrow {
    top: calc(16px + var(--ui-safe-top)) !important;
    font-size: 9px !important;
  }

  .rest-panel > h2 {
    top: calc(36px + var(--ui-safe-top)) !important;
    font-size: 24px !important;
    line-height: 1.1;
  }

  .rest-panel > p {
    top: calc(68px + var(--ui-safe-top)) !important;
    font-size: 11px !important;
  }

  .rest-action-grid {
    width: min(430px, 100%) !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 78px !important;
  }

  .rest-action-button {
    min-height: 84px !important;
    padding: 12px !important;
  }

  .rest-action-button strong { font-size: 17px !important; }
  .rest-action-button span { font-size: 10px !important; }

  .rest-upgrade-shell {
    width: 100% !important;
    height: calc(100dvh - 24px - var(--ui-safe-top) - var(--ui-safe-bottom)) !important;
    padding: 10px 6px !important;
    gap: 7px !important;
  }

  .rest-upgrade-heading h2 { font-size: 23px !important; }
  .rest-upgrade-heading p { font-size: 10px !important; }

  .rest-upgrade-gallery {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 5px 10px !important;
    scroll-snap-type: x proximity;
  }

  .rest-upgrade-card-tile {
    flex: 0 0 42vw !important;
    width: 42vw !important;
    scroll-snap-align: center;
  }

  .rest-card-visual,
  .rest-card-visual.is-compact {
    width: 100% !important;
    max-width: none !important;
  }

  .rest-upgrade-compare-backdrop { padding: 7px !important; }
  .rest-upgrade-compare-panel { width: 100% !important; padding: 14px 8px !important; }
  .rest-upgrade-comparison { gap: 5px !important; }
  .rest-upgrade-confirm { min-width: 0 !important; width: 100% !important; font-size: 14px !important; }

  /* ---------------- Events: keep story readable, controls low on screen ---------------- */
  .event-content {
    padding:
      calc(13px + var(--ui-safe-top))
      calc(9px + var(--ui-safe-right))
      calc(10px + var(--ui-safe-bottom))
      calc(9px + var(--ui-safe-left)) !important;
    justify-content: flex-end !important;
  }

  .event-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 auto auto !important;
    padding-top: 3.5dvh;
  }

  .event-kicker { margin-bottom: 4px !important; font-size: 8px !important; }
  .event-heading h2 { font-size: clamp(26px, 8vw, 40px) !important; }

  .event-text {
    max-width: 100% !important;
    max-height: 18dvh;
    overflow-y: auto;
    margin-top: 7px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .event-bottom {
    width: 100% !important;
    height: auto !important;
    max-height: 50dvh;
    display: block !important;
    flex: 0 0 auto;
  }

  .event-choices {
    width: 100% !important;
    height: auto !important;
    max-height: 50dvh;
    overflow-y: auto;
    gap: 6px !important;
  }

  .event-choice-row {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .event-choice {
    min-height: 46px !important;
    padding: 9px 11px !important;
    font-size: 12px !important;
  }

  .event-choice-preview {
    min-height: 0 !important;
    padding: 6px 9px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  .event-result-box { padding: 11px !important; }
  .event-result { margin-bottom: 9px !important; font-size: 11px !important; }
  .event-result-box .primary-button { min-width: 0 !important; width: 100%; min-height: 44px; }

  /* Master/event card pickers should swipe horizontally instead of showing five tiny cards. */
  .master-card-pick-shell { width: 100% !important; height: 100% !important; max-height: 100% !important; }
  .master-card-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 5px 12px !important;
    scroll-snap-type: x proximity;
  }
  .master-card-option { flex: 0 0 43vw !important; width: 43vw !important; scroll-snap-align: center; }

  /* General touch floor for portrait-only controls. */
  .primary-button,
  .secondary-button,
  .event-choice,
  .shop-buy,
  .shop-relic-buy,
  .shop-potion-buy {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}