/* ── ew-tour — visite guidée jouable ─────────────────────────────────────────
   Projecteur animé sur les vrais éléments de l'espace, carte « mission »,
   HUD de progression + XP, badge de fin. Tokens de echowai.css avec replis. */
/* z-index maximal : au-dessus des en-têtes collants et de la bulle de chat */
.ewt-root { position:fixed; inset:0; z-index:2147483600; pointer-events:none; }
.ewt-block { position:fixed; pointer-events:auto; background:transparent; }
.ewt-cover { position:fixed; pointer-events:auto; background:transparent; }

/* le projecteur : un seul élément, l'assombrissement est son ombre portée */
.ewt-spot {
  position:fixed; border-radius:14px; pointer-events:none;
  box-shadow: 0 0 0 9999px rgba(7,16,34,.62), 0 0 0 3px rgba(38,105,204,.55), 0 18px 60px -10px rgba(38,105,204,.55);
  transition: top .5s cubic-bezier(.22,1,.36,1), left .5s cubic-bezier(.22,1,.36,1),
              width .5s cubic-bezier(.22,1,.36,1), height .5s cubic-bezier(.22,1,.36,1), border-radius .3s;
}
.ewt-spot.is-float { box-shadow: 0 0 0 9999px rgba(7,16,34,.66); }

