/* Fort Boyard 2026 — pierre, or et torches. */
:root {
  --stone-0:#0d0a08; --stone-1:#171210; --stone-2:#221a15; --stone-3:#31251d;
  --gold:#d8a83a; --gold-hi:#f7dd8f; --gold-dim:#8a6b25;
  --blood:#8c2b1a; --moss:#3f5a3a; --sea:#1b3a4a;
  --parch:#e9dcbd; --ink:#2b2118;
  --ok:#5fa855; --ko:#b0402e;
  --shadow:0 12px 40px rgba(0,0,0,.65);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  min-height:100vh; color:var(--parch);
  font-family:"Spectral","Georgia",serif;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(216,168,58,.13), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(140,43,26,.15), transparent 60%),
    linear-gradient(180deg, var(--stone-1), var(--stone-0));
  background-attachment:fixed;
  overflow-x:hidden;
}
/* Grain de pierre */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 4px);
}

h1,h2,h3,.display { font-family:"Cinzel","Georgia",serif; font-weight:700; letter-spacing:.06em; }

/* ─── Barre haute ─────────────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1.4rem;
  background:linear-gradient(180deg, rgba(13,10,8,.96), rgba(13,10,8,.75));
  border-bottom:1px solid rgba(216,168,58,.28);
  backdrop-filter:blur(8px);
}
.brand { font-family:"Cinzel",serif; font-size:1.15rem; color:var(--gold-hi);
         text-shadow:0 0 18px rgba(216,168,58,.4); white-space:nowrap; }
.brand small { display:block; font-family:"Spectral",serif; font-size:.62rem;
               letter-spacing:.34em; color:var(--gold-dim); text-shadow:none; }
.spacer { flex:1 1 auto; }

.keyring { display:flex; gap:.28rem; align-items:center; }
.keyring .k {
  font-size:1.35rem; line-height:1; filter:grayscale(1) brightness(.35);
  transition:filter .5s, transform .5s, text-shadow .5s;
}
.keyring .k.on {
  filter:none; transform:translateY(-2px) rotate(-8deg);
  text-shadow:0 0 14px rgba(247,221,143,.85);
}
.count { font-family:"Cinzel",serif; color:var(--gold); font-size:.9rem; letter-spacing:.1em; }

.iconbtn {
  background:rgba(216,168,58,.08); border:1px solid rgba(216,168,58,.32);
  color:var(--gold-hi); border-radius:7px; padding:.42rem .62rem; cursor:pointer;
  font-size:1rem; line-height:1; transition:.2s;
}
.iconbtn:hover { background:rgba(216,168,58,.2); border-color:var(--gold); }

.menu { position:relative; }
.menu-pop {
  position:absolute; right:0; top:calc(100% + .5rem); min-width:240px;
  background:var(--stone-2); border:1px solid rgba(216,168,58,.35); border-radius:10px;
  box-shadow:var(--shadow); padding:.4rem; display:none; z-index:50;
}
.menu.open .menu-pop { display:block; }
.menu-pop button {
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--parch); font-family:inherit; font-size:.88rem; padding:.6rem .7rem; border-radius:7px;
}
.menu-pop button:hover { background:rgba(216,168,58,.14); }
.menu-pop button.danger { color:#e88a76; }
.menu-pop hr { border:none; border-top:1px solid rgba(216,168,58,.18); margin:.3rem .2rem; }

/* ─── Mise en page ────────────────────────────────────────────────────────── */
.wrap { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:2rem 1.4rem 5rem; }
.section-title {
  display:flex; align-items:center; gap:1rem; margin:2.4rem 0 1.1rem;
  color:var(--gold); font-size:1.1rem; text-transform:uppercase;
}
.section-title::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(216,168,58,.45), transparent); }
.section-title .n { font-size:.72rem; color:var(--gold-dim); letter-spacing:.2em; }

.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); }

