/* =============================================================================
   responsive.css — SEUL fichier responsive (ex mobile.css + ancien responsive.css fusionnés en V0.98.2)
   HarvestRush: Farm Tycoon
   Plan :  0. PC (> 1024px)           1. Téléphone / tablette (≤ 1024px) : drawer, HUD, fenêtres, tiroirs latéraux
           2. Très petits écrans (≤ 480px)
           A-E. Paliers PC / tablette / portrait étroit / paysage, commandes tactiles (js/touch.js), accueil
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. RÈGLE D'OR : Strictement invisible sur PC / Écrans larges (> 1024px)
   ----------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #mobile-top-bar,
  #mobile-nav-bar,
  #btn-toggle-sidebar,
  #sidebar-backdrop,
  #sidebar-close-btn,
  #floating-bonus-toggle,
  #bonus-backdrop,
  #sidebar-edge-tab,
  #giant-crop-edge-tab,
  .mobile-only {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------------
   1. TABLETTES ET MOBILES (Largeur <= 1024px)
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  :root {
    --safe-top: env(safe-area-inset-top, 10px);
    --safe-bottom: env(safe-area-inset-bottom, 10px);
    --safe-left: env(safe-area-inset-left, 10px);
    --safe-right: env(safe-area-inset-right, 10px);
    --pub-slide-width: min(66vw, 240px);   /* tiroir Pub */
    --drawer-w: min(78vw, 290px);          /* tiroir Culture Géante */
    --drawer-top: calc(var(--safe-top) + 122px); /* hauteur d'accroche commune des tiroirs latéraux */
  }

  body {
    overflow: hidden;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }

  /* --- ÉCRAN D'ACCUEIL --- */
  #start-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #0f172a !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  #start-screen[style*="display: none"],
  #start-screen[style*="display:none"],
  #start-screen.hidden {
    display: none !important;
  }

  #start-screen .start-card {
    width: min(92vw, 440px) !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85) !important;
  }

  #fps-ram-counter,
  #debug-audio-daynight {
    display: none !important;
  }

  /* --- ÉCRAN DE JEU --- */
  #canvas-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* --- BARRE D'XP REMONTÉE --- */
  #minecraft-xp-container {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--safe-bottom) + 52px) !important;
    width: min(88vw, 360px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    z-index: 850 !important;
    pointer-events: none !important;
  }

  #minecraft-xp-container > * {
    pointer-events: none !important;
  }

  #xp-bar-bg {
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Frénésie de combo : voir aussi #badge-stack (touch-ui) plus bas */
  #combo-badge { pointer-events: none !important; }

  /* --- RACCOURCIS RAPIDES VERTICAUX SANS FOND (GAUCHE) --- */
  #mobile-nav-bar {
    position: fixed !important;
    bottom: calc(var(--safe-bottom) + 110px) !important;
    left: var(--safe-left) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 800 !important;
    pointer-events: auto !important;
    padding: 0 !important;
  }

  .btn-mobile-shop {
    display: none !important;
  }

  .mobile-shortcuts-cluster {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .btn-mobile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.9rem !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.15s, transform 0.15s;
  }

  .btn-mobile-icon:active {
    background: rgba(56, 189, 248, 0.3);
    transform: scale(0.9);
  }

  .btn-mobile-icon.btn-lb { border-color: rgba(250, 204, 21, 0.4); }
  .btn-mobile-icon.btn-wardrobe { border-color: rgba(192, 132, 252, 0.4); }
  .btn-mobile-icon.btn-stats { border-color: rgba(56, 189, 248, 0.4); }
  .btn-mobile-icon.btn-settings { border-color: rgba(148, 163, 184, 0.4); }

  /* =========================================================================
     TIROIRS LATÉRAUX (Pub à gauche · Culture Géante et menu de droite à droite)
     Même langage : panneau sombre à bordure colorée, en-tête avec titre + ✕,
     voile commun, fermeture au toucher à côté / au glissement / sur ✕.
     ========================================================================= */
  #bonus-backdrop,
  #sidebar-backdrop,
  #giant-crops-backdrop {
    position: fixed; inset: 0; background: rgba(2, 6, 23, 0.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
  }
  #bonus-backdrop { z-index: 1250; }
  #giant-crops-backdrop { z-index: 2090; }
  #sidebar-backdrop { z-index: 1999; }
  #bonus-backdrop.active,
  #sidebar-backdrop.active,
  #giant-crops-backdrop.active { opacity: 1; pointer-events: auto; }

  /* En-tête commun des tiroirs Pub et Culture Géante */
  .fbm-head,
  .gc-drawer-head {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 -10px 4px; padding: 12px 12px 10px 14px;
    background: #0f172a; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 900; font-size: 0.95rem; letter-spacing: 0.4px;
  }
  .fbm-head { color: #facc15; border-bottom-color: rgba(250, 204, 21, 0.25); }
  .gc-drawer-head { color: #d8b4fe; border-bottom-color: rgba(168, 85, 247, 0.3); padding-right: 52px; }
  .fbm-head .modal-close-btn { width: 34px; height: 34px; }
  .fbm-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .fbm-titles small { font-size: 0.7rem; font-weight: 700; color: #94a3b8; letter-spacing: 0; }

  /* --- PUB : bouton-onglet + tiroir à gauche --- */
  #floating-bonus-toggle {
    position: fixed !important;
    top: var(--drawer-top) !important;
    left: 0 !important;
    transform: translateX(0);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: #0f172a !important; color: #facc15 !important;
    border: 2px solid rgba(250, 204, 21, 0.7) !important; border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 9px 11px !important; min-height: 38px;
    font-weight: 900 !important; font-size: 0.78rem !important; letter-spacing: 0.8px !important;
    cursor: pointer !important; box-shadow: 4px 2px 14px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important; user-select: none !important; touch-action: manipulation !important;
    pointer-events: auto !important; z-index: 1350 !important;
  }
  /* quand le tiroir est ouvert, l'onglet reste collé à son bord et sert aussi de fermeture */
  #floating-bonus-toggle.mobile-open { opacity: 0 !important; pointer-events: none !important; }

  #floating-bonus-menu {
    position: fixed !important;
    top: var(--drawer-top) !important; left: 0 !important;
    width: var(--pub-slide-width) !important;
    max-height: calc(100dvh - var(--drawer-top) - var(--safe-bottom) - 16px) !important;
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important; pointer-events: none !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s !important;
    z-index: 1300 !important;
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    padding: 0 10px 12px !important; box-sizing: border-box;
    background: linear-gradient(180deg, #131a2e, #0b1020) !important;
    border: 2px solid rgba(250, 204, 21, 0.6) !important; border-left: none !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.65) !important;
  }
  #floating-bonus-menu.mobile-open { transform: translateX(0%) !important; visibility: visible !important; pointer-events: auto !important; }

  /* Carte de bonus : pastille emoji · nom · état (pastille colorée) · bulle « i » à droite */
  #floating-bonus-menu .fbm-item { display: block; position: relative; }
  #floating-bonus-menu .btn-bonus {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: center;
    width: 100% !important; height: auto !important; min-height: 66px !important; max-height: none !important;
    position: relative !important; overflow: hidden !important; box-sizing: border-box !important;
    padding: 10px 46px 10px 10px !important; border-radius: 14px !important; border-width: 1.5px !important; border-style: solid !important;
    background: rgba(30, 41, 59, 0.85) !important;
    text-align: left; touch-action: manipulation !important; cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }
  #floating-bonus-menu .btn-bonus { border-color: rgba(255, 255, 255, 0.14); }
  #floating-bonus-menu .btn-bonus.ad-ready { border-color: #facc15; }
  #floating-bonus-menu .btn-bonus.ad-cooling { border-color: #38bdf8; }
  #floating-bonus-menu .btn-bonus.ad-active { border-color: #4ade80; }
  #floating-bonus-menu .btn-bonus:active { transform: scale(0.98) !important; background: rgba(51, 65, 85, 0.95) !important; }
  #floating-bonus-menu .btn-bonus > div { position: relative !important; inset: auto !important; transform: none !important; margin: 0 !important; }
  #floating-bonus-menu .btn-bonus > div:first-child {
    grid-column: 1; grid-row: 1 / span 2;
    width: 46px; height: 46px; display: grid; place-items: center;
    font-size: 1.6rem !important; line-height: 1;
    background: rgba(255, 255, 255, 0.07); border-radius: 12px;
  }
  #floating-bonus-menu .btn-bonus > div:nth-child(2) { grid-column: 2; font-size: 0.9rem !important; font-weight: 800 !important; color: #f1f5f9; text-align: left; align-self: end; }
  /* état : pastille « Pub (15m) » (prêt) · « ⏳ 3:20 » (recharge) · « 12:30 » (bonus actif) */
  #floating-bonus-menu .btn-bonus > div[id^="timer-"] {
    grid-column: 2; justify-self: start; align-self: start;
    font-size: 0.7rem !important; font-weight: 800; padding: 2px 9px; border-radius: 99px;
    color: #facc15 !important; background: rgba(250, 204, 21, 0.14); border: 1px solid rgba(250, 204, 21, 0.45);
  }
  #floating-bonus-menu .btn-bonus.ad-cooling > div[id^="timer-"] { color: #7dd3fc !important; background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.5); }
  #floating-bonus-menu .btn-bonus.ad-active > div[id^="timer-"] { color: #86efac !important; background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.5); }
  /* la description complète est derrière la bulle « i » (voir js/tips.js) */
  #floating-bonus-menu .tip-i { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }

  /* Onglet PUB : pastille verte = nombre de bonus prêts */
  #floating-bonus-toggle[data-ready]:not([data-ready="0"])::after {
    content: attr(data-ready);
    position: absolute; top: -8px; right: -8px;
    min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: 10px;
    display: grid; place-items: center;
    background: #22c55e; color: #052e16; border: 2px solid #0f172a;
    font-size: 0.68rem; font-weight: 900; letter-spacing: 0;
  }
  #floating-bonus-toggle.mobile-open[data-ready]::after { display: none; }

  /* --- CULTURE GÉANTE : onglet violet (visible seulement quand une culture est là) + tiroir à droite --- */
  #giant-crop-edge-tab {
    position: fixed !important;
    top: var(--drawer-top) !important; right: 0 !important;
    transform: translateX(120%) scale(0.8) !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 2px solid #a855f7 !important; border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    padding: 10px 5px !important; min-width: 28px;
    display: flex !important; flex-direction: column !important; align-items: center !important;
    z-index: 1060 !important; cursor: pointer !important;
    box-shadow: -4px 0 16px rgba(168, 85, 247, 0.5) !important;
    pointer-events: auto !important; user-select: none !important;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease !important;
    opacity: 0 !important; visibility: hidden !important;
  }
  #giant-crop-edge-tab.visible { transform: translateX(0%) scale(1) !important; opacity: 1 !important; visibility: visible !important; animation: giantTabGlow 2s infinite ease-in-out; }
  @keyframes giantTabGlow {
    0% { box-shadow: -4px 0 14px rgba(168, 85, 247, 0.4); }
    50% { box-shadow: -4px 0 24px rgba(168, 85, 247, 0.8); border-color: #c084fc; }
    100% { box-shadow: -4px 0 14px rgba(168, 85, 247, 0.4); }
  }
  #giant-crop-edge-tab .giant-text {
    color: #d8b4fe !important; font-weight: 900 !important; font-size: 0.55rem !important;
    writing-mode: vertical-rl !important; text-orientation: upright !important; text-align: center !important;
    letter-spacing: 0.5px !important; text-transform: uppercase !important;
  }
  #giant-crop-edge-tab:active { transform: scale(0.95) !important; }

  #giant-crops-hud-container {
    position: fixed !important;
    top: var(--drawer-top) !important; right: 0 !important;
    width: var(--drawer-w) !important;
    max-height: calc(100dvh - var(--drawer-top) - var(--safe-bottom) - 16px) !important;
    background: linear-gradient(180deg, #1a1530, #0b1020) !important;
    border: 2px solid #a855f7 !important; border-right: none !important;
    border-radius: 18px 0 0 18px !important;
    z-index: 2100 !important;
    transform: translateX(105%) !important; visibility: hidden !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s !important;
    padding: 0 10px 12px !important; box-sizing: border-box !important;
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    display: flex !important; flex-direction: column !important; gap: 10px !important;
    pointer-events: auto !important; box-shadow: -8px 4px 30px rgba(0, 0, 0, 0.7) !important;
  }
  #giant-crops-hud-container.mobile-open { transform: translateX(0%) !important; visibility: visible !important; }
  #giant-crops-close {
    display: none !important;
    position: fixed; z-index: 2101;
    top: calc(var(--drawer-top) + 8px); right: 10px;
    width: 34px; height: 34px; touch-action: manipulation;
  }
  #giant-crops-close.active { display: flex !important; }

  /* Cartes toujours dépliées dans le tiroir (la version repliée glissait hors de l'écran) */
  #giant-crops-hud-container .giant-crop-hud-card { width: 100% !important; box-sizing: border-box; cursor: default; }
  #giant-crops-hud-container .giant-crop-hud-card.is-collapsed { transform: none !important; box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3); }
  #giant-crops-hud-container .giant-crop-hud-card.is-collapsed .giant-crop-card-content { opacity: 1 !important; pointer-events: auto !important; }
  #giant-crops-hud-container .giant-collapse-indicator { display: none !important; }
  #giant-crops-hud-container .giant-crop-card-content > div { font-size: 0.85rem !important; }
  .gc-hp { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: -2px 0 10px; }
  .gc-hp > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ef4444, #f97316); transition: width 0.4s ease; }

  /* --- POIGNÉE DU MENU DE DROITE : un simple toucher l'ouvre (bord droit, milieu de l'écran) --- */
  #sidebar-edge-tab {
    position: fixed !important;
    top: 50% !important; right: 0 !important;
    transform: translateY(-50%) !important;
    width: 34px !important; height: 96px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 2px solid rgba(56, 189, 248, 0.75) !important; border-right: none !important;
    border-radius: 14px 0 0 14px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important;
    z-index: 1050 !important; cursor: pointer !important;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.6) !important;
    touch-action: manipulation !important; pointer-events: auto !important;
    user-select: none !important; -webkit-user-select: none !important; -webkit-tap-highlight-color: transparent;
    transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
  }
  #sidebar-edge-tab:active { background: rgba(30, 58, 95, 0.95) !important; }
  #sidebar-edge-tab .edge-pill { width: 4px; height: 28px; background: #38bdf8; border-radius: 2px; box-shadow: 0 0 10px rgba(56, 189, 248, 0.9); }
  #sidebar-edge-tab .edge-arrow { font-size: 0.8rem; color: #7dd3fc; line-height: 1; animation: edgeNudge 2.2s ease-in-out infinite; }
  @keyframes edgeNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
  #sidebar.mobile-open ~ #sidebar-edge-tab { opacity: 0 !important; pointer-events: none !important; }

  /* --- MENU DE DROITE (#sidebar) : tiroir large (pas tout l'écran), en-tête fixe, onglets défilables --- */
  #sidebar {
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: min(92vw, 440px) !important; max-width: 92vw !important; height: 100dvh !important;
    background: linear-gradient(180deg, #131a2e, #0b1020) !important;
    border-left: 2px solid rgba(56, 189, 248, 0.7) !important;
    border-radius: 18px 0 0 18px;
    z-index: 2000 !important;
    transform: translate3d(105%, 0, 0) !important;
    will-change: transform;
    transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8) !important;
    display: flex !important; flex-direction: column !important;
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch !important;
    padding: 0 14px calc(var(--safe-bottom) + 14px) 14px !important;
    pointer-events: none !important;
  }
  #sidebar.mobile-open { transform: translate3d(0, 0, 0) !important; pointer-events: auto !important; }
  #sidebar:not(.mobile-open) { box-shadow: none !important; }

  #sidebar-close-btn {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 -14px 10px; padding: calc(var(--safe-top) + 12px) 14px 10px;
    background: #0f172a; border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  }
  #sidebar-close-btn .title { font-size: 1.05rem; font-weight: 900; color: #38bdf8; }
  #sidebar-close-btn .modal-close-btn { width: 34px; height: 34px; font-size: 1.05rem; }

  /* Onglets : faciles à toucher, défilent à l'horizontale si l'écran est étroit */
  #sidebar #tabs-nav { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  #sidebar #tabs-nav::-webkit-scrollbar { display: none; }
  #sidebar .tab-btn { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 10px 5px; font-size: 0.7rem; white-space: nowrap; scroll-snap-align: center; }
  #sidebar .buy-mode-btn { min-height: 36px; font-size: 0.82rem; }
  /* alignements : un seul retrait latéral, boutons centrés verticalement, pas de grosses marges sous les textes */
  #sidebar > * { flex-shrink: 0; }
  #sidebar .badge-lock { white-space: nowrap; flex: none; margin-left: 8px; }
  #sidebar #tabs-content { padding: 12px 0 4px; gap: 8px; overflow-y: visible; flex: none; }
  #sidebar .tab-panel { gap: 8px; }
  #sidebar .card { padding: 12px; }
  #sidebar .card .btn { min-height: 44px; align-items: center; }

  /* --- HUD SUPÉRIEUR (grille compacte : 4 colonnes téléphone, voir aussi les paliers plus bas) --- */
  #hud,
  .top-hud,
  #top-bar {
    position: fixed;
    top: var(--safe-top);
    left: var(--safe-left);
    right: var(--safe-right);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    max-width: 100vw;
    z-index: 850;
    pointer-events: none;
  }
  #hud {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px !important;
    flex-wrap: unset !important;
    justify-content: stretch !important;
    top: max(var(--safe-top), 6px) !important;
  }

  #hud > *,
  .top-hud > *,
  #top-bar > * {
    pointer-events: auto;
  }

  .resource-card,
  .hud-pill {
    padding: 4px 8px !important;
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
    gap: 4px !important;
    border-radius: 10px !important;
  }

  .resource-card span,
  .hud-pill span {
    font-weight: 800;
  }

  #btn-quick-sell {
    padding: 4px 10px !important;
    font-size: clamp(0.7rem, 2vw, 0.82rem) !important;
    min-height: 32px;
  }

  /* --- ADAPTATION DES MODALES --- */
  /* Pas de z-index forcé ici : js/modalstack.js donne à chaque fenêtre ouverte le rang suivant (la dernière ouverte passe devant) */
  .modal-overlay,
  #stats-overlay,
  #achievements-overlay,
  #wardrobe-modal-overlay,
  #prestige-modal-overlay,
  #settings-overlay,
  #offline-modal-overlay {
    padding: 10px !important;
  }

  .modal-box,
  .settings-modal,
  .stats-modal-content,
  .wardrobe-modal-content {
    width: 96vw !important;
    max-width: 550px !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* --- TOASTS & NOTIFICATIONS : sous le HUD, jamais devant --- */
  #toast-container {
    position: fixed !important;
    top: calc(var(--safe-top) + 92px) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 400px !important;
    z-index: 20000 !important;   /* les notifications passent devant tout */
  }

  .toast {
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
  }

  /* --- Classement et Social : mêmes dimensions que les autres fenêtres (pas de plein écran) --- */
  body #leaderboard-overlay,
  body #social-overlay { padding: 10px !important; align-items: center !important; justify-content: center !important; }
  body #leaderboard-overlay .lb2-card,
  body #social-overlay .soc-card {
    width: 96vw; max-width: 550px; height: min(720px, 88dvh); max-height: 88dvh;
    border-radius: 16px; border-width: 2px; box-sizing: border-box;
  }
  body #leaderboard-overlay .lb2-card { padding: 14px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* clavier ouvert : la fenêtre se cale sur la zone réellement visible (--vv-top / --vv-h posés par js/touch.js) */
  body #social-overlay,
  body #leaderboard-overlay { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100dvh); box-sizing: border-box; }
  body #leaderboard-overlay .lb2-card,
  body #social-overlay .soc-card { height: min(720px, 100%); max-height: 100%; }

  /* --- BOUTONS D'ACHAT TACTILES --- */
  .btn,
  .buy-mode-btn,
  .tab-btn {
    min-height: 38px;
    touch-action: manipulation;
  }
}

