/* ==========================================================================
   Chromies Lehrpfad am Handy (11.10.2026): Kopf mit Kapitel-Runen, Chromies Zeile, Aufgabe „Probier es aus“, Bedienelemente je Schritt.
   Weiter geht es immer mit dem großen Knopf (Mittelknopf der Spielleiste).
   ========================================================================== */
body.play .lp6 { display: grid; gap: 12px }
body.play .lp6-h { display: grid; justify-items: center; gap: 4px; text-align: center }
body.play .lp6-h .kick { font: 800 11px/1.2 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #9ff0ff }
body.play .lp6-h > b { display: flex; align-items: center; gap: 8px; font: 400 22px/1.15 var(--disp); color: #ffd98a }
body.play .lp6-h > b .wi { width: 26px; height: 26px; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 }
body.play .lp6-pips { display: flex; gap: 6px; margin-top: 2px }
body.play .lp6-pips i { width: 14px; height: 16px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #2a1e12 }
body.play .lp6-pips i.done, body.play .lp6-pips i.skip { background: linear-gradient(160deg, #ffe7a0, #b8802a) } body.play .lp6-pips i.skip { opacity: .6 }
body.play .lp6-pips i.on { background: linear-gradient(160deg, #c8fbff, #2a9ab8); animation: lp6on 1.6s ease-in-out infinite } @keyframes lp6on { 50% { transform: scale(1.18) } }
body.play .lp6-say { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .25); font: 500 14.5px/1.4 var(--ui); color: #eadfc6 }
body.play .lp6-say img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #c9a24a } body.play .lp6-say b { color: #ffd98a }
body.play .lp6-task { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(180deg, rgb(14 34 42 / .96), rgb(6 14 18 / .97)) padding-box, linear-gradient(180deg, #8fe6ff, #2a7a92 60%, #154050) border-box }
body.play .lp6-task .plq { justify-self: start; padding: 3px 10px; border-radius: 99px; font: 800 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #062028; background: linear-gradient(#bff6ff, #4ec8e8) }
body.play .lp6-task p { margin: 0; font: 600 16px/1.35 var(--ui); color: #eaf6f8 } body.play .lp6-task p b { color: #fff3c4 }
body.play .lp6-task ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px }
body.play .lp6-task li { display: flex; align-items: center; gap: 10px; font: 600 15px var(--ui); color: #b9d4da }
body.play .lp6-task li i { flex: none; width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 2px #5aa8bc }
body.play .lp6-task li.ok { color: #c9f5d2 } body.play .lp6-task li.ok i { background: #3ac85a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23052a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow: none }
body.play .lp6-task.ok { background: linear-gradient(180deg, rgb(14 42 22 / .96), rgb(6 18 10 / .97)) padding-box, linear-gradient(180deg, #9cf5b0, #2a924a 60%, #155028) border-box } body.play .lp6-task.ok .plq { color: #052a0c; background: linear-gradient(#c8ffd4, #4ed870) }
body.play .lp6-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px }
body.play .lp6-foot .pb { width: auto; flex: 0 1 auto; min-height: 44px; padding: 0 16px; justify-content: center; font-size: 14px }
body.play .lp6-foot .pb.armed, body.play .lp6-foot .pb[data-armed] { color: #ffd98a }
/* Weltkarte zum Üben */
body.play .lp6-map { display: grid; gap: 8px }
body.play .lp6-tg { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; min-height: 64px; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; text-align: left; color: #f2e2b8; background: linear-gradient(180deg, #2a2016, #120d08) padding-box, linear-gradient(180deg, #d9b45e, #6a4a1a) border-box }
body.play .lp6-tg .ab { width: 48px; height: 48px } body.play .lp6-tg b { display: block; font: 400 19px var(--disp) } body.play .lp6-tg small { font: 600 13px var(--ui); color: #b9a787 }
body.play .lp6-tg.on { background: linear-gradient(180deg, #4a3812, #241a08) padding-box, linear-gradient(180deg, #fff2c0, #e8b84a) border-box; box-shadow: 0 0 0 1px #000 } body.play .lp6-tg.lock { opacity: 1 }
body.play .lp6-tg[disabled]:not(.on) { opacity: .4 }
/* Beute zum Üben */
body.play .lp6-bid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
body.play .lp6-bid .pb { display: grid; justify-items: center; align-content: center; min-height: 72px; padding: 6px; text-align: center } body.play .lp6-bid .pb b { font: 800 22px var(--ui); color: #fff } body.play .lp6-bid .pb small { font: 700 11px var(--ui); color: #9fd0ff }
body.play .lp6-bid.done { grid-template-columns: 1fr; padding: 14px; border-radius: 12px; background: rgb(0 0 0 / .45); text-align: center } body.play .lp6-bid.done b { font: 800 20px var(--ui); color: #ffd98a } body.play .lp6-bid.done small { font: 600 13px var(--ui); color: #b9a787 }
/* Emotes an Chromie */
body.play .lp6-emo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
body.play .lp6-emo .pb { min-height: 64px; justify-content: center; font: 700 15px var(--ui) } body.play .lp6-emo .pb .wi { width: 34px; height: 34px; border-radius: 6px } body.play .lp6-emo .pb.on { box-shadow: inset 0 0 0 2px #ffd98a }
/* 50:50 hervorheben */
body.play .lp6-hot { animation: lp6hot 1.6s ease-in-out infinite } @keyframes lp6hot { 50% { box-shadow: inset 0 0 0 2px #9ff0ff, 0 0 0 1px #000 } }
/* Wartebereich */
body.play .lp6.wait { text-align: left }
body.play .lp6-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
body.play .lp6-who > div { display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .2) }
body.play .lp6-who img { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c) } body.play .lp6-who b { font: 800 14px var(--ui); color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } body.play .lp6-who small { font: 600 12px var(--ui); color: #b9a787 }
body.play .lp6-who .fin { box-shadow: inset 0 0 0 1px #9cf5b0 } body.play .lp6-who .fin small { color: #9cf5b0 } body.play .lp6-who .go { box-shadow: inset 0 0 0 2px #9ff0ff }
body.play .lp6-rep summary { padding: 10px 2px; font: 700 14px var(--ui); color: #c9b48a; cursor: pointer } body.play .lp6-rep > div { display: grid; gap: 6px }
body.play .lp6-rep .pb .wi { width: 28px; height: 28px; border-radius: 5px }
body.play .lp6-fight { display: grid; gap: 10px }

/* Antwortmodus: nur Antworten + Hilfen, der Kopf des Lehrpfads tritt zurück */
body.play.qmode .lp6-h { display: none }

/* Umbau 11.10.: Gesprächsschritt als Karte wie das Bereitschafts-Tor (g6) – keine Plakette, weiter mit dem großen Knopf */
body.play .lp6-g { margin: 0 }
body.play .lp6-g .g6-t { color: #eadfc6 } body.play .lp6-g.done .g6-t { color: #c9f5d2 }
body.play .lp6-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px }
body.play .lp6-list li { display: flex; align-items: center; gap: 10px; font: 600 15px var(--ui); color: #c9bfa8 }
body.play .lp6-list li i { flex: none; width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 2px #8a6a30 }
body.play .lp6-list li.ok { color: #c9f5d2 } body.play .lp6-list li.ok i { background: #3ac85a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23052a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow: none }
body.play .lp6-game { display: grid; gap: 12px }
/* Handy-Spiegel auf dem Bildschirm: kein Ziehen, keine Bildlaufleisten */
html.mirror, html.mirror body { scrollbar-width: none; overscroll-behavior: none } html.mirror ::-webkit-scrollbar { display: none }