/* =========================================================================
   THEME & STYLES — Direction artistique "Genshin Impact"
   (parchemin crème, cadres dorés ornementés, fond bleu nuit, couleurs élémentaires)
   ========================================================================= */
:root{
  --gold:        #d3bc8e;
  --gold-deep:   #b08d4f;
  --gold-light:  #f4e4bc;
  --ink:         #3b4255; /* texte sombre bleu-ardoise typique de Genshin */
  --ink-soft:    #5a6075;
  --parch:       #efe6d3;
  --parch-2:     #e6d9bd;
  --navy:        #1b1f31;
  --navy-2:      #2a2f47;

  --cryo:   #8fd6e6;
  --electro:#c08be0;
  --dendro: #a7c957;
  --geo:    #f5b740;
  --pyro:   #ec6f60;
  --hydro:  #4cc2f1;
  --anemo:  #74c2a8;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; height:100%; overflow:hidden; background:#0d0f18;
  /* Curseur personnalisé (hérité par toute l'interface, boutons compris) */
  cursor:url('../../public/images/cursor.png') 2 2, auto;
}
/* Les navigateurs et Tailwind (injecté après cette feuille) imposent cursor:default
   aux boutons/champs → !important pour forcer l'héritage du curseur personnalisé */
button, input, select, label{ cursor:inherit !important; }
/* Boutons inactifs : curseur "interdit" du système */
button:disabled{ cursor:not-allowed !important; }
body{
  font-family:'Cormorant Garamond', Georgia, serif;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-title{ font-family:'Cinzel', serif; letter-spacing:.02em; }

/* La scène est fixée à 1280x720 et mise à l'échelle pour remplir la fenêtre */
#stage{
  width:1280px; height:720px; position:relative;
  transform-origin:center center;
  background:
    radial-gradient(1200px 700px at 20% -10%, #343b5c 0%, transparent 55%),
    radial-gradient(1000px 800px at 110% 120%, #2a2342 0%, transparent 50%),
    linear-gradient(160deg, #1b1f31 0%, #12151f 100%);
  overflow:hidden;
  box-shadow:inset 0 0 160px rgba(0,0,0,.6);
}
/* Voile texturé subtil */
#stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:3px 3px; opacity:.5;
}

/* ---- Panneaux parchemin avec cadre doré ---- */
.panel{
  position:relative;
  background:linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
  border-radius:14px;
  border:1px solid var(--gold-deep);
  box-shadow:0 6px 22px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.35);
}
.panel::after{ /* liseré doré interne ornemental */
  content:""; position:absolute; inset:5px; border-radius:9px;
  border:1px solid rgba(176,141,79,.55); pointer-events:none;
}
.panel-dark{
  background:linear-gradient(180deg, rgba(43,49,76,.95), rgba(27,31,49,.97));
  border:1px solid var(--gold-deep);
  border-radius:14px; color:var(--gold-light);
  box-shadow:0 6px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(211,188,142,.25);
}
.gold-divider{ height:1px; background:linear-gradient(90deg, transparent, var(--gold-deep), transparent); }

/* ---- Titres ornementés ---- */
.ornament{ display:flex; align-items:center; gap:.5rem; color:var(--gold-deep); }
.ornament::before,.ornament::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-deep)); }
.ornament::after{ background:linear-gradient(90deg, var(--gold-deep), transparent); }

/* ---- Boutons style Genshin ---- */
.btn{
  font-family:'Cinzel',serif; user-select:none;
  border-radius:9999px; border:1px solid var(--gold-deep);
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn:disabled{ filter:grayscale(.7) opacity(.55); }
.btn-primary{ background:linear-gradient(180deg,#fff7e6,#e8d3a0); color:var(--ink); box-shadow:0 3px 10px rgba(0,0,0,.3); }
.btn-primary:not(:disabled):hover{ filter:brightness(1.06); box-shadow:0 0 14px rgba(211,188,142,.7); }
.btn-gold{ background:linear-gradient(180deg,#e9c877,#c79b4d); color:#2c2412; box-shadow:0 3px 10px rgba(0,0,0,.35); }
.btn-gold:not(:disabled):hover{ filter:brightness(1.08); box-shadow:0 0 16px rgba(231,200,119,.8); }
.btn-dark{ background:linear-gradient(180deg,#3a4063,#272c44); color:var(--gold-light); }
.btn-dark:not(:disabled):hover{ filter:brightness(1.15); box-shadow:0 0 12px rgba(211,188,142,.5); }

/* ---- Barres de progression ---- */
.bar{ background:rgba(59,66,85,.25); border-radius:9999px; overflow:hidden; border:1px solid rgba(176,141,79,.4); }
.bar > span{ display:block; height:100%; border-radius:9999px; transition:width .2s ease; }

/* ---- Badges élémentaires ---- */
.elem{ border-radius:9999px; padding:1px 9px; font-size:11px; font-weight:600; font-family:'Cinzel',serif; border:1px solid rgba(0,0,0,.15); }

/* ---- Carte personnage ---- */
.char-art{ background-size:cover; background-position:top center; transition:filter .8s ease; }
.char-locked{ filter:grayscale(.85) brightness(.7); }

/* ---- Déverrouillage d'un personnage (recrutement) ---- */
@keyframes unlockFade{
  0%{ opacity:1; }
  25%{ opacity:1; background:rgba(233,200,119,.4); }
  100%{ opacity:0; background:rgba(233,200,119,0); }
}
.unlocking{ animation:unlockFade .8s ease forwards; pointer-events:none; }
@keyframes cardFlash{
  0%,100%{ box-shadow:0 6px 22px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.35); }
  35%{ box-shadow:0 0 28px rgba(233,200,119,.95), inset 0 0 0 3px rgba(255,255,255,.35); }
}
.card-flash{ animation:cardFlash .9s ease; }

/* ---- Pastilles de ressources (header) ---- */
.res-pill{
  display:flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:9999px;
  background:linear-gradient(180deg, rgba(43,49,76,.92), rgba(27,31,49,.95));
  border:1px solid var(--gold-deep); color:var(--gold-light);
  box-shadow:inset 0 0 0 1px rgba(211,188,142,.25);
}
.coin{ width:26px;height:26px;border-radius:50%; display:grid;place-items:center; font-size:14px; }
.coin img{ width:100%; height:100%; object-fit:contain; }
/* Petites icônes d'objet en ligne (lait / mora) dans les textes et boutons */
.inline-icon{ width:1.15em; height:1.15em; vertical-align:-0.22em; display:inline-block; }

/* ---- Chiffres seuls en police de titre (Cinzel) — uniquement les nombres, pas les unités.
   Les éléments listés ne contiennent QUE des chiffres ; les valeurs mêlées à du texte
   utilisent un <span class="num"> autour du seul nombre.
   (les boutons .btn, badges .elem et gains flottants .floaty sont déjà en Cinzel) */
.num,
#milkVal, #milkCap, #eggVal, #moraVal, #priceVal, #priceBig, #sellEstimate,
#storageLvl, #storageCapTxt, #storageCost,
#charGrid [data-f="pending"]{
  font-family:'Cinzel', serif;
  font-variant-numeric: tabular-nums;
}

/* ---- Animations flottantes (gains) ---- */
.floaty{ position:absolute; pointer-events:none; font-family:'Cinzel',serif; font-weight:700;
  animation:floatUp 1s ease-out forwards; text-shadow:0 1px 3px rgba(0,0,0,.6); z-index:50; }
@keyframes floatUp{ from{ opacity:1; transform:translateY(0) } to{ opacity:0; transform:translateY(-34px) } }

/* ---- Scrollbar discrète (panneaux internes) ---- */
.scroll{ overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent; }
.scroll::-webkit-scrollbar{ width:6px; }
.scroll::-webkit-scrollbar-thumb{ background:var(--gold-deep); border-radius:3px; }

.pulse{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(211,188,142,0)) } 50%{ filter:drop-shadow(0 0 8px rgba(211,188,142,.9)) } }

/* ---- Flash de la pastille Mora (gain / dépense) ---- */
@keyframes flashGain{
  0%{ box-shadow:inset 0 0 0 1px rgba(211,188,142,.25), 0 0 18px rgba(233,200,119,.95); }
  100%{ box-shadow:inset 0 0 0 1px rgba(211,188,142,.25); }
}
@keyframes flashSpend{
  0%{ box-shadow:inset 0 0 0 1px rgba(211,188,142,.25), 0 0 18px rgba(236,111,96,.95); }
  100%{ box-shadow:inset 0 0 0 1px rgba(211,188,142,.25); }
}
.flash-gain{ animation:flashGain .55s ease-out; }
.flash-spend{ animation:flashSpend .55s ease-out; }

/* ---- Tutoriel (spotlight + bulle) ---- */
.tuto-ring{
  position:absolute; z-index:80; pointer-events:none;
  border:2px solid var(--gold-light); border-radius:12px;
  box-shadow:0 0 0 2000px rgba(10,12,20,.55), 0 0 18px rgba(233,200,119,.8);
  transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease;
  animation:tutoPulse 1.6s ease-in-out infinite;
}
@keyframes tutoPulse{ 0%,100%{ border-color:var(--gold-light); } 50%{ border-color:var(--gold-deep); } }
.tuto-bubble{ position:absolute; z-index:81; }

/* écran de chargement */
#boot{ position:absolute; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1b1f31,#12151f); color:var(--gold-light); transition:opacity .6s ease; }
.spinner{ width:46px;height:46px;border-radius:50%;border:3px solid rgba(211,188,142,.25);border-top-color:var(--gold); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }