/*
  Direction artistique du Devtober : fond #0D0D0D, texte #E0E0E0, accent #FF0055.
  Le rose n'apparaît que sur ce qui est actif ou allumé. Traits de 1px, pas de flou ni de lueur.
  Police : Courier New (comme Loop). Pour Geist (comme Pulse), voir 01-Pulse/index.html.
*/
:root {
  --bg: #0d0d0d;
  --surface: #111111;
  --text: #e0e0e0;
  --muted: #8c8c8c;
  --dim: #5a5a5a;
  --line: #1f1f1f;
  --line-strong: #333333;
  --pink: #ff0055;
  /* les couleurs des raretés : commun gris, rare bleu, épique violet, légendaire or */
  --rare: #4aa8ff;
  --epic: #b46cff;
  --legend: #ffc83a;
  --font: "Courier New", Courier, monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color-scheme: dark;
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--font);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--pink);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

/* Marqueur de section : ">> titre" */
.mark {
  margin: 0;
  color: var(--muted);
}

.mark::before {
  content: ">> ";
  color: var(--pink);
}

/* ---------- En-tête ---------- */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 28px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
}

.right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#sTime {
  color: var(--text);
}

/* en dehors d'une partie, temps, niveau et tués ne disent rien */
body:not(.playing) .stat {
  display: none;
}

.btn {
  min-height: 34px;
  padding: 3px 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
}

.btn:hover:not(:disabled) {
  border-color: var(--pink);
  color: var(--pink);
}

.btn[hidden] {
  display: none;
}

.btn.go {
  border-color: var(--pink);
  background: var(--pink);
  color: var(--bg);
  font-weight: 700;
}

.btn.go:hover {
  background: #fff;
  border-color: #fff;
  color: var(--bg);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Le jeu ---------- */
main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.play {
  position: relative;
  flex: 1;
  min-width: 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}

#cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* les jauges : vie à gauche, expérience en filet sur toute la largeur */
.bars[hidden] {
  display: none;
}

.bar {
  position: absolute;
  background: var(--line);
}

.bar i {
  display: block;
  height: 100%;
  background: var(--text);
}

.bar.xp {
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
}

.bar.xp i {
  background: var(--pink);
}

.bar.hp {
  top: 14px;
  left: 14px;
  width: min(220px, 50vw);
  height: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

/* dix segments, comme des cellules de vie */
.bar.hp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), var(--bg) calc(10% - 2px), var(--bg) 10%);
  pointer-events: none;
}

.bar.hp.low i {
  background: var(--pink);
}

/* la vie en chiffres, à droite de sa barre ; le score en haut à droite */
.hptxt {
  position: absolute;
  top: 10px;
  left: calc(14px + min(220px, 50vw) + 8px);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.scoretxt {
  position: absolute;
  top: 10px;
  right: 14px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bar.dash {
  top: 28px;
  left: 14px;
  width: min(220px, 50vw);
  height: 3px;
}

.bar.dash i {
  background: var(--muted);
}

/* le boss : une barre au milieu en haut tant qu'il est là */
.bossbar {
  position: absolute;
  top: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(280px, 40vw);
  transform: translateX(-50%);
  color: var(--pink);
  font-size: 12px;
  pointer-events: none;
}

.bossbar[hidden] {
  display: none;
}

.bossbar .bar {
  position: relative;
  flex: 1;
  height: 6px;
}

.bossbar .bar i {
  background: var(--pink);
}

/* les améliorations prises */
.chips {
  position: absolute;
  bottom: 10px;
  left: 14px;
  right: 120px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  pointer-events: none;
}

.chips span {
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 18px;
}

/* le bouton dash, utile au doigt */
.dashbtn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 76px;
  height: 76px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--dim);
  touch-action: none;
}

.dashbtn[hidden] {
  display: none;
}

.dashbtn.ready {
  border-color: var(--text);
  color: var(--text);
}

.dashbtn:active {
  border-color: var(--pink);
  color: var(--pink);
}

/* il reste peu de vie : un cadre rose autour du jeu */
.play.low::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--pink);
  pointer-events: none;
}

.banner {
  position: absolute;
  top: 44px;
  left: 50%;
  margin: 0;
  padding: 4px 14px;
  border: 1px solid var(--pink);
  background: var(--bg);
  color: var(--pink);
  transform: translateX(-50%);
  pointer-events: none;
}

.banner[hidden] {
  display: none;
}

/* ---------- Écrans : menu, niveau, pause, fin ---------- */
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* « safe » : si le contenu dépasse, on peut remonter tout en haut */
  gap: 14px;
  padding: 20px 16px;
  background: rgba(13, 13, 13, 0.92);
  overflow-y: auto;
}

.panel.clear {
  background: rgba(13, 13, 13, 0.84);
}

.panel[hidden] {
  display: none;
}

.panel .mark {
  font-size: 16px;
}

#pBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(460px, 100%);
  text-align: center;
}

