:root{
    --text:#e9edf6;
    --muted:#9fb0d1;
    --panel:#f2e6c9;
    --panel2:#e6d7b1;
    --border:#6e5a3a;
    --inset:#ffffff55;
    --shadow:0 12px 28px rgba(0,0,0,.22);
  }

  html,body{
    margin:0;
    height:100%;
    overflow:hidden;
    background:#0e1020;
    font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
    color:var(--text);
  }
  

  /* CANVAS plein écran */
  #game{
    display:block;
    width:100vw;
    height:100vh;
    outline:none;
    /* IMPORTANT: on laisse le canvas "traversable" pour que le joystick reçoive les touch */
    pointer-events:auto; 
    position:relative;
    z-index:1;
  }

  /* PANELS */
  .panel{
    background:linear-gradient(180deg,var(--panel),var(--panel2));
    border:3px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow), inset 0 0 0 2px var(--inset);
    color:#3b2f1e;
  }

  .coin{
    width:26px;height:26px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #ffd257 0 45%, #d4af37 46% 100%);
    border:2px solid #8c6d27;
  }

  /* HUD BAS */
  #bottomHud{
    position:fixed;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 14px;
    background:linear-gradient(180deg,#fff4da,#eedfb8);
    border:3px solid var(--border);
    border-radius:12px;
    color:#4d3c25;
    box-shadow:var(--shadow), inset 0 0 0 2px var(--inset);
    font-size:14px;
    z-index:30;
    display: none;
  }




  /* PANEL FOSSILES */
  #rightPanel{
    position:fixed;
    top:16px;
    right:16px;
    width:min(360px,36vw);
    max-height:calc(100vh - 32px);
    display:flex;
    flex-direction:column;
    overflow: hidden; /* empêche tout dépassement */
    border-radius: 12px; /* arrondi uniforme */
    z-index:9999;
    
  }

  #rightPanelHeader{
    padding:12px 14px;
    font-weight:800;
    color:#503f2a;
    background:linear-gradient(180deg,#fff9ec,#f1e1c2);
    border-bottom:3px solid var(--border);
  }

  #rightPanelBody{ padding:12px; overflow:auto; }
  #summary{ color:#7e725c;font-size:13px;margin-bottom:8px; }
  #log{ display:flex; flex-direction:column; gap:10px; }

  .card{
    display:flex;
    gap:10px;
    align-items:center;
    background:#f2e6c9;
    border:2px solid var(--border);
    border-radius:12px;
    padding:10px;
    position:relative;
    box-shadow:0 8px 16px rgba(0,0,0,.12);
  }
  .meta{ display:flex;flex-direction:column; }
  .title{font-weight:800;color:#433727}
  .rar{font-size:12px;color:#8d826c}
  .sellBtn{
    position:absolute;
    right:10px;
    bottom:10px;
    background:linear-gradient(180deg,#4b9b75,#3a7f5f);
    border:none;
    color:#fff;
    padding:6px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
  }

  /* TOAST */
#toast{
  position: fixed;
  left: 50%;
  top: 90px;                 /* garde ton placement */
  transform: translateX(-50%);
  z-index: 20000;            /* au-dessus de tout */
  display: none;

  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 14px 22px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);

  max-width: 90vw;           /* ✅ ne dépasse jamais l'écran */
  width: auto;
  box-sizing: border-box;

  white-space: normal;       /* ✅ autorise retour à la ligne */
  overflow-wrap: anywhere;   /* ✅ coupe même les mots longs */
  text-align: center;
}


  /* HUD Argent + Fatigue */
  #statusBox {
    position: fixed;
    top: 16px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 32px;
    z-index: 30;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    border: 3px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow), inset 0 0 0 2px var(--inset);
    color: #3b2f1e;
    font-size: 16px;
  }
  @media (min-width: 900px) {
    #statusBox { left: 16px; transform: none; }
  }
  @media (max-width: 900px) {
    #statusBox { left: 50%; transform: translateX(-50%); gap: 22px; }
  }
  #statusMoney { display:flex; align-items:center; gap:6px; }
  #statusMoney .coin { width:28px; height:28px; }
  #statusFatigue{ display:flex; flex-direction:column; gap:4px; align-items:center; width:100%; }
  #fatigueBarWrap{ position:relative; width:150px; height:16px; background:#c5b18a; border-radius:8px; overflow:hidden; }
  #fatigueBar{ height:100%; width:100%; background:#6dbd63; transition: width .25s; }
  #fatigueText{ position:absolute; left:50%; top:50%; transform:translate(-50%, -52%); font-size:13px; font-weight:700; color:#3a2d1d; pointer-events:none; text-shadow:0 1px 2px #ffffffaa; }

  /* ============================
     📱 MODE MOBILE
     ============================ */
@media (max-width: 900px) {



  /* Inventaire caché par défaut sur mobile */
  #rightPanel {
    display: none;
    position: fixed;
    inset: 10% 5%;
    width: auto;
    height: auto;
    max-height: 80%;
    z-index: 10000;
  }

  /* quand ouvert */
  #rightPanel.mobile-open {
    display: flex;
  }

  #bottomHud {
    display: none !important;
  }



  /* ============================
     🎮 JOYSTICK — ULTRA SIMPLE, BEIGE
     ============================ */
  #joystick {
    position: fixed;
    bottom: 110px;
    left: 30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(242, 230, 201, 0.45);
    border: 2px solid rgba(110, 90, 58, 0.45);
    z-index: 9998 !important;
    touch-action: none;
    display: block !important;
  }

  #joyKnob {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(238, 223, 184, 0.9);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    left: 40px;
    top: 40px;
    touch-action: none;
  }
  #joystick, #joyKnob {
    pointer-events:auto !important;
}

  /* BOUTONS ACTION */
  #btnDigMobile, #btnInventoryMobile {
    width:80px; height:80px; 
    position:fixed; right:30px;
    border:none; border-radius:50%;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    box-shadow:0 4px 12px rgba(0,0,0,.35); 
    z-index:9998 !important; 
    pointer-events:auto !important;
  }
  #btnInventoryMobile{ bottom:210px; background-image:url("icone/inventaire.png"); }
  #btnDigMobile{ bottom:110px; background-image:url("icone/creuser.png"); }
}




/* ============================
   📘🏆 Actions HUD haut gauche
   ============================ */

#topLeftActions{
  position: fixed;
  top: 82px;        /* sous statusBox desktop */
  left: 16px;

  display: flex;
  gap: 10px;

  z-index: 35;
}

/* Icône individuelle */
.hudIcon{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff3d1;
  border: 2px solid #6e5a3a;
  border-radius: 10px;

  font-size: 20px;
  font-weight: 900;

  cursor: pointer;
  user-select: none;
color: black;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

#btnHelpMini {
  color: #2b1e12;     /* foncé, lisible */
  font-weight: 900;
  font-size: 22px;
}


/* Mobile : même position, zone safe */
@media (max-width: 900px){
  #topLeftActions{
    top: 92px;      /* statusBox plus bas sur mobile */
    left: 16px;
  }
}
@media (max-width: 900px) {
  #btnHelpMini {
    display: flex !important;
  }
}
.sellBtn{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
   pointer-events: auto;
}




/* Barre XP */
#xpBarWrap{
  width: 70px;
  height: 10px;
  background: #c5b18a;
  border-radius: 6px;
  overflow: hidden;
}

#xpBar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6dbd63, #4b9b75);
  transition: width .3s;
}

#levelBox{
  min-width: 120px;
  padding: 0 10px;
  gap: 8px;
}

/* Badge niveau */
#levelBadge{
  min-width: 26px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg, #6dbd63, #4b9b75);
  color: #ffffff;

  font-weight: 900;
  font-size: 13px;

  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
}

.card {
  pointer-events: none;
}

#mobileInventoryPanel .card{
  pointer-events: auto;
}
.card .sellBtn {
  pointer-events: auto;
}