/* ─── Cartes épreuve / énigme ─────────────────────────────────────────────── */
.card {
  position:relative; overflow:hidden; cursor:pointer;
  background:linear-gradient(160deg, var(--stone-3), var(--stone-1));
  border:1px solid rgba(216,168,58,.2); border-radius:12px; padding:1.1rem;
  transition:transform .22s, border-color .22s, box-shadow .22s;
}
.card:hover { transform:translateY(-3px); border-color:rgba(216,168,58,.55); box-shadow:var(--shadow); }
.card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 80% -10%, rgba(216,168,58,.14), transparent 55%);
}
.card .head { display:flex; align-items:center; gap:.7rem; margin-bottom:.55rem; }
.card .ico { font-size:1.7rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.card h3 { font-size:1rem; color:var(--gold-hi); }
.card .loc { font-size:.72rem; color:var(--gold-dim); letter-spacing:.14em; text-transform:uppercase; }
.card p { font-size:.85rem; line-height:1.55; color:#c9bda0; }
.card .foot { display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; }
.chip {
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; padding:.24rem .55rem;
  border-radius:20px; border:1px solid currentColor;
}
.chip.idle    { color:var(--gold-dim); }
.chip.running { color:var(--gold-hi); animation:pulse 1.3s infinite; }
.chip.won     { color:var(--ok); }
.chip.lost    { color:var(--ko); }
.card.won { border-color:rgba(95,168,85,.5); }
.card.won .ico { filter:drop-shadow(0 0 10px rgba(95,168,85,.6)); }
.card.running { border-color:var(--gold); box-shadow:0 0 30px rgba(216,168,58,.2) inset; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

.artifact {
  font-family:"Cinzel",serif; font-size:.9rem; letter-spacing:.28em; color:var(--gold-hi);
  background:rgba(216,168,58,.09); border:1px dashed rgba(216,168,58,.4);
  padding:.35rem .6rem; border-radius:6px; display:inline-block;
}

/* ─── Indices ─────────────────────────────────────────────────────────────── */
.clues { display:grid; gap:.6rem; }
.clue {
  display:flex; gap:.8rem; align-items:flex-start;
  background:rgba(233,220,189,.05); border-left:3px solid var(--gold);
  padding:.7rem .9rem; border-radius:0 8px 8px 0; font-size:.9rem;
}
.clue .num { font-family:"Cinzel",serif; color:var(--gold); font-size:.78rem; }
.clue.hidden { border-left-color:var(--stone-3); color:#5b5044; font-style:italic; }

/* ─── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family:"Cinzel",serif; letter-spacing:.13em; text-transform:uppercase; font-size:.82rem;
  padding:.8rem 1.5rem; border-radius:9px; cursor:pointer; transition:.22s;
  background:linear-gradient(180deg, var(--gold), var(--gold-dim));
  color:#1a1208; border:1px solid var(--gold-hi); font-weight:700;
}
.btn:hover:not(:disabled) { filter:brightness(1.15); transform:translateY(-2px); box-shadow:0 8px 24px rgba(216,168,58,.3); }
.btn:disabled { opacity:.32; cursor:not-allowed; filter:grayscale(.7); }
.btn.ghost { background:none; color:var(--gold-hi); border-color:rgba(216,168,58,.45); }
.btn.ghost:hover { background:rgba(216,168,58,.12); }
.btn.big { font-size:1rem; padding:1.1rem 2.4rem; }

.treasure-cta { text-align:center; margin:3.5rem 0 1rem; }
.treasure-cta .hint { font-size:.82rem; color:var(--gold-dim); margin-top:.8rem; letter-spacing:.1em; }
.treasure-cta .btn.big.ready { animation:beacon 1.8s infinite; }
@keyframes beacon {
  0%,100% { box-shadow:0 0 0 0 rgba(216,168,58,.55); }
  70%     { box-shadow:0 0 0 26px rgba(216,168,58,0); }
}

/* ─── Modale ──────────────────────────────────────────────────────────────── */
.overlay {
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(6,4,3,.86); backdrop-filter:blur(5px);
}
.overlay.on { display:flex; }
.modal {
  position:relative; width:min(560px,100%); max-height:92vh; overflow-y:auto;
  background:linear-gradient(165deg, var(--stone-2), var(--stone-0));
  border:1px solid rgba(216,168,58,.4); border-radius:16px; padding:2rem;
  box-shadow:var(--shadow); text-align:center;
}
.modal .close { position:absolute; top:.7rem; right:.9rem; }
.modal h2 { color:var(--gold-hi); font-size:1.3rem; margin-bottom:.3rem; }
.modal .sub { font-size:.72rem; letter-spacing:.22em; color:var(--gold-dim);
              text-transform:uppercase; margin-bottom:1.3rem; }
.modal .body { font-size:.95rem; line-height:1.7; color:#cec2a6; margin-bottom:1.4rem; }
.modal .riddle-text {
  font-style:italic; font-size:1.02rem; line-height:1.8; color:var(--parch);
  border-top:1px solid rgba(216,168,58,.22); border-bottom:1px solid rgba(216,168,58,.22);
  padding:1.1rem 0; margin:1.1rem 0;
}

/* ─── Clepsydre ───────────────────────────────────────────────────────────── */
.clepsydre { display:flex; flex-direction:column; align-items:center; gap:.9rem; margin:1.2rem 0; }
.clep-svg { width:132px; height:186px; cursor:grab; transition:transform .9s cubic-bezier(.5,-0.3,.3,1.4); }
.clep-svg:active { cursor:grabbing; }
.clep-svg.turned { transform:rotate(180deg); }
.clep-label { font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim); }
.timer {
  font-family:"Cinzel",serif; font-size:3rem; color:var(--gold-hi); letter-spacing:.08em;
  text-shadow:0 0 26px rgba(216,168,58,.45); font-variant-numeric:tabular-nums;
}
.timer.warn { color:#e8a33c; animation:pulse .9s infinite; }
.timer.crit { color:#e0503a; animation:pulse .45s infinite; }
.timebar { width:100%; height:5px; background:rgba(216,168,58,.14); border-radius:3px; overflow:hidden; }
.timebar i { display:block; height:100%; background:linear-gradient(90deg,var(--gold-hi),var(--blood));
             transition:width 1s linear; }

/* ─── Saisie d'artefact ───────────────────────────────────────────────────── */
.answer { display:flex; gap:.6rem; margin-top:1.2rem; }
.answer input {
  flex:1; background:rgba(0,0,0,.4); border:1px solid rgba(216,168,58,.35); border-radius:9px;
  padding:.85rem 1rem; color:var(--gold-hi); font-family:"Cinzel",serif; font-size:1rem;
  letter-spacing:.2em; text-align:center; text-transform:uppercase; outline:none;
}
.answer input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,168,58,.15); }
.answer input:disabled { opacity:.4; }
.verdict { margin-top:1rem; font-size:.9rem; min-height:1.5rem; letter-spacing:.06em; }
.verdict.ok { color:var(--ok); }
.verdict.ko { color:var(--ko); }
.shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 75%{transform:translateX(9px)} }

/* ─── Salle du trésor ─────────────────────────────────────────────────────── */
.treasure-room {
  position:fixed; inset:0; z-index:90; display:none; overflow-y:auto;
  background:
    radial-gradient(ellipse 60% 45% at 50% 32%, rgba(216,168,58,.2), transparent 65%),
    linear-gradient(180deg,#100b06,#050403);
}
.treasure-room.on { display:block; }
.tr-inner { max-width:900px; margin:0 auto; padding:2.5rem 1.4rem 4rem; text-align:center; }
.tr-inner h2 { font-size:1.7rem; color:var(--gold-hi); text-shadow:0 0 30px rgba(216,168,58,.5); }
.tr-inner .sub { font-size:.74rem; letter-spacing:.3em; color:var(--gold-dim);
                 text-transform:uppercase; margin:.5rem 0 1.8rem; }

.slots { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:1.8rem 0; }
.slot {
  width:64px; height:64px; border-radius:50%;
  border:2px dashed rgba(216,168,58,.4); background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  font-family:"Cinzel",serif; font-size:1.5rem; color:var(--gold-hi);
  transition:.2s;
}
.slot.over { border-color:var(--gold-hi); background:rgba(216,168,58,.2); transform:scale(1.08); }
.slot.filled { border-style:solid; }

.boulet {
  width:64px; height:64px; border-radius:50%; cursor:grab; user-select:none;
  display:flex; align-items:center; justify-content:center;
  font-family:"Cinzel",serif; font-size:1.5rem; font-weight:700; color:#e8e2d4;
  background:radial-gradient(circle at 32% 28%, #6e6a63, #241f1b 70%);
  box-shadow:inset -5px -6px 12px rgba(0,0,0,.7), inset 4px 4px 9px rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.6);
  transition:transform .16s;
}
.boulet:hover { transform:scale(1.07); }
.boulet.dragging { opacity:.45; cursor:grabbing; }
.rack { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
        margin:1.6rem 0; min-height:64px; padding:1rem; border-radius:14px;
        background:rgba(0,0,0,.3); border:1px solid rgba(216,168,58,.14); }

/* Tête de tigre */
.tiger { margin:2rem auto 0; width:210px; height:210px; cursor:pointer; position:relative; }
.tiger svg { width:100%; height:100%; animation:tigerspin 7s linear infinite;
             filter:drop-shadow(0 0 26px rgba(216,168,58,.35)); }
@keyframes tigerspin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.tiger:hover svg { filter:drop-shadow(0 0 40px rgba(247,221,143,.7)); }
.tiger.locked { opacity:.35; cursor:not-allowed; }
.tiger.locked svg { animation-play-state:paused; }
.tiger-cap { font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
             color:var(--gold-dim); margin-top:.8rem; }

/* ─── Victoire ────────────────────────────────────────────────────────────── */
.fx { position:fixed; inset:0; pointer-events:none; z-index:95; overflow:hidden; }
.coin { position:absolute; top:-60px; font-size:1.6rem; animation:fall linear forwards; }
@keyframes fall {
  to { transform:translateY(110vh) rotate(720deg); opacity:.9; }
}
.win-banner {
  position:fixed; inset:0; z-index:120; display:none; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:2rem;
  background:radial-gradient(ellipse at 50% 45%, rgba(216,168,58,.2), rgba(4,3,2,.93) 70%);
}
.win-banner.on { display:flex; }
.win-banner h1 { font-size:clamp(2rem,7vw,4rem); color:var(--gold-hi);
                 text-shadow:0 0 60px rgba(216,168,58,.8); animation:rise 1.2s ease-out; }
.win-banner p { color:var(--parch); margin:1.2rem 0 2rem; font-size:1.05rem; }
@keyframes rise { from{opacity:0; transform:translateY(40px) scale(.85)} to{opacity:1} }

/* ─── Voile de démarrage (déblocage audio) ────────────────────────────────── */
.gate {
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.6rem; text-align:center; padding:2rem;
  background:radial-gradient(ellipse at 50% 40%, #1d150e, #050403 70%);
}
.gate h1 { font-size:clamp(1.8rem,6vw,3.2rem); color:var(--gold-hi);
           text-shadow:0 0 40px rgba(216,168,58,.5); }
.gate .sub { letter-spacing:.4em; font-size:.75rem; color:var(--gold-dim); text-transform:uppercase; }

.toast {
  position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(140%);
  background:var(--stone-2); border:1px solid rgba(216,168,58,.4); border-radius:9px;
  padding:.8rem 1.3rem; font-size:.88rem; z-index:150; transition:transform .3s; box-shadow:var(--shadow);
}
.toast.on { transform:translateX(-50%) translateY(0); }

@media (max-width:640px) {
  .wrap { padding:1.4rem .9rem 4rem; }
  .modal { padding:1.4rem; }
  .brand small { display:none; }
  .slot,.boulet { width:52px; height:52px; font-size:1.2rem; }
  .tiger { width:160px; height:160px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
                         transition-duration:.01ms !important; }
}

/* ─── Arbitrage manuel ────────────────────────────────────────────────────── */
.arb { margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid rgba(216,168,58,.2); }
.arb-title { font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
             color:var(--gold-dim); margin-bottom:.8rem; }
.arb-row { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.btn.small { font-size:.72rem; padding:.6rem 1rem; }
.btn.small.ok { background:linear-gradient(180deg,#6cbb5f,#3d7534); border-color:#8fd982; color:#0d1a09; }
.btn.ghost.ko { color:#e08a76; border-color:rgba(224,138,118,.45); }
.btn.ghost.ko:hover { background:rgba(224,138,118,.12); }

/* ─── Carte du Fort ───────────────────────────────────────────────────────── */
.map-wrap {
  position:relative; width:100%; aspect-ratio:10/7; margin:0 auto 1rem;
  border:1px solid rgba(216,168,58,.28); border-radius:16px; overflow:hidden;
  box-shadow:inset 0 0 80px rgba(0,0,0,.7), var(--shadow);
}
.map-bg { position:absolute; inset:0; width:100%; height:100%; }
.nodes { position:absolute; inset:0; }   /* repère des lieux, hors flux */

.node {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  background:none; border:none; cursor:pointer; padding:0; z-index:3;
  transition:transform .2s;
}
.node:hover { transform:translate(-50%,-50%) scale(1.14); z-index:5; }
.node-ico {
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-size:1.28rem; line-height:1;
  background:radial-gradient(circle at 34% 28%, #3d3223, #171008 75%);
  border:2px solid rgba(216,168,58,.5);
  box-shadow:0 4px 14px rgba(0,0,0,.7), inset 0 0 12px rgba(0,0,0,.6);
  transition:.25s;
}
.node:hover .node-ico { border-color:var(--gold-hi); box-shadow:0 0 22px rgba(247,221,143,.55); }
.node-name {
  font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:#b9a884;
  white-space:nowrap; text-shadow:0 2px 6px #000; opacity:0; transition:opacity .2s;
  background:rgba(8,6,4,.82); padding:.14rem .42rem; border-radius:4px;
}
.node:hover .node-name, .node.here .node-name { opacity:1; }

.node.won  .node-ico { border-color:rgba(95,168,85,.75); box-shadow:0 0 18px rgba(95,168,85,.4); }
.node.running .node-ico { border-color:var(--gold-hi); animation:pulse 1.2s infinite; }
.node.lost .node-ico { border-color:rgba(176,64,46,.6); }
.node.locked { cursor:not-allowed; }
.node.locked .node-ico { filter:grayscale(.85) brightness(.6); }
.node.treasure .node-ico { width:58px; height:58px; font-size:1.55rem; }
.node.treasure:not(.locked) .node-ico {
  border-color:var(--gold-hi); animation:beacon 2s infinite;
}
.node.start .node-ico { width:38px; height:38px; font-size:1rem; opacity:.75; }

/* Le candidat */
.hero {
  position:absolute; z-index:4; width:0; height:0;
  transition-property:left,top; transition-timing-function:cubic-bezier(.45,.05,.35,1);
  transition-duration:900ms; pointer-events:none;
}
.hero-dot {
  position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff6d8, var(--gold) 65%, #7a5a18);
  box-shadow:0 0 16px rgba(247,221,143,.95), 0 0 34px rgba(216,168,58,.5);
}
.hero-glow {
  position:absolute; left:-19px; top:-19px; width:38px; height:38px; border-radius:50%;
  border:2px solid rgba(247,221,143,.55); animation:halo 1.9s ease-out infinite;
}
@keyframes halo {
  0%   { transform:scale(.55); opacity:.9; }
  100% { transform:scale(1.5); opacity:0; }
}
.hero.running .hero-dot { animation:bob .28s ease-in-out infinite alternate; }
@keyframes bob { from{transform:translateY(0) scale(1)} to{transform:translateY(-5px) scale(1.13)} }

.map-hint {
  position:absolute; left:50%; bottom:.7rem; transform:translateX(-50%); z-index:6;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim);
  background:rgba(8,6,4,.7); padding:.3rem .8rem; border-radius:20px; white-space:nowrap;
}

@media (max-width:640px) {
  .node-ico { width:36px; height:36px; font-size:1rem; }
  .node.treasure .node-ico { width:44px; height:44px; font-size:1.2rem; }
  .node.start .node-ico { width:28px; height:28px; font-size:.8rem; }
  .node-name { font-size:.5rem; }
}

/* Itinéraire tracé pendant la course */
#route { filter:drop-shadow(0 0 5px rgba(247,221,143,.75)); pointer-events:none; }

/* ─── Barre de départ ─────────────────────────────────────────────────────── */
.travel-bar {
  display:none; align-items:center; gap:.9rem; margin:0 auto 1.4rem;
  background:linear-gradient(160deg, var(--stone-3), var(--stone-1));
  border:1px solid rgba(216,168,58,.4); border-radius:12px; padding:.8rem 1rem;
  box-shadow:var(--shadow); animation:slidein .25s ease-out;
}
.travel-bar.on { display:flex; }
.travel-bar.running { border-color:var(--gold-hi); box-shadow:0 0 26px rgba(216,168,58,.28); }
@keyframes slidein { from{opacity:0; transform:translateY(-8px)} to{opacity:1} }
.tb-ico {
  width:46px; height:46px; flex:0 0 46px; border-radius:50%; display:grid; place-items:center;
  font-size:1.35rem; background:radial-gradient(circle at 34% 28%, #3d3223, #171008 75%);
  border:2px solid rgba(216,168,58,.5);
}
.tb-txt { flex:1; min-width:0; }
.tb-txt b { display:block; font-family:"Cinzel",serif; color:var(--gold-hi); font-size:1rem; }
.tb-txt small { color:var(--gold-dim); font-size:.76rem; letter-spacing:.08em; }
#tb-go { flex:0 0 auto; }

/* Parchemins du Père Fouras, à côté du trousseau */
.keyring.scrolls { margin-left:.5rem; padding-left:.7rem; border-left:1px solid rgba(216,168,58,.22); }
.keyring.scrolls .k.on { transform:translateY(-2px) rotate(6deg); }

@media (max-width:640px) {
  .travel-bar { flex-wrap:wrap; }
  .tb-txt { flex:1 1 100%; order:2; }
  #tb-go { order:3; flex:1 1 100%; }
}

/* ─── Confirmation maison ─────────────────────────────────────────────────── */
#confirm { z-index:160; }
.confirm-box { width:min(440px,100%); }
.confirm-box h2 { margin-bottom:1rem; }
.confirm-box .body { text-align:left; margin-bottom:1.5rem; }
.confirm-box .arb-row { justify-content:flex-end; }
.btn.danger {
  background:linear-gradient(180deg,#c0503a,#7a2a1c); border-color:#e08a76; color:#fff3ef;
}
.btn.danger:hover:not(:disabled) { box-shadow:0 8px 24px rgba(192,80,58,.35); }

/* ─── Écran d'ouverture : le générique tourne, le Fort s'anime ─────────────── */
.gate h1 { transition:transform 1.4s cubic-bezier(.2,.8,.3,1), text-shadow 1.4s; }
.gate.playing h1 {
  transform:scale(1.12);
  text-shadow:0 0 90px rgba(216,168,58,.95), 0 0 26px rgba(247,221,143,.6);
  animation:gate-breathe 4s ease-in-out infinite 1.4s;
}
@keyframes gate-breathe {
  0%,100% { transform:scale(1.12); }
  50%     { transform:scale(1.17); }
}
.gate.playing .sub { color:var(--gold); animation:pulse 2.4s infinite; }
.gate::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity 2s;
  background:radial-gradient(ellipse 70% 50% at 50% 50%, rgba(216,168,58,.16), transparent 70%);
}
.gate.playing::after { opacity:1; }
.gate { transition:opacity .9s, visibility .9s; }
.gate.off { display:flex; opacity:0; visibility:hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE
   Écrits après tout le reste : ces règles l'emportent volontairement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Encoches et barres système (iPhone, Android gestuel) */
.topbar { padding-top:calc(.9rem + env(safe-area-inset-top));
          padding-left:calc(1.4rem + env(safe-area-inset-left));
          padding-right:calc(1.4rem + env(safe-area-inset-right)); }
.wrap   { padding-bottom:calc(5rem + env(safe-area-inset-bottom)); }

/* Pas de flash bleu au tap, pas de sélection accidentelle sur les contrôles */
* { -webkit-tap-highlight-color:transparent; }
.node, .card, .btn, .iconbtn, .boulet, .slot, .tiger, .clep-svg {
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}

/* Sans survol possible, les noms de lieux doivent être lisibles en permanence */
@media (hover:none), (pointer:coarse) {
  .node-name { opacity:1; }
  .node:hover { transform:translate(-50%,-50%); }        /* pas d'état collé */
  .node:active { transform:translate(-50%,-50%) scale(1.16); }
  .card:hover { transform:none; }
  .card:active { transform:scale(.985); border-color:rgba(216,168,58,.6); }
}

@media (max-width:760px) {
  .topbar { gap:.55rem; padding:.6rem .8rem; padding-top:calc(.6rem + env(safe-area-inset-top)); }
  .brand { font-size:.82rem; letter-spacing:.04em; }
  .counters { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; justify-content:flex-end; }
  /* Le trousseau complet prend trop de place : on garde le compte chiffré */
  .keyring { display:none; }
  .count {
    font-size:.82rem; padding:.22rem .5rem; border-radius:20px;
    background:rgba(216,168,58,.1); border:1px solid rgba(216,168,58,.3); white-space:nowrap;
  }
  #keycount::before    { content:"🔑 "; }
  #scrollcount::before { content:"📜 "; }
  .iconbtn { padding:.5rem .6rem; min-width:42px; min-height:42px; }

  .wrap { padding:1rem .7rem calc(6.5rem + env(safe-area-inset-bottom)); }
  .section-title { font-size:.95rem; margin:1.8rem 0 .8rem; }
  .grid { grid-template-columns:1fr; gap:.7rem; }
  .card { padding:.9rem; }

  /* La carte occupe toute la largeur utile */
  .map-wrap { margin-left:-.7rem; margin-right:-.7rem; width:auto; border-radius:0;
              border-left:none; border-right:none; }
  .node-ico { width:40px; height:40px; font-size:1.05rem; border-width:2px; }
  .node.treasure .node-ico { width:48px; height:48px; }
  .node.start .node-ico { width:30px; height:30px; font-size:.8rem; }
  .node-name { font-size:.48rem; padding:.1rem .3rem; letter-spacing:.04em; max-width:64px;
               overflow:hidden; text-overflow:ellipsis; }
  .map-hint { font-size:.6rem; bottom:.4rem; }

  /* La barre de départ reste sous le pouce, toujours visible */
  .travel-bar.on {
    position:fixed; left:.6rem; right:.6rem; z-index:45;
    bottom:calc(.6rem + env(safe-area-inset-bottom));
    margin:0; padding:.7rem .8rem;
  }
  .tb-ico { width:42px; height:42px; flex-basis:42px; font-size:1.2rem; }
  .tb-txt b { font-size:.9rem; }
  .tb-txt small { font-size:.7rem; }
  .travel-bar #tb-go { order:0; flex:0 0 auto; min-height:44px; }
  .travel-bar .tb-txt { flex:1 1 auto; order:0; }

  /* Modales : pleine hauteur, contrôles atteignables au pouce */
  .overlay { padding:0; align-items:flex-end; }
  .modal {
    width:100%; max-height:92vh; border-radius:18px 18px 0 0; padding:1.5rem 1.1rem;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
    animation:sheet .28s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes sheet { from{transform:translateY(100%)} to{transform:translateY(0)} }
  .modal .close { top:.9rem; right:1rem; min-width:42px; min-height:42px; }
  .modal h2 { font-size:1.1rem; padding-right:2.6rem; }
  .modal .riddle-text { font-size:.96rem; line-height:1.7; }
  .timer { font-size:2.4rem; }
  .answer { flex-direction:column; }
  /* 16px minimum : en dessous, iOS zoome tout seul sur le champ */
  .answer input { font-size:16px; padding:.9rem; }
  .answer .btn, .arb-row .btn { width:100%; min-height:48px; }
  .arb-row { flex-direction:column; }
  .confirm-box .arb-row { flex-direction:column-reverse; }
  .btn { min-height:46px; }

  /* Salle du trésor : boulets et cibles au doigt */
  .tr-inner { padding:1.5rem .8rem calc(3rem + env(safe-area-inset-bottom)); }
  .tr-inner h2 { font-size:1.25rem; }
  .slot, .boulet { width:50px; height:50px; font-size:1.15rem; }
  .slots, .rack { gap:.45rem; }
  .rack { padding:.7rem .5rem; }
  .tiger { width:170px; height:170px; }

  .toast { left:.6rem; right:.6rem; transform:translateY(140%);
           bottom:calc(1rem + env(safe-area-inset-bottom)); text-align:center; }
  .toast.on { transform:translateY(0); }
  .menu-pop { min-width:min(78vw,260px); }
  .menu-pop button { padding:.85rem .8rem; font-size:.92rem; }
  .gate { padding:2rem 1.2rem; }
  .clep-svg { width:110px; height:155px; }
}

/* Très petits écrans */
@media (max-width:380px) {
  .brand small { display:none; }
  .node-ico { width:34px; height:34px; font-size:.9rem; }
  .node-name { display:none; }               /* illisible en dessous : la liste prend le relais */
  .slot, .boulet { width:44px; height:44px; font-size:1rem; }
}

/* Téléphone couché : la carte ne doit pas manger tout l'écran.
   Le rapport 10/7 est conservé — les lieux sont positionnés en % du cadre,
   le déformer les décalerait du fort dessiné dessous. */
@media (max-height:520px) and (orientation:landscape) {
  .map-wrap { max-width:calc(74vh * 10 / 7); margin-left:auto; margin-right:auto;
              border-radius:14px; border-left:1px solid rgba(216,168,58,.28);
              border-right:1px solid rgba(216,168,58,.28); }
  .modal { max-height:96vh; }
  .topbar { position:static; }
}

/* Version du front, pour vérifier d'un coup d'œil ce que sert le cache */
.version-tag {
  position:fixed; right:.5rem; z-index:210; pointer-events:none;
  bottom:calc(.35rem + env(safe-area-inset-bottom));
  font-family:monospace; font-size:.62rem; color:rgba(216,168,58,.4);
}