:root{
  --ink:#4a3b34;
  --ink-soft:#7d6a60;
  --cream:#fdf6ee;
  --card:rgba(253,246,238,.88);
  --rose:#e08f9c;
  --rose-deep:#c86e7e;
  --mint:#79b89a;
  --gold:#e8b04b;
  --shadow:0 10px 30px rgba(80,55,40,.18), 0 2px 6px rgba(80,55,40,.10);
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Quicksand',ui-rounded,'Segoe UI',system-ui,sans-serif;
  color:var(--ink);
  background:#e8d9cc;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
.hidden{display:none !important}

/* ---------------- HUD ---------------- */
#hud{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:16px;gap:12px;pointer-events:none;z-index:10;
}
.hud-card{
  background:var(--card);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px 16px;
  pointer-events:auto;
}
.hud-left{min-width:250px}
.progress{display:flex;align-items:center;gap:10px}
.bar{
  flex:1;height:12px;border-radius:99px;
  background:rgba(120,90,70,.16);
  overflow:hidden;
}
.bar i{
  display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  transition:width .45s cubic-bezier(.34,1.4,.5,1);
}
#pct{font-weight:700;font-size:15px;min-width:44px;text-align:right}
.sub{font-size:12.5px;color:var(--ink-soft);margin-top:5px;font-weight:600}

.hud-right{display:flex;align-items:center;gap:8px}
.timer{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;padding-right:4px}
.icon-btn{
  font:inherit;font-size:16px;line-height:1;
  width:36px;height:36px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(120,90,70,.10);color:var(--ink);
  transition:transform .12s ease, background .15s ease, opacity .15s ease;
}
.icon-btn:hover{background:rgba(120,90,70,.20);transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0) scale(.94)}
.icon-btn.off{opacity:.35}
.icon-btn{display:flex;align-items:center;justify-content:center}
.ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
     stroke-linecap:round;stroke-linejoin:round}
#btn-sound .ico-off{display:none}
#btn-sound.muted .ico-on{display:none}
#btn-sound.muted .ico-off{display:block}

/* ------------- objet en main ------------- */
#held-info{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--card);backdrop-filter:blur(10px);
  border-radius:99px;box-shadow:var(--shadow);
  padding:10px 22px;text-align:center;z-index:10;pointer-events:none;
  animation:pop .25s cubic-bezier(.34,1.5,.5,1);
}
#held-name{font-weight:700;font-size:15px}
#held-hint{display:block;font-size:12.5px;color:var(--ink-soft);font-style:normal;font-weight:600;margin-top:1px}

#controls-tip{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);
  font-size:12.5px;font-weight:600;color:#6b5348;
  background:rgba(253,246,238,.72);backdrop-filter:blur(8px);
  padding:8px 18px;border-radius:99px;z-index:9;pointer-events:none;
  transition:opacity .8s ease;text-align:center;max-width:92vw;
}

/* ---------------- toasts ---------------- */
#toast-wrap{
  position:fixed;left:50%;top:96px;transform:translateX(-50%);
  z-index:11;pointer-events:none;display:flex;flex-direction:column;
  align-items:center;gap:8px;
}
.toast{
  background:var(--card);backdrop-filter:blur(10px);
  padding:9px 20px;border-radius:99px;font-weight:700;font-size:14px;
  box-shadow:var(--shadow);
  animation:toastIn .3s cubic-bezier(.34,1.5,.5,1), toastOut .4s ease 1.3s forwards;
}
.toast.good{color:#3f7d5f}
.toast.bad{color:var(--rose-deep)}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.92)}to{opacity:1;transform:translateX(-50%)}}