/* ============================
   📜 QUÊTES
   ============================ */
#questsModal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.45);
  z-index: 30000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
#questsBox{
  width: min(520px, 92vw);
  max-height: min(78vh, 720px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#questsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom:3px solid var(--border);
  background: linear-gradient(180deg,#fff9ec,#f1e1c2);
  color:#503f2a;
}
#questsClose{
  cursor:pointer;
  font-weight:900;
  color:#b10000;
  padding: 2px 8px;
}
#questsTabs{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
}
.qTab{
  flex:1;
  border:2px solid var(--border);
  border-radius:10px;
  padding: 8px 10px;
  background:#fff4da;
  cursor:pointer;
  font-weight:800;
}
.qTab.active{
  background: #e6d7b1;
}
#questsBody{
  padding: 12px;
  overflow:auto;
}
.qCard{
  background:#f2e6c9;
  border:2px solid var(--border);
  border-radius:12px;
  padding: 10px;
  margin-bottom: 10px;
  position:relative;
}
.qTitle{ font-weight:900; color:#433727; margin-bottom:6px; }
.qMeta{ font-size:13px; color:#6c614e; margin-bottom:8px; }
.qBarWrap{ height:12px; background:#c5b18a; border-radius:8px; overflow:hidden; }
.qBar{ height:100%; width:0%; background:#6dbd63; transition: width .25s; }
.qBtns{ display:flex; gap:8px; margin-top:10px; }
.qBtn{
  flex:1;
  border:none;
  border-radius:10px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight:900;
}
.qBtnAccept{ background:linear-gradient(180deg,#4b9b75,#3a7f5f); color:#fff; }
.qBtnClaim{ background:linear-gradient(180deg,#ffd257,#d4af37); color:#3b2f1e; }
.qBtnDisabled{ opacity:.55; cursor:not-allowed; }


.sectionTitle{
  font-weight:900;
  font-size:14px;
  margin:6px 0 8px;
  color:#4d3c25;
  border-bottom:2px solid #6e5a3a;
  padding-bottom:4px;
}

#objectsList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}


/* Croix fermeture inventaire : mobile uniquement */
#closeInventoryMobile{
  display: none;
}

@media (max-width: 900px){
  #closeInventoryMobile{
    display: inline-block;
  }
}

#invBottom{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f2e6c9;
  border: 2px solid #6e5a3a;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  color: #3b2f1e;
  z-index: 9999;
  pointer-events: none;
}

#chanBottom{
  position: fixed;
  left: calc(50% + 80px); /* décale à droite */
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f2e6c9;
  border: 2px solid #6e5a3a;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  color: #3b2f1e;
  z-index: 9999;
  pointer-events: none;
}
#invBottom{
  left: calc(50% - 50px);
  bottom: 14px;
  transform: translateX(-50%);
}
#chanBottom{
  left: calc(50% + 50px);
  bottom: 14px;
  transform: translateX(-50%);
}





/* Conteneur : espace sous les icônes */
#btnEnergy{
  position: fixed;
  top: 130px;
  left: 16px;
  margin-top: 12px;      /* ← ESPACE visuel */
  z-index: 100;
  pointer-events: auto;
}

/* Bouton bonus énergie — design dédié */
#btnEnergyRegenAd{
  width: 44px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;
text-shadow: 0 1px 2px rgba(0,0,0,1);
  background-color: #ffd257; 
    border: 2px solid #6e5a3a;
  border-radius: 10px;

    font-size: 16px;        /* 👈 taille maîtrisée */
  line-height: 1;         /* 👈 empêche le débordement vertical */
  overflow: hidden;       /* 👈 coupe ce qui dépasse */
  white-space: nowrap;  

  font-weight: 900;
  color: #3b2f1e;

  box-shadow:
    0 3px 8px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.5);

  cursor: pointer;
  user-select: none;
  pointer-events: auto;
   opacity: 1 !important;  
}

/* feedback clic */
#btnEnergyRegenAd:active{
  transform: translateY(1px);
  filter: brightness(0.95);
}