/* mobile.css — vue téléphone (fichier séparé : jamais servi depuis un vieux cache) */
/* =====================================================================
   VUE TÉLÉPHONE — interface épurée
   (portrait ≤640px de large, ou paysage ≤500px de haut)
   ===================================================================== */
@supports (height:100dvh){
  body,.screen,.screen.active,.hf-screen{height:100dvh}
}
@media (max-width:640px),(max-height:500px){
  .hide-mobile{display:none !important}
  .game-header-hf .lbl{display:none}
  .game-header-hf .ico{display:inline}
  .game-header-hf{padding:.35rem .6rem !important;gap:.4rem;min-height:0}
  .game-header-hf > div{gap:6px !important;min-width:0}
  .game-header-hf .hf-btn{padding:6px 10px !important;font-size:14px !important;min-width:36px;min-height:34px;line-height:1}
  .game-manche-badge{font-size:.72rem !important;padding:.25rem .6rem !important;white-space:nowrap}
  .game-code-badge-hf{font-size:.66rem !important;padding:.25rem .5rem !important;white-space:nowrap}
  .revolution-badge,.chor-badge{font-size:.62rem !important;padding:.2rem .45rem !important;white-space:nowrap}
  .game-header-right{gap:6px !important;flex-shrink:0}

  /* Zone de table : adversaires en bandeau + table qui prend le reste */
  .game-table-zone{display:flex;flex-direction:column}
  .other-players{position:static !important;inset:auto;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:2px;padding:6px 4px 0;flex-shrink:0}
  .other-player{position:static !important;transform:none !important;left:auto !important;top:auto !important;min-width:0 !important;flex:1 1 0;max-width:58px;padding:2px 1px !important}
  .op-avatar{width:30px !important;height:30px !important;margin:0 auto 1px;font-size:.8rem}
  .op-name{max-width:100% !important;font-size:.58rem !important;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .op-mini-cards{display:none !important}
  .op-cards{font-size:.56rem !important;line-height:1.1;white-space:nowrap}
  .op-role{font-size:.5rem !important;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .table-area{position:relative !important;inset:auto;flex:1 1 auto;min-height:0}
  .table-surface{width:min(94%,420px) !important;height:min(86%,240px) !important;max-height:100%}
  .pile-card{width:46px !important;height:67px !important}

  /* Zone du joueur */
  .player-area-hf{padding:.25rem .4rem calc(.35rem + env(safe-area-inset-bottom)) !important;flex-shrink:0;background:linear-gradient(180deg,rgba(10,16,11,.6),#120d06)}
  .player-info-bar-hf{gap:6px;margin-bottom:0 !important}
  .player-name-badge-hf{gap:6px;min-width:0}
  .player-name-text{display:none}
  .avatar{width:26px !important;height:26px !important;font-size:.7rem}
  .player-role-badge{font-size:.58rem !important;padding:.12rem .4rem !important}
  .turn-indicator-hf{font-size:.7rem !important;padding:.22rem .6rem !important;flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #reaction-btn,#log-toggle-btn{padding:4px 8px !important;font-size:.95rem !important;min-height:30px}
  #log-toggle-btn .lbl{display:none}

  /* Main : une seule ligne, cartes en éventail */
  .hand{flex-wrap:nowrap;row-gap:6px !important;column-gap:0 !important;justify-content:center;align-items:flex-end;padding:20px 6px 4px !important;margin-top:0 !important;overflow:visible}
  .hand .card{width:var(--mc-w,56px) !important;height:calc(var(--mc-w,56px) * 1.45) !important;flex:0 0 auto;box-shadow:-2px 2px 6px rgba(0,0,0,.35)}
  .hand .card .c-suit{font-size:1.15rem !important}
  .hand .card .c-tl,.hand .card .c-br{font-size:.62rem !important}
  .hand .card:hover:not(.disabled){transform:none}
  .hand .card.selected{transform:translateY(-16px) !important;z-index:3}

  /* Barre d'actions : gros boutons faciles à toucher */
  .actions-hf{display:flex;flex-wrap:nowrap !important;gap:10px !important;padding:.4rem .2rem 0 !important;border-top:1px solid rgba(201,168,76,.15);min-height:54px}
  .actions-hf button{flex:1 1 0 !important;min-height:48px;padding:0 10px !important;font-size:1rem !important;border-radius:14px !important;touch-action:manipulation}
  .actions-hf button:first-child{flex:1.6 1 0 !important}

  /* Bouton Règles flottant : on le sort du chemin */
  body[data-screen="game"] .rules-btn{display:none !important}
  .rules-btn,.rules-btn.rules-btn-lg{width:44px !important;bottom:.7rem;right:.7rem}

  /* Journal en bas d'écran plutôt qu'en haut à gauche */
  .shared-log-wrap{top:44px;width:100vw;max-width:none;height:34dvh;border-radius:0 0 12px 12px;border-right:none}
}
/* Très petits écrans (iPhone SE, vieux Android) */
@media (max-width:360px){
  .game-header-hf .game-header-right .hf-btn{padding:6px 8px !important}
  .game-code-badge-hf{display:none !important}
  .op-avatar{width:26px !important;height:26px !important}
}
/* Téléphone en paysage : tout sur peu de hauteur */
@media (max-height:500px) and (orientation:landscape){
  .game-header-hf{padding:.2rem .6rem !important}
  .other-players{padding-top:2px}
  .op-avatar{width:24px !important;height:24px !important}
  .op-cards,.op-role{display:none !important}
  .table-surface{height:min(92%,170px) !important}
  .pile-card{width:36px !important;height:52px !important}
  .hand{padding-top:14px !important}
  .hand .card.selected{transform:translateY(-10px) !important}
  .actions-hf{min-height:44px}
  .actions-hf button{min-height:40px}
}
@media (max-width:640px){
  #my-card-count{font-size:.58rem !important;padding:.12rem .4rem !important}
  .turn-indicator-hf{font-size:.66rem !important;padding:.22rem .4rem !important}
}
/* Accueil sur téléphone : plus compact, aucun débordement horizontal */
@media (max-width:640px){
  #screen-home{overflow-x:hidden !important}
  .home-page-inner{padding-left:14px !important;padding-right:14px !important;box-sizing:border-box;max-width:100%}
  .home-header{flex-wrap:wrap;gap:10px}
  .home-header #account-bar{margin-left:auto}
  .home-btns{flex-direction:column}
  .home-cta-btn{width:100%;min-height:50px;font-size:15px !important;justify-content:center}
  .home-family-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .home-hero-grid{grid-template-columns:1fr !important}
  .hf-suit-deco{display:none}
  .account-bar{position:static}
}
/* Salon : si le contenu dépasse (petit écran), on peut faire défiler et rien n'est coupé */
#screen-lobby{justify-content:safe center;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  #screen-lobby{padding:56px 10px 24px;box-sizing:border-box;justify-content:flex-start}
  #screen-lobby > *{max-width:100%}
  #screen-lobby button{min-height:46px}
}
@media (max-height:500px) and (orientation:landscape){
  .op-name{display:none !important}
  .other-players{padding-top:3px}
  .table-surface{height:100% !important;width:min(80%,520px) !important}
  .pile-card{width:32px !important;height:46px !important}
  .pile-info{display:none !important}
  .player-info-bar-hf{margin-bottom:0}
}

/* ---- Cartes réduites : on rétrécit les symboles pour qu'ils ne débordent plus ---- */
@media (max-width:640px),(max-height:500px){
  .hand .card .c-pips{transform:scale(var(--pip-s,.62));transform-origin:center center;flex-shrink:0}
  .hand .card .c-tl,.hand .card .c-br{top:3px !important;left:4px !important}
  .hand .card .c-br{top:auto !important;left:auto !important;bottom:3px !important;right:4px !important}
  .pile-card .c-pips{transform:scale(.5);transform-origin:center center;flex-shrink:0}
  .pile-card .c-tl,.pile-card .c-br{font-size:.55rem !important}
}
@media (max-height:500px) and (orientation:landscape){
  .pile-card .c-pips{transform:scale(.4)}
}

/* ---- Paysage : la table doit rester visible ----
   En-tête mini, et zone du joueur en grille :
   [ main sur toute la largeur ]
   [ infos (gauche)  |  Jouer / Passer (droite) ] */
@media (max-height:500px) and (orientation:landscape){
  .game-header-hf{padding:.12rem .5rem !important;min-height:0}
  .game-header-hf .hf-btn{min-height:26px !important;padding:2px 8px !important;font-size:13px !important}
  .game-manche-badge,.game-code-badge-hf{padding:.1rem .45rem !important;font-size:.62rem !important}
  .other-players{padding-top:2px}
  .op-avatar{width:22px !important;height:22px !important}
  .table-surface{height:100% !important;width:min(70%,460px) !important}

  .player-area-hf{display:grid !important;grid-template-columns:1fr minmax(0,46%);grid-template-areas:"hand hand" "info act";align-items:center;column-gap:8px;padding:.1rem .4rem calc(.15rem + env(safe-area-inset-bottom)) !important}
  .player-area-hf .hand{grid-area:hand;padding:12px 4px 2px !important}
  .player-info-bar-hf{grid-area:info;min-width:0}
  .actions-hf{grid-area:act;border-top:none !important;padding:0 !important;min-height:0 !important}
  .actions-hf button{min-height:38px !important;font-size:.9rem !important}
  .player-name-badge-hf .avatar,#my-card-count{display:none}
  .turn-indicator-hf{font-size:.62rem !important;padding:.15rem .4rem !important}
  #reaction-btn,#log-toggle-btn{min-height:26px !important;padding:2px 6px !important}
  .hand .card.selected{transform:translateY(-8px) !important}
}

/* ---- Éventail : comme une vraie main, seule la dernière carte de chaque rangée montre sa face entière ---- */
@media (max-width:640px),(max-height:500px){
  .hand.fanned .card:not(.row-last) .c-pips{display:none}
  .hand.fanned .card:not(.row-last) .c-tl{font-size:.8rem !important}
  /* Cartes posées sur la table : rang + couleur bien lisibles au centre, sans les petits symboles */
  .pile-card .c-pips{display:none !important}
  .pile-card:not(:has(.c-figure-full)) .c-tl{top:50% !important;left:50% !important;transform:translate(-50%,-50%);font-size:1.15rem !important;line-height:1.1}
  .pile-card:not(:has(.c-figure-full)) .c-br{display:none !important}
}
@media (max-height:500px) and (orientation:landscape){
  .hand .card .c-pips{display:none}
  .hand .card .c-tl{font-size:.85rem !important}
}

/* Chaque carte forme son propre empilement : les coins (z-index) d'une carte
   ne passent plus par-dessus la carte voisine qui la chevauche. */
@media (max-width:640px),(max-height:500px){
  .hand .card{position:relative;isolation:isolate}
  .hand .card:nth-child(n){z-index:auto}
}

/* =====================================================================
   ÉCHANGES DE FIN DE MANCHE — téléphone
   Colonne unique : joueurs en bandeau, cartes à choisir, bouton Confirmer
   toujours visible en bas.
   ===================================================================== */
@media (max-width:640px),(max-height:500px){
  .exchange-overlay{height:100dvh;overflow:hidden}
  .exchange-overlay.active{display:block}
  .ex-screen-inner{flex-direction:column;height:100vh;height:100dvh;min-height:0;width:100%;background:#0b0905}

  .ex-sidebar{width:auto;flex-direction:row;align-items:center;gap:.4rem;padding:.35rem .5rem !important;border-right:none;border-bottom:1px solid rgba(201,168,76,.18);overflow-x:auto;flex-shrink:0}
  .ex-sidebar-title,.ex-round-badge{display:none}
  #ex-players-list{display:flex;gap:6px;flex-wrap:nowrap}
  .ex-player-row{flex:0 0 auto;margin:0 !important;padding:.25rem .5rem !important;gap:.35rem}
  .ex-player-info{display:flex;flex-direction:column}
  .ex-player-role-txt{font-size:.52rem}
  .ex-player-name{font-size:.66rem;max-width:64px}

  .ex-main{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.5rem .6rem 0 !important;align-items:flex-start !important;justify-content:center;-webkit-overflow-scrolling:touch}
  .ex-panel{max-width:none;flex-direction:column;align-self:stretch}
  .ex-panel[style*="block"]{display:flex !important}
  .ex-panel h3{font-size:1rem;margin-bottom:.15rem}
  .ex-panel p{font-size:.72rem;margin-bottom:.4rem;line-height:1.4}
  .ex-roles{gap:.8rem;padding:.35rem .7rem;margin-bottom:.4rem}
  .ex-role-chip{flex-direction:row;gap:.4rem}
  .ex-role-chip .ex-avatar{width:26px;height:26px;font-size:.75rem}
  .ex-role-chip .ex-name{font-size:.65rem}
  .ex-arrow{font-size:1.2rem;margin-top:0}
  .ex-progress{margin-bottom:.4rem}
  .ex-restriction{font-size:.68rem;padding:.35rem .6rem;margin-bottom:.4rem}

  .exchange-hand{gap:6px;padding:.4rem;margin-bottom:.5rem;min-height:0;flex:1 1 auto;align-content:flex-start}
  .exchange-hand .card{width:var(--ex-w,54px) !important;height:calc(var(--ex-w,54px) * 1.45) !important;position:relative;isolation:isolate}
  .exchange-hand .card .c-pips{display:none}
  .exchange-hand .card .c-tl{font-size:.85rem !important;top:4px !important;left:5px !important}
  .exchange-hand .card .c-br{font-size:.7rem !important}
  .exchange-hand .card.selected{transform:translateY(-6px) !important;box-shadow:0 0 0 2px var(--gold,#c9a84c),0 4px 12px rgba(0,0,0,.5)}

  .ex-footer{position:sticky;bottom:0;margin:0 -.6rem !important;padding:.5rem .8rem calc(.5rem + env(safe-area-inset-bottom));background:#120d06;border-top:1px solid rgba(201,168,76,.25);z-index:3;flex-shrink:0}
  .ex-footer .btn{min-height:46px;padding:0 1.4rem;font-size:1rem}
  .ex-counter{font-size:.78rem}

  /* Écran d'attente (balance) : doit tenir sans déborder */
  .ex-waiting{padding:.6rem .4rem 1rem}
  .ex-waiting-title{font-size:1.2rem}
  .ex-waiting-desc{font-size:.8rem}
}
@media (max-height:500px) and (orientation:landscape){
  .exchange-hand .card{width:var(--ex-w,44px) !important}
  .ex-roles,.ex-progress,.ex-panel p{display:none}
  .ex-panel h3{font-size:.9rem}
  .ex-waiting .ex-balance-outer{max-width:300px}
}