:root {
  --obsidienne: #070a10;
  --obsidienne-2: #11151d;
  --obsidienne-3: #1a202b;
  --ambre: #ffb347;
  --ambre-sombre: #b56b12;
  --texte: #dde3ec;
  --texte-faible: #8d95a5;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--obsidienne);
}

body {
  color: var(--texte);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

#vue {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* ---------- Interface en jeu ---------- */

#hud {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#viseur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  opacity: .9;
}

#viseur i {
  position: absolute;
  display: block;
  background: var(--ambre);
  box-shadow: 0 0 6px rgba(255, 167, 51, .75);
}

#viseur .haut,
#viseur .bas {
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
}

#viseur .haut { top: 0; }
#viseur .bas { bottom: 0; }

#viseur .gauche,
#viseur .droite {
  top: 50%;
  width: 7px;
  height: 2px;
  margin-top: -1px;
}

#viseur .gauche { left: 0; }
#viseur .droite { right: 0; }

#mesures {
  position: absolute;
  left: 22px;
  bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  max-width: min(560px, calc(100vw - 44px));
  padding: 8px 12px;
  border-left: 2px solid var(--ambre-sombre);
  background: rgba(8, 11, 17, .55);
  color: var(--texte-faible);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}

#mesures b {
  color: var(--ambre);
  font-weight: 600;
}

#zone {
  color: var(--ambre);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.intro b {
  color: var(--texte);
  font-weight: 600;
}

/* ---------- Voile de départ / pause ---------- */

.voile {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(35, 42, 57, .75) 0%, rgba(6, 8, 13, .92) 70%),
    rgba(5, 7, 12, .72);
  backdrop-filter: blur(7px);
  animation: apparaitre .3s ease-out;
}

.voile[hidden] { display: none; }

@keyframes apparaitre {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panneau {
  width: 100%;
  max-width: 560px;
  padding: 34px 36px 30px;
  background: linear-gradient(160deg, rgba(20, 25, 35, .96), rgba(10, 13, 20, .96));
  border: 1px solid #232b3a;
  border-top: 2px solid var(--ambre-sombre);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.marque {
  display: inline-block;
  margin: 0 0 24px;
  padding: 6px 10px;
  border: 1px solid var(--ambre-sombre);
  border-radius: 2px;
  color: var(--ambre);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
}

h1 span { color: var(--ambre); }

.intro {
  margin: 0 0 24px;
  color: var(--texte-faible);
  font-size: 14px;
  line-height: 1.65;
}

.touches {
  display: grid;
  gap: 1px;
  margin: 0 0 26px;
  background: #1b2230;
  border: 1px solid #1b2230;
}

.touches div {
  display: flex;
  gap: 16px;
  padding: 9px 12px;
  background: var(--obsidienne-2);
  font-size: 13px;
}

.touches dt {
  flex: 0 0 118px;
  color: var(--ambre);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}

.touches dd {
  margin: 0;
  color: var(--texte-faible);
}

button {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--ambre-sombre);
  background: linear-gradient(180deg, var(--ambre), #e0912f);
  color: #1a1206;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.note {
  margin: 14px 0 0;
  color: #616a7a;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 520px) {
  .panneau { padding: 26px 22px 22px; }
  .touches dt { flex-basis: 96px; }
  #mesures { gap: 12px; font-size: 11px; }
}