/* OMNISCIENT SCAN — TUTORIAL v1 "Modo aventura". Guía con Omni, misiones, XP, rangos y foco sobre cada zona real de la página. */
.tt{position:fixed;inset:0;z-index:100000;pointer-events:none;color:#f5f0fd;font-family:var(--font,'Figtree',system-ui,sans-serif);--tt-v:var(--accent,#8b5cf6);--tt-v2:var(--accent-2,#b79cff);--tt-gold:var(--gold,#f5b942)}
.tt[hidden],.tt [hidden]{display:none!important}
.tt *{box-sizing:border-box}
.tt-block{position:fixed;inset:0;background:transparent;touch-action:none;pointer-events:auto}

/* Foco (spotlight): el recorte deja ver la zona; el resto se oscurece con la sombra gigante */
.tt-ring{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:1rem;pointer-events:none;box-shadow:0 0 0 .18rem rgba(183,156,255,.85),0 0 1.6rem .25rem rgba(139,92,246,.65),0 0 0 100vmax rgba(5,2,14,.8)}
.tt-ring.is-glide{transition:left .42s cubic-bezier(.22,1,.36,1),top .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),border-radius .42s}
.tt-ring.is-none{box-shadow:0 0 0 100vmax rgba(5,2,14,.84)}
.tt-ring.is-none::before,.tt-ring.is-none::after{display:none}
/* Esquinas de mira, como un videojuego */
.tt-ring::before{content:'';position:absolute;inset:-.55rem;border-radius:inherit;pointer-events:none;
  background:
   linear-gradient(var(--tt-gold),var(--tt-gold)) 0 0/1.15rem .2rem no-repeat,linear-gradient(var(--tt-gold),var(--tt-gold)) 0 0/.2rem 1.15rem no-repeat,
   linear-gradient(var(--tt-gold),var(--tt-gold)) 100% 0/1.15rem .2rem no-repeat,linear-gradient(var(--tt-gold),var(--tt-gold)) 100% 0/.2rem 1.15rem no-repeat,
   linear-gradient(var(--tt-gold),var(--tt-gold)) 0 100%/1.15rem .2rem no-repeat,linear-gradient(var(--tt-gold),var(--tt-gold)) 0 100%/.2rem 1.15rem no-repeat,
   linear-gradient(var(--tt-gold),var(--tt-gold)) 100% 100%/1.15rem .2rem no-repeat,linear-gradient(var(--tt-gold),var(--tt-gold)) 100% 100%/.2rem 1.15rem no-repeat;
  filter:drop-shadow(0 0 .35rem rgba(245,185,66,.7));animation:ttBreath 1.9s ease-in-out infinite}
.tt-ring::after{content:'';position:absolute;inset:-.2rem;border-radius:inherit;border:2px solid var(--tt-v2);opacity:0;animation:ttPulse 2s ease-out infinite}
@keyframes ttBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes ttPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}

/* Cuadro de diálogo */
.tt-box{pointer-events:auto;position:fixed;left:50%;transform:translateX(-50%);width:min(40rem,calc(100vw - 1.25rem));display:flex;flex-direction:column;gap:.7rem;padding:1rem 1.15rem 1rem;border-radius:1.4rem;
  background:linear-gradient(165deg,rgba(32,21,62,.97),rgba(13,8,27,.98));border:1px solid rgba(183,156,255,.38);box-shadow:0 1.6rem 4rem rgba(2,0,10,.7),0 0 0 1px rgba(139,92,246,.2),0 0 3rem rgba(124,77,255,.22);animation:ttPop .38s cubic-bezier(.22,1,.36,1) both}
