.tutorial-root{
  position:fixed;
  inset:0;
  z-index:55;
  pointer-events:none;
}
.tutorial-root.hidden{display:none}
.tutorial-dim{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,#0a1628aa 0%,#050b14e8 70%);
  pointer-events:auto;
}
.tutorial-spotlight{
  position:fixed;
  z-index:56;
  border-radius:18px;
  box-shadow:0 0 0 9999px #050b14d8,0 0 0 3px #7ec8ff,0 0 28px #4ea3ffaa;
  pointer-events:none;
  transition:top .28s ease,left .28s ease,width .28s ease,height .28s ease,opacity .2s ease;
  opacity:0;
}
.tutorial-spotlight.show{opacity:1}
.tutorial-card{
  position:fixed;
  z-index:57;
  left:50%;
  bottom:max(28px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(460px,calc(100vw - 24px));
  padding:18px 18px 14px;
  border:1px solid #9fd2ff55;
  border-radius:22px;
  background:linear-gradient(165deg,#214876f5,#122845fa 60%,#0c1a32fc);
  box-shadow:0 22px 50px #000b,0 0 0 1px #78b7ff33 inset;
  color:#eaf3ff;
  pointer-events:auto;
  direction:rtl;
  animation:tutorialCardIn .25s ease;
}
@keyframes tutorialCardIn{
  from{opacity:0;transform:translateX(-50%) translateY(14px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.tutorial-card.top{
  bottom:auto;
  top:max(20px,env(safe-area-inset-top));
}
.tutorial-card small{
  display:block;
  color:#8eb6e8;
  font-size:11px;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.tutorial-card h2{
  margin:0 0 8px;
  font-size:20px;
  font-weight:800;
  color:#fff;
}
.tutorial-card p{
  margin:0 0 14px;
  color:#c5daf5;
  font-size:14px;
  line-height:1.55;
}
.tutorial-progress{
  height:6px;
  border-radius:999px;
  background:#16345a;
  overflow:hidden;
  margin-bottom:12px;
}
.tutorial-progress i{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#57e6d3,#4f9dff);
  transition:width .25s ease;
}
.tutorial-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.tutorial-actions .tutorial-nav{display:flex;gap:8px}
.tutorial-actions button{
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid #9fd2ff55;
  background:#1d4a7c;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.tutorial-actions button.primary{
  background:linear-gradient(180deg,#4f9dff,#2a6fd6);
  border-color:#9fd2ffaa;
}
.tutorial-actions button.ghost{
  background:transparent;
  color:#a8c4e8;
}
.tutorial-timer{
  color:#91b4dc;
  font-size:12px;
  font-weight:700;
  min-width:48px;
  text-align:center;
}
body.tutorial-active .hud-dock,
body.tutorial-active #accountButton,
body.tutorial-active #musicButton,
body.tutorial-active #musicVolume,
body.tutorial-active .player-progress,
body.tutorial-active .zoom-toolbar,
body.tutorial-active #chatWindow{
  transition:filter .2s ease,transform .2s ease;
}
.tutorial-target-pulse{
  position:relative !important;
  z-index:58 !important;
  animation:tutorialPulse 1.1s ease infinite;
}
body.tutorial-active #accountPanel:not(.hidden){
  z-index:58 !important;
  pointer-events:auto;
  max-height:min(70vh,520px);
  overflow:auto;
}
body.tutorial-active .tutorial-card{z-index:60}
@keyframes tutorialPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.25) drop-shadow(0 0 10px #7ec8ff)}
}
@media (max-width:640px){
  .tutorial-card{padding:14px}
  .tutorial-card h2{font-size:17px}
  .tutorial-card p{font-size:13px}
}