/* ============================================================
   V80 — REFONTE CRÉATIVE (chargée en DERNIER, autorité finale)
   Thème festif conservé : violet / magenta / or.

   1. LA SCÈNE : la zone de jeu (pioche + défausse + melds) occupe
      TOUT l'espace entre le header et la main, calculé à partir des
      tailles réelles publiées par le JS (--v80-header-h, --v80-dock-h,
      --rami-actionbar-h). Plus aucun pixel codé en dur → rendu
      identique iPhone 15, 16 Pro Max, iPad, desktop.
   2. MELDS « RUBAN » : chaque groupe est compact, ses cartes se
      chevauchent comme dans une vraie main (—meld-overlap calculé
      par le JS). Une suite de 13 cartes reste entière et lisible.
      La zone défile verticalement et ne recouvre JAMAIS la main.
   3. BOUTONS COMPACTS : pilules fines — le drag & drop est le geste
      principal, les boutons deviennent secondaires.
   4. FEEDBACK DE DRAG : pendant un glisser (body.rami-dragging),
      les groupes cibles s'allument en pointillés or, la cible visée
      grossit en turquoise, la défausse s'illumine en cyan.
   ============================================================ */

:root {
  --v80-header-h: 48px;
  --v80-dock-h: 132px;
  --v80-gap: 6px;
  --v80-meld-card-w: 54px;
}

/* Pendant une partie : plus de scroll parasite de la page (iOS) */
body.rami-ingame {
  overflow: hidden !important;
  height: 100vh !important;  /* repli si dvh non supporté */
  height: 100dvh !important;
}

/* V80: l'écran « Tournez votre appareil » est définitivement retiré */
#orientationOverlay {
  display: none !important;
}

/* Anciens conteneurs de melds définitivement retirés */
#mobilePlayedMelds,
#mobilePlayedMeldsFloating,
.mobile-played-melds,
.mobile-played-melds-floating {
  display: none !important;
}

/* ============================================================
   1. BARRE D'ACTIONS COMPACTE (tous écrans)
   ============================================================ */
#actionBar.action-bar {
  padding: 5px max(8px, env(safe-area-inset-right))
           calc(5px + env(safe-area-inset-bottom, 0px))
           max(8px, env(safe-area-inset-left)) !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: center !important;
  align-items: center !important;
}

#actionBar .action-btn {
  min-height: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  padding: 4px 13px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important; /* pas de shrink : le libellé reste entier */
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* CARTE ! reste le bouton star (légèrement plus grand, doré) */
#actionBar #btnCarte {
  height: 38px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 4px 16px !important;
}

@media (max-width: 480px) {
  #actionBar .action-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ============================================================
   2. LA SCÈNE — zone de jeu bornée entre header et main
   (mobile, tablette, et fenêtres paysage basses : partout où les
   anciens patchs V69/V71/V72 posaient des positions en dur)
   ============================================================ */
@media (pointer: coarse),
       (max-width: 1180px),
       (orientation: landscape) and (max-height: 950px),
       (orientation: landscape) and (max-width: 1400px) {

  #gameContainer #gameTable:not(.hidden) {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #gameContainer #gameTable .center-zone {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + var(--v80-header-h, 48px) + 4px) !important;
    /* --v80-scene-bottom = distance mesurée entre le bas de l'écran et le HAUT
       réel de la main (JS V80) — la scène ne peut jamais recouvrir les cartes */
    bottom: calc(var(--v80-scene-bottom, calc(var(--rami-actionbar-h, 60px) + var(--v80-dock-h, 132px))) + var(--v80-gap, 6px)) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 2px !important;
    display: flex !important;
    gap: 8px !important;
    overflow: hidden !important;
    z-index: 500 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Piles pioche/défausse : de retour DANS le flux de la scène
     (les anciens patchs les posaient en fixed avec des px en dur) */
  #gameContainer #gameTable .center-zone .piles-area {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 8px 10px 16px 10px !important;
    background: rgba(45, 10, 78, 0.5) !important;
    border: 1px solid rgba(200, 150, 255, 0.28) !important;
    border-radius: 14px !important;
    width: auto !important;
    max-width: none !important;
    align-self: flex-start !important;
    scrollbar-width: none !important;
  }
  #gameContainer #gameTable .center-zone .piles-area::-webkit-scrollbar {
    display: none !important;
  }

  /* L'étiquette texte « Défausse » est superflue dans la scène compacte
     (le cadre pointillé orange suffit) et créait un débordement/ascenseur */
  #gameContainer #gameTable .center-zone .pile-label {
    display: none !important;
  }

  #gameContainer #gameTable .center-zone .pile-container {
    margin: 0 !important;
  }

  #gameContainer #gameTable .center-zone .pile,
  #gameContainer #gameTable .center-zone .pile.deck,
  #gameContainer #gameTable .center-zone .pile.discard,
  #gameContainer #gameTable .center-zone .discard-card {
    width: var(--v80-pile-w, 54px) !important;
    height: calc(var(--v80-pile-w, 54px) * 1.4) !important;
    min-width: var(--v80-pile-w, 54px) !important;
    min-height: calc(var(--v80-pile-w, 54px) * 1.4) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }

  /* La zone des melds remplit le reste et DÉFILE à l'intérieur :
     elle ne peut physiquement plus passer sous la main */
  #gameContainer #gameTable .center-zone .melds-zone {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-content: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 2px 2px 10px 2px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #gameContainer #gameTable .center-zone .melds-zone::-webkit-scrollbar {
    width: 4px;
  }
  #gameContainer #gameTable .center-zone .melds-zone::-webkit-scrollbar-thumb {
    background: rgba(200, 150, 255, 0.35);
    border-radius: 4px;
  }
}

