/* ================================================================
   Telephone.

   Tout ce fichier ne vise que le telephone : tenu a l'horizontale (le
   jeu est en paysage) il tombe sous 500 px de haut, ce qu'aucun
   ordinateur ni aucune tablette n'atteint. Ceux-la ne changent donc pas
   d'un pixel. Tenu droit, un voile demande de le tourner.

   Il est charge APRES style.css et n'y touche pas : on compacte l'ecran
   existant, on ne le redessine pas. Tailles verifiees : 844 x 390
   (iPhone), 844 x 340 (iPhone dans Safari, avec ses barres), 740 x 360,
   667 x 375 (iPhone SE), 915 x 412.
   ================================================================ */

/* ---------------- Telephone tenu droit ----------------
   Un voile plein ecran, pose en pseudo-elements du body : aucune ligne de
   HTML ni de JS, et il passe au-dessus de toutes les couches. Reserve aux
   ecrans tactiles, pour qu'une fenetre d'ordinateur etroite ne le montre
   jamais. */
@media (orientation: portrait) and (max-width: 600px) and (pointer: coarse) {
  body::before,
  body::after {
    position: fixed;
    z-index: 10000;
    pointer-events: auto;
  }

  body::before {
    content: "Tournez votre téléphone";
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px 32px 0;
    text-align: center;
    font: 900 italic 1.35rem/1.2 var(--font);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff2a5;
    text-shadow: 0 3px 0 #002261;
    background:
      radial-gradient(90% 60% at 50% 30%, rgba(78, 168, 255, 0.28), transparent 70%),
      linear-gradient(180deg, #0a1c4e 0%, #070a16 100%);
  }

  /* Le telephone en pointille qui pivote vers la position couchee. */
  body::after {
    content: "";
    left: 50%;
    top: 50%;
    width: 110px;
    height: 110px;
    margin: -95px 0 0 -55px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffd23a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='22' y='6' width='20' height='34' rx='3'/%3E%3Cpath d='M29 34h6'/%3E%3Crect x='8' y='40' width='34' height='18' rx='3' stroke='%2371caff' stroke-dasharray='3 4'/%3E%3Cpath d='M50 22a14 14 0 0 1 2 22'/%3E%3Cpath d='M47 41l5 4 3-6'/%3E%3C/svg%3E");
    animation: tourner-invite 2.4s ease-in-out infinite;
  }

  @keyframes tourner-invite {
    0%, 30% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
  }
}

/* ---------------- Telephone a l'horizontale ---------------- */
@media (max-height: 500px) and (orientation: landscape) {

  /* Les hauteurs en vh visent le plus grand ecran possible : dans Safari,
     barres affichees, l'image depassait alors par le bas. dvh suit la
     hauteur reellement visible ; vh reste en repli. */
  .home-stage {
    width: min(100vw, calc(100vh * 1.7768));
    width: min(100vw, calc(100dvh * 1.7768));
  }
  .mock-scene {
    width: min(100%, calc(100vh * 1.7811));
    width: min(100%, calc(100dvh * 1.7811));
  }
  #pawn .mock-scene {
    width: min(100%, calc(100vh * 2.02625));
    width: min(100%, calc(100dvh * 2.02625));
  }

  /* ---- Accueil ----
     La date du code, en bas a droite, tombait sur « Classements », dessine
     sur l'image. En haut a gauche l'image n'a que le public. */
  .home-build {
    right: auto;
    bottom: auto;
    left: 8px;
    top: 4px;
    font-size: 9px;
  }

  /* Les zones peintes du Pawn Trophy et du tableau d'Amerique trop petites
     pour un doigt : on les agrandit autour de leur centre, sans rien
     dessiner. */
  .pawn-close { left: 91.7%; top: 3.6%; width: 6%; height: 11%; }
  .reference-back { left: 2%; top: 5%; width: 7.4%; height: 12.2%; }

  /* Bulle d'aide et de classement : moins haute, pour ne pas couvrir
     l'ecran. */
  .home-toast {
    bottom: 14px;
    max-width: min(620px, 86vw);
    padding: 10px 18px;
    font-size: 13px;
    line-height: 1.35;
  }

  /* ---- Ecrans generiques ---- */
  .screen { padding: 10px 16px; }
  .screen-inner { padding: 0; }
  h1 { font-size: 28px; }
  .subtitle { font-size: 13px; line-height: 1.35; margin-top: 6px; }
  .title-block, .title-block.compact { margin-bottom: 10px; }
  .choice-block { margin-bottom: 10px; }
  .actions { margin-top: 12px; gap: 8px; }
  .btn { min-height: 44px; padding: 8px 20px; }
  .pill { min-height: 40px; padding: 6px 16px; }
  .footnote { margin-top: 8px; font-size: 12px; }

  /* ================================================================
     Choix des combattants.
     Le cadre prenait 96 % de la hauteur mais sa scene gardait un minimum
     de 560 px : la barre des combattants demarrait sous l'ecran (y = 396
     sur 390). Ici tout se range dans la hauteur visible : en-tete de
     48 px, scene au milieu, barre de 94 px en bas.
     ================================================================ */
  #menu .dialog {
    width: 100vw;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .fighter-select { min-height: 0; }

  #menu .dialog-head {
    grid-template-columns: 40px 1fr 40px;
    gap: 8px;
    padding: 4px 10px;
  }
  #menu .eyebrow { display: none; }
  #menu .dialog h1 { margin: 0; font-size: 1.15rem; }
  #menu .back,
  #menu .close {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  /* Le badge VS du calque se posait sur le personnage de gauche : la
     scene a deja le sien, entre les deux. */
  .vs-layer.menu { display: none; }

  .versus-stage {
    inset: 46px 0 96px;
    grid-template-columns: 1fr 92px 1fr;
  }

  .player-badge {
    top: 2px;
    padding: 3px 10px;
    border-width: 1.5px;
    font-size: 0.62rem;
  }
  .p1 .player-badge { left: 10px; }
  .p2 .player-badge { right: 10px; }

  /* La devise du coup special n'a plus la place : le nom suffit. */
  .fighter-tag { display: none; }

  /* A cette taille, l'ombre de 6 px et le halo de 24 px noyaient les
     lettres : on les resserre pour garder le nom lumineux. */
  .fighter-name {
    bottom: 10px;
    font-size: 1.9rem;
    gap: 0;
  }
  .fighter-name b {
    -webkit-text-stroke: 1.5px #0a1c4e;
    filter: drop-shadow(0 3px 0 #061441) drop-shadow(0 0 10px #4fb4ff);
  }
  .fighter-side.p2 .fighter-name b {
    filter: drop-shadow(0 3px 0 #4a0b28) drop-shadow(0 0 10px #ff5ca8);
  }
  .fighter-name .couronne { width: 22px; height: 14px; }

  /* Le VS se centre dans la place laissee au-dessus du selecteur de
     joueur, qui le coupait en deux. */
  .vs-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 58px;
  }
  .vs-burst { font-size: 2.4rem; line-height: 1; }
  .couronne.vs { width: 26px; height: 18px; margin-bottom: 0; }
  .vs-core small {
    position: static;
    margin-top: 4px;
    padding: 3px 8px;
    font-size: 8px;
  }

  /* Les bulles restent au bord exterieur, loin des visages. */
  .dialogue-card {
    top: 28px;
    width: min(150px, 42%);
    padding: 6px 8px;
    border-radius: 10px;
  }
  .p1 .dialogue-card { left: 8px; right: auto; }
  .p2 .dialogue-card { right: 8px; left: auto; }
  .dialogue-speaker { margin-bottom: 2px; font-size: 0.5rem; }
  .dialogue-text { font-size: 0.64rem; line-height: 1.15; }
  .dialogue-card::after { top: 16px; width: 12px; height: 16px; }
  .p1 .dialogue-card::after { right: -11px; }
  .p2 .dialogue-card::after { left: -11px; }

  .slot-switch {
    bottom: 102px;
    padding: 3px;
  }
  .slot-switch button {
    min-width: 96px;
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.8rem;
  }

  /* La barre : une seule rangee, fleches, cartes, puis le format et le
     bouton de validation empiles a droite. */
  .roster-bar {
    height: 96px;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    padding: 6px 10px;
  }
  .roster { gap: 6px; padding: 4px 2px; }
  .roster-fleche {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  .roster-card {
    flex: 0 0 68px;
    height: 76px;
    border-width: 2px;
    border-radius: 10px;
  }
  .portrait-mark { height: 56px; font-size: 1.5rem; }
  .roster-card strong {
    padding: 3px 2px;
    font-size: 0.56rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .roster-card .roster-flag { top: 4px; left: 4px; width: 16px; height: 10px; }

  .duel-actions { grid-column: auto; gap: 6px; }
  .duel-manches { gap: 6px; }
  .pills.serrees .pill {
    min-width: 30px;
    min-height: 30px;
    padding: 2px 8px;
  }
  .duel-confirm {
    width: auto;
    min-width: 150px;
    min-height: 44px;
    padding: 0 14px;
    border-width: 2px;
    font-size: 0.9rem;
    box-shadow: inset 0 3px rgba(255, 255, 255, 0.6), 0 4px 0 #b94600;
  }

  /* ---- Reglages (tiroir du duel) ----
     Le bouton « Retour au duel » tombait sous l'ecran (y = 371 a 419 sur
     390). Chaque reglage tient sur une ligne : son titre, puis ses choix. */
  .settings-drawer { padding: 10px 18px; }
  .settings-drawer .title-block { margin-bottom: 8px; }
  .settings-drawer .choice-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
  }
  .settings-drawer .choice-block h2 { flex: 0 0 170px; margin: 0; }

  /* ---- Mes photos ----
     36 cartes de 280 px : le bouton Retour etait a 3 900 px de haut. Les
     cartes se serrent et Retour reste colle au bas de l'ecran. */
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .photo-preview { aspect-ratio: 16 / 7; font-size: 11px; text-align: center; padding: 0 6px; }
  .photo-body { padding: 6px 8px 8px; }
  .photo-title { margin-bottom: 6px; font-size: 13px; }
  .photo-actions { flex-wrap: wrap; gap: 6px; }
  .mini-btn { min-height: 40px; padding: 4px 6px; font-size: 12px; }
  .photo-error { margin-top: 0; min-height: 0; }
  .warning { margin-bottom: 10px; padding: 8px 12px; }

  #photos .actions {
    position: sticky;
    bottom: -10px;
    z-index: 2;
    margin: 6px -16px -10px;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(7, 10, 22, 0), rgba(7, 10, 22, 0.94) 35%);
  }

  /* ---- Entrainement ----
     Les boutons Retour et Commencer sortaient du panneau (y = 340 a 384
     pour un panneau qui finit a 366). */
  /* Chaque reglage sur une ligne : son titre a gauche, ses choix a
     droite. Les boutons restent colles au bas du panneau. */
  .ent-panneau {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
    align-content: start;
    width: min(760px, 94vw);
    max-height: calc(100% - 16px);
    padding: 12px 18px 0;
  }
  .ent-titre,
  .ent-sous,
  .ent-boutons { grid-column: 1 / -1; }
  .ent-titre { margin: 0; font-size: 22px; }
  .ent-sous { margin: -4px 0 2px; font-size: 12px; line-height: 1.35; }
  .ent-label { margin: 0; }
  .ent-choix { gap: 6px; }
  .ent-pastille { min-height: 40px; padding: 6px 14px; }
  .ent-glissiere { height: 28px; margin: 0; }
  .ent-boutons {
    position: sticky;
    bottom: 0;
    margin: 0 -18px;
    padding: 8px 18px 12px;
    background: rgba(6, 17, 40, 0.96);
  }
  .ent-bouton { min-height: 44px; }

  /* ---- Pause ---- */
  #pause h1 { font-size: 32px; }
  #pause .actions { margin-top: 14px; }

  /* ---- Fin de match ----
     Titre, score et boutons empiles depassaient 340 px : on les met cote
     a cote, le palmares a gauche, les boutons a droite. */
  #result .screen-inner.narrow {
    width: min(620px, 100%);
    display: grid;
    grid-template-columns: 1fr minmax(180px, 220px);
    column-gap: 22px;
    align-items: center;
  }
  #result .screen-inner > :not(.actions) { grid-column: 1; }
  #result .actions {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
  }
  #result .kicker { margin-bottom: 4px; }
  #result-title { font-size: 34px; margin: 2px 0 4px; }
  #result .final-score { margin: 8px 0 2px; font-size: 38px; }
  #result .subtitle { margin-top: 2px; }

  /* Avec la photo souvenir, le panneau se range en bas a droite, au-dessus
     de la legende, qui s'amincit. */
  .photo-souvenir { box-shadow: inset 0 0 0 10px #fbf8f1, inset 0 0 0 11px rgba(0, 0, 0, 0.22); }
  .photo-souvenir .photo-legende {
    left: 10px; right: 10px; bottom: 10px;
    height: 36px;
    font-size: 15px;
  }
  #result.avec-photo { padding: 0 20px 54px; }
  #result.avec-photo .screen-inner.narrow {
    width: auto;
    grid-template-columns: auto 170px;
    column-gap: 16px;
    padding: 10px 14px;
  }
  #result.avec-photo #result-title { font-size: 26px; }
  #result.avec-photo .final-score { font-size: 30px; }
  #result.avec-photo .btn { min-height: 40px; padding: 6px 14px; }
  #result.avec-photo .actions { gap: 6px; }

  /* ---- Presentation d'avant-match ---- */
  .intro-card {
    bottom: 16%;
    min-width: min(280px, 50vw);
    padding: 10px 16px 12px;
  }
  .intro-flag { width: 36px; height: 24px; margin-bottom: 6px; }
  .intro-name { font-size: 24px; }
  .intro-skip { bottom: 8px; }

  .vs-layer.intro .vs-badge { font-size: 56px; }
  .vs-name {
    top: auto;
    bottom: 30px;
    padding: 4px 0;
    font-size: 20px;
  }

  /* ---- Pendant la partie ---- */
  .hud-top { padding: 8px 60px 0; gap: 14px; }
  .side-panel { padding-top: 4px; }
  .side-name { font-size: 12px; margin-bottom: 4px; }
  .gauge { height: 12px; }
  .scoreboard { padding: 4px 14px 7px; gap: 10px; }
  .score { font-size: 30px; }
  .icon-btn { top: 8px; right: 10px; width: 44px; height: 44px; }
  .hint { bottom: 10px; font-size: 11.5px; padding: 6px 14px; }
  .hyper-ready { bottom: 50px; font-size: 11px; padding: 7px 16px; }
  .charge-ring { bottom: 84px; width: 54px; height: 54px; }
  .announce { font-size: 40px; }

  /* Le panneau de seance de l'entrainement, pendant le jeu : il defile
     plutot que de passer sous l'ecran. */
  #coach {
    top: 8px;
    left: 8px;
    width: min(260px, 36vw);
    max-height: calc(100% - 16px);
    overflow-y: auto;
    padding: 8px 10px;
    font-size: 12px;
  }
  .coach-x { min-height: 32px; }
  .coach-avis { margin-top: 6px; }
  .ent-bouton.petit { min-height: 40px; }
}