/* styles/responsive/mobile-game.css
 * ══════════════════════════════════════════════════════════════════
 * Couche mobile du mode BON TRAJET (#view-game) + reveal map.
 * Complète styles/utilities/responsive.css (qui gère déjà popover
 * bottom-sheet, action-bar en colonne, chips) sans le dupliquer.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Tactile : affordances cachées derrière le hover ────────────── */
@media (hover: none){
  /* La croix de suppression d'une station n'apparaissait qu'au :hover
   * de la carte → impossible de retirer une station au doigt. */
  .station-card .station-card-rm{
    display:flex;
    width:28px; height:28px;
    font-size:15px;
    top:-10px; right:-14px;
  }

  /* Bouton "+" correspondance : cible élargie (28px → 38px). */
  .conn-add-btn{ width:38px; height:38px; font-size:18px; }
}

/* ─── FICHE ITINÉRAIRE (rendu liste mobile — chain-mobile.js) ─────
 * Non scopé en media query : le DOM liste n'existe que quand
 * renderChain a délégué (board ≤ 520px), mais il doit rester correct
 * si la fenêtre est agrandie avant le re-render suivant. ─────────── */
.chain-list{
  position:absolute; inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  display:flex; flex-direction:column; align-items:center;
  /* haut : sous la rangée SORTIE ; bas : action-bar + barre info + safe-area */
  padding:56px 16px calc(env(safe-area-inset-bottom, 0px) + 190px);
}
/* Espaceurs élastiques : centrent la fiche quand elle est courte,
 * s'écrasent à 0 dès que la chaîne remplit l'écran (scroll naturel). */
.chain-list::before,
.chain-list::after{
  content:'';
  flex:1 0 0;
}
.chain-list .board-node{
  position:static;
  transform:none;
  cursor:default;
  flex-shrink:0;
}
.chain-list .station-card{
  width:100%;
  max-width:340px;
  min-width:0;
  min-height:52px;
  padding:9px 16px;
}
#view-game.pinboard-theme .chain-list .station-card-name{
  font-size:17px;
  max-width:100%;
}
/* Tags DÉPART / ARRIVÉE / CORRESPONDANCE : le theme pinboard les
 * masque (plaque émaillée « pure ») mais en fiche itinéraire ils
 * donnent le sens de lecture. `!important` : contre le display:none
 * !important du theme (game.css). */
#view-game.pinboard-theme .chain-list .station-card-tag{
  display:block !important;
  font-size:8px; letter-spacing:2.4px;
  color:#f8f6f0; opacity:.72;
}
/* Segment : rail pointillé vertical + [+] pastille [+] par-dessus */
.cl-seg{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between;
  gap:4px;
  min-height:150px;
  padding:8px 0;
  flex-shrink:0;
}
.cl-seg::before{
  content:'';
  position:absolute; top:0; bottom:0; left:50%;
  border-left:2px dashed rgba(0,0,0,.3);
  transform:translateX(-1px);
}
html[data-theme="dark"] .cl-seg::before{ border-left-color:rgba(255,255,255,.22); }
.cl-seg > *{ position:relative; z-index:1; }
.chain-list .conn-add-btn{
  position:static;
  transform:none;
  /* Toujours visibles en fiche itinéraire : c'est l'affordance
   * principale d'insertion (le reveal-au-hover est un pattern desktop).
   * `!important` : contre le opacity:0 + pointer-events:none du style
   * hover desktop (game-board.css). */
  opacity:.8 !important;
  pointer-events:auto !important;
  width:34px; height:34px;
  font-size:17px;
}
#view-game.pinboard-theme .chain-list .line-circle{ width:48px; height:48px; }
#view-game.pinboard-theme .chain-list .line-circle .dash{ font-size:17px; }

/* Board en mode liste : la toolbar desktop (aligner/recentrer) n'a
 * plus d'objet — le scroll natif remplace pan/zoom. */
#view-game .board.is-list .board-toolbar{ display:none; }

/* ─── Téléphone (≤ 480px) ────────────────────────────────────────── */
@media (max-width: 480px){
  /* Pastilles de ligne : 42px → 46px (seuil tactile). */
  .line-circle{ width:46px; height:46px; }

  /* Chips du menu lignes dans le popover : 34px → 42px. */
  .popover .line-menu-row .chip{ min-width:42px; height:42px; font-size:15px; }
  .popover .line-menu-row .chip.rer,
  .popover .line-menu-row .chip.walk{ padding:0 12px; }

  /* Action bar in-board : la colonne pleine hauteur (responsive.css
   * historique) recouvrait les cartes station au centre du board.
   * → rangée compacte pleine largeur collée en bas du board.
   * `!important` : le padding/gap desktop de la plaque métal
   * (pinboard/game.css L617-618) est lui-même en !important. */
  #view-game .action-bar.in-board{
    flex-direction:row;
    align-items:stretch;
    left:8px; right:8px; bottom:8px;
    transform:none;
    max-width:none;
    gap:8px !important;
    padding:8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  #view-game .action-bar.in-board .btn{
    width:auto; flex:1 1 0;
    min-width:0; min-height:48px;
    padding:10px 6px;
    font-size:9px;
  }
  /* La plaque dip (135×52 fixe) devient fluide dans la rangée. */
  #view-game .action-bar.in-board .dip-btn{
    width:auto; flex:1 1 0; min-width:0;
  }

  /* ── REVEAL : le panneau ticket (360px fixe) débordait de l'écran.
   * Pleine largeur avec marges, safe-area en bas. */
  .ticket-panel{
    width:calc(100vw - 24px);
    left:12px;
    top:64px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* ─── INFO-CARD rétractable sur mobile ───────────────────────────
 * ≤720px la carte passe en pleine largeur (info-card.css) et peut
 * recouvrir l'action-bar. Par défaut : repliée sur son en-tête ;
 * un tap sur l'en-tête la déplie (classe .is-expanded posée par
 * src/ui/info-card.js). Desktop : aucun effet (media query). */
.info-card .ic-caret{ display:none; }

@media (max-width: 720px){
  #view-game.pinboard-theme .info-card{
    max-height:44px;
    overflow:hidden;
    padding-top:10px;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
    transition:max-height .25s cubic-bezier(.22,.9,.25,1);
  }
  #view-game.pinboard-theme .info-card.is-expanded{
    max-height:40vh;
    overflow-y:auto;
  }
  .info-card .ic-head{ cursor:pointer; }
  .info-card .ic-caret{
    display:inline-block;
    margin-left:auto;
    font-size:13px;
    color:#e8a23a;
    transition:transform .2s ease;
  }
  .info-card.is-expanded .ic-caret{ transform:rotate(180deg); }
}