:root{
    --parchemin:#efe3c8;
    --parchemin-fonce:#e2d1ac;
    --encre:#33241a;
    --braise:#b34a1f;
    --or:#c9962e;
    --heraldique:#8f2f26;
    --ardoise:#44586e;
    --mousse:#5d6b3a;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    font-family:'Alegreya', Georgia, serif;
    background:
      radial-gradient(ellipse at 50% -10%, #5a4632 0%, #3a2c1e 55%, #2a1f14 100%);
    color:var(--encre);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px 12px 30px;
  }

  /* ============ EN-TÊTE PARCHEMIN ============ */
  header{
    width:min(960px,100%);
    text-align:center;
    color:var(--parchemin);
    margin-bottom:14px;
  }
  header h1{
    font-family:'Grenze Gotisch', serif;
    font-weight:700;
    font-size:clamp(1.7rem,4.5vw,2.6rem);
    letter-spacing:.02em;
    color:#f3e6c5;
    text-shadow:0 2px 0 #1e1610, 0 0 22px rgba(201,150,46,.35);
  }
  header .sous-titre{
    font-style:italic;
    font-size:clamp(.85rem,2.4vw,1rem);
    color:#cdb98e;
    margin-top:2px;
  }

  /* ============ BANDEAU MISSION ============ */
  .mission{
    width:min(960px,100%);
    background:linear-gradient(180deg,var(--parchemin) 0%,var(--parchemin-fonce) 100%);
    border:2px solid #8a6b3a;
    border-radius:6px;
    box-shadow:0 3px 0 #1e1610, inset 0 0 30px rgba(138,107,58,.25);
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }
  .mission .objectif{
    font-size:clamp(.95rem,2.6vw,1.15rem);
  }
  .mission .objectif b{color:var(--heraldique);}
  .mission .objectif .lettrine{
    font-family:'Grenze Gotisch', serif;
    font-size:1.5em;
    color:var(--braise);
    line-height:0;
  }
  .compteurs{
    display:flex;
    gap:14px;
    align-items:center;
    font-size:.92rem;
  }
  .compteurs span b{color:var(--braise);}
  #btn-indice{
    font-family:'Alegreya', serif;
    font-size:.92rem;
    font-weight:700;
    color:var(--parchemin);
    background:var(--ardoise);
    border:2px solid #2c3a49;
    border-radius:5px;
    padding:6px 14px;
    cursor:pointer;
    box-shadow:0 2px 0 #1e2833;
    transition:transform .1s, background .2s;
  }
  #btn-indice:hover{background:#54708c;}
  #btn-indice:active{transform:translateY(2px);box-shadow:none;}
  #btn-indice:focus-visible{outline:3px solid var(--or);outline-offset:2px;}
  #btn-indice.dispo{animation:pulse 1.2s ease-in-out infinite;}
  @keyframes pulse{
    0%,100%{box-shadow:0 2px 0 #1e2833, 0 0 0 0 rgba(201,150,46,.6);}
    50%{box-shadow:0 2px 0 #1e2833, 0 0 0 9px rgba(201,150,46,0);}
  }

  /* ============ SCÈNE ============ */
  .cadre{
    width:min(960px,100%);
    position:relative;
    border:10px solid transparent;
    border-image:linear-gradient(135deg,#7a5a2e,#c9962e,#7a5a2e,#4a3418) 1;
    box-shadow:0 10px 40px rgba(0,0,0,.55), inset 0 0 0 2px #2a1f14;
    background:#2a1f14;
  }
  .scene{
    position:relative;
    width:100%;
    line-height:0;
    cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><circle cx="14" cy="14" r="9" fill="none" stroke="%23f3e6c5" stroke-width="3"/><circle cx="14" cy="14" r="9" fill="none" stroke="%23332419" stroke-width="1"/><line x1="21" y1="21" x2="32" y2="32" stroke="%23f3e6c5" stroke-width="4" stroke-linecap="round"/></svg>') 14 14, crosshair;
    user-select:none;
    -webkit-user-select:none;
  }
  .scene img{
    width:100%;
    height:auto;
    display:block;
    pointer-events:none;
  }

  /* ondulation de clic raté */
  .rate{
    position:absolute;
    width:46px;height:46px;
    border:3px solid rgba(243,230,197,.9);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(.3);
    pointer-events:none;
    animation:rate-anim .5s ease-out forwards;
  }
  @keyframes rate-anim{
    to{transform:translate(-50%,-50%) scale(1.4);opacity:0;}
  }

  /* halo d'indice */
  .halo{
    position:absolute;
    border:4px solid var(--or);
    border-radius:50%;
    box-shadow:0 0 25px 6px rgba(201,150,46,.8), inset 0 0 18px rgba(201,150,46,.6);
    pointer-events:none;
    animation:halo-anim 2.4s ease-in-out forwards;
  }
  @keyframes halo-anim{
    0%{opacity:0;transform:scale(1.6);}
    20%{opacity:1;transform:scale(1);}
    80%{opacity:1;}
    100%{opacity:0;}
  }

  /* anneau doré marquant l'objet trouvé */
  .marque-trouve{
    position:absolute;
    border:5px solid var(--or);
    border-radius:50%;
    box-shadow:0 0 20px 5px rgba(201,150,46,.9);
    pointer-events:none;
    animation:marque-anim .6s cubic-bezier(.2,1.6,.4,1) forwards;
  }
  @keyframes marque-anim{
    0%{opacity:0;transform:scale(2.4);}
    100%{opacity:1;transform:scale(1);}
  }

  /* étoiles de score */
  .etoiles{
    font-size:1.9rem;
    letter-spacing:.15em;
    margin:2px 0 8px;
    color:var(--or);
    text-shadow:0 1px 0 #8a6b3a;
  }
  .etoiles .vide{color:#c9b98f;text-shadow:none;}

  /* étincelles de victoire */
  .etincelle{
    position:fixed;
    width:10px;height:10px;
    pointer-events:none;
    z-index:60;
    animation:etincelle-anim 1.1s ease-out forwards;
  }
  @keyframes etincelle-anim{
    0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);}
    100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(340deg) scale(.3);}
  }

  /* ============ OVERLAY VICTOIRE ============ */
  .voile{
    position:fixed;
    inset:0;
    background:rgba(26,18,10,.78);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    z-index:50;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s;
  }
  .voile.visible{opacity:1;pointer-events:auto;}
  .carte-victoire{
    background:linear-gradient(180deg,var(--parchemin) 0%,var(--parchemin-fonce) 100%);
    border:3px solid #8a6b3a;
    border-radius:10px;
    box-shadow:0 18px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(138,107,58,.22);
    max-width:520px;
    width:100%;
    max-height:92vh;
    overflow-y:auto;
    padding:26px 26px 22px;
    text-align:center;
    transform:translateY(24px) scale(.96);
    transition:transform .35s cubic-bezier(.2,1.4,.4,1);
    position:relative;
  }
  .voile.visible .carte-victoire{transform:translateY(0) scale(1);}
  .sceau{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%) rotate(-6deg);
    width:64px;height:64px;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));
  }
  .carte-victoire h2{
    font-family:'Grenze Gotisch', serif;
    font-size:2.2rem;
    color:var(--heraldique);
    margin:14px 0 4px;
  }
  .carte-victoire .trouve{
    font-style:italic;
    color:#6b5535;
    margin-bottom:12px;
  }
  .illu-forgeron{
    width:min(240px,70%);
    margin:0 auto 14px;
    display:block;
  }
  .funfact{
    background:rgba(255,252,240,.65);
    border-left:4px solid var(--braise);
    border-radius:0 6px 6px 0;
    padding:12px 14px;
    text-align:left;
    font-size:.98rem;
    line-height:1.45;
    margin-bottom:18px;
  }
  .funfact .etiquette{
    display:block;
    font-family:'Grenze Gotisch', serif;
    font-size:1.05rem;
    color:var(--braise);
    letter-spacing:.04em;
    margin-bottom:4px;
  }
  .btn-suivant{
    font-family:'Grenze Gotisch', serif;
    font-size:1.25rem;
    letter-spacing:.03em;
    color:#f9efd6;
    background:linear-gradient(180deg,var(--heraldique),#6e211a);
    border:2px solid #4d150f;
    border-radius:7px;
    padding:10px 30px;
    cursor:pointer;
    box-shadow:0 3px 0 #3a0f0a;
    transition:transform .1s, filter .2s;
  }
  .btn-suivant:hover{filter:brightness(1.12);}
  .btn-suivant:active{transform:translateY(3px);box-shadow:none;}
  .btn-suivant:focus-visible{outline:3px solid var(--or);outline-offset:2px;}

  /* ============ ÉCRAN "À VENIR" ============ */
  .a-venir{
    display:none;
    width:min(960px,100%);
    background:linear-gradient(180deg,var(--parchemin) 0%,var(--parchemin-fonce) 100%);
    border:3px solid #8a6b3a;
    border-radius:10px;
    box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 0 40px rgba(138,107,58,.22);
    padding:46px 26px;
    text-align:center;
  }
  .a-venir h2{
    font-family:'Grenze Gotisch', serif;
    font-size:2rem;
    color:var(--ardoise);
    margin-bottom:10px;
  }
  .a-venir p{max-width:46ch;margin:0 auto 8px;line-height:1.5;}
  .a-venir .ombre{
    font-style:italic;
    color:#7a6242;
    font-size:.92rem;
    margin-top:16px;
  }
  .btn-rejouer{
    margin-top:22px;
    font-family:'Grenze Gotisch', serif;
    font-size:1.1rem;
    color:#f9efd6;
    background:var(--mousse);
    border:2px solid #40491f;
    border-radius:7px;
    padding:9px 26px;
    cursor:pointer;
    box-shadow:0 3px 0 #2e3517;
  }
  .btn-rejouer:active{transform:translateY(3px);box-shadow:none;}
  .btn-rejouer:focus-visible{outline:3px solid var(--or);outline-offset:2px;}


  /* ============ MENU DES NIVEAUX ============ */
  .menu{
    width:min(960px,100%);
    background:linear-gradient(180deg,var(--parchemin) 0%,var(--parchemin-fonce) 100%);
    border:3px solid #8a6b3a;
    border-radius:10px;
    box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 0 40px rgba(138,107,58,.22);
    padding:26px 22px 30px;
  }
  .menu h2{
    font-family:'Grenze Gotisch', serif;
    font-size:1.7rem;
    color:var(--heraldique);
    text-align:center;
    margin-bottom:4px;
  }
  .menu .invite{
    text-align:center;
    font-style:italic;
    color:#6b5535;
    margin-bottom:20px;
  }
  .grille-niveaux{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
  }
  .carte-niveau{
    background:rgba(255,252,240,.55);
    border:2px solid #8a6b3a;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    text-align:left;
    padding:0;
    font-family:inherit;
    transition:transform .15s, box-shadow .15s;
    box-shadow:0 3px 0 rgba(74,52,24,.4);
  }
  .carte-niveau:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(74,52,24,.45);}
  .carte-niveau:active{transform:translateY(0);}
  .carte-niveau:focus-visible{outline:3px solid var(--or);outline-offset:2px;}
  .carte-niveau .vignette{
    width:100%;
    height:120px;
    object-fit:cover;
    display:block;
    border-bottom:2px solid #8a6b3a;
    filter:sepia(.15);
  }
  .carte-niveau .infos{padding:10px 14px 12px;}
  .carte-niveau .nom{
    font-family:'Grenze Gotisch', serif;
    font-size:1.25rem;
    color:var(--encre);
  }
  .carte-niveau .quete{
    font-size:.86rem;
    color:#6b5535;
    font-style:italic;
    margin-top:1px;
  }
  .carte-niveau .record{
    margin-top:6px;
    font-size:1rem;
    color:var(--or);
    text-shadow:0 1px 0 #8a6b3a;
    min-height:1.2em;
  }
  .carte-niveau .record .vide{color:#c9b98f;text-shadow:none;}
  .carte-niveau .record .jamais{
    font-size:.8rem;
    color:#9a8563;
    font-style:italic;
    text-shadow:none;
  }
  #btn-menu{
    font-family:'Alegreya', serif;
    font-size:.92rem;
    font-weight:700;
    color:var(--parchemin);
    background:var(--mousse);
    border:2px solid #40491f;
    border-radius:5px;
    padding:6px 14px;
    cursor:pointer;
    box-shadow:0 2px 0 #2e3517;
    transition:transform .1s;
  }
  #btn-menu:active{transform:translateY(2px);box-shadow:none;}
  #btn-menu:focus-visible{outline:3px solid var(--or);outline-offset:2px;}

  footer{
    margin-top:16px;
    color:#9a8563;
    font-size:.82rem;
    font-style:italic;
    text-align:center;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
  }