/* -----------------------------------------------------------------------------
   2. TRÈS PETITS SMARTPHONES (Largeur <= 480px)
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
  #mobile-nav-bar {
    bottom: calc(var(--safe-bottom) + 90px);
  }
}

/* -----------------------------------------------------------------------------
   A. PC (> 1024px) : le HUD ne doit jamais passer sous le badge « En ligne » ni sous la boutique
   ----------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #hud { max-width: calc(100vw - 440px - 190px); }
  .hud-card { padding: 8px 13px; }
}
@media (min-width: 1025px) and (max-width: 1499px) {
  .hud-card, #btn-quick-sell { padding: 7px 11px; font-size: 0.9rem; }
  #floating-bonus-menu { top: 128px; }        /* le HUD peut passer sur 2 lignes */
  #giant-crops-hud-container { top: 128px; }
}
@media (min-width: 1025px) and (max-height: 700px) {
  #floating-bonus-menu { gap: 6px; transform-origin: top left; }
  #floating-bonus-menu .btn-bonus { transform: scale(0.85); transform-origin: left top; margin-bottom: -10px; }
}
@media (min-width: 2200px) {
  html { font-size: 17px; }                 /* écrans 2K/4K : on agrandit légèrement l'interface */
}

/* -----------------------------------------------------------------------------
   B. Tablette / téléphone (≤ 1024px) : HUD en grille compacte au lieu d'une ligne qui déborde
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #hud { right: calc(var(--safe-right) + 0px) !important; }
  .hud-card {
    min-width: 0; justify-content: center;
    padding: 5px 6px !important;
    font-size: clamp(0.68rem, 2.7vw, 0.9rem) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 10px !important; gap: 4px !important;
  }
  .hud-card .tooltip { display: none !important; }     /* pas de survol au doigt */
  #btn-quick-sell { grid-column: span 2; min-height: 34px; justify-content: center; padding: 5px 8px !important; }
  #btn-quick-sell .tooltip { display: none !important; }

  /* badge « En ligne » : sous le HUD, à droite, plus petit */
  #online-container {
    right: calc(var(--safe-right) + 6px) !important;
    top: calc(var(--safe-top) + 78px) !important;
    transform: scale(0.88); transform-origin: top right;
  }
}

