/* ════════════════════════════════════════════════════════════════
   Hit Machine V1 — Design Tokens
   À importer en tête de game-runner.html, ending.html, chapters/*
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Permanent+Marker&family=Caveat:wght@500;700&family=Bricolage+Grotesque:wght@400;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Couleurs Hit Machine ---------- */
  --hm-pink:        #ff5da2;       /* Rose Pop signature (logo, accents, hover) */
  --hm-pink-soft:   #ff85bb;       /* Rose lumineux */
  --hm-pink-dark:   #d63d7a;
  --hm-yellow:      #ffd23f;       /* Sticker FOCUS, post-it */
  --hm-yellow-warm: #ffd23f;
  --hm-red:         #e63946;       /* Sticker RISKY, alertes */
  --hm-cyan:        #2b2bff;       /* Accent bleu Pop, info */
  --hm-green:       #16c08a;       /* Stat positive */
  --hm-cream:       #fbf2dd;       /* Papier crème */
  --hm-paper:       #fbf2dd;
  --hm-dark:        #17151f;       /* Fond global */
  --hm-dark-2:      #241f33;
  --hm-dark-3:      #2d2740;
  --hm-text:        #fbf2dd;
  --hm-text-mute:   #b9b3c9;
  --hm-border:      rgba(255,255,255,.08);
  --hm-border-2:    rgba(255,255,255,.16);

  /* ---------- Typographies ---------- */
  --ff-display:    'Anton', 'Bebas Neue', 'Impact', sans-serif;        /* HUD, titres */
  --ff-handwriting:'Permanent Marker', 'Caveat', cursive;              /* Stickers, post-it */
  --ff-script:     'Caveat', cursive;                                  /* Polaroid caption */
  --ff-body:       'Hanken Grotesk', system-ui, -apple-system, sans-serif;      /* Texte courant */

  /* ---------- Espacements ---------- */
  --r-sm:  6px;   --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;
  --gap-1: 4px;   --gap-2: 8px;  --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px;

  /* ---------- Ombres papier ---------- */
  --shadow-paper:    3px 3px 0 #000;
  --shadow-card:     4px 4px 0 #000;
  --shadow-sticker:  3px 3px 0 #000;
  --shadow-glow-pink: 4px 4px 0 #000;

  /* ---------- Animations ---------- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in:  cubic-bezier(.4,0,1,1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;
}

/* ─── ICONES ─── */
/* Safety : tous les éléments enfants des icônes héritent currentColor */
.ico, .ico-stat, .ico-lg, .ico-xl { fill: currentColor; }
.ico *, .ico-stat *, .ico-lg *, .ico-xl * { fill: inherit; }
.ico-stat--accent { color: var(--hm-pink); }

.ico {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: currentColor;
  flex-shrink: 0;
}
.ico-stat { width: 18px; height: 18px; color: var(--hm-text); }
.ico-stat--accent { color: var(--hm-pink); }
.ico-lg { width: 32px; height: 32px; }
.ico-xl { width: 48px; height: 48px; }

/* ─── LOGO HIT MACHINE ─── */
.hm-logo {
  font-family: var(--ff-display);
  letter-spacing: -.02em;
  line-height: .82;
  text-transform: uppercase;
  color: var(--hm-text);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.hm-logo .hm-logo-main { font-size: 2.4rem; }
.hm-logo .hm-logo-sub  {
  font-family: var(--ff-handwriting);
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--hm-pink);
  text-transform: uppercase;
}
.hm-logo .hm-logo-bolt {
  display: inline-block;
  width: 1ch; height: 1ch;
  vertical-align: -.05em;
  filter: drop-shadow(var(--shadow-glow-pink));
}

/* ─── POLAROID ─── */
.hm-polaroid {
  position: relative;
  display: inline-block;
  background: #f6f1e2;
  padding: 12px 12px 56px;
  box-shadow: var(--shadow-paper);
  transform: rotate(-2.5deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.hm-polaroid:hover { transform: rotate(-1deg) scale(1.02); }
.hm-polaroid img,
.hm-polaroid .hm-polaroid-photo {
  display: block;
  width: 100%;
  filter: contrast(1.05) saturate(.95);
}
.hm-polaroid .hm-polaroid-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 14px;
  text-align: center;
  font-family: var(--ff-script);
  font-size: 1.4rem;
  font-weight: 700;
  color: #2a2616;
}
.hm-polaroid .hm-polaroid-role {
  font-family: var(--ff-handwriting);
  font-size: .68rem;
  letter-spacing: .15em;
  color: var(--hm-pink-dark);
  text-transform: uppercase;
}
/* Scotch jaune au-dessus */
.hm-polaroid::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 80px; height: 24px;
  background: url('cassette-k7-master.png') /* replaced via override */;
  background-image: url('scotch-yellow.png');
  background-size: cover;
  opacity: .92;
}

