* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: #140b08; color: #fff;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  display: flex; justify-content: center;
}
#titre {
  position: fixed; left: 50%; z-index: 5; margin: 0; white-space: nowrap; text-align: center;
  font-family: Impact, "Arial Black", sans-serif; letter-spacing: 2px;
  background: linear-gradient(#fff3b0, #e0a81e 60%, #9a6208); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 6px #000a);
  top: 6px; font-size: 30px; transform: translate(-50%, 0);
  transition: top 1s ease, font-size 1s ease, transform 1s ease;
  pointer-events: none;
}
body.menu #titre { top: 42%; font-size: min(8.5vw, 120px); transform: translate(-50%, -50%); }
#jeu { width: min(940px, 100%); padding: 52px 12px 12px; text-align: center; }
#regle { margin: 0 0 8px; font-size: 20px; font-weight: bold; color: #ffd45a; min-height: 26px; }
#serie { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.pastille {
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid #7a5a3a;
  background: #2a1a10; transition: .25s;
}
.pastille.ok { background: radial-gradient(circle at 35% 30%, #fff3b0, #e0a81e); border-color: #ffd45a; transform: scale(1.12); }
#scene { position: relative; }
canvas { image-rendering: pixelated; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 8px 30px #0008; display: block; }
#message {
  position: absolute; left: 0; right: 0; top: 14px; font-size: clamp(18px, 4vw, 34px);
  font-weight: bold; text-shadow: 0 3px 8px #000; pointer-events: none; opacity: 0; transition: opacity .3s;
}
#message.visible { opacity: 1; }
#choix {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 8%; background: #000b; border-radius: 14px; opacity: 0; pointer-events: none; transition: opacity .6s;
}
body.menu #choix { opacity: 1; pointer-events: auto; }
#choix p { font-size: clamp(18px, 3vw, 28px); margin: 0 0 14px; text-shadow: 0 2px 6px #000; }
#choix div { display: flex; gap: 24px; }
#choix button { font-size: clamp(20px, 4vw, 36px); padding: 14px 44px; }
#barre { margin-top: 12px; display: flex; gap: 20px; align-items: center; justify-content: center; }
body.menu #barre, body.menu #serie, body.menu #regle { visibility: hidden; }
button {
  font: inherit; font-size: 20px; font-weight: bold; padding: 12px 28px; border: 0; border-radius: 30px;
  background: linear-gradient(#ffd45a, #e09a10); color: #3a2500; cursor: pointer; box-shadow: 0 4px 0 #8a5a00;
}
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a00; }
button:disabled { opacity: .5; cursor: default; }
#regle { display: none; }
canvas { touch-action: none; }
body.darts #barre, body.darts #serie { visibility: hidden; }
body.darts #titre { visibility: hidden; }
body.hors #barre, body.hors #serie { visibility: hidden; }
#indice {
  position: fixed; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 6; padding: 12px 22px; border-radius: 14px;
  background: #000c; border: 3px solid #ffd45a; font-size: 22px; opacity: 0; pointer-events: none; transition: opacity .25s;
}
#indice.visible { opacity: 1; }
#indice b { display: inline-block; background: #ffd45a; color: #3a2500; padding: 0 10px; border-radius: 6px; }
#lieu { position: fixed; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 6; display: none; }
#lieu.visible { display: block; }
#carte { position: fixed; inset: 0; z-index: 10; background: #000a; display: none; align-items: center; justify-content: center; }
#carte.ouverte { display: flex; }
.carte-boite { width: min(640px, 94vw); background: #fff; color: #222; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px #000a; }
.carte-haut { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 18px; }
.carte-haut b { color: #1a73e8; font-size: 22px; }
.carte-haut span { flex: 1; text-align: left; color: #555; }
#carte-fermer { padding: 4px 12px; font-size: 16px; background: #eee; box-shadow: none; color: #333; }
.carte-plan { position: relative; aspect-ratio: 16 / 10; }
.carte-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.epingle { position: absolute; transform: translate(-50%, -100%); padding: 8px 12px 12px; background: none; box-shadow: none; display: flex; flex-direction: column; align-items: center; color: #222; font-size: 14px; }
.epingle i { width: 26px; height: 26px; background: var(--c); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 2px 6px #0006; }
.epingle span { background: #fffd; padding: 1px 8px; border-radius: 8px; margin-top: 4px; }
.epingle:hover i { transform: rotate(-45deg) scale(1.2); }
.epingle::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }