/* ── NEXUS: MOBILE RESPONSIVE v2 ─────────────────── */

/* ── BASE TOUCH ── */
* { -webkit-tap-highlight-color: transparent; }
button, .btn, .combat-btn, .hud-btn { touch-action: manipulation; }

/* Prevent iOS font-size zoom on inputs */
input, select, textarea { font-size: 16px !important; }

/* ── FIX PRE-GAME SCREEN SCROLL ── */
/* Allow scrolling on pre-game screens that have long content */
#screen-campaign,
#screen-chargen,
#screen-age-warning,
#screen-menu,
#screen-leaderboard,
#screen-shop,
#screen-death {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Campaign select specifically needs scroll */
#screen-campaign > div {
  min-height: 100%;
  justify-content: flex-start !important;
  padding-top: 1.5rem !important;
  padding-bottom: 2rem !important;
}

@media (max-width: 768px) {
  /* ── LOADER ── */
  .loader-logo { font-size: clamp(1.6rem, 8vw, 2.5rem); letter-spacing: .12em; }
  .loader-sub { font-size: .65rem; letter-spacing: .08em; }
  .loader-bar-wrap { width: 85vw; }

  /* ── MAIN MENU ── */
  #screen-menu { justify-content: flex-start; padding-top: 2rem; }
  .menu-layout {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem .75rem;
    align-items: center;
    width: 100%;
  }
  .menu-title { font-size: clamp(1.3rem, 7vw, 2rem); letter-spacing: .12em; margin-bottom: .2rem; }
  .menu-subtitle { font-size: .62rem; margin-bottom: .8rem; letter-spacing: .1em; }
  #menu-canvas { width: min(260px, 75vw) !important; }
  .menu-left { width: 100%; max-width: 300px; gap: .45rem; }
  .btn-lg { padding: .7rem 1.4rem; font-size: .95rem; }

  /* ── CAMPAIGN SELECT ── */
  #campaign-cards {
    flex-direction: column !important;
    align-items: center;
    gap: 1rem;
    padding: 0 .75rem;
    width: 100%;
  }
  .campaign-card { width: min(340px, 90vw) !important; }
  .campaign-preview { height: 120px; }
  .campaign-name { font-size: .75rem; }
  .campaign-desc { font-size: .7rem; }

  /* ── CHARACTER CREATION ── */
  #screen-chargen { justify-content: flex-start; padding-top: 1.5rem; }
  .chargen-layout {
    flex-direction: column;
    gap: 1rem;
    padding: 0 .75rem;
    width: 100%;
  }
  .chargen-layout > * { min-width: 0 !important; width: 100%; }
  .class-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .class-card { padding: .6rem; }
  .class-icon { font-size: 1.5rem; }
  .class-name { font-size: .65rem; }
  .class-desc { font-size: .65rem; }
  .chargen-title { font-size: 1.1rem; letter-spacing: .1em; }
  .chargen-sub { font-size: .65rem; margin-bottom: 1rem; }

  /* ── GAME HUD ── */
  #hud {
    height: auto;
    padding: .3rem .5rem;
    gap: .35rem;
    flex-wrap: wrap;
    min-height: 48px;
  }
  .hud-level { width: 28px; height: 28px; font-size: .7rem; }
  .hud-name { font-size: .6rem; letter-spacing: .06em; }
  .hud-class { font-size: .52rem; }
  .hud-stats { min-width: 100px; gap: 2px; }
  .hud-bar-wrap { height: 4px; }
  .hud-stat-val { font-size: .55rem; min-width: 36px; }
  .hud-credits { font-size: .65rem; }
  .hud-divider { display: none; }
  /* HUD kills hidden on small screens */
  .hud-credits + .hud-divider + .hud-credits { display: none; }
  .hud-actions {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .2rem;
  }
  .hud-btn {
    padding: .25rem .2rem;
    font-size: .58rem;
    letter-spacing: 0;
    justify-content: center;
    min-width: 0;
  }

  /* ── GAME BODY ── */
  #game-body { flex-direction: column; }
  #world-panel { flex: 1; min-height: 45vh; position: relative; overflow: hidden; }
  #side-panel {
    width: 100% !important;
    height: 42vh;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  #side-panel.collapsed { height: 0 !important; width: 100% !important; overflow: hidden; }

  /* ── WORLD MAP ── */
  #world-canvas { cursor: grab; }
  #world-canvas:active { cursor: grabbing; }

  /* ── SIDE PANEL ── */
  .inventory-grid { grid-template-columns: repeat(6, 1fr); gap: .22rem; }
  .inv-slot { font-size: .95rem; }
  .side-tab { font-size: .56rem; padding: .45rem .2rem; }
  .char-attrs { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
  .skill-tree { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
  .attr-val { font-size: .9rem; }

  /* ── COMBAT SCREEN ── */
  #screen-combat { overflow: hidden; }
  .combat-header { padding: .35rem .6rem; }
  .combat-title { font-size: .7rem; letter-spacing: .08em; }
  .combat-turn { font-size: .6rem; }

  /* Combat arena — superposition diagonale */
  .combat-arena {
    flex: 1;
    min-height: 260px;
    position: relative;
    padding: 0;
    display: block !important;
  }
  .combat-vs { display: none !important; }

  /* Les deux combatants en position absolue dans l'arène */
  #c-enemy, #c-player {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }

  /* Ennemi — haut droite */
  #c-enemy {
    top: 8px;
    right: 8px;
    align-items: flex-end;
  }
  #c-enemy .combatant-sprite {
    width: 120px !important;
    height: 150px !important;
  }
  #c-enemy .combatant-sprite canvas {
    width: 120px !important;
    height: 150px !important;
  }

  /* Joueur — bas gauche, devant */
  #c-player {
    bottom: 8px;
    left: 8px;
    align-items: flex-start;
    z-index: 2;
  }
  #c-player .combatant-sprite {
    width: 120px !important;
    height: 150px !important;
  }
  #c-player .combatant-sprite canvas {
    width: 120px !important;
    height: 150px !important;
  }

  .combatant-name { font-size: .65rem; }
  .combatant-stats { width: 130px; }
  .combatant-hp-bar { height: 7px; }
  .combatant-shield { height: 4px; }

  /* Combat actions — 3+3 grid */
  .combat-actions {
    padding: .3rem .3rem;
    gap: .2rem;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .combat-btn {
    flex: 1 1 30%;
    min-width: 0;
    padding: .45rem .2rem;
    font-size: .68rem;
    letter-spacing: 0;
  }
  .combat-btn .btn-cost { font-size: .52rem; }

  /* ── SHOP ── */
  #screen-shop { padding: .75rem .5rem; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  .shop-item { padding: .5rem; }
  .shop-item-icon { font-size: 1.5rem; }
  .shop-item-name { font-size: .75rem; }
  .shop-item-desc { font-size: .62rem; }
  .shop-item-price { font-size: .7rem; }

  /* ── LEADERBOARD ── */
  .lb-header, .lb-row {
    grid-template-columns: 32px 1fr 55px 45px 45px;
    padding: .35rem .4rem;
    font-size: .62rem;
  }

  /* ── MODALS ── */
  .modal { padding: 1rem; margin: 0 .5rem; max-width: 95vw; }
  .save-slots { min-width: 0; }
  .save-slot { padding: .45rem .5rem; gap: .5rem; }
  .save-slot-name { font-size: .8rem; }

  /* ── DEATH SCREEN ── */
  .death-title { font-size: 1.5rem; letter-spacing: .12em; }
  .death-stats { gap: 1rem; }
  .death-stat-val { font-size: 1.2rem; }
  .death-icon { font-size: 3.5rem; }

  /* ── NOTIFICATIONS ── */
  #notifications { top: .4rem; right: .4rem; }
  .notif { max-width: 200px; font-size: .7rem; padding: .45rem .75rem; }

  /* ── WORLD TOOLTIP ── */
  .world-location-tooltip { font-size: .72rem; max-width: 180px; }
  .wlt-name { font-size: .7rem; }
}

/* ── SMALL PHONES (< 480px) ── */
@media (max-width: 480px) {
  .menu-title { font-size: 1.2rem; }
  .hud-actions { grid-template-columns: repeat(6, 1fr); }
  /* Hide SAVE and MENU on tiny screens, keep gameplay buttons */
  .hud-btn:nth-child(5),
  .hud-btn:nth-child(6) { display: none; }
  .shop-grid { grid-template-columns: 1fr; }
  .combat-btn:last-child { flex-basis: 48%; }
  .inventory-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── LANDSCAPE PHONES ── */
@media (max-width: 900px) and (orientation: landscape) {
  #game-body { flex-direction: row; }
  #world-panel { flex: 1; }
  #side-panel {
    width: 240px !important;
    height: auto !important;
    border-left: 1px solid var(--border);
    border-top: none;
  }
  .combat-arena { padding: .4rem; }
  .combatant-sprite { width: 90px !important; height: 110px !important; }
  .combatant-sprite canvas { width: 90px !important; height: 110px !important; }
  .hud-actions { margin-left: auto; width: auto; grid-template-columns: unset; display: flex; }
  #hud { flex-wrap: nowrap; }
}