/* ===========================================================================
   BITBORN — jetons visuels et capsule
   Partage par forge.html, burn.html et leaderboard.html : c'est ce qui fait
   qu'une piece se lit pareil partout sur le site.
   =========================================================================== */
:root{
  --bg:#f5f4ec; --bg-elevated:#ffffff;
  --green:#4d6b00; --green-rgb:77,107,0; --green-dim:rgba(77,107,0,0.65);
  --text:#17180f; --text-muted:#787868; --border:rgba(77,107,0,0.18);
  /* L'ember n'existe que pour le burn. Une seule couleur d'alerte, jamais
     utilisee ailleurs : quand elle apparait, elle veut dire une seule chose. */
  --ember:#c9421d; --ember-rgb:201,66,29;
  --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --font-pixel:'Press Start 2P',var(--font-mono);
}
[data-theme="dark"]{
  --bg:#0a0a08; --bg-elevated:#101210;
  --green:#d4f000; --green-rgb:212,240,0; --green-dim:rgba(212,240,0,0.55);
  --text:#eef0e6; --text-muted:#75776b; --border:rgba(212,240,0,0.14);
  --ember:#ff5c2b; --ember-rgb:255,92,43;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-display); font-weight:300;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease,color .3s ease;
}
a{color:inherit}

/* ---------- barre ---------- */
.bar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:20px;
  padding:14px 20px; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
}
.brand{font-family:var(--font-pixel); font-size:11px; letter-spacing:1px; text-decoration:none; color:var(--green)}
.bar nav{display:flex; gap:16px; margin-left:auto; font-size:13px}
.bar nav a{text-decoration:none; color:var(--text-muted)}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--text)}
.themeBtn{
  background:none; border:1px solid var(--border); color:var(--text-muted);
  font-family:var(--font-mono); font-size:11px; padding:5px 9px; cursor:pointer; border-radius:2px;
}

/* ---------- mise en page ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 20px 100px}
.head{padding:56px 0 32px; border-bottom:1px solid var(--border)}
.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--green); margin:0 0 14px;
}
h1{font-size:clamp(34px,6vw,58px); font-weight:300; letter-spacing:-.03em; margin:0 0 16px; line-height:1}
h1 em{font-style:normal; color:var(--green)}
.lede{font-size:16px; line-height:1.65; color:var(--text-muted); max-width:52ch; margin:0}

/* ---------- compteurs ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); margin:32px 0 48px}
.stat{background:var(--bg); padding:18px 16px}
.stat .k{font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:8px}
.stat .v{font-size:26px; font-weight:400; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat .v small{font-size:13px; color:var(--text-muted); font-weight:300}

h2{font-size:13px; font-family:var(--font-mono); letter-spacing:2px; text-transform:uppercase;
   color:var(--text-muted); font-weight:400; margin:0 0 20px; display:flex; align-items:center; gap:12px}
h2::after{content:''; flex:1; height:1px; background:var(--border)}

/* ---------- LA CAPSULE : element signature ----------
   La piece n'est pas posee dans un carre. Elle est CONTENUE : coins biseautes
   en haut a gauche et en bas a droite, comme une lame de microscope ou une
   cartouche. La forme dit "specimen sous garde" avant meme qu'on lise le texte. */
