/* Blindtrail : identité « carnet d'expédition nocturne ». Thème unique assumé. */
:root {
  --night: #0e1420;
  --night-2: #182238;
  --night-3: #1f2c47;
  --parchment: #e8dcc3;
  --parchment-dim: #b3a88f;
  --brass: #e0a458;
  --brass-dim: #9c7439;
  --signal: #c94f38;
  --font-display: "IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --font-antique: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --font-ui: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-data: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font-family: var(--font-ui);
  overflow: hidden;
}

#map {
  position: fixed;
  inset: 0;
  background: var(--night);
}
#fog {
  position: fixed;
  inset: 0;
  touch-action: none;
  cursor: crosshair;
  transition: opacity 0.9s ease;
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  row-gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem 0.85rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 13, 21, 0.9) 55%, rgba(9, 13, 21, 0));
  z-index: 500;
}
#hud[hidden] { display: none; }
.hud-left {
  display: flex;
  align-items: stretch;
  min-width: 0;
  flex: 0 1 auto;
}
.hud-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  padding-inline-start: 1rem;
  flex: 0 0 auto;
}
#btn-compass, #btn-giveup {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
#btn-compass .ico, #btn-giveup .ico { display: none; }
@media (max-width: 600px) {
  #btn-compass .btn-txt, #btn-giveup .btn-txt { display: none; }
  #btn-compass .ico, #btn-giveup .ico { display: block; }
  #btn-compass, #btn-giveup { padding: 0.45rem 0.55rem; gap: 0.25rem; }
}
.hud-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.22rem;
  white-space: nowrap;
  min-width: 0;
  padding-inline: 1.1rem;
  border-inline-start: 1px solid rgba(232, 220, 195, 0.14);
}
.hud-left .hud-block:first-child {
  padding-inline-start: 0;
  border-inline-start: none;
}
.hud-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--parchment-dim);
}
.hud-value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  line-height: 1.1;
  color: var(--parchment);
}
.hud-value.goal { color: var(--brass); font-weight: 500; }
#hud-target-label {
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
#btn-compass, #btn-giveup {
  pointer-events: auto;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  border-radius: var(--radius-s, 2px);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}
#btn-compass {
  color: var(--brass);
  background: rgba(24, 34, 56, 0.85);
  border: 1px solid var(--brass-dim);
}
#btn-compass:hover:not(:disabled) { background: var(--night-3); border-color: var(--brass); }
#btn-compass:disabled { color: var(--parchment-dim); border-color: rgba(179, 168, 143, 0.3); cursor: default; }
#btn-giveup {
  color: var(--parchment-dim);
  background: rgba(24, 34, 56, 0.6);
  border: 1px solid rgba(179, 168, 143, 0.3);
}
#btn-giveup:hover { color: var(--parchment); border-color: var(--parchment-dim); }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* Attribution OSM : obligatoire, mais fondue dans le brouillard */
#attribution {
  position: fixed;
  left: 0.9rem;
  bottom: 0.55rem;
  font-size: 0.6rem;
  z-index: 500;
}
#attribution a {
  color: rgba(179, 168, 143, 0.48);
  text-decoration: none;
}
#attribution a:hover { color: var(--parchment-dim); text-decoration: underline; }
[data-skin="modern"] #attribution a { color: rgba(156, 163, 175, 0.42); }

/* Pastille centrale basse (chrono, et rayon restant en mode kilometrage)
   sur mobile ; vide et invisible sur grand ecran. */
#hud-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.5rem; /* aligne avec le bouton volume */
  z-index: 500;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  pointer-events: none;
  background: rgba(9, 13, 21, 0.8);
  border: 1px solid rgba(232, 220, 195, 0.25);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
}
#hud-bottom:empty, #hud-bottom[hidden] { display: none; }
#hud-bottom .hud-block { border: none; padding: 0; align-items: center; text-align: center; }
#hud-bottom .hud-label { font-size: 0.55rem; }
#hud-bottom { gap: 0.9rem; }
#hud-bottom .hud-value { font-size: 1.05rem; }
#hud-bottom #hud-target-label { max-width: 52vw; font-size: 1rem; }
[data-skin="modern"] #hud-bottom {
  background: rgba(10, 11, 16, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
}

#minimap {
  position: fixed;
  right: 0.9rem;
  bottom: 0.9rem;
  border: 1px solid var(--brass-dim);
  outline: 1px solid rgba(9, 13, 21, 0.8);
  background: var(--night);
  z-index: 500;
}
#minimap[hidden] { display: none; }

#offline-note {
  position: fixed;
  top: 3.4rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 34rem);
  font-size: 0.78rem;
  color: var(--parchment);
  background: rgba(24, 34, 56, 0.92);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-s, 2px);
  padding: 0.45rem 0.8rem;
  z-index: 600;
  text-align: center;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: radial-gradient(ellipse at 50% 42%, rgba(24, 34, 56, 0.94), rgba(9, 13, 21, 0.97));
  z-index: 1000;
}
.overlay[hidden] { display: none; }
/* Defilement sans barre visible a l'interieur des cards */
.panel, .overlay { scrollbar-width: none; }
.panel::-webkit-scrollbar, .overlay::-webkit-scrollbar { display: none; }
/* Apres une victoire : voile plus leger, l'itineraire reste visible derriere */
.overlay.after-victory {
  background: radial-gradient(ellipse at 50% 42%, rgba(24, 34, 56, 0.62), rgba(9, 13, 21, 0.86));
}
.panel {
  max-width: 37rem;
  width: 100%;
  max-height: calc(100dvh - 2.4rem);
  overflow-y: auto;
  text-align: center;
  border: 1px solid rgba(232, 220, 195, 0.35);
  outline: 1px solid rgba(232, 220, 195, 0.12);
  outline-offset: 5px;
  background: rgba(14, 20, 32, 0.75);
  padding: 1.6rem 2rem 1.9rem;
}
.panel-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.skin-picker { display: flex; flex-direction: column; gap: 0.25rem; }
/* Libelles Interface / Langue : masques a l'ecran, gardes pour les lecteurs d'ecran */
.skin-picker .field-label, .lang-picker .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.seg-mini { font-size: 0; }
.seg-mini button { flex: 0 0 auto; font-size: 0.72rem; padding: 0.32rem 0.6rem; }
/* Accueil en deux colonnes sur grand ecran : recit a gauche, reglages et
   bouton de lancement a droite, tout visible sans defilement. */
.panel-start {
  max-width: 64rem;
  position: relative;
  padding: 2rem 2.4rem 2.2rem;
}
.panel-start .panel-top {
  position: absolute;
  top: 1rem;
  inset-inline: 1.2rem;
  z-index: 1;
}
.panel-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 3rem;
  align-items: center;
}
.panel-col-left { min-width: 0; }
.panel-col-right { min-width: 0; display: flex; flex-direction: column; padding-top: 2.4rem; }
.panel-col-right .settings { margin: 0 0 1.3rem; max-width: none; }
.panel-col-right .btn-primary { align-self: center; }
.panel-col-right .status { text-align: center; }
@media (max-width: 940px) {
  .panel-start { max-width: 37rem; }
  .panel-start .panel-top { position: static; margin-bottom: 0.4rem; }
  .panel-cols { grid-template-columns: 1fr; gap: 1.5rem 0; }
  .panel-col-right { padding-top: 0; }
}
.lang-picker {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
}
[dir="rtl"] .lang-picker { align-items: flex-start; }
.rose { display: block; margin: 0 auto 0.6rem; }
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6.5vw, 3rem);
  line-height: 1.05;
  margin: 0.4rem 0 0.3rem;
  color: var(--parchment);
  text-wrap: balance;
}
h1 .accent { color: var(--brass); }
.tagline {
  font-family: var(--font-antique);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--parchment-dim);
  margin: 0 0 1.2rem;
}
[dir="rtl"] .tagline, [lang="zh"] .tagline, [lang="ja"] .tagline, [lang="ko"] .tagline, [lang="th"] .tagline, [lang="hi"] .tagline {
  font-family: var(--font-ui);
  font-style: normal;
}
.rules {
  text-align: start;
  margin: 0 auto 1.3rem;
  max-width: 31rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--parchment);
}
.rules p { margin: 0; padding-inline-start: 1.1rem; position: relative; }
.rules p::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.52em;
  width: 0.35rem;
  height: 0.35rem;
  background: var(--brass);
  transform: rotate(45deg);
}
.rules kbd {
  font-family: var(--font-data);
  font-size: 0.8em;
  border: 1px solid rgba(232, 220, 195, 0.35);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  background: rgba(24, 34, 56, 0.8);
}

/* ---------- Réglages ---------- */
.settings {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0 auto 1.4rem;
  max-width: 31rem;
  text-align: start;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--parchment-dim);
}
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(232, 220, 195, 0.16);
  border: 1px solid rgba(232, 220, 195, 0.16);
}
#seg-diff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.seg button {
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--parchment-dim);
  background: rgba(14, 20, 32, 0.92);
  border: none;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { color: var(--parchment); }
.seg button.on {
  color: var(--night);
  background: var(--brass);
  font-weight: 600;
}
select, input[type="text"] {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--parchment);
  background: var(--night-2);
  border: 1px solid rgba(232, 220, 195, 0.25);
  border-radius: var(--radius-s, 2px);
  padding: 0.45rem 0.55rem;
  width: 100%;
}
.lang-picker select { width: auto; padding: 0.3rem 0.4rem; font-size: 0.78rem; }
input::placeholder { color: var(--parchment-dim); opacity: 0.7; }
.aids {
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: start;
}
.aids p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--parchment-dim);
  padding-inline-start: 0.95rem;
  position: relative;
}
.aids p::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.48em;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--brass);
  transform: rotate(45deg);
}
.aids strong { color: var(--brass); font-weight: 600; }
[dir="rtl"] .aids, [lang="zh"] .aids, [lang="ja"] .aids, [lang="ko"] .aids, [lang="th"] .aids, [lang="hi"] .aids {
  font-family: var(--font-ui);
  font-style: normal;
}

.btn-primary {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--night);
  background: var(--brass);
  border: none;
  border-radius: var(--radius-s, 2px);
  padding: 0.8rem 1.8rem;
  cursor: pointer;
}
.btn-primary:hover:not(:disabled) { background: #ecb76f; }
.btn-primary:disabled { background: var(--brass-dim); cursor: wait; }
.btn-ghost {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--parchment-dim);
  background: transparent;
  border: 1px solid rgba(232, 220, 195, 0.3);
  border-radius: var(--radius-s, 2px);
  padding: 0.8rem 1.4rem;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--parchment); border-color: var(--parchment-dim); }
.status {
  min-height: 1.2em;
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--parchment-dim);
}
.status.error { color: var(--signal); }

/* ---------- Fin de partie ---------- */
.end-line {
  font-family: var(--font-antique);
  font-style: italic;
  font-size: 1rem;
  color: var(--parchment);
  margin: 0 0 1.3rem;
}
[dir="rtl"] .end-line, [lang="zh"] .end-line, [lang="ja"] .end-line, [lang="ko"] .end-line, [lang="th"] .end-line, [lang="hi"] .end-line {
  font-family: var(--font-ui);
  font-style: normal;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(232, 220, 195, 0.18);
  border: 1px solid rgba(232, 220, 195, 0.18);
  margin: 0 0 1.2rem;
}
.stat { background: rgba(14, 20, 32, 0.9); padding: 0.75rem 0.5rem 0.65rem; }
.stat .k {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--parchment-dim);
  margin-bottom: 0.3rem;
}
.stat .v {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: var(--brass);
}
.end-record {
  font-size: 0.8rem;
  color: var(--parchment-dim);
  margin: 0 0 1.2rem;
  min-height: 1.1em;
}
.end-record .new-record { color: var(--brass); }
.end-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

/* Boîte de confirmation d'abandon */
.panel-small { max-width: 24rem; padding: 1.7rem 1.6rem 1.5rem; }
.confirm-text { font-size: 0.95rem; line-height: 1.5; margin: 0 0 1.3rem; }
.btn-primary.danger { background: var(--signal); color: #f6ede0; }
.btn-primary.danger:hover { background: #d8654e; }

/* Ordre de mission (briefing) */
.panel-brief { max-width: 29rem; padding: 2rem 1.9rem 1.8rem; }
.brief-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass);
  margin: 0 0 1.1rem;
}
.brief-line {
  font-size: 0.84rem;
  color: var(--parchment-dim);
  margin: 0 0 0.45rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  min-height: 1.2em;
}
.brief-line.shown { opacity: 1; transform: translateY(0); }
.brief-bar {
  height: 2px;
  background: rgba(232, 220, 195, 0.14);
  margin: 0.8rem auto 0.8rem;
  max-width: 20rem;
  overflow: hidden;
}
.brief-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brass);
  transition: width 4.5s cubic-bezier(0.25, 0.6, 0.3, 1);
}
.brief-bar.full i { transition: width 0.4s ease; width: 100% !important; }
.brief-status { font-family: var(--font-data); font-size: 0.74rem; }
.brief-dest-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--parchment-dim);
  margin: 1.1rem 0 0.2rem;
}
.brief-dest {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  line-height: 1.15;
  color: var(--parchment);
  margin: 0 0 1.5rem;
  min-height: 1.3em;
  opacity: 0;
  text-wrap: balance;
}
.brief-dest.revealed {
  opacity: 1;
  letter-spacing: 0.02em;
  animation: destReveal 2.4s ease both;
}
@keyframes destReveal {
  from { opacity: 0; letter-spacing: 0.3em; filter: blur(4px); }
  to { opacity: 1; letter-spacing: 0.02em; filter: blur(0); }
}
[dir="rtl"] .brief-dest, [lang="zh"] .brief-dest, [lang="ja"] .brief-dest, [lang="ko"] .brief-dest, [lang="th"] .brief-dest, [lang="hi"] .brief-dest {
  font-family: var(--font-ui);
}

/* Defi du jour (accueil) */
.daily-card {
  border: 1px solid var(--brass-dim);
  background: rgba(224, 164, 88, 0.07);
  border-radius: var(--radius-s, 2px);
  padding: 0.85rem 0.95rem;
  margin: 1.2rem auto 0;
  max-width: 27rem;
  text-align: start;
}
/* En bas de page (mobile, defi joue) : pleine largeur comme les reglages */
.panel-col-right .daily-card {
  max-width: none;
  width: 100%;
}
[data-skin="modern"] .daily-card {
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.06);
  border-radius: 16px;
}
.daily-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.btn-daily { animation: dailyPulse 2.2s ease-out infinite; }
.btn-daily:disabled { animation: none; box-shadow: none; }
#daily-lb-slot .lb { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(232, 220, 195, 0.14); }
[data-skin="modern"] #daily-lb-slot .lb { border-top-color: rgba(255, 255, 255, 0.1); }
@keyframes dailyPulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 164, 88, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(224, 164, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 164, 88, 0); }
}
[data-skin="modern"] .btn-daily { animation-name: dailyPulseModern; }
@keyframes dailyPulseModern {
  0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(94, 234, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}
.daily-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.daily-title { font-weight: 600; font-size: 0.9rem; color: var(--brass); }
.daily-sub { font-size: 0.74rem; color: var(--parchment-dim); }
.btn-daily { padding: 0.55rem 1.1rem; font-size: 0.85rem; flex: 0 0 auto; }


/* Classement du jour (ecran de fin) */
.lb { margin: 0 0 1.2rem; text-align: start; }
.lb-title {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--parchment-dim);
  text-align: center;
  margin: 0 0 0.6rem;
}
.lb-form { display: flex; gap: 0.5rem; margin: 0 0 0.7rem; }
.lb-form input { flex: 1; }
.lb-form .btn-ghost { padding: 0.45rem 0.8rem; font-size: 0.78rem; white-space: nowrap; }
.lb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}
.lb-list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.32rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-s, 2px);
  color: var(--parchment);
}
.lb-list .rank { color: var(--parchment-dim); width: 1.6em; text-align: end; }
.lb-list .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); }
.lb-list li.me { border: 1px solid var(--brass-dim); color: var(--brass); }
.lb-empty { text-align: center; font-size: 0.8rem; color: var(--parchment-dim); margin: 0; }

/* Icone musique (fixe, en bas a gauche, visible partout) */
#btn-music-icon {
  position: fixed;
  left: 0.9rem;
  bottom: 2.5rem;
  z-index: 1100;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  background: rgba(24, 34, 56, 0.85);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-s, 2px);
  cursor: pointer;
  padding: 0;
}
#btn-music-icon:hover { background: var(--night-3); border-color: var(--brass); }
#btn-music-icon .mute-line { display: none; }
#btn-music-icon.muted { color: var(--parchment-dim); border-color: rgba(179, 168, 143, 0.35); }
#btn-music-icon.muted .wave { display: none; }
#btn-music-icon.muted .mute-line { display: block; }

/* Compteurs de contrainte presque épuisés */
.hud-value.low { color: var(--signal); }


/* Leaflet : neutraliser ce qui depasse du jeu */
.leaflet-control-container { display: none; }

@media (max-width: 640px) {
  /* Accueil et fin de partie : pleine page qui defile, plus de carte imbriquee */
  #start-overlay, #end-overlay {
    display: block;
    padding: 0;
    overflow-y: auto;
  }
  #start-overlay .panel, #end-overlay .panel {
    max-width: none;
    width: 100%;
    min-height: 100%;
    max-height: none;
    overflow: visible;
    border: none;
    outline: none;
    border-radius: 0;
    padding: 1.3rem 1.1rem 5rem;
  }
}
@media (max-width: 600px) {
  .panel { padding: 1.2rem 1rem 1.4rem; }
  #hud { padding: 0.5rem 0.6rem 0.7rem; }
  .hud-block { padding-inline: 0.7rem; }
  .hud-right { padding-inline-start: 0.5rem; }
  #hud-target-label { max-width: 44vw; }
  #minimap { width: 96px; height: 96px; top: 5rem; bottom: auto; }
  .seg button { font-size: 0.72rem; padding: 0.45rem 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ============================================================
   Habillage « Moderne » : verre depoli, angles arrondis, accent
   menthe sur noir neutre, typographie geometrique Outfit.
   ============================================================ */
[data-skin="modern"] {
  --night: #0a0b10;
  --night-2: #14151d;
  --night-3: #1d1f2a;
  --parchment: #f4f4f5;
  --parchment-dim: #9ca3af;
  --brass: #5eead4;
  --brass-dim: #2dd4bf;
  --signal: #fb7185;
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-antique: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --radius-s: 12px;
}
[data-skin="modern"] .rose { display: none; }
[data-skin="modern"] .overlay {
  background: rgba(6, 7, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-skin="modern"] .panel {
  background: rgba(17, 18, 26, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  outline: none;
  border-radius: 24px;
}
[data-skin="modern"] h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 6vw, 2.8rem);
}
/* Banniere logo en tete de l'accueil : elle emerge du fond puis se fond
   dans la card. Le h1 est masque, le wordmark de la banniere le remplace. */
[data-skin="modern"] .panel-start h1 { display: none; }
[data-skin="modern"] .panel-start::before {
  content: "";
  display: block;
  height: 190px;
  margin: -2rem -2.4rem -2.8rem;
  background: url("../branding/blindtrail-banniere-1500x500.png?v=42") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 640px) {
  [data-skin="modern"] #start-overlay .panel-start::before {
    height: calc(100vw / 3);
    margin: 0 -1.1rem -1.6rem;
    background-size: 100% auto;
    background-position: top center;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
  }
}
/* Colonne empilee : interface/langue remontent au-dessus de la banniere,
   posees sur le fond de la card */
@media (max-width: 940px) {
  [data-skin="modern"] .panel-start { display: flex; flex-direction: column; }
  [data-skin="modern"] .panel-start .panel-top { order: 0; margin-bottom: 0.9rem; }
  [data-skin="modern"] .panel-start::before { order: 1; margin-top: 0; }
  [data-skin="modern"] .panel-cols { order: 2; }
}
[data-skin="modern"] .tagline,
[data-skin="modern"] .end-line,
[data-skin="modern"] #end-city {
  font-style: normal;
}
[data-skin="modern"] .rules p::before,
[data-skin="modern"] .aids p::before {
  border-radius: 50%;
  transform: none;
}
[data-skin="modern"] .seg {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
}
[data-skin="modern"] .seg button {
  background: transparent;
  border-radius: 999px;
}
[data-skin="modern"] .seg button.on {
  background: var(--brass);
  color: #05201b;
}
[data-skin="modern"] select,
[data-skin="modern"] input[type="text"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-skin="modern"] .btn-primary {
  border-radius: 999px;
  color: #05201b;
  background: linear-gradient(120deg, #5eead4, #38bdf8);
}
[data-skin="modern"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(120deg, #7bf0de, #5ecbfa);
}
[data-skin="modern"] .btn-primary:disabled { background: #2b6b60; }
[data-skin="modern"] .btn-ghost,
[data-skin="modern"] #btn-compass,
[data-skin="modern"] #btn-giveup {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
[data-skin="modern"] #hud {
  background: linear-gradient(to bottom, rgba(5, 6, 10, 0.92) 55%, rgba(5, 6, 10, 0));
}
[data-skin="modern"] .hud-block {
  border-inline-start-color: rgba(255, 255, 255, 0.1);
}
[data-skin="modern"] #minimap {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.14);
  outline: none;
}
[data-skin="modern"] .stats {
  background: transparent;
  border: none;
  gap: 8px;
}
[data-skin="modern"] .stat {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
}
[data-skin="modern"] .brief-eyebrow { letter-spacing: 0.3em; }
[data-skin="modern"] .brief-bar { border-radius: 999px; }
[data-skin="modern"] .brief-bar i { background: linear-gradient(90deg, #5eead4, #38bdf8); }
[data-skin="modern"] .brief-dest { font-weight: 700; letter-spacing: -0.01em; }
[data-skin="modern"] #btn-music-icon {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(20, 21, 29, 0.85);
}
[data-skin="modern"] #attribution { border-radius: 8px; }
[data-skin="modern"] .rules kbd {
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}


/* Etiquette de distance restante (cinematique de defaite) */
.leaflet-tooltip.remain-tip {
  background: rgba(14, 20, 32, 0.92);
  border: 1px solid var(--signal);
  color: var(--parchment);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  border-radius: var(--radius-s, 2px);
  padding: 2px 8px;
  box-shadow: none;
}
.leaflet-tooltip.remain-tip::before { display: none; }
[data-skin="modern"] .leaflet-tooltip.remain-tip {
  background: rgba(20, 21, 29, 0.92);
  border-radius: 10px;
}