@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;800&display=swap"); /* ========================= GLOBAL TOKENS ========================= */ :root { --bg: #0b0b0b; --panel: #0f0f0f; --text: #f2f2f2; --muted: rgba(242, 242, 242, 0.62); --line: #f2f2f2; --lineSoft: rgba(242, 242, 242, 0.18); --lane: rgba(242, 242, 242, 0.18); --b: 3px; --r: 18px; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; --sans: "JetBrains Mono", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* iOS fixes */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Allow selection in inputs */ input, textarea { -webkit-user-select: text; user-select: text; } /* Prevent scrolling on game pages or specific views */ body.lines-only, body.no-scroll { overflow: hidden; touch-action: none; } /* ========================= BACKGROUND LAYERS (use on login/menu) ========================= */ .bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 540px at 50% 45%, rgba(242, 242, 242, 0.075), rgba(0, 0, 0, 0) 60%), radial-gradient(1200px 800px at 50% 50%, rgba(242, 242, 242, 0.035), rgba(0, 0, 0, 0) 70%); animation: bgPulse 8s ease-in-out infinite; } @keyframes bgPulse { 0%, 100% { filter: brightness(1) contrast(1); transform: scale(1); } 50% { filter: brightness(1.06) contrast(1.04); transform: scale(1.01); } } /* grid / lines */ .gridbg { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(to right, rgba(242, 242, 242, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(242, 242, 242, 0.04) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.14; /* soft focus to center (nice on login/menu) */ mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.25) 62%, rgba(0, 0, 0, 0) 80%); } .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 6; /* Tunnel Vision */ background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 68%, rgba(0, 0, 0, 0.90) 100%); opacity: 0; /* wird per JS gesetzt */ filter: blur(0px); /* wird per JS gesetzt */ transition: opacity 120ms linear, filter 120ms linear; } .scan { position: fixed; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 8px); opacity: 0.22; mix-blend-mode: overlay; } /* ========================= LINES-ONLY MODE (Game pages) Add class="lines-only" on ========================= */ body.lines-only .bg { display: none; } body.lines-only .gridbg { mask-image: none; opacity: 0.14; } /* ========================= STAGE ENTRANCE ========================= */ .stage { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; } .stage.in { opacity: 1; transform: translateY(0); filter: blur(0); } /* ========================= MENU LAYOUT (Bottom Footer) ========================= */ .hud { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--bg); /* Black background for navbar */ border-bottom: 1px solid var(--lineSoft); pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } @media (max-width: 600px) { .hud { padding: 12px 18px; } } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 900; letter-spacing: 1px; text-transform: uppercase; user-select: none; pointer-events: none; } .menu-layout { display: flex !important; flex-direction: column; width: min(820px, 100%); min-height: calc(100vh - 40px); /* Fill the wrap (100vh - 20px padding * 2) */ margin: 0 auto; } .menu-center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; /* Center children horizontally */ width: 100%; } .footer { width: 100%; display: flex; justify-content: center; padding-top: 40px; padding-bottom: 20px; margin-top: auto; /* Push to bottom */ } .footer-links { display: flex; gap: 30px; } .btn-footer { font-family: var(--mono); font-size: 14px; color: var(--muted); text-decoration: none; font-weight: 900; letter-spacing: 2px; opacity: 0.6; transition: opacity 200ms ease, color 200ms ease; position: relative; padding: 10px; } .btn-footer::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 0%; height: 2px; background: var(--text); transition: width 200ms ease, left 200ms ease; } .btn-footer:hover { opacity: 1; color: var(--text); } .btn-footer:hover::after { width: 100%; left: 0; } .hud-right { display: flex; gap: 10px; pointer-events: auto; } /* hint (top right text) */ .hint { font-family: var(--mono); letter-spacing: 0.6px; font-size: 12px; color: var(--muted); min-height: 16px; text-align: right; opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 260ms ease; pointer-events: none; } .hint.show { opacity: 1; transform: translateY(0); } /* ========================= BUTTONS ========================= */ .btn { border: var(--b) solid var(--line); border-radius: 14px; background: var(--text); color: #111; font-family: var(--mono); font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; padding: 10px 14px; cursor: pointer; user-select: none; transition: transform 120ms ease, background 120ms ease, opacity 120ms ease; } .btn:active { transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--text); } .btn-ghost:hover { background: rgba(242, 242, 242, 0.05); } /* ========================= LAYOUT WRAPPER ========================= */ .wrap { min-height: 100vh; min-height: 100dvh; /* Account for mobile browser UI */ display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; z-index: 5; } @media (max-width: 600px) { .wrap { padding: 100px 10px 40px; /* Space for navbar */ align-items: flex-start; } body.centered-mode .wrap { padding: 10px; align-items: center; /* Restore vertical centering */ } } /* ========================= LOGIN ========================= */ .code { display: flex; gap: 12px; justify-content: center; align-items: center; } .code input { width: 84px; height: 92px; border: var(--b) solid var(--line); border-radius: 16px; background: rgba(0, 0, 0, 0.10); color: var(--text); font-family: var(--mono); font-weight: 900; font-size: 44px; text-align: center; outline: none; caret-color: transparent; backdrop-filter: blur(2px); opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 520ms ease, border-color 120ms ease, background 120ms ease; } .stage.in .code input { opacity: 1; transform: translateY(0); } .stage.in .code input:nth-child(1) { transition-delay: 80ms; } .stage.in .code input:nth-child(2) { transition-delay: 140ms; } .stage.in .code input:nth-child(3) { transition-delay: 200ms; } .stage.in .code input:nth-child(4) { transition-delay: 260ms; } .stage.in .code input:nth-child(5) { transition-delay: 320ms; } .stage.in .code input:nth-child(6) { transition-delay: 380ms; } .code input:focus { transform: translateY(-1px); background: rgba(242, 242, 242, 0.03); } .code input.error { border-color: rgba(242, 242, 242, 0.85); background: rgba(242, 242, 242, 0.04); } /* ========================= MENU TILES ========================= */ .tiles { width: min(820px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tile { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 18px; border: var(--b) solid var(--line); border-radius: 16px; text-decoration: none; color: var(--text); background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(2px); min-height: 150px; transition: transform 120ms ease, background 120ms ease, opacity 120ms ease; user-select: none; } .tile:hover { transform: translateY(-2px); background: rgba(242, 242, 242, 0.03); } .tile:active { transform: translateY(1px); } .tile strong { font-family: var(--mono); font-weight: 900; font-size: 34px; letter-spacing: 0.5px; } .tag { font-family: var(--mono); font-weight: 900; letter-spacing: 0.6px; font-size: 12px; color: var(--muted); text-transform: uppercase; } .tile.locked { opacity: 0.55; cursor: not-allowed; } .tile.locked:hover { transform: none; background: rgba(0, 0, 0, 0.10); } /* ========================= INPUT ROW (optional unlock) ========================= */ .hr { border-top: 2px solid var(--lineSoft); margin: 18px 0; } .row { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: nowrap; /* Force single line */ width: 100%; max-width: 500px; /* Constrain width so it doesn't look too stretched */ margin: 0 auto; } .input { flex: 1; /* Allow input to fill space */ min-width: 0; /* meaningful for flex items */ border: var(--b) solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, 0.10); color: var(--text); font-family: var(--mono); font-weight: 900; letter-spacing: 0.6px; padding: 12px 14px; outline: none; text-transform: uppercase; backdrop-filter: blur(2px); /* Prevent iOS auto-zoom (needs 16px min) */ font-size: 16px; } .input::placeholder { color: rgba(242, 242, 242, 0.35); } .small { font-family: var(--mono); letter-spacing: 0.6px; font-size: 12px; text-transform: uppercase; } .unlock-guide-wrap { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 10px; } .row-container { display: flex; flex-direction: column; align-items: center; gap: 8px; } .small-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted); opacity: 0.8; } .unlock-arrow { font-size: 24px; font-family: var(--mono); color: var(--text); opacity: 0.6; } .unlock-arrow.side-left { animation: arrowLoopL 1.2s infinite ease-in-out; } .unlock-arrow.side-right { animation: arrowLoopR 1.2s infinite ease-in-out; } @keyframes arrowLoopL { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(6px); opacity: 1; } } @keyframes arrowLoopR { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(-6px); opacity: 1; } } .muted { color: var(--muted); } .login-tip { margin-top: 16px; min-height: 16px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 260ms ease; } .login-tip.show { opacity: 1; transform: translateY(0); } /* ========================= OVERLAYS (kept, but not required) ========================= */ .overlay { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; } .overlay[aria-hidden="true"] { opacity: 0; visibility: hidden; } .overlay[aria-hidden="false"] { opacity: 1; visibility: visible; } .center-title { text-align: center; pointer-events: none; font-family: var(--mono); font-weight: 900; letter-spacing: 1px; text-transform: uppercase; opacity: 0; transform: translateY(10px); filter: blur(8px); } .center-title .title { font-size: clamp(46px, 7vw, 86px); } .panel { width: min(920px, 100%); border: var(--b) solid var(--line); border-radius: 16px; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(2px); padding: 18px; pointer-events: auto; } .panel-head { text-align: center; margin-bottom: 12px; } .panel-title { font-family: var(--mono); font-weight: 900; letter-spacing: 0.8px; font-size: 16px; text-transform: uppercase; } /* ========================= TILES: one-row (for promille) - NO scrollbar - container wider ========================= */ /* make the selection wrapper wider, but still centered */ #selectView.wrap { justify-content: center; } /* the inner block you used in HTML gets full width automatically, but we ensure tiles area can exceed 820px cleanly */ #promilleTiles.tiles.one-row { width: min(1200px, calc(100vw - 60px)); display: flex; justify-content: center; align-items: stretch; gap: 16px; flex-wrap: wrap; /* Changed from nowrap to wrap */ overflow: visible; padding-bottom: 20px; /* Added some padding for wrapped rows */ } /* fixed tile size for promille row */ #promilleTiles.tiles.one-row .tile { flex: 0 0 180px; min-height: 150px; } /* slightly smaller on narrower screens */ @media (max-width: 980px) { #promilleTiles.tiles.one-row { width: min(980px, calc(100vw - 40px)); gap: 14px; } #promilleTiles.tiles.one-row .tile { flex-basis: 150px; } } @media (max-width: 820px) { #promilleTiles.tiles.one-row { width: calc(100vw - 40px); gap: 12px; padding-bottom: 40px; } #promilleTiles.tiles.one-row .tile { flex: 1 1 calc(50% - 12px); /* Allow two items per row or one if very small */ min-width: 130px; min-height: 120px; padding: 16px; } #promilleTiles.tiles.one-row .tile strong { font-size: 26px; } } @media (max-width: 480px) { #promilleTiles.tiles.one-row .tile { flex: 1 1 100%; /* Single column on very small mobile */ } } /* ========================= RESULTS (Fullscreen / cinematic) ========================= */ .resultsStage { position: relative; min-height: 100vh; overflow: hidden; background: var(--bg); padding: 22px; z-index: 2; } /* IMPORTANT: must never block clicks */ .resultsBg { position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(242, 242, 242, 0.08), rgba(0, 0, 0, 0) 55%), radial-gradient(circle at 22% 30%, rgba(242, 242, 242, 0.05), rgba(0, 0, 0, 0) 50%), radial-gradient(circle at 78% 64%, rgba(242, 242, 242, 0.04), rgba(0, 0, 0, 0) 55%); filter: blur(18px); opacity: 0.9; animation: resPulse 2600ms ease-in-out infinite; } @keyframes resPulse { 0%, 100% { transform: scale(1.00) rotate(0deg); opacity: 0.82; } 50% { transform: scale(1.04) rotate(0.6deg); opacity: 1; } } /* content: no card, no box */ .resultsContent { position: relative; z-index: 2; width: min(1100px, calc(100vw - 44px)); margin: 0 auto; padding-top: 90px; /* gives breathing space like your pages */ } /* sequential entrance (emotional / cinematic) */ .resultsKicker, .resultsTitle, .resultsSub, .resultsInlineStats, .resultsDivider { opacity: 0; transform: translateY(12px); filter: blur(8px); animation: resIn 520ms cubic-bezier(.2, .9, .2, 1) forwards; } .resultsKicker { animation-delay: 60ms; } .resultsTitle { animation-delay: 140ms; } .resultsSub { animation-delay: 220ms; } .resultsInlineStats { animation-delay: 300ms; } .resultsDivider { animation-delay: 380ms; } @keyframes resIn { to { opacity: 1; transform: translateY(0); filter: blur(0); } } .resultsKicker { font-family: var(--mono); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: var(--muted); } .resultsTitle { margin: 10px 0 0 0; font-family: var(--mono); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(26px, 3.2vw, 42px); color: rgba(242, 242, 242, 0.92); } .resultsSub { margin: 12px 0 0 0; font-family: var(--mono); font-weight: 650; letter-spacing: 0.02em; font-size: 14px; line-height: 1.45; color: rgba(242, 242, 242, 0.70); max-width: 70ch; } .resultsInlineStats { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .stat { border-top: 1px solid rgba(242, 242, 242, 0.18); padding-top: 12px; } .statLabel { font-family: var(--mono); font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; font-size: 12px; color: rgba(242, 242, 242, 0.60); } .statValue { margin-top: 8px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 22px; color: rgba(242, 242, 242, 0.92); } .resultsDivider { margin-top: 22px; height: 1px; background: rgba(242, 242, 242, 0.16); } /* list stays, but no boxed rows */ .resultsList { margin-top: 18px; display: grid; gap: 10px; } .resRow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(242, 242, 242, 0.10); opacity: 0; transform: translateY(10px); animation: resRowIn 460ms cubic-bezier(.2, .9, .2, 1) forwards; } @keyframes resRowIn { to { opacity: 1; transform: translateY(0); } } .resLabel { font-family: var(--mono); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; color: rgba(242, 242, 242, 0.76); } .resValue { font-family: var(--mono); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 22px; color: rgba(242, 242, 242, 0.92); } /* actions fixed bottom-right like a “return to reality” */ .resultsActions { position: fixed; right: 18px; bottom: 18px; z-index: 10; display: flex; gap: 10px; pointer-events: auto; } .resultsBg { pointer-events: none; } /* ========================= STORY FINALE ========================= */ .story-stats { gap: 16px; } .story-stat-card { border: var(--b) solid var(--line); border-radius: 14px; padding: 14px; background: rgba(0, 0, 0, 0.16); min-width: 220px; } .story-stat-title { font-family: var(--mono); font-weight: 900; letter-spacing: 0.8px; margin-bottom: 8px; } .story-stat-lines { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; } .quiz { display: flex; flex-direction: column; gap: 18px; } .quiz-question { border: var(--b) solid var(--lineSoft); border-radius: 14px; padding: 14px; background: rgba(0, 0, 0, 0.14); } .quiz-title { font-family: var(--mono); font-weight: 900; margin-bottom: 10px; letter-spacing: 0.6px; } .quiz-options { display: flex; flex-wrap: wrap; gap: 10px; } .quiz-option.selected { border-color: var(--text); color: var(--text); } .quiz-actions { display: flex; justify-content: center; margin-top: 12px; } .story-ending { font-family: var(--mono); font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; border: var(--b) solid var(--line); border-radius: 16px; padding: 16px; background: rgba(0, 0, 0, 0.2); } @media (max-width: 760px) { .resultsContent { padding-top: 76px; } .resultsInlineStats { grid-template-columns: 1fr; } .resultsActions { left: 18px; right: 18px; justify-content: space-between; } } /* ===== RESULTS in MENU style ===== */ .liveDot { animation: liveBlink 920ms ease-in-out infinite; } .liveTag { margin-left: 10px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; color: var(--muted); } @keyframes liveBlink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* header inside stage */ .resHead { text-align: left; } .resKicker { font-family: var(--mono); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: var(--muted); opacity: 0; transform: translateY(10px); filter: blur(8px); transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; } .resTitle { margin-top: 10px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: 26px; color: rgba(242, 242, 242, 0.92); opacity: 0; transform: translateY(10px); filter: blur(8px); transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; } .resSub { margin-top: 10px; font-family: var(--mono); font-weight: 650; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(242, 242, 242, 0.70); opacity: 0; transform: translateY(10px); filter: blur(8px); transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; } /* show header with .in class on stage */ .stage.in .resKicker, .stage.in .resTitle, .stage.in .resSub { opacity: 1; transform: translateY(0); filter: blur(0); } .stage.in .resKicker { transition-delay: 60ms; } .stage.in .resTitle { transition-delay: 120ms; } .stage.in .resSub { transition-delay: 180ms; } /* story lines */ .resStory { display: grid; gap: 10px; padding-top: 4px; } .resLine { border: var(--b) solid var(--lineSoft); border-radius: 14px; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(2px); padding: 12px 14px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; color: rgba(242, 242, 242, 0.90); opacity: 0; transform: translateY(10px); filter: blur(10px); } .resLine.in { animation: resLineIn 460ms cubic-bezier(.2, .9, .2, 1) forwards; } @keyframes resLineIn { to { opacity: 1; transform: translateY(0); filter: blur(0); } } .resLine .muted { color: var(--muted); font-weight: 800; } .resLine .count { display: inline-block; min-width: 1.2ch; } /* actions appear only when unlocked */ .resActions { opacity: 0; transform: translateY(8px); filter: blur(10px); transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease; } .resActions.show { opacity: 1; transform: translateY(0); filter: blur(0); } /* ========================= BRIEFING OVERLAY (Game1 Menu) ========================= */ .briefing { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 220ms ease; } .briefing.show { opacity: 1; visibility: visible; pointer-events: auto; } .briefing-inner { width: min(820px, 100%); border: var(--b) solid var(--lineSoft); border-radius: 16px; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(2px); padding: 18px; opacity: 0; transform: translateY(10px); filter: blur(10px); transition: opacity 320ms ease, transform 320ms ease, filter 320ms ease; } .briefing.show .briefing-inner { opacity: 1; transform: translateY(0); filter: blur(0); } .briefing-kicker { font-family: var(--mono); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: var(--muted); } .briefing-title { margin-top: 10px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: 26px; color: rgba(242, 242, 242, 0.92); } .briefing-text { margin-top: 10px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; line-height: 1.5; color: rgba(242, 242, 242, 0.78); } /* ========================= TILES: one-row (generic) Works for #menuTiles, #promilleTiles, etc. ========================= */ .tiles.one-row { width: min(1200px, calc(100vw - 60px)); display: flex; justify-content: center; align-items: stretch; gap: 16px; flex-wrap: wrap; /* Changed from nowrap to wrap */ overflow: visible; padding-bottom: 20px; } /* fixed tile size in one-row layouts */ .tiles.one-row .tile { flex: 0 0 180px; min-height: 150px; } /* slightly smaller on narrower screens */ @media (max-width: 980px) { .tiles.one-row { width: min(980px, calc(100vw - 40px)); gap: 14px; } .tiles.one-row .tile { flex-basis: 150px; } } @media (max-width: 820px) { .tiles.one-row { width: calc(100vw - 40px); gap: 12px; padding-bottom: 40px; } .tiles.one-row .tile { flex: 1 1 calc(50% - 12px); min-width: 130px; min-height: 120px; padding: 16px; } .tiles.one-row .tile strong { font-size: 26px; } } @media (max-width: 480px) { .tiles.one-row .tile { flex: 1 1 100%; } } /* ========================= RESULTS (minimal grid) ========================= */ body.results-page { overflow: auto; } body.results-page .wrap { align-items: flex-start; padding-top: 120px; padding-bottom: 70px; } .result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .result-card { border: var(--b) solid var(--line); border-radius: 16px; padding: 14px; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(2px); } .result-card .label { font-family: var(--mono); font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; font-size: 12px; color: var(--muted); } .result-card .value { margin-top: 8px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; font-size: 28px; } /* ========================= GAME CANVAS ========================= */ #game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 4; /* above background layers, below HUD */ touch-action: none; /* mobile tap: no scroll/zoom */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* ========================= SHAKE ANIMATIONS ========================= */ @keyframes tileShake { 0% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } 100% { transform: translateX(0); } } .shake { animation: tileShake 220ms ease-in-out; } /* ========================= UTIL ========================= */ .hidden { display: none !important; } /* ========================= RESPONSIVE (menu tiles) ========================= */ @media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 120px; } .result-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hud { padding: 10px 14px; } .brand { font-size: 12px; gap: 6px; } .dot { width: 12px; height: 12px; border-width: 2px; } .hud-right { gap: 6px; } .btn-ghost { padding: 6px 10px; font-size: 11px; } } @media (max-width: 520px) { .code { gap: 10px; } .code input { width: 64px; height: 74px; font-size: 36px; border-radius: 14px; } } /* ========================= CINEMATIC BRIEF VIEW (no overlay) ========================= */ .briefCenter { width: min(920px, 100%); text-align: center; display: flex; flex-direction: column; gap: 10px; padding: 18px 10px; } .briefKicker { font-family: var(--mono); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; color: var(--muted); } .briefTitle { font-family: var(--mono); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 44px); color: rgba(242, 242, 242, 0.92); /* cinematic fly-in */ opacity: 0; transform: translateY(14px); filter: blur(10px); transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; } .stage.in .briefTitle { opacity: 1; transform: translateY(0); filter: blur(0); } .briefText { margin: 4px auto 0; max-width: 70ch; font-family: var(--mono); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; line-height: 1.6; color: rgba(242, 242, 242, 0.78); opacity: 0; transform: translateY(14px); filter: blur(10px); transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; transition-delay: 120ms; } .stage.in .briefText { opacity: 1; transform: translateY(0); filter: blur(0); } .briefCTA { margin-top: 8px; font-family: var(--mono); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 320ms ease; transition-delay: 320ms; } .stage.in .briefCTA { opacity: 1; transform: translateY(0); } #phaserMount { position: relative; width: 100%; max-width: 100vw; height: auto; aspect-ratio: 16 / 9; z-index: 4; overflow: hidden; touch-action: none; } @media (max-width: 600px) { #phaserMount { /* Standard aspect for 960x540 */ aspect-ratio: 16 / 9; max-height: 80vh; } } #phaserMount canvas { display: block; margin: auto; /* helps when Phaser injects canvas */ } .game3-outcome-actions { position: absolute; left: 18%; top: 72%; display: flex; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 400ms ease; pointer-events: none; z-index: 6; } .game3-outcome-actions.show { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Touch controls overlay for Game2 */ .g2-touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; } .g2-touch .zone { position: absolute; bottom: 0; height: 52vh; width: 40vw; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; } .g2-touch .zone.left { left: 0; } .g2-touch .zone.right { right: 0; } .g2-touch .brakeBtn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); pointer-events: auto; touch-action: none; /* larger button since it plays a crucial role */ padding: 18px 32px; font-size: 18px; font-weight: 900; } @media (min-width: 900px) { /* desktop: still allow touch, but keep it less intrusive */ .g2-touch .zone { height: 44vh; width: 32vw; } } /* ========================= FOOTER / IMPRESSUM LINK ========================= */ .footer { margin-top: 40px; text-align: center; } .btn-footer { display: inline-block; color: var(--muted); text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; transition: color 120ms ease; cursor: pointer; } .btn-footer:hover { color: var(--text); } /* ========================= IMPRESSUM PAGE ========================= */ .impressum-content { color: var(--text); font-family: var(--sans); line-height: 1.8; } .impressum-content h2 { font-size: 28px; font-weight: 800; margin: 0 0 30px 0; letter-spacing: 1px; color: var(--text); text-transform: uppercase; } .impressum-content h3 { font-size: 14px; font-weight: 800; margin: 24px 0 12px 0; letter-spacing: 0.8px; color: var(--text); text-transform: uppercase; } .impressum-content p { font-size: 14px; margin: 0 0 20px 0; color: var(--muted); line-height: 1.6; } /* ========================= TEAM PAGE - FULL PAGE PARALLAX ========================= */ /* Hide default stage wrapper styles for this specific page structure if needed, or just ensure our new container overrides it. */ .team-scroll-container { height: 100vh; overflow-y: hidden; /* JS handles scrolling now */ overflow-x: hidden; perspective: 10px; /* Essential for CSS Parallax */ /* scroll-snap-type removed for custom JS scroll */ background: var(--bg); } /* SECTIONS */ .team-section { position: relative; height: 100vh; min-height: 100vh; width: 100%; transform-style: preserve-3d; z-index: 1; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* PARALLAX LAYERS */ .parallax-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; /* Performance hint for smoother fps */ } /* CSS Parallax Formula: scale = 1 + (translateZ * -1) / perspective speed = data-speed (simulated via Z depth) If perspective = 10px: - Deep bg (slow): translateZ(-10px) -> scale(2) - Mid (faster): translateZ(-5px) -> scale(1.5) - Base (normal): translateZ(0) -> scale(1) */ .bg-layer { transform: translateZ(-10px) scale(2); z-index: -1; } .mid-layer { transform: translateZ(-5px) scale(1.5); z-index: 0; } .content-layer { position: relative; transform: translateZ(0); /* Base speed */ z-index: 10; width: min(1000px, 90vw); pointer-events: none; /* Let clicks pass to cards if needed */ } /* INTRO SECTION */ .intro-section .content-layer { text-align: center; } .main-title { font-family: var(--mono); font-weight: 900; font-size: clamp(60px, 12vw, 160px); line-height: 0.9; letter-spacing: -0.04em; color: var(--text); text-shadow: 0 0 40px rgba(242, 242, 242, 0.2); margin: 0; animation: introGlitch 3s infinite alternate; } .subtitle { font-family: var(--mono); font-size: clamp(14px, 2vw, 24px); letter-spacing: 0.4em; color: var(--muted); margin-top: 24px; } .scroll-indicator { position: absolute; bottom: -15vh; /* Push it down */ left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translate(-50%, 0); opacity: 0.5; } 50% { transform: translate(-50%, 10px); opacity: 1; } } /* ========================= SCROLL ARROW & FOOTER ========================= */ .scroll-arrow { margin-top: 8px; font-size: 24px; animation: bounceArrow 2s infinite; color: var(--muted); line-height: 1; } @keyframes bounceArrow { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(5px); } 60% { transform: translateY(3px); } } /* Back to Top Button inside member section */ /* Short Footer Section */ .footer-section { height: 40vh !important; min-height: 40vh !important; display: flex; align-items: center; justify-content: center; } .scroll-top-btn { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--accent, #33ff88); background: transparent; color: var(--accent, #33ff88); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(51, 255, 136, 0.2); margin: 0 auto; /* Reset margin for centered display in footer */ pointer-events: auto; /* Critical: Enable clicks inside pointer-events: none layer */ } .scroll-top-btn:hover { background: var(--accent, #33ff88); color: #000; box-shadow: 0 0 30px rgba(51, 255, 136, 0.6); transform: translateY(-5px); } @keyframes introGlitch { 0% { transform: translate(0); filter: hue-rotate(0deg); } 2% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); } 4% { transform: translate(2px, -1px); filter: hue-rotate(-90deg); } 6% { transform: translate(0); filter: hue-rotate(0deg); } 100% { transform: translate(0); } } /* MEMBER SECTION STYLES */ .member-card { display: flex; align-items: center; gap: 60px; pointer-events: auto; } .member-section.reversed .member-card { flex-direction: row-reverse; text-align: right; } /* MEMBER VISUAL (Avatar + Badge) */ .member-visual { position: relative; } .member-avatar { width: 200px; height: 200px; background: rgba(15, 15, 15, 0.8); border: 2px solid var(--accent); border-radius: 40px; display: grid; place-items: center; font-family: var(--mono); font-weight: 900; font-size: 64px; color: var(--text); box-shadow: 0 0 60px calc(var(--accent) * 0.3); overflow: hidden; } .member-avatar::after { content: ''; position: absolute; inset: 0; border-radius: 40px; /* Explicit match */ background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%); /* Tighter beam */ background-size: 200% 200%; background-repeat: no-repeat; animation: shine 3s infinite linear; } @keyframes shine { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .member-role-badge { position: absolute; bottom: -15px; right: -15px; background: var(--accent); color: #000; font-family: var(--mono); font-weight: 900; padding: 6px 12px; font-size: 14px; border-radius: 8px; transform: rotate(-5deg); box-shadow: 5px 5px 0px rgba(0, 0, 0, 1); } .member-section.reversed .member-role-badge { right: auto; left: -15px; transform: rotate(5deg); box-shadow: -5px 5px 0px rgba(0, 0, 0, 1); } /* MEMBER INFO */ .member-info { flex: 1; max-width: 600px; } .member-name { font-family: var(--mono); font-weight: 900; font-size: clamp(40px, 6vw, 80px); line-height: 1; margin: 0; color: var(--text); text-transform: uppercase; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .member-role { font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--accent); margin: 10px 0 20px 0; text-transform: uppercase; letter-spacing: 2px; } .member-desc { line-height: 1.6; color: rgba(242, 242, 242, 0.8); margin-bottom: 30px; max-width: 85vw; } /* BIG SYMBOLS (Background) */ .big-symbol { font-family: var(--mono); font-weight: 900; font-size: 40vh; color: rgba(255, 255, 255, 0.03); line-height: 0.8; white-space: nowrap; } /* DECORATIONS (Subtle Background Elements) */ .decoration-line { /* Removed per user request */ display: none; } .decoration-circle { /* Removed per user request */ display: none; } .decoration-cross { /* Removed per user request */ display: none; } .decoration-cross::before, .decoration-cross::after { /* Removed per user request */ display: none; } .decoration-grid { /* Removed per user request */ display: none; } .decoration-dots { /* Removed per user request */ display: none; } /* RESPONSIVE */ @media (max-width: 900px) { .member-card { flex-direction: column; text-align: center; gap: 30px; } .member-section.reversed .member-card { flex-direction: column; text-align: center; } .member-avatar { width: 140px; height: 140px; font-size: 48px; } .main-title { font-size: 60px; } .big-symbol { font-size: 25vh; } } /* ========================= GAME2 – OUTCOME (CINEMATIC, CLEAN) ========================= */ .g2-outcome { position: fixed; inset: 0; z-index: 30; /* über HUD/Stage */ display: grid; place-items: center; padding: 24px; background: transparent; opacity: 0; pointer-events: none; transition: opacity 260ms ease; } .g2-outcome.show { opacity: 1; pointer-events: auto; } .g2-outcome-inner { width: min(920px, 100%); text-align: left; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; } .g2-kicker { font-size: 12px; color: var(--muted); font-weight: 900; opacity: 0; transform: translateY(8px); filter: blur(8px); } .g2-title { margin-top: 10px; font-size: clamp(26px, 3.2vw, 44px); color: rgba(242, 242, 242, 0.92); font-weight: 900; opacity: 0; transform: translateY(10px); filter: blur(10px); } .g2-lines { margin-top: 16px; display: grid; gap: 10px; } .g2-line { font-size: 13px; color: rgba(242, 242, 242, 0.78); font-weight: 900; line-height: 1.6; opacity: 0; transform: translateY(10px); filter: blur(10px); } .g2-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-start; opacity: 0; transform: translateY(10px); filter: blur(10px); } /* "ease in" feel */ .g2-in { animation: g2In 520ms cubic-bezier(.2, .9, .2, 1) forwards; } .g2-in-soft { animation: g2InSoft 520ms cubic-bezier(.2, .9, .2, 1) forwards; } @keyframes g2In { to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes g2InSoft { to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* Game3: Phaser soll NICHT wie "Kasten" aussehen */ #phaserMount { background: transparent !important; border: none !important; box-shadow: none !important; } #phaserMount canvas { display: block; background: transparent !important; } /* ========================= STORY FINALE (New) ========================= */ .hidden-card { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .show-card { opacity: 1; transform: translateY(0); } .section-title { font-family: var(--mono); font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; font-size: 18px; color: var(--muted); margin-bottom: 20px; text-align: center; } .stat-comment { margin-top: 6px; font-style: italic; font-size: 11px; color: rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 6px; } .story-ending { text-align: center; margin-top: 40px; padding: 30px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; opacity: 0; } .fade-in-ending { animation: fadeInEnding 2s ease forwards; } @keyframes fadeInEnding { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .ending-title { font-family: var(--mono); font-size: 24px; font-weight: 900; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.1em; } .ending-text { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 auto 30px auto; } .quiz-option.selected { background: var(--text); color: #000; border-color: var(--text); } .hidden { display: none !important; } /* TUTORIAL OVERLAY */ .tutorial-overlay { position: fixed; inset: 0; backdrop-filter: blur(8px); background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity 0.4s ease; padding: 20px; } .tutorial-overlay.in { opacity: 1; } .tutorial-card { background: var(--bg-dark, #0d0d0d); border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px; max-width: 720px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; transform: translateY(20px); opacity: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .tutorial-card.in { transform: translateY(0); opacity: 1; } .tutorial-card::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--accent, #f2f2f2); } .tutorial-kicker { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; text-transform: uppercase; } .tutorial-title { font-size: 28px; font-weight: 800; margin-bottom: 20px; letter-spacing: -0.5px; color: #fff; text-transform: uppercase; } .tutorial-text { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; } .tutorial-card .btn { width: 100%; } /* ========================= INFO OVERLAY ========================= */ .info-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .info-overlay.show { opacity: 1; pointer-events: auto; } .info-content { background: var(--panel); border: 1px solid var(--line); padding: 2rem; max-width: 400px; text-align: center; border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .info-content h2 { font-family: var(--mono); margin-top: 0; font-size: 1.5rem; margin-bottom: 1rem; } .info-content p { color: var(--muted); line-height: 1.6; margin-bottom: 1.5rem; } .info-btn { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 0.5rem; transition: color 0.2s; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .info-btn:hover { color: var(--text); } @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(242, 242, 242, 0.4); border-color: rgba(242, 242, 242, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(242, 242, 242, 0); border-color: rgba(242, 242, 242, 0.8); } 100% { box-shadow: 0 0 0 0 rgba(242, 242, 242, 0); border-color: rgba(242, 242, 242, 0.4); } } .info-btn.fixed-bottom { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(0, 0, 0, 0.6); border-radius: 50%; backdrop-filter: blur(4px); border: 1px solid var(--lineSoft); animation: pulseGlow 2s infinite; color: var(--text); } /* ========================= FINALE HEADER & QUESTIONNAIRE FIXES ========================= */ .finale-header { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; margin-top: -40px; font-family: var(--mono); font-weight: 900; text-shadow: 0 0 40px rgba(255, 255, 255, 0.3); line-height: 1.1; word-break: break-word; } .q-wrap { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; padding: 10px; /* Ensure padding on small screens */ } .q-card { max-width: 100%; box-sizing: border-box; }