/* Portrait : piles centrées en haut, melds en dessous */
@media (orientation: portrait) and (pointer: coarse),
       (orientation: portrait) and (max-width: 1180px) {
  :root { --v80-pile-w: clamp(46px, 13vw, 62px); }

  #gameContainer #gameTable .center-zone {
    flex-direction: column !important;
    align-items: center !important;
  }
  #gameContainer #gameTable .center-zone .piles-area {
    flex-direction: row !important;
    align-self: center !important;
  }
  #gameContainer #gameTable .center-zone .melds-zone {
    width: 100% !important;
  }
}

/* Paysage : piles en colonne à gauche, melds dans tout l'espace restant.
   La taille exacte des piles (--v80-pile-w) est calculée par le JS V80 à partir
   de la hauteur réellement disponible — la valeur ci-dessous n'est qu'un repli
   avant le premier calcul. PAS de calc(100dvh…) ici : rejeté par WebKit iOS. */
@media (orientation: landscape) and (pointer: coarse),
       (orientation: landscape) and (max-width: 1400px),
       (orientation: landscape) and (max-height: 950px) {
  :root { --v80-pile-w: clamp(34px, 9vh, 58px); }

  #gameContainer #gameTable .center-zone {
    flex-direction: row !important;
    align-items: stretch !important;
  }
  #gameContainer #gameTable .center-zone .piles-area {
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    align-self: flex-start !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }
}

/* ============================================================
   3. MELDS « RUBAN » — cartes qui se chevauchent, groupe compact
   (tous les écrans, y compris desktop)
   ============================================================ */

/* Tailles de cartes de meld selon l'écran */
@media (orientation: portrait) and (pointer: coarse),
       (orientation: portrait) and (max-width: 1180px) {
  :root { --v80-meld-card-w: clamp(38px, 10.5vw, 50px); }
}
@media (orientation: landscape) and (pointer: coarse),
       (orientation: landscape) and (max-width: 1400px),
       (orientation: landscape) and (max-height: 950px) {
  :root { --v80-meld-card-w: clamp(38px, 9vh, 50px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  :root { --v80-meld-card-w: 36px; }
}

.melds-zone .meld,
#meldsZone .meld {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 16px 8px 5px 8px !important;
  border-radius: 10px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  background: rgba(45, 10, 78, 0.72) !important;
  box-shadow: 0 2px 10px rgba(26, 5, 51, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#meldsZone .meld .card,
#meldsZone .meld .card.meld-card,
.melds-zone .meld .card {
  position: relative !important;
  flex: 0 0 auto !important;
  width: var(--v80-meld-card-w, 54px) !important;
  height: calc(var(--v80-meld-card-w, 54px) * 1.42) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 7px !important;
  box-shadow: -2px 0 5px rgba(26, 5, 51, 0.3);
  cursor: pointer;
}

/* Le chevauchement : chaque carte recouvre la précédente en laissant
   son coin (valeur + couleur) visible. --meld-overlap est calculé par
   le JS (V80) pour que le groupe tienne TOUJOURS dans la zone. */
#meldsZone .meld .card + .card,
.melds-zone .meld .card + .card {
  margin-left: var(--meld-overlap, -18px) !important;
}

/* Touche/survole une carte chevauchée : elle passe devant, entière */
#meldsZone .meld .card:hover,
#meldsZone .meld .card:active {
  z-index: 45 !important;
  transform: translateY(-4px) !important;
}
#meldsZone .meld .card.meld-reorder-selected {
  z-index: 50 !important;
}

/* Typographie du coin : lisible malgré le chevauchement
   (!important requis : les tailles d'origine sont en styles inline) */
#meldsZone .meld .card .rank,
.melds-zone .meld .card .rank {
  font-size: calc(var(--v80-meld-card-w, 54px) * 0.30) !important;
  top: 2px !important;
  left: 3px !important;
  line-height: 1 !important;
}
#meldsZone .meld .card .suit-top-left,
.melds-zone .meld .card .suit-top-left {
  font-size: calc(var(--v80-meld-card-w, 54px) * 0.24) !important;
  top: calc(var(--v80-meld-card-w, 54px) * 0.34) !important;
  left: 3px !important;
}
#meldsZone .meld .card .card-content,
.melds-zone .meld .card .card-content {
  font-size: calc(var(--v80-meld-card-w, 54px) * 0.42) !important;
  opacity: 0.85 !important;
}
#meldsZone .meld .card .suit-top-right,
#meldsZone .meld .card .suit-bottom-left,
#meldsZone .meld .card .suit-bottom-right,
#meldsZone .meld .card .rank-bottom,
.melds-zone .meld .card .suit-top-right,
.melds-zone .meld .card .suit-bottom-left,
.melds-zone .meld .card .suit-bottom-right,
.melds-zone .meld .card .rank-bottom {
  display: none !important;
}
#meldsZone .meld .card .joker-center {
  font-size: calc(var(--v80-meld-card-w, 54px) * 0.42) !important;
}
#meldsZone .meld .card .joker-label,
#meldsZone .meld .card .joker-label-bottom {
  font-size: 6px !important;
}

