/*
 * tutorial.css
 * EO Visual Complexity Experiment – Tutorial
 * Helles Theme (siehe style.css) – die Spotlight-Abdunklung des
 * Overlay-Tutorials bleibt bewusst dunkel (funktional notwendig fuers
 * Hervorheben), die Karten/Panels selbst sind hell.
 */

/* ── Language Selection ─────────────────────────────────── */
#lang-screen{
  position:fixed;inset:0;z-index:4000;
  display:flex;
  background:var(--bg);
  overflow:auto;
}
.lang-panel{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:32px 40px;
  margin:auto;
  background:var(--panel-soft);
  border:1px solid var(--line);border-top:3px solid var(--accent2);
  border-radius:10px;
  box-shadow:0 12px 48px rgba(0,0,0,.12);
}
.lang-panel h2{
  font-size:22px;color:#0a3f70;font-weight:700;letter-spacing:.02em;
  text-align:center;
}
.lang-buttons{display:flex;gap:16px;}
.lang-btn{
  padding:14px 36px;border:none;border-radius:4px;
  background:linear-gradient(180deg,#ffe566 0%,#fdc300 55%,#c99400 100%);
  color:#0a3f70;font-family:var(--font-ui);font-weight:700;font-size:15px;
  cursor:pointer;border-bottom:3px solid #8a6500;
  box-shadow:0 4px 16px rgba(253,195,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
  transition:all .12s;
}
.lang-btn:hover{transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(253,195,0,.5),inset 0 1px 0 rgba(255,255,255,.5);}
.lang-btn:active{transform:translateY(1px);border-bottom-width:1px;}

/* ── Info-/Consent-/Formular-Screens (fullscreen, gemeinsames Grundgeruest) ── */
#tutorial-info-screen{
  position:fixed;inset:0;z-index:3500;
  display:none;
  background:var(--bg);
  padding:20px;overflow:auto;
}
#tutorial-info-screen.active{display:flex;}

/* margin:auto statt align-items/justify-content:center auf dem Container -
   bekannter Flexbox-Bug: bei ueberlaufendem Inhalt "zentriert" ein Flex-
   Container mit align-items:center den Overflow symmetrisch in nicht
   erreichbaren Raum, wodurch selbst mit overflow:auto ein Teil des Inhalts
   (typischerweise oben) durch Scrollen nie sichtbar wird. margin:auto auf
   dem Kind zentriert nur, wenn Platz da ist, und faellt sonst auf normalen
   (voll scrollbaren) Fluss zurueck. Julians Testfund auf dem iPhone
   (2026-09-02): Tutorial-Infotexte passten nicht auf den Bildschirm und
   blieben auch nach dem Scrollen teilweise unerreichbar. */
.tut-info-panel{
  width:min(640px,88vw);
  padding:28px 32px;
  margin:auto;
  background:var(--panel-soft);
  border:1px solid var(--line);border-top:3px solid var(--accent2);
  border-radius:10px;
  box-shadow:0 12px 48px rgba(0,0,0,.12);
  display:flex;flex-direction:column;gap:12px;
}
.tut-step-badge{
  font-family:var(--font-ui);font-size:10px;
  color:var(--accent);letter-spacing:.2em;
  text-transform:uppercase;
}
.tut-info-panel h2{
  font-size:26px;color:#0a3f70;font-weight:700;line-height:1.15;margin:0;
}
.tut-info-panel .tut-subtitle{
  font-size:13px;color:#8a6500;font-weight:600;letter-spacing:.04em;
  margin-bottom:-8px;
}
.tut-info-panel p{
  font-size:14px;color:#2a2a2a;line-height:1.7;margin:0;
}
.tut-info-panel .tut-note{
  font-size:12px;color:var(--muted);
  border-left:2px solid var(--border);padding-left:12px;
  line-height:1.6;
}
/* ── Profilwahl "Wer spielt?" (seit 2026-10-19) ───────────────────────────
   Liste der Aliase auf dem Geraet, je Zeile Auswahl + "x" zum Entfernen.
   Die Liste scrollt bei vielen Profilen (bis 20). Touch: mobile.css. */
.who-panel{width:min(520px,92vw);}
.who-list{
  display:flex;flex-direction:column;gap:8px;
  max-height:min(46vh,320px);overflow-y:auto;padding:2px;
}
.who-item{display:flex;gap:6px;align-items:stretch;}
.who-pick{
  flex:1 1 auto;min-height:44px;padding:10px 14px;text-align:left;
  border:1px solid var(--border);border-radius:6px;background:#fff;
  color:#0a3f70;font-family:var(--font-ui);font-size:14px;font-weight:600;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.who-pick:hover{border-color:var(--accent2);background:#fffbe8;}
.who-remove{
  flex:0 0 44px;min-height:44px;border:1px solid var(--border);border-radius:6px;
  background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;
}
.who-remove:hover{border-color:var(--warn);color:var(--warn);}
.who-new{align-self:stretch;margin-top:4px;}

/* ── Kategorie-Erklaerung (Karten nach dem Overlay-Tutorial) ──────────────
   Bilder oben in einer Reihe, darunter Text. Bildbreite ueber die Viewport-
   Hoehe begrenzt (4:3 -> Hoehe = 0.75*Breite), damit Panel auch auf flachen
   Fenstern ohne Scrollen auskommt. Touch-Variante siehe mobile.css. */
.tut-cat-panel{width:min(760px,92vw);}
.tut-cat-main{display:flex;flex-direction:column;gap:12px;}
.tut-cat-text{display:flex;flex-direction:column;gap:10px;min-width:0;}
.tut-cat-imgs{display:flex;justify-content:center;gap:14px;}
.tut-cat-fig{
  margin:0;flex:0 1 auto;
  width:min(330px,38vh*1.333,100%);
  min-width:0;
}
.tut-cat-imgs .tut-cat-fig:only-child{width:min(400px,44vh*1.333,100%);}
.tut-cat-imgwrap{
  position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:#e6e9ec;line-height:0;
}
.tut-cat-imgwrap img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  user-select:none;-webkit-user-select:none;
}
.tut-cat-fig figcaption{
  font-size:12px;color:var(--muted);line-height:1.35;margin-top:5px;text-align:center;
}
/* Massstabsbalken: Breite = 1 km als Anteil der Bildbreite (inline gesetzt).
   Aussenkontur per box-shadow, damit die Balkenbreite exakt bleibt. */
.tut-scalebar{
  position:absolute;left:10px;bottom:10px;height:6px;
  background:#fff;box-shadow:0 0 0 1.5px #0a3f70;
}
.tut-scalebar i{
  position:absolute;left:0;bottom:9px;font-style:normal;font-family:var(--font-ui);
  font-size:11px;font-weight:700;line-height:1;color:#fff;
  text-shadow:0 0 3px #000,0 0 3px #000,0 0 2px #000;white-space:nowrap;
}
.tut-cat-tip{
  font-size:13px;color:#2a2a2a;line-height:1.55;
  background:rgba(253,195,0,.16);border-left:3px solid var(--accent2);
  border-radius:0 6px 6px 0;padding:8px 12px;
}
.tut-progress{
  display:flex;gap:6px;align-items:center;margin-top:4px;
}
.tut-progress-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);transition:background .3s;
}
.tut-progress-dot.active{background:var(--accent2);}
.tut-btn-row{
  display:flex;justify-content:flex-end;gap:10px;margin-top:6px;
}
.tut-btn{
  padding:11px 30px;border:none;border-radius:4px;
  background:linear-gradient(180deg,#ffe566 0%,#fdc300 55%,#c99400 100%);
  color:#0a3f70;font-family:var(--font-ui);font-weight:700;font-size:14px;
  cursor:pointer;border-bottom:3px solid #8a6500;
  box-shadow:0 4px 14px rgba(253,195,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
  transition:all .12s;
}
.tut-btn:hover{transform:translateY(-2px);}
.tut-btn:active{transform:translateY(1px);border-bottom-width:1px;}
.tut-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.tut-btn-skip{
  padding:11px 20px;border:1px solid var(--border);border-radius:4px;
  background:transparent;color:var(--muted);
  font-family:var(--font-ui);font-size:13px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.tut-btn-skip:hover{border-color:var(--accent);color:#0a3f70;}

/* ── Einwilligung (Consent-Screen) ───────────────────────── */
.tut-consent-label{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.92rem;line-height:1.5;color:#2a2a2a;cursor:pointer;
}
.tut-consent-label input{
  margin-top:3px;flex:0 0 auto;width:18px;height:18px;
  accent-color:#0a3f70;
}

/* ── Personendaten-Formular ───────────────────────────────── */
.tut-form-row{display:flex;flex-direction:column;gap:6px;}
.tut-form-row label{font-weight:600;font-size:0.88rem;color:#2a2a2a;}
.tut-form-row input,
.tut-form-row select{
  padding:8px 10px;border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:0.92rem;background:var(--panel-soft);color:#1a1a1a;
}
.tut-form-row input:focus,
.tut-form-row select:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.tut-form-row.invalid input,
.tut-form-row.invalid select{border-color:var(--warn);}
.tut-form-error{color:var(--warn);font-size:0.85rem;margin:-6px 0 0;display:none;}
.tut-form-error.visible{display:block;}

/* ── Alias-Wortpool-Raeder (seit 2026-09-02, siehe tutorial.js) ───────────
   Optik angelehnt an den iOS-Wecker/Timer-Auswahlwalzen: weiche Ausblendung
   an den Raendern statt hartem Rand, duenne Trennlinien statt gefuellter
   Box zur Markierung der Mitte, Woerter werden mit wachsendem Abstand zur
   Mitte kleiner/blasser (siehe dist-0/1/2-Klassen, gesetzt in
   updateAliasSelectedClasses_ in tutorial.js). */
.alias-preview{
  font-size:19px;font-weight:700;color:#0a3f70;text-align:center;
  padding:10px 14px;background:var(--panel-soft);
  border:1px solid var(--line);border-radius:6px;min-height:1.4em;
}
.alias-wheel-row{position:relative;display:flex;gap:6px;justify-content:center;}
.alias-wheel-highlight{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:44px;
  border-top:1px solid var(--accent2);border-bottom:1px solid var(--accent2);
  pointer-events:none;z-index:5;
}
.alias-wheel-col{position:relative;flex:1;min-width:0;}
.alias-wheel-col::before,
.alias-wheel-col::after{
  content:'';position:absolute;left:0;right:0;height:64px;
  pointer-events:none;z-index:3;
}
.alias-wheel-col::before{top:0;   background:linear-gradient(to bottom, var(--panel-soft) 0%, transparent 100%);}
.alias-wheel-col::after {bottom:0;background:linear-gradient(to top,    var(--panel-soft) 0%, transparent 100%);}
.alias-wheel{
  width:100%;height:220px;overflow-y:auto;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  position:relative;z-index:2;scrollbar-width:none;
}
.alias-wheel::-webkit-scrollbar{display:none;}
.alias-wheel-track{display:flex;flex-direction:column;}
.alias-wheel-pad{height:88px;flex:0 0 auto;}
.alias-wheel-item{
  height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;text-align:center;padding:0 4px;line-height:1.2;
  color:var(--muted);font-size:13px;opacity:.35;
  transition:color .15s,font-weight .15s,font-size .15s,opacity .15s;
}
.alias-wheel-item.dist-1{color:#2a2a2a;font-size:14px;opacity:.6;}
.alias-wheel-item.dist-0{color:#0a3f70;font-weight:700;font-size:16px;opacity:1;}

/* ── Overlay tutorial (over satellite image) ─────────────── */
#tutorial-overlay{
  position:fixed;inset:0;z-index:3000;
  display:none;pointer-events:none;
}
#tutorial-overlay.active{display:block;pointer-events:all;}

/* Dark veil behind everything except the spotlight – bewusst dunkel
   belassen (funktional fuers Spotlight-Hervorheben, siehe Kommentar oben). */
#tut-veil{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  pointer-events:none;
  z-index:3000;
}

/* Tooltip card – helle Karte ueber dem abgedunkelten Hintergrund */
#tut-tooltip{
  position:fixed;
  z-index:3200;
  width:min(420px,82vw);
  padding:20px 24px;
  background:var(--panel-soft);
  border:2px solid var(--accent2);
  border-top:3px solid var(--accent2);
  box-shadow:0 0 0 1px rgba(12,164,209,.2), 0 12px 40px rgba(0,0,0,.4);
  pointer-events:all;
}
#tut-tooltip h3{
  font-size:15px;color:#0a3f70;font-weight:700;
  margin-bottom:8px;letter-spacing:.02em;
}
#tut-tooltip p{
  font-size:13px;color:#2a2a2a;line-height:1.65;margin:0 0 14px;
}

/* Blinking arrow pointer */
.tut-arrow{
  position:fixed;
  width:36px;height:36px;
  pointer-events:none;
  animation:tut-blink 1s ease-in-out infinite;
  z-index:3150;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
@keyframes tut-blink{
  0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:.4;transform:translate(-50%,-50%) scale(1.2);}
}

/* Spotlight cutout (shown via clip-path on veil) */
.tut-spotlight{
  position:fixed;
  border:2px solid var(--accent2);
  box-shadow:0 0 0 9999px rgba(0,0,0,.55);
  pointer-events:none;
  border-radius:4px;
  z-index:3100;
}

/* ── Practice round ──────────────────────────────────────── */
#tut-practice-banner{
  position:absolute;
  top:12px;left:50%;transform:translateX(-50%);
  background:var(--panel-soft);border:1px solid var(--accent2);
  padding:8px 20px;
  font-family:var(--font-ui);font-size:12px;color:#8a6500;
  letter-spacing:.12em;pointer-events:none;z-index:2900;
  display:none;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
#tut-practice-banner.active{display:block;}

#tut-success-msg{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);
  background:var(--panel-soft);border:1px solid var(--accent2);
  padding:10px 24px;
  font-family:var(--font-ui);font-size:14px;color:#0a3f70;font-weight:600;
  z-index:3200;display:none;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}

/* ── Transition ──────────────────────────────────────────── */
.tut-fade-out{animation:tutFadeOut .4s forwards;}
@keyframes tutFadeOut{to{opacity:0;pointer-events:none;}}

/* Alias-Hinweis (seit 2026-10-15): Spielnamen fuer eine moegliche Loeschanfrage notieren */
.alias-hint{font-size:13px;color:var(--muted);text-align:center;margin:0 0 4px;line-height:1.5;}