/* ─── PAPIER VIEILLI ─── */
.hm-paper {
  background: url('paper-aged.png') center/cover;
  color: #2a2616;
  padding: var(--gap-4) var(--gap-5);
  font-family: var(--ff-body);
  box-shadow: var(--shadow-paper);
  position: relative;
}

/* ─── BANDEAUX DE CHOIX (papier déchiré) ─── */
.hm-choice {
  display: flex; align-items: center; gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  background: var(--hm-cream);
  color: #2a2616;
  font-family: var(--ff-body);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  /* Bord déchiré via clip-path */
  clip-path: polygon(0 8%, 4% 0, 12% 4%, 28% 0, 45% 5%, 62% 0, 78% 4%, 92% 0, 100% 6%, 99% 92%, 90% 100%, 75% 95%, 60% 100%, 45% 96%, 28% 100%, 14% 96%, 5% 100%, 0 90%);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
.hm-choice:hover { transform: translateY(-2px) rotate(-.5deg); filter: brightness(1.05); }
.hm-choice .hm-choice-ico {
  width: 28px; height: 28px;
  background: rgba(236,79,153,.15);
  border: 1.5px solid var(--hm-pink);
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--hm-pink);
  flex-shrink: 0;
}
.hm-choice .hm-choice-text { flex: 1; font-size: .98rem; line-height: 1.25; }
.hm-choice .hm-choice-deltas {
  display: flex; gap: var(--gap-3);
  font-family: var(--ff-body);
  font-weight: 700; font-size: .82rem;
}
.hm-choice .delta-pos { color: #1f7a5b; }
.hm-choice .delta-neg { color: #b8344a; }

/* Stickers contextuels accrochés au choix */
.hm-choice[data-tag="focus"]::after,
.hm-choice[data-tag="risky"]::after {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 64px; height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(8deg);
  filter: drop-shadow(var(--shadow-sticker));
}
.hm-choice[data-tag="focus"]::after { background-image: url('sticker-focus.png'); }
.hm-choice[data-tag="risky"]::after { background-image: url('sticker-risky.png'); }

/* ─── POST-IT OBJECTIF ─── */
.hm-postit {
  position: relative;
  width: 180px;
  background: url('postit-yellow.png') center/cover;
  padding: 38px 16px 22px;
  font-family: var(--ff-handwriting);
  font-size: .92rem;
  color: #1a1a0d;
  transform: rotate(-3deg);
  filter: drop-shadow(var(--shadow-paper));
  min-height: 140px;
}
.hm-postit::before {
  content: 'OBJECTIF';
  position: absolute; top: 10px; left: 16px;
  font-family: var(--ff-handwriting);
  font-size: .7rem; letter-spacing: .15em;
  color: #1a1a0d; opacity: .7;
}

/* ─── SIDEBAR STATS (desktop) ─── */
.hm-sidebar {
  display: flex; flex-direction: column; gap: var(--gap-2);
  padding: var(--gap-4) var(--gap-3);
  font-family: var(--ff-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hm-sidebar .hm-stat {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--gap-2);
  align-items: center;
  font-size: .78rem;
  color: var(--hm-text);
}
.hm-sidebar .hm-stat-bar {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
.hm-sidebar .hm-stat-fill {
  height: 100%; width: 0;
  background: var(--hm-pink);
  transition: width var(--dur-base) var(--ease-out);
}
.hm-sidebar .hm-stat-val {
  font-family: var(--ff-display);
  font-size: .92rem;
  color: var(--hm-text);
  min-width: 28px; text-align: right;
}

/* ─── HUD HAUT ─── */
.hm-hud {
  display: flex; align-items: center; gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  font-family: var(--ff-display);
  letter-spacing: .04em;
}
.hm-hud .hm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--hm-border);
  border-radius: 999px;
  color: var(--hm-text);
  font-size: .9rem;
  text-transform: uppercase;
}
.hm-hud .hm-pill--week {
  background: var(--hm-pink);
  color: #1a0a14;
  border-color: var(--hm-pink-soft);
  font-weight: 700;
}

/* ─── ANIMATIONS UTILITAIRES ─── */
@keyframes hm-shake-x {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
@keyframes hm-pop-in {
  from { transform: scale(.6) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes hm-float-up {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-60px); opacity: 0; }
}
.hm-shake { animation: hm-shake-x .4s var(--ease-out); }
.hm-pop   { animation: hm-pop-in .35s var(--ease-out); }
.hm-float { animation: hm-float-up 1.4s var(--ease-out) forwards; }