/* Tablette : tout tient sur une ligne */
@media (min-width: 700px) and (max-width: 1024px) {
  #hud { grid-template-columns: repeat(6, minmax(0, 1fr)) 1.5fr; }
  #btn-quick-sell { grid-column: span 1; }
  .hud-card { font-size: clamp(0.8rem, 1.7vw, 0.95rem) !important; padding: 7px 8px !important; }
  #online-container { top: calc(var(--safe-top) + 54px) !important; }
  body #toast-container { top: calc(var(--safe-top) + 62px) !important; }
}

/* Téléphone portrait étroit */
@media (max-width: 380px) {
  .hud-card { font-size: 0.66rem !important; padding: 4px 4px !important; gap: 2px !important; }
}

/* -----------------------------------------------------------------------------
   C. Téléphone en PAYSAGE (hauteur ≤ 500px) : on libère la hauteur
   ----------------------------------------------------------------------------- */
@media (max-height: 500px) and (max-width: 1024px) {
  #hud { grid-template-columns: repeat(6, minmax(0, 1fr)) 1.5fr; gap: 4px !important; }
  #btn-quick-sell { grid-column: span 1; }
  .hud-card { padding: 3px 5px !important; font-size: 0.72rem !important; }
  #online-container { top: calc(var(--safe-top) + 40px) !important; right: calc(var(--safe-right) + 56px) !important; }
  /* raccourcis : rangée horizontale en haut à gauche, sous le HUD (le bas est réservé au joystick) */
  #mobile-nav-bar {
    top: calc(var(--safe-top) + 40px) !important; bottom: auto !important; left: calc(var(--safe-left) + 4px) !important;
  }
  #mobile-nav-bar .mobile-shortcuts-cluster { flex-direction: row !important; gap: 6px !important; }
  :root { --drawer-top: calc(var(--safe-top) + 92px); }   /* tiroirs latéraux plus hauts en paysage */
  #minecraft-xp-container { bottom: calc(var(--safe-bottom) + 6px) !important; width: min(40vw, 300px) !important; }
  body #toast-container { top: calc(var(--safe-top) + 48px) !important; }
  .modal-box, .settings-modal, .stats-modal-content, .wardrobe-modal-content { max-height: 94dvh !important; }
}

/* -----------------------------------------------------------------------------
   D. COMMANDES TACTILES (js/touch.js) : visibles seulement en partie, sur appareil tactile
   ----------------------------------------------------------------------------- */
#touch-controls { display: none; }
body.touch-ui.session-active #touch-controls { display: block; }

#tc-zone {
  position: fixed; left: 0; top: max(96px, 42dvh); bottom: 0; width: 52%;   /* moitié basse-gauche : le haut reste libre pour les notifications */
  z-index: 700; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#tc-ghost, #tc-stick {
  position: fixed; pointer-events: none; z-index: 710;
  width: calc(112px * var(--tc-scale, 1)); height: calc(112px * var(--tc-scale, 1));
  transform: translate(-50%, -50%);
}
#tc-ghost { left: calc(var(--safe-left, 10px) + 14px + 56px * var(--tc-scale, 1)); bottom: calc(var(--safe-bottom, 10px) + 70px); top: auto; transform: translate(0, 0); opacity: 0.35; transition: opacity .2s; }
body.touch-ui:has(#tc-stick.on) #tc-ghost { opacity: 0; }
#tc-stick { display: none; }
#tc-stick.on { display: block; }
.tc-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 2px solid rgba(255,255,255,0.45);
  box-shadow: 0 0 18px rgba(0,0,0,0.35), inset 0 0 14px rgba(255,255,255,0.12);
}
#tc-knob {
  position: absolute; left: 50%; top: 50%;
  width: calc(54px * var(--tc-scale, 1)); height: calc(54px * var(--tc-scale, 1));
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #cbd5e1 55%, #94a3b8 100%);
  border: 2px solid rgba(15,23,42,0.35); box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

#tc-actions {
  position: fixed; z-index: 840; pointer-events: none;
  right: calc(var(--safe-right, 10px) + 10px); bottom: calc(var(--safe-bottom, 10px) + 64px);
  width: calc(210px * var(--tc-scale, 1)); height: calc(190px * var(--tc-scale, 1));
}
#tc-actions button {
  position: absolute; pointer-events: auto; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  color: #fff; font-weight: 900; line-height: 1;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,255,255,0.28);
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
#tc-actions button.down { transform: scale(0.93); filter: brightness(1.2); box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 22px rgba(255,255,255,0.45); }
#tc-harvest {
  right: 0; bottom: 0;
  width: calc(94px * var(--tc-scale, 1)); height: calc(94px * var(--tc-scale, 1));
  background: radial-gradient(circle at 35% 28%, #86efac, #22c55e 55%, #15803d); border: 3px solid #bbf7d0;
}
#tc-harvest .tc-ico { font-size: calc(2.2rem * var(--tc-scale, 1)); }
#tc-sell {
  right: calc(104px * var(--tc-scale, 1)); bottom: calc(10px * var(--tc-scale, 1));
  width: calc(64px * var(--tc-scale, 1)); height: calc(64px * var(--tc-scale, 1));
  background: radial-gradient(circle at 35% 28%, #fcd34d, #f59e0b 60%, #b45309); border: 3px solid #fde68a;
}
#tc-sell .tc-ico { font-size: calc(1.35rem * var(--tc-scale, 1)); }
#tc-sell .tc-val { font-size: calc(0.6rem * var(--tc-scale, 1)); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#tc-sprint {
  right: calc(30px * var(--tc-scale, 1)); bottom: calc(108px * var(--tc-scale, 1));
  width: calc(54px * var(--tc-scale, 1)); height: calc(54px * var(--tc-scale, 1));
  background: radial-gradient(circle at 35% 28%, #7dd3fc, #0ea5e9 60%, #0369a1); border: 3px solid #bae6fd; opacity: .9;
}
#tc-sprint .tc-ico { font-size: calc(1.3rem * var(--tc-scale, 1)); }
#tc-sprint.on { outline: 3px solid #fde047; opacity: 1; box-shadow: 0 0 18px rgba(253,224,71,.85); }

/* En mode tactile, la vente se fait avec le gros bouton : on retire celui du HUD et on réorganise */
body.touch-ui #btn-quick-sell { display: none !important; }
@media (max-width: 1024px) {
  body.touch-ui #hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1024px), (max-height: 500px) and (max-width: 1024px) {
  body.touch-ui #hud { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* barre d'XP : au ras du bas, entre le joystick et les boutons */
@media (max-width: 1024px) {
  body.touch-ui #minecraft-xp-container { bottom: calc(var(--safe-bottom) + 8px) !important; width: min(46vw, 300px) !important; }
}
/* PC avec écran tactile (boutique visible à droite) : les boutons restent dans la zone de jeu */
@media (min-width: 1025px) {
  body.touch-ui #tc-actions { right: calc(440px + 14px); }
  body.touch-ui #tc-zone { top: 140px; }
}
/* Tiroir boutique ouvert / modales : on cache les boutons d'action */
body:has(#sidebar.mobile-open) #tc-actions,
body:has(#sidebar.mobile-open) #tc-zone,
body:has(#sidebar.mobile-open) #tc-ghost { display: none; }
body:has(#settings-overlay[style*="flex"]) #tc-actions,
body:has(#stats-overlay[style*="flex"]) #tc-actions,
body:has(#inventory-modal-overlay[style*="flex"]) #tc-actions,
body:has(#wardrobe-modal-overlay[style*="flex"]) #tc-actions,
body:has(#achievements-overlay[style*="flex"]) #tc-actions,
body:has(#social-overlay[style*="flex"]) #tc-actions,
body:has(#prestige-modal-overlay[style*="flex"]) #tc-actions,
body:has(#leaderboard-overlay[style*="flex"]) #tc-actions { display: none; }

/* Joystick / boutons : jamais de sélection de texte ni de zoom involontaire */
body.touch-ui { -webkit-user-select: none; user-select: none; touch-action: manipulation; overscroll-behavior: none; }

/* -----------------------------------------------------------------------------
   E. Écran d'accueil sur petits écrans / paysage
   ----------------------------------------------------------------------------- */
@media (max-height: 560px) {
  #start-screen .welcome-card { max-height: 96dvh; overflow-y: auto; }
  .welcome-head { padding-top: 10px; padding-bottom: 6px; }
  .welcome-logo { display: none; }
}
@media (min-width: 1800px) { #start-screen .welcome-card { max-width: 480px; } }

/* ===== Sélecteur de langue (écran d accueil) ===== */
.welcome-card { position: relative; }
.welcome-lang { position: absolute; top: 12px; right: 12px; background: #0d1224; color: #e2e8f0; border: 1px solid #2a3350; border-radius: 10px; padding: 5px 8px; font-size: 0.78rem; cursor: pointer; max-width: 46%; }
.welcome-lang:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }

/* =============================================================================
   G. INFOBULLES TACTILES (js/tips.js) : bulle « i » sur les cartes, fenêtre en bas d'écran
   body.compact-ui = appareil tactile OU fenêtre ≤ 1024 px (posé par js/tips.js)
   ============================================================================= */
body.compact-ui .card-tooltip,
body.compact-ui .bonus-tooltip,
body.compact-ui .hud-card .tooltip,
body.compact-ui #btn-quick-sell .tooltip { display: none !important; }
.fbm-item { display: contents; }                       /* PC : le conteneur n'existe pas visuellement */

.tip-i {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: italic 800 0.9rem Georgia, 'Times New Roman', serif; line-height: 1;
  color: #7dd3fc; background: rgba(56, 189, 248, 0.14); border: 1.5px solid rgba(56, 189, 248, 0.6);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.tip-i::after { content: ''; position: absolute; inset: -9px; }       /* zone tactile élargie à 44 px */
.tip-i:active { background: rgba(56, 189, 248, 0.35); transform: scale(0.92); }
.card.has-tip > :first-child { margin-right: 34px; }
body:not(.compact-ui) .tip-i { display: none; }

#tip-backdrop { position: fixed; inset: 0; z-index: 2290; background: rgba(2, 6, 23, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
#tip-backdrop.on { opacity: 1; pointer-events: auto; }
#tip-sheet {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom, 10px) + 16px); z-index: 2300;
  width: min(92vw, 420px); max-height: 60dvh; overflow-y: auto; box-sizing: border-box;
  padding: 14px 16px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #151c33, #0b1020); border: 1.5px solid #38bdf8;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); color: #e2e8f0; font-size: 0.85rem; line-height: 1.45;
  transform: translate(-50%, 140%); visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}
#tip-sheet.on { transform: translate(-50%, 0); visibility: visible; }
#tip-sheet .tip-body { padding-right: 36px; }
#tip-sheet .tip-body > * { max-width: 100%; }
#tip-sheet .tip-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; }

/* sac plein : le bouton Vendre clignote */
@keyframes tcAlert { 0%,100% { box-shadow: 0 0 0 0 rgba(250,204,21,0); transform: scale(1); } 50% { box-shadow: 0 0 0 7px rgba(250,204,21,.55), 0 0 22px 6px rgba(250,204,21,.8); transform: scale(1.12); } }
#tc-sell.tc-alert { animation: tcAlert .8s ease-in-out infinite; border-color: #facc15 !important; }

/* --- Sélecteur de langue avec drapeaux SVG (les emojis drapeaux n'existent pas sous Windows) --- */
.lang-dd { position: relative; display: inline-block; }
.lang-dd.welcome-lang { position: absolute; padding: 0; background: none; border: none; }
.lang-dd-btn, .lang-dd-it { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; font: inherit; font-size: 0.8rem; color: #e2e8f0; cursor: pointer; text-align: left; }
.lang-dd-btn { background: #0d1224; border: 1px solid #2a3350; border-radius: 10px; padding: 6px 10px; }
.lang-dd-btn i { font-style: normal; margin-left: auto; opacity: .7; }
.lang-dd-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 100%; z-index: 3000; background: #0d1224; border: 1px solid #2a3350; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.lang-dd-menu[hidden] { display: none; }
.lang-dd-it { background: none; border: none; padding: 8px 12px; white-space: nowrap; }
.lang-dd-it:hover { background: #1e293b; }
.lang-flag { display: inline-block; width: 22px; height: 15px; border-radius: 2px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.lang-flag svg { display: block; width: 100%; height: 100%; }

/* --- Pastilles d'état mobile (géant / événement / combo) : pile compacte en haut à droite --- */
body.touch-ui #badge-stack {
  position: fixed; z-index: 830; pointer-events: none;
  right: calc(var(--safe-right, 10px) + 10px); bottom: calc(var(--safe-bottom, 10px) + 64px + 190px * var(--tc-scale, 1) + 6px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 44vw;
}
body.touch-ui #badge-stack > * {
  position: relative !important; overflow: hidden; width: auto !important; min-width: 0 !important; max-width: 100%;
  margin: 0 !important; padding: 3px 10px 6px !important; border-width: 1.5px !important; border-radius: 999px !important;
  box-sizing: border-box; pointer-events: none !important; opacity: .93; white-space: nowrap; text-align: center;
}
body.touch-ui #badge-stack #giant-banner > div, body.touch-ui #badge-stack #event-banner > div:not(:last-child) {
  display: inline !important; margin: 0 !important; font-size: .68rem !important; line-height: 1.2;
}
body.touch-ui #badge-stack #giant-banner > div + div, body.touch-ui #badge-stack #event-banner > div + div { margin-left: 6px !important; }
body.touch-ui #badge-stack #event-banner > div:last-child, body.touch-ui #badge-stack #combo-meter-bg {
  position: absolute !important; left: 0; right: 0; bottom: 0; height: 3px !important; margin: 0 !important; border-radius: 0 !important;
}
body.touch-ui #badge-stack #combo-badge { box-shadow: 0 2px 8px rgba(234,88,12,.45) !important; gap: 0 !important; }
body.touch-ui #badge-stack #combo-badge .combo-title { display: none !important; }
body.touch-ui #badge-stack #combo-badge::before { content: "🔥"; position: absolute; left: 8px; top: 2px; font-size: .8rem; }
body.touch-ui #badge-stack #combo-badge .combo-stats { display: flex !important; gap: 8px !important; padding-left: 18px; font-size: .72rem !important; font-weight: 800; white-space: nowrap; }
body.touch-ui #badge-stack #event-banner-time { display: none !important; }
body.touch-ui #badge-stack #giant-banner > div > div { display: inline !important; margin: 0 4px 0 0 !important; font-size: .68rem !important; }
body.touch-ui #badge-stack #giant-banner > div { display: inline !important; border-left: none !important; padding-left: 0 !important; margin: 0 6px 0 0 !important; }
/* le menu "En ligne" doit passer devant le défi de clan épinglé */
body.touch-ui #online-container { z-index: 900; }

body.touch-ui #event-banner-time, body.compact-ui #event-banner-time { display: none !important; }

/* --- Bouton "En ligne" discret sur mobile : juste 🌐 + nombre, petit et translucide --- */
body.touch-ui #btn-online-toggle, body.compact-ui #btn-online-toggle { padding: 8px 14px !important; font-size: .92rem !important; min-height: 40px !important; opacity: .92; box-shadow: 0 3px 10px rgba(0,0,0,.35) !important; }
body.touch-ui #btn-online-toggle > span:first-child, body.compact-ui #btn-online-toggle > span:first-child { font-size: 0 !important; }
body.touch-ui #btn-online-toggle > span:first-child::before, body.compact-ui #btn-online-toggle > span:first-child::before { content: "🌐"; font-size: 1.05rem; }
body.touch-ui #btn-online-toggle #online-count, body.compact-ui #btn-online-toggle #online-count { margin-left: 6px !important; font-size: .95rem; }
body.touch-ui #online-container, body.compact-ui #online-container { transform: none; }

/* Bonus actifs sur mobile : une pastille par bonus (avant, tous les bonus étaient écrasés dans la même bulle) */
body.touch-ui #badge-stack #giant-banner:not([style*="none"]) {
  display: flex !important; flex-direction: column; align-items: flex-end; gap: 4px;
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; opacity: 1;
}
body.touch-ui #badge-stack #giant-banner > .gb-item {
  display: block !important; width: auto; max-width: 100%; box-sizing: border-box; white-space: nowrap; margin: 0 !important;
  padding: 3px 10px !important; border: 1.5px solid var(--bc, #38bdf8) !important; border-radius: 999px !important;
  background: rgba(15, 23, 42, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); opacity: .95;
}
body.touch-ui #badge-stack #giant-banner > .gb-item > div { display: inline !important; margin: 0 4px 0 0 !important; font-size: .68rem !important; }