#pBody p {
  margin: 0;
  color: var(--muted);
}

#pBody .big {
  color: var(--text);
  font-size: 28px;
  line-height: 1.2;
}

#pBody .small {
  font-size: 12px;
  color: var(--dim);
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.diff .btn[aria-pressed="true"] {
  border-color: var(--pink);
  color: var(--pink);
}

.logo-px {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 24px;
  margin: 0;
  text-align: left;
}

.stats dt {
  color: var(--muted);
}

.stats dd {
  margin: 0;
  color: var(--text);
  text-align: right;
}

/* le tableau des scores */
.board {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  text-align: right;
}

.board th {
  color: var(--muted);
  font-weight: normal;
  padding: 2px 8px;
}

.board td {
  color: var(--text);
  padding: 2px 8px;
}

.board tr.me td {
  color: var(--pink, #ff4fa3);
}

/* les trois choix au niveau supérieur */
.cards {
  display: grid;
  gap: 10px;
  width: 100%;
}

.card {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  text-align: left;
}

.card:hover,
.card:focus-visible {
  border-color: var(--pink);
}

.card b {
  display: block;
  color: var(--text);
}

.card span {
  color: var(--muted);
}

.card .lv {
  float: right;
  color: var(--dim);
}

/* La rareté se lit à la bordure :
   r0 commun (grise) · r1 rare (bleue) · r2 épique (violette) · r3 légendaire (or, avec lueur) · r4 évolution (rose) */
.card.r1 {
  border-color: var(--rare);
}

.card.r1 .lv {
  color: var(--rare);
}

.card.r2 {
  border-color: var(--epic);
  background: #0f0a16;
}

.card.r2 .lv {
  color: var(--epic);
}

.card.r3 {
  border: 2px solid var(--legend);
  background: #1a1405;
  box-shadow: 0 0 14px rgba(255, 200, 58, 0.35);
}

.card.r3 .lv {
  color: var(--legend);
}

.card.r4 {
  border: 2px solid var(--pink);
  background: #16080d;
}

.card.r4 .lv {
  color: var(--pink);
}

.card.r4 b {
  color: var(--pink);
}

.chips span.evo {
  border-color: var(--pink);
  color: var(--pink);
}

.card kbd {
  margin-right: 8px;
  color: var(--pink);
  font: inherit;
}

@media (max-width: 700px) {
  .top {
    height: 54px;
    padding: 0 12px;
  }

  .right {
    gap: 10px;
  }

  body .stat#sKills {
    display: none;
  }

  /* l'en-tête est étroit : le nom du jeu devient un point */
  .logo {
    font-size: 0;
  }

  .logo i {
    width: 10px;
    height: 10px;
  }

  body .foot {
    display: none;
  }
}

/* ---------- Pied de page : les crédits ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 28px;
  padding: 12px 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
}

.foot p {
  margin: 0;
}

.foot .mark {
  display: inline;
  margin-right: 8px;
}

.foot nav {
  display: flex;
  gap: 6px 16px;
}

.foot a {
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}

.foot a:hover {
  color: var(--pink);
  border-color: var(--pink);
}

/* Les animations CSS s'arrêtent si le navigateur le demande (les boucles en JS testent `calm`, voir script.js) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

#pBody .small a {
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}

/* à la souris, la touche Espace suffit : le bouton dash ne sert qu'au doigt */
@media (hover: hover) and (pointer: fine) {
  .dashbtn {
    display: none;
  }
}

.how {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
  text-align: left;
}

.how dt {
  color: var(--pink);
}

.how dd {
  margin: 0;
  color: var(--muted);
}

/* le personnage choisi, dans le menu */
.hero-prev {
  display: block;
  width: 80px;
  height: auto;
  margin: 4px auto;
  image-rendering: pixelated;
}

/* les choix de difficulté et de personnage tiennent sur moins de lignes */
.row.diff {
  gap: 6px;
}

/* Le type d'une arme : une carte à part, plus marquée que la rareté du tirage.
   rare (bleu) · épique (violet, avec lueur) · légendaire (or, avec lueur) */
.card.tier-rare {
  border: 2px solid var(--rare);
  background: #07121e;
}

.card.tier-rare .lv {
  color: var(--rare);
}

.card.tier-epic {
  border: 2px solid var(--epic);
  background: #110a1c;
  box-shadow: 0 0 14px rgba(180, 108, 255, 0.35);
}

.card.tier-epic .lv {
  color: var(--epic);
}

.card.tier-legend {
  border: 2px solid var(--legend);
  background: #1a1405;
  box-shadow: 0 0 14px rgba(255, 200, 58, 0.35);
}

.card.tier-legend .lv {
  color: var(--legend);
}

/* une carte de mutation : turquoise, à part de l'échelle des raretés */
.card.mut {
  border: 2px solid #4dffd0;
  background: #06130f;
  box-shadow: 0 0 14px rgba(77, 255, 208, 0.25);
}

.card.mut .lv {
  color: #4dffd0;
}