/* Tutorial-Modus: eigenstaendiges Stylesheet, siehe tutorial.js.
   Bewusst getrennt von style.css (siehe Plan), reused aber deren Klassen
   fuer .wrap/.game-grid/.boardpanel/.board/.cell/.piece/.side/.box. */

/* Die Tutorial-Seite ist (anders als game.php) eine normal scrollbare
   Seite ohne body.game-Klasse -- dadurch gelten automatisch die
   scrollbaren html/body-Basisregeln aus style.css. */
.tutorial-page .board-area { min-height: 160px; }

/* game.php hat zwischen Board und den Namens-Bannern noch #setupNoticeHost
   bzw. #actions, die als kleiner Puffer wirken. Da tutorial.php diese
   Elemente bewusst nicht hat, ueberlappt sonst der Figuren-Ueberhang
   (Drop-Shadow-Filter auf .piece) sichtbar die Banner-Boxen. */
.tutorial-page #topBanner { margin-bottom: 14px; }
.tutorial-page #bottomBanner { margin-top: 14px; }

/* ---------- Sensei-Sprechblase ---------- */
.tut-bubble {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  z-index: 30;
  width: min(360px, calc(100% - 16px));
  background: rgba(15, 15, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  padding: 10px 12px 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  transition: left 0.35s ease, top 0.35s ease, opacity 0.2s ease;
}
.tut-bubble.is-fading { opacity: 0; }

/* Sprechblasen-Pfeil als reines CSS-Dreieck (border-Trick) statt eines
   um 45deg rotierten Quadrats -- letzteres zeigte alle 4 Ecken und wirkte
   dadurch wie eine Raute statt wie eine Pfeilspitze. */
.tut-bubble-arrow {
  position: absolute;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  display: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
/* Blase liegt UNTER dem Anker -> Spitze zeigt nach oben (Basis unten). */
.tut-bubble.arrow-top .tut-bubble-arrow {
  display: block;
  top: -13px;
  margin-left: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid rgb(245 207 9 / 92%);
}
/* Blase liegt UEBER dem Anker -> Spitze zeigt nach unten (Basis oben). */
.tut-bubble.arrow-bottom .tut-bubble-arrow {
  display: block;
  top: auto;
  bottom: -12px;
  margin-left: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid rgb(245 207 9 / 92%);
}

.tut-bubble-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tut-sensei {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}
.tut-head-text { flex: 1 1 auto; min-width: 0; }
.tut-name {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #ffd83a;
  text-transform: uppercase;
}
.tut-progress {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.tut-pause-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.tut-pause-btn.is-paused { background: rgba(255, 216, 58, 0.28); border-color: rgba(255, 216, 58, 0.6); }

.tut-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  min-height: 36px;
}

.tut-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
.tut-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}
.tut-dots span.done { background: rgba(255, 216, 58, 0.9); }
.tut-dots span.current { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }

.tut-actions { display: flex; align-items: center; gap: 8px; }
.tut-skip-btn { flex: 0 0 auto; font-size: 12px; padding: 8px 10px; }
.tut-nav-btns, .tut-end-btns { flex: 1 1 auto; display: flex; gap: 8px; }
.tut-nav-btns button, .tut-end-btns button { flex: 1 1 0; font-size: 13px; padding: 9px 8px; }

/* ---------- Seitenleiste ---------- */
/* (turnbox / tut-info-box removed — logo only, like mobile game chrome) */

/* ---------- Mobile ----------
   Entkoppelt die Tutorial-Seite bewusst von den game.php-spezifischen
   Mobile-Grid-Hacks in style.css (.side{display:contents}, grid-row-
   Zuweisungen), die auf die feste 100dvh-Hoehe von body.game angewiesen
   sind. Da .tutorial-page KEIN body.game ist (Seite darf normal
   scrollen), reicht ein einfaches Ein-Spalten-Layout.

   Phone-shell preview: CSS viewport bleibt desktop-breit, daher greift
   max-width:700px nicht — dieselben Regeln via body.phone-shell-preview. */
@media (max-width: 700px) {
  .tutorial-page .game-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* .side wird wie bei game.php zu display:contents, damit ihre Kinder
     einzeln per grid-row im Grid einsortiert werden koennen -- so kann
     die logo-box vor das Board rutschen, obwohl sie im DOM hinter der
     .boardpanel steht. */
  .tutorial-page .side {
    display: contents;
  }
  .tutorial-page .side .logo-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-row: 1;
    grid-column: 1 / -1;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .tutorial-page .side .logo-sm {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left center;
  }
  .tutorial-page .boardpanel { grid-row: 2; height: auto; padding: 8px; min-width: 0; }
  .tut-bubble { width: calc(100% - 12px); }
}

body.phone-shell-preview.tutorial-page .game-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
body.phone-shell-preview.tutorial-page .side {
  display: contents;
}
body.phone-shell-preview.tutorial-page .side .logo-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  grid-row: 1;
  grid-column: 1 / -1;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
body.phone-shell-preview.tutorial-page .side .logo-sm {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
}
body.phone-shell-preview.tutorial-page .boardpanel {
  grid-row: 2;
  height: auto;
  padding: 8px;
  min-width: 0;
}
body.phone-shell-preview.tutorial-page .tut-bubble {
  width: calc(100% - 12px);
}
body.phone-shell-preview.tutorial-page .wrap {
  padding: 10px;
  box-sizing: border-box;
}

/* Grid-Items sind per Default min-width:auto -- ohne min-width:0 kann die
   von tutorial.js per JS gesetzte feste Board-Pixelbreite (#board) die
   1fr-Spalte am Schrumpfen hindern (z.B. nach einem Resize von breit auf
   schmal) und so einen horizontalen Overflow verursachen. */
.tutorial-page .boardpanel,
.tutorial-page .board-area {
  min-width: 0;
}