/** * MIA Engine v1.4 Styles * © 2025 Clueless Rabbit GmbH * * Features: * - SVG Doodle Icons (statt Emojis) * - Button-Styles wie Homepage (eckig, gestrichelt) * - Animierte Wellen bei Media-Playback * - Video-Glow-Effekt * - Graue Wellenline oben/unten */ /* ================================ CUSTOM FONTS ================================ */ @font-face { font-family: 'MortysHeady'; src: url('https://game.mortysmysteries.de/fonts/MortysHeadyFont.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'MortysMadness'; src: url('https://game.mortysmysteries.de/fonts/MortysMadnessFont.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'MortysMarmelade'; src: url('https://game.mortysmysteries.de/fonts/MortysMarmeladeFont.ttf') format('truetype'); font-display: swap; } /* ================================ CSS VARIABLES ================================ */ :root { --mono-dark: #0a0a0a; --mono-medium: #1a1a1a; --mono-light: #2a2a2a; --mono-lighter: #3a3a3a; --mono-text: #f5f5f5; --mono-muted: #888888; --primary: #5E146E; --primary-light: #9D4EBD; --secondary: #8B6B96; --signal: #F20079; --wave-color-1: var(--signal); --wave-color-2: var(--primary); --wave-color-3: var(--primary-light); --bg-dark: #0a0a0a; --bg-medium: #1a1a1a; --text-light: #f5f5f5; --text-muted: #aaaaaa; --paper: #F5F0E6; --ink: #2C1810; --pin-1: url('https://mortysmysteries.de/wp-content/uploads/2025/12/general-pic-pin1.webp'); --pin-2: url('https://mortysmysteries.de/wp-content/uploads/2025/12/general-pic-pin2.webp'); --pin-3: url('https://mortysmysteries.de/wp-content/uploads/2025/12/general-pic-pin3.webp'); --pin-4: url('https://mortysmysteries.de/wp-content/uploads/2025/12/general-pic-pin4.webp'); --pin-5: url('https://mortysmysteries.de/wp-content/uploads/2025/12/general-pic-pin5.webp'); --pin-6: url('https://mortysmysteries.de/wp-content/uploads/2025/12/general-pic-pin6.webp'); } /* ================================ RESET & BASE ================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'MortysMadness', sans-serif; background: var(--bg-dark); min-height: 100vh; color: var(--text-light); display: flex; flex-direction: column; overflow-x: hidden; } /* ================================ SVG ICON SYSTEM ================================ */ .mia-icon { display: inline-block; width: 1.2em; height: 1.2em; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; } .mia-icon--sm { width: 1rem; height: 1rem; } .mia-icon--md { width: 1.5rem; height: 1.5rem; } .mia-icon--lg { width: 2rem; height: 2rem; } .mia-icon--xl { width: 3rem; height: 3rem; } .mia-icon--xxl { width: 4rem; height: 4rem; } .mia-icon--white { filter: invert(1); } /* Icon: Bibliothek/Frame */ .icon-library { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 167 164' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 142.4c-2.2 10 1.8 16.7 11.4 19.2 6.4 1.6 13 1.5 19.3-.3 4-1 7.3-3.2 10-5.4 10.4 7.9 21.2 5.2 29.5 1.8 4.1 2.6 8.8 4 13.6 3.9 4.8-.1 9.1-1.9 13.2-5.6 8.4 4.7 16.8 4.9 25 .5 8.4 4.2 15.6 4.3 22.3.2 4.4 2.5 8.4 3.3 12.3 2.4 8.4-2 14.2-11.5 12.5-20.5-.9-4.3-2.8-8.4-5.7-11.7 5.6-3.2 8.2-7.6 8.1-13.4-.1-5.5-2.3-10.2-6.8-14.3l.2-.2c.4-.4.8-.8 1.1-1.2 5.4-5.8 5.6-13.4.4-19.4-.3-.4-.7-.8-1-1.1l-.1-.1c2.8-2.9 5.3-6.2 5.5-10.9.2-4.6-1.6-8.2-5.4-11 3.4-3.9 4.9-7.6 4.8-11.8 0-2.1-.4-4.3-1.3-6.2-.9-2-2.1-3.7-3.8-5.1 6.6-8.3 6.3-17.4-.9-25.7-7.4-8.5-19.5-9.1-29.6-1.4-7.4-4.6-14.9-4.6-22.2.1-3.1-2.4-6.6-3-9.8-3.2-4.9-.3-9.2 1.1-12.6 4.1-8.9-6.2-16-6.3-25.1-.3-7.6-6.2-16.2-6.3-23.7-.3-4 4.2-8.5 6-13.8 6.6-6.3.7-11.1 2.8-14.6 6.4-3.3 3.3-5.2 7.9-5.4 13.3-.2 5.7 0 11.1 4.5 15-3.5 3.5-5.6 8.3-5.8 13.3-.3 5.3 2.6 9.1 6.1 13-2.8 3.8-4.5 8.3-4.9 13-.5 5.5 2.4 9.3 5.7 12.6-5.2 7.5-5.3 14.9-.3 22.1-5.6 8-5.8 14.1-.6 22-2.9 2.6-4.7 6-5.7 10.7z' fill='black'/%3E%3C/svg%3E"); } /* Icon: Musik */ .icon-music { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 141 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4 151.3c3.8 2.9 8.4 4.5 13.2 4.5 3.6 0 7.1-.8 10.4-2.4 7.4-3.5 11.2-9.8 11.2-18.7v-55.9c0-.3 0-.5.1-.8 1-.4 1.9-.7 2.8-1 2.1-.7 4.1-1.6 6-2.5 10.3-5.5 20.7-11.1 30.8-16.6 9.8-5.3 20-10.8 30-16.1 3-1.6 6.1-3 9.3-4.5v55c-.3-.3-.6-.5-.9-.8-1.3-1.1-2.7-2.2-4.1-3.1-5.7-3.6-11.7-3.7-17.3-.3-7.4 4.4-11.7 11.4-12.6 20.1-1.1 10.8 4.8 19.4 14.7 21.5 9.6 2 18.7-.8 25.1-7.7 5.9-6.4 8.3-15.1 6.2-22.7-.2-.9-.3-1.9-.2-2.8V11.9c0-2.4-.3-4.8-.9-7.1-.4-1.5-1.8-3.4-3.2-3.8-2.9-.9-6.4-1.5-10-.5-8.7 4.7-18 9.5-27.7 14.3-21.7 10.6-38.8 20.1-53.7 29.8-1.2.8-2.5 2.5-2.6 4.1-.8 15.5-1.5 31.8-2.2 48.5 0 3.7 0 7.4 0 11.3v4.8l-1-.4c-1-.4-1.8-.7-2.5-1-.8-.4-1.5-.7-2.3-1.1-1.5-.8-3.1-1.5-4.7-2-8.6-2.5-15.5-1-20.5 4.6-2.2 2.6-4 5.7-5 9-1 3.3-1.4 6.8-1 10.3.4 3.5 1.4 6.8 3.1 9.9 1.7 3 4 5.7 6.7 7.8z' fill='black'/%3E%3C/svg%3E"); } /* Icon: Mute */ .icon-mute { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 158 127' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 100.2c1.3.4 2.7.6 4.1.6 6.1 0 13.3-.3 20.4-2.6.6.4 1.1.8 1.6 1.1 1.3.9 2.6 1.7 3.9 2.5 15.5 9.4 32.1 16.6 50.6 24.3.5.2 1.1.4 1.7.4.4 0 .8-.1 1.1-.3.7-.4 1.1-1.2 1.2-2.5 0-.7.1-1.4.3-2 3.5-11.4 5.5-20.9 6.3-29.8.3-3.4.7-6.9 1.1-10.2.7-5.9 1.4-12 1.7-18.1.9-16.6-.2-33.5-1.4-49.8-.1-2-.3-4-.4-6-.1-1.5-.3-3-.8-4.4-.1-.5-.4-1-.7-1.4-.3-.4-.8-.8-1.2-1-.5-.2-1.1-.3-1.7-.3-.6 0-1.2.1-1.7.4-1 .4-1.9.8-2.8 1.1-.9.3-1.8.7-2.7 1.1-1.2.5-2.4 1-3.6 1.4-3.2 1.3-6.5 2.6-9.6 4.1-4.8 2.3-9.8 4.9-14.7 7.8-7.6 4.4-15 8.8-22.8 13.5-3.1 1.9-6.3 3.7-9.5 5.6-.6 0-1 0-1.3 0-1.6.1-3.1.2-4.7.3-4 .2-8 .4-12 .9-3.7.4-5.5 2.3-6.1 6.2-.2 1.2-.2 2.5-.2 3.7 0 10.4-.2 20.8-.4 31.2l-.3 16.2c-.1 1.5.3 3 1.2 4.2.9 1.2 2.2 2.1 3.6 2.5z' fill='black'/%3E%3Cpath d='M155.7 77.2c-3-3.5-6.1-7-9.2-10.5l-2.2-2.5c-.5-.5-1-.9-1.3-1.4l1.3-1.4c1.2-1.3 2.4-2.6 3.5-3.9.6-.7 1.3-1.4 1.9-2.1 1.6-1.7 3.3-3.5 4.8-5.3 2.4-2.9 2.8-5.6 1-7.4-1.1-1-3.4-2.2-7.4 1.4-.7.6-1.3 1.3-2 1.9-.4.4-.7.7-1.1 1.1l-9.6 9.2c-.1-.1-.2-.2-.4-.3-.5-.4-1-.7-1.4-1.1-1.7-1.5-3.5-3-5.2-4.5-2.7-2.3-5.4-4.7-8.1-7-.8-.8-1.9-1.6-3-2.2-.9-.6-2-.9-3.1-.7-1.1.1-2.1.6-2.9 1.4-1.4 1.5-1.5 3.6-.3 5.7.6 1.1 1.3 2.2 2.2 3.1 2.7 2.8 6.3 6.5 10 10.2 1.1 1.1 2.3 2.1 3.6 3.1.4.3.8.7 1.3 1l-.2.1c-.5.3-.9.7-1.3 1.1-4.9 5.4-9.8 10.9-14.5 16.2l-1 1.1c-.3.3-.5.6-.7 1-.2.4-.2.8-.2 1.2.2.7.7 1.3 1.8 1.8h.6c8.3-4.3 15.3-10.2 22.8-17l1.2.8c5.7 4 11.3 8 16.9 12 .1.1.2.2.3.3.3.3.6.5 1 .6h.1c.8.2 1.9.4 2.6-.1.4-.4.6-.8.8-1.3.1-.5.1-1 0-1.5-.4-1.2-1-2.4-1.9-3.4z' fill='black'/%3E%3C/svg%3E"); } /* Icon: Untertitel */ .icon-subtitles { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 158 133' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1 128.8c4.4 2.6 9.4 3.8 15.3 3.8h71.6c14.9 0 30 0 45-.1 8.6.1 17.1-.3 25.7-1.2 8.9-1 12.7-5.2 13.1-14.3.8-22.6 1.5-45.3 2-67.3.2-8-4.9-13.7-13-14.5-3.4-.3-6.5-.5-9.4-.5-5.2 0-15.9.1-27.4.1-16.1.1-34.3.2-41.9.2.5-.8.9-1.5 1.4-2.2 1.2-2 2.3-3.7 3.2-5.5.6-1.2 1.3-2.4 1.9-3.6 2.5-4.4 4.8-9 6.8-13.7 1-2.4.5-6.3-1-8.3-1.2-1.7-5.3-1.8-7.6-1.2-4 1-7.8 2.4-11.3 4.4-10 5.4-20.1 11-29.9 16.4-6.6 3.7-13.4 7.5-20.1 11.2-4.7 2.6-6.8 6.5-6.8 12.7 0 14.2-.2 28.7-.4 42.7-.1 5.8-.2 11.5-.3 17.3 0 1.2 0 2.4 0 3.5-.1 3.2-.2 6.5 0 9.8.2 4.3 2.5 7.7 6.6 10.2z' fill='black'/%3E%3Ccircle cx='42' cy='82' r='8' fill='white'/%3E%3Ccircle cx='79' cy='82' r='8' fill='white'/%3E%3Ccircle cx='116' cy='82' r='8' fill='white'/%3E%3C/svg%3E"); } /* Icon: Speichern */ .icon-save { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 159 159' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M86.8 158.4c-14.5-.2-28.9-.2-43.4-.8-9.8-.4-19.5-1.1-29.2-3.1-5.5-1.1-8.9-4.3-9.8-9.9-.5-3.3-.8-6.6-.9-9.9-.3-18.5-.3-37.1-.8-55.6-.3-14-.9-27.9-1.5-41.9-.2-6.1-.3-12.1 1.2-18.2 2.1-8.6 7.7-13.2 15.8-15.2 3.3-.7 6.6-1.1 9.9-1.2 12.1-.4 24.3-.6 36.4-1 9-.3 18-.9 27-.9 7.2-.1 14.5.4 21.7.7 2.7.1 5.3 1 7.5 2.6 7.4 5 13.9 11.1 20.4 17.1 4.2 3.9 8.5 7.8 13.1 11.4 3 2.4 4.5 5.2 4.4 8.9-.1 8.3-.2 16.6-.3 25-.3 13.9-.9 27.8-1 41.7-.1 12.2-1.6 24.4-4.6 36.2-.4 1.6-.9 3.2-1.4 4.8-1.3 4.4-4.4 6.9-8.9 7.6-3.9.7-7.9 1.2-11.9 1.4-12.5.3-24.9.3-37.4.4-2 0-4 0-6 0z' fill='black'/%3E%3Crect x='29' y='67' width='102' height='59' rx='8' fill='white'/%3E%3C/svg%3E"); } /* Icon: Pause */ .icon-pause { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 72 104' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='2' width='20' height='100' rx='4' fill='black'/%3E%3Crect x='47' y='2' width='20' height='100' rx='4' fill='black'/%3E%3C/svg%3E"); } /* Icon: Neustart */ .icon-restart { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 179 151' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M150.6 103.6c-1.8-.4-4.1-.2-5.3 3.2-1.7 4.8-4.8 8.7-7.6 11.9-7.9 9-18.3 15.4-30.7 18.9-9.4 2.6-20.6 5-32.3 2.4-17.4-3.8-31.5-13.4-42-28.5-4.7-6.7-7.4-13.1-8.2-19.5-1.5-11.2-1-22.4 1.5-33.2.6-2.7 1.5-5.4 2.4-8.2l.4-1.3c.6 1.1 1.1 2.1 1.7 3l.1.2c1.1 1.9 2.3 3.7 3.7 5.4 1.9 2.3 4.6 3 6.7 1.7 1.7-1 3-3.4 1.2-6.8-2.1-3.9-4.9-9-8-14-2.3-3.7-5.2-4.7-9.4-3.2-7 2.4-13.7 5.1-19.4 7.3-1.6.6-3 1.7-4 3.1-.8 1.3-.7 3.4 0 4.7.9 1.7 2.7 2.2 4.9 1.3 4.4-1.8 8.8-3.4 13.3-5.1l2.2-.7c-3.9 9.1-6.1 19.5-6.6 31.5-.6 14.2 1.5 24.8 7 34.2 9.5 16.3 23.5 28.1 41.8 35 5.4 2 11.2 3.2 17 3.5 1.5.1 3 .1 4.5.1 8.6 0 17.1-1.3 25.3-3.8 13.9-4.1 25-10.8 33.9-20.4 4.3-4.7 7.1-9.2 8.6-14 .5-1.3.7-2.6.8-4 .1-3.4-1.8-4.6-3.4-5z' fill='black'/%3E%3Cpath d='M177.8 69.7c-.9-1.2-2.5-1.7-4.4-1.4-2 .3-3.9 1.6-5.2 2.7-2.1 1.8-4.1 3.7-6.2 5.6l-.6.5c.8-7 .8-14.1-.2-21.1-1.9-14.4-8.7-27.7-19.2-37.7-10.5-10-24-16-39.2-17.6C87.2-.9 71.6 1.7 56.3 8.5c-4.8 2.1-10.4 4.9-15 9.4-1.3 1.3-2.3 2.8-3 4.5-.5 1.1.1 3.5 1.4 4.1 1.3.5 2.6.5 3.8-.1.7-.5 1.4-1 2.1-1.6l1.4-1.1c19.2-12.6 39.8-16.8 61-12.7 13 2.5 23.6 8.8 31.6 18.7 9.1 11.4 13.4 24.9 12.6 40.2-.2 2.8-.5 5.6-1 8.4l-.3 1.9c-.8-.9-1.6-1.8-2.4-2.7-1.7-2-3.4-4.1-5-6.1l-.1-.1c-1.2-1.5-2.4-2.9-3.6-4.4-.5-.7-1.1-1.3-1.8-1.9-1.7-1.4-3.7-1.5-5.3-.2-.8.6-1.3 1.4-1.5 2.3-.2.9-.1 1.9.4 2.7.6 1.3 1.4 2.5 2.2 3.6 4.8 6.2 9.6 12.3 13.6 17.4 1.7 2.1 3.3 3.1 5.2 3.1 1.3-.1 2.6-.4 3.7-1.1 7.2-3.7 13.7-8.5 19.3-14.3 1-1 1.8-2.1 2.4-3.4.8-1.8.7-3.6-.2-4.8z' fill='black'/%3E%3C/svg%3E"); } /* Icon: Karte */ .icon-card { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 112 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.1 53.6c.3-7 .7-14 1-21 .2-5.9.4-11.8.6-17.7.1-2.7.3-5.3.4-8 .1-1.3.6-2.5 1.9-2.8 2.7-.7 5.5-1.7 8.3-1.8 10-.6 20.1-.9 30.1-1.2 11.4-.3 22.8-.8 34.1-.6 9.1.2 18.3 1.2 27.4 1.9 3.4.3 5 2.4 4.8 5.5-.4 9.4-.6 18.9-1 28.3-.6 14-.9 28-1.5 42-.2 5.3-.6 10.7-.8 16-.2 5.5-1.6 6.7-7 6.8-11.8.1-23.6.5-35.4.8-7 .2-13.9.5-20.9.8-11.8.4-23.6.9-35.4 1.4-.8 0-1.6 0-2.3 0-4.1-.2-5.9-1.9-5.8-6 .1-7 .4-14 .7-21 .4-7.8.9-15.6 1.3-23.3z' fill='black'/%3E%3C/svg%3E"); } /* Icon: Sofa/Warten */ .icon-wait { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 176 108' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M169.8 47.8c-1.6-5.6-6.2-8.3-12.3-8.3-.7 0-1.5 0-2.2.1-1-9.9-6.2-17.4-15.6-20.8-3.8-1.4-7.8-2.1-11.9-2.1H28.2c-6 0-11.5 1.5-16.2 5.1-6.4 4.8-9.6 11.4-9.9 19.2-.2 5.3-.3 10.6-.4 15.9-.1 5.3-.1 10.6-.2 15.9 0 .6 0 1.2 0 1.8-1.8 5.8-.8 10.7 3.4 14.7 3.1 2.9 6.9 4.3 11.1 4.3.5 0 1 0 1.5-.1.9-.1 1.8-.3 2.6-.5.1 3.8.2 7.5.3 11.3.1 2.9 1 3.8 3.9 3.7 3.9-.1 7.8-.2 11.7-.3 3-.1 3.9-1 4-4 .1-3.6.2-7.2.3-10.8 0-.1.1-.2.2-.4 32.8 0 65.6 0 98.4 0 .1.3.2.6.2.9.1 3.9.2 7.8.3 11.7.1 2.4 1 3 3.4 2.9 4.2-.1 8.4-.2 12.6-.3 2.4-.1 3.3-.9 3.4-3.3.1-3.9.2-7.8.3-11.7 0-.1.1-.1.3-.3.5.1 1.1.2 1.6.2 5.4.1 9.8-2 13.1-6.2 3.5-4.5 4.4-9.5 3-15-2.1-7.8-4.1-15.7-7.4-23.6z' fill='black'/%3E%3C/svg%3E"); } /* Icon: Feedback/Herz */ .icon-feedback { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 167 144' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M83.5 144L71.4 133C28.4 94.4 0 68.8 0 37.6 0 11.9 20.2 0 45.9 0c14.9 0 29.2 7.4 37.6 18.9C91.9 7.4 106.2 0 121.1 0 146.8 0 167 11.9 167 37.6c0 31.2-28.4 56.8-71.4 95.4L83.5 144z' fill='black'/%3E%3C/svg%3E"); } /* Icon: Gate/OK */ .icon-gate { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 166 166' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M83 0C37.1 0 0 37.1 0 83s37.1 83 83 83 83-37.1 83-83S128.9 0 83 0zm-16.6 124.5L27.4 85.5l11.7-11.7 27.3 27.3 60.5-60.5 11.7 11.7-72.2 72.2z' fill='black'/%3E%3C/svg%3E"); } /* ================================ TOP BAR BUTTONS Schwarz, weiß gestrichelt, ECKIG ================================ */ .top-btn { background: var(--mono-dark); border: 2px dashed rgba(255, 255, 255, 0.7); color: var(--text-light); padding: 0.5rem 0.75rem; border-radius: 0; cursor: pointer; font-family: 'MortysMadness', sans-serif; font-size: 1.1rem; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 44px; min-height: 44px; } .top-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: white; } .top-btn.active { background: rgba(255, 255, 255, 0.15); border-color: white; border-style: solid; } .top-btn .mia-icon { filter: invert(1); } /* ================================ BOTTOM BAR BUTTONS Weiß/Paper, schwarz gestrichelt, ECKIG ================================ */ .ctrl-btn { background: var(--paper); border: 2px dashed var(--ink); color: var(--ink); padding: 0.5rem 1rem; border-radius: 0; font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-transform: uppercase; } .ctrl-btn:hover { background: var(--ink); color: var(--paper); border-style: solid; } .ctrl-btn:hover .mia-icon { filter: invert(1); } /* Neustart Button - Invertiert mit PINK Text */ .ctrl-btn.danger { background: var(--mono-dark); border: 2px dashed rgba(255, 255, 255, 0.7); color: var(--signal); font-family: 'MortysHeady', serif; letter-spacing: 0.05em; } .ctrl-btn.danger .mia-icon { filter: invert(1); } .ctrl-btn.danger:hover { background: var(--signal); color: white; border-color: var(--signal); border-style: solid; } /* ================================ LOADING & ERROR SCREENS ================================ */ .loading-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; z-index: 9999; } .loading-screen.hidden { display: none; } .loading-content { text-align: center; color: var(--text-light); } .loading-logo { font-size: 4rem; margin-bottom: 1rem; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); opacity: 0.8; } } .loading-text { font-size: 1.2rem; margin-bottom: 1.5rem; color: var(--primary-light); } .loading-bar { width: 200px; height: 8px; background: var(--mono-light); border-radius: 4px; overflow: hidden; margin: 0 auto; } .loading-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); width: 0%; transition: width 0.3s ease; } .error-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; z-index: 9998; } .error-screen.hidden { display: none; } .error-content { text-align: center; color: var(--text-light); padding: 2rem; } .error-icon { font-size: 4rem; margin-bottom: 1rem; } .error-title { font-family: 'MortysHeady', serif; font-size: 1.5rem; color: var(--signal); margin-bottom: 1rem; } .error-message { margin-bottom: 2rem; color: var(--text-muted); } .error-link { display: inline-block; padding: 0.8rem 1.5rem; background: var(--primary); color: white; text-decoration: none; border-radius: 8px; } /* ================================ LANGUAGE SELECTION ================================ */ .language-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; z-index: 9998; } .language-screen.hidden { display: none; } .language-content { text-align: center; padding: 2rem; } .language-logo { font-size: 4rem; margin-bottom: 1rem; } .language-title { font-family: 'MortysHeady', serif; font-size: 1.5rem; color: var(--primary-light); margin-bottom: 2rem; text-transform: uppercase; } .language-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 500px; margin: 0 auto; } .language-btn { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 2rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; cursor: pointer; transition: all 0.2s ease; min-width: 140px; } .language-btn:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2); } .lang-flag { font-size: 2.5rem; margin-bottom: 0.5rem; } .lang-name { font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--ink); } /* ================================ HANDGEZEICHNETE ZETTEL ================================ */ .morty-note { position: relative; padding: 50px 35px 35px 35px; margin: 50px 15px 30px 15px; background: linear-gradient(to top, rgba(80, 60, 40, 0.1) 0%, rgba(80, 60, 40, 0.03) 15%, transparent 35%), linear-gradient(to right, rgba(80, 60, 40, 0.08) 0%, rgba(80, 60, 40, 0.02) 12%, transparent 30%), var(--paper); border: solid var(--ink); border-width: 3px 2px 4px 2px; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.15), inset 0 -40px 50px -30px rgba(60, 45, 30, 0.15); color: var(--ink); } .morty-note::before { content: ""; position: absolute; width: 50px; height: 55px; background-size: contain; background-repeat: no-repeat; z-index: 10; top: -28px; left: 50%; transform: translateX(-50%); } .morty-note.pin-1::before { background-image: var(--pin-1); } .morty-note.pin-2::before { background-image: var(--pin-2); transform: translateX(-50%) rotate(-5deg); left: 40%; } .morty-note.pin-3::before { background-image: var(--pin-3); transform: translateX(-50%) rotate(3deg); } .morty-note.pin-4::before { background-image: var(--pin-4); transform: translateX(-50%) rotate(-2deg); left: 60%; } .morty-note.pin-5::before { background-image: var(--pin-5); } .morty-note.pin-6::before { background-image: var(--pin-6); transform: translateX(-50%) rotate(5deg); left: 55%; } .rotate-left-1 { transform: rotate(-1deg); } .rotate-left-2 { transform: rotate(-2deg); } .rotate-right-1 { transform: rotate(1deg); } .rotate-right-2 { transform: rotate(2deg); } /* ================================ SETUP SCREEN ================================ */ .setup-screen { min-height: 100vh; background: var(--bg-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } .setup-screen.hidden { display: none !important; } .setup-header { text-align: center; margin-bottom: 2rem; } .setup-logo { font-size: 5rem; color: var(--primary-light); text-shadow: 0 0 30px rgba(94, 20, 110, 0.5); margin-bottom: 0.5rem; } .setup-title { font-family: 'MortysHeady', serif; font-size: 1.8rem; color: var(--text-light); letter-spacing: 0.2em; margin-bottom: 0.25rem; text-transform: uppercase; } .setup-subtitle { font-family: 'MortysMarmelade', sans-serif; font-size: 1rem; color: var(--text-muted); } .setup-card { width: 100%; max-width: 500px; } .setup-section { margin-bottom: 1.5rem; text-align: center; } .setup-question { font-family: 'MortysMarmelade', sans-serif; font-size: 1.2rem; margin-bottom: 1rem; color: var(--ink); } .player-grid { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .player-btn { width: 55px; height: 55px; background: var(--paper); border: 2px solid var(--ink); border-radius: 95% 4% 92% 5%/4% 95% 6% 95%; font-family: 'MortysHeady', serif; font-size: 1.3rem; color: var(--ink); cursor: pointer; transition: all 0.2s ease; } .player-btn:hover { background: var(--secondary); color: white; border-color: var(--secondary); transform: scale(1.05) rotate(-2deg); } .player-btn.selected { background: var(--primary); border-color: var(--primary); color: white; transform: scale(1.1) rotate(2deg); } .dinner-toggle { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .dinner-btn { padding: 1rem 1.5rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--ink); cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 130px; } .dinner-btn:hover { transform: rotate(-1deg) scale(1.02); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15); } .dinner-btn.selected { background: var(--primary); border-color: var(--primary); color: white; transform: rotate(1deg) scale(1.05); } .dinner-btn .icon { font-size: 1.8rem; } .start-btn { padding: 1.25rem 3rem; background: var(--primary); color: white; border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: 'MortysHeady', serif; font-size: 1.2rem; cursor: pointer; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.2s ease; opacity: 0.3; pointer-events: none; margin-top: 1rem; } .start-btn.ready { opacity: 1; pointer-events: auto; } .start-btn.ready:hover { background: var(--secondary); transform: scale(1.05) rotate(-1deg); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2); } /* ================================ GAME SCREEN ================================ */ .game-screen { display: none; min-height: 100vh; flex-direction: column; background: var(--bg-dark); } .game-screen.active { display: flex; } /* Top Bar mit grauer Welle */ .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem 1.5rem 2rem; background: rgba(94, 20, 110, 0.2); position: relative; } .top-bar::after { content: ""; position: absolute; bottom: -10px; left: 0; right: 0; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,20 600,20 900,10 C1050,5 1150,0 1200,0 L1200,0 L0,0 Z' fill='%230a0a0a'/%3E%3Cpath d='M0,2 C300,22 600,22 900,12 C1050,7 1150,2 1200,2' fill='none' stroke='%233a3a3a' stroke-width='2'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; z-index: 10; } .game-title { font-family: 'MortysHeady', serif; font-size: 1.45rem; letter-spacing: 0.15em; color: var(--primary-light); text-transform: uppercase; } .top-bar-controls { display: flex; align-items: center; gap: 1rem; } .round-indicator { color: var(--text-light); font-size: 0.9rem; } .round-indicator span { color: var(--primary-light); font-weight: 700; } /* Event Area */ .event-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow-y: auto; } /* ================================ PHASE CONTAINERS ================================ */ .phase { display: none; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 600px; animation: fadeIn 0.4s ease; } .phase.active { display: flex; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Card Phase */ .card-display { text-align: center; } .card-number-display { font-family: 'MortysHeady', serif; font-size: 6rem; color: var(--primary); line-height: 1; margin-bottom: 0.25rem; } .card-label { font-family: 'MortysHeady', sans-serif; font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; } .discussion-prompt { font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--ink); opacity: 0.8; margin-bottom: 1.5rem; max-width: 400px; line-height: 1.6; } .phase-timer { font-family: 'MortysHeady', serif; font-size: 2.5rem; color: var(--secondary); padding: 0.5rem 1.5rem; background: rgba(94, 20, 110, 0.1); border-radius: 10px; border: 2px dashed var(--secondary); } .phase-timer.warning { color: var(--signal); border-color: var(--signal); background: rgba(242, 0, 121, 0.1); animation: timerPulse 1s ease-in-out infinite; } @keyframes timerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ================================ MEDIA PHASE (Video/Audio) ================================ */ .media-label { font-family: 'MortysMarmelade', sans-serif; font-size: 1.3rem; color: var(--primary-light); margin-bottom: 1rem; letter-spacing: 0.1em; } .media-container { width: 100%; max-width: 700px; background: #000; border: 4px solid var(--ink); border-radius: 15px 225px 15px 255px/255px 15px 225px 15px; overflow: hidden; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3), 0 0 40px rgba(94, 20, 110, 0.5), 0 0 80px rgba(94, 20, 110, 0.3); } .media-container.playing { animation: videoGlow 3s ease-in-out infinite; } @keyframes videoGlow { 0%, 100% { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3), 0 0 40px rgba(94, 20, 110, 0.5), 0 0 80px rgba(94, 20, 110, 0.3); } 50% { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3), 0 0 60px rgba(94, 20, 110, 0.7), 0 0 100px rgba(94, 20, 110, 0.4); } } .media-container video { width: 100%; display: block; } .media-container audio { width: 100%; padding: 3rem 2rem; background: linear-gradient(135deg, var(--mono-medium), var(--mono-dark)); } .media-fallback { margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); } /* ================================ GATE, HINT, PAUSE, DINNER, FEEDBACK ================================ */ .gate-content, .paper-hint-content, .pause-content, .dinner-content, .feedback-content { text-align: center; } .gate-icon, .paper-hint-icon, .pause-icon, .dinner-icon, .feedback-icon { font-size: 3.5rem; margin-bottom: 0.75rem; } .gate-title, .paper-hint-title, .pause-title, .dinner-title, .feedback-title { font-family: 'MortysHeady', serif; font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--primary); text-transform: uppercase; letter-spacing: 0.1em; } .gate-message, .paper-hint-instruction, .pause-message, .dinner-message, .feedback-message { font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--ink); opacity: 0.85; margin-bottom: 1.5rem; max-width: 400px; line-height: 1.6; } .seal-image { width: 70px; height: 70px; margin-bottom: 1rem; border-radius: 50%; box-shadow: 0 0 20px rgba(94, 20, 110, 0.4); } .hint-number { font-family: 'MortysHeady', serif; font-size: 2.5rem; color: var(--primary); margin-bottom: 0.75rem; } .gate-btn, .feedback-link { display: inline-block; padding: 1rem 2.5rem; background: var(--primary); color: white; border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: 'MortysHeady', serif; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; } .gate-btn:hover, .feedback-link:hover { background: var(--secondary); transform: scale(1.05) rotate(-1deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); } /* ================================ VOTING PHASE ================================ */ .voting-title { font-family: 'MortysHeady', serif; font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--primary); text-transform: uppercase; } .voting-subtitle { font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--ink); opacity: 0.8; margin-bottom: 1.5rem; } .suspect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; width: 100%; max-width: 450px; } .suspect-btn { padding: 1rem 0.5rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 95% 4% 92% 5%/4% 95% 6% 95%; color: var(--ink); font-family: 'MortysMadness', sans-serif; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; } .suspect-btn:hover { background: var(--secondary); color: white; border-color: var(--secondary); transform: scale(1.05) rotate(-1deg); } .suspect-btn.selected { background: var(--primary); border-color: var(--primary); color: white; transform: scale(1.08) rotate(1deg); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); } .confirm-vote-btn { padding: 1rem 2.5rem; background: var(--primary); color: white; border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: 'MortysHeady', serif; font-size: 1rem; text-transform: uppercase; cursor: pointer; opacity: 0.3; pointer-events: none; transition: all 0.2s ease; } .confirm-vote-btn.ready { opacity: 1; pointer-events: auto; } .confirm-vote-btn.ready:hover { background: var(--secondary); transform: scale(1.05); } /* ================================ BOTTOM BAR mit grauer Welle ================================ */ .bottom-bar { padding: 1.5rem 2rem 1rem 2rem; background: rgba(94, 20, 110, 0.15); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; position: relative; } .bottom-bar::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C300,0 600,0 900,10 C1050,15 1150,20 1200,20 L1200,20 L0,20 Z' fill='%230a0a0a'/%3E%3Cpath d='M0,18 C300,-2 600,-2 900,8 C1050,13 1150,18 1200,18' fill='none' stroke='%233a3a3a' stroke-width='2'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; z-index: 10; } .progress-container { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; max-width: 280px; } .progress-bar { flex: 1; max-width: 250px; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; border: 1px solid var(--secondary); } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); transition: width 0.3s ease; } .progress-text { font-size: 0.85rem; color: var(--text-muted); } .control-buttons { display: flex; gap: 0.75rem; } /* ================================ ANIMIERTE WELLEN UNTEN ================================ */ .bottom-waves { position: fixed; bottom: 0; left: 0; right: 0; height: 150px; pointer-events: none; z-index: 1; overflow: hidden; } .bottom-waves svg { position: absolute; bottom: 0; width: 100%; } .bottom-waves .wave-1 { height: 120px; z-index: 1; } .bottom-waves .wave-2 { height: 100px; z-index: 2; } .bottom-waves .wave-3 { height: 80px; z-index: 3; } .bottom-waves .wave-fill-1 { fill: var(--wave-color-1); opacity: 0.4; } .bottom-waves .wave-fill-2 { fill: var(--wave-color-2); opacity: 0.6; } .bottom-waves .wave-fill-3 { fill: var(--wave-color-3); opacity: 0.8; } .bottom-waves.animating .wave-path-1 { animation: waveAnim1 4s ease-in-out infinite; } .bottom-waves.animating .wave-path-2 { animation: waveAnim2 3s ease-in-out infinite; } .bottom-waves.animating .wave-path-3 { animation: waveAnim3 2.5s ease-in-out infinite; } @keyframes waveAnim1 { 0%, 100% { d: path("M0,60 C320,100 640,20 960,60 C1280,100 1440,40 1440,40 L1440,120 L0,120 Z"); } 50% { d: path("M0,40 C320,0 640,80 960,40 C1280,0 1440,60 1440,60 L1440,120 L0,120 Z"); } } @keyframes waveAnim2 { 0%, 100% { d: path("M0,50 C240,80 480,20 720,50 C960,80 1200,30 1440,50 L1440,100 L0,100 Z"); } 50% { d: path("M0,30 C240,0 480,60 720,30 C960,0 1200,50 1440,30 L1440,100 L0,100 Z"); } } @keyframes waveAnim3 { 0%, 100% { d: path("M0,40 C360,60 720,20 1080,40 C1260,50 1440,30 1440,30 L1440,80 L0,80 Z"); } 50% { d: path("M0,20 C360,0 720,40 1080,20 C1260,10 1440,30 1440,30 L1440,80 L0,80 Z"); } } /* ================================ MODALS ================================ */ .modal-overlay, .continue-overlay, .library-overlay, .tutorial-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; } .modal-overlay.active, .continue-overlay.active, .tutorial-overlay.active { display: flex; } .library-overlay.active { display: block; overflow-y: auto; padding: 2rem; } .modal-box, .continue-box { background: var(--paper); border: 4px solid var(--ink); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; padding: 2.5rem 2rem; max-width: 450px; text-align: center; color: var(--ink); animation: modalAppear 0.3s ease; } @keyframes modalAppear { from { opacity: 0; transform: scale(0.9) rotate(-2deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .modal-icon, .continue-icon { font-size: 3rem; margin-bottom: 0.75rem; } .modal-title, .continue-title { font-family: 'MortysHeady', serif; font-size: 1.4rem; color: var(--primary); margin-bottom: 1rem; text-transform: uppercase; } .modal-message, .continue-info { font-family: 'MortysMadness', sans-serif; font-size: 1rem; opacity: 0.85; margin-bottom: 1.5rem; line-height: 1.6; } .continue-details { background: rgba(94, 20, 110, 0.1); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; font-size: 0.9rem; text-align: left; } .modal-buttons, .continue-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .modal-btn, .continue-btn { padding: 0.75rem 1.5rem; font-family: 'MortysHeady', serif; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; border-radius: 95% 4% 92% 5%/4% 95% 6% 95%; text-transform: uppercase; border: 2px solid var(--ink); } .modal-btn.cancel, .continue-btn.secondary { background: transparent; color: var(--ink); } .modal-btn.cancel:hover, .continue-btn.secondary:hover { background: var(--ink); color: var(--paper); } .modal-btn.confirm, .continue-btn.primary { background: var(--primary); border-color: var(--primary); color: white; } .modal-btn.confirm:hover, .continue-btn.primary:hover { background: var(--secondary); transform: scale(1.05); } /* Library */ .library-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; } .library-title { font-family: 'MortysHeady', serif; font-size: 1.8rem; color: var(--primary-light); text-transform: uppercase; } .library-close { background: transparent; border: 2px solid var(--primary-light); color: var(--primary-light); width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: all 0.2s ease; } .library-close:hover { background: var(--primary-light); color: var(--bg-dark); } .library-content { max-width: 800px; margin: 0 auto; } .library-section { margin-bottom: 2rem; } .library-section-title { font-family: 'MortysMarmelade', sans-serif; font-size: 1.2rem; color: var(--primary-light); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--secondary); } .library-empty { text-align: center; color: var(--text-muted); padding: 3rem; } .library-item { background: var(--paper); border: 3px solid var(--ink); border-radius: 15px; padding: 1.5rem; margin-bottom: 1rem; color: var(--ink); } .library-item-header { margin-bottom: 1rem; } .library-item-title { font-family: 'MortysMarmelade', sans-serif; font-size: 1.1rem; color: var(--primary); } .library-item video, .library-item audio { width: 100%; border-radius: 8px; } /* Tutorial */ .tutorial-card { max-width: 450px; width: 100%; text-align: center; } .tutorial-icon { font-size: 4rem; margin-bottom: 1rem; } .tutorial-title { font-family: 'MortysHeady', serif; font-size: 1.5rem; color: var(--primary); margin-bottom: 1rem; text-transform: uppercase; } .tutorial-text { font-family: 'MortysMadness', sans-serif; font-size: 1.1rem; color: var(--ink); line-height: 1.6; margin-bottom: 1.5rem; } .tutorial-dots { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; } .tutorial-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--secondary); opacity: 0.4; transition: all 0.3s ease; } .tutorial-dot.active { opacity: 1; background: var(--primary-light); transform: scale(1.2); } .tutorial-btn { padding: 1rem 2.5rem; background: var(--primary); color: white; border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: 'MortysHeady', serif; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; } .tutorial-btn:hover { background: var(--secondary); transform: scale(1.05) rotate(-1deg); } .tutorial-skip { display: block; margin-top: 1rem; background: transparent; border: none; color: var(--text-muted); font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; cursor: pointer; text-decoration: underline; } .tutorial-demo-bar { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; padding: 1rem; background: rgba(0, 0, 0, 0.3); border-radius: 10px; } .tutorial-demo-btn { background: transparent; border: 2px solid var(--primary-light); color: var(--primary-light); padding: 0.5rem 1rem; border-radius: 95% 4% 92% 5%/4% 95% 6% 95%; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; opacity: 0.5; transition: all 0.3s ease; } .tutorial-demo-btn.highlight { opacity: 1; animation: demoPulse 1.5s ease-in-out infinite; box-shadow: 0 0 20px rgba(157, 78, 189, 0.6); } @keyframes demoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .tutorial-demo-btn .btn-label { font-family: 'MortysMadness', sans-serif; font-size: 0.8rem; } /* Subtitles */ .subtitle-container { position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%); max-width: 80%; text-align: center; z-index: 500; pointer-events: none; } .subtitle-text { display: inline-block; background: rgba(0, 0, 0, 0.85); color: white; font-family: 'MortysMadness', sans-serif; font-size: 1.2rem; padding: 0.75rem 1.5rem; border-radius: 8px; line-height: 1.5; } .subtitle-container.hidden { display: none; } /* Flash */ .flash-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--primary); opacity: 0; pointer-events: none; z-index: 999; } .flash-overlay.flash { animation: flashAnim 0.6s ease-out; } .flash-overlay.flash-intense { animation: flashIntense 1s ease-out; } @keyframes flashAnim { 0% { opacity: 0.6; } 100% { opacity: 0; } } @keyframes flashIntense { 0% { opacity: 0.8; background: var(--signal); } 15% { opacity: 0.3; background: var(--primary); } 30% { opacity: 0.6; background: var(--signal); } 100% { opacity: 0; } } .game-screen.shake { animation: screenShake 0.5s ease-in-out; } @keyframes screenShake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* Save Toast */ .save-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(100px); background: #27ae60; color: white; padding: 1rem 2rem; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: 'MortysMadness', sans-serif; font-size: 1rem; z-index: 1000; opacity: 0; transition: all 0.3s ease; pointer-events: none; } .save-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Music Indicator */ .music-indicator { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); } .music-bars { display: flex; gap: 2px; height: 15px; align-items: flex-end; } .music-bar { width: 3px; background: var(--primary-light); animation: musicPulse 0.8s ease-in-out infinite; } .music-bar:nth-child(1) { height: 40%; animation-delay: 0s; } .music-bar:nth-child(2) { height: 70%; animation-delay: 0.2s; } .music-bar:nth-child(3) { height: 50%; animation-delay: 0.4s; } .music-bar:nth-child(4) { height: 80%; animation-delay: 0.1s; } @keyframes musicPulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } } .music-bars.paused .music-bar { animation: none; opacity: 0.5; } /* ================================ END SCREEN ================================ */ .end-screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: var(--bg-dark); } .end-screen.active { display: flex; } .end-card { max-width: 450px; } .end-kanji { font-size: 5rem; color: var(--primary-light); margin-bottom: 0.5rem; text-shadow: 0 0 30px rgba(94, 20, 110, 0.5); } .end-title { font-family: 'MortysHeady', serif; font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--ink); text-transform: uppercase; } .end-subtitle { font-family: 'MortysMadness', sans-serif; color: var(--ink); opacity: 0.7; margin-bottom: 1.5rem; } .restart-btn { padding: 1rem 2.5rem; background: transparent; border: 3px solid var(--primary); color: var(--primary); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: 'MortysHeady', serif; font-size: 1rem; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; } .restart-btn:hover { background: var(--primary); color: white; } /* Branding */ .morty-brand { text-align: center; padding: 0.75rem; font-family: 'MortysMadness', sans-serif; font-size: 0.75rem; color: var(--text-muted); background: rgba(0, 0, 0, 0.3); } .morty-brand a { color: var(--primary-light); text-decoration: none; } .morty-brand a:hover { text-decoration: underline; } /* ================================ RESPONSIVE ================================ */ @media (max-width: 600px) { /* === TOP BAR: kompakt, einzeilig === */ .top-bar { padding: 0.4rem 0.75rem 0.8rem 0.75rem; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.4rem; } .game-title { font-size: 0.85rem; letter-spacing: 0.05em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Torbogen-Icon neben Titel: klein */ .title-icon-small { width: 28px !important; height: 28px !important; } .top-bar-controls { gap: 0.35rem; flex-wrap: nowrap; } /* Top-Buttons kleiner */ .top-btn { min-width: 36px; min-height: 36px; padding: 0.3rem 0.4rem; } .top-btn .mia-icon { width: 20px !important; height: 20px !important; } /* Volume Panel: nicht abgeschnitten */ .volume-panel { right: 0; min-width: 180px; padding: 0.5rem 0.75rem; font-size: 0.75rem; } .round-indicator { display: none; } /* === BOTTOM BAR: kompakt === */ .bottom-bar { padding: 0.75rem 0.75rem 0.5rem 0.75rem; gap: 0.5rem; flex-direction: row; flex-wrap: nowrap; align-items: center; } .progress-container { flex: 1; max-width: none; gap: 0.4rem; } .sketch-progress-container { width: 100% !important; } .progress-pct { font-size: 0.8rem; min-width: 2rem; } .control-buttons { gap: 0.35rem; flex-shrink: 0; } .ctrl-btn { padding: 0.35rem 0.5rem; font-size: 0.7rem; gap: 0.3rem; } .ctrl-btn .mia-icon { width: 16px !important; height: 16px !important; } /* === BAIAN: größer, mehr Platz === */ .custom-audio-portrait-wrap .baian-stack { width: 220px; height: 220px; } .custom-audio-portrait-wrap .baian-frame { width: 220px; height: 220px; } /* === SETUP === */ .setup-logo { font-size: 3.5rem; } .setup-title { font-size: 1.2rem; } .player-btn { width: 48px; height: 48px; font-size: 1.1rem; } .dinner-btn { min-width: 110px; padding: 0.8rem 1rem; } /* === CONTENT === */ .card-number-display { font-size: 4.5rem; } .suspect-grid { grid-template-columns: repeat(2, 1fr); } .morty-note { padding: 45px 25px 30px 25px; margin: 45px 10px 25px 10px; } .gate-btn, .start-btn, .confirm-vote-btn { padding: 0.9rem 2rem; font-size: 1rem; } .library-header { flex-direction: column; gap: 1rem; } } /* ================================ ICON FIX - AM ENDE DER CSS EINFÜGEN Behebt das Problem mit unsichtbaren Icons ================================ */ /* Icons mit fester Pixel-Größe statt em */ .mia-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; flex-shrink: 0; } .mia-icon--sm { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; } .mia-icon--md { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } .mia-icon--lg { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } .mia-icon--xl { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } .mia-icon--xxl { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; } /* Top Bar Icons MÜSSEN weiß sein (schwarzes Icon auf schwarzem Hintergrund = unsichtbar) */ .top-btn .mia-icon { filter: invert(1) brightness(2) !important; } /* Bottom Bar normale Icons bleiben schwarz */ .ctrl-btn .mia-icon { filter: none !important; } /* Danger Button (Neustart) Icons weiß */ .ctrl-btn.danger .mia-icon { filter: invert(1) brightness(2) !important; } /* Hover: Bottom Bar Icons werden weiß */ .ctrl-btn:hover .mia-icon { filter: invert(1) brightness(2) !important; } /* Library Title Icon weiß */ .library-title .mia-icon { filter: invert(1) brightness(2) !important; } /* Save Toast Icon weiß */ .save-toast .mia-icon { filter: invert(1) brightness(2) !important; } /* Tutorial Demo Icons */ .tutorial-demo-btn .mia-icon { filter: invert(1) brightness(2) !important; width: 20px !important; height: 20px !important; } /* ================================ MIA ENGINE v1.5 - PATCH v3 FIXES: Wellen im Hintergrund sichtbar ================================ */ /* ================================ 1. ICON FIXES ================================ */ .mia-icon { display: inline-block !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; vertical-align: middle !important; flex-shrink: 0 !important; } .mia-icon--sm { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; } .mia-icon--md { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } .mia-icon--lg { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } .mia-icon--xl { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } .mia-icon--xxl { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; } .top-btn .mia-icon { filter: invert(1) brightness(2) !important; } .ctrl-btn .mia-icon { filter: none !important; width: 20px !important; height: 20px !important; } .ctrl-btn.danger .mia-icon { filter: invert(1) brightness(2) !important; } .ctrl-btn:hover .mia-icon { filter: invert(1) brightness(2) !important; } .library-title .mia-icon { filter: invert(1) brightness(2) !important; width: 28px !important; height: 28px !important; } .save-toast .mia-icon { filter: invert(1) brightness(2) !important; } .modal-icon .mia-icon { width: 48px !important; height: 48px !important; } /* ================================ 2. TOP-BAR - Sanfte graue Fläche ================================ */ .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem 1.5rem 2rem; background: #1a1a1a; position: relative; z-index: 100; } .top-bar::after { content: ""; position: absolute; bottom: -30px; left: 0; right: 0; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,10 C240,25 480,5 720,15 C960,25 1200,5 1440,15 L1440,0 Z' fill='%231a1a1a'/%3E%3C/svg%3E") no-repeat bottom; background-size: 100% 100%; z-index: 99; pointer-events: none; } /* ================================ 3. BOTTOM-BAR - Transparent, damit Wellen durchscheinen ================================ */ .bottom-bar { padding: 1.5rem 2rem 1rem 2rem; background: transparent !important; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 100; } /* Alte Wellen-Linie entfernen */ .bottom-bar::before { display: none !important; } /* ================================ 4. MORTY BRAND - Transparent ================================ */ .morty-brand { position: relative; z-index: 100; background: transparent !important; } /* ================================ 5. ANIMIERTE WELLEN - Im Hintergrund, sichtbar ================================ */ .bottom-waves { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 300px !important; pointer-events: none !important; z-index: 1 !important; overflow: visible !important; } .bottom-waves svg { position: absolute !important; bottom: 0 !important; width: 100% !important; } .bottom-waves .wave-1 { height: 250px !important; z-index: 1 !important; } .bottom-waves .wave-2 { height: 200px !important; z-index: 2 !important; } .bottom-waves .wave-3 { height: 150px !important; z-index: 3 !important; } /* Dunkle Lila-Farben */ .bottom-waves .wave-fill-1 { fill: #2D1233 !important; opacity: 0.9 !important; } .bottom-waves .wave-fill-2 { fill: #3D1A4A !important; opacity: 0.85 !important; } .bottom-waves .wave-fill-3 { fill: #4A2057 !important; opacity: 0.8 !important; } /* ================================ 6. GAME SCREEN - Hintergrund transparent ================================ */ .game-screen { position: relative; z-index: 10; background: transparent !important; } .event-area { position: relative; z-index: 10; } /* ================================ 7. BODY - Schwarzer Hintergrund bleibt ================================ */ body { background: #0a0a0a !important; } /* ================================ MIA ENGINE v1.5 - PATCH v4 NEUE FIXES: 1. Tutorial Demo Bar - größere Fläche mit handdrawn border 2. Icon Overflow Fix - Icons passen immer in ihren Container 3. Neue Icons: globe, error, warning ================================ */ /* ================================ 1. ICON FIXES - Overflow verhindern ================================ */ .mia-icon { display: inline-block !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 100% !important; max-height: 100% !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; vertical-align: middle !important; flex-shrink: 0 !important; object-fit: contain !important; } .mia-icon--sm { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; } .mia-icon--md { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } .mia-icon--lg { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } .mia-icon--xl { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } .mia-icon--xxl { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; } /* Icon Container soll Icons begrenzen */ .tutorial-icon, .gate-icon, .dinner-icon, .pause-icon, .hint-icon, .feedback-icon, .modal-icon, .loading-logo, .language-logo, .error-icon, .setup-logo, .end-kanji { display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* Spezielle Größen für Icon-Container */ .tutorial-icon { width: 80px !important; height: 80px !important; margin: 0 auto 1rem !important; } .tutorial-icon .mia-icon { width: 64px !important; height: 64px !important; } .gate-icon, .dinner-icon, .pause-icon, .hint-icon, .feedback-icon { width: 60px !important; height: 60px !important; margin: 0 auto 1rem !important; } .gate-icon .mia-icon, .dinner-icon .mia-icon, .pause-icon .mia-icon, .hint-icon .mia-icon, .feedback-icon .mia-icon { width: 48px !important; height: 48px !important; } /* ================================ 2. NEUE ICONS - Globe, Error, Warning ================================ */ .icon-globe { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='2' fill='none'/%3E%3Cpath d='M2 12h20M12 2c-3 3-3 7-3 10s0 7 3 10M12 2c3 3 3 7 3 10s0 7-3 10' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important; } .icon-error { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='2' fill='none'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='black' stroke-width='2'/%3E%3C/svg%3E") !important; } .icon-warning { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 22h20L12 2z' stroke='black' stroke-width='2' fill='none'/%3E%3Cpath d='M12 9v5M12 17v1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; } .icon-game { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='6' width='20' height='12' rx='3' stroke='black' stroke-width='2' fill='none'/%3E%3Ccircle cx='8' cy='12' r='2' fill='black'/%3E%3Ccircle cx='16' cy='10' r='1.5' fill='black'/%3E%3Ccircle cx='16' cy='14' r='1.5' fill='black'/%3E%3C/svg%3E") !important; } /* ================================ 3. TOP-BAR Icon Filter ================================ */ .top-btn .mia-icon { filter: invert(1) brightness(2) !important; } .ctrl-btn .mia-icon { filter: none !important; width: 20px !important; height: 20px !important; } .ctrl-btn.danger .mia-icon { filter: invert(1) brightness(2) !important; } .ctrl-btn:hover .mia-icon { filter: invert(1) brightness(2) !important; } .library-title .mia-icon { filter: invert(1) brightness(2) !important; width: 28px !important; height: 28px !important; } .save-toast .mia-icon { filter: invert(1) brightness(2) !important; } .mia-icon--white { filter: invert(1) brightness(2) !important; } /* Game Title Icon */ .game-title .mia-icon { filter: none !important; width: 24px !important; height: 24px !important; margin-right: 0.5rem !important; } /* ================================ 4. TOP-BAR - Sanfte graue Fläche ================================ */ .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem 1.5rem 2rem; background: #1a1a1a; position: relative; z-index: 100; } .top-bar::after { content: ""; position: absolute; bottom: -30px; left: 0; right: 0; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,10 C240,25 480,5 720,15 C960,25 1200,5 1440,15 L1440,0 Z' fill='%231a1a1a'/%3E%3C/svg%3E") no-repeat bottom; background-size: 100% 100%; z-index: 99; pointer-events: none; } /* ================================ 5. BOTTOM-BAR - Transparent ================================ */ .bottom-bar { padding: 1.5rem 2rem 1rem 2rem; background: transparent !important; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 100; } .bottom-bar::before { display: none !important; } .morty-brand { position: relative; z-index: 100; background: transparent !important; } /* ================================ 6. ANIMIERTE WELLEN - Im Hintergrund ================================ */ .bottom-waves { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 300px !important; pointer-events: none !important; z-index: 1 !important; overflow: visible !important; } .bottom-waves svg { position: absolute !important; bottom: 0 !important; width: 100% !important; } .bottom-waves .wave-1 { height: 250px !important; z-index: 1 !important; } .bottom-waves .wave-2 { height: 200px !important; z-index: 2 !important; } .bottom-waves .wave-3 { height: 150px !important; z-index: 3 !important; } .bottom-waves .wave-fill-1 { fill: #2D1233 !important; opacity: 0.9 !important; } .bottom-waves .wave-fill-2 { fill: #3D1A4A !important; opacity: 0.85 !important; } .bottom-waves .wave-fill-3 { fill: #4A2057 !important; opacity: 0.8 !important; } /* ================================ 7. GAME SCREEN - Transparent ================================ */ .game-screen { position: relative; z-index: 10; background: transparent !important; } .event-area { position: relative; z-index: 10; } body { background: #0a0a0a !important; } /* ================================ 8. TUTORIAL DEMO BAR - Größer mit handdrawn border ================================ */ .tutorial-demo-bar { display: flex !important; justify-content: center !important; align-items: center !important; gap: 0.75rem !important; padding: 1.25rem 1.5rem !important; margin: 1.5rem -1rem !important; background: rgba(60, 50, 70, 0.95) !important; border: 3px solid var(--ink, #2C1810) !important; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1) !important; } .tutorial-demo-btn { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.4rem !important; padding: 0.75rem 1rem !important; background: rgba(255, 255, 255, 0.1) !important; border: 2px dashed rgba(255, 255, 255, 0.3) !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.8) !important; font-size: 0.75rem !important; min-width: 80px !important; transition: all 0.2s ease !important; } .tutorial-demo-btn .mia-icon { width: 28px !important; height: 28px !important; filter: invert(1) brightness(1.5) !important; } .tutorial-demo-btn .btn-label { font-family: 'MortysMadness', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .tutorial-demo-btn.highlight { background: var(--primary, #5E146E) !important; border-color: white !important; border-style: solid !important; color: white !important; transform: scale(1.05) !important; } .tutorial-demo-btn.highlight .mia-icon { filter: invert(1) brightness(2) !important; } /* ================================ 9. DINNER BUTTONS - Icon Fix ================================ */ .dinner-btn { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; } .dinner-btn .mia-icon { width: 40px !important; height: 40px !important; } /* ================================ 10. SETUP LOGO - Größe begrenzen ================================ */ .setup-logo { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1rem !important; } .setup-logo .mia-icon { width: 64px !important; height: 64px !important; } /* ================================ 11. LOADING & LANGUAGE LOGO ================================ */ .loading-logo, .language-logo { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.5rem !important; } .loading-logo .mia-icon, .language-logo .mia-icon { width: 64px !important; height: 64px !important; filter: invert(1) brightness(2) !important; } /* ================================ 12. ERROR SCREEN ================================ */ .error-icon { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1rem !important; } .error-icon .mia-icon { width: 64px !important; height: 64px !important; filter: invert(1) brightness(2) !important; } /* ================================ 13. MODAL ICON ================================ */ .modal-icon { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1rem !important; } .modal-icon .mia-icon { width: 56px !important; height: 56px !important; } /* ================================ 14. END SCREEN ================================ */ .end-kanji { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1rem !important; } .end-kanji .mia-icon { width: 72px !important; height: 72px !important; } /* ================================ ICON FIX - Zettel/Notes (heller Hintergrund) Füge das am Ende der mia-styles.css ein ================================ */ /* Icons auf Zetteln/Notes sollen SCHWARZ bleiben (kein Invert) */ .morty-note .mia-icon, .setup-card .mia-icon, .tutorial-card .mia-icon:not(.tutorial-demo-btn .mia-icon), .modal-box .mia-icon, .dinner-btn .mia-icon, .gate-icon .mia-icon, .dinner-icon .mia-icon, .pause-icon .mia-icon, .hint-icon .mia-icon, .feedback-icon .mia-icon, .card-icon .mia-icon, .voting-icon .mia-icon { filter: none !important; } /* Tutorial Demo Bar Icons sollen WEISS sein (dunkler Hintergrund) */ .tutorial-demo-bar .mia-icon, .tutorial-demo-btn .mia-icon { filter: invert(1) brightness(1.5) !important; } /* Setup Logo soll auch schwarz sein */ .setup-logo .mia-icon { filter: none !important; } /* Tutorial Icon (großes Icon oben) soll schwarz sein */ .tutorial-icon .mia-icon { filter: none !important; } /* ================================ BENUTZERDEFINIERTE ICONS - v1.5 Füge am Ende der mia-styles.css ein ================================ */ /* Dinner / Dish Icon */ .icon-dinner { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 157 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M148.958 79.173C147.509 79.168 146.059 79.173 144.585 79.173H143.155L143.008 78.24C142.862 77.328 142.735 76.533 142.624 75.729C140.847 62.876 137.425 51.834 132.16 41.972C123.579 25.891 110.567 15.498 93.496 11.079C91.733 10.62 89.924 10.204 88.174 9.8L86.193 9.34C86.193 9.135 86.199 8.936 86.201 8.74C86.212 7.998 86.222 7.296 86.181 6.596C86.037 4.114 85.437 2.486 84.292 1.472C83.148 0.458 81.48 0.064 79.03 0.217C76.192 0.396 73.199 0.718 69.607 1.229C66.922 1.611 65.059 2.116 64.07 3.446C63.081 4.777 63.129 6.772 63.545 9.55C63.53 9.586 63.509 9.626 63.488 9.671L62.756 9.883C61.968 10.064 61.151 10.253 60.334 10.446C42.078 14.76 29.002 24.958 21.471 40.756C15.065 54.193 12.071 68.608 10.008 81.005L8.353 81.179C6.522 81.371 4.692 81.562 2.864 81.77C2.43 81.791 2.006 81.906 1.621 82.106C1.236 82.307 0.899 82.589 0.633 82.932C0.451 83.204 0.334 83.515 0.288 83.839C0.243 84.164 0.271 84.494 0.37 84.807C0.574 85.348 0.901 85.836 1.324 86.23C1.748 86.625 2.256 86.915 2.811 87.081C4.078 87.367 5.377 87.491 6.675 87.449C6.894 87.449 7.113 87.449 7.331 87.449C20.535 87.379 32.463 87.311 44.723 87.186C51.97 87.112 59.216 87.025 66.461 86.924C79.097 86.76 92.164 86.591 105.014 86.535C114.839 86.493 124.835 86.6 134.501 86.704C139.379 86.757 144.257 86.804 149.136 86.845C152.643 86.871 155.893 86.44 155.973 83.162C156.002 82.723 155.939 82.281 155.789 81.867C155.639 81.452 155.405 81.073 155.101 80.753C154.069 79.681 152.117 79.182 148.958 79.173Z' fill='black'/%3E%3C/svg%3E") !important; } /* Film / Movie Clapper Icon */ .icon-film { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 147 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M144.735 93.006L144.544 85.751C144.478 83.134 144.259 80.487 144.05 77.927L143.919 76.31C143.734 73.993 142.452 72.718 140.309 72.718H139.971C136.657 72.723 133.232 72.727 129.86 72.841C126.306 72.962 122.694 73.126 119.202 73.286C112.442 73.594 105.449 73.913 98.579 73.923C87.974 73.94 77.191 73.783 66.761 73.633C59.413 73.528 51.815 73.419 44.34 73.371C40.475 73.346 36.556 73.534 32.764 73.716C31.618 73.771 30.471 73.825 29.324 73.876C29.824 73.645 30.325 73.416 30.833 73.198C38.213 69.998 45.592 66.794 52.97 63.587C72.726 55.006 93.153 46.133 113.284 37.499C124.054 32.88 133.14 29.943 141.88 28.255C143.799 27.885 144.834 26.553 144.647 24.693C144.466 23.396 144.027 22.148 143.356 21.023C142.268 19.036 141.081 17.105 139.797 15.238C136.736 10.804 133.608 6.443 131.226 3.141C129.701 1.025 127.788 0.308 125.547 1.011C124.028 1.487 122.47 1.943 120.965 2.385C118.123 3.218 115.189 4.079 112.353 5.115C90.665 13.047 62.182 23.765 34.207 36.357C25.305 40.363 16.332 44.603 7.654 48.702L4.307 50.281C2.454 51.156 1.287 52.324 0.828 53.754C0.378 55.171 0.652 56.778 1.642 58.528C4.596 63.878 6.816 69.602 8.241 75.544C8.392 76.141 8.585 76.726 8.772 77.29C8.934 77.775 9.095 78.259 9.227 78.751C9.318 79.085 9.424 79.422 9.525 79.759C9.839 80.612 10.026 81.507 10.079 82.414C10.076 83.953 9.98 85.527 9.888 87.05C9.772 88.95 9.654 90.915 9.708 92.858C9.982 102.69 10.371 113.275 10.931 126.166C11.062 129.193 11.259 132.264 11.447 135.235C11.706 139.309 11.972 143.521 12.08 147.662C12.252 154.465 13.445 155.782 20.057 156.468C20.516 156.516 20.98 156.541 21.442 156.56C26.299 156.763 31.241 157.006 36.02 157.241C46.798 157.771 57.942 158.319 68.914 158.548' fill='black'/%3E%3C/svg%3E") !important; } /* Warning / Caution Icon */ .icon-warning { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 153 129' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M73.254 126.878C57.103 127.497 41.332 128.16 25.555 128.666C21.119 128.809 16.668 128.49 12.224 128.38C11.891 128.373 11.558 128.346 11.227 128.301C2.75 127.096 -1.037 121.338 2.418 113.511C5.91 105.817 9.869 98.344 14.272 91.135C27.963 68.205 41.879 45.413 55.744 22.587C58.401 18.212 61.212 13.931 63.937 9.597C64.406 8.851 65.06 8.099 65.183 7.279C66.111 1.045 74.041 -1.517 79.627 1.538C81.654 2.687 83.439 4.222 84.879 6.057C90.061 12.601 95.24 19.165 100.046 25.986C113.898 45.648 127.588 65.426 141.299 85.186C145.623 91.417 149.657 97.817 151.616 105.283C152.414 108.324 152.966 111.356 152.275 114.517C151.306 118.947 148.84 122.122 144.373 123.043C140.036 123.984 135.629 124.568 131.197 124.791C114.647 125.443 98.086 125.834 81.53 126.355C78.643 126.449 75.761 126.718 73.254 126.878ZM10.252 118.706C12.362 120.016 14.304 119.795 16.126 119.732C30.004 119.221 44.883 118.705 59.751 118.038C74.737 117.368 89.713 116.503 104.696 115.768C114.463 115.29 124.237 114.934 134.003 114.429C136.058 114.323 138.095 113.807 140.619 113.401C140.155 111.046 139.931 109.082 139.371 107.22C137.713 101.705 134.597 96.939 131.316 92.3C119.227 75.22 107.18 58.109 94.924 41.15C88.41 32.136 81.511 23.402 74.749 14.568C73.931 13.612 73.055 12.707 72.125 11.86C70.125 12.251 69.56 13.658 68.856 14.891C66.43 19.142 64.063 23.425 61.608 27.66C50.622 46.614 39.622 65.559 28.606 84.496C23.291 93.627 17.877 102.7 12.584 111.843C11.334 114.014 10.386 116.351 9.252 118.705H10.252Z' fill='black'/%3E%3Cpath d='M69.797 58.962C69.797 54.848 69.728 50.733 69.832 46.622C69.902 45.073 70.164 43.538 70.612 42.054C70.742 41.44 71.11 40.902 71.634 40.559C72.159 40.216 72.797 40.094 73.41 40.222C74.439 40.497 75.326 41.041 75.893 42.054C76.461 43.067 76.641 44.315 76.641 45.689V72.103C76.641 73.477 76.461 74.725 75.893 75.738C75.326 76.751 74.439 77.295 73.41 77.57C72.797 77.698 72.159 77.576 71.634 77.233C71.11 76.89 70.742 76.352 70.612 75.738C70.164 74.254 69.902 72.719 69.832 71.17C69.728 67.059 69.797 62.944 69.797 58.962Z' fill='black'/%3E%3Ccircle cx='73' cy='95' r='6' fill='black'/%3E%3C/svg%3E") !important; } /* Globe / Language / Settings Icon */ .icon-globe { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 168 166' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.33 134.943C12.146 135.197 13.917 134.565 15.591 133.059C18.067 130.83 20.725 128.705 23.294 126.65C24.31 125.837 25.327 125.026 26.336 124.204C27.672 123.118 29.021 122.047 30.42 120.936L31.815 119.826C32.835 121.162 33.868 122.476 34.871 123.751C37.99 127.718 40.942 131.472 43.383 135.69L43.162 135.891C42.797 136.221 42.484 136.505 42.157 136.771C40.327 138.254 38.493 139.733 36.655 141.209C32.858 144.269 28.931 147.43 25.111 150.595C23.111 152.251 22.183 153.728 22.19 155.241C22.198 156.772 23.168 158.27 25.244 159.957C28.321 162.534 32.009 164.273 35.953 165.005C38.534 165.465 41.15 165.699 43.772 165.704C46.21 165.703 48.644 165.494 51.047 165.078C69.257 161.945 82.367 144.97 80.891 126.431C80.618 122.618 79.703 118.88 78.183 115.374L118.611 81.858C119.597 82.104 120.536 82.357 121.447 82.601C123.434 83.173 125.449 83.642 127.484 84.004C131.901 84.68 136.408 84.461 140.739 83.36C145.069 82.258 149.136 80.297 152.696 77.593C156.653 74.654 159.981 70.948 162.483 66.696C164.984 62.445 166.609 57.734 167.26 52.842C168.528 43.857 165.65 35.868 163 29.913C162.893 29.672 162.778 29.433 162.664 29.194C162.349 28.593 162.099 27.961 161.918 27.307C161.474 25.387 160.718 24.201 159.605 23.683C158.581 23.207 157.309 23.351 155.826 24.112C153.839 25.21 152.008 26.569 150.382 28.154C146.695 31.573 143.014 35.098 139.452 38.508C138.193 39.714 136.934 40.916 135.678 42.116L119.248 28.275L119.287 28.202C119.399 27.966 119.531 27.739 119.679 27.524C123.678 22.264 128.536 16.169 134.295 10.813C135.075 10.141 135.774 9.379 136.377 8.543C137.37 7.047 137.218 5.423 136.01 4.593C135.737 4.406 135.463 4.216 135.187 4.023C133.33 2.726 131.41 1.389 129.261 0.819C126.283 0.101 123.211 -0.137 120.159 0.112C112.833 0.483 106.091 2.348 99.577 5.541' fill='black'/%3E%3C/svg%3E") !important; } /* Game / Puzzle Icon */ .icon-game { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 153 136' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M91.238 20.67C95.722 20.67 99.835 20.64 103.948 20.679C107.618 20.713 111.33 20.5 114.948 20.969C122.694 21.975 127.121 26.546 127.908 34.322C128.418 39.362 128.414 44.453 128.655 49.831C130.554 50.149 132.434 50.569 134.287 51.089C142.568 53.8 148.835 58.745 151.593 67.263C154.333 75.735 152.169 82.754 145.143 88.259C141.075 91.447 136.571 93.813 130.954 94.558C131.364 98.151 131.825 101.617 132.143 105.101C132.545 109.505 132.85 113.918 133.149 118.329C133.189 119.215 133.134 120.102 132.983 120.977C131.771 128.961 127.981 132.464 119.815 132.735C112.008 132.994 104.188 132.879 96.38 133.117C90.7 133.291 87.127 130.786 85.141 125.579C84.121 123.006 82.929 120.505 81.576 118.089C76.939 109.549 66.05 108.95 59.635 114.026C55.19 117.546 52.613 122.251 50.959 127.53C50.717 128.268 50.558 129.032 50.485 129.805C50.29 132.25 48.92 133.743 46.597 134.153C42.552 134.865 38.453 135.944 34.398 135.849C26.83 135.673 19.281 134.774 11.726 134.151C11.064 134.064 10.412 133.917 9.777 133.71C3.51 131.974 1.053 128.955 1.006 122.511C0.948 114.313 1.053 106.114 1.085 97.916C1.089 96.921 1.102 95.925 1.065 94.931C0.95 91.877 2.17 90.518 5.325 90.268C7.874 90.063 10.423 89.839 12.976 89.706C21.095 89.286 27.572 76.037 21.764 67.837C19.415 64.522 15.897 62.825 11.786 62.462C9.901 62.295 8.015 62.132 6.136 61.907C5.392 61.879 4.688 61.56 4.178 61.02C3.668 60.48 3.393 59.763 3.412 59.023C3.408 51.071 2.173 43.086 3.978 35.179C4.15 34.424 4.362 33.675 4.608 32.941C6.401 27.594 10.053 24.283 15.74 23.772C20.279 23.366 24.865 23.444 29.431 23.371C32.87 23.315 36.31 23.359 39.89 23.359C40.086 22.772 40.305 22.16 40.504 21.541C44.02 10.591 51.687 3.735 62.63 1.041' fill='black'/%3E%3C/svg%3E") !important; } /* User / Person Icon */ .icon-people, .icon-user { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 154 139' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M95.544 138.156C81.351 138.156 67.158 138.087 52.966 138.178C41.556 138.251 30.151 138.581 18.742 138.66C15.532 138.66 12.327 138.419 9.153 137.943C2.316 136.962 -0.405 132.922 1.872 126.404C3.429 122.038 5.464 117.857 7.939 113.936C18.427 97.142 33.687 86.237 51.975 79.211C61.903 75.318 72.455 73.246 83.122 73.096C99.071 72.958 113.752 76.996 126.29 87.491C134.849 94.559 141.844 103.321 146.832 113.223C148.22 115.99 149.785 118.693 150.897 121.569C151.965 124.224 152.711 126.997 153.121 129.828C153.669 134.07 151.3 136.882 147.055 137.416C144.094 137.817 141.111 138.04 138.121 138.084C123.929 138.149 109.736 138.115 95.544 138.115V138.156Z' fill='black'/%3E%3Cpath d='M80.054 0.454C90.989 0.188 100.125 5.395 107.061 14.858C108.696 17.089 110.669 19.16 111.863 21.607C114.532 27.077 116.742 32.696 115.324 39.079C113.992 45.074 112.256 50.846 108.387 55.759C101.506 64.487 92.734 69.883 81.523 71.225C71.432 72.433 61.836 70.942 52.877 66.205C43.65 61.326 38.4 53.432 36.494 43.289C33.625 28.019 41.632 14.325 54.267 7.044C61.912 2.637 70.168 0.415 80.054 0.454Z' fill='black'/%3E%3C/svg%3E") !important; } /* Mask / Magic Wand / Theater Icon */ .icon-mask { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 136 145' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M118.231 50.902C117.279 52.567 116.651 54.117 115.639 55.352C112.344 59.375 108.901 63.273 105.532 67.235C84.711 91.717 61.725 114.113 38.882 136.645C37.074 138.43 35.17 140.133 33.198 141.735C32.083 142.634 30.848 143.374 29.529 143.933C28.516 144.408 27.375 144.536 26.281 144.298C25.188 144.06 24.203 143.467 23.478 142.613C16.731 135.595 9.992 128.57 3.261 121.539C0.952 119.113 0.708 117.569 2.739 114.779C5.856 110.497 8.96 106.132 12.614 102.328C23.263 91.238 33.986 80.203 45.05 69.532C57.073 57.936 69.496 46.758 81.782 35.439C84.384 33.043 87.104 30.769 89.856 28.543C92.259 26.596 93.063 26.779 95.692 28.522C103.336 33.591 109.427 40.327 115.606 46.966C116.611 48.049 117.278 49.454 118.231 50.902Z' fill='black'/%3E%3Cpath d='M121.962 14.169C120.463 13.784 119.184 13.503 117.933 13.122C117.395 12.975 116.922 12.648 116.593 12.195C116.263 11.743 116.097 11.192 116.122 10.633C116.082 9.31 116.533 8.166 117.861 7.742C119.313 7.278 120.832 7.018 122.653 6.591C122.892 5.592 123.166 4.443 123.443 3.293C123.955 1.166 124.745 0.38 126.402 0.352C128.03 0.323 128.921 1.124 129.476 3.21C129.626 3.934 129.739 4.666 129.812 5.402C130.636 5.477 131.482 5.514 132.315 5.638C134.361 5.941 135.462 6.969 135.667 8.7C135.875 10.466 135.135 11.769 133.294 12.622C132.411 12.979 131.508 13.286 130.589 13.539C130.375 14.871 130.085 16.189 129.721 17.488C129.04 19.494 127.783 20.465 126.196 20.46C124.522 20.46 123.026 19.23 122.463 17.249C122.237 16.233 122.069 15.209 121.962 14.169Z' fill='black'/%3E%3C/svg%3E") !important; } /* Vote / Unhide / Eye Icon */ .icon-vote { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 87' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M78.13 0.119C91.605 0.498 104.499 3.475 116.483 9.721C125.288 14.276 133.363 20.134 140.437 27.101C142.541 29.299 144.525 31.611 146.382 34.024C148.673 36.843 149.058 40.327 149.213 43.75C149.191 45.277 148.746 46.768 147.93 48.056C140.122 61.122 129.901 71.566 115.908 78.025C96.117 87.16 75.828 89.265 54.895 82.727C39.539 77.929 25.191 71.084 12.566 60.883C8.978 57.984 5.734 54.788 3.47 50.731C2.593 49.045 1.824 47.305 1.167 45.521C0.393 43.59 0.868 41.716 1.883 40.053C2.713 38.773 3.667 37.58 4.733 36.491C12.241 28.368 20.612 21.097 29.696 14.807C38.178 8.949 47.734 4.846 57.808 2.733C64.471 1.309 71.198 -0.178 78.13 0.119ZM9.876 44.504C12.143 48.415 15.581 50.812 19.026 53.184C31.048 61.46 44.223 67.179 58.261 70.961C73.031 74.941 87.54 73.774 101.92 68.877C116.42 63.937 127.74 54.661 137.461 43.111C137.741 42.849 137.939 42.511 138.031 42.138C138.068 41.419 138.208 40.455 137.824 40.01C133.348 34.823 128.775 29.714 123.054 25.844C96.747 8.057 69.22 6.988 40.984 20.422C29.962 25.667 20.389 33.309 11.445 41.647C10.671 42.362 10.365 43.576 9.873 44.504H9.876Z' fill='black'/%3E%3Cpath d='M96.234 41.486C96.292 45.182 94.986 48.768 92.568 51.553C87.607 57.299 81.49 60.645 73.664 60.149C71.103 60.029 68.602 59.328 66.348 58.097C64.095 56.867 62.148 55.139 60.654 53.045C59.159 50.95 58.156 48.542 57.719 46.001C57.283 43.461 57.424 40.854 58.133 38.377C58.968 35.451 60.278 32.684 62.009 30.187C69.743 19.292 84.029 21.013 91.084 27.592C94.954 31.202 96.314 35.837 96.234 41.486Z' fill='black'/%3E%3C/svg%3E") !important; } /* Error / Cross Icon */ .icon-error { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 130 127' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M62.365 76.063C51.145 86.107 40.173 95.837 29.311 105.687C23.018 111.394 16.951 117.348 10.673 123.069C9.001 124.632 7.079 125.903 4.988 126.828C3.956 127.261 1.729 126.828 1.221 126.035C0.549 124.982 0.748 123.114 1.113 121.74C1.378 120.738 2.458 119.908 3.272 119.104C18.763 103.852 34.26 88.609 49.765 73.377C51.505 71.668 53.294 70.012 55.293 68.114C48.518 60.605 41.731 53.359 35.253 45.844C24.913 33.844 14.781 21.666 4.564 9.562C4.192 9.122 3.873 8.641 3.498 8.201C1.71 6.087 0.449 3.809 2.485 1.245C4.01 -0.675 7.654 -0.388 10.192 2.224C16.512 8.726 22.669 15.386 28.775 22.096C39.923 34.343 50.984 46.669 62.092 58.952C62.568 59.399 63.073 59.812 63.605 60.19C72.195 51.98 80.689 43.797 89.255 35.684C99.188 26.28 109.157 16.914 119.16 7.584C122.912 4.077 125.921 3.445 128.224 5.491C130.61 7.61 130.388 11.152 126.582 14.949C116.293 25.216 105.755 35.234 95.227 45.263C87.207 52.905 79.058 60.416 70.522 68.399C77.459 75.573 84.093 82.724 91.048 89.544C97.728 96.095 104.782 102.265 111.594 108.681C114.257 111.095 116.751 113.69 119.058 116.449C120.918 118.763 121.193 121.636 118.906 123.919C116.652 126.17 114.043 125.375 111.869 123.67C107.71 120.58 103.724 117.264 99.928 113.736C88.307 102.355 76.891 90.766 65.401 79.252C64.493 78.342 63.624 77.388 62.365 76.063Z' fill='black'/%3E%3C/svg%3E") !important; } /* ================================ AKTUALISIERTE ICONS copy.svg = Karten (icon-card) tv.svg = Archiv/Library (icon-library) ================================ */ /* Card / Copy Icon (für Kartenrunden) */ .icon-card { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 151 173' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.923 153.398C25.908 153.062 21.26 152.78 16.615 152.431C13.369 152.186 10.3 151.464 7.578 149.459C3.007 146.09 1.569 141.264 1.458 136.007C1.295 128.332 1.36 120.646 1.561 112.971C1.767 105.186 2.087 97.396 2.654 89.63C3.859 73.087 4.38 56.526 4.839 39.947C5.168 31.936 6.641 24.013 9.212 16.42C11.359 9.786 15.676 5.678 22.633 4.535C24.276 4.265 25.922 3.955 27.579 3.82C50.839 1.973 74.073 -0.473 97.463 0.405C102.453 0.593 107.451 0.999 112.406 1.624C118.56 2.399 121.757 5.863 121.976 12.058C122.154 17.136 121.886 22.23 121.81 27.778C122.815 27.778 124.008 27.689 125.186 27.795C128.943 28.132 132.725 28.353 136.439 28.965C142.402 29.951 146.049 33.544 147.63 39.433C148.915 44.499 149.683 49.684 149.923 54.906C150.962 71.956 149.786 88.92 148.223 105.895C147.611 112.529 147.573 119.228 147.435 125.902C147.297 132.576 147.5 139.263 147.258 145.933C147.13 149.71 146.673 153.467 145.891 157.163C144.143 165.312 138.661 170.196 130.151 171.171C124.199 171.921 118.213 172.362 112.215 172.494C94.772 172.676 77.323 172.758 59.882 172.485C54.152 172.396 48.381 171.399 42.739 170.278C36.132 168.965 32.047 163.932 31.31 157.17C31.177 155.969 31.062 154.766 30.923 153.398Z' fill='black'/%3E%3Cpath d='M42.13 105.059H41.704C41.48 112.397 41.255 119.735 41.029 127.073C40.913 130.864 40.693 134.661 40.712 138.451C40.735 142.885 42.638 145.74 46.873 147.045C49.438 147.835 52.147 148.084 54.842 148.143C70.024 148.447 85.216 148.567 100.399 148.805C107.106 148.911 113.778 148.261 120.219 146.312C123.648 145.274 126.013 143.196 126.493 139.362C127.227 133.496 127.742 127.578 127.754 121.673C127.802 98.252 127.591 74.829 127.394 51.408C127.348 46.011 126.471 40.716 124.073 35.794C122.657 32.886 120.337 31.337 117.019 31.19C110.756 30.913 104.487 30.65 98.219 30.571C82.476 30.372 66.73 30.283 50.987 30.088C47.166 30.041 43.271 30.133 39.547 30.765C35.057 31.527 32.428 34.579 31.787 39.229C31.372 42.233 31.163 45.283 31.119 48.319C30.957 62.013 30.903 75.709 30.799 89.404C30.727 98.956 30.576 108.508 30.453 118.059' fill='black'/%3E%3C/svg%3E") !important; } /* Library / TV Icon (für Archiv) */ .icon-library { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 165 155' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M163.997 104.308C163.721 92.836 163.504 81.159 163.301 69.871L163.078 58.175C162.986 53.37 161.916 48.487 159.711 42.797C158.316 39.079 155.719 35.933 152.333 33.857C144.037 28.744 135.964 26.126 127.642 25.85C119.904 25.587 112.028 25.574 104.408 25.568C100.903 25.561 97.437 25.555 93.972 25.528C93.65 25.522 93.322 25.502 92.935 25.463L91.898 25.371L92.423 24.478C92.613 24.163 92.764 23.907 92.935 23.658C93.782 22.451 94.628 21.236 95.475 20.028L95.665 19.759C97.752 16.786 99.905 13.721 101.946 10.656C102.803 9.347 103.418 7.896 103.764 6.371C103.941 5.477 103.823 4.55 103.43 3.729C103.036 2.908 102.386 2.236 101.579 1.815C100.817 1.422 99.948 1.287 99.103 1.43C98.258 1.573 97.483 1.987 96.893 2.609C95.968 3.583 95.168 4.667 94.51 5.838L94.202 6.376C90.92 12.001 87.533 17.81 84.311 23.638C83.175 25.686 81.711 26.362 79.559 25.83L79.231 25.751L79.106 25.436C78.837 24.76 78.568 24.078 78.305 23.395C77.577 21.525 76.835 19.608 75.962 17.77C75.14 16.056 74.112 14.447 72.903 12.979C72.567 12.546 72.137 12.195 71.647 11.952C71.156 11.709 70.616 11.58 70.068 11.575C69.564 11.578 69.065 11.676 68.598 11.863C66.76 12.566 65.808 13.996 65.986 15.782C66.177 17.552 66.587 19.291 67.206 20.96C67.842 22.644 68.54 24.316 69.233 25.944L69.518 26.618C70.09 27.974 70.68 29.367 71.173 30.77C71.506 31.794 71.703 32.86 71.758 33.937C71.859 35.765 71.809 37.613 71.76 39.404C71.728 40.492 71.696 41.617 71.696 42.701C71.696 43.266 71.589 43.906 71.109 44.328C70.63 44.753 69.98 44.69 69.432 44.653C65.787 44.401 62.139 44.102 58.594 43.812C53.266 43.375 47.768 42.925 42.322 42.672C35.055 42.338 27.727 42.301 20.65 42.566C16.001 42.741 12.099 44.636 9.155 48.121C6.328 51.47 4.588 55.556 4.155 59.871C3.568 65.754 3.291 71.714 3.022 77.482C2.663 85.205 2.29 93.182 2.253 101.044C2.206 111.259 2.585 121.499 2.949 131.405C3.09 135.202 3.693 139.043 4.719 142.565C6.086 147.259 9.346 150.323 14.199 151.307C21.218 152.733 28.451 153.269 35.513 153.79C46.485 154.6 57.706 155.072 68.6 154.961C82.266 154.822 95.972 154.126 109.262 153.448C114.97 153.157 120.663 152.565 126.308 151.678C136.113 150.135 141.82 143.946 143.13 134.02C143.693 129.771 144.014 125.475 144.324 121.317C144.465 119.42 144.606 117.462 144.785 115.568C145.361 109.325 146.133 102.991 146.88 96.871C147.433 92.328 148.004 87.647 148.478 83.005C149.063 77.269 149.433 71.491 149.79 65.893C150.008 62.487 150.232 58.969 150.5 55.501C150.758 52.132 150.975 50.461 153.067 48.212C154.368 46.815 155.893 45.644 157.577 44.752C159.89 43.508 162.148 42.795 164.041 45.252C165.195 46.751 165.054 48.567 164.963 50.291C164.808 53.187 164.571 56.084 164.341 58.87C163.826 65.045 163.334 70.946 163.334 76.909C163.334 85.952 163.619 95.024 163.997 104.308Z' fill='black'/%3E%3Cpath d='M134.33 91.832C134.33 95.895 134.286 99.959 134.339 104.021C134.392 108.265 133.084 111.839 130.083 114.732C127.547 117.176 124.392 118.351 120.932 119.02C115.253 120.118 109.475 120.398 103.697 120.593C92.014 120.989 80.305 121.012 68.609 121.012C58.591 121.012 48.512 120.627 38.587 119.485C35.17 119.092 31.843 118.177 28.71 116.768C24.626 114.941 22.518 111.647 22.363 107.089C22.132 100.289 21.979 93.477 22.017 86.673C22.085 74.016 22.332 61.345 22.544 49.109L22.596 46.175C22.602 45.927 22.67 45.685 22.795 45.47C22.92 45.255 23.098 45.076 23.313 44.949C23.528 44.821 23.772 44.751 24.022 44.743C24.272 44.735 24.52 44.79 24.742 44.903C27.538 46.278 30.475 46.846 33.481 47.113C43.256 47.981 53.072 48.371 62.879 48.614C77.053 48.965 91.261 48.834 105.437 48.474C113.177 48.277 120.94 47.741 128.468 45.84C130.104 45.428 131.664 44.76 133.091 43.862C133.432 43.649 133.837 43.563 134.237 43.617C134.636 43.672 135.001 43.863 135.27 44.159C135.614 44.539 135.783 45.051 135.831 45.569C136.076 48.208 136.312 50.851 136.399 53.499C136.677 61.853 136.863 70.218 137.039 78.296C137.157 83.76 137.264 89.367 137.358 94.938' fill='black'/%3E%3C/svg%3E") !important; } /* ================================ TITEL-ICONS (SVG als img) Für Loading, Setup, End Screen ================================ */ .title-icon { width: 80px; height: auto; max-height: 100px; object-fit: contain; display: block; margin: 0 auto; } /* Loading Screen */ .loading-logo .title-icon { width: 100px; filter: brightness(0) invert(1); /* Weiß auf dunklem Hintergrund */ } /* Setup Header */ .setup-logo .title-icon { width: 80px; filter: brightness(0) invert(1); /* Weiß auf dunklem Hintergrund */ } /* End Screen (auf Zettel - behält Farbe) */ .end-kanji .title-icon { width: 100px; filter: none; /* Farbig auf hellem Papier */ } /* Language Screen behält das Globe-Icon */ .language-logo .title-icon { width: 80px; filter: brightness(0) invert(1); } /* ================================ TITEL-ICONS (SVG als img) Füge am Ende der mia-styles.css ein ================================ */ /* Großes Titel-Icon (Setup, End Screen) */ .title-icon { width: 80px; height: auto; max-height: 100px; object-fit: contain; display: block; margin: 0 auto; } /* Kleines Titel-Icon (Game Title oben links) */ .title-icon-small { width: 72px; height: 72px; object-fit: contain; vertical-align: middle; margin-right: 0.5rem; filter: brightness(0) invert(1); /* Weiß auf dunklem Hintergrund */ } /* Setup Screen - Icon weiß machen */ .setup-logo .title-icon { filter: brightness(0) invert(1); } /* Loading Screen - Icon weiß machen */ .loading-logo .title-icon { filter: brightness(0) invert(1); } /* ================================ MIA ENGINE v1.6 ADDITIONS Anhängen ans Ende der bestehenden mia-styles.css ================================ */ /* ================================ v1.6: CHARACTER INFO (Setup Screen) ================================ */ .character-info { margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(94, 20, 110, 0.15); border-radius: 8px; border-left: 3px solid var(--primary, #5E146E); } .character-info-text { font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; color: var(--ink, #2C1810); line-height: 1.5; text-align: center; } /* ================================ v1.6: GATED ROUND STATUS ================================ */ .gated-round-status { font-family: 'MortysMadness', sans-serif; font-size: 0.8rem; color: var(--ink, #2C1810); opacity: 0.6; margin-top: 0.5rem; min-height: 1.2em; } /* ================================ v1.6: PAUSE OVERLAY FIX - Position: absolute innerhalb gameScreen (nicht fixed über alles) - Verdeckt NUR den Event-Content-Bereich, nicht die Bottom-Bar - Klick aufs Overlay = Resume ================================ */ .pause-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 120px; background: rgba(10, 10, 10, 0.85); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: pointer; } .pause-overlay.active { opacity: 1; pointer-events: auto; } .pause-overlay-content { text-align: center; } .pause-overlay-text { font-family: 'MortysHeady', serif; font-size: 3rem; color: var(--text-light, #f5f5f5); text-transform: uppercase; letter-spacing: 0.2em; animation: pausePulse 2s ease-in-out infinite; } .pause-overlay-hint { font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; color: var(--text-muted, #aaaaaa); margin-top: 1rem; } @keyframes pausePulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @media (max-width: 600px) { .pause-overlay { bottom: 100px; } .pause-overlay-text { font-size: 2rem; } } /* End Screen (auf Zettel) - Icon farbig lassen */ .end-kanji .title-icon { filter: none; } /* Game Title (oben links) - Icon weiß */ .game-title .title-icon-small { filter: brightness(0) invert(1); } /* ================================ MIA ENGINE v1.6 ADDITIONS Anhängen ans Ende der bestehenden mia-styles.css ================================ */ /* ================================ v1.6: CHARACTER INFO (Setup Screen) ================================ */ .character-info { margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(94, 20, 110, 0.15); border-radius: 8px; border-left: 3px solid var(--primary, #5E146E); } .character-info-text { font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; color: var(--ink, #2C1810); line-height: 1.5; text-align: center; } /* ================================ v1.6: GATED ROUND STATUS ================================ */ .gated-round-status { font-family: 'MortysMadness', sans-serif; font-size: 0.8rem; color: var(--ink, #2C1810); opacity: 0.6; margin-top: 0.5rem; min-height: 1.2em; } /* ================================ v1.6: PAUSE OVERLAY FIX - Position: absolute innerhalb gameScreen (nicht fixed über alles) - Verdeckt NUR den Event-Content-Bereich, nicht die Bottom-Bar - Klick aufs Overlay = Resume ================================ */ .pause-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 120px; background: rgba(10, 10, 10, 0.85); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: pointer; } .pause-overlay.active { opacity: 1; pointer-events: auto; } .pause-overlay-content { text-align: center; } .pause-overlay-text { font-family: 'MortysHeady', serif; font-size: 3rem; color: var(--text-light, #f5f5f5); text-transform: uppercase; letter-spacing: 0.2em; animation: pausePulse 2s ease-in-out infinite; } .pause-overlay-hint { font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; color: var(--text-muted, #aaaaaa); margin-top: 1rem; } @keyframes pausePulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @media (max-width: 600px) { .pause-overlay { bottom: 100px; } .pause-overlay-text { font-size: 2rem; } } /* ================================ v1.6: Z-INDEX FIX - Setup/End Screen über Wellen ================================ */ .setup-screen { position: relative; z-index: 10; } .end-screen { position: relative; z-index: 10; } /* ================================ v1.6: SPEAKER PORTRAIT (Baian-Bild bei Audio) ================================ */ .speaker-image { margin-bottom: 1rem; text-align: center; } .speaker-portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: none; box-shadow: none; } /* ================================ v1.6: NOTFALL-SKIP-BUTTON (dezent, für Testspiel) ================================ */ .skip-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.25); font-size: 1.2rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 20; /* ================================ MIA ENGINE v1.6 ADDITIONS Anhängen ans Ende der bestehenden mia-styles.css ================================ */ /* ================================ v1.6: CHARACTER INFO (Setup Screen) ================================ */ .character-info { margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(94, 20, 110, 0.15); border-radius: 8px; border-left: 3px solid var(--primary, #5E146E); } .character-info-text { font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; color: var(--ink, #2C1810); line-height: 1.5; text-align: center; } /* ================================ v1.6: GATED ROUND STATUS ================================ */ .gated-round-status { font-family: 'MortysMadness', sans-serif; font-size: 0.8rem; color: var(--ink, #2C1810); opacity: 0.6; margin-top: 0.5rem; min-height: 1.2em; } /* ================================ v1.6: PAUSE OVERLAY FIX - Position: absolute innerhalb gameScreen (nicht fixed über alles) - Verdeckt NUR den Event-Content-Bereich, nicht die Bottom-Bar - Klick aufs Overlay = Resume ================================ */ .pause-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 120px; background: rgba(10, 10, 10, 0.85); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: pointer; } .pause-overlay.active { opacity: 1; pointer-events: auto; } .pause-overlay-content { text-align: center; } .pause-overlay-text { font-family: 'MortysHeady', serif; font-size: 3rem; color: var(--text-light, #f5f5f5); text-transform: uppercase; letter-spacing: 0.2em; animation: pausePulse 2s ease-in-out infinite; } .pause-overlay-hint { font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; color: var(--text-muted, #aaaaaa); margin-top: 1rem; } @keyframes pausePulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @media (max-width: 600px) { .pause-overlay { bottom: 100px; } .pause-overlay-text { font-size: 2rem; } } /* ================================ v1.6: Z-INDEX FIX - Setup/End Screen über Wellen ================================ */ .setup-screen { position: relative; z-index: 10; } .end-screen { position: relative; z-index: 10; } /* ================================ v1.6: SPEAKER PORTRAIT (Baian-Bild bei Audio) ================================ */ .speaker-image { margin-bottom: 1rem; text-align: center; } .speaker-portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: none; box-shadow: none; } /* ================================ v1.6: NOTFALL-SKIP-BUTTON (dezent, für Testspiel) ================================ */ .skip-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.25); font-size: 1.2rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 20; } .skip-btn:hover { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.3); } /* Phase braucht position:relative für den Skip-Button */ .phase { position: relative; } } .skip-btn:hover { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.3); } /* Phase braucht position:relative für den Skip-Button */ .phase { position: relative; } /* ================================ MIA ENGINE v1.6 ADDITIONS Anhängen ans Ende der bestehenden mia-styles.css ================================ */ /* ================================ v1.6: CHARACTER INFO (Setup Screen) ================================ */ .character-info { margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(94, 20, 110, 0.15); border-radius: 8px; border-left: 3px solid var(--primary, #5E146E); } .character-info-text { font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; color: var(--ink, #2C1810); line-height: 1.5; text-align: center; } /* ================================ v1.6: GATED ROUND STATUS ================================ */ .gated-round-status { font-family: 'MortysMadness', sans-serif; font-size: 0.8rem; color: var(--ink, #2C1810); opacity: 0.6; margin-top: 0.5rem; min-height: 1.2em; } /* ================================ v1.6: PAUSE OVERLAY FIX - Position: absolute innerhalb gameScreen (nicht fixed über alles) - Verdeckt NUR den Event-Content-Bereich, nicht die Bottom-Bar - Klick aufs Overlay = Resume ================================ */ .pause-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 120px; background: rgba(10, 10, 10, 0.85); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: pointer; } .pause-overlay.active { opacity: 1; pointer-events: auto; } .pause-overlay-content { text-align: center; } .pause-overlay-text { font-family: 'MortysHeady', serif; font-size: 3rem; color: var(--text-light, #f5f5f5); text-transform: uppercase; letter-spacing: 0.2em; animation: pausePulse 2s ease-in-out infinite; } .pause-overlay-hint { font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; color: var(--text-muted, #aaaaaa); margin-top: 1rem; } @keyframes pausePulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @media (max-width: 600px) { .pause-overlay { bottom: 100px; } .pause-overlay-text { font-size: 2rem; } } /* ================================ v1.6: Z-INDEX FIX - Setup/End Screen über Wellen ================================ */ .setup-screen { position: relative; z-index: 10; } .end-screen { position: relative; z-index: 10; } /* ================================ v1.6: SPEAKER PORTRAIT (Baian-Bild bei Audio) ================================ */ .speaker-image { margin-bottom: 1rem; text-align: center; } .speaker-portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: none; box-shadow: none; } /* ================================ v1.6: NOTFALL-SKIP-BUTTON (dezent, für Testspiel) ================================ */ .skip-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.25); font-size: 1.2rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 20; } .skip-btn:hover { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.3); } /* Phase braucht position:relative für den Skip-Button */ .phase { position: relative; } /* ================================ v1.7: TOP-BAR + BOTTOM-BAR FIXIERT (kein Scrollen) ================================ */ .game-screen { display: flex !important; flex-direction: column !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } .game-screen .top-bar { flex-shrink: 0 !important; position: sticky !important; top: 0 !important; z-index: 100 !important; } .game-screen .event-area { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; } .game-screen .bottom-bar { flex-shrink: 0 !important; position: sticky !important; bottom: 0 !important; z-index: 100 !important; } .game-screen .morty-brand { flex-shrink: 0 !important; } /* ================================ v1.7: LAUTSTÄRKEREGLER ================================ */ .volume-control { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; } .volume-slider { -webkit-appearance: none; appearance: none; width: 80px; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; outline: none; cursor: pointer; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--primary-light, #9D4EBD); border-radius: 50%; cursor: pointer; } .volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--primary-light, #9D4EBD); border-radius: 50%; border: none; cursor: pointer; } .volume-label { font-size: 0.7rem; color: var(--text-muted, #aaa); min-width: 28px; text-align: center; } /* ================================ v1.7: CEREMONY EVENT STYLES ================================ */ .ceremony-content { text-align: center; } .ceremony-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 60px !important; height: 60px !important; margin: 0 auto 1rem !important; } .ceremony-title { font-family: 'MortysHeady', serif; font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--primary, #5E146E); text-transform: uppercase; letter-spacing: 0.1em; } .ceremony-message { font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--ink, #2C1810); opacity: 0.85; margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.6; } .ceremony-timer { font-family: 'MortysHeady', serif; font-size: 2.5rem; color: var(--secondary, #8B6B96); padding: 0.5rem 1.5rem; background: rgba(94, 20, 110, 0.1); border-radius: 10px; border: 2px dashed var(--secondary, #8B6B96); display: inline-block; margin-bottom: 1rem; } .ceremony-status { font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; color: var(--ink, #2C1810); opacity: 0.7; min-height: 1.5em; } /* ================================ v1.7: ARCHIV v2 - Baian-Portrait + Sprechblase ================================ */ .library-item-v2 { background: var(--paper, #F5F0E6); border: 3px solid var(--ink, #2C1810); border-radius: 15px; padding: 1.25rem; margin-bottom: 1rem; color: var(--ink, #2C1810); } .library-item-header-v2 { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; } .library-portrait { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary, #5E146E); flex-shrink: 0; } .library-item-bubble { flex: 1; background: rgba(94, 20, 110, 0.08); border-radius: 12px; padding: 0.75rem 1rem; position: relative; } .library-item-bubble::before { content: ''; position: absolute; left: -8px; top: 12px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid rgba(94, 20, 110, 0.08); } .library-item-bubble .library-item-title { font-family: 'MortysMarmelade', sans-serif; font-size: 1rem; color: var(--primary, #5E146E); margin-bottom: 0.25rem; } .library-transcript { font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; color: var(--ink, #2C1810); opacity: 0.8; line-height: 1.5; max-height: 120px; overflow-y: auto; } .library-item-media { margin-top: 0.5rem; } .library-item-media audio, .library-item-media video { width: 100%; border-radius: 8px; } /* Ceremony Icon auf Zettel schwarz */ .ceremony-icon .mia-icon { filter: none !important; } /* ================================ MIA ENGINE v1.6 ADDITIONS Anhängen ans Ende der bestehenden mia-styles.css ================================ */ /* ================================ v1.6: CHARACTER INFO (Setup Screen) ================================ */ .character-info { margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(94, 20, 110, 0.15); border-radius: 8px; border-left: 3px solid var(--primary, #5E146E); } .character-info-text { font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; color: var(--ink, #2C1810); line-height: 1.5; text-align: center; } /* ================================ v1.6: GATED ROUND STATUS ================================ */ .gated-round-status { font-family: 'MortysMadness', sans-serif; font-size: 0.8rem; color: var(--ink, #2C1810); opacity: 0.6; margin-top: 0.5rem; min-height: 1.2em; } /* ================================ v1.6: PAUSE OVERLAY FIX - Position: absolute innerhalb gameScreen (nicht fixed über alles) - Verdeckt NUR den Event-Content-Bereich, nicht die Bottom-Bar - Klick aufs Overlay = Resume ================================ */ .pause-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 120px; background: rgba(10, 10, 10, 0.85); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: pointer; } .pause-overlay.active { opacity: 1; pointer-events: auto; } .pause-overlay-content { text-align: center; } .pause-overlay-text { font-family: 'MortysHeady', serif; font-size: 3rem; color: var(--text-light, #f5f5f5); text-transform: uppercase; letter-spacing: 0.2em; animation: pausePulse 2s ease-in-out infinite; } .pause-overlay-hint { font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; color: var(--text-muted, #aaaaaa); margin-top: 1rem; } @keyframes pausePulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @media (max-width: 600px) { .pause-overlay { bottom: 100px; } .pause-overlay-text { font-size: 2rem; } } /* ================================ v1.6: Z-INDEX FIX - Setup/End Screen über Wellen ================================ */ .setup-screen { position: relative; z-index: 10; } .end-screen { position: relative; z-index: 10; } /* ================================ v1.6: SPEAKER PORTRAIT (Baian-Bild bei Audio) ================================ */ .speaker-image { margin-bottom: 1rem; text-align: center; } .speaker-portrait { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: none; box-shadow: none; filter: drop-shadow(0 0 15px rgba(94, 20, 110, 0.3)); } /* ================================ v1.6: NOTFALL-SKIP-BUTTON (dezent, für Testspiel) ================================ */ .skip-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.25); font-size: 1.2rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 20; } .skip-btn:hover { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.3); } /* Phase braucht position:relative für den Skip-Button */ .phase { position: relative; } /* ================================ v1.7: TOP-BAR + BOTTOM-BAR FIXIERT (kein Scrollen) ================================ */ .game-screen { display: flex !important; flex-direction: column !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } .game-screen .top-bar { flex-shrink: 0 !important; position: sticky !important; top: 0 !important; z-index: 100 !important; } .game-screen .event-area { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; } .game-screen .bottom-bar { flex-shrink: 0 !important; position: sticky !important; bottom: 0 !important; z-index: 100 !important; } .game-screen .morty-brand { flex-shrink: 0 !important; } /* ================================ v1.7: LAUTSTÄRKEREGLER ================================ */ .volume-control { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; } .volume-slider { -webkit-appearance: none; appearance: none; width: 80px; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; outline: none; cursor: pointer; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--primary-light, #9D4EBD); border-radius: 50%; cursor: pointer; } .volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--primary-light, #9D4EBD); border-radius: 50%; border: none; cursor: pointer; } .volume-label { font-size: 0.7rem; color: var(--text-muted, #aaa); min-width: 28px; text-align: center; } /* ================================ v1.7: CEREMONY EVENT STYLES ================================ */ .ceremony-content { text-align: center; } .ceremony-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 60px !important; height: 60px !important; margin: 0 auto 1rem !important; } .ceremony-title { font-family: 'MortysHeady', serif; font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--primary, #5E146E); text-transform: uppercase; letter-spacing: 0.1em; } .ceremony-message { font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--ink, #2C1810); opacity: 0.85; margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.6; } .ceremony-timer { font-family: 'MortysHeady', serif; font-size: 2.5rem; color: var(--secondary, #8B6B96); padding: 0.5rem 1.5rem; background: rgba(94, 20, 110, 0.1); border-radius: 10px; border: 2px dashed var(--secondary, #8B6B96); display: inline-block; margin-bottom: 1rem; } .ceremony-status { font-family: 'MortysMadness', sans-serif; font-size: 0.9rem; color: var(--ink, #2C1810); opacity: 0.7; min-height: 1.5em; } /* ================================ v1.7: ARCHIV v2 - Baian-Portrait + Sprechblase ================================ */ .library-item-v2 { background: rgba(30, 20, 40, 0.8); border: 2px dashed rgba(157, 78, 189, 0.3); border-radius: 15px; padding: 1.25rem; margin-bottom: 1rem; color: var(--text-light, #f5f5f5); } .library-item-header-v2 { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; } .library-portrait { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: none; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(94, 20, 110, 0.3)); } .library-item-bubble { flex: 1; background: rgba(94, 20, 110, 0.15); border-radius: 12px; padding: 0.75rem 1rem; position: relative; } .library-item-bubble::before { content: ''; position: absolute; left: -8px; top: 12px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid rgba(94, 20, 110, 0.15); } .library-item-bubble .library-item-title { font-family: 'MortysMarmelade', sans-serif; font-size: 1rem; color: var(--primary-light, #9D4EBD); margin-bottom: 0.25rem; } .library-transcript { font-family: 'MortysMadness', sans-serif; font-size: 0.85rem; color: var(--text-light, #f5f5f5); opacity: 0.75; line-height: 1.5; max-height: 120px; overflow-y: auto; } .library-item-media { margin-top: 0.5rem; } .library-item-media audio, .library-item-media video { width: 100%; border-radius: 8px; } /* Ceremony Icon auf Zettel schwarz */ .ceremony-icon .mia-icon { filter: none !important; } /* ================================ v1.8: SETUP-SCREEN FIXE BARS ================================ */ .setup-screen { display: flex !important; flex-direction: column !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; padding: 0 !important; justify-content: flex-start !important; align-items: stretch !important; } .setup-top-bar { flex-shrink: 0; text-align: center; padding: 1.5rem 1rem 1rem; background: var(--bg-dark); z-index: 10; } .setup-top-bar .setup-logo { font-size: 4rem; color: var(--primary-light); text-shadow: 0 0 30px rgba(94, 20, 110, 0.5); margin-bottom: 0.4rem; } .setup-top-bar .setup-title { font-family: 'MortysHeady', serif; font-size: 1.6rem; color: var(--text-light); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.2rem; } .setup-top-bar .setup-subtitle { font-family: 'MortysMarmelade', sans-serif; font-size: 0.95rem; color: var(--text-muted); } .setup-content-area { flex: 1; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; -webkit-overflow-scrolling: touch; } .setup-bottom-bar { flex-shrink: 0; padding: 1rem 1.5rem 1.5rem; background: var(--bg-dark); text-align: center; z-index: 10; } .setup-bottom-bar .start-btn { width: 100%; max-width: 400px; } @media (max-width: 600px) { .setup-top-bar { padding: 1rem 1rem 0.75rem; } .setup-top-bar .setup-logo { font-size: 3rem; } .setup-top-bar .setup-title { font-size: 1.2rem; } .setup-bottom-bar { padding: 0.75rem 1rem 1.25rem; } } /* ================================ v1.8: CREDITS-SCREEN ================================ */ .credits-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-dark); padding: 2rem 1.5rem; position: relative; z-index: 10; overflow-y: auto; } .credits-screen.hidden { display: none; } .credits-content { max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .credits-logo { font-size: 4rem; color: var(--primary-light); filter: drop-shadow(0 0 20px rgba(94, 20, 110, 0.5)); margin-bottom: 0.5rem; } .credits-game-title { font-family: 'MortysHeady', serif; font-size: 1.8rem; color: var(--text-light); letter-spacing: 0.15em; text-transform: uppercase; } .credits-tagline { font-family: 'MortysMarmelade', sans-serif; font-size: 1rem; color: var(--text-muted); margin-bottom: 0.5rem; } .credits-divider { width: 60px; height: 2px; background: var(--primary-light, #9D4EBD); opacity: 0.4; border-radius: 2px; margin: 0.75rem auto; } .credits-block { margin: 0.4rem 0; } .credits-role { font-family: 'MortysMarmelade', sans-serif; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.15rem; } .credits-name { font-family: 'MortysMadness', sans-serif; font-size: 1rem; color: var(--text-light); } .credits-thanks { font-family: 'MortysMarmelade', sans-serif; font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin: 0.5rem 0; } .credits-website-btn { display: inline-block; margin-top: 0.75rem; padding: 0.6rem 1.5rem; border: 1px dashed var(--primary-light, #9D4EBD); border-radius: 4px; color: var(--primary-light, #9D4EBD); font-family: 'MortysMarmelade', sans-serif; font-size: 0.9rem; text-decoration: none; transition: all 0.2s ease; } .credits-website-btn:hover { background: rgba(94, 20, 110, 0.15); } .credits-restart-btn { margin-top: 0.75rem; padding: 0.8rem 2rem; background: var(--primary, #6B0F7A); border: none; border-radius: 4px; color: var(--text-light); font-family: 'MortysHeady', serif; font-size: 1rem; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s ease; } .credits-restart-btn:hover { background: var(--primary-light, #9D4EBD); } /* ================================ v1.9: CUSTOM AUDIO PLAYER (Punkt 3/9) ================================ */ .custom-audio-phase { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; min-height: 60vh; gap: 1.2rem; } .custom-audio-portrait-wrap { position: relative; display: inline-block; } .custom-audio-portrait { width: 180px; height: 180px; object-fit: cover; object-position: top center; border-radius: 0; border: none; box-shadow: none; filter: drop-shadow(0 0 20px rgba(94, 20, 110, 0.4)); display: block; } /* Pulsierender Glow-Ring wenn Audio läuft — nur Glow, kein Rahmen */ .custom-audio-pulse { position: absolute; inset: -8px; border-radius: 50%; border: none; pointer-events: none; } .custom-audio-pulse.playing { border: none; animation: none; } .custom-audio-label { font-family: 'MortysMarmelade', sans-serif; font-size: 1rem; color: var(--text-muted, #888); text-align: center; max-width: 280px; } .custom-audio-playbtn { width: 60px; height: 60px; border-radius: 50%; border: 2px dashed var(--primary-light, #9D4EBD); background: rgba(94, 20, 110, 0.15); color: var(--text-light, #f5f5f5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .custom-audio-playbtn:hover { background: rgba(94, 20, 110, 0.35); border-color: var(--primary-light, #9D4EBD); transform: scale(1.08); } .custom-audio-playbtn .mia-icon { filter: invert(1) !important; } /* ================================ v1.9: ARCHIV REDESIGN (Punkt 2) ================================ */ .lib-item { background: rgba(20, 12, 28, 0.85); border: 1px solid rgba(157, 78, 189, 0.2); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; } .lib-item-header { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.6rem; } .lib-portrait { width: 52px; height: 52px; object-fit: cover; object-position: top center; border-radius: 0; border: none; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(94, 20, 110, 0.4)); } .lib-bubble { flex: 1; background: rgba(94, 20, 110, 0.12); border-radius: 10px; border-top-left-radius: 2px; padding: 0.6rem 0.8rem; position: relative; } .lib-bubble::before { content: ''; position: absolute; left: -7px; top: 10px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 7px solid rgba(94, 20, 110, 0.12); } .lib-item-title { font-family: 'MortysMarmelade', sans-serif; font-size: 0.95rem; color: var(--primary-light, #9D4EBD); margin-bottom: 0.3rem; font-weight: bold; } .lib-transcript { font-family: 'MortysMadness', sans-serif; font-size: 0.82rem; color: var(--text-light, #f5f5f5); opacity: 0.7; line-height: 1.5; max-height: 100px; overflow-y: auto; } .lib-audio-player { display: flex; justify-content: center; padding-top: 0.25rem; } .lib-playbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed rgba(157, 78, 189, 0.5); background: rgba(94, 20, 110, 0.15); color: var(--text-light, #f5f5f5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .lib-playbtn:hover { background: rgba(94, 20, 110, 0.3); border-color: var(--primary-light, #9D4EBD); } .lib-playbtn .mia-icon { filter: invert(1) !important; } .lib-video { width: 100%; border-radius: 8px; margin-top: 0.5rem; } /* ================================ v1.9: KRAKELIGE FORTSCHRITTSANZEIGE (Punkt 1) ================================ */ .sketch-progress-container { width: 200px !important; height: 28px; position: relative; } .sketch-progress-svg { display: block; width: 100%; overflow: visible; } .sketch-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .sketch-fill { fill: none; stroke: var(--primary-light, #9D4EBD); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; } .sketch-dot { fill: var(--primary-light, #9D4EBD); filter: drop-shadow(0 0 4px rgba(157, 78, 189, 0.8)); } /* ================================ v2.0: BAIAN SPRECHER-ANIMATION (3 PNGs) ================================ */ /* Wrapper: position relative, Größe des Portraits */ .custom-audio-portrait-wrap, .lib-portrait-wrap { position: relative; display: inline-block; flex-shrink: 0; } /* Alle drei Frames übereinander */ .baian-frame { display: block; object-fit: cover; object-position: top center; border: none; box-shadow: none; } /* Glow auf Wrapper: weicher lila Schein, KEIN harter Ring */ .custom-audio-portrait-wrap { filter: drop-shadow(0 0 18px rgba(94, 20, 110, 0.45)); } .lib-portrait-wrap { filter: drop-shadow(0 0 8px rgba(94, 20, 110, 0.3)); } /* Stack-Container: definiert die Größe, stapelt die 3 Frames übereinander */ .baian-stack { position: relative; display: inline-block; line-height: 0; } /* Idle: immer sichtbar, gibt dem Stack seine Größe */ .baian-frame-idle { display: block; position: relative; opacity: 1; } /* Open + Blink: absolut über Idle, standardmäßig unsichtbar */ .baian-frame-open, .baian-frame-blink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; animation: none; } /* Größen */ .custom-audio-portrait-wrap .baian-stack { width: 300px; height: 300px; } .custom-audio-portrait-wrap .baian-frame { width: 300px; height: 300px; filter: none; } .lib-portrait-wrap .baian-stack { width: 52px; height: 52px; } .lib-portrait-wrap .baian-frame { width: 52px; height: 52px; filter: none; } /* Sprechanimation */ @keyframes baianTalk { 0% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } /* Blinzel-Animation */ @keyframes baianBlink { 0% { opacity: 0; } 94% { opacity: 0; } 96% { opacity: 1; } 98% { opacity: 1; } 100% { opacity: 0; } } /* Animationen aktiv wenn .speaking auf dem portrait-wrap */ .custom-audio-portrait-wrap.speaking .baian-frame-open, .lib-portrait-wrap.speaking .baian-frame-open { animation: baianTalk 0.35s steps(1, end) infinite; } .custom-audio-portrait-wrap.speaking .baian-frame-blink, .lib-portrait-wrap.speaking .baian-frame-blink { animation: baianBlink 4s ease-in-out infinite; } /* Nicht .speaking: animation aus, opacity 0 */ .custom-audio-portrait-wrap:not(.speaking) .baian-frame-open, .custom-audio-portrait-wrap:not(.speaking) .baian-frame-blink, .lib-portrait-wrap:not(.speaking) .baian-frame-open, .lib-portrait-wrap:not(.speaking) .baian-frame-blink { animation: none; opacity: 0; } 50% { opacity: 0; } 100% { opacity: 0; } } /* ================================ ICON OVERRIDES – Korrekte SVGs aus V1.7 ================================ */ .icon-dinner { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 157 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M148.958 79.173C147.509 79.168 146.059 79.173 144.585 79.173H143.155L143.008 78.24C142.862 77.328 142.735 76.533 142.624 75.729C140.847 62.876 137.425 51.834 132.16 41.972C123.579 25.891 110.567 15.498 93.496 11.079C91.733 10.62 89.924 10.204 88.174 9.8L86.193 9.34C86.193 9.135 86.199 8.936 86.201 8.74C86.212 7.998 86.222 7.296 86.181 6.596C86.037 4.114 85.437 2.486 84.292 1.472C83.148 0.458 81.48 0.064 79.03 0.217C76.192 0.396 73.199 0.718 69.607 1.229C66.922 1.611 65.059 2.116 64.07 3.446C63.081 4.777 63.129 6.772 63.545 9.55C63.53 9.586 63.509 9.626 63.488 9.671L62.756 9.883C61.968 10.064 61.151 10.253 60.334 10.446C42.078 14.76 29.002 24.958 21.471 40.756C15.065 54.193 12.071 68.608 10.008 81.005L8.353 81.179C6.522 81.371 4.692 81.562 2.864 81.77C2.43 81.791 2.006 81.906 1.621 82.106C1.236 82.307 0.899 82.589 0.633 82.932C0.451 83.204 0.334 83.515 0.288 83.839C0.243 84.164 0.271 84.494 0.37 84.807C0.574 85.348 0.901 85.836 1.324 86.23C1.748 86.625 2.256 86.915 2.811 87.081C4.078 87.367 5.377 87.491 6.675 87.449C6.894 87.449 7.113 87.449 7.331 87.449C20.535 87.379 32.463 87.311 44.723 87.186C51.97 87.112 59.216 87.025 66.461 86.924C79.097 86.76 92.164 86.591 105.014 86.535C114.839 86.493 124.835 86.6 134.501 86.704C139.379 86.757 144.257 86.804 149.136 86.845C152.643 86.871 155.893 86.44 155.973 83.162C156.002 82.723 155.939 82.281 155.789 81.867C155.639 81.452 155.405 81.073 155.101 80.753C154.069 79.681 152.117 79.182 148.958 79.173Z' fill='black'/%3E%3C/svg%3E") !important; } .icon-film { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 147 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M144.735 93.006L144.544 85.751C144.478 83.134 144.259 80.487 144.05 77.927L143.919 76.31C143.734 73.993 142.452 72.718 140.309 72.718H139.971C136.657 72.723 133.232 72.727 129.86 72.841C126.306 72.962 122.694 73.126 119.202 73.286C112.442 73.594 105.449 73.913 98.579 73.923C87.974 73.94 77.191 73.783 66.761 73.633C59.413 73.528 51.815 73.419 44.34 73.371C40.475 73.346 36.556 73.534 32.764 73.716C31.618 73.771 30.471 73.825 29.324 73.876C29.824 73.645 30.325 73.416 30.833 73.198C38.213 69.998 45.592 66.794 52.97 63.587C72.726 55.006 93.153 46.133 113.284 37.499C124.054 32.88 133.14 29.943 141.88 28.255C143.799 27.885 144.834 26.553 144.647 24.693C144.466 23.396 144.027 22.148 143.356 21.023C142.268 19.036 141.081 17.105 139.797 15.238C136.736 10.804 133.608 6.443 131.226 3.141C129.701 1.025 127.788 0.308 125.547 1.011C124.028 1.487 122.47 1.943 120.965 2.385C118.123 3.218 115.189 4.079 112.353 5.115C90.665 13.047 62.182 23.765 34.207 36.357C25.305 40.363 16.332 44.603 7.654 48.702L4.307 50.281C2.454 51.156 1.287 52.324 0.828 53.754C0.378 55.171 0.652 56.778 1.642 58.528C4.596 63.878 6.816 69.602 8.241 75.544C8.392 76.141 8.585 76.726 8.772 77.29C8.934 77.775 9.095 78.259 9.227 78.751C9.318 79.085 9.424 79.422 9.525 79.759C9.839 80.612 10.026 81.507 10.079 82.414C10.076 83.953 9.98 85.527 9.888 87.05C9.772 88.95 9.654 90.915 9.708 92.858C9.982 102.69 10.371 113.275 10.931 126.166C11.062 129.193 11.259 132.264 11.447 135.235C11.706 139.309 11.972 143.521 12.08 147.662C12.252 154.465 13.445 155.782 20.057 156.468C20.516 156.516 20.98 156.541 21.442 156.56C26.299 156.763 31.241 157.006 36.02 157.241C46.798 157.771 57.942 158.319 68.914 158.548' fill='black'/%3E%3C/svg%3E") !important; } .icon-people, .icon-user { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 154 139' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M95.544 138.156C81.351 138.156 67.158 138.087 52.966 138.178C41.556 138.251 30.151 138.581 18.742 138.66C15.532 138.66 12.327 138.419 9.153 137.943C2.316 136.962 -0.405 132.922 1.872 126.404C3.429 122.038 5.464 117.857 7.939 113.936C18.427 97.142 33.687 86.237 51.975 79.211C61.903 75.318 72.455 73.246 83.122 73.096C99.071 72.958 113.752 76.996 126.29 87.491C134.849 94.559 141.844 103.321 146.832 113.223C148.22 115.99 149.785 118.693 150.897 121.569C151.965 124.224 152.711 126.997 153.121 129.828C153.669 134.07 151.3 136.882 147.055 137.416C144.094 137.817 141.111 138.04 138.121 138.084C123.929 138.149 109.736 138.115 95.544 138.115V138.156Z' fill='black'/%3E%3Cpath d='M80.054 0.454C90.989 0.188 100.125 5.395 107.061 14.858C108.696 17.089 110.669 19.16 111.863 21.607C114.532 27.077 116.742 32.696 115.324 39.079C113.992 45.074 112.256 50.846 108.387 55.759C101.506 64.487 92.734 69.883 81.523 71.225C71.432 72.433 61.836 70.942 52.877 66.205C43.65 61.326 38.4 53.432 36.494 43.289C33.625 28.019 41.632 14.325 54.267 7.044C61.912 2.637 70.168 0.415 80.054 0.454Z' fill='black'/%3E%3C/svg%3E") !important; } .icon-mask { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 136 145' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M118.231 50.902C117.279 52.567 116.651 54.117 115.639 55.352C112.344 59.375 108.901 63.273 105.532 67.235C84.711 91.717 61.725 114.113 38.882 136.645C37.074 138.43 35.17 140.133 33.198 141.735C32.083 142.634 30.848 143.374 29.529 143.933C28.516 144.408 27.375 144.536 26.281 144.298C25.188 144.06 24.203 143.467 23.478 142.613C16.731 135.595 9.992 128.57 3.261 121.539C0.952 119.113 0.708 117.569 2.739 114.779C5.856 110.497 8.96 106.132 12.614 102.328C23.263 91.238 33.986 80.203 45.05 69.532C57.073 57.936 69.496 46.758 81.782 35.439C84.384 33.043 87.104 30.769 89.856 28.543C92.259 26.596 93.063 26.779 95.692 28.522C103.336 33.591 109.427 40.327 115.606 46.966C116.611 48.049 117.278 49.454 118.231 50.902Z' fill='black'/%3E%3Cpath d='M121.962 14.169C120.463 13.784 119.184 13.503 117.933 13.122C117.395 12.975 116.922 12.648 116.593 12.195C116.263 11.743 116.097 11.192 116.122 10.633C116.082 9.31 116.533 8.166 117.861 7.742C119.313 7.278 120.832 7.018 122.653 6.591C122.892 5.592 123.166 4.443 123.443 3.293C123.955 1.166 124.745 0.38 126.402 0.352C128.03 0.323 128.921 1.124 129.476 3.21C129.626 3.934 129.739 4.666 129.812 5.402C130.636 5.477 131.482 5.514 132.315 5.638C134.361 5.941 135.462 6.969 135.667 8.7C135.875 10.466 135.135 11.769 133.294 12.622C132.411 12.979 131.508 13.286 130.589 13.539C130.375 14.871 130.085 16.189 129.721 17.488C129.04 19.494 127.783 20.465 126.196 20.46C124.522 20.46 123.026 19.23 122.463 17.249C122.237 16.233 122.069 15.209 121.962 14.169Z' fill='black'/%3E%3C/svg%3E") !important; } .icon-vote { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 87' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M78.13 0.119C91.605 0.498 104.499 3.475 116.483 9.721C125.288 14.276 133.363 20.134 140.437 27.101C142.541 29.299 144.525 31.611 146.382 34.024C148.673 36.843 149.058 40.327 149.213 43.75C149.191 45.277 148.746 46.768 147.93 48.056C140.122 61.122 129.901 71.566 115.908 78.025C96.117 87.16 75.828 89.265 54.895 82.727C39.539 77.929 25.191 71.084 12.566 60.883C8.978 57.984 5.734 54.788 3.47 50.731C2.593 49.045 1.824 47.305 1.167 45.521C0.393 43.59 0.868 41.716 1.883 40.053C2.713 38.773 3.667 37.58 4.733 36.491C12.241 28.368 20.612 21.097 29.696 14.807C38.178 8.949 47.734 4.846 57.808 2.733C64.471 1.309 71.198 -0.178 78.13 0.119ZM9.876 44.504C12.143 48.415 15.581 50.812 19.026 53.184C31.048 61.46 44.223 67.179 58.261 70.961C73.031 74.941 87.54 73.774 101.92 68.877C116.42 63.937 127.74 54.661 137.461 43.111C137.741 42.849 137.939 42.511 138.031 42.138C138.068 41.419 138.208 40.455 137.824 40.01C133.348 34.823 128.775 29.714 123.054 25.844C96.747 8.057 69.22 6.988 40.984 20.422C29.962 25.667 20.389 33.309 11.445 41.647C10.671 42.362 10.365 43.576 9.873 44.504H9.876Z' fill='black'/%3E%3Cpath d='M96.234 41.486C96.292 45.182 94.986 48.768 92.568 51.553C87.607 57.299 81.49 60.645 73.664 60.149C71.103 60.029 68.602 59.328 66.348 58.097C64.095 56.867 62.148 55.139 60.654 53.045C59.159 50.95 58.156 48.542 57.719 46.001C57.283 43.461 57.424 40.854 58.133 38.377C58.968 35.451 60.278 32.684 62.009 30.187C69.743 19.292 84.029 21.013 91.084 27.592C94.954 31.202 96.314 35.837 96.234 41.486Z' fill='black'/%3E%3C/svg%3E") !important; } .icon-game { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 153 136' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M91.238 20.67C95.722 20.67 99.835 20.64 103.948 20.679C107.618 20.713 111.33 20.5 114.948 20.969C122.694 21.975 127.121 26.546 127.908 34.322C128.418 39.362 128.414 44.453 128.655 49.831C130.554 50.149 132.434 50.569 134.287 51.089C142.568 53.8 148.835 58.745 151.593 67.263C154.333 75.735 152.169 82.754 145.143 88.259C141.075 91.447 136.571 93.813 130.954 94.558C131.364 98.151 131.825 101.617 132.143 105.101C132.545 109.505 132.85 113.918 133.149 118.329C133.189 119.215 133.134 120.102 132.983 120.977C131.771 128.961 127.981 132.464 119.815 132.735C112.008 132.994 104.188 132.879 96.38 133.117C90.7 133.291 87.127 130.786 85.141 125.579C84.121 123.006 82.929 120.505 81.576 118.089C76.939 109.549 66.05 108.95 59.635 114.026C55.19 117.546 52.613 122.251 50.959 127.53C50.717 128.268 50.558 129.032 50.485 129.805C50.29 132.25 48.92 133.743 46.597 134.153C42.552 134.865 38.453 135.944 34.398 135.849C26.83 135.673 19.281 134.774 11.726 134.151C11.064 134.064 10.412 133.917 9.777 133.71C3.51 131.974 1.053 128.955 1.006 122.511C0.948 114.313 1.053 106.114 1.085 97.916C1.089 96.921 1.102 95.925 1.065 94.931C0.95 91.877 2.17 90.518 5.325 90.268C7.874 90.063 10.423 89.839 12.976 89.706C21.095 89.286 27.572 76.037 21.764 67.837C19.415 64.522 15.897 62.825 11.786 62.462C9.901 62.295 8.015 62.132 6.136 61.907C5.392 61.879 4.688 61.56 4.178 61.02C3.668 60.48 3.393 59.763 3.412 59.023C3.408 51.071 2.173 43.086 3.978 35.179C4.15 34.424 4.362 33.675 4.608 32.941C6.401 27.594 10.053 24.283 15.74 23.772C20.279 23.366 24.865 23.444 29.431 23.371C32.87 23.315 36.31 23.359 39.89 23.359C40.086 22.772 40.305 22.16 40.504 21.541C44.02 10.591 51.687 3.735 62.63 1.041' fill='black'/%3E%3C/svg%3E") !important; } .icon-card { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 151 173' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.923 153.398C25.908 153.062 21.26 152.78 16.615 152.431C13.369 152.186 10.3 151.464 7.578 149.459C3.007 146.09 1.569 141.264 1.458 136.007C1.295 128.332 1.36 120.646 1.561 112.971C1.767 105.186 2.087 97.396 2.654 89.63C3.859 73.087 4.38 56.526 4.839 39.947C5.168 31.936 6.641 24.013 9.212 16.42C11.359 9.786 15.676 5.678 22.633 4.535C24.276 4.265 25.922 3.955 27.579 3.82C50.839 1.973 74.073 -0.473 97.463 0.405C102.453 0.593 107.451 0.999 112.406 1.624C118.56 2.399 121.757 5.863 121.976 12.058C122.154 17.136 121.886 22.23 121.81 27.778C122.815 27.778 124.008 27.689 125.186 27.795C128.943 28.132 132.725 28.353 136.439 28.965C142.402 29.951 146.049 33.544 147.63 39.433C148.915 44.499 149.683 49.684 149.923 54.906C150.962 71.956 149.786 88.92 148.223 105.895C147.611 112.529 147.573 119.228 147.435 125.902C147.297 132.576 147.5 139.263 147.258 145.933C147.13 149.71 146.673 153.467 145.891 157.163C144.143 165.312 138.661 170.196 130.151 171.171C124.199 171.921 118.213 172.362 112.215 172.494C94.772 172.676 77.323 172.758 59.882 172.485C54.152 172.396 48.381 171.399 42.739 170.278C36.132 168.965 32.047 163.932 31.31 157.17C31.177 155.969 31.062 154.766 30.923 153.398Z' fill='black'/%3E%3Cpath d='M42.13 105.059H41.704C41.48 112.397 41.255 119.735 41.029 127.073C40.913 130.864 40.693 134.661 40.712 138.451C40.735 142.885 42.638 145.74 46.873 147.045C49.438 147.835 52.147 148.084 54.842 148.143C70.024 148.447 85.216 148.567 100.399 148.805C107.106 148.911 113.778 148.261 120.219 146.312C123.648 145.274 126.013 143.196 126.493 139.362C127.227 133.496 127.742 127.578 127.754 121.673C127.802 98.252 127.591 74.829 127.394 51.408C127.348 46.011 126.471 40.716 124.073 35.794C122.657 32.886 120.337 31.337 117.019 31.19C110.756 30.913 104.487 30.65 98.219 30.571C82.476 30.372 66.73 30.283 50.987 30.088C47.166 30.041 43.271 30.133 39.547 30.765C35.057 31.527 32.428 34.579 31.787 39.229C31.372 42.233 31.163 45.283 31.119 48.319C30.957 62.013 30.903 75.709 30.799 89.404C30.727 98.956 30.576 108.508 30.453 118.059' fill='black'/%3E%3C/svg%3E") !important; } .icon-library { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 165 155' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M163.997 104.308C163.721 92.836 163.504 81.159 163.301 69.871L163.078 58.175C162.986 53.37 161.916 48.487 159.711 42.797C158.316 39.079 155.719 35.933 152.333 33.857C144.037 28.744 135.964 26.126 127.642 25.85C119.904 25.587 112.028 25.574 104.408 25.568C100.903 25.561 97.437 25.555 93.972 25.528C93.65 25.522 93.322 25.502 92.935 25.463L91.898 25.371L92.423 24.478C92.613 24.163 92.764 23.907 92.935 23.658C93.782 22.451 94.628 21.236 95.475 20.028L95.665 19.759C97.752 16.786 99.905 13.721 101.946 10.656C102.803 9.347 103.418 7.896 103.764 6.371C103.941 5.477 103.823 4.55 103.43 3.729C103.036 2.908 102.386 2.236 101.579 1.815C100.817 1.422 99.948 1.287 99.103 1.43C98.258 1.573 97.483 1.987 96.893 2.609C95.968 3.583 95.168 4.667 94.51 5.838L94.202 6.376C90.92 12.001 87.533 17.81 84.311 23.638C83.175 25.686 81.711 26.362 79.559 25.83L79.231 25.751L79.106 25.436C78.837 24.76 78.568 24.078 78.305 23.395C77.577 21.525 76.835 19.608 75.962 17.77C75.14 16.056 74.112 14.447 72.903 12.979C72.567 12.546 72.137 12.195 71.647 11.952C71.156 11.709 70.616 11.58 70.068 11.575C69.564 11.578 69.065 11.676 68.598 11.863C66.76 12.566 65.808 13.996 65.986 15.782C66.177 17.552 66.587 19.291 67.206 20.96C67.842 22.644 68.54 24.316 69.233 25.944L69.518 26.618C70.09 27.974 70.68 29.367 71.173 30.77C71.506 31.794 71.703 32.86 71.758 33.937C71.859 35.765 71.809 37.613 71.76 39.404C71.728 40.492 71.696 41.617 71.696 42.701C71.696 43.266 71.589 43.906 71.109 44.328C70.63 44.753 69.98 44.69 69.432 44.653C65.787 44.401 62.139 44.102 58.594 43.812C53.266 43.375 47.768 42.925 42.322 42.672C35.055 42.338 27.727 42.301 20.65 42.566C16.001 42.741 12.099 44.636 9.155 48.121C6.328 51.47 4.588 55.556 4.155 59.871C3.568 65.754 3.291 71.714 3.022 77.482C2.663 85.205 2.29 93.182 2.253 101.044C2.206 111.259 2.585 121.499 2.949 131.405C3.09 135.202 3.693 139.043 4.719 142.565C6.086 147.259 9.346 150.323 14.199 151.307C21.218 152.733 28.451 153.269 35.513 153.79C46.485 154.6 57.706 155.072 68.6 154.961C82.266 154.822 95.972 154.126 109.262 153.448C114.97 153.157 120.663 152.565 126.308 151.678C136.113 150.135 141.82 143.946 143.13 134.02C143.693 129.771 144.014 125.475 144.324 121.317C144.465 119.42 144.606 117.462 144.785 115.568C145.361 109.325 146.133 102.991 146.88 96.871C147.433 92.328 148.004 87.647 148.478 83.005C149.063 77.269 149.433 71.491 149.79 65.893C150.008 62.487 150.232 58.969 150.5 55.501C150.758 52.132 150.975 50.461 153.067 48.212C154.368 46.815 155.893 45.644 157.577 44.752C159.89 43.508 162.148 42.795 164.041 45.252C165.195 46.751 165.054 48.567 164.963 50.291C164.808 53.187 164.571 56.084 164.341 58.87C163.826 65.045 163.334 70.946 163.334 76.909C163.334 85.952 163.619 95.024 163.997 104.308Z' fill='black'/%3E%3Cpath d='M134.33 91.832C134.33 95.895 134.286 99.959 134.339 104.021C134.392 108.265 133.084 111.839 130.083 114.732C127.547 117.176 124.392 118.351 120.932 119.02C115.253 120.118 109.475 120.398 103.697 120.593C92.014 120.989 80.305 121.012 68.609 121.012C58.591 121.012 48.512 120.627 38.587 119.485C35.17 119.092 31.843 118.177 28.71 116.768C24.626 114.941 22.518 111.647 22.363 107.089C22.132 100.289 21.979 93.477 22.017 86.673C22.085 74.016 22.332 61.345 22.544 49.109L22.596 46.175C22.602 45.927 22.67 45.685 22.795 45.47C22.92 45.255 23.098 45.076 23.313 44.949C23.528 44.821 23.772 44.751 24.022 44.743C24.272 44.735 24.52 44.79 24.742 44.903C27.538 46.278 30.475 46.846 33.481 47.113C43.256 47.981 53.072 48.371 62.879 48.614C77.053 48.965 91.261 48.834 105.437 48.474C113.177 48.277 120.94 47.741 128.468 45.84C130.104 45.428 131.664 44.76 133.091 43.862C133.432 43.649 133.837 43.563 134.237 43.617C134.636 43.672 135.001 43.863 135.27 44.159C135.614 44.539 135.783 45.051 135.831 45.569C136.076 48.208 136.312 50.851 136.399 53.499C136.677 61.853 136.863 70.218 137.039 78.296C137.157 83.76 137.264 89.367 137.358 94.938' fill='black'/%3E%3C/svg%3E") !important; } /* Ceremony-Button ausgeblendet */ .gate-btn.hidden { display: none !important; } /* ================================ DUNKLE SCROLLBARS (überall) ================================ */ * { scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #5a5a5a; } /* Prozent-Text neben Fortschrittsbalken */ .progress-pct { font-family: 'MortysMarmelade', sans-serif; font-size: 1rem; color: var(--primary-light); white-space: nowrap; flex-shrink: 0; font-weight: 700; } /* ================================ VOLUME PANEL — Zettel-Style mit Krakel-Slider ================================ */ .volume-wrap { position: relative; display: inline-flex; align-items: center; } .volume-panel { position: absolute; top: calc(100% + 12px); right: -8px; background: var(--paper, #f5f0e8); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; padding: 0.7rem 1.1rem 0.8rem 1rem; display: flex; align-items: center; gap: 0.7rem; z-index: 500; min-width: 210px; box-shadow: 3px 4px 0 rgba(0,0,0,0.25), 0 0 20px rgba(94, 20, 110, 0.2); white-space: nowrap; transform: rotate(-1deg); transform-origin: top right; } .volume-panel.hidden { display: none; } .volume-panel::after { content: ""; position: absolute; bottom: 6px; left: 10px; right: 10px; height: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='4'%3E%3Cpath d='M0,2 C20,0 40,4 60,2 C80,0 100,4 120,2 C140,0 160,4 180,2 C190,1 196,2 200,2' fill='none' stroke='%235E146E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center; background-size: auto 100%; opacity: 0.4; } .volume-panel-label { font-family: 'MortysMarmelade', sans-serif; font-size: 0.8rem; color: var(--ink, #1a0a1e); flex-shrink: 0; opacity: 0.7; } .volume-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 3px; background: rgba(30, 10, 30, 0.2); border-radius: 2px; outline: none; cursor: pointer; transform: rotate(-0.5deg); } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50% 40% 50% 40%; background: var(--primary, #5E146E); cursor: pointer; box-shadow: 1px 1px 0 rgba(0,0,0,0.3), 0 0 6px rgba(94, 20, 110, 0.5); border: 1.5px solid rgba(0,0,0,0.15); } .volume-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary, #5E146E); cursor: pointer; border: 1.5px solid rgba(0,0,0,0.15); } .volume-pct { font-family: 'MortysMarmelade', sans-serif; font-size: 0.85rem; color: var(--primary, #5E146E); min-width: 2.8rem; text-align: right; flex-shrink: 0; font-weight: 700; }