/* ===================================================================== mobile-game — Brett-Screen auf dem Handy (<=700px, body.mp-phone). Laedt nach main-13 (Mobile-Layer) und schaerft nur den Spiel-Screen nach: Das Brett nutzt die volle Bildschirmbreite ohne dekorativen Rahmen. Auf niedrigen Displays darf die Partie vertikal scrollen. 1) Tab-Bar unten blendet im Spiel aus — „Zurück" oben fuehrt raus. 2) Spieler-Karte als flache Zeile in Brettbreite: Avatar | Name + Status / Mana | Uhr. Die Uhr steht gross rechts. 3) Faehigkeits-Chips etwas kleiner, direkt unter der Karte. 4) Brett in voller Breite; der Block sitzt bei ausreichender Hoehe senkrecht mittig statt oben zu kleben. 5) Figuren-Popup mittig mit abgedunkeltem Hintergrund (statt neben dem Feld zu kleben und aus dem Bild zu ragen). 6) Anzeige-Einstellungen (Zahnrad) in Bildschirmbreite, scrollbar. 7) Ende-Bildschirm kompakt, dunkler, scrollbar. ===================================================================== */ /* Gedrueckt halten (Figurenkarte, board-drag.js / effect-rail-modals.js): kein iOS-Bild-Menue und keine Textauswahl auf den Faehigkeits-Chips. */ body.mode-demo .effectChip { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } @media (max-width: 700px) { /* Keine reservierte Desktop-Scrollbar neben dem randlosen Brett. */ html:has(body.mp-phone.mode-demo) { scrollbar-gutter: auto; scrollbar-width: none; } body.mp-phone.mode-demo { --effect-chip-size: 36px; } body.mp-phone.mode-demo, body.mp-phone.mode-demo.puzzle-active, body.mp-phone.mode-demo.puzzle-active.puzzle-has-abilities, body.mp-phone.mode-demo.tutorial-active { --board-size: 100vw; } /* 1) Tab-Bar weg, unteres Polster nur noch fuer die Home-Leiste. */ body.mp-phone.mode-demo .mobileTabBar { display: none !important; } body.mp-phone.mode-demo main { min-height: 100dvh; padding-inline: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); justify-content: safe center; } body.mp-phone.mode-demo #boardStage { gap: 6px; } body.mp-phone.mode-demo #boardStage, body.mp-phone.mode-demo #boardWrap { width: var(--board-size); } body.mp-phone.mode-demo #boardWrap, body.mp-phone.mode-demo #board { padding: 0; border: 0; border-radius: 0; box-shadow: none; } /* 2) Spieler-Zeile: Karte in voller Brettbreite, Chips darunter. */ body.mp-phone.mode-demo .effectRail { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 5px; padding: 0 4px; } body.mp-phone.mode-demo .effectRail .effectRailHeader { grid-column: 1; width: 100%; min-height: 0; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 6px 12px 6px 6px; } body.mp-phone.mode-demo .effectRail .effectRailHeaderAvatar, body.mp-phone.mode-demo .effectRail .effectRailHeaderKristall { width: 34px; height: 34px; } /* Info-Block als Raster: Zeile 1 Name + Status, Zeile 2 Mana, rechts die Uhr ueber beide Zeilen. .effectRailTurn loest sich dafuer auf (display:contents), seine Kinder landen direkt im Raster. */ body.mp-phone.mode-demo .effectRail .effectRailHeaderInfo { /* Der Name kuerzt sich zuerst („…"), Status und Uhr bleiben ganz. */ grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "name pulse label timer" "mana mana mana timer"; align-items: center; column-gap: 7px; row-gap: 5px; } body.mp-phone.mode-demo .effectRail .effectRailHeaderNameRow { grid-area: name; } body.mp-phone.mode-demo .effectRail .effectRailTurn { display: contents; } body.mp-phone.mode-demo .effectRail .effectRailPulse { grid-area: pulse; width: 6px; height: 6px; color: var(--mp-teal-1); } body.mp-phone.mode-demo .effectRail .effectRailTurnLabel { grid-area: label; color: var(--mp-teal-1); font-size: 8.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; } body.mp-phone.mode-demo .effectRail .effectRailTurn.is-dim .effectRailTurnLabel { color: var(--mp-ink-dim); } body.mp-phone.mode-demo .effectRail .effectRailTimer { grid-area: timer; align-self: center; margin-left: 6px; font-size: 21px; } body.mp-phone.mode-demo .effectRail .effectManaRow { grid-area: mana; margin-top: 0; } body.mp-phone.mode-demo .effectRail .effectManaPip { height: 3px; } /* 3) Chips: kleiner, ohne Extra-Hoehe. */ body.mp-phone.mode-demo .effectRail .effectGroups { grid-column: 1; grid-row: 2; padding: 0; } body.mp-phone.mode-demo .effectRail .effectGroup { height: calc(var(--effect-chip-size) + 8px); } body.mp-phone.mode-demo .effectRail .effectCost, body.mp-phone.mode-demo .effectRail .effectPass { min-width: 17px; height: 17px; font-size: 8.5px; } /* 5) Figuren-Popup: mittig, Rest abgedunkelt, ohne Zeige-Schwaenzchen. */ body.mp-phone #pieceModal.show { box-shadow: 0 18px 38px rgba(0, 0, 0, .68), inset 0 0 0 2px rgba(255, 255, 255, .08), inset 0 0 0 7px var(--card-accent, var(--accent)), 0 0 0 100vmax rgba(4, 6, 9, .62); } body.mp-phone #pieceModal.fcMode.show { box-shadow: 0 0 0 100vmax rgba(4, 6, 9, .62); } body.mp-phone #pieceModal .fc-tail, body.mp-phone #pieceModal .fc-fly-tail { display: none; } /* Zugbild klappt nicht zur Seite (dort ist kein Platz), sondern legt sich ueber das Kartenbild. */ body.mp-phone #pieceModal.fcMode .fc-card .fc-zug-fly { top: 54px; left: 12px; right: 12px; width: auto; transform: translateY(8px) scale(.98); transform-origin: center top; } body.mp-phone #pieceModal.fcMode .fc-card .fc-zug-fly.open { transform: none; } /* 6) Anzeige-Einstellungen (Zahnrad): die 380px-Karte sprengte das Raster des Overlays und ragte rechts raus; unten war sie abgeschnitten, weil das Overlay nicht scrollte. Jetzt volle Breite und scrollbar. */ body.mp-phone .gset-ov { grid-template-columns: minmax(0, 1fr); padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; } body.mp-phone .gset { width: 100%; margin: auto 0; padding: 18px 16px 16px; } /* 7) Ende-Bildschirm: Titel + Karte waren hoeher als der Bildschirm, mittig ausgerichtet und nicht scrollbar — oben lief der Titel in die Spiel- Leiste, unten wurden die Knoepfe knapp. Kompakter, dunkler Hintergrund (das Brett schien durch den Text), bei Bedarf scrollbar. */ body.mp-phone .eg-backdrop { background: rgba(5, 6, 9, .6); -webkit-backdrop-filter: blur(6px) brightness(.3) saturate(.7); backdrop-filter: blur(6px) brightness(.3) saturate(.7); } body.mp-phone .eg-content { justify-content: flex-start; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)); } /* Auto-Raender: mittig, solange Platz ist; sonst oben buendig (scrollbar). */ body.mp-phone .eg-content > :first-child { margin-top: auto; } body.mp-phone .eg-content > :last-child { margin-bottom: auto; } body.mp-phone .eg-eyebrow { margin: 14px 0 2px; letter-spacing: 4px; } body.mp-phone .eg-title { margin-top: 8px; font-size: clamp(46px, 15vw, 64px); } body.mp-phone .eg-sub { margin-top: 12px; font-size: 16px; } body.mp-phone .eg-cat { margin-top: 10px; gap: 10px; } body.mp-phone .eg-cat .coachCat { width: 42px; } body.mp-phone .eg-cat-quip { font-size: 14px; } body.mp-phone .eg-reward { width: 100%; margin-top: 20px; padding: 16px 16px 18px; } } /* Hohe Handys haben Luft: Faehigkeits-Chips wieder etwas groesser. */ @media (max-width: 700px) and (min-height: 760px) { body.mp-phone.mode-demo { --effect-chip-size: 40px; } }