/* Étiquette du groupe : fine, dorée, au-dessus des cartes */
#meldsZone .meld .meld-label,
.melds-zone .meld .meld-label {
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  right: auto !important;
  max-width: calc(100% - 8px);
  font-size: 8px !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: rgba(26, 5, 51, 0.78) !important;
  letter-spacing: 0.4px;
  line-height: 1.3 !important;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* « ➕ Glisser une carte ici » : superflu dans les melds posés
   (les cibles s'allument pendant le drag), gardé dans les groupes
   en préparation où il sert de consigne. */
#meldsZone .meld.meld-drop-target .meld-add-zone {
  display: none !important;
}
#meldsZone .meld.staged-meld .meld-add-zone {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  font-size: 10px !important;
  font-style: italic;
  padding: 4px 6px !important;
  background: transparent !important;
  pointer-events: none;
  align-self: center;
}

/* Groupes en préparation : un peu d'air pour taper sur les cartes (retrait) */
#meldsZone .meld.staged-meld {
  padding-top: 18px !important;
}

/* Zone vide : invitation douce au lieu du grand vide */
#meldsZone:empty {
  align-items: center !important;
  justify-content: center !important;
}
#meldsZone:empty::after {
  content: '✨ Les groupes posés apparaîtront ici';
  color: rgba(233, 213, 255, 0.45);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 12px;
}

/* Desktop « grille » (grand écran haut) : la zone melds défile aussi */
.center-zone .melds-zone {
  max-height: none;
  overflow-y: auto;
}

/* ============================================================
   4. FEEDBACK DE DRAG — les cibles s'allument pendant le glisser
   ============================================================ */

/* Les melds posés appellent la carte : pointillés or pulsants */
body.rami-dragging #meldsZone .meld.meld-drop-target,
body.rami-dragging .melds-zone .meld.meld-drop-target,
body.rami-dragging #meldsZone .meld.staged-meld {
  outline: 2px dashed rgba(255, 214, 10, 0.8) !important;
  outline-offset: 2px !important;
  animation: v80-appelle 1.1s ease-in-out infinite !important;
}

/* La défausse s'illumine en cyan pendant le drag */
body.rami-dragging #discardPile,
body.rami-dragging #discardTop {
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.45), 0 0 18px rgba(0, 229, 255, 0.35) !important;
}

/* La cible actuellement visée grossit en turquoise */
#meldsZone .meld.drop-zone-valid,
#meldsZone .meld.dropzone--active,
#meldsZone .meld.drag-over,
.melds-zone .meld.drop-zone-valid,
.melds-zone .meld.dropzone--active,
.melds-zone .meld.drag-over {
  outline: 3px solid var(--festif-vert, #06D6A0) !important;
  transform: scale(1.06) !important;
  z-index: 60 !important;
  box-shadow: 0 0 18px rgba(6, 214, 160, 0.55) !important;
  animation: none !important;
}

/* Neutraliser l'ancien clignotement global « toutes les zones en vert » :
   trop de bruit — seule la cible visée doit ressortir */
#meldsZone .meld.drop-zone-active,
.melds-zone .meld.drop-zone-active,
#handFan.drop-zone-active {
  animation: none !important;
  outline: none !important;
  background: rgba(45, 10, 78, 0.72) !important;
}

@keyframes v80-appelle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0); }
  50%      { box-shadow: 0 0 14px 2px rgba(255, 214, 10, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  body.rami-dragging #meldsZone .meld.meld-drop-target,
  body.rami-dragging #meldsZone .meld.staged-meld {
    animation: none !important;
  }
}