/* ========================================================================= Monster erkennen – Stark handeln Grundlayout, Barrierefreiheits-Modi, Spieloberfläche ========================================================================= */ :root { --bg: #10162b; --bg-2: #1b2440; --panel: #222d4d; --panel-2: #2c3a63; --ink: #eef2ff; --ink-dim: #a9b4d6; --line: #3a4770; --accent: #ffc94d; /* Mut */ --friend: #ff8fb1; /* Freundschaft */ --shield: #6fd3ff; /* Schutz */ --know: #9be36f; /* Wissen */ --helper: #c9a3ff; /* Helfer */ --danger: #ff6b6b; --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(0, 0, 0, .35); --font-scale: 1; --base-size: calc(17px * var(--font-scale)); --tap: 48px; } /* ---- Barrierefreiheits-Modi (am gesetzt) ------------------------ */ body[data-contrast="high"] { --bg: #000; --bg-2: #000; --panel: #000; --panel-2: #111; --ink: #fff; --ink-dim: #fff; --line: #fff; --accent: #ffe600; --friend: #ff9ec4; --shield: #7fdcff; --know: #9dff70; --helper: #d9b8ff; --danger: #ff8080; } body[data-contrast="high"] .card, body[data-contrast="high"] .overlay__panel, body[data-contrast="high"] .btn { border-width: 3px; } /* Farbfehlsichtigkeit: Belohnungen und Zustände werden zusätzlich über Form und Beschriftung unterschieden, die Palette wird entsättigt-getrennt. */ body[data-colorblind="deuter"] { --accent:#f0c000; --friend:#8ea6ff; --shield:#5bc8ff; --know:#d8d8d8; --helper:#b9a0ff; --danger:#e08a00; } body[data-colorblind="prot"] { --accent:#e8c547; --friend:#7fb3ff; --shield:#57c9e8; --know:#dcdcdc; --helper:#b4a5ff; --danger:#d69100; } body[data-colorblind="trit"] { --accent:#ff9d5c; --friend:#ff8fb1; --shield:#9ad7d7; --know:#8fe08f; --helper:#dfa0c8; --danger:#ff6b6b; } body[data-colorblind] .pill::before { content: attr(data-symbol) " "; } body[data-motion="reduced"] *, body[data-motion="reduced"] *::before, body[data-motion="reduced"] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- Grundgerüst ------------------------------------------------------- */ * { box-sizing: border-box; } /* Muss vor allen Layout-Regeln stehen: `display: flex` auf .stage oder .touch würde das hidden-Attribut sonst überstimmen und die leere Spielfläche über das Menü legen. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: var(--base-size)/1.55 "Segoe UI", "Noto Sans", system-ui, -apple-system, Arial, sans-serif; overscroll-behavior: none; /* Doppeltippen soll nichts vergrößern und Halten kein Auswahlmenü öffnen – beides stört beim Spielen auf Telefon und Tablet erheblich. */ touch-action: manipulation; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* Während eines Levels darf die Seite nicht mitscrollen: Auf iOS zieht sonst jede Wischbewegung die ganze Seite mit, obwohl der Finger den Joystick bedienen wollte. */ body[data-screen="level"] { overflow: hidden; position: fixed; inset: 0; width: 100%; } body[data-screen="level"] { overflow: hidden; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.01em; } h1 { font-size: 1.9em; } h2 { font-size: 1.35em; } h3 { font-size: 1.1em; } p { margin: 0 0 .8em; } a { color: var(--shield); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: #1a1a1a; padding: .7em 1.2em; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Diese beiden bekommen den Fokus nur programmatisch, damit Screenreader den neuen Bildschirm ansagen. Ein Rahmen um die halbe Seite wäre dabei nur verwirrend – die Bedienelemente darin behalten ihren Fokusrahmen. */ .screen-root:focus, .screen-root:focus-visible, .overlay__panel:focus, .overlay__panel:focus-visible { outline: none; } .noscript { margin: 2rem auto; max-width: 40rem; padding: 1.2rem; background: var(--panel); border: 2px solid var(--danger); border-radius: var(--radius); } /* ---- Bildschirme (Menü, Listen, Lexika) -------------------------------- */ .screen-root { max-width: 62rem; margin: 0 auto; padding: 1.2rem 1.1rem 6rem; } body[data-screen="level"] .screen-root { display: none; } .screen-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .screen-head h1 { margin: 0; flex: 1 1 12rem; } .title-hero { text-align: center; padding: 1.5rem 0 .5rem; } /* Seitenverhältnis kommt aus der Datei (2:1) – height:auto verhindert, dass das Bild beim Skalieren verzerrt. Die Breite darf größer sein als früher, weil es jetzt eine richtige Illustration ist und kein Strichbild. */ .title-hero__art { width: min(100%, 38rem); height: auto; aspect-ratio: 2 / 1; margin: 0 auto 1.1rem; display: block; border-radius: var(--radius); border: 2px solid var(--line); object-fit: cover; } .title-hero__claim { color: var(--ink-dim); max-width: 34rem; margin: 0 auto 1.4rem; } /* ---- Knöpfe ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: var(--tap); padding: .6em 1.15em; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel-2); border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: transform .12s ease, background .12s ease; text-align: left; } .btn:hover { background: var(--line); } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn--primary { background: var(--accent); color: #22200c; border-color: transparent; } .btn--primary:hover { background: #ffd76e; } .btn--ghost { background: transparent; } .btn--wide { width: 100%; } .btn--danger { background: var(--danger); color: #2b0d0d; border-color: transparent; } .menu-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .menu-grid .btn { justify-content: flex-start; font-size: 1.05em; padding: .9em 1.1em; } .menu-grid .btn i { font-style: normal; font-size: 1.3em; width: 1.4em; text-align: center; } /* ---- Karten & Listen --------------------------------------------------- */ .card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .9rem; } .card__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; } .card__title { margin: 0; } .card__sub { color: var(--ink-dim); font-size: .9em; margin: 0; } .grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .tile { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: .8rem; cursor: pointer; color: inherit; font: inherit; text-align: left; } .tile:hover { border-color: var(--accent); } .tile--locked { opacity: .55; cursor: not-allowed; } .tile--locked:hover { border-color: var(--line); } .tile__art { width: 100%; height: 7.5rem; display: flex; align-items: center; justify-content: center; } /* Gezeichnete Figuren sind quadratisch und sollen es bleiben, egal wie hoch oder breit die Kachel gerade ist. */ .char-art { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; } .tile__name { font-weight: 800; } .tile__meta { color: var(--ink-dim); font-size: .85em; } /* Levelauswahl */ .level-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); } .level-chip { position: relative; min-height: 4.6rem; padding: .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-sm); color: inherit; font: inherit; cursor: pointer; } .level-chip:hover:not([disabled]) { border-color: var(--accent); } .level-chip[disabled] { opacity: .4; cursor: not-allowed; } .level-chip__no { font-weight: 800; font-size: 1.15em; } .level-chip__topic { font-size: .62em; color: var(--ink-dim); text-align: center; line-height: 1.2; } .level-chip--done { border-color: var(--know); } .level-chip__stars { font-size: .7em; color: var(--accent); letter-spacing: .05em; } /* Abzeichen / Belohnungen */ .pill { display: inline-flex; align-items: center; gap: .35em; padding: .2em .7em; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: .85em; font-weight: 700; white-space: nowrap; } .pill--mut { color: var(--accent); } .pill--herz { color: var(--friend); } .pill--schild { color: var(--shield); } .pill--wissen { color: var(--know); } .pill--helfer { color: var(--helper); } .pill-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; } .progress { height: .7rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; } .progress__bar { height: 100%; background: var(--know); } /* ---- Notfall-Knopf ----------------------------------------------------- */ .emergency-button { position: fixed; z-index: 60; right: max(.8rem, env(safe-area-inset-right)); top: max(.8rem, env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: .5em; min-height: var(--tap); padding: .5em 1em; background: var(--danger); color: #2b0d0d; border: 2px solid #fff; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); } .emergency-button__icon { font-size: 1.2em; } @media (max-width: 33rem) { .emergency-button__label { display: none; } .emergency-button { padding: .5em .7em; } } .help-entry { border-left: 4px solid var(--danger); padding-left: .9rem; margin-bottom: 1rem; } .help-entry__number { font-size: 1.5em; font-weight: 800; color: var(--ink); text-decoration: none; display: inline-block; } .help-entry__when { color: var(--ink-dim); font-size: .9em; } /* ---- Spielfläche ------------------------------------------------------- */ /* 100dvh statt 100%: Auf iOS und Android schrumpft der sichtbare Bereich, sobald die Adressleiste eingeblendet wird. Mit einer festen Höhe läge die Bildschirmsteuerung dann unter dem Rand. `inset: 0` bleibt als Rückfall für Browser ohne dvh stehen. */ .stage { position: fixed; inset: 0; z-index: 10; height: 100dvh; background: var(--bg); display: flex; align-items: center; justify-content: center; /* Wie viel Höhe die Bildschirmsteuerung am unteren Rand einnimmt. Die Untertitel legen sich darüber, wenn die Steuerung sichtbar ist. Je Bildschirmformat anders – siehe die Medienabfragen weiter unten. */ --touch-space: 15.5rem; } .stage__canvas { display: block; width: 100%; height: 100%; image-rendering: auto; touch-action: none; } /* Die Kopfzeile im Level. Sie steht in EINER Zeile. Umbrach sie – wie vorher –, rutschte die zweite Reihe mitten ins Bild und lief in den Hinweiszähler; quer gehaltene Telefone sahen deshalb aus, als wäre alles verschoben. Statt umzubrechen schrumpfen die Teile jetzt (siehe die Medienabfragen weiter unten), und was keinen Platz hat, verschwindet in dieser Reihenfolge: Belohnungs- plaketten, Levelname, Beschriftungen. */ .hud { position: absolute; z-index: 12; top: max(.6rem, env(safe-area-inset-top)); left: max(.6rem, env(safe-area-inset-left)); right: calc(max(.6rem, env(safe-area-inset-right)) + 12rem); display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; pointer-events: none; } .hud > * { pointer-events: auto; flex: 0 0 auto; } .hud__left, .hud__right { display: flex; align-items: center; gap: .5rem; } /* Der rechte Block wandert an das rechte Ende der Zeile. */ .hud__right { margin-left: auto; } /* Der Levelname darf als Erster schrumpfen und abgeschnitten werden. */ .hud__level { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hud__rewards { display: flex; gap: .35rem; flex-wrap: wrap; } .hud__level { background: rgba(16,22,43,.8); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .3em .7em; font-weight: 700; font-size: .9em; } .hud__btn { min-height: 2.6rem; min-width: 2.6rem; padding: .35em .8em; background: rgba(16,22,43,.85); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-weight: 700; cursor: pointer; } .hud__btn--help { border-color: var(--shield); color: var(--shield); } .hud__btn--ability { border-color: var(--accent); color: var(--accent); } .hud__btn--ability[disabled] { opacity: .4; cursor: not-allowed; } .hud__count { opacity: .8; font-weight: 400; } /* Mutfunken-Anzeige im Level */ .hud__sparks { display: flex; align-items: center; gap: .35rem; background: rgba(16,22,43,.85); border: 1px solid var(--line); border-radius: 999px; padding: .3em .8em; font-weight: 700; font-size: .95em; } .hud__sparks:empty { display: none; } .hud__spark-icon { color: #ffd76a; } .hud__outfit { margin-left: .3rem; opacity: .85; } /* Altersspur wählen. Steht ganz oben auf der Startseite, weil davon abhängt, worum es im ganzen Spiel geht. */ .track-card { border-color: var(--accent); } .track-option { display: block; width: 100%; text-align: left; margin-top: .7rem; padding: .8em 1em; background: var(--panel-2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-sm); font: inherit; cursor: pointer; } .track-option:hover { border-color: var(--accent); } .track-option--on { border-color: var(--accent); background: var(--line); } .track-option__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .track-option__head strong { font-size: 1.1em; } .track-option__ages { background: var(--accent); color: #22200c; border-radius: 999px; padding: .1em .7em; font-size: .82em; font-weight: 800; } .track-option__about { display: block; margin: .35rem 0 .3rem; color: var(--ink-dim); } /* Umschalter über der Levelliste */ .track-switch { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; } .track-switch .btn { flex: 1 1 12rem; } .track-switch__ages { opacity: .8; font-weight: 400; } /* Fußzeile der Startseite: Datenschutz, Impressum, Urheberrecht */ .site-foot { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); text-align: center; } .site-foot p { margin: .5rem 0; } .site-foot__copy { opacity: .8; } /* Elternbereich */ .fact-list { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 1rem 0 .5rem; } .fact-list dt { color: var(--ink-dim); } .fact-list dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .topic-list { margin: .6rem 0 0; padding-left: 1.2rem; } .topic-list li { margin: .35rem 0; } /* Impressum */ .legal-line { margin: .2rem 0; } .legal-copyright { text-align: center; margin-top: 1.5rem; } /* Tauschstand */ .sparks-bar { display: flex; align-items: center; gap: 1rem; } .sparks-bar__icon { font-size: 2.4rem; color: #ffd76a; line-height: 1; } .shop-grid { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .shop-card { display: flex; flex-direction: column; gap: .5rem; } .shop-card__icon { font-size: 2.2rem; line-height: 1; } .shop-card__price { font-weight: 700; color: #ffd76a; margin: 0; } .shop-card__state { font-weight: 700; color: var(--ink-dim); margin: 0; } .shop-card--on { border-color: var(--accent); } .slot-head { margin: 1.6rem 0 .2rem; font-size: 1.15em; color: var(--ink-dim); } .worn-bar { border-color: var(--accent); } .worn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; } .worn-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .25em .5em .25em .8em; font-weight: 700; } .shop-card--locked { opacity: .72; } .btn--small { min-height: 2.2rem; padding: .3em .8em; font-size: .9em; } /* Teil der Kopfzeile, kein frei schwebendes Element. Der automatische Außenabstand links teilt sich den freien Platz mit dem der rechten Gruppe – auf breiten Bildschirmen steht der Zähler dadurch etwa in der Mitte, auf schmalen rückt er einfach nach. */ .clue-tracker { margin-left: auto; display: flex; gap: .4rem; align-items: center; white-space: nowrap; background: rgba(16,22,43,.85); border: 1px solid var(--line); border-radius: 999px; padding: .3em .9em; font-size: .9em; font-weight: 700; } .clue-tracker:empty { display: none; } .clue-dot { width: .85em; height: .85em; border-radius: 50%; border: 2px solid var(--shield); display: inline-block; } .clue-dot--on { background: var(--shield); } /* Ist die Bildschirmsteuerung sichtbar, rücken die Untertitel darüber. Sonst liegt der Text auf den Knöpfen: Ein langer Satz wird zwei- oder dreizeilig und wächst nach oben in den Joystick hinein. Aufgefallen ist das erst mit tools/layout-check.js – bei einem kurzen Satz überdeckt sich nichts, und beim Ausprobieren erwischt man selten den langen. */ #touch-controls:not([hidden]) ~ .subtitles { bottom: calc(var(--touch-space) + .5rem); } .subtitles { position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem)); width: min(92%, 46rem); margin: 0; background: rgba(8,11,22,.88); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6em 1em; text-align: center; font-weight: 600; } /* Touch-Steuerung */ .touch { position: absolute; inset: auto 0 0 0; z-index: 13; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 max(.8rem, env(safe-area-inset-left)) max(4.5rem, calc(env(safe-area-inset-bottom) + 4rem)) max(.8rem, env(safe-area-inset-right)); pointer-events: none; } .touch__btn { pointer-events: auto; width: 4.2rem; height: 4.2rem; margin: .3rem; background: rgba(34,45,77,.85); color: var(--ink); border: 2px solid var(--line); border-radius: 50%; font: inherit; font-size: 1.3em; font-weight: 800; cursor: pointer; touch-action: none; user-select: none; } .touch__btn:active { background: var(--accent); color: #22200c; } /* Gehen links, alles Übrige rechts: Der Rest des Zwischenraums geht an diese Kante, damit die Knöpfe nicht über die ganze Breite auseinanderfallen. */ .touch__right { margin-right: auto; } /* Springen ist die meistgebrauchte Taste auf der Hüpfstrecke – entsprechend groß und mit eigener Farbe, damit sie ohne Suchen zu treffen ist. */ .touch__jump { width: 5rem; height: 5rem; border-color: var(--accent); color: var(--accent); } .touch__act { width: 5.4rem; height: 5.4rem; border-radius: 50%; font-size: 1em; } /* Joystick. Das Feld ist absichtlich viel größer als der sichtbare Ring: Der Stick setzt dort auf, wo der Daumen landet, also darf man großzügig danebengreifen. Ohne pointer-events:auto käme kein Ereignis an, weil .touch selbst durchlässig ist. */ .touch__pad { pointer-events: auto; position: relative; width: 11rem; height: 11rem; margin: .3rem; border-radius: 1.6rem; background: rgba(34,45,77,.5); border: 2px dashed var(--line); touch-action: none; user-select: none; -webkit-user-select: none; display: none; } .touch__pad.is-active { background: rgba(34,45,77,.75); border-style: solid; } .touch__knob { position: absolute; left: var(--stick-x, 50%); top: var(--stick-y, 50%); width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; border-radius: 50%; background: var(--accent); opacity: .55; pointer-events: none; transition: transform .05s linear; } .touch__pad.is-active .touch__knob { opacity: .9; transition: none; } .touch__hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: var(--ink); opacity: .3; pointer-events: none; } .touch__pad.is-active .touch__hint { opacity: 0; } /* Welche Fassung sichtbar ist, entscheidet ein Attribut am Container. Im Joystick-Modus übernimmt der Stick Gehen und Ducken; Springen bleibt ein eigener Knopf. Es über den Stick nach oben mitzumachen geht auch, aber wer den Daumen zum Laufen benutzt, will zum Springen einen festen Punkt unter dem anderen Daumen haben. */ .touch[data-touch-mode="joystick"] .touch__left, .touch[data-touch-mode="joystick"] .touch__right, .touch[data-touch-mode="joystick"] .touch__duck { display: none; } .touch[data-touch-mode="joystick"] .touch__pad { display: block; margin-right: auto; } .touch[data-touch-mode="joystick"] { align-items: flex-end; } /* ---- Overlay ----------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 70; display: flex; } .overlay[hidden] { display: none; } .overlay__scrim { position: absolute; inset: 0; background: rgba(6,9,18,.72); } .overlay__panel { position: relative; margin: auto; width: min(94vw, 44rem); max-height: min(90vh, 52rem); display: flex; flex-direction: column; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); animation: pop .18s ease-out; } @keyframes pop { from { transform: scale(.96); opacity: 0; } } .overlay__head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem .6rem; border-bottom: 2px solid var(--line); } .overlay__portrait { width: 3.6rem; height: 3.6rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .overlay__title { margin: 0; font-size: 1.2em; } .overlay__role { margin: 0; color: var(--ink-dim); font-size: .85em; } .overlay__close { margin-left: auto; align-self: flex-start; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; background: transparent; color: var(--ink-dim); border: 2px solid var(--line); border-radius: 50%; font: inherit; cursor: pointer; } .overlay__close:hover { color: var(--ink); border-color: var(--ink); } /* `min-height: 0` ist hier das Entscheidende, nicht `overflow-y`. In einer Flex-Spalte hat jedes Element von sich aus `min-height: auto` und schrumpft deshalb nie unter seinen Inhalt. Das `overflow-y: auto` griff dadurch nie: Der Textbereich wuchs über den Rahmen hinaus, die Fußzeile mit den Knöpfen wurde hinausgeschoben, und die letzte Antwort war abgeschnitten. Auf einem großen Bildschirm fiel das nicht auf, weil der Platz reichte – auf einem quer gehaltenen Telefon bei jeder Entscheidungsszene. */ .overlay__body { flex: 1 1 auto; min-height: 0; padding: 1rem 1.1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .overlay__body p:last-child { margin-bottom: 0; } .overlay__foot { padding: .8rem 1.1rem 1.1rem; display: grid; gap: .55rem; } .overlay__foot:empty { display: none; } .speech { font-size: 1.08em; } .speech--monster { color: #ffd0d0; } .choices { display: grid; gap: .55rem; } .choice { display: block; width: 100%; text-align: left; min-height: var(--tap); padding: .75em 1em; background: var(--panel-2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-sm); font: inherit; cursor: pointer; } .choice:hover { border-color: var(--accent); background: var(--line); } .choice--right { border-color: var(--know); } .choice--wrong { border-color: var(--danger); opacity: .7; } .feedback { border-radius: var(--radius-sm); padding: .8em 1em; margin-top: .6rem; border: 2px solid var(--line); background: var(--bg-2); } .feedback--good { border-color: var(--know); } .feedback--soft { border-color: var(--accent); } .note { background: var(--bg-2); border-left: 4px solid var(--shield); padding: .7em .9em; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: .8rem; } .field { display: block; margin-bottom: 1rem; } .field__label { display: block; font-weight: 700; margin-bottom: .35rem; } .field select, .field input[type="range"] { width: 100%; min-height: var(--tap); font: inherit; } .field select, .field input[type="text"], .field textarea { background: var(--panel-2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: .4em .6em; } .field input[type="text"] { width: 100%; min-height: var(--tap); font: inherit; } .field textarea { width: 100%; font: inherit; resize: vertical; min-height: 5rem; } .field .card__sub { display: block; margin: .1rem 0 .35rem; } /* Bereich "Anzeige vorbereiten" */ .report-warning { border-color: var(--danger); } .report-warning .card__title { color: var(--danger); } .report-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; } .report-actions .btn { flex: 1 1 12rem; } .switch { display: flex; align-items: center; gap: .7rem; min-height: var(--tap); } .switch input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); } .dl { margin: 0 0 1rem; } .dl dt { font-weight: 800; margin-top: .7rem; color: var(--accent); } .dl dd { margin: .1rem 0 0; } @media (max-width: 40rem) { :root { --base-size: calc(16px * var(--font-scale)); } .screen-root { padding-top: 4.2rem; } } /* Schmaler Bildschirm, egal wie hoch – also Telefon im Hochformat. Die Kopfzeile bricht seit der Umstellung nicht mehr um, und ohne diese Regeln läuft sie stattdessen nach rechts aus dem Bild und unter den Notfallknopf. Sie muss also auch hier schrumpfen. Die Steuerung und die Dialoge bleiben unangetastet: Hochkant ist reichlich Höhe da. */ @media (max-width: 34rem) { .hud { gap: .3rem; right: calc(max(.5rem, env(safe-area-inset-right)) + 4rem); } .hud__btn { min-height: 2.3rem; min-width: 2.3rem; padding: .2em .5em; font-size: .85em; } .hud__rewards { display: none; } .hud__level { font-size: .8em; padding: .2em .5em; max-width: 8rem; } .hud__sparks { font-size: .85em; padding: .2em .6em; } .hud__label { display: none; } .hud__icon { font-size: 1.05em; } } /* Unter 26rem Breite reicht es auch dafür nicht mehr: Der Levelname steht ohnehin im Pausendialog. */ @media (max-width: 26rem) { .hud__level { display: none; } } /* Schmales Hochformat: Die Steuerung war hier so groß wie auf einem Tablet und nahm fast die halbe Höhe ein. */ @media (max-width: 34rem) and (min-height: 32.01rem) { .stage { --touch-space: 9.8rem; } .touch { padding: 0 max(.5rem, env(safe-area-inset-left)) max(.6rem, calc(env(safe-area-inset-bottom) + .4rem)) max(.5rem, env(safe-area-inset-right)); } .touch__pad { width: 8.4rem; height: 8.4rem; } .touch__knob { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; } .touch__btn { width: 3.7rem; height: 3.7rem; } .touch__jump { width: 4.3rem; height: 4.3rem; } .touch__act { width: 4.6rem; height: 4.6rem; } } /* ====================================================================== Telefon im Querformat ====================================================================== Gespielt wird auf dem Telefon fast immer quer, und dort sind nur rund 390 Pixel Höhe da. Vorher brach die Kopfzeile in zwei Reihen um, die zweite lief in den Hinweiszähler, die Steuerung schwebte wegen des Platzhalters für die Untertitel in der Bildmitte, und das Joystickfeld nahm die halbe Höhe ein. Es sah aus, als wäre alles verschoben – und genau das war es. Die Aufteilung ist jetzt festgelegt: oben Kopfzeile links, Hinweiszähler mittig, Knöpfe rechts, Notfallknopf ganz rechts – alles in EINER Reihe unten Steuerung links und rechts an den Rändern, Untertitel schmal in der Mitte dazwischen Mitte bleibt frei fürs Spiel Ausgelöst über die Höhe, nicht die Breite: Ein Telefon quer ist breit, aber flach. Nach der Breite zu gehen würde den Fall verpassen. */ @media (max-height: 32rem) { /* ---- Kopfzeile ---- */ .hud { top: max(.35rem, env(safe-area-inset-top)); left: max(.35rem, env(safe-area-inset-left)); /* Rechts steht nur noch das Notfallzeichen, kein Wort. */ right: calc(max(.35rem, env(safe-area-inset-right)) + 4.2rem); gap: .3rem; } .hud__btn { min-height: 2.1rem; min-width: 2.1rem; padding: .15em .45em; font-size: .82em; } .hud__level { font-size: .78em; padding: .2em .5em; max-width: 9rem; } /* Die Plaketten sind schön, aber verzichtbar – sie stehen auch am Levelende. Der Hinweiszähler ist es nicht. */ .hud__rewards { display: none; } .hud__sparks { font-size: .82em; padding: .2em .55em; } .hud__label { display: none; } .emergency-button__label { display: none; } .emergency-button { padding: .4em .55em; top: max(.35rem, env(safe-area-inset-top)); right: max(.35rem, env(safe-area-inset-right)); min-height: 2.4rem; } .clue-tracker { font-size: .8em; padding: .2em .7em; } /* ---- Untertitel: schmal in die Mitte, damit die Ränder frei bleiben ---- */ .subtitles { width: min(46%, 24rem); bottom: max(.4rem, calc(env(safe-area-inset-bottom) + .2rem)); padding: .35em .7em; font-size: .82em; } /* ---- Steuerung: an den unteren Rand, kleiner ---- */ .touch { padding: 0 max(.4rem, env(safe-area-inset-left)) max(.4rem, calc(env(safe-area-inset-bottom) + .2rem)) max(.4rem, env(safe-area-inset-right)); } .touch__btn { width: 3.3rem; height: 3.3rem; margin: .15rem; font-size: 1.1em; } .touch__jump { width: 3.9rem; height: 3.9rem; } .touch__act { width: 4rem; height: 4rem; font-size: .8em; } .touch__pad { width: 7.5rem; height: 7.5rem; border-radius: 1.1rem; } .touch__knob { width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; } .touch__hint { font-size: 1.4rem; } /* Querformat: schmal zwischen den Rändern, kein Anheben nötig. */ .stage { --touch-space: 0rem; } } /* Sehr flach (etwa 360 Pixel Höhe): noch einmal eine Stufe kleiner, sonst überdecken sich Steuerung und Untertitel. */ @media (max-height: 23rem) { .touch__pad { width: 6.2rem; height: 6.2rem; } .touch__btn { width: 2.9rem; height: 2.9rem; } .touch__jump { width: 3.4rem; height: 3.4rem; } .touch__act { width: 3.6rem; height: 3.6rem; } .subtitles { width: min(42%, 20rem); font-size: .75em; } .hud__level { display: none; } } /* Dialoge auf flachen Bildschirmen: Der Platz geht an den Text, nicht an die Ränder. Der Rahmen nutzt fast die ganze Höhe, Kopf und Fuß werden flacher, und das Figurenbild schrumpft – gescrollt wird im Textbereich. */ @media (max-height: 32rem) { .overlay__panel { max-height: 96dvh; width: min(96vw, 40rem); } .overlay__head { padding: .55rem .8rem .45rem; gap: .6rem; } .overlay__portrait { width: 2.4rem; height: 2.4rem; } .overlay__title { font-size: 1.02em; } .overlay__role { font-size: .78em; } .overlay__close { width: 2rem; height: 2rem; } .overlay__body { padding: .6rem .8rem; } .overlay__foot { padding: .5rem .8rem .7rem; gap: .4rem; } .choice { min-height: 2.5rem; padding: .45em .75em; } .choices { gap: .35rem; } .speech { font-size: 1em; } /* Die Hinweisleiste im Dialog wird flacher, damit alle drei Antworten ohne Scrollen sichtbar bleiben – eine Antwort, die man erst suchen muss, wird nicht gewählt. */ .feedback { padding: .45em .7em; margin-bottom: .5rem; font-size: .92em; } .overlay__body > p { margin: .35rem 0; } } @media print { .emergency-button, .stage, .overlay { display: none !important; } }