/* ===== Tutorial Spotlight System ===== */

.tutorial-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
}

/* ===== Spotlight highlight ===== */

.tutorial-highlight{
  position:relative;
  z-index:10003;
  border-radius:16px;
  box-shadow:
    0 0 0 9999px rgba(17,24,39,0.55),
    0 0 0 4px rgba(255,255,255,0.9),
    0 0 28px 14px rgba(255,182,213,0.95);
  animation:tutPulse 1.2s ease-in-out infinite;
}


/* ===== Tutorial bubble ===== */

.tutorial-bubble{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(520px, calc(100vw - 28px));
  background:linear-gradient(180deg,#ffffff,#fff2fa);
  border:2px solid rgba(255,105,180,0.55);
  border-radius:22px;
  padding:14px 16px;
  font-size:17px;
  font-weight:700;
  color:#0f172a;
  text-align:center;
  text-transform:uppercase;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.25),
    0 0 0 6px rgba(255,182,213,0.25);
  z-index:10001;
  pointer-events:auto;
  animation:tutPop 220ms ease-out;
}

/* ===== Animations ===== */

@keyframes tutPop{
  from{ transform:translate(-50%,10px); opacity:0; }
  to{ transform:translate(-50%,0); opacity:1; }
}

@keyframes tutPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.03); }
  100%{ transform:scale(1); }
}
/* ===== Tutorial Arrow ===== */

/* ===== Tutorial Magic Pointer ===== */

.tutorial-arrow{
  width:64px;
  height:64px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:rgba(255,105,180,0.15);
  box-shadow:
    0 0 0 0 rgba(255,105,180,0.7),
    0 0 24px rgba(255,182,213,0.9);
  animation:tutorialPulse 1.2s ease-out infinite;
  pointer-events:none;
  z-index:10002;
}


@keyframes tutorialPulse{
  0%{
    transform:translate(-50%, -50%) scale(0.6);
    box-shadow:0 0 0 0 rgba(255,105,180,0.7);
    opacity:1;
  }
  100%{
    transform:translate(-50%, -50%) scale(1.4);
    box-shadow:0 0 0 18px rgba(255,105,180,0);
    opacity:0;
  }
}

html.tutorial-active #gameScreen {
  pointer-events: none;
}
html.tutorial-active #gameScreen .tutorial-highlight {
  pointer-events: auto;
}