.tt-box::before{content:'';position:absolute;left:1.6rem;right:1.6rem;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--tt-gold),transparent);opacity:.85}
.tt-box.is-bottom{bottom:max(1rem,env(safe-area-inset-bottom));top:auto}
.tt-box.is-top{top:max(1rem,env(safe-area-inset-top));bottom:auto}
.tt-box.is-center{top:50%;bottom:auto;transform:translate(-50%,-50%)}
@keyframes ttPop{from{opacity:0;margin-top:.8rem}to{opacity:1;margin-top:0}}
.tt-box.is-center{animation-name:ttPopC}
@keyframes ttPopC{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.tt-top{display:flex;align-items:center;gap:.8rem}
.tt-orb{flex:none;position:relative;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#efe8ff,#b79cff 70%);box-shadow:0 0 0 .14rem rgba(245,185,66,.85),0 0 1.4rem rgba(183,156,255,.6);animation:ttFloat 3.2s ease-in-out infinite}
.tt-orb img{width:76%;height:76%;object-fit:contain}
@keyframes ttFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.22rem)}}
.tt-who{min-width:0;flex:1;display:grid;gap:.12rem}
.tt-who b{font:800 .72rem/1 var(--logo,'Cinzel',serif);letter-spacing:.22em;text-transform:uppercase;color:var(--tt-v2)}
.tt-who span{font:700 .8rem/1.1 var(--display,'Sora',sans-serif);letter-spacing:.08em;color:var(--tt-gold)}
.tt-x{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgba(183,156,255,.3);background:rgba(255,255,255,.05);color:#d9d0f0;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.tt-x:hover{background:rgba(255,255,255,.13);color:#fff;transform:rotate(90deg)}

/* Barra de XP y nivel */
.tt-xp{display:grid;gap:.28rem}
.tt-xp-row{display:flex;justify-content:space-between;gap:.6rem;font:700 .7rem/1 var(--display,'Sora',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#cdbff0}
.tt-xp-row b{color:var(--tt-gold)}
.tt-bar{position:relative;height:.62rem;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(183,156,255,.18)}
.tt-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#7c4dff,#b79cff 60%,#f5b942);transition:width .7s cubic-bezier(.22,1,.36,1)}
.tt-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:ttShine 2.4s ease-in-out infinite}
@keyframes ttShine{to{transform:translateX(100%)}}
.tt-gain{position:absolute;right:1.15rem;top:4.6rem;font:800 .95rem/1 var(--display,'Sora',sans-serif);color:var(--tt-gold);text-shadow:0 0 .8rem rgba(245,185,66,.7);pointer-events:none;opacity:0}
.tt-gain.on{animation:ttGain 1.1s ease-out both}
@keyframes ttGain{0%{opacity:0;transform:translateY(.4rem) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-1.4rem) scale(1)}}
.tt-lvl{display:none;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .8rem;border-radius:.8rem;background:linear-gradient(90deg,rgba(245,185,66,.18),rgba(124,77,255,.28));border:1px solid rgba(245,185,66,.55);font:800 .85rem/1.2 var(--display,'Sora',sans-serif);color:#fff2c9;text-align:center}
.tt-lvl.on{display:flex;animation:ttLvl 2.6s ease both}
@keyframes ttLvl{0%{opacity:0;transform:scale(.9)}12%{opacity:1;transform:scale(1.04)}20%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}

/* Cuerpo */
.tt-body{display:grid;gap:.55rem;max-height:min(44vh,20rem);overflow:auto;padding-right:.2rem;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(183,156,255,.4) transparent}
.tt-title{margin:0;font:800 1.32rem/1.15 var(--logo,'Cinzel',serif);letter-spacing:.02em;background:linear-gradient(90deg,#fff,#d6c7ff 60%,#f5b942);-webkit-background-clip:text;background-clip:text;color:transparent}
.tt-text{margin:0;font:500 1.02rem/1.55 var(--font,'Figtree',sans-serif);color:#e6def8;white-space:pre-line;min-height:3.2em;cursor:default}
.tt-text b{color:var(--tt-gold);font-weight:700}
.tt-caret{display:inline-block;width:.5ch;height:1.05em;margin-left:.1ch;vertical-align:-.15em;background:var(--tt-v2);animation:ttBlink .7s steps(2) infinite}
@keyframes ttBlink{50%{opacity:0}}
.tt-hint{margin:0;font:600 .82rem/1.3 var(--font,'Figtree',sans-serif);color:#a99cd0}
.tt-reto{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:.9rem;background:rgba(245,185,66,.08);border:1px dashed rgba(245,185,66,.5);font:600 .9rem/1.3 var(--font,'Figtree',sans-serif);color:#ffe9b0}
.tt-reto i{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--tt-gold);font-style:normal;color:transparent;transition:background .2s,color .2s}
.tt-reto small{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tt-gold);font-weight:800}
.tt-reto.is-ok{border-style:solid;background:rgba(127,201,155,.14);border-color:rgba(127,201,155,.7);color:#d4f5df}
.tt-reto.is-ok i{background:#7fc99b;border-color:#7fc99b;color:#0b2417}
.tt-reto.is-ok small{color:#7fc99b}
.tt-extra{display:grid;gap:.6rem}
.tt-keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .9rem;margin:0;padding:0;list-style:none}
.tt-keys li{display:flex;align-items:center;gap:.55rem;font:500 .88rem/1.25 var(--font,'Figtree',sans-serif);color:#d9d0f0}
.tt-keys kbd{flex:none;min-width:2rem;padding:.28rem .5rem;border-radius:.5rem;border:1px solid rgba(183,156,255,.45);border-bottom-width:3px;background:rgba(255,255,255,.07);font:700 .8rem/1 var(--display,'Sora',sans-serif);color:#fff;text-align:center}
.tt-sum{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:.8rem .9rem;border-radius:1rem;background:linear-gradient(135deg,rgba(124,77,255,.22),rgba(245,185,66,.1));border:1px solid rgba(245,185,66,.45)}
.tt-medal{position:relative;display:grid;place-items:center;width:4.4rem;height:4.4rem}
.tt-medal::before{content:'';position:absolute;inset:.35rem;transform:rotate(45deg);border-radius:.7rem;background:linear-gradient(135deg,#f5b942,#b79cff);box-shadow:0 0 1.6rem rgba(245,185,66,.65);animation:ttSpin 6s linear infinite}
.tt-medal b{position:relative;font:800 1.5rem/1 var(--logo,'Cinzel',serif);color:#1b1130}
@keyframes ttSpin{50%{transform:rotate(45deg) scale(1.08)}}
.tt-sum dl{margin:0;display:grid;gap:.3rem}
.tt-sum dt{font:800 .68rem/1 var(--display,'Sora',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--tt-v2)}
.tt-sum dd{margin:0;font:800 1.1rem/1.1 var(--display,'Sora',sans-serif);color:#fff}
.tt-sum dd small{font:600 .82rem/1 var(--font,'Figtree',sans-serif);color:#cdbff0}

/* Progreso y botones */
.tt-pips{display:flex;gap:.22rem}
.tt-pip{flex:1;height:.4rem;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.12);cursor:default;transition:background .25s,transform .2s}
.tt-pip.is-done{background:var(--tt-v);cursor:pointer}
.tt-pip.is-done:hover{transform:scaleY(1.7);background:var(--tt-v2)}
.tt-pip.is-now{background:var(--tt-gold);box-shadow:0 0 .6rem rgba(245,185,66,.8)}
.tt-act{display:flex;align-items:center;gap:.6rem}
.tt-act .tt-sp-grow{flex:1}
.tt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.6rem;padding:.5rem 1.1rem;border-radius:99px;border:1px solid rgba(183,156,255,.4);background:rgba(255,255,255,.06);color:#e6def8;font:700 .92rem/1 var(--display,'Sora',sans-serif);cursor:pointer;transition:transform .15s,background .15s,box-shadow .2s,opacity .2s}
.tt-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.tt-btn:active{transform:scale(.96)}
.tt-btn[disabled]{opacity:.35;pointer-events:none}
.tt-btn--go{border-color:transparent;background:linear-gradient(135deg,#8b5cf6,#6d3df0);color:#fff;box-shadow:0 .5rem 1.4rem rgba(109,61,240,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.tt-btn--go:hover{background:linear-gradient(135deg,#9b72ff,#7c4dff);box-shadow:0 .6rem 1.8rem rgba(124,77,255,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.tt-btn--gold{background:linear-gradient(135deg,#f5b942,#e08a1e);color:#2a1700;box-shadow:0 .5rem 1.4rem rgba(245,185,66,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.tt-btn--gold:hover{background:linear-gradient(135deg,#ffcc5c,#f0993a);color:#2a1700}
.tt :focus-visible{outline:2px solid var(--tt-gold);outline-offset:2px}

/* Chispas y confeti de estrellas */
.tt-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.tt-sp{position:absolute;width:var(--s,.7rem);height:var(--s,.7rem);margin:-.35rem 0 0 -.35rem;background:var(--c,#f5b942);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:ttSp var(--d,1s) cubic-bezier(.2,.8,.3,1) forwards}
@keyframes ttSp{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}15%{opacity:1;transform:translate(calc(var(--dx)*.3),calc(var(--dy)*.3)) rotate(90deg) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + var(--g,0px))) rotate(360deg) scale(.6)}}

/* Invitación al tutorial (primera visita) */
.tt-offer{position:fixed;z-index:99990;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(30rem,calc(100vw - 1.25rem));display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:1.3rem;color:#f5f0fd;background:linear-gradient(165deg,rgba(32,21,62,.97),rgba(13,8,27,.98));border:1px solid rgba(183,156,255,.4);box-shadow:0 1.4rem 3.4rem rgba(2,0,10,.6),0 0 2.4rem rgba(124,77,255,.25);animation:ttOffer .6s cubic-bezier(.22,1,.36,1) both}
.tt-offer[hidden]{display:none}
@keyframes ttOffer{from{opacity:0;transform:translate(-50%,1.4rem)}to{opacity:1;transform:translate(-50%,0)}}
.tt-offer .tt-orb{width:3rem;height:3rem}
.tt-offer-t{min-width:0;flex:1;display:grid;gap:.15rem}
.tt-offer-t b{font:800 .98rem/1.15 var(--logo,'Cinzel',serif);color:#fff}
.tt-offer-t span{font:500 .84rem/1.35 var(--font,'Figtree',sans-serif);color:#cdbff0}
.tt-offer-b{flex:none;display:grid;gap:.35rem}
.tt-offer-b .tt-btn{min-height:2.2rem;padding:.4rem .9rem;font-size:.82rem}
@media(max-width:860px){.tt-offer{bottom:calc(4.9rem + env(safe-area-inset-bottom))}}

/* Botón para abrir el tutorial */
.tt-launch{position:relative}
.tt-launch .tt-ping{position:absolute;right:.1rem;top:.1rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--gold,#f5b942);box-shadow:0 0 0 0 rgba(245,185,66,.7);animation:ttPing 1.8s ease-out infinite}
@keyframes ttPing{0%{box-shadow:0 0 0 0 rgba(245,185,66,.7)}100%{box-shadow:0 0 0 .7rem rgba(245,185,66,0)}}

@media(max-width:860px){
  .tt-box{padding:.85rem .9rem;gap:.55rem;border-radius:1.2rem}
  .tt-body{max-height:min(38vh,16rem)}
  .tt-title{font-size:1.15rem}
  .tt-text{font-size:.95rem;min-height:0}
  .tt-orb{width:2.8rem;height:2.8rem}
  .tt-keys{grid-template-columns:1fr}
  .tt-gain{top:4rem}
  .tt-btn{padding:.5rem .9rem}
  .tt-offer{flex-wrap:wrap}
  .tt-offer-b{grid-auto-flow:column;width:100%}
  .tt-offer-b .tt-btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .tt *,.tt-offer,.tt-launch .tt-ping{animation:none!important;transition:none!important}
  .tt-ring::after{display:none}
}