/* ══════════════════════════════════════════════════════════
   PIXELRUN Z — MOBILE CSS FINAL v4
   Portrait  → rotate prompt, block everything
   Landscape → full game, all screens fixed
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   PORTRAIT — HARD BLOCK
══════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: portrait) {
  #rotatePrompt {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: #06060f !important;
  }
  .screen,
  .screen.active,
  #instructionsOverlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   LANDSCAPE — ALL FIXES
══════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
  }

  /* Screen isolation — no bleed */
  .screen {
    isolation: isolate !important;
  }
  .screen:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .screen.active {
    visibility: visible !important;
    pointer-events: all !important;
  }
  .modern-bg {
    position: absolute !important;
  }

  /* ── LOGIN ─────────────────────────────────────────── */
  #loginScreen {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    gap: 20px !important;
    overflow: hidden !important;
    height: 100vh !important;
  }
  .login-bg-grid {
    display: none !important;
  }
  .login-center {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 700px !important;
    position: relative;
    z-index: 2;
  }
  .game-logo {
    flex-shrink: 0 !important;
    text-align: center !important;
  }
  .logo-pixel,
  .logo-run {
    font-size: clamp(9px, 2vw, 15px) !important;
  }
  .logo-z {
    font-size: clamp(20px, 5vw, 38px) !important;
    line-height: 1 !important;
  }
  .logo-tag {
    font-size: 5px !important;
  }
  .login-box {
    width: min(280px, 44vw) !important;
    padding: 12px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    position: relative;
    z-index: 2;
  }
  .login-box-header {
    font-size: 8px !important;
  }
  .field {
    gap: 3px !important;
  }
  .field label {
    font-size: 6px !important;
  }
  .field input {
    padding: 7px 8px !important;
    font-size: 8px !important;
  }
  .px-btn {
    font-size: 7px !important;
    padding: 9px !important;
    width: 100% !important;
  }
  .login-msg,
  .login-note,
  .px-btn-forgot {
    font-size: 6px !important;
  }

  /* ── STEP 1: CHARACTER SELECT ───────────────────────── */
  #charScreen {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  .char-header {
    flex-shrink: 0 !important;
    text-align: center !important;
    padding: 6px 12px 4px !important;
    position: relative;
    z-index: 1;
  }
  .char-title {
    font-size: clamp(16px, 3.8vw, 26px) !important;
    letter-spacing: 2px !important;
  }
  .char-sub {
    font-size: 9px !important;
    margin-top: 1px !important;
  }
  .char-coins {
    font-size: 9px !important;
    padding: 2px 10px !important;
    margin-top: 3px !important;
  }

  .char-grid-wrap {
    flex: 1 !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
  }

  .char-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 8px 14px 10px !important;
    height: 100% !important;
    align-items: center !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }
  .char-grid::-webkit-scrollbar {
    display: none !important;
  }

  .char-card {
    flex: 0 0 clamp(110px, 22vw, 145px) !important;
    min-width: clamp(110px, 22vw, 145px) !important;
    scroll-snap-align: center !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    gap: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .char-avatar {
    width: 54px !important;
    height: 54px !important;
  }
  .char-canvas {
    width: 54px !important;
    height: 54px !important;
  }
  .char-name {
    font-size: 12px !important;
  }
  .char-class {
    font-size: 8px !important;
  }
  .stat-pip {
    font-size: 7px !important;
    padding: 1px 4px !important;
  }
  .char-locked-btn {
    font-size: 9px !important;
    padding: 5px 8px !important;
  }
  .char-locked-label {
    font-size: 7px !important;
  }

  /* Hide NEXT button — tap-to-navigate */
  #charNextBtn {
    display: none !important;
  }

  /* ── STEP 2: WEAPON SCREEN ──────────────────────────── */
  #weaponScreen {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }
  .weapon-topbar {
    padding: 6px 10px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .weapon-topbar-title {
    font-size: 15px !important;
    letter-spacing: 1px !important;
  }
  .ws-coins {
    font-size: 9px !important;
    padding: 2px 8px !important;
  }

  .ws-char-info {
    padding: 6px 10px !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  #wsCharCanvas {
    width: 48px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
  }
  .ws-char-name {
    font-size: 18px !important;
  }
  .ws-char-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
  }
  .ws-char-stats .stat-pip {
    font-size: 7px !important;
  }

  .ws-weapon-label {
    font-size: 11px !important;
    padding: 5px 10px 3px !important;
    flex-shrink: 0 !important;
  }

  .weapon-grid-big {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 7px !important;
    padding: 3px 10px 6px !important;
    flex: 1 !important;
    align-items: center !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .weapon-grid-big::-webkit-scrollbar {
    display: none !important;
  }

  .weapon-card-big {
    flex: 0 0 clamp(82px, 16vw, 105px) !important;
    min-width: clamp(82px, 16vw, 105px) !important;
    scroll-snap-align: center !important;
    padding: 9px 6px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }
  .wcb-icon {
    font-size: 22px !important;
  }
  .wcb-name {
    font-size: 10px !important;
  }
  .wcb-stats {
    font-size: 8px !important;
  }
  .wcb-lock {
    font-size: 8px !important;
  }

  /* Hide LET'S GO button — tap-to-navigate */
  #letsGoBtn {
    display: none !important;
  }

  /* ── WORLD MAP ──────────────────────────────────────── */
  #mapScreen {
    overflow-y: auto !important;
    height: 100vh !important;
  }
  .map-topbar {
    padding: 6px 10px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .map-username {
    font-size: 14px !important;
  }
  .map-stats {
    font-size: 9px !important;
    gap: 6px !important;
  }
  .lives-tag {
    font-size: 10px !important;
  }
  .icon-btn {
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  .map-timer {
    font-size: 9px !important;
  }
  .map-scroll {
    padding: 8px 10px !important;
    overflow-y: auto !important;
  }
  .worlds-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 8px !important;
  }
  .world-card {
    padding: 10px 8px !important;
    border-radius: 10px !important;
  }
  .wc-icon {
    font-size: 18px !important;
    margin-bottom: 3px !important;
  }
  .wc-chapter {
    font-size: 8px !important;
  }
  .wc-name {
    font-size: 14px !important;
  }
  .wc-progress {
    font-size: 8px !important;
  }

  /* ── LEVEL SELECT ───────────────────────────────────── */
  #levelScreen {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  .level-topbar {
    padding: 6px 10px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .level-world-title {
    font-size: clamp(11px, 2.4vw, 18px) !important;
  }
  .level-lives {
    font-size: 10px !important;
  }
  .level-subtitle {
    font-size: 8px !important;
    padding: 3px 10px !important;
    flex-shrink: 0 !important;
  }
  .level-grid-wrap {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px 10px 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .level-grid {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .level-btn {
    font-size: 8px !important;
    padding: 4px 1px !important;
    border-radius: 6px !important;
    aspect-ratio: 1 !important;
  }

  /* ── GAME SCREEN — TRUE FULLSCREEN ─────────────────── */
  #gameScreen {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  #gameWrapper {
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    flex: 1 !important;
  }
  #hud {
    width: 100% !important;
    flex-shrink: 0 !important;
    padding: 2px 8px !important;
    z-index: 5 !important;
    min-height: 28px !important;
  }
  .hud-left span,
  .hud-right span {
    font-size: 8px !important;
  }
  .hud-lives {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
  .hud-weapon {
    font-size: 13px !important;
  }
  #c {
    width: 100vw !important;
    flex: 1 !important;
    display: block !important;
    height: 0 !important; /* flex takes over */
  }

  /* ── MOBILE CONTROLS ────────────────────────────────── */
  .mobile-controls {
    display: flex !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: clamp(96px, 22vh, 120px) !important;
    padding: clamp(6px, 1.5vh, 10px) clamp(10px, 2.5vw, 18px) !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    pointer-events: none !important;
    z-index: 15 !important;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.25),
      transparent
    ) !important;
  }

  .mc-left {
    display: grid !important;
    grid-template-areas: ". up ." "lft . rgt" !important;
    grid-template-columns: repeat(3, clamp(48px, 10.5vw, 64px)) !important;
    grid-template-rows: repeat(2, clamp(48px, 10.5vw, 64px)) !important;
    gap: 5px !important;
    pointer-events: all !important;
    align-items: center !important;
    justify-items: center !important;
    margin-bottom: 4px !important;
  }

  .mc-lr {
    display: contents !important;
  }

  .mc-btn {
    width: clamp(48px, 10.5vw, 64px) !important;
    height: clamp(48px, 10.5vw, 64px) !important;
    font-size: clamp(18px, 4vw, 26px) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  .mc-btn:active {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: scale(0.86) !important;
  }

  .mc-up {
    grid-area: up !important;
    border-radius: 50% !important;
  }
  .mc-left-btn {
    grid-area: lft !important;
    border-radius: 50% !important;
  }
  .mc-right-btn {
    grid-area: rgt !important;
    border-radius: 50% !important;
  }

  .mc-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    margin-bottom: 4px !important;
  }

  .mc-atk {
    width: clamp(64px, 13.5vw, 82px) !important;
    height: clamp(64px, 13.5vw, 82px) !important;
    font-size: clamp(26px, 5.8vw, 36px) !important;
    background: rgba(220, 60, 20, 0.55) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 160, 100, 0.6) !important;
    border-radius: 50% !important;
    box-shadow:
      0 0 22px rgba(255, 80, 30, 0.55),
      0 8px 20px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 200, 150, 0.5) !important;
    color: #fff !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  .mc-atk:active {
    transform: scale(0.86) !important;
  }

  /* ── OVERLAYS ───────────────────────────────────────── */
  .overlay-box {
    padding: 14px 16px !important;
    gap: 8px !important;
    min-width: min(220px, 70vw) !important;
    border-radius: 14px !important;
  }
  .overlay-icon {
    font-size: 24px !important;
  }
  .overlay-title {
    font-size: 18px !important;
  }
  .overlay-msg {
    font-size: 9px !important;
  }
  .overlay-score {
    font-size: 13px !important;
  }
  .wait-timer {
    font-size: 20px !important;
  }
  .modern-btn {
    font-size: 11px !important;
    padding: 8px 14px !important;
    width: 150px !important;
    max-width: 90% !important;
  }
} /* end landscape */