/* Interaktives Tutorial (.tut-*): Panel, Buehne, Item-Chips, Navigation. */

.tut-ovl{ z-index:300; }
.tut-panel{ max-width:520px; position:relative; text-align:center; }
.tut-close{
  position:absolute; top:12px; right:12px;
  background:none; border:none; font-size:18px; line-height:1;
  padding:6px; box-shadow:none; width:auto; color:var(--muted); border-radius:8px;
}
.tut-close:hover{ color:var(--ink); background:var(--panel2); }
.tut-title{
  font-family:var(--display); font-weight:900; font-size:19px; letter-spacing:.6px;
  margin:0 0 12px; text-align:center;
}
/* Umschalter zwischen den beiden Anleitungen (Grundlagen / Deathmatch) */
.tut-modes{ display:flex; justify-content:center; gap:6px; margin:0 0 12px; }
.tut-mode{
  padding:6px 14px; width:auto; border-radius:999px;
  background:var(--panel2); border:1px solid var(--line); box-shadow:none;
  color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.3px; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, transform .18s;
}
.tut-mode:hover{ color:var(--ink); border-color:var(--muted); }
.tut-mode.on{ background:var(--p0); border-color:var(--p0); color:#fff; transform:translateY(-1px); }

.tut-stage{
  position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:radial-gradient(700px 400px at 50% 30%, #182335 0%, #0d1420 70%, #0a0f18 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
#tutCanvas{ display:block; width:100%; height:auto; }
.tut-items{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:12px 4px 2px;
}
.tut-item{
  display:flex; align-items:center; gap:6px;
  padding:6px 12px 6px 10px; width:auto; border-radius:999px;
  background:var(--panel2); border:1px solid var(--line); box-shadow:none;
  color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.2px;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, transform .18s;
}
.tut-item:hover{ color:var(--ink); border-color:var(--muted); }
.tut-item.on{
  background:var(--p0); border-color:var(--p0); color:#fff; transform:translateY(-1px);
}
.tut-item-ico{ font-size:16px; line-height:1; }

.tut-text{
  min-height:52px; margin:12px 4px; font-size:14px; line-height:1.5;
  color:#b8c4d6; text-align:center;
}
.tut-text b{ color:var(--ink); font-weight:700; }

.tut-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 14px; }
.tut-arrow{
  width:40px; height:40px; padding:0; border-radius:50%;
  font-size:22px; line-height:1; font-weight:700; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.tut-arrow:disabled{ opacity:.3; }
.tut-dots{ display:flex; gap:8px; align-items:center; }
.tut-dot{
  width:9px; height:9px; padding:0; border-radius:50%;
  background:var(--line); border:none; box-shadow:none; cursor:pointer;
  transition:background .2s, transform .2s;
}
.tut-dot:hover{ background:var(--muted); }
.tut-dot.on{ background:var(--p0); transform:scale(1.25); }
.tut-cta{ margin:0; }
.tut-cta.finish{ background:var(--p3); }
.tut-cta.finish:hover{ background:var(--p3); }

@media (max-width:560px){
  .tut-title{ font-size:17px; }
  .tut-text{ font-size:13px; min-height:60px; }
}

@media (max-width:430px){
  .tut-item-lbl{ display:none; }
  .tut-item{ padding:8px 11px; }
  .tut-item-ico{ font-size:20px; }
}

@keyframes tutCheckPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tutBtnSuccess {
  0% { transform: scale(1); filter: brightness(1); box-shadow: none; }
  40% { transform: scale(1.05); filter: brightness(1.2); box-shadow: 0 0 24px rgba(90, 208, 110, 0.8); }
  100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 12px rgba(90, 208, 110, 0.4); }
}

.tut-cta.success-pop {
  animation: tutBtnSuccess 0.4s ease forwards;
  pointer-events: none;
}

.tut-panel.tut-fade-out {
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}