/* ============================================================
   THEME FESTIF — design créatif et coloré (le préféré !)
   Fond animé violet → magenta → bleu nuit, halos rose/cyan/or,
   titre arc-en-ciel, confettis, boutons multicolores.
   Chargé en dernier : surcharge couleurs/effets + UX des melds,
   sans casser le layout géré par le JS.
   ============================================================ */

:root {
  --festif-violet: #7B2FF7;
  --festif-magenta: #F72585;
  --festif-orange: #FF8E3C;
  --festif-jaune: #FFD60A;
  --festif-cyan: #00E5FF;
  --festif-vert: #06D6A0;
  --festif-rouge: #FF3860;
  --festif-fond-1: #1a0533;
  --festif-fond-2: #2d0a4e;
}

/* ===== FOND ANIMÉ MULTICOLORE (ondulation lente) =====
   html = couleur pleine (iOS Safari : pas de bande blanche au rebond / encoche),
   body = dégradé animé. */
html {
  background: #1a0533 !important;
}

body {
  background: linear-gradient(-45deg, #1a0533, #4a0d67, #0d3b66, #6a0d4e, #1a0533) !important;
  background-color: #1a0533 !important;
  background-size: 400% 400% !important;
  animation: festif-fond 18s ease infinite;
  color: #FDF3FF !important;
  min-height: 100dvh;
  overscroll-behavior: none;
}

@keyframes festif-fond {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Halos rose / cyan / or en superposition douce */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(247, 37, 133, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(0, 229, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 95%, rgba(255, 214, 10, 0.10), transparent 60%);
}

.game-container, .game-header { position: relative; z-index: 1; }
/* La barre d'action DOIT rester fixée en bas (ne pas la passer en relative,
   sinon elle sort de l'écran et laisse un grand vide au-dessus). */
.action-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9500 !important;
}

/* ===== CONFETTIS FLOTTANTS SUR L'ACCUEIL ===== */
.welcome-screen {
  position: relative;
  overflow: hidden;
}
.welcome-screen::before,
.welcome-screen::after {
  content: '🎉 🎂 🎈 🃏 ✨ 🎊 💜 🧡';
  position: absolute;
  left: 0;
  right: 0;
  font-size: 26px;
  letter-spacing: 48px;
  white-space: nowrap;
  opacity: 0.35;
  pointer-events: none;
  animation: festif-flotte 9s ease-in-out infinite;
}
.welcome-screen::before { top: 8%; }
.welcome-screen::after  { bottom: 8%; animation-delay: -4.5s; animation-direction: reverse; }

@keyframes festif-flotte {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

/* ===== TITRE ARC-EN-CIEL ANIMÉ ===== */
.welcome-content h1 {
  background: linear-gradient(90deg, #FFD60A, #F72585, #7B2FF7, #00E5FF, #06D6A0, #FFD60A);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: festif-arcenciel 6s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(247, 37, 133, 0.35));
}

@keyframes festif-arcenciel {
  to { background-position: 300% center; }
}

.welcome-content p {
  color: #E9D5FF !important;
}

/* ===== BOUTON PLAY : dégradé magenta-violet-cyan pulsant ===== */
.big-play-btn {
  background: linear-gradient(135deg, #F72585, #7B2FF7 45%, #00C2FF) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.12),
    0 10px 40px rgba(247, 37, 133, 0.45),
    0 4px 18px rgba(123, 47, 247, 0.5) !important;
  animation: festif-fond 5s ease infinite, festif-pulse 2.4s ease-in-out infinite;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

@keyframes festif-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.big-play-btn:hover {
  transform: scale(1.07) !important;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.18),
    0 14px 50px rgba(247, 37, 133, 0.6) !important;
}

/* ===== HEADER ===== */
.game-header {
  background: rgba(20, 4, 44, 0.72) !important;
  backdrop-filter: blur(14px);
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #F72585, #FFD60A, #00E5FF, #7B2FF7) 1 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

.phase-info { color: #E9D5FF !important; }
.turn-info { color: var(--festif-jaune) !important; }

.header-btn {
  background: linear-gradient(135deg, rgba(247, 37, 133, 0.25), rgba(123, 47, 247, 0.3)) !important;
  color: #FDF3FF !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.header-btn:hover {
  background: linear-gradient(135deg, rgba(247, 37, 133, 0.45), rgba(123, 47, 247, 0.5)) !important;
}

/* Code de salle DORÉ */
.game-code {
  background: linear-gradient(135deg, #FFD60A, #FF8E3C) !important;
  color: #3a1d00 !important;
  font-weight: 800;
  border-radius: 8px;
  padding: 2px 8px;
  letter-spacing: 1px;
}

.share-btn {
  background: linear-gradient(135deg, #00E5FF, #06D6A0) !important;
  color: #003b3b !important;
  font-weight: 700;
}

/* ===== BOUTONS GÉNÉRIQUES ===== */
.primary {
  background: linear-gradient(135deg, #F72585, #B5179E) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(247, 37, 133, 0.35);
}
.primary:hover {
  background: linear-gradient(135deg, #ff4fa0, #d02cb8) !important;
  box-shadow: 0 6px 20px rgba(247, 37, 133, 0.55);
}

.secondary {
  background: rgba(123, 47, 247, 0.22) !important;
  color: #F3E8FF !important;
  border: 1px solid rgba(200, 150, 255, 0.35) !important;
}
.secondary:hover { background: rgba(123, 47, 247, 0.38) !important; }

.start-btn {
  background: linear-gradient(135deg, #06D6A0, #00C2FF) !important;
  color: #00312b !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 24px rgba(6, 214, 160, 0.45);
  border: none !important;
}

/* ===== BARRE D'ACTIONS : chaque bouton sa couleur ===== */
.action-bar {
  background: rgba(20, 4, 44, 0.8) !important;
  backdrop-filter: blur(12px);
  border-top: 2px solid rgba(255, 255, 255, 0.08) !important;
}

.action-btn {
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  border-radius: 12px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
.action-btn:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.action-btn:disabled {
  filter: grayscale(0.7) brightness(0.55);
  opacity: 0.6;
}

#btnDrawDeck        { background: linear-gradient(135deg, #00C2FF, #0077FF) !important; }   /* bleu électrique */
#btnDrawDiscard     { background: linear-gradient(135deg, #FF8E3C, #FF5E00) !important; }   /* orange */
#btnLayFirst,
#btnLayMore         { background: linear-gradient(135deg, #9D4EDD, #7B2FF7) !important; }   /* violet */
#btnDiscard         { background: linear-gradient(135deg, #F72585, #C9184A) !important; }   /* rose */
#btnCarte           { background: linear-gradient(135deg, #FFD60A, #FF9E00) !important; color: #3a2500 !important; text-shadow: none; } /* or */
#btnOrganize        { background: linear-gradient(135deg, #06D6A0, #009B72) !important; }   /* turquoise */

/* ===== ZONE CENTRALE : piles + melds bien positionnées ===== */
.center-zone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}

.piles-area {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 10px 22px !important;
  background: rgba(45, 10, 78, 0.55);
  border: 1px solid rgba(200, 150, 255, 0.28);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 22px rgba(0, 0, 0, 0.3);
}

.pile {
  border: 2px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 10px !important;
}
.pile.deck { background: #22093e !important; }
.pile.deck:hover {
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.55);
}

.pile-counter {
  background: linear-gradient(135deg, #FFD60A, #FF8E3C) !important;
  color: #3a2500 !important;
  font-weight: 800 !important;
}

.pile-label { color: #E9D5FF !important; }

/* Défausse vide : cadre pointillé orange au lieu d'un bloc noir */
.pile.discard, .discard-card {
  background: rgba(45, 10, 78, 0.6) !important;
  border: 2px dashed rgba(255, 142, 60, 0.55) !important;
  border-radius: 10px !important;
  color: #E9D5FF !important;
}

/* ===== DOS DE CARTES ROSE/VIOLET RAYÉ ===== */
.card-back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, #F72585, #7B2FF7 60%, #3A0CA3) !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 14px rgba(123, 47, 247, 0.45);
}

/* ===== CARTES : blanches pour la lisibilité, sélection EN OR ===== */
.card {
  border: 2px solid rgba(123, 47, 247, 0.18) !important;
  box-shadow: 0 3px 10px rgba(26, 5, 51, 0.45);
}

#handFan .card.is-selected,
#handFan .card.selected,
.hand-card.selected,
.card.selected {
  outline: 3px solid rgba(255, 214, 10, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.65), 0 8px 22px rgba(247, 37, 133, 0.4) !important;
}

/* Carte fraîchement piochée : pulse doré ~2s (dynamique V63b) */
.card-just-drawn {
  animation: festif-nouvelle-carte 1.1s ease-in-out 2;
}
@keyframes festif-nouvelle-carte {
  0%, 100% { box-shadow: 0 3px 10px rgba(26, 5, 51, 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.85), 0 0 22px rgba(255, 214, 10, 0.7); }
}

/* ===== MELDS : panneaux violets lisibles ===== */
.melds-zone { gap: 10px !important; }

.meld {
  background: rgba(45, 10, 78, 0.6) !important;
  border: 1px solid rgba(200, 150, 255, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(26, 5, 51, 0.35);
  position: relative;
  padding: 20px 6px 6px 6px !important;
}

/* Label du groupe : bandeau au-dessus des cartes, sans chevauchement */
.meld .meld-label {
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(26, 5, 51, 0.8);
  border-radius: 6px;
  padding: 1px 6px;
  line-height: 1.3;
  color: var(--festif-jaune) !important;
  font-weight: 700;
}

.meld-add-zone { color: #C7B2FF !important; }

/* Melds réels posés : liseré cyan + invitation au clic (V63) */
.meld.meld-drop-target {
  border: 1px solid rgba(0, 229, 255, 0.45) !important;
  cursor: pointer;
}
.meld.meld-drop-target:hover {
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}
.meld.meld-drop-target .meld-label { color: var(--festif-cyan) !important; }

/* --- Groupes en préparation (1ère pose) --- */
.meld.staged-meld, .staged-meld {
  cursor: pointer;
  border: 2px dashed rgba(200, 150, 255, 0.5) !important;
  background: rgba(45, 10, 78, 0.75) !important;
}

/* Groupe ACTIF : c'est là que vont les cartes touchées */
.meld.staged-meld.selected, .staged-meld.selected {
  border: 2px solid var(--festif-jaune) !important;
  box-shadow: 0 0 18px rgba(255, 214, 10, 0.45), inset 0 0 14px rgba(255, 214, 10, 0.08) !important;
}
.staged-meld.selected .meld-label::after {
  content: ' ● ACTIF';
  color: var(--festif-jaune);
}

/* Validité du groupe : liseré turquoise / rose */
.meld.staged-meld.valid, .staged-meld.valid { border-color: var(--festif-vert) !important; }
.staged-meld.valid .meld-label { color: var(--festif-vert) !important; }
.meld.staged-meld.invalid, .staged-meld.invalid { border-color: rgba(255, 56, 96, 0.6) !important; }
.staged-meld.invalid .meld-label { color: #FF8AA6 !important; }
/* Le groupe actif garde son OR pour le repérer facilement */
.meld.staged-meld.selected.valid, .meld.staged-meld.selected.invalid {
  border-color: var(--festif-jaune) !important;
  box-shadow: 0 0 18px rgba(255, 214, 10, 0.45), inset 0 0 14px rgba(255, 214, 10, 0.08) !important;
}

/* Cartes en préparation : badge × = "touche pour retirer" */
.staged-card, .staged-card-preview {
  cursor: pointer !important;
}
.staged-card::after, .staged-card-preview::after {
  content: '×';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  background: var(--festif-rouge);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  z-index: 30;
  box-shadow: 0 0 6px rgba(255, 56, 96, 0.7);
  pointer-events: none;
}
.staged-card:hover {
  outline: 2px solid var(--festif-rouge);
  outline-offset: 1px;
}

/* Carte de la main déjà placée dans un groupe */
.is-staged-direct-lay { opacity: 0.55 !important; }

/* ===== MAIN DU JOUEUR : dock en verre violet ===== */
.player-seat.bottom {
  background: linear-gradient(180deg, rgba(45, 10, 78, 0.85), rgba(26, 5, 51, 0.92)) !important;
  border: 1px solid rgba(247, 37, 133, 0.55) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -10px 34px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

.player-seat .player-name { color: #FDF3FF !important; }
.player-seat .player-cards { color: var(--festif-jaune) !important; font-weight: 700; }

/* ===== ADVERSAIRES ===== */
.player-seat.top .player-info, #mobileOpponentsBadge .opp-chip {
  background: rgba(45, 10, 78, 0.8) !important;
  border: 1px solid rgba(200, 150, 255, 0.35) !important;
  border-radius: 10px;
  color: #FDF3FF !important;
}
#mobileOpponentsBadge .opp-chip.active {
  border-color: var(--festif-jaune) !important;
  box-shadow: 0 0 12px rgba(255, 214, 10, 0.45);
  color: #FFE9A8 !important;
}

/* ===== POPUPS EN VERRE VIOLET ===== */
.popup-content {
  background: linear-gradient(160deg, #2d0a4e 0%, #1a0533 100%) !important;
  border: 1px solid rgba(200, 150, 255, 0.3) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(123, 47, 247, 0.15) !important;
}

.popup-content h3 {
  background: linear-gradient(90deg, #FFD60A, #F72585, #00E5FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.popup-content h4 { color: #FFD60A !important; }
.popup-content label { color: #E9D5FF !important; }
.popup-hint { color: #C7B2FF !important; }

.popup-content input,
.popup-content select {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FDF3FF !important;
  border: 1px solid rgba(200, 150, 255, 0.35) !important;
  border-radius: 8px;
}
.popup-content input:focus,
.popup-content select:focus {
  border-color: #F72585 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(247, 37, 133, 0.25);
}
.popup-content input::placeholder { color: rgba(233, 213, 255, 0.45) !important; }
.popup-content select option { background: #2d0a4e; color: #FDF3FF; }

/* ===== LOBBY ===== */
.lobby-content h2 { color: #FDF3FF !important; }
.lobby-content h2 span { color: var(--festif-jaune) !important; }
.players-list > * {
  background: rgba(123, 47, 247, 0.25) !important;
  border: 1px solid rgba(200, 150, 255, 0.3) !important;
  color: #FDF3FF !important;
  border-radius: 10px;
}

/* ===== NOTIFICATIONS / TOASTS ===== */
.turn-notification .turn-content {
  background: linear-gradient(135deg, #FFD60A, #FF8E3C) !important;
  color: #3a2500 !important;
  border: none !important;
  font-weight: 800;
  box-shadow: 0 8px 30px rgba(255, 158, 0, 0.5) !important;
}

.toast {
  background: linear-gradient(135deg, rgba(45, 10, 78, 0.95), rgba(26, 5, 51, 0.95)) !important;
  border-left: 4px solid #F72585 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  border-radius: 10px !important;
}
.toast.success, .toast-success { border-left-color: var(--festif-vert) !important; }
.toast.error, .toast-error   { border-left-color: var(--festif-rouge) !important; }
.toast.warning, .toast-warning { border-left-color: var(--festif-jaune) !important; }

/* ===== FIN DE MANCHE ===== */
.round-content h2,
#roundEndTitle { color: #FFD60A !important; }

.round-btn.primary {
  background: linear-gradient(135deg, #06D6A0, #00C2FF) !important;
  color: #00312b !important;
}

.round-content,
.staging-sheet {
  background: linear-gradient(160deg, #2d0a4e 0%, #1a0533 100%) !important;
  border: 1px solid rgba(200, 150, 255, 0.3) !important;
}

/* ===== PANNEAU POSE MANUELLE ===== */
.manual-lay-sheet {
  background: linear-gradient(160deg, #2d0a4e, #1a0533) !important;
  border: 1px solid rgba(200, 150, 255, 0.3) !important;
}
.manual-lay-btn.primary {
  background: linear-gradient(135deg, #F72585, #B5179E) !important;
}

/* ===== NEUTRALISATION DES ANCIENS VERTS/AMBRES (style_new + mobile_styles) ===== */
.game-container { background: transparent !important; }

/* Dock de la main : gagne sur TOUTES les variantes de mobile_styles
   (y compris la règle landscape body:not(...) #gameTable:not(...) #playerBottom) */
#playerBottom.player-seat.bottom,
body:not(.home-screen-visible) #playerBottom.player-seat.bottom,
body:not(.home-screen-visible) #gameTable:not(.hidden) #playerBottom.player-seat.bottom {
  background: linear-gradient(180deg, rgba(45, 10, 78, 0.94), rgba(26, 5, 51, 0.96)) !important;
  border: 1.5px solid rgba(247, 37, 133, 0.6) !important;
}

@media (max-width: 1024px), (pointer: coarse) {
  #gameTable:not(.hidden) #playerBottom {
    background: linear-gradient(180deg, rgba(45, 10, 78, 0.94), rgba(26, 5, 51, 0.96)) !important;
    border: 1px solid rgba(247, 37, 133, 0.6) !important;
  }

  /* Panneau flottant des groupes en préparation (mobile) */
  .mobile-played-melds-floating.has-staging {
    background: rgba(45, 10, 78, 0.88) !important;
    border: 2px dashed rgba(200, 150, 255, 0.5) !important;
  }
  .mobile-played-melds-floating.has-staging .mobile-staging-group {
    border-color: rgba(200, 150, 255, 0.4) !important;
    background: rgba(26, 5, 51, 0.92) !important;
  }
  .mobile-played-melds-floating.has-staging .mobile-staging-group.selected {
    outline: 2px solid var(--festif-jaune) !important;
    box-shadow: 0 0 14px rgba(255, 214, 10, 0.4) !important;
  }
  .mobile-played-melds-floating.has-staging .meld-label {
    color: var(--festif-jaune) !important;
  }

  /* Carte de la main déjà placée dans un groupe : marquage or */
  #handFan .card.is-staged-direct-lay {
    outline: 2px solid rgba(255, 214, 10, 0.85) !important;
    box-shadow: 0 0 0 2px rgba(255, 214, 10, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }
}

/* ===== PANNEAU FLOTTANT DES MELDS (mobile/petit écran) ===== */
body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
#mobilePlayedMeldsFloating.has-melds,
#mobilePlayedMeldsFloating {
  background: rgba(45, 10, 78, 0.9) !important;
  border: 1px solid rgba(200, 150, 255, 0.3) !important;
}

body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds .meld.mobile-staging-group,
#mobilePlayedMeldsFloating.has-melds .meld.mobile-staging-group,
#mobilePlayedMeldsFloating .meld.mobile-staging-group {
  border: 2px dashed rgba(200, 150, 255, 0.5) !important;
  background: rgba(26, 5, 51, 0.92) !important;
}

body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds .meld.mobile-staging-group.selected,
#mobilePlayedMeldsFloating.has-melds .meld.mobile-staging-group.selected,
#mobilePlayedMeldsFloating .meld.mobile-staging-group.selected {
  border: 2px solid var(--festif-jaune) !important;
  box-shadow: 0 0 14px rgba(255, 214, 10, 0.45) !important;
}

body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds .meld-label,
#mobilePlayedMeldsFloating .meld-label {
  color: var(--festif-jaune) !important;
}

/* Melds réels dans le panneau flottant : liseré cyan */
body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds .meld.meld-drop-target,
#mobilePlayedMeldsFloating .meld.meld-drop-target {
  border: 1px solid rgba(0, 229, 255, 0.5) !important;
  background: rgba(26, 5, 51, 0.85) !important;
}

/* ============================================================
   V64 — RÉPARTITION DES ÉLÉMENTS + SAFE-AREA IPHONE + EFFETS
   ============================================================ */

/* ----- Safe-area (encoche iPhone, viewport-fit=cover) ----- */
.game-header {
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
}
.action-bar {
  padding-left: max(8px, env(safe-area-inset-left)) !important;
  padding-right: max(8px, env(safe-area-inset-right)) !important;
}

/* ----- Piles compactes (elles n'occupent plus toute la largeur) ----- */
@media (max-width: 1024px), (pointer: coarse) {
  .piles-area {
    width: fit-content !important;
    max-width: calc(100vw - 12px) !important;
  }
}

/* PORTRAIT : piles centrées, melds CENTRÉS en dessous, sur toute la largeur.
   La hauteur est plafonnée par la position du dock de la main (jamais de chevauchement),
   et le panneau passe SOUS la main (z-index) par sécurité. */
@media (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse) {
  .piles-area { margin: 0 auto !important; }

  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging,
  #mobilePlayedMeldsFloating.has-melds,
  #mobilePlayedMeldsFloating.has-staging,
  .mobile-played-melds-floating.has-melds,
  .mobile-played-melds-floating.has-staging {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 218px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    max-width: calc(100vw - 12px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    /* 218px (haut) + dock main (132px) + sa marge basse (92px + safe-area) + 14px d'air */
    max-height: calc(100dvh - 218px - 132px - 92px - env(safe-area-inset-bottom, 0px) - 14px) !important;
    overflow-y: auto !important;
    z-index: 9200 !important; /* sous le dock de la main (9300+) */
  }
}

/* PAYSAGE : piles compactes à gauche, melds centrés dans tout l'espace restant,
   plafonnés au-dessus du dock de la main. */
@media (orientation: landscape) and (max-width: 1400px), (orientation: landscape) and (pointer: coarse) {
  .piles-area { margin: 0 auto 0 max(8px, env(safe-area-inset-left)) !important; }

  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging,
  #mobilePlayedMeldsFloating.has-melds,
  #mobilePlayedMeldsFloating.has-staging,
  .mobile-played-melds-floating.has-melds,
  .mobile-played-melds-floating.has-staging {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    left: 250px !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    /* 58px (haut) + barre d'actions + dock main + 12px d'air */
    max-height: calc(100dvh - 58px - var(--rami-actionbar-h, 74px) - var(--rami-bottom-h, 128px) - env(safe-area-inset-bottom, 0px) - 12px) !important;
    overflow-y: auto !important;
    z-index: 9200 !important; /* sous le dock de la main (9300+) */
  }
}

/* Desktop large : la zone melds est déjà centrée (center-zone), on l'aère */
.melds-zone {
  justify-content: center !important;
  align-content: flex-start !important;
  width: 100% !important;
}

/* ============================================================
   EFFETS FESTIFS SUPPLÉMENTAIRES
   ============================================================ */

/* ----- Accueil : pluie d'étoiles scintillantes ----- */
body.home-screen-visible::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255, 214, 10, 0.9), transparent 60%),
    radial-gradient(2px 2px at 78% 14%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 68%, rgba(0, 229, 255, 0.8), transparent 60%),
    radial-gradient(2px 2px at 88% 58%, rgba(247, 37, 133, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 35%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(2px 2px at 20% 85%, rgba(255, 214, 10, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 82%, rgba(0, 229, 255, 0.7), transparent 60%),
    radial-gradient(2px 2px at 42% 10%, rgba(255, 142, 60, 0.8), transparent 60%);
  animation: festif-scintille 4s ease-in-out infinite alternate;
}

@keyframes festif-scintille {
  0%   { opacity: 0.35; }
  100% { opacity: 1; }
}

/* ----- Bouton PLAY : reflet lumineux qui balaie ----- */
.big-play-btn {
  position: relative;
  overflow: hidden;
}
.big-play-btn::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: festif-reflet 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes festif-reflet {
  0%       { left: -60%; }
  55%, 100% { left: 130%; }
}

/* ----- Boutons d'action actifs : respiration lumineuse ----- */
.action-btn:not(:disabled) {
  animation: festif-respire 2.6s ease-in-out infinite;
}
@keyframes festif-respire {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}
#btnCarte:not(:disabled) {
  animation: festif-respire 1.3s ease-in-out infinite;
}

/* ----- Notification "À toi de jouer" : rebond joyeux ----- */
.turn-notification .turn-content {
  animation: festif-rebond 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes festif-rebond {
  0%   { transform: scale(0.6) translateY(-30px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ----- Fin de manche : pluie de confettis ----- */
.round-overlay:not(.hidden)::before,
#roundEndPopup:not(.hidden)::before {
  content: '🎉 🎊 ✨ 🎈 🎂 🏆 ✨ 🎉 🎊 💜';
  position: fixed;
  top: -60px;
  left: 0;
  right: 0;
  font-size: 30px;
  letter-spacing: 36px;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  animation: festif-confetti-chute 4s linear infinite;
}
@keyframes festif-confetti-chute {
  0%   { transform: translateY(0) rotate(-3deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(3deg); opacity: 0.6; }
}

/* ----- Pioche : petit halo appétissant quand c'est cliquable ----- */
.pile.deck {
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.pile.deck:active { transform: scale(0.96); }

/* ===== ACCESSIBILITÉ : réduire les animations si demandé ===== */
@media (prefers-reduced-motion: reduce) {
  html, body,
  .big-play-btn,
  .big-play-btn::after,
  .welcome-content h1,
  .welcome-screen::before,
  .welcome-screen::after,
  body.home-screen-visible::after,
  .action-btn:not(:disabled),
  #btnCarte:not(:disabled),
  .turn-notification .turn-content,
  .round-overlay:not(.hidden)::before,
  #roundEndPopup:not(.hidden)::before,
  .card-just-drawn {
    animation: none !important;
  }
}

/* ============================================================
   V65 — MAIN EN ÉVENTAIL (demi-cercle)
   Le JS pose --fan-rot sur chaque carte ; ici : pivot sous la
   main, chevauchement (gain de place), sélection sur l'axe incliné.
   ============================================================ */

#handFan .card,
#handFan .hand-card {
  transform-origin: 50% 150% !important;
}

/* Rotation de base (cartes non sélectionnées) */
#handFan.layout-flex-mode .card:not(.is-selected):not(.selected),
#handFan .card:not(.is-selected):not(.selected) {
  transform: rotate(var(--fan-rot, 0deg));
}

/* Carte sélectionnée : elle sort de l'éventail le long de son inclinaison
   (surcharge les règles translateY+scale de style_new/mobile_styles) */
#handFan.layout-flex-mode .card.is-selected,
#handFan.layout-flex-mode .card.selected,
#gameTable:not(.hidden) #handFan.layout-flex-mode .card.is-selected,
#gameTable:not(.hidden) #handFan.layout-flex-mode .card.selected {
  transform: rotate(var(--fan-rot, 0deg)) translateY(var(--selected-lift, -18px)) scale(1.03) !important;
}

/* Chevauchement : les cartes se recouvrent comme dans une vraie main.
   z-index croissant déjà géré par le JS → la carte de droite passe devant. */
#handFan.layout-flex-mode,
#gameTable:not(.hidden) #handFan {
  gap: 0 !important;
  justify-content: safe center !important;
  padding-top: 10px !important;
}

@media (pointer: coarse), (max-width: 1024px) {
  #handFan .card { margin-right: -14px !important; }
  #handFan .card:last-child { margin-right: 0 !important; }
}

@media (pointer: fine) and (min-width: 1025px) {
  #handFan .card { margin-right: -18px !important; }
  #handFan .card:last-child { margin-right: 0 !important; }
}

/* Un léger fondu de transition pour que l'éventail respire */
#handFan .card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (pointer: coarse) {
  /* tap instantané sur mobile : pas de transition (perf V57) */
  #handFan .card { transition: none; }
}

/* ============================================================
   V67 — AJUSTEMENTS : main plus basse, arc casino, melds
   qui ne chevauchent JAMAIS la main
   ============================================================ */

/* --- 1. La main descend : collée à la barre de boutons --- */
@media (max-width: 1024px), (pointer: coarse) {
  #gameTable:not(.hidden) #playerBottom,
  body:not(.home-screen-visible) #playerBottom.player-seat.bottom,
  body:not(.home-screen-visible) #gameTable:not(.hidden) #playerBottom {
    bottom: calc(var(--rami-actionbar-h, 74px) + 2px) !important;
  }
}
@media (orientation: landscape) and (max-width: 1400px), (orientation: landscape) and (pointer: coarse) {
  body:not(.home-screen-visible) #gameTable:not(.hidden) #playerBottom,
  body:not(.home-screen-visible) #playerBottom,
  body:not(.home-screen-visible) .player-seat.bottom {
    bottom: calc(var(--rami-actionbar-h, 74px) + 2px) !important;
  }
}

/* --- 2. Arc casino : rotation + courbure vers le HAUT (--fan-drop posé par le JS).
   Les cartes des bords remontent → le point le plus bas est le centre,
   donc aucune carte ne plonge sous les boutons. --- */
#handFan.layout-flex-mode .card:not(.is-selected):not(.selected),
#handFan .card:not(.is-selected):not(.selected) {
  transform: rotate(var(--fan-rot, 0deg)) translateY(calc(-1 * var(--fan-drop, 0px)));
}

#handFan.layout-flex-mode .card.is-selected,
#handFan.layout-flex-mode .card.selected,
#gameTable:not(.hidden) #handFan.layout-flex-mode .card.is-selected,
#gameTable:not(.hidden) #handFan.layout-flex-mode .card.selected {
  transform: rotate(var(--fan-rot, 0deg)) translateY(calc(-1 * var(--fan-drop, 0px) + var(--selected-lift, -18px))) scale(1.03) !important;
}

/* Les cartes se centrent verticalement : la courbure ne se fait plus couper */
#handFan.layout-flex-mode,
#gameTable:not(.hidden) #handFan,
#handFan {
  align-items: center !important;
  padding-top: 6px !important;
}

/* --- 3. Panneau des melds ancré par le BAS : il se termine
   TOUJOURS au-dessus de la main, quel que soit l'écran/zoom.
   Fond transparent : seuls les melds eux-mêmes sont visibles. --- */
@media (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse) {
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging,
  #mobilePlayedMeldsFloating.has-melds,
  #mobilePlayedMeldsFloating.has-staging,
  .mobile-played-melds-floating.has-melds,
  .mobile-played-melds-floating.has-staging {
    top: calc(env(safe-area-inset-top, 0px) + 212px) !important;
    bottom: calc(var(--rami-actionbar-h, 74px) + 132px + 12px) !important;
    max-height: none !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    align-content: flex-start !important;
  }
}
@media (orientation: landscape) and (max-width: 1400px), (orientation: landscape) and (pointer: coarse) {
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging,
  #mobilePlayedMeldsFloating.has-melds,
  #mobilePlayedMeldsFloating.has-staging,
  .mobile-played-melds-floating.has-melds,
  .mobile-played-melds-floating.has-staging {
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    bottom: calc(var(--rami-actionbar-h, 74px) + var(--rami-bottom-h, 132px) + 10px) !important;
    max-height: none !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    align-content: flex-start !important;
  }
}

/* ============================================================
   V68 — AUTORITÉ MAXIMALE (préfixe #gameContainer = 3 ids)
   pour battre les règles (pointer: coarse) de mobile_styles.css
   qui cassaient l'éventail, la position de la main et les melds
   sur les VRAIS téléphones (là où pointer=coarse).
   ============================================================ */

/* --- ÉVENTAIL : arc parabolique SYMÉTRIQUE.
   translateY (courbure) PUIS rotate autour du centre (50% 50%) → pas de biais.
   Bat le `transform: translateY(0)!important` de mobile_styles (V45). --- */
#gameContainer #gameTable #handFan .card:not(.is-selected):not(.selected),
#gameContainer #gameTable #handFan .hand-card:not(.is-selected):not(.selected) {
  transform: translateY(calc(-1 * var(--fan-drop, 0px))) rotate(var(--fan-rot, 0deg)) !important;
  transform-origin: 50% 50% !important;
}

#gameContainer #gameTable #handFan .card.is-selected,
#gameContainer #gameTable #handFan .card.selected,
#gameContainer #gameTable #handFan .hand-card.is-selected,
#gameContainer #gameTable #handFan .hand-card.selected {
  transform: translateY(calc(-1 * var(--fan-drop, 0px) - 22px)) rotate(var(--fan-rot, 0deg)) scale(1.06) !important;
  transform-origin: 50% 50% !important;
  z-index: 60 !important;
}

/* La main ne coupe pas le haut de l'arc, cartes serrées (chevauchement) */
#gameContainer #gameTable #handFan {
  overflow: visible !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 0 !important;
  padding-top: 14px !important;
}
#gameContainer #gameTable #handFan .card,
#gameContainer #gameTable #handFan .hand-card {
  margin-right: -13px !important;
  transition: none !important;
}
#gameContainer #gameTable #handFan .card:last-child,
#gameContainer #gameTable #handFan .hand-card:last-child {
  margin-right: 0 !important;
}

/* --- MAIN collée aux boutons (bat les `position:fixed` de mobile_styles) --- */
@media (pointer: coarse), (max-width: 1024px) {
  #gameContainer #gameTable #playerBottom.player-seat.bottom {
    position: fixed !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--rami-actionbar-h, 74px) + 2px) !important;
    z-index: 9400 !important;
  }
}

/* --- MELDS : jamais par-dessus la main. Ancré haut ET bas, transparent,
   défile à l'intérieur. #gameContainer n'englobe PAS ce panneau (il est
   sur <body>), donc on garde le préfixe body + !important tardif. --- */
@media (pointer: coarse), (max-width: 1024px) {
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    max-width: calc(100vw - 12px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9100 !important; /* SOUS la main (9400) */
  }
}

/* Paysage : melds entre le header et la main, centrés */
@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (max-width: 1400px) {
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging {
    top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    bottom: calc(var(--rami-actionbar-h, 74px) + var(--rami-bottom-h, 112px) + 8px) !important;
    max-height: none !important;
  }
}

/* Portrait : melds sous les piles, au-dessus de la main */
@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (max-width: 1024px) {
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging {
    top: calc(env(safe-area-inset-top, 0px) + 210px) !important;
    bottom: calc(var(--rami-actionbar-h, 74px) + 150px + 10px) !important;
    max-height: none !important;
  }
}

/* ============================================================
   V69 — RÉORGANISATION MOBILE (paysage + portrait, coarse)
   Objectifs : pioche/défausse bien visibles, zone melds large,
   main agrandie COLLÉE aux boutons (plus d'espace mort).
   Préfixes 3 ids / body pour battre mobile_styles.css.
   ============================================================ */

@media (orientation: landscape) and (pointer: coarse),
       (orientation: landscape) and (max-width: 1400px) {

  /* Grille : petit haut, grand milieu (melds), main fixe gérée à part */
  #gameContainer #gameTable:not(.hidden) {
    grid-template-rows: auto 1fr !important;
    padding: 6px 8px 0 8px !important;
    gap: 4px !important;
  }

  /* PILES pioche + défausse : en haut à GAUCHE, bien visibles */
  #gameContainer #gameTable .center-zone {
    display: block !important;
    padding: 0 !important;
  }
  #gameContainer #gameTable .piles-area {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    padding: 8px 12px !important;
    background: rgba(45, 10, 78, 0.5) !important;
    border: 1px solid rgba(200, 150, 255, 0.28) !important;
    border-radius: 14px !important;
    z-index: 9150 !important;
    width: auto !important;
    max-width: none !important;
  }
  #gameContainer #gameTable .pile,
  #gameContainer #gameTable .pile.deck,
  #gameContainer #gameTable .pile.discard,
  #gameContainer #gameTable .discard-card {
    width: 52px !important;
    height: 74px !important;
    min-width: 52px !important;
    min-height: 74px !important;
    flex: 0 0 52px !important;
  }

  /* ZONE MELDS : large, à droite des piles, centrée dans l'espace restant */
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging {
    top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    bottom: calc(var(--rami-actionbar-h, 74px) + var(--rami-bottom-h, 118px) + 6px) !important;
    left: 150px !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    align-content: center !important;
    gap: 10px !important;
  }

  /* MAIN : plus grande, proche des boutons (le creux de l'arc dégage juste les boutons) */
  #gameContainer #gameTable:not(.hidden) #playerBottom.player-seat.bottom {
    position: fixed !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--rami-actionbar-h, 74px) + 20px) !important;
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    padding: 2px 6px 4px 6px !important;
    z-index: 9400 !important;
  }
  #gameContainer #gameTable #handFan {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    align-items: flex-end !important;
    padding-top: 26px !important;   /* espace pour le haut de l'arc + carte sélectionnée */
    overflow: visible !important;
  }
  #gameContainer #gameTable #handFan .card,
  #gameContainer #gameTable #handFan .hand-card {
    width: 62px !important;
    height: 88px !important;
    min-width: 62px !important;
    min-height: 88px !important;
    max-width: 62px !important;
    max-height: 88px !important;
    margin-right: -14px !important;
  }
}