.cell{
  position:relative; background:var(--bg-elevated);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.cell::before{ /* liseré interne, decalé : donne la double paroi */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  border:1px solid var(--border);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.cell:hover{transform:translateY(-3px)}
.cellArt{position:relative; aspect-ratio:1/1; overflow:hidden}
.cellArt canvas{width:100%; height:100%; display:block; image-rendering:pixelated}

.cellPlate{
  display:flex; align-items:baseline; gap:8px; padding:11px 13px;
  border-top:1px solid var(--border); font-family:var(--font-mono); font-size:11px;
}
.cellPlate .id{color:var(--text); letter-spacing:.5px}
.cellPlate .type{color:var(--text-muted); margin-left:auto; font-size:10px;
  letter-spacing:1px; text-transform:uppercase}

/* pastille d'etat, en haut a droite pour ne pas gener le biseau */
.tag{
  position:absolute; top:9px; right:9px; z-index:4;
  font-family:var(--font-mono); font-size:9px; letter-spacing:1.2px; text-transform:uppercase;
  padding:3px 7px; background:var(--bg); border:1px solid var(--border); color:var(--text-muted);
}
.tag.forged{color:var(--green); border-color:rgba(var(--green-rgb),.45)}
.tag.genesis{color:var(--text); border-color:var(--text)}

/* ---------- etat : burn en cours ----------
   Le tremblement est court et espace : une alerte qui bouge sans arret devient
   du bruit et on cesse de la voir. Elle se manifeste, puis se tait. */
.cell.burning{ animation:tremor 5s ease-in-out infinite; }
.cell.burning::before{ border-color:rgba(var(--ember-rgb),.55) }
.cell.burning .cellArt::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 118%,rgba(var(--ember-rgb),.34),transparent 62%);
  animation:emberPulse 2.4s ease-in-out infinite;
}
@keyframes tremor{
  0%,86%,100%{transform:translate(0,0)}
  88%{transform:translate(-1.5px,.5px)} 90%{transform:translate(1.5px,-.5px)}
  92%{transform:translate(-1px,-1px)}  94%{transform:translate(1px,1px)}
  96%{transform:translate(-.5px,.5px)}
}
@keyframes emberPulse{0%,100%{opacity:.42}50%{opacity:.95}}

/* barre de temps restant, collee au bas de l'image */
.fuse{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(var(--ember-rgb),.16); z-index:4}
.fuse i{display:block; height:100%; background:var(--ember); width:100%; transition:width 1s linear}

.cell.burning .tag{color:var(--ember); border-color:rgba(var(--ember-rgb),.5)}
.cell.ash{opacity:.34; filter:grayscale(1)}
.cell.ash .cellPlate .id{text-decoration:line-through; text-decoration-thickness:1px}
.cell.saved::before{border-color:rgba(var(--green-rgb),.6)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:16px}

/* ---------- panneau d'alerte ---------- */
.alert{
  display:grid; grid-template-columns:150px 1fr; gap:22px; align-items:center;
  padding:20px; margin-bottom:14px; background:var(--bg-elevated);
  border:1px solid rgba(var(--ember-rgb),.34);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.alert h3{margin:0 0 6px; font-size:19px; font-weight:400; letter-spacing:-.01em}
.alert .meta{font-family:var(--font-mono); font-size:12px; color:var(--text-muted); line-height:1.8}
.alert .meta b{color:var(--ember); font-variant-numeric:tabular-nums}
.actions{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}

button.act{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:9px 15px; background:transparent; color:var(--text); cursor:pointer;
  border:1px solid var(--border); border-radius:2px; transition:.15s;
}
button.act:hover{border-color:var(--text)}
button.act.primary{background:var(--green); border-color:var(--green); color:var(--bg)}
button.act.danger{color:var(--ember); border-color:rgba(var(--ember-rgb),.45)}
button.act:disabled{opacity:.35; cursor:default}

.empty{
  padding:44px 24px; text-align:center; border:1px dashed var(--border);
  color:var(--text-muted); font-size:14px; line-height:1.7;
}
.note{font-size:13px; color:var(--text-muted); line-height:1.75; max-width:60ch; margin:14px 0 0}
.demo{display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:16px 0 4px}
.demo span{font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted); margin-right:4px}

@media(max-width:640px){
  .alert{grid-template-columns:1fr}
  .bar nav{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* Petits ecrans : la barre garde l'essentiel (wallet, theme, menu). Les liens
   sociaux restent dans le menu et le pied de page. */
@media (max-width:560px){ .bar > .bbSocial, .bar > [data-social]{ display:none !important; } }

/* liens secondaires de la barre (Leaderboard, Docs) */
.bar nav a.nav-sec{ opacity:.6; font-size:12px; }
.bar nav a.nav-sec:hover{ opacity:1; }