/* ============================================================================ * style.css — Aussehen aller Menüs und des HUD (kein 3D) * ---------------------------------------------------------------------------- * Farben/Schriften zentral in :root. Cartoon-"Sticker"-Look: * dicke dunkle Ränder + versetzter Schatten. * Handicap-Klassen am : .hc-blind (Texte verschwimmen), .hc-deaf, .hc-mute * ========================================================================== */ :root { color-scheme: dark; --navy: #14206a; --navy-2: #2f66f0; --ink: #0c1440; --sky: #7aa2ff; --sun: #2f66f0; --butter: #ffc62e; --ice: #f4fbff; --coral: #ff4d5e; --mint: #3ddc84; --lilac: #8f7bff; --text: #f4fbff; --muted: #a9b8dd; --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; --body: "Nunito", "Segoe UI", system-ui, sans-serif; --r: 18px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); font-weight: 800; overflow: hidden; } #game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } [hidden] { display: none !important; } /* ---------- Bildschirme ---------- */ .screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 10; overflow-y: auto; } .screen.dim { background: rgba(14, 22, 48, 0.72); backdrop-filter: blur(3px); z-index: 30; } #loading { background: radial-gradient(circle at 50% 40%, #2f66f0, #0c1440); z-index: 50; text-align: center; } #menu { background: linear-gradient(180deg, rgba(14,22,48,0.15) 0%, rgba(14,22,48,0.1) 50%, rgba(14,22,48,0.75) 100%); } /* ---------- Logo "FLYING BLIND!" ---------- */ .logo { position: relative; display: grid; justify-items: center; line-height: 0.85; padding: 30px 40px 0; } .logo-flying { font-family: var(--display); font-size: clamp(34px, 6vw, 72px); color: var(--butter); letter-spacing: 0.18em; transform: rotate(-5deg) translateX(-18%); -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill; text-shadow: 0 5px 0 var(--navy); animation: floaty 4s ease-in-out infinite; } .logo-blind { font-family: var(--display); font-size: clamp(76px, 15vw, 190px); color: #fff; letter-spacing: 0.02em; transform: rotate(-3deg); -webkit-text-stroke: 6px var(--navy); paint-order: stroke fill; text-shadow: 0 9px 0 var(--navy), 0 16px 28px rgba(12,20,64,0.45); background: linear-gradient(180deg, #ffffff 55%, #cfe0ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .logo-blind em { font-style: normal; -webkit-text-fill-color: var(--butter); } .logo-trail { position: absolute; left: -4%; top: 6%; width: 108%; height: auto; opacity: 0.9; } .logo-plane { position: absolute; right: -2%; top: -4%; width: clamp(50px, 8vw, 96px); height: clamp(50px, 8vw, 96px); color: #fff; filter: drop-shadow(0 4px 0 var(--navy)); transform: rotate(-18deg); animation: planeBob 3s ease-in-out infinite; } @keyframes floaty { 50% { transform: rotate(-5deg) translate(-18%, -6px); } } @keyframes planeBob { 50% { transform: rotate(-12deg) translateY(-8px); } } .logo-mini { font-family: var(--display); font-size: 56px; color: #fff; -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill; } .menu-wrap { display: grid; justify-items: center; gap: 22px; text-align: center; margin-top: -4vh; } .tagline { font-size: clamp(17px, 2.3vw, 24px); max-width: 40ch; margin: 0; text-shadow: 0 2px 0 var(--navy); text-wrap: balance; letter-spacing: 0.02em; } .tagline b { color: var(--butter); } .menu-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .version { font-size: 13px; color: var(--ice); opacity: 0.8; margin: 0; text-shadow: 0 1px 0 var(--navy); } /* ---------- Buttons ---------- */ .btn { font-family: var(--display); font-size: 20px; letter-spacing: 0.02em; color: var(--navy); background: var(--ice); border: 3px solid var(--navy); border-radius: 14px; padding: 10px 22px; cursor: pointer; box-shadow: 0 5px 0 var(--navy); transition: transform 0.08s, box-shadow 0.08s, background 0.15s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--navy); } .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--navy); } .btn:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; } .btn.primary { background: var(--butter); } .btn.big { font-size: 26px; padding: 14px 34px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: 0 5px 0 var(--navy); } .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ---------- Panels ---------- */ .panel { background: var(--ice); color: var(--navy); border: 4px solid var(--navy); border-radius: 26px; box-shadow: 0 10px 0 var(--navy); padding: 26px clamp(16px, 3vw, 34px); width: min(960px, 100%); } .panel h1 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 42px); margin: 0; line-height: 1.05; text-wrap: balance; } .panel h2 { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 0 0 10px; } .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: var(--sun); font-weight: 900; } .muted { color: var(--muted); } .panel .muted { color: #5b6a93; } .small { font-size: 13px; } /* ---------- Lobby ---------- */ .lobby-panel { display: grid; gap: 20px; max-height: calc(100vh - 32px); overflow-y: auto; } .lobby-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; } .room { background: var(--navy); color: var(--butter); padding: 8px 14px; border-radius: 12px; font-size: 14px; } .room b { font-family: var(--display); font-size: 22px; letter-spacing: 0.2em; margin-left: 6px; font-weight: 400; } .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .slot { border: 3px solid var(--navy); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; background: #fff; min-height: 84px; } .slot.empty { border-style: dashed; background: transparent; color: #7a88ae; } .slot .ava { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; font-size: 26px; position: relative; overflow: hidden; } .slot .ava::after { content: ""; position: absolute; width: 34px; height: 36px; background: #fff; border-radius: 50%; bottom: -8px; } .slot .ava span { position: relative; z-index: 1; margin-top: -14px; } .slot.empty .ava { background: #dfe6f5; } .slot.empty .ava::after { display: none; } .slot input { font: inherit; font-size: 17px; border: 0; border-bottom: 2px solid var(--navy-2); background: transparent; width: 100%; color: var(--navy); padding: 2px 0; } .slot input:focus { outline: none; border-color: var(--sun); } .slot .hc-tag { font-size: 13px; margin-top: 4px; } .dots::after { content: ""; animation: dots 1.4s steps(4) infinite; } @keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } .hc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .hc-card { text-align: left; font: inherit; color: var(--navy); background: #fff; border: 3px solid var(--navy); border-radius: 18px; padding: 14px; cursor: pointer; display: grid; gap: 6px; box-shadow: 0 5px 0 var(--navy); transition: transform 0.1s, box-shadow 0.1s; position: relative; } .hc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--navy); } .hc-card:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; } .hc-card.selected { background: var(--hc); color: var(--navy); } .hc-card .hc-icon { font-size: 34px; line-height: 1; } .hc-card .hc-name { font-family: var(--display); font-size: 26px; font-weight: 400; } .hc-card .can { font-size: 14px; } .hc-card .cant { font-size: 14px; opacity: 0.8; } .hc-card .can::before { content: "✔ "; color: #1e9e5a; } .hc-card .cant::before { content: "✖ "; color: var(--coral); } .hc-card.selected .cant::before, .hc-card.selected .can::before { color: var(--navy); } .hc-card .picked { position: absolute; top: 10px; right: 12px; font-size: 12px; background: var(--navy); color: #fff; border-radius: 8px; padding: 2px 8px; } .briefing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--navy); color: var(--ice); border-radius: 16px; padding: 14px 16px; } .briefing .label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sky); } .briefing b { font-size: 15px; } .lobby-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .lobby-foot p { margin: 0; max-width: 46ch; } @media (max-width: 760px) { .slots, .hc-cards { grid-template-columns: 1fr; } .briefing { grid-template-columns: 1fr 1fr; } } /* ---------- HUD ---------- */ #hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; } #crosshair { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(28,37,65,0.7); transition: transform 0.1s; } #crosshair.active { transform: scale(1.8); background: var(--butter); } #hud-tl { position: absolute; left: 16px; top: 16px; max-width: min(420px, 60vw); display: grid; gap: 8px; } #hud-phase { font-family: var(--display); font-size: 22px; text-shadow: 0 2px 0 var(--navy); } #hud-obj { background: rgba(28,37,65,0.82); border: 2px solid var(--butter); border-radius: 12px; padding: 8px 12px; font-size: 15px; line-height: 1.35; } #hud-obj:empty { display: none; } #hud-obj b { color: var(--butter); } #hud-tr { position: absolute; right: 16px; top: 16px; display: grid; justify-items: end; gap: 6px; text-align: right; } #hud-hc { background: var(--ice); color: var(--navy); border: 3px solid var(--navy); border-radius: 12px; padding: 6px 12px; font-size: 16px; box-shadow: 0 3px 0 var(--navy); } #hud-score { font-family: var(--display); font-size: 20px; text-shadow: 0 2px 0 var(--navy); } #toasts { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; width: min(680px, 90vw); } .toast { background: var(--ice); color: var(--navy); border: 3px solid var(--navy); border-radius: 14px; padding: 8px 16px; font-size: 17px; box-shadow: 0 4px 0 var(--navy); animation: pop 0.25s ease-out; text-align: center; } .toast.small { font-size: 14px; padding: 5px 12px; } .toast.ok { background: #c9f7dc; } .toast.warn { background: #ffe3a8; } .toast.alarm { background: var(--coral); color: #fff; animation: pop 0.25s ease-out, shake 0.4s 0.25s 2; } .toast.out { opacity: 0; transform: translateY(-8px); transition: 0.4s; } @keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } #prompt { position: absolute; left: 50%; top: calc(50% + 28px); transform: translateX(-50%); text-align: center; font-size: 16px; text-shadow: 0 2px 0 var(--navy), 0 0 8px rgba(0,0,0,0.6); white-space: nowrap; } #prompt .key { display: inline-block; background: var(--butter); color: var(--navy); border-radius: 6px; padding: 0 7px; margin-right: 6px; font-weight: 900; box-shadow: 0 2px 0 var(--navy); } #prompt .verb { color: var(--butter); display: block; font-size: 14px; margin-top: 3px; } #prompt .verb.dim { color: var(--ice); opacity: 0.85; margin-top: 60px; } #subtitles { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; width: min(760px, 92vw); } .sub { background: rgba(14,22,48,0.82); border-radius: 10px; padding: 6px 14px; font-size: 18px; text-align: center; } .sub b { color: var(--sky); } #carry { position: absolute; left: 16px; bottom: 16px; background: rgba(28,37,65,0.85); border-radius: 12px; padding: 8px 12px; font-size: 15px; } #carry:empty { display: none; } #help { position: absolute; right: 16px; top: 120px; background: rgba(28,37,65,0.88); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.6; max-width: 280px; opacity: 0.92; } #help kbd, .keys kbd { font-family: var(--body); font-weight: 900; background: var(--ice); color: var(--navy); border-radius: 6px; padding: 1px 7px; border-bottom: 3px solid #9aa7c9; font-size: 0.9em; } /* Gesten-Rad */ #emote-wheel { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: rgba(14,22,48,0.7); border: 4px solid var(--ice); } #emote-wheel .em { position: absolute; width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 12px; background: var(--navy-2); border: 3px solid transparent; line-height: 1.1; } #emote-wheel .em span { font-size: 32px; display: block; } #emote-wheel .em.sel { background: var(--butter); color: var(--navy); border-color: var(--ice); transform: scale(1.12); } #emote-pop { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 80px; animation: pop 0.3s; text-align: center; } #emote-pop small { display: block; font-size: 18px; } /* Handbuch (gehalten, links unten, blockiert nicht) */ #manual { position: fixed; left: 16px; bottom: 60px; z-index: 6; pointer-events: none; animation: bookIn 0.3s ease-out; } @keyframes bookIn { from { transform: translateY(40px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } } .book { background: #fff8e1; color: var(--navy); border: 4px solid var(--navy); border-radius: 10px 22px 22px 10px; box-shadow: 0 8px 0 var(--navy), inset 12px 0 0 #2f66f0; padding: 14px 18px 12px 30px; width: min(400px, 44vw); transform: rotate(-2deg); } .book p { margin: 4px 0 8px; font-size: 13px; } .book-head { font-family: var(--display); font-size: 22px; } .mt-row { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 2px dashed #e0d6b8; } .mt-sym { font-size: 30px; text-align: center; } .mt-seq { display: flex; gap: 5px; flex-wrap: wrap; } .mt-seq span { border: 3px solid var(--navy); border-radius: 9px; padding: 2px 7px; font-size: 13px; color: var(--navy); } /* Pause / Steuerung / Ergebnis */ .pause-panel { width: min(420px, 100%); display: grid; gap: 14px; text-align: center; } .controls-panel { width: min(720px, 100%); display: grid; gap: 14px; } .keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 15px; } @media (max-width: 600px) { .keys { grid-template-columns: 1fr; } } .result-panel { width: min(720px, 100%); display: grid; gap: 14px; text-align: center; max-height: calc(100vh - 32px); overflow-y: auto; } .stars { font-size: 52px; letter-spacing: 6px; color: var(--butter); -webkit-text-stroke: 2px var(--navy); } .stars .off { color: #dfe6f5; } .pax-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .pax { border: 3px solid var(--navy); border-radius: 12px; padding: 8px; font-size: 13px; background: #fff; } .pax .em { font-size: 28px; display: block; } .res-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 14px; } .res-stats span { background: var(--navy); color: var(--ice); border-radius: 10px; padding: 4px 10px; font-variant-numeric: tabular-nums; } /* ---------- Handicap-Effekte auf HTML ---------- */ body.hc-blind .blurrable, body.hc-blind #manual .book { filter: blur(1.6px); animation: drunkText 3s ease-in-out infinite; } @keyframes drunkText { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(3px,-2px) rotate(0.6deg); } 66% { transform: translate(-3px,2px) rotate(-0.6deg); } } body.hc-blind #prompt .verb { filter: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- Währung ---------- */ .coin { width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex: none; } #hud-pax { display: flex; gap: 6px; font-size: 14px; } #hud-pax .pm { background: rgba(20,32,106,0.8); border-radius: 10px; padding: 2px 8px; } #hud-pax .g { box-shadow: inset 0 -3px 0 #3ddc84; } #hud-pax .y { box-shadow: inset 0 -3px 0 #ffc62e; } #hud-pax .r { box-shadow: inset 0 -3px 0 #ff4d5e; } /* ---------- Reisepass ---------- */ .pp-screen { background: radial-gradient(circle at 50% 30%, rgba(47,102,240,0.55), rgba(12,20,64,0.9)); align-items: start; } .pp-stage { width: min(1120px, 100%); display: grid; gap: 14px; justify-items: center; padding-block: 8px 24px; } .pp-book { position: relative; width: 100%; perspective: 2200px; transform: translateY(60px) scale(0.86); opacity: 0; transition: transform 0.6s cubic-bezier(.2,1.3,.4,1), opacity 0.3s; } .pp-book.open { transform: none; opacity: 1; } .pp-pages { display: grid; grid-template-columns: 1fr 1fr; background: #fbf6e9; color: var(--navy); border: 4px solid var(--navy); border-radius: 22px; box-shadow: 0 12px 0 var(--navy), 0 30px 60px rgba(0,0,0,0.35); overflow: hidden; position: relative; background-image: repeating-radial-gradient(circle at 20% 40%, rgba(47,102,240,0.05) 0 2px, transparent 2px 9px), repeating-radial-gradient(circle at 80% 70%, rgba(255,198,46,0.07) 0 2px, transparent 2px 11px); } .pp-pages::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; margin-left: -13px; background: linear-gradient(90deg, transparent, rgba(20,32,106,0.12), transparent); pointer-events: none; } .pp-page { padding: 20px 26px; display: grid; gap: 12px; align-content: start; min-height: 330px; } .pp-left { opacity: 0; transition: opacity 0.4s 0.45s; } .pp-book.open .pp-left { opacity: 1; } .pp-cover { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform: rotateY(0deg); transition: transform 0.9s cubic-bezier(.5,0,.3,1) 0.15s; z-index: 3; backface-visibility: hidden; } .pp-book.open .pp-cover { transform: rotateY(-178deg); } .pp-cover-inner { height: 100%; border-radius: 0 22px 22px 0; background: linear-gradient(135deg, #2f66f0, #14206a); border: 4px solid var(--navy); display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--butter); box-shadow: inset 0 0 0 10px rgba(255,198,46,0.25); } .pp-crest svg { width: 120px; } .pp-cover-title { font-family: var(--display); font-size: 54px; letter-spacing: 0.25em; } .pp-cover-sub { font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: #cfe0ff; } .pp-cover-chip { width: 64px; height: 44px; border-radius: 8px; border: 3px solid var(--butter); margin-top: 12px; } .pp-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; } .pp-head h2 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0; } .pp-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #2f66f0; font-weight: 900; } .pp-coins { display: flex; align-items: center; gap: 6px; background: var(--navy); color: var(--butter); border-radius: 14px; padding: 6px 12px; font-size: 20px; } .pp-coins span { font-size: 11px; color: #cfe0ff; letter-spacing: 0.08em; text-transform: uppercase; } .pp-crew { display: grid; gap: 10px; } .pp-member { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; border-bottom: 2px dashed #e2d7b8; padding-bottom: 10px; } .pp-member.empty { opacity: 0.6; } .pp-photo { width: 58px; height: 70px; border-radius: 8px; border: 3px solid var(--navy); background: linear-gradient(#cfe0ff, #fff); display: grid; place-items: center; font-size: 34px; } .pp-name-in { font: inherit; font-size: 19px; font-weight: 900; border: 0; border-bottom: 2px solid var(--navy-2); background: transparent; color: var(--navy); width: 100%; padding: 2px 0; font-family: "Special Elite", var(--body); } .pp-name-in:focus { outline: none; border-color: var(--butter); } .pp-name { font-size: 17px; font-weight: 900; } .pp-sub { font-size: 13px; color: #5b6a93; } .pp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .pp-chip { font: inherit; font-size: 14px; border: 3px solid var(--navy); border-radius: 12px; background: #fff; color: var(--navy); padding: 4px 10px; cursor: pointer; box-shadow: 0 3px 0 var(--navy); } .pp-chip.on { background: var(--hc); } .pp-chip:disabled { opacity: 0.4; cursor: not-allowed; } .pp-chip:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; } .pp-note { margin: 0; font-size: 14px; min-height: 2.6em; } .pp-note.flash { animation: shake 0.3s 2; } .pp-stamps { border-top: 2px dashed #e2d7b8; padding-top: 10px; } .pp-stamp-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .mini-stamp { width: 52px; height: 52px; border-radius: 50%; border: 3px dashed #c9bfa0; display: grid; place-items: center; font-family: var(--display); font-size: 15px; color: #c9bfa0; transform: rotate(var(--rot)); } .mini-stamp.got { border: 3px double #2f66f0; color: #2f66f0; background: rgba(47,102,240,0.06); } .pp-tabs { display: flex; gap: 8px; } .pp-tab { font-family: var(--display); font-size: 18px; border: 3px solid var(--navy); border-radius: 12px 12px 0 0; background: #efe6cc; color: var(--navy); padding: 6px 18px; cursor: pointer; border-bottom-width: 0; } .pp-tab.active { background: var(--butter); } .pp-tabpage { display: grid; gap: 10px; align-content: start; } .pp-routeline { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; font-family: var(--display); font-size: 40px; } .pp-routeline i { height: 4px; background: repeating-linear-gradient(90deg, var(--navy) 0 10px, transparent 10px 18px); } .pp-plane { width: 36px; height: 36px; color: #2f66f0; } .pp-cities { display: flex; justify-content: space-between; font-size: 14px; margin-top: -8px; } .pp-desc { margin: 0; font-size: 14px; color: #4a5680; } .pp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .pp-facts div { background: #fff; border: 2px solid #e2d7b8; border-radius: 10px; padding: 6px 8px; display: grid; } .pp-facts span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5b6a93; } .pp-facts b { font-size: 16px; } .stars-s { color: #ffb400; letter-spacing: 1px; } .stars-s .off { color: #e2d7b8; } .pp-celeb { margin: 0; background: linear-gradient(90deg, #fff4c9, #ffe7f2); border-radius: 10px; padding: 8px 10px; font-size: 14px; } .pp-plan { margin: 0; font-size: 15px; background: #eaf0ff; border-radius: 10px; padding: 8px 10px; } .pp-plan.ok { background: #d9f7e6; } .pp-right { position: relative; } .pp-result { position: absolute; inset: 0; background: #fbf6e9; padding: 22px 26px; display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; z-index: 2; animation: pop 0.3s; } .big-stamp { margin: 6px 0 16px; font-family: var(--display); font-size: 46px; line-height: 0.95; padding: 10px 24px; border: 7px double currentColor; border-radius: 16px; transform: rotate(-10deg); animation: stampIn 0.45s cubic-bezier(.2,1.6,.4,1) both; display: grid; } .big-stamp small { font-size: 22px; letter-spacing: 0.2em; } .big-stamp.ok { color: #1e9e5a; } .big-stamp.bad { color: #e03a4f; } @keyframes stampIn { from { transform: rotate(-10deg) scale(3); opacity: 0; } to { transform: rotate(-10deg) scale(1); opacity: 0.92; } } .pp-msg { font-family: "Special Elite", var(--body); font-size: 16px; line-height: 1.45; max-width: 44ch; margin: 4px 0 0; } .pp-earn { width: 100%; display: grid; gap: 4px; font-size: 14px; } .pp-earn div { display: flex; justify-content: space-between; border-bottom: 1px dashed #e2d7b8; padding: 2px 0; } .pp-earn .sum { font-size: 18px; border: 0; } .pp-coins-big { font-family: var(--display); font-size: 26px; display: flex; align-items: center; gap: 8px; } .up-list { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; padding-right: 4px; } .up { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 2px solid #e2d7b8; border-radius: 12px; padding: 8px 10px; } .up.own { background: #e6f9ee; border-color: #9fe0bb; } .up.locked { opacity: 0.55; } .up-ic { font-size: 26px; text-align: center; } .up-b { display: grid; font-size: 13px; } .up-b b { font-size: 15px; } .up-b span { color: #5b6a93; } .up-tag { font-size: 12px; font-weight: 900; color: #1e9e5a; } .small-btn { font-size: 15px; padding: 6px 12px; box-shadow: 0 3px 0 var(--navy); display: inline-flex; align-items: center; gap: 4px; } .small-btn.danger { background: #ff4d5e; color: #fff; } .pp-map { width: 100%; max-height: 0; overflow: hidden; position: relative; transform-origin: top center; transform: scaleY(0.2); opacity: 0; transition: max-height 0.8s cubic-bezier(.3,1.2,.4,1), transform 0.8s cubic-bezier(.3,1.2,.4,1), opacity 0.3s; border-radius: 18px; } .pp-map.unfolded { max-height: 700px; transform: none; opacity: 1; } .pp-map canvas { display: block; width: 100%; height: auto; border: 4px solid var(--navy); border-radius: 18px; box-shadow: 0 10px 0 var(--navy); } .pp-map-lock { display: none; } .pp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media (max-width: 820px) { .pp-pages { grid-template-columns: 1fr; } .pp-cover { left: 0; width: 100%; } .pp-facts { grid-template-columns: 1fr 1fr; } .pp-pages::after { display: none; } } /* ---------- Settings ---------- */ .settings-panel { width: min(560px, 100%); display: grid; gap: 14px; } .set-grid { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; font-size: 16px; } .set-grid select, .set-grid input[type=range] { font: inherit; font-size: 15px; width: 100%; accent-color: #2f66f0; } .set-grid select { border: 3px solid var(--navy); border-radius: 10px; padding: 4px 8px; background: #fff; color: var(--navy); } .set-grid input[type=checkbox] { width: 22px; height: 22px; accent-color: #2f66f0; justify-self: start; } .set-controls summary { cursor: pointer; font-weight: 900; } .set-controls .keys { margin-top: 10px; } .set-danger { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; } /* Warnsystem-Banner (GPWS) */ #gpws-banner { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 12px 26px; border-radius: 18px; background: #e0142c; color: #fff; font-family: var(--display); font-size: clamp(16px, 2.4vw, 28px); letter-spacing: 0.5px; border: 4px solid #fff; max-width: 88vw; text-align: center; box-shadow: 0 6px 0 rgba(20,32,106,0.5); animation: gpwsBlink 0.5s steps(2) infinite; } #gpws-banner.low { background: #ff9d00; } @keyframes gpwsBlink { 50% { filter: brightness(1.45); transform: translateX(-50%) scale(1.04); } } /* Flugzeug im Reisepass (anklickbar) */ .pp-planebtn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 4px; padding: 6px 12px; border: 3px dashed rgba(20,32,106,0.35); border-radius: 16px; background: rgba(255,255,255,0.55); cursor: pointer; font: 800 14px var(--body, Nunito), sans-serif; color: #14206a; text-align: left; transition: transform .15s, background .15s; } .pp-planebtn:hover { transform: scale(1.02); background: #fff6d6; border-color: #ffc62e; } .pp-planesvg { width: 100%; height: auto; display: block; } .pp-planesvg.small { width: 190px; flex: none; pointer-events: none; } .pp-planewrap { background: repeating-linear-gradient(45deg, #eef3ff 0 14px, #e3ebff 14px 28px); border-radius: 18px; padding: 6px 10px; margin: 8px 0; border: 3px solid rgba(20,32,106,0.15); } .pp-part { cursor: pointer; transition: filter .15s; } .pp-part:hover { filter: drop-shadow(0 0 6px #ffc62e) brightness(1.08); } .pp-part.sel { filter: drop-shadow(0 0 5px #ffc62e) drop-shadow(0 0 10px #ffc62e); } .pp-part.ghost { animation: ghostPulse 1.4s ease-in-out infinite; } @keyframes ghostPulse { 50% { opacity: .55; } } .pp-partbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .pp-partbtn { border: 2px solid #14206a; background: #fff; color: #14206a; border-radius: 999px; padding: 4px 10px; font: 800 13px Nunito, sans-serif; cursor: pointer; } .pp-partbtn.on { background: #ffc62e; } .up.mystery { opacity: .75; filter: grayscale(.4); } /* Titelbild */ #title { background: transparent; place-items: start center; padding-top: 3vh; } .title-wrap { text-align: center; pointer-events: none; } #title .logo { transform: scale(0.72); transform-origin: top center; margin-bottom: -40px; } #title .tagline { font-size: clamp(13px, 1.5vw, 18px); } .title-start { position: fixed; bottom: 6vh; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: clamp(20px, 3vw, 34px); color: #14206a; background: #ffc62e; border: 5px solid #fff; border-radius: 999px; padding: 12px 34px; box-shadow: 0 8px 0 #14206a; cursor: pointer; animation: startPulse 1.2s ease-in-out infinite; } @keyframes startPulse { 50% { transform: translateX(-50%) scale(1.06); } } #title-tags { position: fixed; inset: 0; pointer-events: none; z-index: 5; } #title-tags .ttag { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-size: clamp(13px, 1.6vw, 20px); color: #fff; padding: 4px 14px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(20,32,106,.6); white-space: nowrap; } #menu { background: linear-gradient(90deg, rgba(14,22,48,0.55) 0%, rgba(14,22,48,0.1) 55%, rgba(14,22,48,0) 100%); place-items: center start; padding-left: 5vw; } @media (max-width: 800px) { #menu { place-items: center; padding-left: 16px; background: rgba(14,22,48,0.45); } } /* Checklisten-Brett in der Flosse */ #clboard { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 6; } #clboard .book { background: #fff8e1; color: #2a1f5c; border-radius: 22px; padding: 14px 18px; width: min(360px, 42vw); box-shadow: 0 10px 0 rgba(20,32,106,.45); border: 4px solid #2f66f0; } #clboard h4 { margin: 10px 0 4px; font-family: var(--display); color: #2f66f0; font-size: 18px; } #clboard .cl { font-weight: 800; font-size: 14px; padding: 3px 0; } #clboard .cl.done { color: #9a95b0; text-decoration: line-through; } #clboard .cl.next { color: #e0142c; } /* Skills-Tab */ .sk-head { display: flex; gap: 14px; align-items: center; margin: 8px 0 12px; } .sk-head h3 { margin: 0 0 6px; } .sk-badge { width: 68px; height: 68px; border-radius: 50%; background: #ffc62e; border: 4px solid #14206a; display: grid; place-items: center; font-size: 18px; line-height: 1; box-shadow: 0 4px 0 #14206a; } .sk-badge b { font-family: var(--display); font-size: 28px; color: #14206a; } .sk-bar { height: 14px; width: min(320px, 55vw); border-radius: 99px; background: rgba(20,32,106,.15); overflow: hidden; border: 2px solid #14206a; } .sk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffc62e, #ff8a3d); } .sk-list { display: grid; gap: 6px; } .sk-lv { display: flex; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(20,32,106,.06); opacity: .7; } .sk-lv.got { opacity: 1; background: #fff6d6; border: 2px solid #ffc62e; } .sk-num { font-weight: 900; min-width: 70px; color: #14206a; } .sk-ups { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .sk-ups span { background: #fff; border: 2px solid #14206a; border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 800; } .pp-xp { margin-top: 8px; font-weight: 900; color: #14206a; } /* Umkleide (Vorlobby) */ .pp-member { position: relative; } .pp-wardrobe { position: absolute; right: 0; top: 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; z-index: 3; } .pp-wr-btn { font-size: 20px; background: #fff6d6; border: 3px solid #14206a; border-radius: 12px; padding: 4px 8px; cursor: pointer; box-shadow: 0 3px 0 #14206a; } .pp-wr-btn:hover { background: #ffc62e; } .pp-wr-list { display: flex; gap: 6px; background: #fff; border: 3px solid #14206a; border-radius: 14px; padding: 6px; box-shadow: 0 6px 0 rgba(20,32,106,.4); } .pp-wr-opt { font-size: 26px; background: #eef3ff; border: 2px solid transparent; border-radius: 10px; padding: 4px 8px; cursor: pointer; display: grid; place-items: center; line-height: 1; } .pp-wr-opt small { font: 800 11px Nunito, sans-serif; color: #14206a; margin-top: 3px; } .pp-wr-opt.on { border-color: #14206a; background: #ffc62e; } .pp-wr-btn:disabled { opacity: .45; cursor: default; } /* v0.9 Airline umbenennen */ .rename-dlg{position:fixed;inset:0;display:grid;place-items:center;background:rgba(10,16,50,.55);z-index:80} .rename-dlg[hidden]{display:none} .rename-card{background:#fff;color:#14206a;border-radius:22px;padding:22px 26px;min-width:min(420px,90vw);box-shadow:0 12px 0 #0c1d7a} .rename-card h3{margin:0 0 12px;font-family:"Lilita One",sans-serif;font-size:26px} .rename-card input{width:100%;box-sizing:border-box;font:800 22px Nunito,sans-serif;padding:10px 14px;border:3px solid #2f66f0;border-radius:14px} .rename-row{display:flex;gap:10px;margin-top:14px} /* v0.11 Mehrspieler-Lobby im Reisepass */ .pp-lobby{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin:0 0 10px;border-radius:14px;background:rgba(47,102,240,.1);border:2px dashed rgba(47,102,240,.45);font-size:14px} .pp-lobby .muted{font-size:13px} .pp-lb-btn{font:800 14px Nunito,sans-serif;border:0;border-radius:12px;padding:7px 12px;background:#ffc62e;color:#14206a;cursor:pointer;box-shadow:0 3px 0 #14206a} .pp-lb-btn.ghost{background:#fff;border:2px solid #2f66f0} .pp-lb-or{font-size:12px;opacity:.7} #lb-code{width:70px;font:900 16px Nunito,sans-serif;text-transform:uppercase;letter-spacing:.15em;padding:6px 8px;border:2px solid #2f66f0;border-radius:10px;text-align:center} .pp-lb-code{font-size:18px;letter-spacing:.12em;background:#14206a;color:#ffc62e;padding:1px 8px;border-radius:8px} .menu-net{margin-top:10px;font:700 13px Nunito,sans-serif;color:#fff;background:rgba(12,29,122,.55);padding:8px 12px;border-radius:12px;max-width:460px;line-height:1.5} .menu-net input{width:62px;font:900 14px Nunito,sans-serif;text-transform:uppercase;text-align:center;border-radius:8px;border:2px solid #ffc62e;padding:3px} /* v0.19 Hangar: Flugzeug per Drag & Drop ausbauen */ .hg-wrap{background:repeating-linear-gradient(45deg,#eef3ff 0 14px,#e3ebff 14px 28px);border:3px solid rgba(20,32,106,.15);border-radius:18px;padding:12px 8px;margin:8px 0;overflow-x:auto} .hg-plane{display:flex;align-items:stretch;gap:3px;min-width:max-content;height:66px} .hg-plane>div{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px;line-height:1;border:3px solid #14206a;background:#fff;min-width:44px;padding:0 4px;border-radius:8px;user-select:none} .hg-plane small{font:800 10px Nunito,sans-serif;color:#14206a;margin-top:3px;white-space:nowrap} .hg-tail{background:#fff!important;border-radius:26px 6px 6px 26px!important;min-width:34px!important;color:#2f66f0} .hg-nose{background:#2f66f0!important;border-radius:6px 34px 34px 6px!important;min-width:60px!important} .hg-kitchen{background:#fff6d6!important} .hg-base{background:#fff!important} .hg-mod{cursor:grab;background:#fff!important} .hg-mod.hg-vip{background:#ffc62e!important} .hg-mod:active{cursor:grabbing} .hg-drop{border-style:dashed!important;background:rgba(255,255,255,.55)!important;cursor:pointer;transition:transform .12s,background .12s} .hg-kitchen.hg-drop{border-style:solid!important} .hg-wrap.picking .hg-drop{background:#fff6d6!important;border-color:#ffc62e!important;animation:hgPulse 1s ease-in-out infinite} .hg-drop.over{transform:scale(1.08);background:#ffc62e!important} @keyframes hgPulse{50%{transform:scale(1.05)}} .hg-wingrow{display:flex;justify-content:center;margin-top:8px} .hg-wingrow .hg-drop{border:3px dashed #14206a;border-radius:10px;padding:4px 16px;display:flex;flex-direction:column;align-items:center;font-size:20px;min-width:150px} .hg-wingrow small{font:800 11px Nunito,sans-serif} .hg-cards{display:grid;gap:8px} .hg-card{display:flex;gap:10px;align-items:center;background:#fff;border:3px solid #14206a;border-radius:14px;padding:8px 10px;cursor:grab;box-shadow:0 4px 0 #14206a} .hg-card.pick{background:#fff6d6;border-color:#ffc62e} .hg-card.blocked{opacity:.55;cursor:not-allowed;box-shadow:none} .hg-ic{font-size:28px} .hg-b{flex:1;display:flex;flex-direction:column;font-size:13px} .hg-b span{color:#4a5288;font-size:12px} .hg-price{display:flex;flex-direction:column;align-items:flex-end;font:900 16px Nunito,sans-serif;color:#14206a;min-width:92px;text-align:right} .hg-price small{font:700 10px Nunito,sans-serif;color:#4a5288} /* ===== v0.20 HANGAR: Flugzeug von oben mit verschiebbaren Abteilen (passport.js planeSVG/renderHangar) ===== */ .pp-pages.hangar-wide{grid-template-columns:1fr} .pp-pages.hangar-wide .pp-left{display:none} .pp-pages.hangar-wide::after{display:none} .hg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap} .hg-head h3{margin:0} .pp-planesvg.big{width:100%;min-width:640px;height:auto;display:block;touch-action:none} .hg-wrap{padding:4px 6px!important} .pp-planesvg .hg-lbl{font:900 12px Nunito,sans-serif;fill:#14206a} .pp-planesvg .hg-sub{font:800 10px Nunito,sans-serif;fill:#4a5288} .pp-planesvg .hg-pill rect{fill:#fff;stroke:#14206a;stroke-width:2} .pp-planesvg .hg-pill text{font:900 11px Nunito,sans-serif;fill:#14206a} .pp-planesvg .hg-sec{cursor:grab} .pp-planesvg .hg-sec-frame{stroke:#14206a;stroke-width:2.5;transition:stroke .12s} .pp-planesvg .hg-sec:hover .hg-sec-frame{stroke:#ffc62e;stroke-width:4} .pp-planesvg .hg-sec:hover .hg-pill rect{fill:#fff6d6} .pp-planesvg .hg-sec.sel .hg-sec-frame{stroke:#ffc62e;stroke-width:6} .pp-planesvg .hg-sec.sel .hg-pill rect{fill:#ffc62e} .pp-planesvg .hg-sec.sel{filter:drop-shadow(0 0 6px rgba(255,198,46,.9))} .pp-planesvg .hg-fix{cursor:not-allowed} .pp-planesvg .hg-gap{display:none;cursor:pointer} .hg-wrap.picking .pp-planesvg .hg-gap{display:inline} .pp-planesvg .hg-gap-hit{fill:transparent} .pp-planesvg .hg-gap-bar{fill:#ffc62e;stroke:#14206a;stroke-width:1.5;animation:hgGap 0.9s ease-in-out infinite} .pp-planesvg .hg-gap-dot{fill:#ffc62e;stroke:#14206a;stroke-width:2} .pp-planesvg .hg-gap-plus{font:900 16px Nunito,sans-serif;fill:#14206a;pointer-events:none} .pp-planesvg .hg-gap:hover .hg-gap-bar,.pp-planesvg .hg-gap.on .hg-gap-bar{fill:#3ddc84;animation:none} .pp-planesvg .hg-gap:hover .hg-gap-dot,.pp-planesvg .hg-gap.on .hg-gap-dot{fill:#3ddc84} @keyframes hgGap{0%,100%{opacity:.55}50%{opacity:1}} .pp-hangar.dragging,#pp-hangar.dragging{user-select:none} .hg-must{background:linear-gradient(90deg,#ffe0e4,#fff4c9);border:3px solid #ff4d5e;border-radius:12px;padding:8px 12px;font:900 15px Nunito,sans-serif;color:#b0001a;animation:hgMust 1.2s ease-in-out infinite} .hg-must span{display:block;font:700 12px Nunito,sans-serif;color:#14206a} @keyframes hgMust{0%,100%{box-shadow:0 0 0 0 rgba(255,77,94,.0)}50%{box-shadow:0 0 0 5px rgba(255,77,94,.25)}} .hg-selbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff6d6;border:2px solid #ffc62e;border-radius:12px;padding:6px 10px;font-size:13px} .hg-help{margin:0} .hg-shelf{border:3px dashed rgba(20,32,106,.3);border-radius:14px;padding:8px 10px;background:rgba(255,255,255,.5);transition:background .12s,border-color .12s} .hg-shelf.over{background:#fff6d6;border-color:#ffc62e} .hg-invrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;min-height:40px} .hg-inv-empty{font-size:12px;color:#5b6a93;align-self:center} .hg-inv{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:3px solid #14206a;border-radius:12px;padding:4px 8px;cursor:grab;box-shadow:0 3px 0 #14206a;touch-action:none;user-select:none;font-size:12px} .hg-inv small{font:700 10px Nunito,sans-serif;color:#4a5288} .hg-inv.pick{background:#fff6d6;border-color:#ffc62e} .hg-inv.must{border-color:#ff4d5e;animation:hgMust 1.2s ease-in-out infinite} .hg-inv.must small{color:#b0001a;font-weight:900} .hg-mini{height:44px;width:auto;display:block;pointer-events:none} .hg-card{display:grid!important;grid-template-columns:auto 1fr auto;user-select:none} .hg-card.sec{cursor:grab} .hg-card .hg-mini{height:40px} .hg-cards{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))} .hg-price s{opacity:.55;font-size:12px;margin-right:2px} .hg-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:.9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));font-size:40px} .hg-ghost .hg-mini{height:60px} /* Route: Speisekarte-Vorschau + Demo-Schalter + Pflicht-Hinweis */ .pp-menu{background:#fff;border:2px solid #e2d7b8;border-radius:12px;padding:8px 10px} .pp-menu-h{font:900 14px Nunito,sans-serif;margin-bottom:6px} .pp-menu-h small{font:700 11px Nunito,sans-serif;color:#5b6a93;margin-left:6px} .pp-menu-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px} .pp-dish{display:flex;gap:6px;align-items:center;background:#fbf6e9;border-radius:10px;padding:4px 6px} .pp-dish.new{background:#fff4c9;box-shadow:inset 0 0 0 2px #ffc62e} .pp-dish-ic{font-size:22px} .pp-dish b{display:block;font-size:13px} .pp-dish em{font-style:normal;font-size:9px;background:#ff4d5e;color:#fff;border-radius:6px;padding:1px 4px;vertical-align:middle} .pp-dish small{display:block;font-size:10px;color:#5b6a93;line-height:1.2} .pp-menu-vip{display:block;margin-top:6px;font-size:12px} .pp-demovip{display:flex;gap:6px;align-items:center;font-size:13px;background:#eaf0ff;border-radius:10px;padding:6px 10px;cursor:pointer} .pp-plan.must{background:#ffe0e4;color:#b0001a;font-weight:900} #btn-fly.must{font-size:15px;background:#ffd6dc} /* aufgeklappter Umschlag (unsichtbare Rückseite) darf keine Klicks schlucken – wichtig fürs breite Hangar-Blatt */ .pp-book.open .pp-cover{pointer-events:none} /* ===================================================================== * v0.21 CHARAKTER-SHOWCASE (js/ui/showcase.js) — Konzept-Blatt + Auswahl * dunkle Navy-Panels, dünne helle Ränder, kleine Icon-Köpfe, weiches Licht * ===================================================================== */ .sc-screen { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden; color: var(--text); font-family: var(--body); background: radial-gradient(1200px 700px at 30% -10%, #1f3290 0%, rgba(31,50,144,0) 60%), radial-gradient(900px 600px at 100% 100%, #1a2a7a 0%, rgba(26,42,122,0) 60%), #0a1134; padding: max(14px, env(safe-area-inset-top)) 16px 28px; outline: none; } .sc-screen[hidden] { display: none; } .sc-screen::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(150,180,255,.09) 1.2px, transparent 1.3px); background-size: 18px 18px; } .sc-top { position: relative; max-width: 1360px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sc-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .sc-crown { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--butter); background: linear-gradient(180deg, #1c2a78, #111a4d); border: 1px solid rgba(190,205,255,.22); box-shadow: 0 6px 18px rgba(0,0,0,.3); } .sc-crown svg { width: 26px; height: 26px; } .sc-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .sc-top h1 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 4vw, 38px); margin: 0; line-height: 1; letter-spacing: .01em; } .sc-close { font-family: var(--display); font-size: 18px; color: var(--text); background: rgba(20,32,106,.7); border: 1px solid rgba(190,205,255,.28); border-radius: 999px; padding: 9px 18px; cursor: pointer; flex: none; transition: background .15s, transform .15s; } .sc-close:hover { background: #22349a; transform: translateY(-1px); } .sc-close:focus-visible, .sc-card:focus-visible, .sc-thumb:focus-visible, .sc-step:focus-visible, .sc-btn:focus-visible, .sc-tab:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; } .sc-layout { position: relative; max-width: 1360px; margin: 0 auto; display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .sc-panel { position: relative; min-width: 0; border-radius: 20px; padding: 14px 16px 16px; background: linear-gradient(180deg, rgba(27,40,110,.72), rgba(14,22,68,.82)); border: 1px solid rgba(190,205,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px rgba(3,6,30,.45); transition: box-shadow .3s; } .sc-panel.sc-pulse { box-shadow: 0 0 0 2px var(--butter), 0 14px 34px rgba(3,6,30,.45); } .sc-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; } .sc-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(190,205,255,.28), rgba(190,205,255,0)); margin-left: 4px; } .sc-hi { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--butter); background: rgba(255,198,46,.12); border: 1px solid rgba(255,198,46,.28); } .sc-hi svg { width: 16px; height: 16px; } .sc-count, .sc-hsub { font-family: var(--body); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--muted); } .sc-count { background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 8px; } .sc-note { margin: -4px 0 10px; font-size: 13px; color: var(--muted); min-height: 1.2em; } /* HELD */ .sc-hero { grid-column: span 7; padding: 0; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; background: #0d1440; } .sc-hero canvas { display: block; width: 100%; flex: 1; min-height: 520px; cursor: grab; touch-action: pan-y; } .sc-hero canvas.drag { cursor: grabbing; } .sc-plate { position: absolute; left: 18px; bottom: 64px; max-width: min(44%, 340px); padding: 14px 16px; border-radius: 16px; pointer-events: none; background: linear-gradient(180deg, rgba(14,22,68,.78), rgba(10,16,52,.88)); border: 1px solid rgba(190,205,255,.2); backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0,0,0,.35); } .sc-plate .sc-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #dbe4ff; } .sc-plate .sc-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 2px rgba(255,255,255,.18); } .sc-plate h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); margin: 4px 0 6px; line-height: 1.02; } .sc-plate p { margin: 0 0 8px; font-size: 14px; line-height: 1.35; } .sc-plate .muted { color: var(--muted); } .sc-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sc-chip { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; } .sc-chip.dim { color: var(--muted); } .sc-hint { position: absolute; top: 14px; left: 18px; font-size: 12px; font-weight: 800; color: rgba(230,238,255,.75); background: rgba(10,16,52,.45); padding: 5px 10px; border-radius: 999px; pointer-events: none; } .sc-hero-actions { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; } .sc-btn { font-family: var(--display); font-size: 16px; color: var(--navy); background: var(--butter); border: 0; border-radius: 12px; padding: 9px 16px; cursor: pointer; box-shadow: 0 4px 0 #b77b00; transition: transform .12s, box-shadow .12s; } .sc-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #b77b00; } .sc-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b77b00; } .sc-btn.ghost { color: var(--text); background: rgba(20,32,106,.75); border: 1px solid rgba(190,205,255,.3); box-shadow: none; } .sc-btn:disabled { opacity: .75; cursor: default; transform: none; background: #3ddc84; box-shadow: 0 4px 0 #1f8a50; } .sc-applied { position: absolute; right: 16px; top: 14px; max-width: 46%; font-size: 12px; font-weight: 800; color: #b9ffd6; text-align: right; } .sc-applied:empty { display: none; } /* CHARAKTER-RASTER */ .sc-roster { grid-column: span 5; display: flex; flex-direction: column; max-height: 560px; } .sc-roster-scroll { overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px 4px; scrollbar-width: thin; scrollbar-color: rgba(190,205,255,.3) transparent; } .sc-group-h { font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 6px 2px 6px; } .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 6px; } .sc-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 6px 6px 8px; border-radius: 14px; cursor: pointer; text-align: left; color: var(--text); font-family: var(--body); background: radial-gradient(120% 80% at 50% 30%, #2a3a8e 0%, #151f58 70%); border: 1px solid rgba(190,205,255,.14); transition: transform .15s, border-color .15s, box-shadow .15s; } .sc-card::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--cc); opacity: .85; } .sc-card:hover { transform: translateY(-2px); border-color: rgba(190,205,255,.35); } .sc-card.on { border-color: var(--butter); box-shadow: 0 0 0 1px var(--butter), 0 8px 18px rgba(0,0,0,.35); } .sc-card canvas, .sc-thumb canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; } .sc-card canvas:not(.ready), .sc-thumb canvas:not(.ready), .sc-result canvas:not(.ready) { background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.03) 70%) 0 0 / 200% 100%; animation: scShimmer 1.2s linear infinite; } @keyframes scShimmer { to { background-position: -200% 0; } } .sc-cn { font-weight: 900; font-size: 12.5px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.3em; } .sc-ct { font-size: 10.5px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* BAUKASTEN */ .sc-build { grid-column: span 12; } .sc-chain { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; } .sc-step { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 104px; flex: 1 1 104px; padding: 8px 10px 9px; border-radius: 14px; cursor: pointer; text-align: left; font-family: var(--body); color: var(--text); background: rgba(10,16,52,.55); border: 1px solid rgba(190,205,255,.16); transition: border-color .15s, background .15s; } .sc-step:hover { border-color: rgba(255,198,46,.6); background: rgba(20,32,106,.7); } .sc-step.fixed { cursor: default; opacity: .88; } .sc-step.fixed:hover { border-color: rgba(190,205,255,.16); background: rgba(10,16,52,.55); } .sc-sn { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; font-size: 9.5px; letter-spacing: 0; color: var(--navy); background: var(--butter); vertical-align: 1px; } .sc-st { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--butter); } .sc-sv { font-size: 13.5px; font-weight: 900; line-height: 1.2; display: flex; align-items: center; gap: 5px; } .sc-ss { font-size: 11px; font-weight: 700; color: var(--muted); } .sc-arrow, .sc-eq { align-self: center; color: rgba(190,205,255,.5); font-weight: 900; font-size: 16px; } .sc-eq { color: var(--butter); font-size: 22px; font-family: var(--display); } .sc-result { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,198,46,.18), rgba(255,198,46,.05)); border: 1px solid rgba(255,198,46,.45); } .sc-result canvas { width: 72px; height: 72px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, #2a3a8e, #151f58); } .sc-result span { font-family: var(--display); font-size: 16px; line-height: 1.1; max-width: 120px; } /* VORSCHAU-KACHELN */ .sc-p-outfits { grid-column: span 5; } .sc-p-acc { grid-column: span 7; } .sc-p-colors { grid-column: span 5; } .sc-p-expr { grid-column: span 7; } .sc-p-details { grid-column: span 12; } .sc-p-colors .sc-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sc-p-outfits .sc-thumbs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .sc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } .sc-thumbs.small { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; } .sc-p-expr .sc-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sc-p-details .sc-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sc-thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 5px 7px; border-radius: 14px; cursor: pointer; font-family: var(--body); color: var(--text); background: radial-gradient(120% 85% at 50% 32%, #283884 0%, #131c52 72%); border: 1px solid rgba(190,205,255,.13); transition: transform .15s, border-color .15s; } .sc-thumb:hover { transform: translateY(-2px); border-color: rgba(190,205,255,.34); } .sc-thumb.on { border-color: var(--butter); box-shadow: 0 0 0 1px var(--butter); } .sc-thumb.locked { cursor: default; } .sc-thumb.locked:hover { transform: none; border-color: rgba(190,205,255,.13); } .sc-thumb.detail { cursor: default; background: radial-gradient(120% 90% at 50% 40%, #33449a 0%, #151f58 75%); } .sc-thumb.detail:hover { transform: none; } .sc-tl { font-size: 12px; font-weight: 900; text-align: center; line-height: 1.15; max-width: 100%; hyphens: auto; overflow-wrap: break-word; } .sc-thumbs.small .sc-tl { font-size: 11px; } .sc-ts { font-size: 10px; font-weight: 800; color: var(--butter); text-transform: uppercase; letter-spacing: .08em; } .sc-lock { position: absolute; top: 6px; right: 7px; font-size: 11px; opacity: .8; } .sc-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--dc); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 5px rgba(0,0,0,.35); order: -1; position: absolute; top: 7px; left: 7px; } .sc-dot.mini { position: static; width: 11px; height: 11px; border-width: 1.5px; display: inline-block; flex: none; } .sc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 10px; } .sc-tab { font-family: var(--body); font-weight: 900; font-size: 12.5px; color: var(--muted); background: rgba(10,16,52,.5); border: 1px solid rgba(190,205,255,.16); border-radius: 999px; padding: 5px 12px; cursor: pointer; } .sc-tab.on { color: var(--navy); background: var(--butter); border-color: var(--butter); } /* Einstiege */ .pp-chars-btn { font-family: var(--display); font-size: 15px; color: #14206a; background: #fff6d6; border: 2px solid #14206a; border-radius: 12px; padding: 5px 12px; cursor: pointer; box-shadow: 0 3px 0 #14206a; margin: 0 0 8px; } .pp-chars-btn:hover { background: #ffc62e; } @media (max-width: 1100px) { .sc-hero, .sc-roster, .sc-build, .sc-p-expr, .sc-p-details, .sc-p-colors { grid-column: span 12; } .sc-p-outfits, .sc-p-acc { grid-column: span 6; } .sc-roster { max-height: none; } .sc-roster-scroll { overflow: visible; } } @media (max-width: 720px) { .sc-screen { padding: 12px 12px 24px; } .sc-layout { gap: 10px; } .sc-panel { padding: 12px; border-radius: 18px; } .sc-p-outfits, .sc-p-acc, .sc-p-colors { grid-column: span 12; } .sc-hero { min-height: 0; } .sc-hero canvas { min-height: 0; height: 58vh; max-height: 470px; flex: none; } .sc-plate { position: static; max-width: none; margin: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(190,205,255,.16); backdrop-filter: none; box-shadow: none; } .sc-hero-actions { position: static; padding: 0 14px 14px; background: rgba(10,16,52,.88); } .sc-applied { position: static; max-width: none; text-align: left; padding: 0 14px 12px; background: rgba(10,16,52,.88); } .sc-hint { top: 10px; left: 10px; } .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-p-expr .sc-thumbs, .sc-p-colors .sc-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sc-p-details .sc-thumbs, .sc-p-outfits .sc-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-thumbs.small { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sc-step { flex: 1 1 calc(50% - 20px); min-width: 0; } .sc-arrow { display: none; } .sc-eq { display: none; } .sc-result { flex: 1 1 100%; } .sc-close span { display: none; } .sc-hsub { display: none; } .sc-tl { font-size: 10.5px; overflow-wrap: normal; word-break: normal; } .sc-thumbs.small .sc-tl, .sc-p-expr .sc-tl { font-size: 9.5px; letter-spacing: -.01em; } .sc-top .sc-eyebrow { font-size: 10px; letter-spacing: .1em; } .sc-crown { width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { .sc-card, .sc-thumb, .sc-btn { transition: none; } .sc-card canvas:not(.ready), .sc-thumb canvas:not(.ready) { animation: none; } }