/* PORTRAIT coarse : piles centrées en haut, melds dessous, main en bas collée */
@media (orientation: portrait) and (pointer: coarse),
       (orientation: portrait) and (max-width: 1024px) {
  #gameContainer #gameTable .piles-area {
    position: static !important;
    margin: 8px auto 6px auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    width: fit-content !important;
  }
  #gameContainer #gameTable .pile,
  #gameContainer #gameTable .pile.deck,
  #gameContainer #gameTable .pile.discard,
  #gameContainer #gameTable .discard-card {
    width: 60px !important;
    height: 84px !important;
    min-width: 60px !important;
    min-height: 84px !important;
  }
  #gameContainer #gameTable:not(.hidden) #playerBottom.player-seat.bottom {
    bottom: calc(var(--rami-actionbar-h, 74px) + 1px) !important;
  }
}

/* ============================================================
   V70 — ICÔNES + AJUSTEMENTS FINAUX
   ============================================================ */

/* Dos de carte : emblème doré net (remplace le 🂠 qui s'affiche en carré) */
.card-back { position: relative; }
.card-back::before {
  content: '' !important;
}
.card-back::after {
  content: '❖';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  color: rgba(255, 214, 10, 0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Compteur de pioche : pastille dorée nette */
.pile-counter {
  bottom: -12px !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* Défausse vide : icône ♻ discrète au lieu du texte brut */
.discard-card:empty::before,
.pile.discard .discard-card:empty::before {
  content: '🂠';
  font-size: 22px;
  color: rgba(233, 213, 255, 0.4);
}

/* Boutons header : icônes cloche/menu plus lisibles */
#btnTurnAlerts, #btnMainMenu {
  font-size: 15px !important;
}

/* Melds paysage : laisser la place à la main de 130px (évite tout chevauchement) */
@media (orientation: landscape) and (pointer: coarse),
       (orientation: landscape) and (max-width: 1400px) {
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-melds,
  body:not(.home-screen-visible) #mobilePlayedMeldsFloating.has-staging {
    bottom: calc(var(--rami-actionbar-h, 72px) + 142px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   V71 — LAYOUT PAYSAGE basé sur la HAUTEUR (pas la largeur).
   Cible tout écran paysage "court" (téléphone/tablette),
   même > 1400px de large. 3 ids pour battre mobile_styles.
   ============================================================ */
@media (orientation: landscape) and (max-height: 950px),
       (orientation: landscape) and (pointer: coarse) {

  /* DOCK de la main : compact et COLLÉ aux boutons */
  #gameContainer #gameTable:not(.hidden) #playerBottom.player-seat.bottom,
  #gameContainer #playerBottom.player-seat.bottom {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--rami-actionbar-h, 72px) + 8px) !important;
    top: auto !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    padding: 2px 8px 4px 8px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: visible !important;
    z-index: 9400 !important;
    box-sizing: border-box !important;
  }

  /* Le label "Toi (n)" compact en haut du dock */
  #gameContainer #playerBottom .player-info {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 16px !important;
    font-size: 11px !important;
  }

  /* La main occupe le dock, cartes alignées en bas, arc visible */
  #gameContainer #gameTable #handFan,
  #gameContainer #handFan {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 30px 8px 4px 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Taille des cartes en main (assez grandes, elles se chevauchent) */
  #gameContainer #gameTable #handFan .card,
  #gameContainer #gameTable #handFan .hand-card {
    width: 60px !important;
    height: 84px !important;
    min-width: 60px !important;
    min-height: 84px !important;
    max-width: 60px !important;
    max-height: 84px !important;
    margin-right: -14px !important;
  }
  #gameContainer #gameTable #handFan .card:last-child,
  #gameContainer #gameTable #handFan .hand-card:last-child {
    margin-right: 0 !important;
  }

  /* PILES pioche+défausse : panneau visible en haut à gauche, sous le menu */
  #gameContainer #gameTable .center-zone { display: block !important; padding: 0 !important; }
  #gameContainer #gameTable .piles-area {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    padding: 8px 14px !important;
    background: rgba(45, 10, 78, 0.5) !important;
    border: 1px solid rgba(200, 150, 255, 0.28) !important;
    border-radius: 14px !important;
    z-index: 9150 !important;
    width: auto !important;
    max-width: none !important;
  }
  #gameContainer #gameTable .pile,
  #gameContainer #gameTable .pile.deck,
  #gameContainer #gameTable .pile.discard,
  #gameContainer #gameTable .discard-card {
    width: 56px !important;
    height: 78px !important;
    min-width: 56px !important;
    min-height: 78px !important;
    flex: 0 0 56px !important;
  }

  /* ZONE MELDS : grande, à droite des piles, au-dessus de la main */
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    bottom: calc(var(--rami-actionbar-h, 72px) + 166px + env(safe-area-inset-bottom, 0px)) !important;
    left: 190px !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    z-index: 9100 !important;
  }
}

