/* GOMICRAZY v2.4.138 — tutorial visual premium con assets gummy 3D reales.
   Todo se posiciona con viewport/safe-area y anclajes; no depende de resolución fija. */
#tutorial-overlay{
  position:fixed;inset:0;z-index:24;pointer-events:none;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#241443;
  --panel-w:min(460px,42vw,52vh);
  --asset-shadow:drop-shadow(0 10px 16px rgba(7,3,29,.36));
}
#tutorial-overlay *{box-sizing:border-box}
#tutorial-overlay [hidden]{display:none!important}

/* ---------------- panel informativo ---------------- */
.tutorial-panel-shell{
  position:absolute;left:max(12px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));
  width:var(--panel-w);aspect-ratio:4/3;pointer-events:auto;
  filter:var(--asset-shadow);z-index:8;
  animation:tutorialPanelIn .32s cubic-bezier(.2,.9,.2,1.15);
}
.tutorial-panel-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.tutorial-number-badge{
  position:absolute;left:-2.6%;top:-2.2%;width:12.2%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:clamp(13px,1.5vw,22px);font-weight:1000;line-height:1;
  background:radial-gradient(circle at 32% 24%,#9d6bff 0 13%,#6636dd 36%,#32158c 76%,#190867 100%);
  border:3px solid #fff;box-shadow:0 0 0 3px #7b35f1,0 5px 14px rgba(14,2,52,.45);
}
.tutorial-scene-pill{
  position:absolute;left:12%;top:1.6%;max-width:74%;padding:.36em .72em;border-radius:999px;
  background:rgba(26,9,71,.78);border:1px solid rgba(255,255,255,.22);color:#d9f8ff;
  font-size:clamp(8px,.78vw,11px);font-weight:900;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tutorial-panel-title-zone{
  position:absolute;left:23.3%;top:15.7%;width:53.8%;height:15.4%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 3%;
}
.tutorial-label{font-size:clamp(6px,.56vw,9px);font-weight:1000;letter-spacing:.13em;color:#6e2293;line-height:1;margin-bottom:.16em}
.tutorial-title{margin:0;color:#fff;font-weight:1000;font-size:clamp(11px,1.26vw,19px);line-height:1.02;text-transform:uppercase;
  text-shadow:0 2px 0 #8b3b13,0 3px 5px rgba(83,30,0,.36);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tutorial-panel-icon-zone{
  position:absolute;left:8.7%;top:37.2%;width:20.8%;height:28.4%;display:grid;place-items:center;padding:8%;overflow:hidden;
}
.tutorial-panel-icon-img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,28,93,.28));user-select:none}
.tutorial-panel-copy-zone{
  position:absolute;left:34.0%;top:36.2%;width:52.7%;height:34.4%;padding:2.5% 3.2%;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
}
.tutorial-step-progress{font-size:clamp(7px,.68vw,10px);font-weight:1000;color:#6a2bb1;letter-spacing:.06em;margin-bottom:.25em}
.tutorial-text{margin:0;color:#261443;font-size:clamp(9px,.88vw,13px);font-weight:760;line-height:1.25;overflow:hidden}
.tutorial-hint{margin-top:auto;padding:.35em .55em;border-radius:9px;background:linear-gradient(180deg,#fff7bf,#ffe66a);border:1px solid rgba(210,136,0,.34);
  color:#6b3100;font-size:clamp(7px,.72vw,10px);font-weight:950;line-height:1.15;box-shadow:inset 0 1px rgba(255,255,255,.85)}
.tutorial-event{display:none;margin-top:.32em;padding:.35em .55em;border-radius:9px;background:linear-gradient(180deg,#dffff9,#8ef3e2);border:1px solid rgba(0,125,150,.28);
  color:#045869;font-size:clamp(7px,.72vw,10px);font-weight:1000;text-align:center;line-height:1.1}
.tutorial-event.visible{display:block;animation:tutorialEventIn .22s ease-out}
.tutorial-panel-footer{
  position:absolute;left:22.7%;top:73.1%;width:55%;height:7.8%;display:flex;align-items:center;justify-content:center;gap:4%;padding:0 2%;
}
.tutorial-control-badge{font-size:clamp(6px,.59vw,9px);font-weight:1000;color:#f2dcff;white-space:nowrap;text-shadow:0 1px 2px #25044a}
.tutorial-panel-footer button{border:0;border-radius:999px;padding:.34em .65em;font-weight:1000;font-size:clamp(6px,.58vw,9px);cursor:pointer;line-height:1;color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 2px 5px rgba(24,4,59,.26)}
.tutorial-change-control{background:linear-gradient(180deg,#28d8ff,#117bd7)}
.tutorial-skip{background:linear-gradient(180deg,#a254e8,#5c25a7)}

/* ---------------- assets indicadores ---------------- */
.tutorial-target,.tutorial-arrow,.tutorial-arrow-extra,.tutorial-hand,.tutorial-ui-frame{
  position:fixed;z-index:13;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:var(--asset-shadow)
}
.tutorial-target{transform:translate(-50%,-50%);object-fit:contain;animation:tutorialRingPulse 1.0s ease-in-out infinite alternate}
.tutorial-arrow{width:clamp(64px,7vw,105px);height:auto;transition:left .16s ease-out,top .16s ease-out;animation:tutorialArrowPulse .92s ease-in-out infinite alternate}
.tutorial-arrow-extra{width:clamp(52px,6vw,90px);height:auto;transition:left .16s ease-out,top .16s ease-out;animation:tutorialArrowPulse .92s ease-in-out infinite alternate;opacity:.96}
.tutorial-hand{width:clamp(68px,7.4vw,112px);height:auto;transform:translate(-50%,-50%) rotate(-12deg);transition:left .15s ease-out,top .15s ease-out,opacity .15s;animation:tutorialHandTap 1.05s ease-in-out infinite}
.tutorial-hand.ui{width:clamp(62px,6.8vw,102px);transform:translate(-50%,-50%) rotate(-4deg)}
.tutorial-ui-frame{object-fit:fill;transition:left .15s ease-out,top .15s ease-out,width .15s ease-out,height .15s ease-out;animation:tutorialFramePulse 1.05s ease-in-out infinite alternate}
.tutorial-highlight{filter:drop-shadow(0 0 10px rgba(255,219,50,.82))!important}
/* Radar: se amplía temporalmente sin crear canvas ni texturas extra. */
#minimapa.tutorial-radar-focus{
  position:relative;z-index:35;transform:scale(1.34);transform-origin:top right;
  box-shadow:0 0 0 3px rgba(255,213,42,.92),0 0 26px rgba(51,222,255,.78),0 10px 24px rgba(4,2,25,.45);
  transition:transform .32s cubic-bezier(.2,.9,.2,1.15),box-shadow .32s ease;
}
@media (orientation:portrait){#minimapa.tutorial-radar-focus{transform:scale(1.22)}}

/* ---------------- cartel cinematográfico ---------------- */
.tutorial-cinema{
  display:none;position:absolute;left:50%;top:12%;transform:translate(-50%,-50%);padding:.55em 1.1em;border-radius:999px;
  background:linear-gradient(180deg,rgba(77,26,171,.95),rgba(32,8,97,.95));border:2px solid #ffcf33;color:#fff;
  box-shadow:0 7px 18px rgba(8,3,34,.35),inset 0 1px rgba(255,255,255,.3);font-size:clamp(10px,1vw,14px);font-weight:1000;letter-spacing:.12em;z-index:14
}
.tutorial-cinema.visible{display:block;animation:tutorialCinemaIn .2s ease-out}

/* ---------------- modal OBJETIVO CUMPLIDO / REPETIR ---------------- */
.tutorial-modal-layer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(9,4,32,.62);pointer-events:auto;opacity:0;transition:opacity .18s ease}
.tutorial-modal-layer.visible{opacity:1}
.tutorial-modal-shell{position:relative;width:min(660px,88vw,76vh);aspect-ratio:4/3;filter:drop-shadow(0 18px 26px rgba(2,0,20,.55));transform:scale(.88);transition:transform .24s cubic-bezier(.2,.9,.2,1.15)}
.tutorial-modal-layer.visible .tutorial-modal-shell{transform:scale(1)}
.tutorial-modal-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tutorial-modal-title{position:absolute;left:23.2%;top:15.2%;width:54.5%;height:16.5%;display:grid;place-items:center;text-align:center;color:#fff;font-size:clamp(16px,2.2vw,30px);font-weight:1000;
  text-shadow:0 2px 0 #8b3b13,0 4px 7px rgba(80,20,0,.35)}
.tutorial-modal-icon-zone{position:absolute;left:8.7%;top:37%;width:20.8%;height:28.4%;display:grid;place-items:center;padding:9%}
.tutorial-modal-icon{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.tutorial-modal-status{position:absolute;left:23.2%;top:31.8%;width:54.5%;text-align:center;color:#20aa4b;font-size:clamp(28px,4vw,58px);font-weight:1000;z-index:2;text-shadow:0 3px 0 rgba(255,255,255,.7)}
.tutorial-modal-copy{position:absolute;left:34%;top:41%;width:52.8%;height:25%;display:flex;align-items:center;justify-content:center;padding:2% 3%;text-align:center;color:#281548;font-size:clamp(11px,1.18vw,17px);font-weight:800;line-height:1.25;overflow:hidden}
.tutorial-modal-action{position:absolute;left:29%;top:76.5%;width:42%;height:12%;border:0;border-radius:999px;background:linear-gradient(180deg,#a9ff45 0%,#51d51d 46%,#1cad15 100%);color:#fff;
  font-size:clamp(12px,1.5vw,21px);font-weight:1000;text-shadow:0 2px 0 rgba(25,100,0,.4);box-shadow:0 6px 0 #16820d,0 10px 18px rgba(8,78,0,.3),inset 0 2px rgba(255,255,255,.65);cursor:pointer}
.tutorial-modal-action:active{transform:translateY(3px);box-shadow:0 3px 0 #16820d,0 6px 12px rgba(8,78,0,.28)}
.tutorial-modal-layer[data-tipo="fail"] .tutorial-modal-status{color:#ff6f3a}
.tutorial-modal-layer[data-tipo="intro"] .tutorial-modal-status{color:#33d3ff}
.tutorial-modal-layer[data-tipo="intro"] .tutorial-modal-action{background:linear-gradient(180deg,#48dfff,#2196f3 52%,#0a6fd8);box-shadow:0 6px 0 #0c57ab,0 10px 18px rgba(7,41,112,.28),inset 0 2px rgba(255,255,255,.65)}
.tutorial-modal-layer[data-tipo="fail"] .tutorial-modal-action{background:linear-gradient(180deg,#ffd24a,#ff9d1d 52%,#ef6f00);box-shadow:0 6px 0 #b84d00,0 10px 18px rgba(95,35,0,.28),inset 0 2px rgba(255,255,255,.65)}

/* ---------------- cambio de arena ---------------- */
#tutorial-overlay::before{content:'';position:fixed;inset:0;background:rgba(123,255,240,0);pointer-events:none;z-index:1;transition:background .26s ease}
#tutorial-overlay.tutorial-scene-change::before{background:rgba(123,255,240,.15)}

@keyframes tutorialPanelIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tutorialRingPulse{to{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 18px rgba(255,64,226,.72))}}
@keyframes tutorialArrowPulse{to{filter:drop-shadow(0 0 16px rgba(255,203,32,.88));margin-top:-6px}}
@keyframes tutorialFramePulse{to{filter:drop-shadow(0 0 18px rgba(255,201,34,.8))}}
@keyframes tutorialHandTap{0%,100%{margin-top:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}52%{margin-top:7px;transform:translate(-50%,-50%) rotate(-8deg) scale(.93)}}
@keyframes tutorialEventIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tutorialCinemaIn{from{opacity:0;transform:translate(-50%,-50%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Tablet/móvil horizontal: el panel no debe tapar media arena. */
@media (max-height:620px) and (orientation:landscape){
  #tutorial-overlay{--panel-w:min(340px,38vw,50vh)}
  .tutorial-panel-shell{top:max(4px,env(safe-area-inset-top))}
  .tutorial-scene-pill{display:none}
  .tutorial-cinema{top:8%}
}

/* Vertical: panel centrado y algo más grande; indicadores siguen anclados al objetivo real. */
@media (orientation:portrait){
  #tutorial-overlay{--panel-w:min(92vw,56vh,520px)}
  .tutorial-panel-shell{left:50%;transform:translateX(-50%);top:max(6px,env(safe-area-inset-top))}
  .tutorial-panel-shell{animation:tutorialPanelInPortrait .32s cubic-bezier(.2,.9,.2,1.15)}
  .tutorial-cinema{top:38%}
  .tutorial-arrow{width:clamp(58px,14vw,92px)}
  .tutorial-hand{width:clamp(64px,16vw,104px)}
}
@keyframes tutorialPanelInPortrait{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}

@media (max-width:520px){
  .tutorial-scene-pill{font-size:7px;max-width:70%}
  .tutorial-modal-shell{width:min(96vw,72vh)}
  .tutorial-modal-copy{font-size:clamp(10px,3vw,13px)}
}

@media (prefers-reduced-motion:reduce){
  .tutorial-target,.tutorial-arrow,.tutorial-hand,.tutorial-ui-frame,.tutorial-panel-shell{animation:none!important}
  .tutorial-modal-shell,.tutorial-modal-layer{transition:none!important}
}

/* v2.4.138 — el reloj se vuelve protagonista en la muestra 4. */
#hud-reloj.tutorial-timer-focus{
  z-index:36!important; transform:scale(1.22); transform-origin:center;
  box-shadow:0 0 0 3px #FFD23F,0 0 30px rgba(255,210,63,.88),0 10px 26px rgba(7,3,29,.5)!important;
  transition:transform .25s ease,box-shadow .25s ease;
}