/* ---------------- écrans ---------------- */
.screen{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 50% 35%, rgba(255,240,225,.55), rgba(120,88,70,.55));
  backdrop-filter:blur(6px);
  animation:fade .4s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{
  background:var(--cream);
  border-radius:28px;box-shadow:0 24px 60px rgba(70,45,32,.35);
  padding:34px 36px 30px;max-width:440px;width:100%;text-align:center;
  animation:panelIn .5s cubic-bezier(.2,1.2,.4,1);
  max-height:92vh;overflow:auto;
}
@keyframes panelIn{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
.sparkle{width:44px;height:44px;display:block;margin:0 auto 2px;fill:var(--gold)}
.panel h1{font-size:31px;font-weight:700;letter-spacing:-.5px;line-height:1.15}
.tagline{color:var(--ink-soft);font-size:14.5px;font-weight:600;margin-top:8px;line-height:1.5}

.field{display:block;margin:22px 0 14px;text-align:left}
.field span{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;padding-left:4px}
.field input{
  font:inherit;font-size:16px;font-weight:600;width:100%;
  padding:12px 16px;border-radius:14px;border:2px solid rgba(120,90,70,.16);
  background:#fff;color:var(--ink);outline:none;transition:border-color .18s;
}
.field input:focus{border-color:var(--rose)}
.field input::placeholder{color:#c3aFA2;font-weight:500}

.opts{display:flex;flex-direction:column;gap:9px;text-align:left;margin-bottom:22px}
.check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--rose);cursor:pointer;flex:none}

.big-btn{
  font:inherit;font-weight:700;font-size:17px;color:#fff;
  background:linear-gradient(180deg,var(--rose),var(--rose-deep));
  border:0;border-radius:16px;padding:15px 28px;width:100%;cursor:pointer;
  box-shadow:0 8px 20px rgba(200,110,126,.36);
  transition:transform .14s cubic-bezier(.34,1.5,.5,1), box-shadow .14s;
}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(200,110,126,.44)}
.big-btn:active{transform:translateY(0) scale(.98)}

.howto{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:6px}
.howto li{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.howto b{color:var(--ink)}

.stars{font-size:38px;letter-spacing:6px;color:var(--gold);margin-bottom:6px}
.stars .dim{color:rgba(120,90,70,.20)}
.stats{display:flex;justify-content:center;gap:12px;margin:24px 0 22px}
.stats div{
  flex:1;background:rgba(120,90,70,.07);border-radius:16px;padding:12px 6px;
}
.stats b{display:block;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.stats span{font-size:11.5px;font-weight:600;color:var(--ink-soft)}

@media (max-width:520px){
  .panel{padding:26px 22px 24px}
  .panel h1{font-size:26px}
  #hud{padding:10px}
  .hud-left{min-width:0;flex:1}
  #controls-tip{font-size:11.5px;padding:7px 14px}
}

/* ---------------- vue première personne ---------------- */
canvas#scene{cursor:none}

#reticle{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;z-index:8;pointer-events:none;
}
#reticle .dot,#reticle .ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;
  transition:width .16s cubic-bezier(.34,1.5,.5,1),height .16s cubic-bezier(.34,1.5,.5,1),
             opacity .16s ease,border-color .16s ease,background .16s ease;
}
#reticle .dot{
  width:5px;height:5px;background:rgba(255,252,246,.95);
  box-shadow:0 0 3px rgba(60,40,30,.75);
}
#reticle .ring{
  width:12px;height:12px;border:2px solid rgba(255,252,246,.5);
  opacity:0;box-shadow:0 0 4px rgba(60,40,30,.55);
}
#reticle.active .ring{width:26px;height:26px;opacity:1;border-color:rgba(255,246,224,.95)}
#reticle.active .dot{width:4px;height:4px}
#reticle.refuse .ring{
  width:26px;height:26px;opacity:1;border-color:#e08f9c;
  background:rgba(224,143,156,.18);
}

#prompt{
  position:fixed;left:50%;top:calc(50% + 34px);transform:translateX(-50%);
  z-index:8;pointer-events:none;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:#fdf6ee;
  text-shadow:0 1px 4px rgba(50,32,22,.85), 0 0 14px rgba(50,32,22,.6);
  opacity:0;transition:opacity .15s ease;
}
#prompt.on{opacity:1}
#prompt b{
  display:inline-block;background:rgba(253,246,238,.92);color:var(--ink);
  border-radius:6px;padding:1px 7px;margin-right:5px;font-size:12px;
  text-shadow:none;box-shadow:0 1px 3px rgba(50,32,22,.4);
}

.hint-lock{
  font-size:11.5px;font-weight:600;color:var(--ink-soft);
  margin-top:10px;opacity:.85;
}
#controls-tip b{color:var(--ink)}

@media (max-width:520px){
  #prompt{font-size:12.5px;top:calc(50% + 30px)}
}