/* HANDY-ANSICHT -- strukturell, NICHT für Kunden-Anpassungen (bis 640px breit
oder quer mit höchstens 500px Höhe, per media-Attribut im geladen). Baut
auf theme.css/webplayer.css auf, überschreibt nur Handy-Abweichungen. Quer:
Abschnitt "Handy quer" am Ende.
Aufbau: Kopf (Titel, Fortschritt, Tabs, Impact-Leiste) | zwei Seiten zum
Wischen (1 = Spiel, 2 = Auswirkungen/Community) | feste Player-Leiste
unten | Entscheidungskarte darüber | Einstellungen als Sheet.
--tt-dock-h/--tt-sheet-h/--tt-mobile-offset/--tt-col-h setzt js/webplayer-mobile.js. */
:root {
--tt-dock-h: 110px;
--tt-sheet-h: 0px;
--tt-text-base: 15px;
/* Kartenhöhe am Handy = Bildschirm minus Abstand der Karte zum Seitenanfang (--tt-mobile-offset,
misst js/webplayer-mobile.js), mindestens 480px. Fest vorgeben: --tt-mobile-height auf :root setzen.
svh = Höhe bei eingeblendeter Safari-Leiste. Ändert sich beim Scrollen der Seite nicht; mit dvh
wuchs und schrumpfte die Karte mit der Leiste, und alles darin rückte nach. */
}
.tt-v7-wrap { max-width: none; }
.tt-v7-card {
/* Container für die Regeln "Wenig Platz" am Ende: Sie richten sich nach der Kartenhöhe, nicht nach
dem Bildschirm (auf der Zielseite ist die Karte oft kleiner als der Bildschirm). */
container: tt-card / size;
box-sizing: border-box; position: relative; overflow: hidden;
height: var(--tt-mobile-height, max(480px, calc(100svh - var(--tt-mobile-offset, 0px))));
border-radius: 0; padding: 8px 0 0; gap: 0;
}
/* ---- Kopf ---- */
.tt-v7-top { display: block; padding: 0 14px; }
.tt-v7-top-main { gap: 2px; }
.tt-v7-title-box { min-width: 0; padding-right: 56px; }
.tt-v7-title { font-size: 18px; }
/* Bezeichnung ("Amtszeit") vor Prozent und Balken in einer Zeile: wie am Desktop benannt, ohne den
Kopf höher zu machen. */
.tt-v7-progress-box { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 56px; }
.tt-v7-progress-box .tt-v7-label { margin: 0; white-space: nowrap; }
.tt-v7-progress-box .tt-v7-progress { flex: 1 1 auto; min-width: 0; }
/* Wert so groß wie die Bezeichnung, gleiche Abstände: "Amtszeit", Wert und Balken auf einer Linie. */
.tt-v7-progress-box .story-progress { gap: 8px; }
.tt-v7-progress-box .story-progress-value { font-size: 13px; }
.tt-v7-wrap .story-progress-track { flex: 1 1 auto; }
.tt-v7-top-side { position: absolute; top: 6px; right: 14px; z-index: 5; }
/* Bei offenem Sheet über die Abdunklung (::after, z-index 50) heben -- sonst liegt das Sheet darunter. */
.tt-v7-settings-open .tt-v7-top-side { z-index: 60; }
/* ---- Tabs und Impact-Leiste ---- */
.tt-v7-pagenav {
display: flex; margin: 8px 14px; padding: 3px; border-radius: 999px;
background: var(--c-bg-2); border: 1px solid var(--c-line);
}
.tt-v7-pagenav button {
flex: 1; min-height: var(--tt-touch); border: 0; border-radius: 999px; padding: 0; cursor: pointer;
background: transparent; color: var(--c-fg-3); font: inherit; font-size: 13px; font-weight: 600;
}
.tt-v7-pagenav button.on { background: var(--c-accent); color: var(--c-on-accent); }
.tt-v7-impact-strip { display: block; margin: 0 14px 8px; }
.tt-v7-impact-strip .story-variables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tt-v7-impact-strip .story-variables > * { display: contents; }
.tt-v7-impact-strip .story-variable { padding: 6px; gap: 5px; border-radius: 10px; }
.tt-v7-impact-strip .story-variable-name { display: none; }
.tt-v7-impact-strip .tt-v7-varbar { height: 7px; }
.tt-v7-impact-strip .tt-v7-varbar-tick { top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; }
.tt-v7-impact-strip .story-variable > span[aria-hidden="true"] { width: 18px; height: 18px; }
/* ---- Zwei Seiten zum Wischen ---- */
.tt-v7-body {
display: flex; gap: 0; flex: 1 1 auto; min-height: 0;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scrollbar-width: none;
padding-bottom: calc(var(--tt-dock-h) + var(--tt-sheet-h) + 10px);
}
.tt-v7-body::-webkit-scrollbar { display: none; }
.tt-v7-player-col, .tt-v7-side-col {
box-sizing: border-box; flex: 0 0 100%; min-width: 0; padding: 0 14px;
scroll-snap-align: start; scroll-snap-stop: always;
}
/* Spielseite und TWISTs .full-player bewusst OHNE overflow:hidden (bei .full-player
setzt TWIST es selbst). Sonst ist die Player-Leiste in Safari/iOS unsichtbar: Sie
steckt in TWISTs Wrapper um (position:relative; z-index:1), und WebKit
schneidet alles in diesem Wrapper an den overflow:hidden-Vorfahren ab, auch die
feste Leiste unterhalb der Textbox. Chrome bezieht sie korrekt auf die Karte.
Abgeschnitten wurde sonst nichts (Standard, Immersiv und Chat nachgemessen). */
.tt-v7-card .tt-v7-player-col,
.tt-v7-card .tt-v7-player-col .full-player { overflow: visible; }
.tt-v7-side-col { overflow-y: auto; overscroll-behavior: contain; }
/* Textbox: Höhe = Seite minus Player-Leiste minus Entscheidungskarte. */
.tt-v7-card .tt-v7-player-col [data-game-id], .tt-v7-card .tt-v7-player-col .full-player { max-width: 100%; min-width: 0; }
/* --tt-col-h = Höhe der Spielseite (.tt-v7-player-col), gemessen von js/webplayer-mobile.js. Sie ergibt
sich aus der Seite minus dem Platz für Leiste und Entscheidungskarte (padding-bottom von .tt-v7-body).
NICHT per container-type auf der Spalte und 100cqh: Safari bis iOS 17 macht einen Container zum
Bezugspunkt für position:absolute/fixed darin. Leiste, Restart und Ansicht-Umschalter hingen dann an
der Spalte statt an der Karte: Die Leiste lag mitten im Text, der Umschalter im Sheet unter der
Zeile Textgröße (nicht antippbar). */
.tt-v7-card .tt-v7-player-col main { box-sizing: border-box; width: 100%; height: var(--tt-col-h, auto); }
/* ---- Player-Leiste fest unten, über beiden Seiten ---- */
/* Leiste, Entscheidungskarte, Wisch-Hinweis und Restart (webplayer.css) hängen per
position:absolute an der Karte, NICHT per position:fixed: Safari/iOS behandelt fixed
beim Scrollen der Seite wie am Bildschirm festgeklebt, obwohl die Karte (contain:layout)
der Bezugspunkt ist. Die Teile hängen dann hinter der Karte her, springen nach dem
Scrollen zurück oder bleiben unsichtbar (Restart). Absolut positioniert scrollen sie
einfach mit. Bezugspunkt bleibt die Karte: Spalten und .tt-v7-body sind nicht
positioniert, beim Wischen bleiben die Teile deshalb stehen. */
/* Damit die Leiste die Karte erreicht, verlieren und TWISTs Wrapper darum nach dem
Start ihr position:relative. TWIST positioniert darin sonst nichts (geprüft: Standard,
Immersiv, Chat und das CSS von integration.js v7.0.0). Vor dem Start s. webplayer.css.
Auch das z-index:1 des Wrappers muss weg: Als Flex-Kind macht er damit einen eigenen
Stapelkontext, und Safari malt die Leiste dann als Teil von .tt-v7-body (scrollt waagrecht)
und schneidet sie an dessen Rand ab. Hochkant unsichtbar (Leiste liegt unter dem Text), quer
liegt die Leiste daneben und fehlte ganz (alle iPhones). */
.tt-v7-card.tt-v7-started .tt-v7-player-col :has(> main),
.tt-v7-card.tt-v7-started .tt-v7-player-col main { position: static !important; z-index: auto !important; }
/* Selektor bewusst verlängert: TWISTs eigene Regel (.hash .chapter-player
{ width: 100% }) ist sonst gleich spezifisch und steht später im Dokument. */
.tt-v7-card .tt-v7-player-col .chapter-player {
position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 30; margin: 0; width: auto; box-sizing: border-box; padding: 6px 10px;
border: 1px solid var(--c-line); border-radius: 18px;
}
/* ---- Entscheidungskarte: fällig oder "immer sichtbar" (.tt-v7-decisions-always,
js/webplayer.js). .tt-v7-decide-due steuert nur das Pulsieren (webplayer.css). ---- */
.tt-v7-decisions-card { display: none; }
:is(.tt-v7-decide-due, .tt-v7-decisions-always) .tt-v7-decisions-card {
display: block; position: absolute; left: 10px; right: 10px; bottom: calc(var(--tt-dock-h) + 18px); z-index: 25;
max-height: 45svh; overflow-y: auto; overscroll-behavior: contain; background: var(--c-bg-2);
}
/* ---- Wisch-Hinweis am Rand ---- */
/* Antippbar: scrollt zur anderen Seite (js/webplayer-mobile.js). Breite = Mindest-Tippziel 44px. */
.tt-v7-peek {
display: grid; place-items: center; position: absolute; top: 38%; z-index: 20;
width: var(--tt-touch); height: 96px; padding: 0; border: 0; color: #fff; cursor: pointer;
}
.tt-v7-peek svg { width: 14px; height: 14px; }
.tt-v7-peek-next {
right: 0; border-radius: 12px 0 0 12px;
background: linear-gradient(90deg, transparent, var(--c-peek-glow));
animation: tt-v7-nudge-next 2.4s ease-in-out 3; /* dreimal, danach ruhig: lenkt beim Lesen sonst ab */
}
.tt-v7-peek-prev {
left: 0; border-radius: 0 12px 12px 0; display: none;
background: linear-gradient(270deg, transparent, var(--c-peek-glow));
animation: tt-v7-nudge-prev 2.4s ease-in-out 3;
}
.tt-v7-page-2 .tt-v7-peek-next { display: none; }
.tt-v7-page-2 .tt-v7-peek-prev { display: grid; }
@keyframes tt-v7-nudge-next { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(-6px); } 90% { transform: translateX(0); } }
@keyframes tt-v7-nudge-prev { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(6px); } 90% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .tt-v7-peek-next, .tt-v7-peek-prev { animation: none; } }
/* ---- Einstellungen: Sheet vom unteren Rand statt Popover (webplayer.css).
Alle Knöpfe (auch Ansicht) stehen im Sheet und scrollen mit. ---- */
.tt-v7-settings-panel {
box-sizing: border-box; top: auto; left: 0; right: 0; bottom: 0; z-index: 60;
width: auto; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain;
border-radius: 20px 20px 0 0; box-shadow: none;
}
.tt-v7-settings-open .tt-v7-settings-panel { position: fixed; }
/* Bei offenem Sheet scrollt Wischen auf der Abdunklung weder Text noch Seite; das Sheet selbst
scrollt weiter (eigener Scrollbereich). */
.tt-v7-card.tt-v7-settings-open { touch-action: none; }
.tt-v7-settings-open::after { content: ""; position: fixed; inset: 0; z-index: 50; background: var(--c-dim); }
/* ---- Feinschliff ---- */
.tt-v7-page-2 .tt-v7-impact-strip { display: none; }
.tt-v7-card .chapter-player .controls-mic span,
.tt-v7-restart span { font-size: 11px; line-height: 1.2; }
/* Restart nur hier ausgeblendet: --c-dim ist teildeckend, Button scheint
sonst durch das Sheet. Am Desktop überschneiden sich Popover/Button nie. */
.tt-v7-settings-open .tt-v7-restart { visibility: hidden !important; }
/* Gleicher Grund: Entscheidungskarte würde sonst durchscheinen. */
.tt-v7-settings-open .tt-v7-decisions-card { display: none !important; }
.tt-v7-decide-due .tt-v7-decisions-card { padding: 8px 12px 12px; }
.tt-v7-decisions-card .decisions-wrapper { margin-top: 0; }
/* Vor dem ersten Play: zusätzlich Handy-eigene Elemente ausblenden, volle
Bildschirmhöhe statt fester Kartenhöhe (s. a. webplayer.css). */
.tt-v7-card:not(.tt-v7-started) .tt-v7-pagenav,
.tt-v7-card:not(.tt-v7-started) .tt-v7-impact-strip,
.tt-v7-card:not(.tt-v7-started) .tt-v7-peek {
display: none;
}
.tt-v7-card:not(.tt-v7-started) {
height: var(--tt-mobile-height, max(480px, calc(100svh - var(--tt-mobile-offset, 0px))));
}
.tt-v7-card:not(.tt-v7-started) .chapter-player {
position: absolute; inset: 0; margin: 0; padding: 0; border: 0;
background: transparent; display: flex; align-items: center; justify-content: center;
}
/* ---- Wenig Platz: Karte höchstens 700px hoch (iPhone SE, mini, Safari-Leisten, quer, Karte
unter Text auf der Zielseite) ----
Beim Entscheiden bleibt Platz für den Text mit der Frage: Werte-Leiste ausblenden (die
Werte stehen auf Seite 2), ab drei Antworten zwei Spalten. */
@container tt-card (max-height: 700px) {
:is(.tt-v7-decide-due, .tt-v7-decisions-always) .tt-v7-impact-strip { display: none; }
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(3)) {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(3)) > .button { margin: 0; padding-inline: 12px; }
/* Ungerade Anzahl: die letzte Antwort über beide Spalten. */
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(3)) > .button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Sehr wenig Platz hochkant (Karte höchstens 560px, z. B. mit 480px Mindesthöhe unter Text auf der
Zielseite): beim Entscheiden auch die Tabs ausblenden (Wischen und Pfeil bleiben), Titel
"Triff deine Wahl" weglassen (der leuchtende Rahmen zeigt die Entscheidung), zwei Antworten
nebeneinander. */
@container tt-card (max-height: 560px) and (orientation: portrait) {
:is(.tt-v7-decide-due, .tt-v7-decisions-always) .tt-v7-pagenav { display: none; }
.tt-v7-decisions-card #decide-title { display: none; }
.tt-v7-decisions-card .decision-view { padding: 0; }
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(2)) {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(2)) > .button { margin: 0; padding-inline: 12px; }
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(2)) > .button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ---- Handy quer (Fenster höchstens 500px hoch): zwei Spalten ----
Links die Wisch-Seiten (Text bzw. Auswirkungen) in voller Höhe, rechts Titel, Tabs, Werte,
Entscheidungskarte und Player-Leiste. Leiste und Karte hängen wie hochkant per
position:absolute an der Karte, nur in die rechte Spalte verschoben. */
@media (orientation: landscape) and (max-height: 500px) {
.tt-v7-card {
--tt-land-left: 57%; /* Breite der Textspalte */
display: grid; grid-template-columns: var(--tt-land-left) minmax(0, 1fr);
grid-template-rows: auto auto auto minmax(0, 1fr); align-content: start;
}
/* Quer ist der Bildschirm niedriger als die 480px Mindesthöhe von hochkant. */
.tt-v7-card, .tt-v7-card:not(.tt-v7-started) {
height: var(--tt-mobile-height, max(260px, calc(100svh - var(--tt-mobile-offset, 0px))));
}
.tt-v7-top { grid-column: 2; grid-row: 1; }
.tt-v7-pagenav { grid-column: 2; grid-row: 2; }
.tt-v7-impact-strip { grid-column: 2; grid-row: 3; }
.tt-v7-body { grid-column: 1; grid-row: 1 / -1; padding-bottom: 10px; }
.tt-v7-card .tt-v7-player-col .chapter-player,
:is(.tt-v7-decide-due, .tt-v7-decisions-always) .tt-v7-decisions-card { left: calc(var(--tt-land-left) + 2px); }
/* Entscheidungskarte zwischen Titel und Leiste; Tabs und Werte machen solange Platz. */
:is(.tt-v7-decide-due, .tt-v7-decisions-always) .tt-v7-decisions-card { box-sizing: border-box; max-height: calc(100% - var(--tt-dock-h) - 96px); }
:is(.tt-v7-decide-due, .tt-v7-decisions-always) .tt-v7-pagenav { visibility: hidden; }
/* Seitenwechsel über die Tabs; der Pfeil läge sonst mitten im Bild. */
.tt-v7-peek { display: none !important; }
/* Wenig Höhe: Antworten ab zwei nebeneinander (zwei Spalten), sonst passten schon zwei kaum. */
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(2)) {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(2)) > .button { margin: 0; padding-inline: 12px; }
.tt-v7-decisions-card .decisions-wrapper:has(> .button:nth-child(2)) > .button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Sehr niedrig (quer mit Safari-Leisten, z. B. iPhone SE): Titel "Triff deine Wahl" weglassen, der
leuchtende Rahmen zeigt die Entscheidung. So passen bis zu vier Antworten ohne Scrollen. */
@media (orientation: landscape) and (max-height: 360px) {
.tt-v7-decisions-card #decide-title { display: none; }
:is(.tt-v7-decide-due, .tt-v7-decisions-always) .tt-v7-decisions-card { padding: 6px 10px 8px; }
.tt-v7-decisions-card .decision-view { padding: 0; }
/* Leiste ohne die kleinen Beschriftungen unter "Neu starten" und dem Mikro (für Screenreader weiter
da): flacher, damit die Antworten zwischen Titel und Leiste passen. Safari lässt quer mit Tab-
Leiste teils nur ~265px Höhe (iPhone 13 mini, iOS 26). */
.tt-v7-card .chapter-player .controls-mic span,
.tt-v7-restart span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}