/* =========================================
   TUTORIAL-EXPERIENCE.CSS
   1. Intro overlay
   2. Guided tour layer
   3. Guided tour focus helpers
   4. Tutorial UFO
   5. Footer replay link
   6. Responsive adjustments
   ========================================= */

/* =========================================
   1. Intro overlay
   ========================================= */

html.va-tutorial-intro-lock,
body.va-tutorial-intro-lock{
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

html.va-auth-onboarding-lock,
body.va-auth-onboarding-lock{
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

body.va-auth-onboarding-lock,
body.va-auth-onboarding-lock *{
  cursor:default !important;
  user-select:none !important;
}

body.va-auth-onboarding-lock a,
body.va-auth-onboarding-lock button,
body.va-auth-onboarding-lock input,
body.va-auth-onboarding-lock select,
body.va-auth-onboarding-lock textarea,
body.va-auth-onboarding-lock [role="button"],
body.va-auth-onboarding-lock [data-action],
body.va-auth-onboarding-lock .act,
body.va-auth-onboarding-lock .icon-btn{
  pointer-events:none !important;
}

body.va-auth-onboarding-lock #va-auth-status-popup,
body.va-auth-onboarding-lock #va-auth-status-popup *{
  pointer-events:auto !important;
}

.va-tutorial-intro{
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:grid;
  place-items:center;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  touch-action:pan-y;
  transition:opacity .32s ease, visibility 0s linear .32s;
}

.va-tutorial-intro.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .32s ease;
}

.va-tutorial-intro__backdrop{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 800px at 50% 38%, rgba(112, 153, 255, 0.12), transparent 62%),
    radial-gradient(900px 700px at 50% 62%, rgba(255, 108, 214, 0.10), transparent 58%),
    rgba(3, 6, 14, 0.96);
  backdrop-filter:blur(4px);
}

.va-tutorial-intro__panel{
  position:relative;
  width:min(680px, calc(100vw - 32px));
  max-height:min(calc(100vh - 32px), 820px);
  padding:34px 28px 28px;
  box-sizing:border-box;
  color:#eef5ff;
  text-align:center;
  background:linear-gradient(180deg, rgba(10, 18, 36, 0.96), rgba(8, 12, 26, 0.98));
  border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 36px rgba(88, 178, 255, 0.16), 0 24px 60px rgba(0,0,0,0.58);
  overflow:hidden;
  opacity:0;
  transform:translateY(8px) scale(var(--site-global-zoom, 1));
  transform-origin:center center;
  transition:opacity .26s ease, transform .26s ease;
}

.va-tutorial-intro__panel::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(127, 213, 255, 0.30);
  border-radius:inherit;
  pointer-events:none;
}

.va-tutorial-intro__halo{
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle, rgba(116, 197, 255, 0.12), transparent 58%);
  pointer-events:none;
}

.va-tutorial-intro__logo{
  position:relative;
  z-index:1;
  display:block;
  width:clamp(200px, 34vw, 360px);
  margin:0 auto 16px;
  opacity:0;
  transform:translateY(6px);
  filter:drop-shadow(0 0 22px rgba(145, 213, 255, 0.20));
  transition:opacity .28s ease, transform .28s ease;
}

.va-tutorial-intro.is-open .va-tutorial-intro__panel{
  opacity:1;
  transform:scale(var(--site-global-zoom, 1));
}

.va-tutorial-intro.is-open .va-tutorial-intro__logo{
  opacity:1;
  transform:none;
}

.va-tutorial-intro__eyebrow,
.va-tutorial__eyebrow,
.va-tutorial__progress,
.va-tutorial__countdown,
.va-tutorial__btn,
.va-tutorial-intro__button{
  font-family:'Orbitron','Montserrat',system-ui,sans-serif;
}

.va-tutorial-intro__eyebrow{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#87cfff;
}

.va-tutorial-intro__title,
.va-tutorial__title{
  font-family:'Orbitron','Montserrat',system-ui,sans-serif;
}

.va-tutorial-intro__title{
  position:relative;
  z-index:1;
  margin:0;
  font-size:clamp(24px, 4vw, 36px);
  line-height:1.18;
  color:#fff6d7;
  text-shadow:0 0 10px rgba(255, 246, 215, 0.22), 0 0 22px rgba(255, 218, 132, 0.18);
}

.va-tutorial-intro__text,
.va-tutorial__body{
  line-height:1.58;
}

.va-tutorial-intro__text{
  position:relative;
  z-index:1;
  max-width:520px;
  margin:14px auto 0;
  font-size:15px;
  color:rgba(233, 242, 255, 0.88);
}

.va-tutorial-intro__loader{
  position:relative;
  z-index:1;
  width:min(420px, 100%);
  height:10px;
  margin:22px auto 12px;
  padding:1px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(127, 213, 255, 0.18);
  border-radius:999px;
  overflow:hidden;
}

.va-tutorial-intro__loader span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(122, 208, 255, 0.18), rgba(122, 208, 255, 0.95), rgba(255, 172, 219, 0.78));
  transition:width .18s ease;
  box-shadow:0 0 10px rgba(122, 208, 255, 0.26);
  position:relative;
  overflow:hidden;
}

.va-tutorial-intro__loader span::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:translateX(-100%);
  animation:va-tutorial-intro-sheen 1s linear infinite;
}

.va-tutorial-intro__status{
  position:relative;
  z-index:1;
  margin:0;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(162, 216, 255, 0.86);
}

.va-tutorial-intro__status[data-va-intro-loading="true"]::after{
  content:'...';
  display:inline-block;
  width:1.6em;
  text-align:left;
  animation:va-tutorial-intro-dots 1.1s steps(4, end) infinite;
}

.va-tutorial-intro__button{
  position:relative;
  font-family:'Orbitron', 'Montserrat', sans-serif;
  z-index:1;
  margin-top:18px;
  min-width:220px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:11px;
  background:rgba(255,255,255,0.08);
  color:#edf5ff;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:not-allowed;
  opacity:.56;
  transition:opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}

.va-tutorial-intro.is-ready .va-tutorial-intro__button{
  cursor:pointer;
  opacity:1;
  background:rgba(120, 205, 255, 0.12);
  border-color:rgba(120, 205, 255, 0.34);
}

.va-tutorial-intro.is-ready .va-tutorial-intro__button:hover,
.va-tutorial-intro.is-ready .va-tutorial-intro__button:focus-visible{
  transform:translateY(-1px);
  background:rgba(120, 205, 255, 0.18);
}

/* =========================================
   2. Guided tour layer
   ========================================= */

.va-tutorial{
  position:fixed;
  inset:0;
  z-index:2147483300;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}

.va-tutorial.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:none;
  transition:opacity .22s ease;
}

body.va-tutorial-clicklock a,
body.va-tutorial-clicklock button,
body.va-tutorial-clicklock input,
body.va-tutorial-clicklock select,
body.va-tutorial-clicklock textarea,
body.va-tutorial-clicklock [role="button"],
body.va-tutorial-clicklock [data-action],
body.va-tutorial-clicklock .act,
body.va-tutorial-clicklock .icon-btn{
  pointer-events:none !important;
}

body.va-tutorial-clicklock #va-tutorial-experience,
body.va-tutorial-clicklock #va-tutorial-experience *,
body.va-tutorial-clicklock #va-tutorial-intro,
body.va-tutorial-clicklock #va-tutorial-intro *,
body.va-tutorial-clicklock .is-va-tutorial-interactive,
body.va-tutorial-clicklock .is-va-tutorial-interactive *{
  pointer-events:auto !important;
}

.va-tutorial__backdrop{
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
}

.va-tutorial__focusLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.va-tutorial__pointerLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.va-tutorial__card{
  position:fixed;
  pointer-events:none;
  width:min(430px, calc(100vw - 28px));
  max-height:calc((100vh - 52px) / var(--site-global-zoom, 1));
  zoom:var(--site-global-zoom, 1);
  transform-origin:top left;
  overflow:auto;
  scrollbar-width:none;
  padding:18px 18px 16px;
  color:#edf5ff;
  background:linear-gradient(180deg, rgba(9, 16, 32, 0.98), rgba(6, 11, 24, 0.98));
  border:1px solid rgba(126, 210, 255, 0.34);
  border-radius:12px;
  min-height:unset;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 28px rgba(89, 188, 255, 0.18), 0 20px 48px rgba(0,0,0,0.54);
}

.va-tutorial__card .va-tutorial__eyebrow,
.va-tutorial__card .va-tutorial__progress,
.va-tutorial__card .va-tutorial__title,
.va-tutorial__card .va-tutorial__body,
.va-tutorial__card .va-tutorial__countdown,
.va-tutorial__card .va-tutorial__actions{
  transition:opacity .18s ease, transform .18s ease;
}

.va-tutorial__card.is-content-fading-out .va-tutorial__eyebrow,
.va-tutorial__card.is-content-fading-out .va-tutorial__progress,
.va-tutorial__card.is-content-fading-out .va-tutorial__title,
.va-tutorial__card.is-content-fading-out .va-tutorial__body,
.va-tutorial__card.is-content-fading-out .va-tutorial__countdown,
.va-tutorial__card.is-content-fading-out .va-tutorial__actions{
  opacity:0;
  transform:translateY(4px);
}

.va-tutorial__card.is-content-fading-in .va-tutorial__eyebrow,
.va-tutorial__card.is-content-fading-in .va-tutorial__progress,
.va-tutorial__card.is-content-fading-in .va-tutorial__title,
.va-tutorial__card.is-content-fading-in .va-tutorial__body,
.va-tutorial__card.is-content-fading-in .va-tutorial__countdown,
.va-tutorial__card.is-content-fading-in .va-tutorial__actions{
  animation:va-tutorial-card-fade-in .22s ease;
}

.va-tutorial.is-centered .va-tutorial__card{
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.va-tutorial:not(.is-centered) .va-tutorial__card{
  transform:none;
}

.va-tutorial.is-active .va-tutorial__card{
  pointer-events:auto;
}

.va-tutorial__eyebrow{
  margin:0 0 8px;
  font-family:'Orbitron', 'Montserrat', sans-serif;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:#84d1ff;
}

.va-tutorial__progress{
  margin:0 0 8px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255, 239, 194, 0.82);
}

.va-tutorial__title{
  margin:0;
  font-family:'Orbitron', 'Montserrat', sans-serif;
  font-size:24px;
  line-height:1.18;
  color:#fff4cf;
  text-shadow:0 0 10px rgba(255, 234, 178, 0.15);
}

.va-tutorial__body{
  margin:12px 0 0;
  font-size:14px;
  color:rgba(233, 242, 255, 0.90);
}

.va-tutorial__accent--green{
  color:#7ff2b6;
}

.va-tutorial__accent--yellow{
  color:#ffd86b;
}

.va-tutorial__accent--violet{
  color:#c98cff;
}

.va-tutorial__accent--orange{
  color:#ffb36b;
}

.va-tutorial__accent--red{
  color:#ff4343;
  text-shadow:0 0 6px rgba(255, 67, 67, 0.38), 0 0 14px rgba(255, 67, 67, 0.22);
}

.va-tutorial__countdown{
  margin-top:14px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8ed7ff;
}

.va-tutorial__countdown[data-va-loading="true"]::after{
  content:'...';
  display:inline-block;
  width:1.6em;
  text-align:left;
  animation:va-tutorial-intro-dots 1.1s steps(4, end) infinite;
}

.va-tutorial__delayedBlock,
.va-tutorial__delayedLoading,
.va-tutorial__delayedContent{
  display:block;
}

.va-tutorial__delayedBlock:not(.is-revealed) .va-tutorial__delayedContent{
  display:none;
}

.va-tutorial__delayedBlock.is-revealed .va-tutorial__delayedLoading{
  display:none;
}

.va-tutorial__signalDots{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:8px;
  vertical-align:middle;
}

.va-tutorial__signalDots > span{
  width:5px;
  height:5px;
  border-radius:999px;
  background:currentColor;
  opacity:.24;
  animation:va-tutorial-signal-dot 1s ease-in-out infinite;
}

.va-tutorial__signalDots > span:nth-child(2){
  animation-delay:.14s;
}

.va-tutorial__signalDots > span:nth-child(3){
  animation-delay:.28s;
}

.va-tutorial__actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-top:16px;
}

.va-tutorial.is-no-actions .va-tutorial__actions{
  display:none;
}

.va-tutorial__btn{
  appearance:none;
  width:100%;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  min-height:unset;
  background:rgba(255,255,255,0.08);
  color:#eff5ff;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.va-tutorial__btn:hover,
.va-tutorial__btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 18px rgba(125, 217, 255, 0.18);
}

.va-tutorial__btn:active{
  transform:translateY(0);
  box-shadow:0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 22px rgba(125, 217, 255, 0.28), 0 0 34px rgba(201, 140, 255, 0.18);
}

.va-tutorial__btn--ghost{
  background:rgba(255,255,255,0.05);
}

.va-tutorial__btn--primary{
  border-color:rgba(123, 208, 255, 0.38);
  background:rgba(123, 208, 255, 0.14);
}

.va-tutorial__btn--primary:hover,
.va-tutorial__btn--primary:focus-visible{
  background:rgba(123, 208, 255, 0.20);
  border-color:rgba(123, 208, 255, 0.50);
  box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 20px rgba(125, 217, 255, 0.24), 0 0 34px rgba(125, 217, 255, 0.16);
}

.va-tutorial__btn--primary:active{
  background:rgba(123, 208, 255, 0.24);
}

.va-tutorial__reloadMsg{
  text-align:center;
}

.va-tutorial__reloadPopup .va-checkout-popup__top{
  justify-content:center;
}

.va-tutorial__reloadPopup .va-checkout-popup__top > div{
  width:100%;
  text-align:center;
}

.va-tutorial__reloadPopup .va-checkout-popup__msg-line{
  text-align:center;
}

.va-tutorial__reloadPillWrap{
  display:flex;
  justify-content:center;
  margin-top:10px;
}

.va-tutorial__reloadPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:260px;
  text-align:center;
  padding:6px 10px;
  border:1px solid rgba(127,242,182,.34);
  border-radius:10px;
  background:rgba(127,242,182,.10);
  box-shadow:0 0 14px rgba(127,242,182,.12);
}

/* =========================================
   3. Guided tour focus helpers
   ========================================= */

.va-tutorial__focus,
.va-tutorial__line,
.va-tutorial__dot{
  position:fixed;
  pointer-events:none;
}

.va-tutorial__focus{
  display:none;
  border:1px solid rgba(125, 217, 255, 0.94);
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 22px rgba(125, 217, 255, 0.16), 0 0 42px rgba(125, 217, 255, 0.10);
  background:rgba(125, 217, 255, 0.035);
}

.va-tutorial__line{
  display:none;
  height:2px;
  background:linear-gradient(90deg, rgba(125, 217, 255, 0.88), rgba(125, 217, 255, 0.12));
  transform-origin:0 50%;
  box-shadow:0 0 12px rgba(125, 217, 255, 0.20);
}

.va-tutorial__dot{
  display:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#8adcff;
  box-shadow:0 0 0 2px rgba(255,255,255,0.15), 0 0 16px rgba(125, 217, 255, 0.46);
}

.is-va-tutorial-target{
  z-index:auto !important;
}

.is-va-tutorial-interactive{
  position:relative !important;
  z-index:2147483315 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

#btnEye.is-va-tutorial-interactive,
.is-va-tutorial-interactive#btnEye{
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(201, 140, 255, 0.34), 0 0 18px rgba(201, 140, 255, 0.42), 0 0 34px rgba(125, 217, 255, 0.18);
  animation:va-tutorial-eye-pulse 1.05s ease-in-out infinite;
}

/* =========================================
   4. Tutorial UFO
   ========================================= */

.va-tutorial-ufo{
  position:fixed;
  z-index:2147483380;
  width:min(140px, 24vw);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  animation:va-tutorial-ufo-drift 2.9s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 12px rgba(125, 217, 255, 0.30));
}

.va-tutorial-ufo img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}

.va-tutorial-ufo.is-caught{
  animation:none;
  transform:scale(.72);
  opacity:0;
  transition:transform .24s ease, opacity .24s ease;
}

/* =========================================
   5. Footer replay link
   ========================================= */

.footer-link[data-action="start-guided-tour"]{
  background:none;
  border:0;
  padding:0;
  color:#ffd76a;
  font-family:'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-align:center;
  text-decoration:none;
  text-transform:none;
  white-space:nowrap;
  text-shadow:
    0 0 4px rgba(255,228,138,0.98),
    0 0 10px rgba(255,215,106,0.95),
    0 0 22px rgba(255,189,46,0.78),
    0 0 38px rgba(255,154,0,0.52);
  cursor:pointer;
  transform:translateY(2px);
  transition:opacity .18s ease, transform .18s ease;
}

.footer-link[data-action="start-guided-tour"]:hover,
.footer-link[data-action="start-guided-tour"]:focus-visible{
  color:#ffd76a;
  text-decoration:none;
  opacity:0.96;
}

/* =========================================
   6. Responsive adjustments
   ========================================= */

@media (max-width: 780px){
  .va-tutorial__card{
    width:min(100vw - 22px, 360px);
    padding:16px 16px 14px;
  }

  .va-tutorial-intro{
    place-items:start center;
    padding:12px 0;
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    height:100vh;
    height:100svh;
    height:100dvh;
  }

  .va-tutorial-intro__panel{
    max-height:none;
    padding:28px 18px 22px;
  }

  .va-tutorial-ufo{
    width:min(118px, 32vw);
  }
}

@keyframes va-tutorial-intro-dots{
  0%{ content:''; }
  25%{ content:'.'; }
  50%{ content:'..'; }
  75%{ content:'...'; }
  100%{ content:''; }
}

@keyframes va-tutorial-signal-dot{
  0%, 80%, 100%{ opacity:.24; transform:translateY(0) scale(.82); }
  40%{ opacity:1; transform:translateY(-1px) scale(1); }
}


@keyframes va-tutorial-card-fade-in{
  0%{ opacity:0; transform:translateY(4px); }
  100%{ opacity:1; transform:none; }
}

@keyframes va-tutorial-eye-pulse{
  0%, 100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 1px rgba(201, 140, 255, 0.30), 0 0 12px rgba(201, 140, 255, 0.34), 0 0 24px rgba(125, 217, 255, 0.12); }
  50%{ opacity:.88; transform:scale(1.08); box-shadow:0 0 0 1px rgba(201, 140, 255, 0.54), 0 0 24px rgba(201, 140, 255, 0.60), 0 0 42px rgba(125, 217, 255, 0.24); }
}

@keyframes va-tutorial-ufo-drift{
  0%{ transform:translate3d(0,0,0) rotate(-2deg); }
  50%{ transform:translate3d(22px,-10px,0) rotate(2deg); }
  100%{ transform:translate3d(-10px,12px,0) rotate(-1deg); }
}