/* anneau qui pulse quand c'est au joueur d'agir */
.ewt-ring { position:fixed; border-radius:18px; pointer-events:none; border:2px solid var(--accent, #2669CC); opacity:0; }
.ewt-ring.is-on { animation: ewt-pulse 1.6s ease-out infinite; }
@keyframes ewt-pulse { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(1.12); } }

/* HUD : mission n/N, barre, XP */
.ewt-hud {
  position:fixed; top:14px; left:50%; transform:translateX(-50%); pointer-events:auto;
  display:flex; align-items:center; gap:12px; padding:8px 14px 8px 12px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(38,105,204,.25); border-radius:999px;
  box-shadow:0 10px 30px -12px rgba(7,16,34,.45); font-size:.82rem; color:var(--t1, #1a1a18);
  opacity:0; translate:0 -12px; transition: opacity .35s, translate .45s cubic-bezier(.22,1,.36,1);
}
.ewt-hud.is-on { opacity:1; translate:0 0; }
.ewt-hud .k { font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.7rem; color:var(--accent-deep, #1855BD); white-space:nowrap; }
.ewt-bar { width:120px; height:6px; border-radius:6px; background:rgba(38,105,204,.15); overflow:hidden; }
.ewt-bar i { display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg, var(--accent, #2669CC), var(--sky, #5BA8E5)); transition:width .5s cubic-bezier(.22,1,.36,1); }
.ewt-xp { font-weight:800; color:var(--accent-deep, #1855BD); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ewt-xp.bump { animation: ewt-bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes ewt-bump { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }

/* la carte mission */
.ewt-card {
  position:fixed; width:min(380px, calc(100vw - 24px)); pointer-events:auto;
  background:#fff; color:var(--t1, #1a1a18); border-radius:18px; padding:18px 18px 14px;
  box-shadow:0 30px 80px -20px rgba(7,16,34,.55), 0 0 0 1px rgba(38,105,204,.18);
  opacity:0; transform:translateY(10px) scale(.96);
  transition: opacity .3s, transform .5s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1), left .45s cubic-bezier(.22,1,.36,1);
}
.ewt-card.is-on { opacity:1; transform:none; }
.ewt-arrow { position:absolute; width:14px; height:14px; background:#fff; transform:rotate(45deg); box-shadow:-1px -1px 0 rgba(38,105,204,.18); }
.ewt-card[data-place="bottom"] .ewt-arrow { top:-7px; }
.ewt-card[data-place="top"]    .ewt-arrow { bottom:-7px; box-shadow:1px 1px 0 rgba(38,105,204,.18); }
.ewt-card[data-place="right"]  .ewt-arrow { left:-7px;  box-shadow:-1px 1px 0 rgba(38,105,204,.18); }
.ewt-card[data-place="left"]   .ewt-arrow { right:-7px; box-shadow:1px -1px 0 rgba(38,105,204,.18); }
.ewt-card[data-place="float"] .ewt-arrow, .ewt-card[data-place="dock"] .ewt-arrow { display:none; }

.ewt-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:8px; }
.ewt-ico { flex:0 0 42px; width:42px; height:42px; border-radius:12px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:linear-gradient(135deg, var(--accent, #2669CC), var(--accent-deep, #1855BD)); box-shadow:0 8px 18px -8px rgba(38,105,204,.8); }
.ewt-k { font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep, #1855BD); }
.ewt-card h3 { margin:2px 0 0; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.ewt-card p { margin:0; font-size:.92rem; line-height:1.55; color:var(--t2, #54627A); }
.ewt-tip { margin-top:10px; font-size:.84rem; color:var(--t2, #54627A); background:rgba(39,118,74,.08); border-left:3px solid var(--success, #27764A); padding:7px 10px; border-radius:8px; }
.ewt-tip i { color:var(--success, #27764A); margin-right:6px; }
.ewt-do { margin-top:10px; display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--accent-deep, #1855BD); background:rgba(38,105,204,.08); border-radius:10px; padding:8px 10px; }
.ewt-do i { animation: ewt-point 1s ease-in-out infinite; }
@keyframes ewt-point { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }

.ewt-act { display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.ewt-act .sp { flex:1; }
.ewt-btn { border:0; border-radius:10px; padding:8px 13px; font-size:.86rem; font-weight:700; cursor:pointer; background:rgba(38,105,204,.1); color:var(--accent-deep, #1855BD); transition: transform .15s, background .15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.ewt-btn:hover { transform:translateY(-1px); background:rgba(38,105,204,.16); color:var(--accent-deep, #1855BD); }
.ewt-btn.pri { background:var(--accent-deep, #1855BD); color:#fff; box-shadow:0 8px 18px -8px rgba(24,85,189,.9); }
.ewt-btn.pri:hover { background:var(--accent, #2669CC); color:#fff; }
.ewt-btn.ghost { background:transparent; color:var(--t3, #606C80); font-weight:600; }
.ewt-btn:disabled { opacity:.45; cursor:default; transform:none; }
.ewt-btn:focus-visible { outline:2px solid var(--accent, #2669CC); outline-offset:2px; }

/* écran de fin */
.ewt-done { text-align:center; }
.ewt-badge { width:84px; height:84px; margin:4px auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem;
  background:conic-gradient(from 180deg, var(--accent, #2669CC), var(--sky, #5BA8E5), var(--accent-deep, #1855BD), var(--accent, #2669CC));
  box-shadow:0 16px 40px -12px rgba(38,105,204,.8); animation: ewt-pop .7s cubic-bezier(.34,1.56,.64,1); }
.ewt-badge i { filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
@keyframes ewt-pop { 0% { transform:scale(.3); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.ewt-done h3 { font-size:1.25rem; }
.ewt-done .xp { font-size:1.6rem; font-weight:900; color:var(--accent-deep, #1855BD); margin:6px 0 2px; }
.ewt-done .ewt-act { justify-content:center; }
.ewt-confetti { position:fixed; inset:0; pointer-events:none; z-index:2147483601; }

/* mobile : la carte s'amarre en bas */
@media (max-width:640px) {
  .ewt-card { left:12px !important; right:12px; bottom:12px; top:auto !important; width:auto; transform:translateY(20px); }
  .ewt-card.is-on { transform:none; }
  .ewt-bar { width:70px; }
}
@media (prefers-reduced-motion:reduce) {
  .ewt-spot, .ewt-card, .ewt-hud, .ewt-bar i { transition:none; }
  .ewt-ring.is-on, .ewt-do i, .ewt-badge, .ewt-xp.bump { animation:none; }
}