/* ========================= */
/* MOBILE */
/* ========================= */
@media (max-width: 767px) {

  .container {
    padding: 30px 18px;
    padding-top: calc(var(--vh) * 3);

  }

  .logo {
    padding-top: 10px;
  }

  .logo-svg {
    width: clamp(180px, 80vw, 300px);
  }

  .hero {
    gap: 12px;
    transform: translateY(calc(var(--vh) * -4));
    padding-top: 40px;
  }

  .headline {
    font-size: 24px;
    letter-spacing: 1.4px;
  }

  .intro-text {
    top: 21%;
    font-size: 18px;
    letter-spacing: 1px;
    width: 80%;
    max-width: 720px;
    line-height: 1.3;
  }

  .subheadline {
    font-size: 9px;
    letter-spacing: 4px;
  }

  .portal-group {
    width: 100%;
    height: calc(var(--vh) * 55);
  }

  .layer2-item {
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  .portal-1 { top: 75%; left: 50%; }
  .portal-2 { top: 95%; left: 28%; }
  .portal-3 { top: 95%; left: 71%; }

  .layer2-title {
    font-size: 20px;
    white-space: nowrap;
    color: rgb(255, 255, 255);
  }

  .layer2-sub {
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
    color: rgba(194, 157, 35, 0.685);
    margin-top: 1px;
    
  }

  .layer2-item:hover {
    transform: translate(-50%, -50%);
  }

  .layer3-back {
  bottom: calc(-60px + env(safe-area-inset-bottom));
  font-size: 11px;
  letter-spacing: 2px;
}

.layer3-content {
  transform: translateY(-10px); 
}

.layer3-form {
  margin-top: -150px;
}



.step-input {
  font-size: 16px;
}
  .portal-content {
    transform: none !important;
  }

  #sound-toggle {
    bottom: calc(40px + env(safe-area-inset-bottom));
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .footer {
    
    font-size: 9px;
    line-height: 1.4;
  }

  /* ========================= */
/* LAYER 3 MOBILE FIX */
/* ========================= */

.layer3-text-block {
  max-width: 110%;
  margin: 20px auto 0;
  gap: 10px;
  
  
  
}

.l3-line {
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 1.4;

  /* manj “težek” tekst */
  color: rgba(255,255,255,0.8);
}

/* highlight naj ne “kriči” preveč */
.l3-highlight {
  color: rgba(255,255,255,0.95);
}

/* zadnji stavek bolj subtilen */
.l3-final {
  letter-spacing: 2px;
  font-size: 16px;
}

.l3-flow {
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 1.4;

  max-width: 120%;
}

.l3-break {
  height: 14px;
}

/* hitrejša animacija (mobile ne mara dolgih delayev) */
body.layer3 .l3-line:nth-child(1) { transition-delay: 0.2s; }
body.layer3 .l3-line:nth-child(2) { transition-delay: 0.4s; }
body.layer3 .l3-line:nth-child(3) { transition-delay: 0.6s; }
body.layer3 .l3-line:nth-child(4) { transition-delay: 0.8s; }
body.layer3 .l3-line:nth-child(5) { transition-delay: 1.0s; }
body.layer3 .l3-line:nth-child(6) { transition-delay: 1.2s; }
body.layer3 .l3-line:nth-child(7) { transition-delay: 1.4s; }
}