@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/PixelifySans-Regular.woff2') format('woff2');
}
:root {
  --fond: #10131c; --panneau: #1b2130; --bord: #2c3650; --texte: #e8ecf5;
  --sourd: #8b96ad; --accent: #f0b429; --ok: #45d97e; --ko: #ff5d5d;
  --common: #9aa5b1; --rare: #4d8dff; --epic: #b46dff; --legend: #f0b429;
}
* { box-sizing: border-box; margin: 0; }
html { background: #05070c; }
body {
  font-family: 'Pixelify Sans', monospace; color: var(--texte);
  background: var(--fond); max-width: 520px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column;
}
img { image-rendering: pixelated; }
.cache { display: none !important; }
.erreur { color: var(--ko); min-height: 1.2em; }
.lien { color: var(--sourd); text-decoration: underline; cursor: pointer; }

#hud {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--panneau); border-bottom: 2px solid var(--bord);
  position: sticky; top: 0; z-index: 5;
}
/* Les Idle.png sont des feuilles de sprites (frames carrées côte à côte) :
   cover + cadrage gauche n'affiche que la première frame. */
#hud-sprite, .sprite-hero {
  width: 44px; height: 44px;
  object-fit: cover; object-position: left center;
}
.sprite-hero { width: 96px; height: 96px; }
#hud-infos { flex: 1; font-size: 14px; }
#hud-chiffres { text-align: right; font-size: 14px; }
.barre {
  display: inline-block; width: 90px; height: 8px; background: #05070c;
  border: 1px solid var(--bord); vertical-align: middle;
}
.barre > span { display: block; height: 100%; background: var(--accent); width: 0; }

main { flex: 1; padding: 12px; padding-bottom: 70px; }
.ecran h1 { text-align: center; margin: 40px 0 24px; }
.ecran h2 { margin: 12px 0 8px; font-size: 18px; }
input {
  width: 100%; padding: 12px; margin: 6px 0; font: inherit;
  background: var(--panneau); color: var(--texte); border: 2px solid var(--bord);
}
button {
  font: inherit; color: var(--texte); background: var(--bord);
  border: 2px solid var(--bord); padding: 8px 12px; cursor: pointer;
}
button.gros { width: 100%; padding: 14px; margin: 8px 0; background: var(--accent); color: #10131c; font-size: 18px; }
button:disabled { opacity: .4; cursor: default; }

.carte {
  background: var(--panneau); border: 2px solid var(--bord);
  padding: 10px; margin: 8px 0; display: flex; align-items: center; gap: 10px;
}
.carte .png { width: 36px; height: 36px; object-fit: contain; }
.carte .corps { flex: 1; }
.carte .sourd { color: var(--sourd); font-size: 13px; }
.r-common { color: var(--common); } .r-rare { color: var(--rare); }
.r-epic { color: var(--epic); } .r-legend { color: var(--legend); }
.b-common { border-color: var(--common); } .b-rare { border-color: var(--rare); }
.b-epic { border-color: var(--epic); } .b-legend { border-color: var(--legend); }

#nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; display: flex;
  background: var(--panneau); border-top: 2px solid var(--bord); z-index: 5;
}
#nav button { flex: 1; font-size: 22px; padding: 10px 0; background: none; border: none; opacity: .5; }
#nav button.actif { opacity: 1; border-top: 2px solid var(--accent); }

#modal-fond {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
#modal {
  background: var(--panneau); border: 2px solid var(--accent);
  padding: 20px; width: min(420px, 92vw); text-align: center;
}
#modal .png { width: 72px; height: 72px; }

.pitie-proche { color: var(--legend); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }