:root{
  --ink:#f4f1ea;
  --dim:rgba(244,241,234,.62);
  --glass:rgba(18,20,26,.62);
  --glass-hi:rgba(30,34,42,.78);
  --line:rgba(255,255,255,.12);
  --jura-red:#d5232c;
  --accent:#f0b429;
  --radius:14px;
  --shadow:0 10px 34px rgba(0,0,0,.45);
  --ui: ui-sans-serif, system-ui, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
/* les règles #id ci-dessous l'emportent sur le display:none par défaut de [hidden] */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:#0a0c10;color:var(--ink);font-family:var(--ui);
  overflow:hidden;-webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ───────────── chargement ───────────── */
#loader{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 12%,#243044 0%,#131820 48%,#0a0c10 100%);
  transition:opacity .7s ease, visibility .7s;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-box{width:min(90vw,460px);text-align:center;padding:8px}
.crest{
  width:56px;height:68px;margin:0 auto 18px;display:block;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.5));
}
#loader h1{
  margin:0;font-size:clamp(30px,7vw,46px);font-weight:800;letter-spacing:-.02em;
}
#loader h1 span{
  font-weight:300;opacity:.55;margin-left:.35em;
  font-variant-numeric:tabular-nums;
}
.tag{margin:.5em 0 26px;color:var(--dim);font-size:14.5px}
.bar{height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
#bar-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--jura-red),var(--accent));transition:width .35s ease}
#loader-step{margin:14px 0 0;font-size:12.5px;color:var(--dim);min-height:1.2em;font-variant-numeric:tabular-nums}
.credit{margin:26px 0 0;font-size:11px;color:rgba(244,241,234,.34);line-height:1.6}

/* ───────────── HUD ───────────── */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
#hud>*{pointer-events:auto}
.glass{
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}

/* haut gauche */
#topleft{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:10px;max-width:min(46vw,340px)}
#street-plate{
  background:#fbfaf6;color:#14161a;border:2px solid #14161a;border-radius:4px;
  padding:6px 14px;font-weight:700;font-size:15px;letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(0,0,0,.45);align-self:flex-start;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s;
}
#street-plate.empty{opacity:.35}

#mission{
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:12px 14px;min-width:240px;
}
.m-head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}
#m-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);letter-spacing:.02em}
#m-timer.urgent{color:#ff6b6b}
.m-target{font-size:17px;font-weight:700;margin:5px 0 8px;line-height:1.25}
.m-dist{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
#m-dist{font-size:14px;color:var(--accent);font-weight:600}
#m-arrow{font-size:19px;color:var(--accent);display:inline-block;transition:transform .09s linear;transform-origin:50% 50%}
.m-progress{height:3px;border-radius:99px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
#m-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--jura-red),var(--accent));border-radius:99px;transition:width .3s}

/* haut droite */
#topright{position:absolute;top:16px;right:16px}
#clock-box{
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:11px 13px;width:212px;
}
.clock-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#clock{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
#phase{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em}
.clock-row.small{margin-top:8px;align-items:center}
#time-slider{
  width:100%;margin:9px 0 0;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:linear-gradient(90deg,#1b2436 0%,#2f4468 14%,#e6a23c 26%,#9fd0f5 46%,#7fb6e8 62%,#e2743c 76%,#28324a 88%,#141a26 100%);
  outline:none;cursor:pointer;
}
#time-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;
  border:2px solid #11141a;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:grab;
}
#time-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #11141a;
  box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:grab;
}
.chk{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:6px;cursor:pointer}
.chk input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer}
.mini{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;font-size:13px;
  display:grid;place-items:center;padding:0;transition:background .15s;
}
.mini:hover{background:rgba(255,255,255,.16)}
.mini.off{opacity:.4}

/* minicarte */
#minimap-box{
  position:absolute;left:16px;bottom:16px;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:8px;
}
#minimap{display:block;width:200px;height:200px;border-radius:8px;background:#161a20}
#minimap-label{
  text-align:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-top:6px;
}

/* compteur */
#dash{position:absolute;right:16px;bottom:16px;width:200px;height:130px}
#gauge{position:absolute;inset:0;width:200px;height:130px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
#speed{position:absolute;left:0;right:0;bottom:6px;text-align:center;line-height:1}
#speed b{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  text-shadow:0 3px 12px rgba(0,0,0,.7)}
#speed i{display:block;font-style:normal;font-size:10px;letter-spacing:.22em;color:var(--dim);margin-top:3px}
#gear{
  position:absolute;right:6px;top:52px;font-size:13px;font-weight:700;color:var(--dim);
  border:1px solid var(--line);border-radius:7px;padding:2px 8px;background:rgba(0,0,0,.3);
}
/* altitude : n'apparaît qu'en vol, sinon c'est un zéro permanent qui ne dit rien */
#alt{
  position:absolute;right:6px;top:82px;font-size:12px;font-weight:600;
  color:rgba(125,196,255,.95);
  border:1px solid rgba(125,196,255,.34);border-radius:7px;padding:2px 8px;
  background:rgba(12,26,44,.45);font-variant-numeric:tabular-nums;
}
#alt b{font-weight:800}

/* barre de modes */
#modebar{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:min(92vw,720px);
}
.mode{
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);
  padding:9px 15px;border-radius:99px;cursor:pointer;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow);
  transition:background .15s,border-color .15s,transform .1s;white-space:nowrap;
}
.mode:hover{background:var(--glass-hi)}
.mode:active{transform:translateY(1px)}
.mode.active{background:var(--jura-red);border-color:rgba(255,255,255,.3)}
.mode.ghost{font-weight:500;color:var(--dim)}
.mode.ghost:hover{color:var(--ink)}

/* carte d'info */
#card,#help{
  position:absolute;inset:0;display:grid;place-items:center;z-index:30;
  background:rgba(6,8,12,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fade .25s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card-inner,.help-inner{
  position:relative;width:min(92vw,520px);max-height:82vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(30,34,42,.96),rgba(18,20,26,.97));
  border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.6);
  padding:28px 30px 24px;
}
.help-inner{width:min(92vw,600px)}
.card-close{
  position:absolute;top:12px;right:14px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);
  font-size:19px;line-height:1;cursor:pointer;padding:0;
}
.card-close:hover{background:rgba(255,255,255,.18)}
.card-sub{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
  font-weight:700;margin-bottom:8px;
}
#card h2,#help h2{margin:0 0 12px;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
#help h2{font-size:17px;margin-top:22px}
#help h2:first-of-type{margin-top:0}
#card p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(244,241,234,.82)}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}
#card-count{font-size:11.5px;color:var(--dim);letter-spacing:.06em}
#card-next{
  font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--jura-red);
  border:none;border-radius:99px;padding:10px 22px;cursor:pointer;transition:filter .15s;
}
#card-next:hover{filter:brightness(1.15)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:center;margin:0 0 6px}
.keys>div:nth-child(odd){display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.k-lab{font-size:13px;color:rgba(244,241,234,.72);line-height:1.4}
kbd{
  display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;
  background:rgba(255,255,255,.09);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;font:600 11.5px/1 var(--ui);color:var(--ink);
}
.keys span{font-size:11px;color:var(--dim)}
.help-note{font-size:13px;line-height:1.65;color:rgba(244,241,234,.72);margin:0 0 4px}
.signature{font-style:normal;font-size:13px;line-height:1.7;color:rgba(244,241,234,.72)}
.signature a{color:var(--jura-red);text-decoration:none;border-bottom:1px solid rgba(213,35,44,.45)}
.signature a:hover{border-bottom-color:var(--jura-red)}
.sources{margin:0 0 6px;padding-left:18px;font-size:12.5px;line-height:1.6;color:rgba(244,241,234,.72)}
.sources li{margin-bottom:7px}
.sources b{color:var(--ink);font-weight:700}
.sources i{color:rgba(244,241,234,.45);font-style:normal;font-size:11.5px}
#credit{
  position:absolute;right:16px;top:126px;max-width:210px;text-align:right;
  font-size:10px;line-height:1.5;color:rgba(244,241,234,.35);pointer-events:none;
}

/* toast */
#toast{
  position:absolute;left:50%;top:74px;transform:translateX(-50%);
  background:var(--glass-hi);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:99px;box-shadow:var(--shadow);
  padding:9px 20px;font-size:13px;font-weight:600;white-space:nowrap;
  animation:toastIn .3s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* erreur fatale */
#fatal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#0a0c10;padding:24px}
#fatal h2{margin:0 0 12px;font-size:20px}
#fatal pre{
  white-space:pre-wrap;font-size:12px;color:#ff9d9d;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:10px;padding:14px;max-width:min(90vw,700px);
  max-height:50vh;overflow:auto;
}

/* ───────────── commandes tactiles ───────────── */
/* le conteneur couvre l'écran pour placer ses deux coins : il ne doit donc rien
   intercepter, sans quoi plus aucun geste n'atteint le canevas (caméra, double-clic) */
#hud #tactile{position:absolute;inset:0;pointer-events:none;z-index:24}
#tactile>*{pointer-events:auto;touch-action:none;-webkit-touch-callout:none}

/* Le manche est dans le coin BAS DROIT, sous le pouce droit. Il était au centre, ce qui
   se tient sur un téléphone — le centre est le seul point qu'on atteint des deux mains,
   quel que soit le sens de l'appareil. Sur une TABLETTE c'est faux : le centre du bas
   n'est sous aucun pouce, et il faut lâcher l'appareil pour l'atteindre. Un pouce, une
   commande : le manche à droite, la montée à gauche, et le compteur remonte au-dessus. */
#manche{
  position:absolute;right:16px;bottom:16px;
  width:146px;height:146px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(26,30,40,.55),rgba(10,12,18,.40));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.manche-socle{
  position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(255,255,255,.13);
  font-size:11px;color:rgba(244,241,234,.30);
}
.manche-socle span{position:absolute;line-height:1;transition:color .12s}
.m-h{top:5px;left:50%;transform:translateX(-50%)}
.m-b{bottom:5px;left:50%;transform:translateX(-50%)}
.m-g{left:6px;top:50%;transform:translateY(-50%)}
.m-d{right:6px;top:50%;transform:translateY(-50%)}
#manche.avant .m-h{color:rgba(110,231,183,.95)}
#manche.arriere .m-b{color:rgba(213,35,44,.95)}
#manche-pouce{
  width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.34),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.32);box-shadow:0 6px 16px rgba(0,0,0,.55);
  transition:transform .16s ease-out;
}
/* pouce posé : plus de transition, la direction doit coller au doigt */
#manche.prise #manche-pouce{transition:none;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.48),rgba(255,255,255,.14))}

/* Le menu des modes ne sert qu'en tactile : ailleurs la barre est toujours visible,
   au centre du bas. Les deux coins du bas sont pris par les commandes, donc son bouton
   va au MILIEU : c'est le point le moins sollicité du bas, et on n'y appuie que par
   intention. Le panneau s'ouvre juste au-dessus — un menu qui s'ouvre loin de son
   bouton se cherche. */
#btn-menu{display:none}
body.tactile #btn-menu{
  display:grid;place-items:center;position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
  width:56px;height:56px;padding:0;border-radius:50%;font:400 21px/1 var(--ui);
  color:var(--ink);background:var(--glass);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);
  cursor:pointer;transition:background .15s,transform .1s;
}
body.tactile.menu #btn-menu{background:var(--jura-red);border-color:rgba(255,255,255,.3)}

/* ───────────── écran tactile : le bas de l'écran appartient aux pouces ─────────────
   La minicarte et le compteur y étaient ; ils remontent, et le compteur devient une
   pastille entre les deux commandes. */
body.tactile #minimap-box{left:auto;bottom:auto;right:12px;top:118px;padding:6px}
body.tactile #minimap{width:96px;height:96px}
body.tactile #minimap-label{display:none}
body.tactile #credit{display:none}          /* les sources restent dans l'aide */
body.tactile #topright{top:12px;right:12px}
body.tactile #clock-box{width:178px;padding:9px 10px}
body.tactile #clock{font-size:18px}
body.tactile #phase{font-size:9.5px}
body.tactile #topleft{top:12px;left:12px;max-width:46vw}
body.tactile #street-plate{font-size:13px;padding:5px 10px}
/* la colonne se cale sur la plaque de rue : sans largeur propre, l'objectif et le
   chronomètre se chevauchent */
body.tactile #mission{min-width:172px;padding:9px 11px}
body.tactile .m-head{font-size:9.5px;letter-spacing:.08em}
body.tactile .m-target{font-size:14px;margin:4px 0 6px}

body.tactile #dash{
  left:16px;right:auto;bottom:86px;transform:none;width:auto;height:auto;
  display:flex;align-items:baseline;gap:8px;padding:6px 15px;border-radius:99px;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
body.tactile #gauge{display:none}
body.tactile #speed{position:static;display:flex;align-items:baseline;gap:5px}
body.tactile #speed b{font-size:23px;text-shadow:none}
body.tactile #speed i{display:inline;margin:0;font-size:9px}
body.tactile #gear{position:static;padding:1px 7px;font-size:11px;background:none;border-color:transparent}
body.tactile #alt{position:static;padding:1px 7px;font-size:11px;background:none}

/* La montée est un TROISIÈME axe : il n'y a pas moyen de la loger sur le manche, qui
   donne déjà les gaz et la direction. Elle prend donc le coin BAS GAUCHE, sous le pouce
   resté libre, en miroir du manche — et non un troisième coin, qu'il faudrait chercher. */
#btn-alt{display:none}
body.tactile #btn-alt{
  display:grid;place-items:center;position:absolute;left:16px;bottom:16px;
  width:56px;height:56px;padding:0;border-radius:50%;font:400 19px/1 var(--ui);
  color:rgba(125,196,255,.95);
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(125,196,255,.30);box-shadow:var(--shadow);cursor:pointer;
}
body.tactile #btn-alt.prise{background:rgba(52,120,196,.55);border-color:rgba(170,220,255,.6)}

/* les modes passent sous le bouton ☰ : il n'y a plus de place en bas */
body.tactile #modebar{display:none}
body.tactile.menu #modebar{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  left:50%;right:auto;bottom:82px;top:auto;transform:translateX(-50%);max-width:210px;z-index:26;
}
body.tactile #toast{top:auto;bottom:180px;white-space:normal;max-width:66vw;text-align:center;font-size:12.5px}
body.tactile .card-inner,body.tactile .help-inner{padding:22px 20px 20px}

/* écran court (téléphone couché) : tout se resserre */
@media (max-height:460px){
  #manche{width:122px;height:122px;right:12px;bottom:12px}
  #manche-pouce{width:52px;height:52px}
  body.tactile #btn-menu{width:48px;height:48px;bottom:12px;font-size:18px}
  body.tactile #btn-alt{width:48px;height:48px;left:12px;bottom:12px;font-size:17px}
  body.tactile.menu #modebar{bottom:68px;gap:5px}
  body.tactile #minimap{width:78px;height:78px}
  body.tactile #dash{left:12px;bottom:70px}
  body.tactile #toast{bottom:150px}
}

/* petits écrans */
@media (max-width:900px){
  #minimap{width:132px;height:132px}
  #dash{width:150px;height:98px}
  #gauge{width:150px;height:98px}
  #speed b{font-size:28px}
  #gear{top:38px;font-size:11px}
  #modebar{bottom:auto;top:auto;bottom:156px}
  #clock-box{width:180px}
  #topleft{max-width:52vw}
}
@media (max-width:560px){
  #minimap-box{padding:6px}
  #minimap{width:104px;height:104px}
  #minimap-label{display:none}
  .mode{font-size:11.5px;padding:8px 12px}
  #street-plate{font-size:13px;padding:5px 10px}
}