/* ============================================================
   V72 — PILES TOUJOURS VISIBLES + COMPACT iPhone paysage
   ============================================================ */

/* Piles pioche/défausse AU PREMIER PLAN : z-index au-dessus du dock (9400)
   → elles restent visibles même si le dock monte haut. */
@media (orientation: landscape) and (max-height: 950px),
       (orientation: landscape) and (pointer: coarse) {
  #gameContainer #gameTable .piles-area {
    z-index: 9600 !important;
  }
  /* Melds au-dessus du dock aussi, mais sous les piles */
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging {
    z-index: 9550 !important;
  }
}

/* iPhone paysage (écran court) : TOUT se compacte pour que
   header + piles + melds + main + boutons tiennent sans chevauchement. */
@media (orientation: landscape) and (max-height: 520px) {

  #gameContainer #gameTable:not(.hidden) #playerBottom.player-seat.bottom,
  #gameContainer #playerBottom.player-seat.bottom {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    bottom: calc(var(--rami-actionbar-h, 64px) + 16px) !important;
    padding: 2px 6px 2px 6px !important;
  }

  #gameContainer #gameTable #handFan,
  #gameContainer #handFan {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    padding: 16px 6px 2px 6px !important;
  }

  #gameContainer #gameTable #handFan .card,
  #gameContainer #gameTable #handFan .hand-card {
    width: 50px !important;
    height: 70px !important;
    min-width: 50px !important;
    min-height: 70px !important;
    max-width: 50px !important;
    max-height: 70px !important;
    margin-right: -11px !important;
  }

  /* Piles compactes en haut à gauche, bien visibles */
  #gameContainer #gameTable .piles-area {
    top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    gap: 10px !important;
    padding: 5px 10px !important;
  }
  #gameContainer #gameTable .pile,
  #gameContainer #gameTable .pile.deck,
  #gameContainer #gameTable .pile.discard,
  #gameContainer #gameTable .discard-card {
    width: 44px !important;
    height: 62px !important;
    min-width: 44px !important;
    min-height: 62px !important;
    flex: 0 0 44px !important;
  }

  /* Melds : rangée compacte en haut, à droite des piles */
  body #mobilePlayedMeldsFloating.has-melds,
  body #mobilePlayedMeldsFloating.has-staging {
    top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    bottom: calc(var(--rami-actionbar-h, 64px) + 142px + env(safe-area-inset-bottom, 0px)) !important;
    left: 150px !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    gap: 6px !important;
  }
  body #mobilePlayedMeldsFloating.has-melds .meld .card {
    width: 30px !important;
    height: 42px !important;
    min-width: 30px !important;
    min-height: 42px !important;
    max-width: 30px !important;
    max-height: 42px !important;
  }

  /* Label "Toi (n)" mini */
  #gameContainer #playerBottom .player-info {
    height: 14px !important;
    min-height: 14px !important;
    line-height: 14px !important;
    font-size: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ============================================================
   V73 — SUPPRESSION DU CADRE autour de la main
   Les cartes flottent librement (pas de "bloc carré"),
   ça libère de la place et c'est plus propre.
   ============================================================ */
@media (orientation: landscape) and (max-height: 950px),
       (orientation: landscape) and (pointer: coarse),
       (pointer: coarse) {

  #gameContainer #gameTable:not(.hidden) #playerBottom.player-seat.bottom,
  #gameContainer #playerBottom.player-seat.bottom,
  #playerBottom.player-seat.bottom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
  }

  /* Le label "Toi (n)" : petite étiquette flottante, discrète */
  #gameContainer #playerBottom .player-info,
  #playerBottom .player-info {
    background: rgba(26, 5, 51, 0.55) !important;
    border-radius: 10px !important;
    padding: 1px 10px !important;
    width: fit-content !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
  }
}