/* ========================================================================== A) THEME & RESET - Define tokens (light/dark) - Minimal reset & base typography ========================================================================== */ /* === THEME TOKENS === */ :root { /* Brand refresh 2026-05-14: warm cream surface, hairline borders. Other tokens unchanged â€” brand-tokens.css provides shared family shell. */ /* Login-Untertitel (unter "Willkommen zurÃ¼ck") â€” beschreibt was diese Seite trainiert */ --nh-login-subtitle: "Trainieren Sie Aufmerksamkeit, GedÃ¤chtnis und Exekutivfunktionen."; --surface-0: #FBF8F2; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F4EFE6; --surface-4: #EAE2D2; --surface-5: #D7CDB7; --text-muted: #8C8067; --text-on-dark: #f8fafc; --fs-2xs: 0.82rem; --fs-xs: 0.9rem; --fs-sm: 1rem; --fs-md: 1.08rem; --fs-lg: 1.25rem; --fs-xl: 1.65rem; --fs-2xl: 2.25rem; --bg: var(--surface-0); /* page background */ --text: #2F2A25; /* primary text */ --card: var(--surface-1); /* card/panel surfaces */ --panel: var(--surface-2); /* side panels, lists */ --muted: var(--text-muted); /* subtle text */ --border: var(--surface-4); /* dividers */ --border-strong: var(--surface-5); --input-bg: var(--surface-1); --input-bg-alt: var(--surface-2); --disabled-bg: var(--surface-3); --disabled-border: var(--surface-4); --disabled-text: var(--text-muted); --neutral-400: color-mix(in oklab, var(--muted) 65%, var(--border) 35%); --accent: #D01C1F; --accent-secondary: #FFB56B; --accent-secondary-soft: #FFF3E8; --accent-contrast: #FFFFFF; --accent-readable: #A91518; --accent-soft-contrast: #A91518; --accent-soft: #FCEDED; --accent-text: var(--accent); /* accent used as TEXT on surfaces; overridden lighter in dark mode for contrast */ /* brand accent (links/buttons) */ --program-outline: color-mix(in oklab, var(--accent) 70%, var(--surface-0) 30%); --program-outline-glow: color-mix(in oklab, var(--accent) 35%, transparent); --shadow: rgba(0, 0, 0, 0.1); --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.08); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --target-size: 48px; --focus-ring: 0 0 0 4px rgba(15, 23, 42, 0.28); --page-title-size: var(--fs-xl); --settings-section-title-size: var(--fs-lg); --page-header-padding: 18px; --page-top-padding: 0px; --page-header-height: clamp(46px, 6vh, 56px); --page-header-pad-y: 0px; --page-header-gap: clamp(0.75rem, 1.4vw, 1.2rem); --page-header-content-gap: clamp(10px, 1.6vw, 18px); --profile-panel-margin: clamp(10px, 1.6vw, 20px); --progress-bar-height: 10px; /* Brand-family bridging (consumed by assets/brand-tokens.css) */ --ink: var(--text); --ink-2: #5A5247; --accent-deep: var(--accent-readable); --border-soft: #F2EBDC; } /* === DARK THEME OVERRIDES (scoped to .theme-dark on ) === */ body.theme-dark { --surface-0: #2f3135; --surface-1: #3a3f46; --surface-2: #424850; --surface-3: #4f5660; --surface-4: #5f6773; --surface-5: #727b88; --text-muted: #cfd6de; --text-on-dark: #f8fafc; --bg: var(--surface-0); --text: #f1f1f1; --card: var(--surface-1); --panel: var(--surface-2); --muted: var(--text-muted); --border: var(--surface-4); --border-strong: var(--surface-5); --input-bg: var(--surface-1); --input-bg-alt: var(--surface-2); --disabled-bg: var(--surface-3); --disabled-border: var(--surface-4); --disabled-text: var(--text-muted); --neutral-400: color-mix(in oklab, var(--muted) 60%, var(--border) 40%); --accent: #D01C1F; --accent-secondary: #FFB56B; --accent-secondary-soft: #FFF3E8; --accent-contrast: #FFFFFF; --accent-readable: #A91518; --accent-soft-contrast: #FFE1D6; --accent-soft: #5A1718; --accent-text: #FF7A7C; --program-outline: color-mix(in oklab, #D01C1F 70%, #ffffff 30%); --program-outline-glow: color-mix(in oklab, #D01C1F 40%, transparent); --shadow: rgba(0, 0, 0, 0.35); --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.32); --focus-ring: 0 0 0 4px rgba(15, 23, 42, 0.34); } /* === DARK THEME: stimulus & control surfaces that hardcode light backgrounds === These skeuomorphic panels use literal light colors for a "paper/screen" look that reads fine in light mode but renders as white blocks (often with invisible text) in dark mode. Re-point their surfaces/text to theme tokens for dark mode only; light mode is untouched. Specificity (0,2,1) beats the base/context rules. */ body.theme-dark .divide-speed-panel { background: var(--card); } body.theme-dark .divide-life-panel { background: var(--card); } body.theme-dark .divide-airport-code { background: var(--card); color: var(--text); border-color: var(--border); } body.theme-dark .departure-board { background: var(--card); color: var(--text); } body.theme-dark .departure-board-row { background: var(--panel); } body.theme-dark .departure-board-header { color: var(--muted); } body.theme-dark .cash-pay-stack { background: var(--card); } body.theme-dark .cash-wallet.is-drop-target { background: color-mix(in oklab, var(--accent) 16%, var(--card)); } /* DIVIDE 1 driving scene hardcodes a white sky (.cognitive-stage--divide-driving{background:#fff}); match the divide-tower dark sky in dark mode. */ body.theme-dark .cognitive-stage--divide-driving { background: color-mix(in oklab, var(--bg) 82%, #dbeafe); } /* DIVIDE 2 airport node face (::before) and node text hardcode light values. */ body.theme-dark .divide-airport-donut::before { background: var(--card); } body.theme-dark .divide-airport-node { color: var(--text); } /* DIVIDE 2 airport stage hardcodes background:#fff (styles.css ~17997); the airport scene covers the lower area but the stage's white shows through the top/header strip. Use the page bg so the header matches other active-game pages. */ body.theme-dark .cognitive-stage--divide-airport { background: var(--bg); } /* The airport scene is a bordered, gradient "panel" (.divide-airport-scene, ~18755). In dark mode it reads as a distinct lighter surface; make it blend with the page so the game is full-bleed (no visible panel) like the other modes. */ body.theme-dark .divide-airport-scene { background: transparent; border-color: transparent; box-shadow: none; } /* Native form controls follow the colour scheme; without this the selected value / dropdown options render with light-scheme black text on the styled dark background â†’ unreadable. */ body.theme-dark select, body.theme-dark input, body.theme-dark textarea { color-scheme: dark; } .site-lang-nav { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(17, 24, 39, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 28px rgba(17, 24, 39, 0.12); backdrop-filter: blur(14px); } .site-lang-nav--floating { position: fixed; top: 14px; right: 14px; z-index: 10000; } .site-lang-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .site-lang-nav__link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; padding: 0 9px; border-radius: 999px; color: #334155; font-size: 0.76rem; font-weight: 800; letter-spacing: 0; text-decoration: none; } .site-lang-nav__link:hover, .site-lang-nav__link.is-active { background: #111827; color: #fff; } @media (max-width: 640px) { .site-lang-nav--floating { top: 8px; right: 8px; transform: scale(0.92); transform-origin: top right; } } .site-lang-nav__link.is-disabled { color: color-mix(in oklab, var(--muted) 70%, transparent); pointer-events: none; } .site-lang-nav--footer, .site-lang-nav--inline { gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .site-lang-nav--footer .site-lang-nav__link, .site-lang-nav--inline .site-lang-nav__link { position: relative; min-width: auto; min-height: 28px; padding: 0.16rem 0.42rem; border-radius: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; } .site-lang-nav--footer .site-lang-nav__link + .site-lang-nav__link::before, .site-lang-nav--inline .site-lang-nav__link + .site-lang-nav__link::before { content: "|"; position: absolute; left: -0.05rem; color: color-mix(in oklab, var(--muted) 46%, transparent); font-weight: 600; } .site-lang-nav--footer .site-lang-nav__link:hover, .site-lang-nav--footer .site-lang-nav__link:focus-visible, .site-lang-nav--inline .site-lang-nav__link:hover, .site-lang-nav--inline .site-lang-nav__link:focus-visible { background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 0.24rem; } .site-lang-nav--footer .site-lang-nav__link.is-active, .site-lang-nav--inline .site-lang-nav__link.is-active { background: transparent; color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.24rem; } .neurohub-login-note { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(37, 99, 235, 0.18); border-radius: 8px; background: rgba(37, 99, 235, 0.07); color: #1e3a5f; line-height: 1.45; } /* === MINIMAL RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === BASE TYPOGRAPHY (no layout rules here) === */ html, body { height: 100%; } body { font-family: 'Montserrat', Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; font-size: var(--fs-md); } /* ========================================================================== B) APP SHELL & LAYOUT - Overall container and primary regions ========================================================================== */ .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; } /* Main area */ .main-content { position: relative; width: 100%; height: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; max-width: 100vw; box-sizing: border-box; overflow: hidden; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: safe center; align-items: center; transition: transform 0.3s ease; padding-top: 0; /* avoids overlap with fixed UI */ padding-bottom: 0; } /* Page loader for slow navigations */ .page-loader { --loader-track: color-mix(in oklab, var(--text) 25%, #ffffff 75%); --loader-accent: var(--accent); --loader-size: 96px; --loader-border: 7px; position: fixed; inset: 0; display: flex; flex-direction: column; gap: 22px; align-items: center; justify-content: center; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 9999; } .page-loader__label { margin: 0; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--loader-accent); } .page-loader__label:empty { display: none; } html.page-loader-active body, body.page-loader-active { overflow: hidden; } html.page-loader-active body > :not(.page-loader), body.page-loader-active > :not(.page-loader) { visibility: hidden; } .page-loader.is-visible { opacity: 1; pointer-events: auto; } .page-loader .loader { width: var(--loader-size); height: var(--loader-size); border-radius: 50%; position: relative; animation: pageLoaderRotate 1s linear infinite; } .page-loader .loader::before, .page-loader .loader::after { content: ""; box-sizing: border-box; position: absolute; inset: 0; border-radius: 50%; border: var(--loader-border) solid var(--loader-track); animation: pageLoaderClip 2s linear infinite; } .page-loader .loader::after { transform: rotate3d(90, 90, 0, 180deg); border-color: var(--loader-accent); } @keyframes pageLoaderRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pageLoaderClip { 0% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); } 50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); } 75%, 100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); } } /* When the fixed instruction panel is open */ .main-content.instructions-active { transform: none; } /* When settings/sidebar shifts content */ .main-content.shifted { transform: translateX(-21vw); } /* Main action buttons (settings + instructions) */ .main-actions { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 1vh auto; flex-wrap: wrap; } .author-text { font-size: var(--fs-xs); } .profile-status-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.5rem; margin: 0.5rem auto 0; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; font-size: var(--fs-lg); cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1)); transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .profile-status-btn.has-profile { outline: 3px solid var(--profile-color, #FFB56B); outline-offset: 2px; } .profile-status-btn:hover { transform: translateY(-1px); border-color: var(--accent); } .profile-status-btn.has-profile:hover { border-color: var(--profile-color, #FFB56B); } .profile-status-btn.is-disabled, .profile-status-btn.is-disabled:hover { opacity: 0.7; cursor: default; pointer-events: none; transform: none; border-color: var(--border); } .profile-status-icon { width: 26px; height: 26px; object-fit: contain; pointer-events: none; } .profile-status-color { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); background: transparent; display: none; } .profile-status-btn.has-profile .profile-status-color { display: inline-block; } /* ========================================================================== HOME + TRAINING PAGES (big tiles) ========================================================================== */ .home-page, .training-page, .screening-page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(1rem, 2.4vw, 2rem); padding: 18px; overflow-y: auto; z-index: 2; } .home-page { /* `safe center`: centre when the menu fits, but fall back to top-anchored when it overflows â€” otherwise a plain flex `center` pushes the top (Trainings) above scrollTop:0 where it can't be reached (the "lands in the middle, can't see Trainings" bug on phones/zoomed desktops). */ justify-content: safe center; padding: var(--page-top-padding) var(--page-header-padding); } .home-page.is-hidden, .training-page.is-hidden, .screening-page.is-hidden { display: none; } .home-header { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0.5rem, 1.2vw, 1rem); flex-wrap: wrap; } .home-header .logo { order: 2; margin: 0; } .home-header .home-title { order: 1; } .home-title { font-size: var(--fs-2xl); letter-spacing: 0.02em; line-height: 1.1; } .home-grid, .training-programs-grid { width: min(1100px, 100%); display: grid; gap: clamp(0.8rem, 1.6vw, 1.3rem); } .home-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(180px, 1fr)); } @media (max-width: 570px) { .home-grid, .home-grid.home-grid--has-profile { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } @media (max-width: 380px) { .home-grid, .home-grid.home-grid--has-profile { grid-template-columns: 1fr; } } .home-grid.home-grid--no-profile { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .training-programs-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); } @media (max-width: 1100px) { .home-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .home-grid.home-grid--no-profile { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .training-programs-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); } } @media (max-width: 860px) { .home-grid, .training-programs-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 540px) { .home-grid, .training-programs-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) and (orientation: portrait) { .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); } } @media (max-height: 820px) and (orientation: landscape) { .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); } } @media (max-width: 820px) { .main-content { justify-content: flex-start; } .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); } } .home-toggle-row { width: min(1100px, 100%); display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .home-tile { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.1rem, 2vw, 1.5rem); min-height: 150px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-align: center; cursor: pointer; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .home-tile--compact { flex-direction: row; min-height: auto; padding: 0.6rem 1.4rem; border-radius: 999px; gap: 0.5rem; width: auto; } .home-tile--compact .home-icon { width: 22px; height: 22px; } .home-tile--compact .home-label { font-size: var(--fs-sm); } .home-tile:active { transform: none; } .home-tile:focus-visible { outline: none; } .home-tile:focus:not(:focus-visible) { outline: none; } @media (hover: hover) and (pointer: fine) { .home-tile:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); } } .home-icon { width: clamp(36px, 4vw, 46px); height: clamp(36px, 4vw, 46px); object-fit: contain; pointer-events: none; } .home-label { font-weight: 700; font-size: var(--fs-md); } .home-sub { font-size: var(--fs-sm); color: var(--muted); } .home-tile--primary { background: var(--card); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 28%, var(--border)); } .home-tile--primary .home-label, .home-tile--primary .home-sub { color: var(--accent); } .home-tile--primary:hover { filter: brightness(1.04); } .home-tile--danger { background: #fff5f5; border-color: rgba(229, 72, 77, 0.35); color: #a72f36; } .home-tile--danger .home-label { color: #a72f36; } .home-tile--danger:hover { background: #ffe9ea; border-color: #e5484d; } body.theme-dark .home-tile { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); } body.theme-dark .home-tile--danger { background: rgba(229, 72, 77, 0.18); border-color: rgba(229, 72, 77, 0.5); color: #ffd2d4; } body.theme-dark .home-tile--danger .home-label { color: #ffd2d4; } .home-footer { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; color: var(--muted); } .home-page .profile-status-btn { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: 20px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); font-size: inherit; } .home-page .profile-status-text { font-size: var(--fs-sm); color: var(--muted); } .home-page .profile-status-color { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--card); display: none; } .home-page .profile-status-btn.has-profile .profile-status-color { display: inline-block; } .home-page .profile-status-btn:hover { transform: translateY(-3px); } .training-page { background: var(--bg); } .screening-page { background: var(--bg); } .training-page, .screening-page { --page-top-padding: var(--page-header-padding, 18px); } .training-page { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; justify-content: center; justify-items: stretch; align-items: stretch; padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); } .screening-page { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; justify-content: center; justify-items: stretch; align-items: stretch; padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); } .training-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); width: 100%; } .page-header { display: grid; /* Side columns keep at least the back button's content width so it never overflows into the centred title on narrow screens; when space is tight the title shifts toward the (empty) right column instead of colliding with "ZurÃ¼ck". */ grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: var(--page-header-gap); padding: var(--page-header-pad-y) var(--page-header-padding); min-height: var(--page-header-height); } .page-header .page-title { min-width: 0; } .page-header .page-back { justify-self: start; } .page-header .page-title { justify-self: center; text-align: center; font-size: var(--page-title-size); font-weight: 800; } .page-header .page-spacer { justify-self: end; } .instructions-back-button, .programs-back-button { text-decoration: none; } .training-header { width: 100%; max-width: none; margin: 0; align-self: start; justify-self: stretch; } #trainingBackBtn { justify-self: start; } .training-title { font-weight: 800; font-size: var(--page-title-size); color: var(--text); text-align: center; justify-self: center; } .training-body { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; margin: 0; align-self: stretch; } .training-layout { width: 100%; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; } .training-deck { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: clamp(1rem, 2vw, 1.6rem); overflow: auto; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; } .training-deck #modeButtonBar { flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .training-deck .training-modes { width: 100%; grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); justify-content: center; align-items: start; } .screening-body { width: 100%; max-width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; flex: 1; min-height: 0; } .screening-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(1rem, 2vw, 1.6rem); flex: 1; min-height: 0; } .screening-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 26%, 300px); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 14px; overflow: auto; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } @media (max-width: 980px) { .screening-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .screening-grid { grid-template-columns: 1fr; grid-auto-flow: row; } } .screening-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: clamp(1.2rem, 2.2vw, 1.8rem); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); text-align: left; } .screening-grid .screening-card { background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); padding: clamp(1rem, 2vw, 1.6rem); overflow: visible; } .screening-grid > .screening-card { min-width: 0; max-width: 100%; width: 100%; justify-self: stretch; } #screeningSetup.is-hidden + .screening-actions, #screeningSummary.is-hidden + .screening-actions { display: none; } .screening-section-title { font-size: var(--fs-md); font-weight: 800; margin-bottom: 0.6rem; } .screening-note { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 0.2rem; } .screening-mode-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.8rem; } .screening-select-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.55rem; margin-top: 0.8rem; } .screening-select-actions .btn { --btn-h: 40px; width: 100%; padding: 0 0.9rem; } .screening-mode-group { display: grid; gap: 0.55rem; } .screening-mode-group-title { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 800; } .screening-mode-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .screening-mode-btn { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 0.85rem; padding: 0.65rem 2.8rem 0.65rem 1rem; min-height: clamp(64px, 7vw, 86px); border-radius: 12px; border: 1px solid color-mix(in oklab, var(--border) 65%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 35%, transparent); background: transparent; color: var(--text); text-align: left; cursor: pointer; position: relative; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .screening-mode-badges { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; } .screening-mode-badge { width: 20px; height: 20px; object-fit: contain; } .screening-mode-btn.is-screened::after { content: "\2713"; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 26px; height: 26px; border-radius: 999px; background: #e7f6ee; border: 2px solid #22c55e; color: #15803d; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; } .screening-mode-btn.is-selected.is-screened::after { background: var(--text-on-dark); } .screening-mode-btn .mode-icon { width: clamp(32px, 3vw, 46px); height: clamp(32px, 3vw, 46px); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .screening-mode-btn .mode-icon-img { width: 100%; height: 100%; object-fit: contain; } .screening-mode-btn:hover { border-color: color-mix(in oklab, var(--accent) 25%, var(--border)); background: color-mix(in oklab, var(--card) 90%, var(--accent) 10%); } .screening-mode-btn.is-selected { background: color-mix(in oklab, var(--accent) 12%, var(--card)); border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); } .screening-mode-btn.is-selected, .screening-mode-btn.is-selected .screening-mode-name { color: var(--text); } .screening-mode-btn.is-selected .screening-mode-meta { color: var(--muted); } .screening-mode-btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; } .screening-mode-name { font-weight: 700; font-size: var(--fs-md); line-height: 1.2; } .screening-mode-meta { color: var(--ink-2); font-size: var(--fs-sm); } .screening-total-estimate { font-size: var(--fs-md); font-weight: 700; margin: 0.4rem 0 0.8rem; } .screening-mode-breakdown { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--fs-sm); } .screening-breakdown-row { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px dashed var(--border); padding-bottom: 0.35rem; } .screening-breakdown-row:last-child { border-bottom: none; } .screening-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; } #screeningStartBtn { --btn-h: clamp(50px, 6vh, 62px); padding: 0 2.4rem; font-size: var(--fs-lg); font-weight: 700; } #screeningSaveBtn { --btn-h: clamp(50px, 6vh, 62px); padding: 0 2.4rem; font-size: var(--fs-lg); font-weight: 700; } .screening-feedback { color: var(--muted); text-align: center; margin-top: 0; margin-bottom: 0.2rem; } .screening-feedback:empty { display: none; margin: 0; } .screening-summary-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.8rem; } .screening-summary { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .screening-summary-card { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .screening-summary-card .screening-summary-list { flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; } .screening-summary-card .screening-actions { margin-top: auto; padding-top: var(--page-actions-pad, 1rem); padding-bottom: var(--page-actions-pad, 1rem); } .screening-panel.is-hidden, .screening-summary.is-hidden { display: none; } .screening-summary-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.7rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); } .screening-summary-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 15%, var(--card)); font-weight: 700; font-size: var(--fs-sm); } .screening-summary-pill.preset-easy, .screening-preset-btn.preset-easy { background: #22c55e; color: var(--text-on-dark); border-color: transparent; } .screening-summary-pill.preset-medium, .screening-preset-btn.preset-medium { background: #f59e0b; color: var(--text-on-dark); border-color: transparent; } .screening-summary-pill.preset-hard, .screening-preset-btn.preset-hard { background: #ef4444; color: var(--text-on-dark); border-color: transparent; } /* Plain-language interpretation line + confidence colour band (green=clear, amber=some spielraum, grey=no data). Tone reflects how reliable the recommendation is, never "good/bad" performance. */ .screening-interpretation { margin: 0.15rem 0 0.3rem; font-size: var(--fs-sm); color: var(--text); line-height: 1.3; } .screening-summary-row[data-tone="good"] { border-left: 4px solid #22c55e; } .screening-summary-row[data-tone="ok"] { border-left: 4px solid #f59e0b; } .screening-summary-row[data-tone="low"] { border-left: 4px solid #fb923c; } .screening-summary-row[data-tone="none"] { border-left: 4px solid var(--border); } .screening-summary-pill.tone-good { background: color-mix(in oklab, #22c55e 22%, var(--card)); color: var(--text); } .screening-summary-pill.tone-ok { background: color-mix(in oklab, #f59e0b 26%, var(--card)); color: var(--text); } .screening-summary-pill.tone-low { background: color-mix(in oklab, #fb923c 24%, var(--card)); color: var(--text); } .screening-summary-pill.tone-none { background: color-mix(in oklab, var(--border) 45%, var(--card)); color: var(--muted); } .screening-summary-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .screening-summary-details { grid-column: 1 / -1; display: grid; gap: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); } .screening-summary-details.is-hidden { display: none; } .screening-detail-level { border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem; background: var(--card); display: grid; gap: 0.35rem; } .screening-detail-title { font-weight: 700; font-size: var(--fs-sm); } .screening-detail-meta { font-size: var(--fs-xs); color: var(--muted); } .screening-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.3rem 1rem; } .screening-detail-row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-sm); } .screening-detail-label { color: var(--muted); } .screening-detail-value { font-weight: 600; } .screening-detail-empty { color: var(--muted); font-size: var(--fs-sm); } .screening-selection-status { margin-top: 0.35rem; font-size: var(--fs-sm); font-weight: 700; color: color-mix(in oklab, var(--accent) 75%, var(--text) 25%); } .screening-summary-actions .btn.is-selected { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent); } .screening-summary-actions .btn.btn--ghost.is-selected { background: color-mix(in oklab, var(--accent) 12%, var(--card)); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); } .screening-summary-actions .btn[data-action="apply-adaptive"].is-selected { border-color: #FFD4A8; box-shadow: 0 0 0 2px color-mix(in oklab, #FFD4A8 70%, transparent); } .screening-preset-btn.preset-easy.is-selected, .screening-preset-btn.preset-medium.is-selected, .screening-preset-btn.preset-hard.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 65%, transparent); } .screening-preset-btn.preset-easy.is-selected { background: #22c55e; color: var(--text-on-dark); } .screening-preset-btn.preset-medium.is-selected { background: #f59e0b; color: var(--text-on-dark); } .screening-preset-btn.preset-hard.is-selected { background: #ef4444; color: var(--text-on-dark); } .screening-level-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: var(--bg); z-index: 1200; pointer-events: none; } .screening-level-overlay.active { display: flex; } .screening-level-button { min-width: min(90vw, 420px); padding: 1rem 2rem; border-radius: 999px; font-weight: 800; font-size: var(--fs-xl); text-align: center; background: var(--neutral-400); color: var(--text-on-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); border: 3px solid rgba(255, 255, 255, 0.6); appearance: none; -webkit-appearance: none; cursor: default; transition: opacity 0.2s ease; } .screening-level-button.is-hidden { opacity: 0; } body.screening-level-active #mainContent, body.screening-level-active #gameArea, body.screening-level-active #trialProgressBar, body.screening-level-active .game-action-buttons { visibility: hidden; } .screening-level-button.preset-easy { background: #22c55e; } .screening-level-button.preset-medium { background: #f59e0b; } .screening-level-button.preset-hard { background: #ef4444; } @media (max-width: 720px) { .screening-mode-group-grid { grid-template-columns: 1fr; } .screening-summary-row { grid-template-columns: 1fr; justify-items: start; } .screening-summary-actions { width: 100%; justify-content: flex-start; } } .training-modes { --training-column-width: clamp(170px, 17vw, 260px); width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: start; justify-content: center; overflow-x: hidden; overflow-y: visible; scrollbar-gutter: stable; } .training-modes.is-hidden { display: none; } .training-modes.is-scrollable { overflow-x: auto; padding-bottom: 0.5rem; } /* Category band headings inside the training grid. Each cognitive domain (Aufmerksamkeit, Exekutiv, Gedächtnis, Raum, Alltag) gets a full-width labelled separator so the 28 modes are scannable by domain. The auto-fit grid flows that category's buttons beneath it. */ .training-mode-group-title { grid-column: 1 / -1; margin: clamp(0.5rem, 1.4vw, 1rem) 0 0; padding: 0 0 0.35rem; font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 800; letter-spacing: 0.02em; color: var(--text); border-bottom: 2px solid color-mix(in oklab, var(--accent) 35%, var(--border)); } .training-mode-group-title:first-child { margin-top: 0; } .training-mode-group-title[data-group="attention"] { border-bottom-color: color-mix(in oklab, #d01c1f 55%, var(--border)); } .training-mode-group-title[data-group="executive"] { border-bottom-color: color-mix(in oklab, #2563eb 55%, var(--border)); } .training-mode-group-title[data-group="memory"] { border-bottom-color: color-mix(in oklab, #d4a017 60%, var(--border)); } .training-mode-group-title[data-group="space"] { border-bottom-color: color-mix(in oklab, #16a34a 55%, var(--border)); } .training-mode-group-title[data-group="alltag"] { border-bottom-color: color-mix(in oklab, #7c3aed 55%, var(--border)); } /* Full-width flex break: forces favourite programs onto their own row below favourite trainings. */ .training-favorite-break { flex-basis: 100%; width: 100%; height: 0; } .training-modes--empty { display: block; } .empty-state { width: min(560px, 100%); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid color-mix(in oklab, var(--accent-secondary) 55%, var(--border)); border-radius: var(--radius-lg); background: var(--accent-secondary-soft); color: var(--text); text-align: center; box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08); } .empty-state h3 { margin: 0 0 0.45rem; font-size: var(--fs-lg); } .empty-state p { margin: 0; color: var(--muted); } body.no-training-modes .settings-mode-tabs, body.no-training-modes .settings-column-right { display: none; } body.no-training-modes .settings-layout { grid-template-columns: minmax(0, 1fr); } body.no-training-modes .screening-mode-list { display: block; } body.no-training-modes .screening-grid { grid-template-columns: minmax(0, 1fr); } body.no-training-modes .screening-grid .screening-card:nth-child(2), body.no-training-modes .screening-actions--setup { display: none; } .training-column { width: 100%; display: flex; flex-direction: column; gap: clamp(0.7rem, 1.2vw, 1rem); } .training-page .training-mode-btn { width: 100%; appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.05rem, 1.9vw, 1.5rem); min-height: clamp(126px, 16.8vw, 158px); border-radius: 20px; border: 2px solid var(--border); background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .training-page .training-mode-btn .mode-gear-btn { position: absolute; top: clamp(8px, 1vw, 12px); right: clamp(8px, 1vw, 12px); width: clamp(44px, 3.6vw, 48px); height: clamp(44px, 3.6vw, 48px); border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.92); color: var(--text); display: grid; place-items: center; font-size: calc(var(--fs-md) * 1.5); line-height: 1; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12); cursor: pointer; user-select: none; } body.theme-dark .training-page .training-mode-btn .mode-gear-btn { background: color-mix(in oklab, var(--card) 35%, #000000 65%); border-color: color-mix(in oklab, var(--border) 70%, #000000 30%); color: var(--text); } .training-page .training-mode-btn .mode-gear-btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; } .training-page .training-mode-btn .mode-icon { width: clamp(30px, 3.2vw, 50px); height: clamp(30px, 3.2vw, 50px); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .training-page .training-mode-btn .mode-icon-img { width: 100%; height: 100%; object-fit: contain; } .mode-dot { width: clamp(12px, 1.2vw, 18px); height: clamp(12px, 1.2vw, 18px); border-radius: 999px; background: #FFB56B; } .mode-dot--blue { background: var(--accent); } .mode-dot--green { background: #22c55e; } .mode-dot--red { background: #ef4444; } .mode-dot--empty { background: transparent; border: 2px dashed var(--accent); } .training-page .training-mode-btn:active { transform: none; } .training-page .training-mode-btn:focus-visible { outline: none; } .training-page .training-mode-btn:focus:not(:focus-visible) { outline: none; } .training-programs { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.2vw, 1rem); align-items: stretch; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow-y: auto; scrollbar-gutter: stable; } .training-programs.is-hidden { display: none; } .training-programs .program-btn { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.05rem, 1.9vw, 1.5rem); min-height: clamp(126px, 16.8vw, 158px); border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; width: 100%; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .training-programs .program-btn .program-btn-icon { width: clamp(30px, 3.2vw, 50px); height: clamp(30px, 3.2vw, 50px); object-fit: contain; pointer-events: none; } .training-programs .program-btn:active { transform: none; } .training-programs .program-btn:focus:not(:focus-visible) { outline: none; } @media (hover: hover) and (pointer: fine) { .training-page .training-mode-btn:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); } .training-programs .program-btn:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); } } .training-programs .program-btn:focus-visible { outline: none; } .training-programs .program-btn.is-selected { box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); } .training-programs .program-btn-actions { position: absolute; top: 10px; right: 10px; display: inline-flex; gap: 0.35rem; } @media (max-width: 900px) { .training-modes { grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); } .training-deck .training-modes { grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); } } @media (max-width: 620px) { .training-modes { grid-template-columns: repeat(auto-fit, minmax(var(--training-column-width), 1fr)); } } @media (max-height: 820px) { .training-page { gap: clamp(0.6rem, 1.4vh, 1rem); padding-bottom: var(--page-bottom-padding, 18px); grid-template-rows: auto auto; } .training-body { align-self: stretch; justify-content: flex-start; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .screening-page { gap: clamp(0.6rem, 1.4vh, 1rem); padding-bottom: var(--page-bottom-padding, 18px); grid-template-rows: auto auto; } .screening-body { min-height: 0; } } .training-start { margin-top: 0.5rem; } .training-page .mode-button-bar { position: static; top: auto; left: auto; transform: none; width: 100%; max-width: none; padding: 0; gap: 1rem; } .training-page .mode-group-row, .training-page .mode-group-panels { width: 100%; } body.profile-single #openProfilePanel { display: none; } body.game-active .home-page, body.game-active .training-page, body.game-active .screening-page { display: none; } /* Shared layout for right pane */ .main-content, .tabs-right { position: relative; width: 100%; max-width: 100vw; overflow-wrap: break-word; box-sizing: border-box; } /* Two-column shell for docs/infos */ .vertical-tabs-wrapper { display: flex; width: 100%; height: 100%; } .tabs-left { width: 200px; min-width: 200px; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding-right: 0.5rem; } .tabs-right { position: relative; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; overflow-x: auto; } /* Nav stacks inside the left column */ .vertical-tabs { display: flex; height: 100%; } .main-topic-list, .sub-tab-list { list-style: none; padding: 0; margin: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--border); } /* Content area on the right */ .info-content-area { flex-grow: 1; padding: 1rem; overflow-y: auto; } /* Small-screen padding tweak for right pane */ @media (max-width: 768px) { .tabs-right { padding: 0.5rem; } } /* ========================================================================== C) NAVIGATION & TABS - Tabs, active/hover states ========================================================================== */ /* Wrapper that holds the two nav lists (topics + subtabs) */ .vertical-tabs { display: flex; height: 100%; } /* Left-side nav lists */ .main-topic-list, .sub-tab-list { overflow-x: hidden; overflow-y: auto; max-width: 100%; list-style: none; padding: 0; margin: 0; background: var(--panel); border-right: 1px solid var(--border); } /* Individual tab items */ .main-tab, .sub-tab-list li { padding: 10px; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: background 0.2s; } /* Hover state */ .main-tab:hover, .sub-tab-list li:hover { background-color: var(--surface-3); /* tokenized hover */ } /* Active state */ .main-tab.active, .sub-tab-list li.active { background-color: var(--text); color: white; } /* ========================================================================== D) MEDIA & TYPOGRAPHY UTILITIES - Generic text and image helpers ========================================================================== */ /* --- Typography utilities --- */ .bold { font-weight: 700; } /* --- Image helpers --- */ .tabs-right img, .page-section img { max-width: 100%; height: auto; border-radius: 1vw; box-shadow: 0 2px 8px var(--shadow); display: block; margin: 1rem auto; } img[src*="portrait.jpg"] { max-height: 300px; width: auto; display: block; margin: 0 auto; margin-bottom: 2rem; } /* --- Text sizing in right content pane --- */ .tabs-right p, .tabs-right li, .tabs-right span { font-size: var(--fs-sm); line-height: 1.6; } /* Branding: logo sizing (added) */ /* Make logos smaller */ .login-logo { /* login page logo */ width: auto; max-width: clamp(80px, 11vw, 130px); /* make it small; change to 32px if you want even smaller */ height: auto; display: block; margin: 0 auto 0.5rem; } #logoMain, /* app (main_content.html) logo â€” Ã¼ber die HÃ–HE gesteuert, damit das GameMenu auf allen Schwesterseiten gleich aussieht, unabhÃ¤ngig vom SeitenverhÃ¤ltnis der Logo-Grafik (KT 512x360, ST 512x512). */ #mainContent .logo { height: clamp(68px, 8.4vw, 105px); width: auto; max-width: 100%; display: block; margin: 0 auto 0.5rem; } /* ========================================================================== E) GLOBAL BUTTONS - One system with variants; prefer classes over IDs for styling ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h, 40px); padding: 0 1rem; border-radius: var(--radius, 8px); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: var(--fs-sm); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1)); transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; font-family: 'Montserrat', sans-serif; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); text-decoration: none; } /* Variants */ .btn--primary { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } .btn--ghost { background: transparent; border: 1px solid var(--border); } .btn--back { --btn-h: 46px; padding: 0 1.25rem; border-radius: 999px; font-weight: 700; background: color-mix(in oklab, var(--accent) 12%, var(--card) 88%); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); color: var(--text); } .btn--back:hover { background: color-mix(in oklab, var(--accent) 18%, var(--card) 82%); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); } .btn--back .btn-icon { width: 20px; height: 20px; } body.theme-dark .btn--back { background: color-mix(in oklab, var(--accent) 35%, var(--panel) 65%); border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); color: var(--text); } body.theme-dark .btn--back:hover { background: color-mix(in oklab, var(--accent) 45%, var(--panel) 55%); border-color: color-mix(in oklab, var(--accent) 65%, var(--border)); } .btn--danger { background: #e5484d; color: var(--text-on-dark); border-color: transparent; } .btn--icon { display: inline-flex; align-items: center; gap: 0.5rem; } .btn--icon .btn-icon { width: 18px; height: 18px; object-fit: contain; pointer-events: none; } #logoutBtn.icon-btn { top: 1vh; left: 1vw; } #dataBtn.icon-btn { bottom: 1vh; left: 1vw; } #openProfilePanel.icon-btn { bottom: 1vh; right: 1vw; } #settingsBtn.icon-btn { top: 1vh; right: 1vw; } /* Special layout variants */ .btn--bar { width: 100%; height: 50px; border-radius: 0; justify-content: center; } .btn--fab { width: 60px; height: 60px; border-radius: 50%; box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.2)); position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; } .close-button { background: none; border: none; color: var(--text); cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: .25rem .4rem; border-radius: .4rem; transition: background .2s, color .2s, transform .08s; } .close-button:hover { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); } .close-button:active { transform: scale(0.98); } /* Pin the close button inside these cards (top-right) */ .settings-panel-centered .close-button { position: absolute; top: 10px; right: 10px; } /* === Button sizing helper for a larger Start button === */ .btn--xl { --btn-h: 64px; padding: 0 3rem; font-size: var(--fs-xl); } /* iOS app-readiness (light): suppress the long-press callout / image-save menu and text selection on the play surfaces, and remove the 300ms double-tap-zoom delay on tappable controls so taps feel native in a WKWebView. (Inputs/data-interface keep normal selection â€” not targeted here.) */ .cognitive-stage, .cognitive-demo-screen, .playable-demo-gamearea { -webkit-touch-callout: none; } .cognitive-response-btn, .home-tile, .mode-btn, .training-mode-btn, .btn, .playable-demo-card-btn, .brand-bottom-nav__item { touch-action: manipulation; } /* === Game action buttons (skip + exit) === */ .game-action-buttons { position: fixed; /* Keep the Verlassen/skip buttons clear of the notch / rounded corners on iOS (safe-area). */ top: calc(var(--progress-bar-height) + 1vh + env(safe-area-inset-top)); right: calc(1vw + env(safe-area-inset-right)); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: clamp(0.4rem, 1vw, 0.9rem); z-index: 2002; max-width: calc(100vw - 2vw); } #exitGameBtn { font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-md); /* smaller than Start */ padding: 1vh 1.7vw; /* slim padding */ background: #D01C1F; color: white; border: none; border-radius: 12px; cursor: pointer; z-index: 2002; transition: background 0.3s ease; } #exitGameBtn:hover { background: #2a5674; } #skipStepBtn { font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-md); padding: 1vh 1.7vw; background: var(--neutral-400); color: var(--text-on-dark); border: none; border-radius: 12px; cursor: pointer; z-index: 2002; transition: background 0.3s ease; } #skipStepBtn:hover { background: color-mix(in oklab, var(--neutral-400) 85%, #000000 15%); } /* ========================================================================== F) FORMS - Login form, generic inputs, selects, groups, messages ========================================================================== */ /* Shared form wrapper */ .form { display: flex; flex-direction: column; gap: 1rem; } .form .field { display: flex; flex-direction: column; margin-bottom: 1rem; } .form label { font-size: var(--fs-sm); margin-bottom: 0.3rem; font-weight: 600; color: var(--text); } .form input, .form select, .form textarea { padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius, 6px); background: var(--card); color: var(--text); font-size: var(--fs-sm); } .form .help { font-size: var(--fs-2xs); color: var(--muted); margin-top: 0.25rem; } /* Login form box */ .login-form { display: flex; flex-direction: column; width: 100%; max-width: 440px; gap: 1.15rem; background: var(--card); padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: 18px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14); border: 1px solid rgba(15, 23, 42, 0.12); transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Center the primary login form inside the left card */ .login-left-card .login-form, .login-left .login-form { margin-left: auto; margin-right: auto; width: min(100%, 520px); } .login-form label { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 0.35rem; letter-spacing: 0.01em; } .login-form input, .login-form select, .login-form textarea { padding: clamp(0.75rem, 1.3vw, 0.95rem); font-size: var(--fs-md); border: 1px solid rgba(15, 23, 42, 0.16); border-radius: 12px; background: var(--input-bg-alt); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; } .login-form input:focus, .login-form select:focus, .login-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.16); background: var(--input-bg); } .login-form:focus-within { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18); } /* Compact variant used inside register/reset/delete panels */ .login-form.small-form { width: min(90vw, 560px); background: var(--card); padding: clamp(1.1rem, 2.2vw, 1.6rem); border-radius: 14px; box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.1)); } .login-form.small-form h2 { font-weight: 700; font-size: var(--fs-lg); color: var(--text); margin-bottom: 0.75rem; text-align: center; } .register-grid { display: grid; grid-template-columns: 1fr 2fr; column-gap: 0.75rem; row-gap: 0.85rem; align-items: center; } .register-row { display: contents; } .register-grid label { margin-bottom: 0; } .register-input-wrap { position: relative; width: 100%; } .register-input-wrap input, .register-input-wrap select { width: 100%; box-sizing: border-box; } .register-secondary-label { display: block; margin-top: 0.75rem; } .register-progress { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.35rem 0 1rem; } .register-progress__bar { height: 6px; background: rgba(0, 0, 0, 0.08); border-radius: 999px; overflow: hidden; } .register-progress__fill { height: 100%; width: 20%; background: var(--accent); transition: width 0.2s ease; } .register-progress__label { font-size: var(--fs-xs); color: var(--muted); text-align: right; } .register-steps { display: block; } .register-step { display: none; } .register-step.active { display: block; } .register-help { font-size: var(--fs-xs); color: var(--muted); margin: 0.35rem 0 0.9rem; } .register-actions { display: flex; gap: 0.75rem; justify-content: space-between; margin-top: 0.5rem; flex-wrap: wrap; } .register-actions .login-btn { flex: 1 1 auto; } .register-submit { display: none; } .pending-container { display: block; } .pending-msg { display: flex; align-items: center; gap: 0.6rem; line-height: 1.35; } .hourglass-img { width: 42px; height: auto; } .pending-text { display: inline-block; } .pending-actions { margin-top: 1rem; display: flex; justify-content: center; } /* Row of login buttons */ .login-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; } /* Tighter spacing for the main login form */ #loginForm { gap: 0.9rem; padding: clamp(1.4rem, 2.5vw, 2rem); } #loginForm #loginError { margin-top: 0.25rem; } #loginForm #loginError:empty { display: none; } #loginForm .login-actions { margin-top: 0.25rem; justify-content: center; flex-wrap: wrap; gap: 0.75rem; } #loginForm .login-actions .login-btn { display: inline-flex; margin: 0; } .login-divider { display: flex; align-items: center; gap: 0.75rem; margin: 0.8rem 0 0.4rem; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .login-actions--oauth { justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; } .login-actions--oauth .login-btn { width: 52px; height: 52px; padding: 0; border-radius: 16px; } .oauth-icon { width: 24px; height: 24px; display: block; } .oauth-icon svg { width: 100%; height: 100%; display: block; } .login-btn--apple .oauth-icon svg { overflow: visible; transform: translateX(1px); } .login-btn--oauth { border-color: color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--card) 92%, #ffffff 8%); } .login-btn--google { border-color: #ea4335; } .login-btn--apple { border-color: #111827; color: #111827; } .login-btn--microsoft { border-color: #D01C1F; } .login-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: var(--fs-md); padding: 0.75rem 1.25rem; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.1)); transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16); } .login-btn:active { transform: translateY(0); } .login-btn:disabled, .login-btn.is-disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); cursor: not-allowed; box-shadow: none; transform: none; } /* Primary action (Login, Submit) */ .login-btn--primary, #loginBtn { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; display: block; margin: 0.5vh auto 0 auto; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.3); } .login-btn--primary:hover, #loginBtn:hover { filter: brightness(1.03); } /* Light orange action (e.g., Register) */ .login-btn--lightblue { background: var(--panel); color: #D01C1F; border-color: rgba(15, 23, 42, 0.18); display: block; margin: 0.5vh auto 0 auto; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12); } .login-btn--lightblue:hover { filter: brightness(1.03); } /* Ghost / neutral (ZurÃ¼ck, etc.) */ .login-btn--ghost { background: var(--panel); border: 1px solid rgba(15, 23, 42, 0.15); } .login-btn.danger { background: #e5484d; color: var(--text-on-dark); border-color: transparent; } .login-btn.danger:hover { filter: brightness(0.95); } /* Password visibility toggle (positioned within input wrapper) */ .toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; } /* Feedback / error messages */ .feedback-msg, #loginError, #resetMessage { font-size: var(--fs-sm); margin-top: 0.5rem; } .feedback-msg { color: green; } #loginError { color: red; } #resetMessage { color: orange; } /* Layout helpers */ .input-item { display: flex; flex-direction: column; margin-bottom: 1rem; border-radius: 8px; } .input-select { width: 100%; max-width: 200px; } .grid-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; } /* ========================================================= Checkbox + Radio Coloring (use brand accent) ========================================================= */ /* Default border + background */ input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; background: var(--card); cursor: pointer; position: relative; transition: all 0.15s ease; } /* Hover border tint */ input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); } /* Focus ring */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); } input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--accent); border-color: var(--accent); } /* Checkmark for checkboxes */ input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 0; /* fill the parent */ margin: auto; /* centers inside */ width: 5px; /* proportionate stroke size */ height: 9px; border: solid var(--text-on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); box-sizing: border-box; } /* Radio dot */ input[type="radio"]:checked::after { content: ""; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-on-dark); } /* Dark mode consistency */ body.theme-dark input[type="checkbox"], body.theme-dark input[type="radio"] { border-color: var(--border); background: var(--card); } body.theme-dark input[type="checkbox"]:checked, body.theme-dark input[type="radio"]:checked { background-color: var(--accent); border-color: var(--accent); } /* Number input tweaks */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; /* Firefox */ } /* === Login panels (compat with index.php toggling) === */ .form-panel { position: absolute; inset: 0; /* top/right/bottom/left = 0 */ background: rgba(248, 250, 252, 0.96); display: none; /* hidden by default */ align-items: center; justify-content: center; z-index: 100; /* above the base login form */ backdrop-filter: blur(6px); } .form-panel.active { display: flex; } /* The panels live inside the left column, anchor them there */ .login-left { position: relative; } /* === Welcome panel layout === */ #welcomePanel { align-items: stretch; justify-content: flex-start; flex-direction: column; padding: clamp(8px, 2vw, 18px) 0 0; gap: clamp(0.75rem, 1.6vw, 1.2rem); overflow: visible; } #welcomePanel #welcomeTitle { margin: 0; font-size: var(--fs-sm); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); } #welcomePanel #welcomeSubtitle { margin: 0; color: var(--text); font-size: var(--fs-lg); font-weight: 600; text-align: center; } #welcomePanel #welcomeFields { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.1rem); width: 100%; flex: 0 0 auto; margin-top: 4px; align-items: start; padding: clamp(14px, 2.2vw, 20px); border-radius: 18px; background: color-mix(in oklab, var(--panel) 80%, transparent); border: 1px solid color-mix(in oklab, var(--border) 85%, transparent); width: min(100%, 760px); margin-left: auto; margin-right: auto; text-align: left; } #section-account #welcomePanel { align-items: center; } #section-account #welcomePanel #welcomeTitle, #section-account #welcomePanel #welcomeSubtitle { align-self: center; text-align: center; } #welcomePanel #welcomeFields .welcome-credential { grid-column: 1 / -1; } #welcomePanel #welcomeFields .field { margin-bottom: 0; min-width: 0; } #welcomePanel .welcome-span { grid-column: 1 / -1; } #welcomePanel .welcome-security-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; margin-bottom: 0.75rem; } #welcomePanel .welcome-security.is-hidden { display: none; } #welcomePanel .welcome-security-actions .login-btn { flex: 1 1 240px; max-width: 320px; } #welcomePanel .welcome-security-form { display: none; margin-top: clamp(0.7rem, 1.4vw, 1rem); padding: clamp(0.8rem, 1.6vw, 1.1rem); border-radius: 14px; border: 1px dashed color-mix(in oklab, var(--border) 70%, transparent); background: var(--card); } #welcomePanel .welcome-security-form.is-open { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } #welcomePanel .welcome-security-form .login-actions { justify-content: flex-start !important; padding: 0; margin-top: 0.4rem; width: 100%; } #welcomePanel .welcome-security-form .login-actions .login-btn { flex: 0 0 auto; max-width: none; } #welcomePanel label { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 0.35rem; letter-spacing: 0.01em; } #welcomePanel input, #welcomePanel select, #welcomePanel textarea { padding: clamp(0.75rem, 1.3vw, 0.95rem); font-size: var(--fs-md); border: 1px solid rgba(15, 23, 42, 0.16); border-radius: 12px; background: var(--input-bg-alt); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; } #welcomePanel input:focus, #welcomePanel select:focus, #welcomePanel textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.16); background: var(--input-bg); } #welcomePanel .help { font-size: var(--fs-xs); line-height: 1.5; } #welcomePanel .welcome-progress { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; align-items: start; } #welcomePanel .welcome-progress > div { width: 100%; } /* Keep 'Passwort' label, input, and toggle inline, never overlapping */ #welcomePanel .pw-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; align-items: center; } #welcomePanel .pw-inline label { margin-bottom: 0; white-space: nowrap; grid-column: 1 / -1; } #welcomePanel .pw-inline input[type="password"], #welcomePanel .pw-inline input[type="text"] { flex: 1 1 auto; min-width: 0; grid-column: 1 / 2; } #welcomePanel #toggleWelcomePw { position: static !important; right: auto !important; top: auto !important; transform: none !important; display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; flex: 0 0 auto; grid-column: 2 / 3; } #welcomePanel #toggleWelcomePw .eye-icon { width: 18px; height: 18px; stroke: currentColor; } #welcomePanel #toggleWelcomePw .eye-icon--hide { display: none; } #welcomePanel #toggleWelcomePw.is-visible .eye-icon--show { display: none; } #welcomePanel #toggleWelcomePw.is-visible .eye-icon--hide { display: block; } /* Make the welcome progress canvas behave like a thin bar */ #welcomeProgress { display: block; width: 100%; height: 18px; /* compact */ flex: 1 1 auto; min-width: 0; } #welcomeActiveUntilRow { margin-top: 0; font-size: var(--fs-md); display: flex; flex-direction: row; align-items: center; gap: 0.4rem 0.6rem; flex-wrap: wrap; } #welcomeActiveUntilRow strong { margin-right: 0; } /* Force center alignment of buttons in welcome panel */ #welcomePanel .login-actions { display: flex; justify-content: center !important; /* override space-between */ align-items: center; flex-wrap: wrap; gap: 0.75rem !important; margin-top: clamp(0.9rem, 1.8vw, 1.4rem); padding-top: 1.25rem; padding-bottom: clamp(12px, 2vw, 18px); width: 100%; } #welcomePanel .login-actions .login-btn { margin: 0 !important; /* remove auto margins */ flex: 1 1 160px; max-width: 220px; } @media (max-width: 900px) { #welcomePanel #welcomeFields { grid-template-columns: 1fr; } #welcomeActiveUntilRow { flex-direction: column; align-items: flex-start; } } .scroll-indicator { position: fixed; right: calc((100vw - min(1200px, 94vw)) / 2); bottom: clamp(14px, 2.8vw, 26px); margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; padding: 10px 14px; border-radius: 999px; background: #D01C1F; border: 1px solid #D01C1F; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.28); font-weight: 700; color: var(--accent-contrast); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; z-index: 10; } .scroll-indicator svg { width: 18px; height: 18px; } @media (max-width: 900px) { .scroll-indicator { right: 12px; bottom: 12px; font-size: var(--fs-xs); } } #welcomeExtendBtn { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.3); } #welcomeExtendBtn:hover { filter: brightness(1.03); } #welcomeExtendBtn:disabled, #welcomeExtendBtn.is-disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); box-shadow: none; } #welcomePanel { display: none; } #welcomePanel.active { display: flex; } /* ========================================================================== G) PANELS & OVERLAYS - Settings, Profile, Data (modal/slide panels) ========================================================================== */ :root { /* Panel sizing (center piece) */ --settings-panel-width: clamp(980px, 90vw, 1800px); /* Split it: tabs get 100% of inner height; columns get 60% of the tabs */ --settings-tabs-max-h: var(--settings-inner-max-h); --settings-cols-max-h: calc(var(--settings-tabs-max-h) * 0.6); /* Left tabs rail width (kept smaller than content) */ --settings-tabs-w: clamp(150px, 18vw, 180px); /* Inside the content area: 2-column proportions */ --settings-col-left: 1.25fr; --settings-col-right: 1.25fr; --settings-col-min: 280px; /* min width for each column */ --settings-gap: 16px; /* gap between panel and drawer */ } /* ---------------- Shared overlay (Settings + Profile) ---------------- */ .settings-overlay { position: fixed; inset: 0; display: none; /* hidden by default */ justify-content: center; align-items: center; flex-direction: column; gap: var(--page-actions-gap, clamp(0.7rem, 1.4vw, 1.2rem)); padding: clamp(12px, 2vw, 24px); box-sizing: border-box; z-index: 2000; /* above main content */ backdrop-filter: blur(2px); /* optional soft blur */ transition: background 0.2s ease; } .settings-overlay.active { display: flex; } /* ---------------- Shared card (Settings + Profile) ---------------- */ .settings-panel-centered { position: relative; width: min(var(--settings-panel-width), 100%); height: calc(100vh - 8rem); height: calc(100dvh - 8rem); max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); background: var(--panel); border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; } /* ---------------- Settings inner layout ---------------- */ .settings-content{ flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 1rem; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } /* LEFT tabs + RIGHT content area */ .settings-layout{ display: grid; grid-template-columns: var(--settings-tabs-w) 1fr; column-gap: clamp(12px, 2vw, 24px); min-height: 0; width: 100%; max-width: 100%; align-self: stretch; margin-top: 2vh; flex: 1 1 auto; align-items: stretch; overflow: hidden; } /* Settings page header (hidden in overlay mode) */ .settings-page-header { display: none; } .settings-page-header .settings-back-button { justify-self: start; text-decoration: none; } .settings-page-header .settings-page-title { justify-self: center; text-align: center; font-size: var(--page-title-size); font-weight: 800; } .settings-page-header .settings-page-spacer { justify-self: end; } /* LEFT: tabs rail uses the full inner height */ .settings-mode-tabs { width: var(--settings-tabs-w); min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem; max-height: none; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; align-self: flex-start; display: flex; flex-direction: column; gap: 0.6rem; } .settings-mode-tabs button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .settings-mode-tabs button.active { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } /* RIGHT: two wider columns limited to 60% of tabs height */ .settings-columns{ display: grid; grid-template-columns: minmax(var(--settings-col-min), var(--settings-col-left)) minmax(var(--settings-col-min), var(--settings-col-right)); grid-template-rows: auto minmax(0, 1fr); gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-sizing: border-box; max-height: none; overflow: auto; /* scroll inside the columns */ min-height: 0; width: 100%; max-width: 100%; align-self: stretch; align-self: flex-start; height: 100%; overflow: hidden; align-items: stretch; align-self: stretch; } .settings-column-left, .settings-column-right { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 16px 0; height: 100%; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .settings-column-left .setting-group, .settings-column-right .setting-group { padding-left: clamp(8px, 1.2vw, 16px); } .settings-help-content .settings-help-list { margin: 0.5rem 0 0 1.1rem; padding: 0; } .settings-help-content .settings-help-list li { margin: 0.25rem 0; } .settings-col { flex: 1; } .setting-group { font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; } .setting { margin-bottom: 0.75rem; } /* Make settings checkboxes align left */ .settings-column-left .checkbox-item, .settings-column-right .checkbox-item { justify-content: flex-start; text-align: left; } .settings-column-left .checkbox-item span, .settings-column-right .checkbox-item span { flex: unset; } /* Sticky section titles (optional) */ .settings-column-left > h3, .settings-column-right > h3{ position: static; top: auto; background: transparent; z-index: auto; padding: .25rem 0 0.2rem clamp(8px, 1.2vw, 16px); margin-top: 0; font-size: var(--settings-section-title-size); } .settings-column-right > h3.settings-section-heading-secondary { display: none; } #alternateModeHeader { margin-top: clamp(1.2rem, 2vw, 2.4rem); } .save-settings-wrapper { border-top: none; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.4rem; flex-wrap: wrap; background: transparent; flex-shrink: 0; width: min(var(--settings-panel-width), 100%); max-width: 100%; box-sizing: border-box; } .save-settings-wrapper .save-feedback { flex-basis: 100%; text-align: center; } body.settings-page .save-settings-wrapper { width: 100%; padding: var(--page-actions-pad, 1rem) var(--page-header-padding) var(--page-actions-pad, 1rem); align-self: stretch; } /* Little "?" badge next to labels (inline with label) */ .setting .input-item .bold { display: inline-flex; align-items: center; gap: 0.4em;} /* Make non-.input-item labels behave like inline containers too */ .setting > .bold, .setting .checkbox-item .bold { display: inline-flex; align-items: center; gap: 0.4em; } .help-badge { display: inline-block; font-size: var(--fs-sm); font-weight: 600; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 50%; width: 1.4em; height: 1.4em; line-height: 1.2em; text-align: center; cursor: pointer; margin-left: 0.4em; vertical-align: middle; transition: background 0.2s, color 0.2s; } .help-badge:hover { background: var(--accent); color: var(--text-on-dark); } /* Right help drawer (separate window to the right of centered panel) */ .settings-help-drawer { position: fixed; top: 50%; left: calc(50% + (var(--settings-panel-width) / 2) + var(--settings-gap)); transform: translateY(-50%); width: 320px; max-height: 84vh; background: var(--card); border: 1px solid var(--border); box-shadow: -8px 0 24px var(--shadow); border-radius: 12px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; } .settings-help-drawer.open { opacity: 1; transform: translateY(-50%); pointer-events: auto; } body:not(.settings-page) .settings-help-drawer { left: auto; right: clamp(12px, 2vw, 24px); } /* If screen is too narrow to fit beside the panel, fall back to right overlay */ @media (max-width: 1200px) { .settings-help-drawer { left: auto; right: 2vw; width: min(340px, 96vw); } } /* Drawer header/content */ .settings-help-header { display:flex; align-items:center; justify-content:space-between; position: sticky; top: 0; z-index: 2; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--card); } .settings-help-content { padding: 12px; font-size: var(--fs-sm); line-height: 1.6; max-height: calc(84vh - 56px); overflow:auto; } /* === Settings page mode (no overlay scrim) ============================ */ body.settings-page { overflow: hidden; font-size: var(--fs-lg); --settings-tabs-w: clamp(170px, 20vw, 250px); --page-top-padding: var(--page-header-padding, 18px); } body.settings-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } .page-shell { position: static; } body.settings-page .page-shell--settings, body.profile-page .page-shell--profile, body.programs-page .page-shell--programs, body.instructions-page .page-shell--instructions { position: static; inset: auto; display: block; padding: 0; margin: 0; box-sizing: border-box; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: auto; overflow: visible; } body.settings-page .settings-overlay { position: static; inset: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--page-actions-gap, clamp(0.7rem, 1.4vw, 1.2rem)); background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-bottom-padding, 18px); box-sizing: border-box; min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; backdrop-filter: none; } body.settings-page .settings-panel-centered { position: static; transform: none; width: 100%; max-width: none; flex: 1 1 auto; min-height: 0; height: auto; max-height: none; background: var(--bg); border-radius: 0; box-shadow: none; overflow: hidden; gap: clamp(10px, 1.6vw, 18px); } body.settings-page .settings-panel-centered .close-button { display: none; } body.settings-page .settings-page-header { display: grid; padding: var(--page-header-pad-y) var(--page-header-padding); } body.settings-page .settings-content { display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; padding: 0 var(--page-header-padding) var(--page-header-padding); overflow: hidden; } body.settings-page #settingsOverlay.help-open .settings-content { padding-right: calc(var(--page-header-padding) + 340px); } body.settings-page .settings-page-header, body.settings-page .settings-content { width: 100%; max-width: none; } body.settings-page .settings-layout { margin-top: 0; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; align-items: stretch; overflow: hidden; } body.settings-page .settings-mode-tabs { height: 100%; max-height: none; align-self: stretch; } body.settings-page .settings-columns { height: 100%; max-height: none; overflow: hidden; align-items: stretch; } body.settings-page .settings-column-left, body.settings-page .settings-column-right { height: 100%; overflow: auto; } body.settings-page #settingsModeTabs button { padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-size: var(--fs-sm); } body.settings-page #saveSettings { --btn-h: 52px; padding: 0 2.75rem; font-size: var(--fs-lg); } #saveSettings { --btn-h: 52px; padding: 0 2rem; font-size: var(--fs-lg); } #saveSettingsAndBack { --btn-h: 52px; padding: 0 2.4rem; font-size: var(--fs-lg); } body.settings-page #saveSettingsAndBack { --btn-h: 52px; padding: 0 2.4rem; font-size: var(--fs-lg); } body.settings-page .settings-help-drawer { left: auto; right: clamp(12px, 2vw, 24px); top: clamp(84px, 10vh, 120px); transform: none; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); } @media (max-width: 1200px) { body.settings-page #settingsOverlay.help-open .settings-content { padding-right: var(--page-header-padding); } } /* ========================================================= ========================================================= */ #settingsModeTabs { background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; border-radius: 12px; overflow: auto; } #settingsModeTabs button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } #settingsModeTabs button.active { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } /* Dark mode fine-tuning */ /* === Profile overlay: two columns (list + right drawer) === */ .profile-page-header { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--page-header-gap); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); } .profile-page-header .profile-back-button { justify-self: start; text-decoration: none; } .profile-page-header .profile-page-title { justify-self: center; text-align: center; font-size: var(--page-title-size); font-weight: 800; } .profile-page-header .profile-page-spacer { justify-self: end; } .profile-overlay { position: fixed; inset: 0; display: none; /* toggled by JS */ grid-template-columns: 1fr 340px; justify-content: center; /* center the two-column grid horizontally */ align-items: center; column-gap: 12px; /* adjust spacing between list and drawer */ background: rgba(0, 0, 0, 0.6); z-index: 1000; } .profile-overlay.active { display: grid; } body.profile-single .profile-overlay { grid-template-columns: 1fr; } body.profile-single .profile-left { display: none; } /* === Profile page mode (no overlay scrim) ============================ */ body.profile-page { overflow: hidden; font-size: var(--fs-lg); --page-top-padding: var(--page-header-padding, 18px); } body.profile-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } body.profile-page .profile-overlay { position: static; inset: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(12px, 2vw, 24px); row-gap: clamp(8px, 1.4vw, 16px); align-items: stretch; justify-content: center; background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); box-sizing: border-box; min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; } body.profile-page .profile-overlay.active { display: grid; } body.profile-page.profile-single .profile-overlay { grid-template-columns: 1fr; } body.profile-page.profile-drawer-open .profile-overlay { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } body.profile-page.profile-single .profile-drawer { grid-column: 1; grid-row: 2; } body.profile-page .profile-page-header { display: grid; grid-column: 1 / -1; } body.profile-page .profile-page-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); } body.profile-page .profile-left { grid-column: 1 / -1; grid-row: 2; max-width: none; max-height: none; /* Fill the 1fr row via grid stretch. An explicit height:calc(100%â€¦) here collapsed to the list's content height (percentage height against an indefinite track), so the card stopped midway. */ height: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; margin: var(--profile-panel-margin); } body.profile-page .profile-drawer { grid-column: 2; grid-row: 2; width: calc(100% - (var(--profile-panel-margin) * 2)); max-width: none; max-height: none; height: calc(100% - (var(--profile-panel-margin) * 2)); min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; margin: var(--profile-panel-margin); } body.profile-page.profile-drawer-open .profile-left { grid-column: 1; } body.profile-page.profile-drawer-open .profile-drawer { display: block; } /* Portrait drawer backdrop (shown only on phones via the 720px block below) */ .profile-drawer-backdrop { position: fixed; inset: 0; z-index: 1290; background: rgba(0, 0, 0, 0.45); display: none; } body.profile-page #closeProfileOverlay { display: none; } /* Left card (list) */ .profile-left { background: var(--panel); border-radius: 12px; /* rounded like other panels */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border: 1px solid var(--border); margin: var(--profile-panel-margin) auto; /* center vertically in grid cell */ width: min(600px, 95vw); max-height: calc(100vh - (var(--profile-panel-margin) * 2)); max-height: calc(100dvh - (var(--profile-panel-margin) * 2)); padding: 1rem; overflow: hidden; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .profile-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .profile-toolbar { margin-bottom: 8px; flex: 1 1 clamp(260px, 40vw, 560px); min-width: clamp(220px, 28vw, 360px); display: flex; align-items: center; gap: 8px; } .profile-toolbar input { width: 100%; flex: 1 1 auto; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-size: var(--fs-md); min-height: clamp(44px, 4vw, 56px); } .profile-toolbar .btn { --btn-h: clamp(44px, 4vw, 56px); padding: 0 1.1rem; font-size: var(--fs-sm); white-space: nowrap; } .profile-actions .btn { --btn-h: clamp(44px, 4vw, 54px); padding: 0 1.35rem; font-size: var(--fs-md); } /* List + rows */ .profile-list { display: grid; gap: 8px; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; align-content: start; } body.profile-page .profile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.profile-page .profile-row { grid-template-columns: 28px 1fr auto; grid-template-areas: "color name actions" "color date actions"; } body.theme-light.profile-page .profile-row:not(.is-selected) { background: var(--card); } body.theme-light.profile-page .profile-row.is-selected { background: var(--accent); } body.profile-page .profile-color { grid-area: color; } body.profile-page .profile-name { grid-area: name; } body.profile-page .profile-date { grid-area: date; } body.profile-page .profile-actions-row { grid-area: actions; justify-content: flex-end; } .profile-row { display: grid; grid-template-columns: 28px minmax(120px, 220px) 140px 120px; align-items: center; gap: 8px; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; } .profile-row:hover { background: color-mix(in oklab, var(--panel) 40%, transparent); } .profile-row.is-selected { background: var(--accent); border-color: color-mix(in oklab, var(--accent) 85%, #000 15%); color: var(--text-on-dark); } .profile-row.is-selected:hover { background: var(--accent); } .profile-row.is-selected .profile-date { color: rgba(255, 255, 255, 0.85); } .profile-row.is-selected .profile-icon { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); color: var(--text-on-dark); } .profile-row.is-selected .profile-icon:hover { background: rgba(255, 255, 255, 0.18); } .profile-row.is-selected .profile-color { border-color: rgba(255, 255, 255, 0.4); } .profile-color { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .1); } .profile-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-date { color: var(--muted); font-size: var(--fs-xs); } .profile-actions-row { display: flex; gap: 6px; justify-content: flex-end; } .profile-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); cursor: pointer; color: var(--text); } .profile-icon:hover { background: var(--panel); } .profile-icon--danger { color: #b63b41; border-color: rgba(229, 72, 77, 0.35); } .profile-icon--danger:hover { background: #fff5f5; border-color: #e5484d; color: #a72f36; } body.theme-dark .profile-icon--danger { color: #ffd2d4; border-color: rgba(229, 72, 77, 0.5); } body.theme-dark .profile-icon--danger:hover { background: rgba(229, 72, 77, 0.16); } /* Right drawer (small panel) */ .profile-drawer { background: var(--panel); border-left: 1px solid var(--border); border-radius: 12px; /* rounded corners */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); margin: auto; /* center vertically */ padding: 1rem; width: 320px; max-height: 80vh; overflow-y: auto; display: none; /* show only when editing/adding */ } .drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* Color grid */ .color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; } .color-swatch { width: 100%; padding-top: 100%; border-radius: 10px; border: 2px solid transparent; cursor: pointer; position: relative; } .color-swatch[aria-checked="true"] { outline: 3px solid var(--text); } .color-swatch::after { content: "\2713"; color: var(--text-on-dark); font-weight: 800; position: absolute; right: 6px; bottom: 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); display: none; } .color-swatch[aria-checked="true"]::after { display: block; } /* Responsive narrow screens: stack (overlay becomes vertical) */ @media (max-width: 720px) { .profile-overlay { grid-template-columns: 1fr; } .profile-drawer { border-left: none; } /* Single content row -> profile-left fills full height (fixes the 60% bug). Listing both selectors also defeats the (0,3,1) drawer-open 2-col rule so opening the drawer no longer reflows the grid (fixes the push-left bug). */ body.profile-page .profile-overlay, body.profile-page.profile-drawer-open .profile-overlay { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } body.profile-page .profile-list { grid-template-columns: 1fr; } body.profile-page .profile-left, body.profile-page.profile-drawer-open .profile-left { grid-column: 1; grid-row: 2; } /* Drawer pulled OUT of grid flow -> fixed bottom-sheet modal over the list */ body.profile-page .profile-drawer { position: fixed; inset: auto 0 0 0; z-index: 1300; width: 100%; max-width: 100%; height: auto; max-height: min(85dvh, 92vh); margin: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28); padding-bottom: calc(1rem + env(safe-area-inset-bottom)); overflow: auto; } body.profile-page.profile-drawer-open .profile-drawer-backdrop { display: block; } } .profile-left, .profile-drawer { margin: var(--profile-panel-margin) auto; align-self: center; } /* ========================================================================== PROGRAM OVERLAY ========================================================================== */ .program-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); z-index: 1200; padding: 1rem; } .program-overlay.active { display: flex; } .programs-page-header, .programs-sidebar { display: none; } body.programs-page { overflow: hidden; font-size: var(--fs-lg); --page-top-padding: var(--page-header-padding, 18px); } body.programs-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } body.programs-page.game-active #mainContent { position: relative; left: 0; width: 100%; height: 100%; overflow: visible; visibility: visible; } body.programs-page.game-active #programOverlay { display: none; } body.programs-page.game-active .page-shell--programs { display: none; } body.programs-page .programs-page-header { display: grid; grid-column: 1 / -1; } body.programs-page .programs-page-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); } body.programs-page .program-overlay { position: static; inset: auto; display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); align-items: stretch; justify-content: center; background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; box-sizing: border-box; overflow: hidden; } body.programs-page .program-overlay.active { display: grid; } body.programs-page .programs-sidebar { display: flex; flex-direction: column; grid-column: 1; grid-row: 2; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; max-height: 100%; } body.programs-page .programs-sidebar-header { padding: 0.9rem 1rem 0.6rem; border-bottom: 1px solid var(--border); } body.programs-page .programs-sidebar-title { font-weight: 700; font-size: var(--fs-lg); } body.programs-page .programs-sidebar-body { padding: 0.9rem; overflow: auto; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } body.programs-page .program-panel { grid-column: 2; grid-row: 2; width: 100%; max-height: none; height: 100%; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } body.programs-page .program-body { max-height: none; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; } body.programs-page #closeProgramOverlay { display: none; } body.programs-page .program-header { display: none; } body.programs-page #homePage, body.programs-page #trainingPage { display: none; } body.programs-page #gameArea { display: none; } body.programs-page.game-active #gameArea { display: block; } .program-panel { width: min(1100px, 96vw); max-height: 90vh; background: var(--card); border-radius: 16px; border: 1px solid var(--border); box-shadow: none; display: flex; flex-direction: column; overflow: hidden; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; position: relative; } .program-panel.is-mode-overlay-active { overflow: visible; } .program-header { display: flex; align-items: center; justify-content: flex-end; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--border); } #programTitle { font-size: var(--fs-lg); font-weight: 700; } .program-body { padding: 1rem 1.2rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .program-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 1rem 1.6rem; } .program-field label { font-weight: 600; margin-bottom: 0.3rem; display: block; } .program-meta .program-field { flex: 1 1 0; min-width: 0; } .program-field input, .program-field select, .program-estimate { width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; } #programScope.has-profile { --profile-color: #FFB56B; padding-left: 2rem; border-left: 12px solid var(--profile-color); } .program-estimate { margin-left: 0; display: flex; align-items: center; white-space: nowrap; } .program-builder { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .program-sequence { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; } .program-sequence h3 { margin: 0; font-size: var(--fs-md); } .program-sequence-grid { --program-sequence-columns-max: 3; --program-sequence-columns: var(--program-sequence-columns-max); --program-node-width-base: clamp(260px, 22vw, 360px); --program-node-width: calc(var(--program-node-width-base) * 0.91); --program-gap-x-min: clamp(28px, 5.5vw, 140px); --program-gap-x: var(--program-gap-x-min); --program-gap-y: clamp(3.2rem, 7vw, 6rem); --program-connector-length-x: var(--program-gap-x); --program-connector-length-y: var(--program-gap-y); --program-connector-thickness: clamp(3px, 0.45vw, 6px); --program-connector-overlap: clamp(10px, 1vw, 16px); --program-sequence-edge: clamp(12px, 1.6vw, 20px); display: grid; position: relative; grid-template-columns: repeat(var(--program-sequence-columns), var(--program-node-width)); column-gap: var(--program-gap-x); row-gap: var(--program-gap-y); align-content: start; justify-content: center; justify-items: center; padding: 0.4rem var(--program-sequence-edge); flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; scrollbar-gutter: stable; } .program-node { position: relative; border-radius: 20px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08); padding: clamp(0.85rem, 1.4vw, 1.2rem); min-height: clamp(118px, 14vw, 150px); display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem; overflow: visible; width: 100%; } .program-add-slot { border-style: dashed; border-width: 2px; background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; align-items: center; justify-content: center; } body.theme-dark .program-add-slot { background: var(--card); color: var(--text); border-color: var(--border); } .program-add-slot:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12); } .program-step-card--pause { background: var(--card); border-style: dashed; color: var(--text-muted); } body.theme-dark .program-step-card--pause { color: var(--text); } .program-step-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding-right: clamp(2rem, 3vw, 2.6rem); } .program-step-title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; } .program-step-header-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .program-step-action-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(15, 23, 42, 0.2); background: rgba(255, 255, 255, 0.9); color: #D01C1F; display: grid; place-items: center; cursor: pointer; font-weight: 700; } .program-step-header-actions .program-step-action-btn { width: 34px; height: 34px; font-size: var(--fs-md); } .program-step-header-actions .preset-badge { width: 28px; height: 28px; font-size: var(--fs-xs); } .program-step-action-btn:hover { filter: brightness(0.96); } .program-step-remove { background: #ef4444; border-color: #dc2626; color: var(--text-on-dark); position: absolute; top: clamp(0.45rem, 0.7vw, 0.7rem); right: clamp(0.45rem, 0.7vw, 0.7rem); z-index: 3; } .program-step-remove:hover { filter: brightness(0.95); } .program-step-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: var(--fs-md); font-weight: 600; } .program-step-summary { font-weight: 600; color: var(--text); font-size: var(--fs-md); } .program-step-meta input[type="number"] { width: 70px; padding: 0.25rem 0.4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); } .program-connector { position: absolute; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-2xs); color: var(--muted); pointer-events: none; white-space: nowrap; z-index: 2; --program-connector-outline: var(--text-on-dark); } .program-connector::before { content: ""; position: absolute; background: var(--accent); border-radius: 999px; box-shadow: 0 0 0 2px var(--program-connector-outline); } .program-connector::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; filter: drop-shadow(1px 0 0 var(--program-connector-outline)) drop-shadow(-1px 0 0 var(--program-connector-outline)) drop-shadow(0 1px 0 var(--program-connector-outline)) drop-shadow(0 -1px 0 var(--program-connector-outline)) drop-shadow(1px 1px 0 var(--program-connector-outline)) drop-shadow(-1px -1px 0 var(--program-connector-outline)) drop-shadow(1px -1px 0 var(--program-connector-outline)) drop-shadow(-1px 1px 0 var(--program-connector-outline)); } .program-connector-btn { pointer-events: auto; border: 1px solid rgba(15, 23, 42, 0.2); background: var(--panel); color: var(--text-muted); font-weight: 600; font-size: var(--fs-2xs); padding: 0.2rem 0.45rem; border-radius: 999px; cursor: pointer; } .program-connector-btn:hover { color: var(--text); background: var(--border); } .program-connector-btn--insert { border-style: solid; border-color: #16a34a; background: #22c55e; color: var(--text-on-dark); width: 34px; height: 34px; font-size: var(--fs-lg); padding: 0; display: inline-flex; align-items: center; justify-content: center; } .program-connector-actions { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.35rem; pointer-events: auto; } .program-connector-actions .program-connector-btn { pointer-events: auto; } .program-connector-arrow { display: none; } .program-connector--right { top: 50%; right: calc(-1 * var(--program-gap-x)); width: var(--program-gap-x); height: var(--program-connector-thickness); transform: translateY(-50%); } .program-connector--left { top: 50%; left: calc(-1 * var(--program-gap-x)); width: var(--program-gap-x); height: var(--program-connector-thickness); transform: translateY(-50%); } .program-connector--down { left: 50%; bottom: calc(-1 * var(--program-gap-y)); width: var(--program-connector-thickness); height: var(--program-gap-y); transform: translateX(-50%); } .program-connector--right::before { left: calc(-1 * var(--program-connector-overlap)); top: 0; width: calc(var(--program-connector-length-x) + (var(--program-connector-overlap) * 2)); height: var(--program-connector-thickness); } .program-connector--right::after { right: calc(-1 * var(--program-connector-overlap)); top: 50%; transform: translateY(-50%); border-width: calc(var(--program-connector-thickness) * 1.2) 0 calc(var(--program-connector-thickness) * 1.2) calc(var(--program-connector-thickness) * 1.6); border-color: transparent transparent transparent var(--accent); } .program-connector--left::before { right: calc(-1 * var(--program-connector-overlap)); top: 0; width: calc(var(--program-connector-length-x) + (var(--program-connector-overlap) * 2)); height: var(--program-connector-thickness); } .program-connector--left::after { left: calc(-1 * var(--program-connector-overlap)); top: 50%; transform: translateY(-50%); border-width: calc(var(--program-connector-thickness) * 1.2) calc(var(--program-connector-thickness) * 1.6) calc(var(--program-connector-thickness) * 1.2) 0; border-color: transparent var(--accent) transparent transparent; } .program-connector--down::before { top: calc(-1 * var(--program-connector-overlap)); left: 0; width: var(--program-connector-thickness); height: calc(var(--program-connector-length-y) + (var(--program-connector-overlap) * 2)); } .program-connector--down::after { left: 50%; bottom: calc(-1 * var(--program-connector-overlap)); transform: translateX(-50%); border-width: calc(var(--program-connector-thickness) * 1.6) calc(var(--program-connector-thickness) * 1.2) 0 calc(var(--program-connector-thickness) * 1.2); border-color: var(--accent) transparent transparent transparent; } .program-mode-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); z-index: 20; pointer-events: none; } .program-mode-overlay.active { display: flex; pointer-events: auto; } .program-mode-panel { width: calc(100% - 2rem); max-width: none; max-height: min(84vh, calc(100% - 2rem)); max-height: min(84dvh, calc(100% - 2rem)); background: var(--card); border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); padding: clamp(0.9rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: 0.8rem; overflow: hidden; } .program-mode-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .program-mode-title { font-weight: 700; font-size: var(--fs-lg); } .program-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(0.55rem, 0.9vw, 0.85rem); align-items: stretch; padding: 0; overflow: auto; } .program-mode-overlay .training-mode-btn { width: 100%; appearance: none; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; align-content: center; justify-items: start; column-gap: 0.7rem; row-gap: 0.32rem; padding: 1.15rem 2.8rem 1.15rem 0.95rem; min-height: clamp(150px, 14vw, 172px); height: 100%; border-radius: 20px; border: 2px solid var(--border); border-color: color-mix(in oklab, var(--border) 88%, var(--text) 12%); background: color-mix(in oklab, var(--card) 94%, var(--accent-secondary-soft) 6%); color: var(--text); font-weight: 700; cursor: pointer; text-align: left; box-shadow: var(--shadow-subtle); transform: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .program-mode-overlay .training-mode-btn .mode-icon { grid-column: 1; grid-row: 1 / span 2; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .program-mode-overlay .training-mode-btn .mode-icon--registry { border-radius: 8px; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); color: var(--accent-readable); font-size: 0.82rem; font-weight: 850; } .program-mode-overlay .training-mode-btn .mode-icon-img { max-width: 42px; max-height: 42px; object-fit: contain; } .program-mode-overlay .training-mode-btn .home-label { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; width: 100%; font-size: clamp(0.92rem, 0.98vw, 1.02rem); line-height: 1.15; color: var(--text); overflow-wrap: anywhere; } .program-mode-overlay .training-mode-btn .mode-description { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; width: 100%; color: var(--muted); font-size: clamp(0.74rem, 0.78vw, 0.84rem); line-height: 1.24; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .program-mode-overlay .training-mode-btn .preset-badge { position: absolute; top: 8px; right: 8px; } .program-mode-overlay .training-mode-btn:hover { transform: none; border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } .program-mode-overlay .training-mode-btn:active { transform: none; } .program-mode-overlay .training-mode-btn:focus-visible { outline: none; } .program-mode-item { appearance: none; border: 1px solid var(--border); background: var(--card); border-radius: 18px; padding: clamp(0.9rem, 1.6vw, 1.2rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; color: var(--text); cursor: pointer; text-align: center; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .program-mode-item:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); } .program-mode-overlay .program-mode-item--pause { border-style: dashed; background: var(--card); color: var(--text-muted); } .program-mode-item--pause .mode-icon--pause { display: inline-flex; align-items: center; gap: 6px; } .program-mode-item--pause .mode-icon--pause .pause-bar { width: clamp(6px, 0.7vw, 10px); height: clamp(20px, 2.2vw, 30px); border-radius: 999px; background: var(--neutral-400); } .program-mode-label { font-size: var(--fs-md); } .program-palette-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .program-palette-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0.57rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-weight: 600; font-size: var(--fs-sm); width: 100%; } .program-arrow-btn { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); } .program-palette-item .program-arrow-btn { margin-left: auto; width: 28px; height: 28px; font-size: var(--fs-sm); } .program-sequence-list { display: flex; flex-direction: column; gap: 0.6rem; min-height: 64px; padding: 0.2rem; } .program-sequence-empty { color: var(--muted); font-weight: 600; padding: 0.4rem; } .program-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-weight: 600; font-size: var(--fs-sm); width: 100%; position: relative; } .program-step.pause { border-style: dashed; background: var(--card); color: var(--text-muted); } .program-palette-item[data-type="pause"] { background: var(--card); } .program-step-trials { position: static; transform: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; opacity: 0.95; pointer-events: none; color: #D01C1F; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(15, 23, 42, 0.2); border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; } body.theme-dark .program-step.pause { color: var(--text); } body.theme-dark .program-overlay .preset-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); } .program-step.is-dragging { opacity: 0.6; } .program-step.is-drop-target { outline: 3px dashed color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; } .program-drop-indicator { width: 100%; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); margin: 2px 0; } .program-step .drag-handle { cursor: grab; font-size: var(--fs-md); line-height: 1; } .program-step-actions { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; } .program-step-duration { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(15, 23, 42, 0.22); border-radius: 999px; padding: 0.1rem 0.45rem; line-height: 1; white-space: nowrap; } body.theme-dark .program-step-duration { background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.35); } .program-step input[type="number"] { width: 64px; padding: 0.25rem 0.35rem; border-radius: 6px; border: 1px solid var(--border); background: var(--card); } .program-footer { border-top: 1px solid var(--border); padding: 0.9rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; } .program-footer .save-feedback { text-align: center; } .program-warning { min-height: 0; width: 100%; max-width: 100%; align-self: stretch; color: #b45309; font-weight: 600; } .program-warning:empty { display: none; } .save-feedback { min-height: 0; width: 100%; max-width: 100%; align-self: stretch; font-weight: 700; color: #16a34a; margin-bottom: 0.2rem; } .save-feedback.is-error { color: #dc2626; } .save-feedback:empty { display: none; } .program-footer-actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .program-footer-actions .btn { --btn-h: clamp(42px, 4vw, 54px); padding: 0 clamp(1.6rem, 2.2vw, 2.6rem); font-size: var(--fs-md); font-weight: 700; } .program-color-grey { background: var(--panel); color: var(--text); border-color: transparent; } .program-color-lightblue { background: #FFD4A8; color: #D01C1F; border-color: transparent; } .program-color-blue { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; } .program-color-blue .program-step-meta, .program-color-blue .program-step-summary { color: var(--text-on-dark); } .preset-badge { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; color: var(--text-on-dark); } .preset-badge.preset-none { background: var(--neutral-400); } .preset-badge.preset-easy { background: #22c55e; } .preset-badge.preset-medium { background: #f59e0b; } .preset-badge.preset-hard { background: #ef4444; } .preset-badge.preset-adaptive { background: var(--accent); } @media (max-width: 1200px) { .program-sequence-grid { --program-sequence-columns-max: 2; --program-sequence-columns: var(--program-sequence-columns-max); --program-node-width-base: clamp(240px, 40vw, 320px); --program-node-width: calc(var(--program-node-width-base) * 0.91); --program-gap-x-min: clamp(20px, 5vw, 120px); --program-gap-x: var(--program-gap-x-min); --program-gap-y: clamp(2.8rem, 7vw, 4.8rem); } } @media (max-width: 900px) { .program-sequence-grid { --program-sequence-columns-max: 1; --program-sequence-columns: var(--program-sequence-columns-max); --program-node-width-base: 100%; --program-node-width: calc(var(--program-node-width-base) * 0.91); --program-gap-x-min: 0; --program-gap-x: 0; --program-gap-y: 2rem; justify-content: center; } } /* ========================================================================== H) GAME STAGE & HUD - Canvas layers, targets, metrics, mode toolbar ========================================================================== */ #gameArea { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); container-type: size; z-index: 1; } /* iOS: stimuli must not trigger the long-press "Save Image"/callout menu or text selection during play (interrupts the trial, esp. for slow/imprecise taps). */ #gameArea img, #gameArea canvas, #gameArea svg { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; } #gameArea.active { cursor: crosshair; /* example state when running */ } .pause-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); z-index: 30; } body.theme-dark .pause-overlay { background: rgba(58, 58, 58, 0.92); } .pause-card { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 1.2rem 1.6rem; border-radius: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .pause-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .pause-note { margin: 0; max-width: 340px; text-align: center; font-size: var(--fs-sm); line-height: 1.4; color: var(--text); } .pause-skip-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.55rem; margin: 0 0.15rem; border-radius: 0.4rem; background: var(--neutral-400); color: var(--text-on-dark); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; } .pause-donut { position: relative; width: 160px; height: 160px; display: grid; place-items: center; } .pause-ring { width: 160px; height: 160px; transform: rotate(-90deg); } .pause-ring-bg { fill: none; stroke: color-mix(in oklab, var(--border) 80%, transparent); stroke-width: 10; } .pause-ring-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s linear; } .pause-time { position: absolute; font-size: var(--fs-2xl); font-weight: 700; color: var(--text); } /* Fixation & target elements */ #fixationDot { position: absolute; width: clamp(36px, 5.2vw, 60px); height: clamp(36px, 5.2vw, 60px); background-color: red; border-radius: 50%; border: 2px solid white; z-index: 10; opacity: 1; transition: opacity 0.3s ease; } #target { position: absolute; width: 2vw; height: 2vw; background-color: #D97833; border-radius: 50%; border: 2px solid white; z-index: 10; display: none; align-items: center; justify-content: center; color: white; font-size: var(--fs-2xs); } /* HUD text panel */ .metrics { position: absolute; top: 1rem; left: 1rem; background: rgba(0, 0, 0, 0.5); color: var(--text); padding: 0.5rem 0.75rem; border-radius: var(--radius, 6px); font-size: var(--fs-sm); z-index: 20; } .blue-dot { display: inline-block; width: 10px; height: 10px; background: #D97833; border-radius: 50%; margin-right: 0.25rem; } /* Mode toolbar (top-centered, fixed) */ .mode-button-bar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: calc(100% - 180px); /* leave breathing room near edges/corner buttons */ max-width: 1120px; z-index: 1050; background: transparent; padding: .2rem 0; border: none; border-radius: 0; box-shadow: none; } @media (min-width: 1400px) { .mode-button-bar { width: auto; max-width: none; } } .mode-group-row { display: inline-flex; flex-wrap: wrap; gap: .5rem .65rem; justify-content: center; width: fit-content; max-width: 100%; align-self: center; background: var(--card); backdrop-filter: blur(6px); padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 4px 10px var(--shadow); } .mode-group-row.is-wrapped { border-radius: 12px; } .mode-group-row .mode-btn { padding: .6rem 1.2rem; font-size: var(--fs-md); } .mode-group-panels { display: flex; flex-direction: column; gap: .4rem; width: 100%; align-items: center; } .mode-group-panel { display: none; flex-wrap: wrap; gap: .5rem .65rem; justify-content: center; background: var(--card); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 999px; padding: .45rem .6rem; max-width: 100%; align-self: center; box-shadow: 0 4px 10px var(--shadow); } .mode-group-panel.is-wrapped { border-radius: 12px; } .mode-group-panel.is-open { display: inline-flex; } #modeGroupPrograms { width: fit-content; margin: 0 auto; border-radius: 16px; } .program-button-list { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: stretch; justify-content: center; margin: 0; } body.programs-page .program-button-list { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.1vw, 0.9rem); align-items: stretch; } @media (max-width: 1100px) { .program-button-list { grid-template-columns: repeat(3, minmax(170px, 1fr)); } } @media (max-width: 860px) { .program-button-list { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 540px) { .program-button-list { grid-template-columns: 1fr; } } .program-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; font-size: var(--fs-md); line-height: 1.1; cursor: pointer; transition: background .2s, color .2s, transform .1s, border-color .2s; } body.programs-page .program-btn { width: 100%; justify-content: flex-start; flex-wrap: nowrap; border-radius: 14px; padding: clamp(0.75rem, 1.3vw, 1rem) clamp(1rem, 1.6vw, 1.3rem); min-height: clamp(64px, 7.5vw, 90px); gap: clamp(0.6rem, 1.1vw, 0.95rem); font-size: var(--fs-md); } body.programs-page .program-btn .program-btn-icon { width: clamp(20px, 2.2vw, 30px); height: clamp(20px, 2.2vw, 30px); object-fit: contain; } body.programs-page .program-icon { width: clamp(26px, 2.4vw, 34px); height: clamp(26px, 2.4vw, 34px); font-size: var(--fs-sm); } body.programs-page .program-btn .home-label { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.programs-page .program-btn.program-add-btn { justify-content: center; } .program-btn:hover { transform: translateY(-1px); } .program-btn:focus-visible { outline: none; } .program-btn.is-selected { outline: none; box-shadow: none; } .program-btn-actions { display: inline-flex; gap: 0.4rem; } body.programs-page .program-btn-actions { margin-left: auto; flex: 0 0 auto; align-self: center; } .program-icon { width: 40px; height: 40px; font-size: var(--fs-lg); display: grid; place-items: center; border: 1px solid #dc2626; border-radius: 6px; background: #ef4444; color: var(--text-on-dark); cursor: pointer; } .program-icon:hover { background: #dc2626; } .mode-group-toggle { display: inline-flex; align-items: center; gap: 0.35rem; line-height: 1; } .mode-group-arrow { display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.8; pointer-events: none; } /* defaults */ .mode-btn { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; cursor: pointer; transition: background .2s, color .2s, transform .1s, outline-color .2s; } .mode-btn:not(.training-mode-btn):hover { background: var(--accent); color: var(--accent-contrast, #fff); } /* legacy colors */ .mode-btn.grey { background: var(--panel); color: var(--text); } .mode-btn.lightblue { background: #FFD4A8; color: #D01C1F; } .mode-btn.blue { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; } .mode-btn.charcoal { background: #3f3f3f; color: var(--text-on-dark); border-color: transparent; } /* active: no selection outline */ .mode-btn.active { outline: none; } .mode-btn.blue.active { outline: none; } .mode-btn.charcoal.active { outline: none; box-shadow: none; } .training-page .mode-btn.active { outline: none; box-shadow: none; } .game-active .mode-button-bar, .game-active .title, .game-active .metrics, .game-active .author-text, .game-active .main-actions, .game-active #openProfilePanel, .game-active #settingsBtn, .game-active #hilfeBtn, .game-active #dataBtn, .game-active #instructionsBtn, .game-active #mainLogo { display: none; } /* Hide fixation marker while a game is running */ .game-active /* Hide the theme toggle pill while a game is active */ body.game-active .theme-toggle-bar { display: none !important; } html.app-root, body.app-root, html.game-active, body.game-active { overflow: hidden; height: 100%; overscroll-behavior: none; } /* ========================================================================== I) INSTRUCTION PANEL / WALKTHROUGH - Slide-in instructions, pagination dots, progress bars, arrows ========================================================================== */ /* Panel container */ .instruction-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); display: none; z-index: 1000; } #instructionsPage { display: none; } body.instructions-page { overflow: hidden; font-size: var(--fs-lg); --instructions-tabs-w: clamp(180px, 22vw, 260px); --page-top-padding: var(--page-header-padding, 18px); } body.instructions-page #mainContent { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } body.instructions-page #instructionsPage { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 1.6vw, 18px); background: var(--bg); padding: var(--page-top-padding) var(--page-header-padding) var(--page-header-padding); min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: 100vh; height: 100svh; height: 100dvh; box-sizing: border-box; overflow: hidden; } body.instructions-page .instructions-page-header { display: grid; } body.instructions-page .instructions-page-header.page-header { padding: var(--page-header-pad-y) var(--page-header-padding); } .instructions-layout { display: grid; grid-template-columns: var(--instructions-tabs-w) minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; overflow: hidden; align-items: stretch; } .instructions-mode-tabs { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; } .instructions-mode-tabs button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: clamp(7px, 1vw, 14px) clamp(10px, 1.5vw, 18px); font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .instructions-mode-tabs button.active { background: var(--accent); color: var(--accent-contrast, #fff); border-color: transparent; } #settingsModeTabs button.red, #settingsModeTabs button.blue, #settingsModeTabs button.yellow, #settingsModeTabs button.green, #settingsModeTabs button.purple, .instructions-mode-tabs button.red, .instructions-mode-tabs button.blue, .instructions-mode-tabs button.yellow, .instructions-mode-tabs button.green, .instructions-mode-tabs button.purple { --mode-accent: var(--accent); --mode-soft: color-mix(in oklab, var(--mode-accent) 10%, var(--card)); --mode-border: color-mix(in oklab, var(--mode-accent) 38%, var(--border)); background: var(--mode-soft); border-color: var(--mode-border); color: var(--text); box-shadow: var(--shadow-subtle); } #settingsModeTabs button.red, .instructions-mode-tabs button.red { --mode-accent: #D01C1F; } #settingsModeTabs button.blue, .instructions-mode-tabs button.blue { --mode-accent: #2563EB; } #settingsModeTabs button.yellow, .instructions-mode-tabs button.yellow { --mode-accent: #FBBF24; } #settingsModeTabs button.green, .instructions-mode-tabs button.green { --mode-accent: #16A34A; } #settingsModeTabs button.purple, .instructions-mode-tabs button.purple { --mode-accent: #9333ea; } #settingsModeTabs button.red.active, #settingsModeTabs button.blue.active, #settingsModeTabs button.yellow.active, #settingsModeTabs button.green.active, #settingsModeTabs button.purple.active, .instructions-mode-tabs button.red.active, .instructions-mode-tabs button.blue.active, .instructions-mode-tabs button.yellow.active, .instructions-mode-tabs button.green.active, .instructions-mode-tabs button.purple.active { background: color-mix(in oklab, var(--mode-accent) 24%, var(--card)); border-color: color-mix(in oklab, var(--mode-accent) 78%, var(--border)); color: var(--text); font-weight: 800; box-shadow: inset 4px 0 0 var(--mode-accent), 0 0 0 3px color-mix(in oklab, var(--mode-accent) 26%, transparent); } @media (hover: hover) and (pointer: fine) { #settingsModeTabs button.red:hover, #settingsModeTabs button.blue:hover, #settingsModeTabs button.yellow:hover, #settingsModeTabs button.green:hover, #settingsModeTabs button.purple:hover, .instructions-mode-tabs button.red:hover, .instructions-mode-tabs button.blue:hover, .instructions-mode-tabs button.yellow:hover, .instructions-mode-tabs button.green:hover, .instructions-mode-tabs button.purple:hover { border-color: color-mix(in oklab, var(--mode-accent) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent) 18%, transparent); } } .instructions-content-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: clamp(12px, 2vw, 20px); display: flex; flex-direction: column; gap: 1rem; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: auto; height: 100%; } .instructions-mode-heading { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .instructions-mode-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .instructions-mode-badge { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); color: var(--accent-readable); font-size: 0.82rem; font-weight: 850; } .instructions-mode-badge.red, .instructions-mode-badge.blue, .instructions-mode-badge.yellow, .instructions-mode-badge.green, .instructions-mode-badge.purple { background: var(--mode-accent); border-color: transparent; color: var(--text-on-dark); } .instructions-mode-badge.red { --mode-accent: #D01C1F; } .instructions-mode-badge.blue { --mode-accent: #2563EB; } .instructions-mode-badge.yellow { --mode-accent: #FBBF24; color: #2F2A25; } .instructions-mode-badge.green { --mode-accent: #16A34A; } .instructions-mode-badge.purple { --mode-accent: #9333ea; } @media (max-width: 620px) { .instructions-mode-badge { width: 38px; height: 38px; flex-basis: 38px; } } .instructions-visual.mockup-screen { position: relative; width: min(840px, 100%); aspect-ratio: 16 / 9; min-height: 220px; max-height: 46vh; border: 5px solid var(--border); border-radius: 12px; background: var(--card); display: flex; align-items: center; justify-content: center; overflow: hidden; } .instructions-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(0.5rem, 1vw, 0.9rem); margin: clamp(0.25rem, 0.6vw, 0.6rem) 0 0.8rem; } .instructions-controls.is-hidden { display: none; } .instructions-control { width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px); display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08)); } .instructions-control img { width: 70%; height: 70%; object-fit: contain; } #instructionsVisual { grid-row: 2; flex: 0 0 auto; align-self: center; } .instructions-guide-details { display: grid; gap: clamp(0.8rem, 1.5vw, 1.1rem); } .instructions-guide-details[hidden] { display: none; } .instructions-guide-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.65rem, 1.2vw, 1rem); } .instructions-guide-card { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: clamp(0.75rem, 1.3vw, 1rem); display: grid; gap: 0.35rem; align-content: start; } .instructions-guide-card-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .instructions-guide-card strong { font-size: var(--fs-sm); line-height: 1.45; font-weight: 700; color: var(--text); } .instructions-guide-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: clamp(0.85rem, 1.5vw, 1.2rem); } .instructions-guide-section h3 { margin: 0 0 0.7rem; font-size: var(--fs-lg); font-weight: 800; } .instructions-guide-steps, .cognitive-start-steps { margin: 0; padding: 0; list-style: none; counter-reset: guide-step; display: grid; gap: 0.55rem; } .instructions-guide-steps li, .cognitive-start-steps li { counter-increment: guide-step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.65rem; align-items: start; line-height: 1.45; color: var(--text); } .instructions-guide-steps li::before, .cognitive-start-steps li::before { content: counter(guide-step); width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 900; font-size: var(--fs-xs); } .instruction-step-content { min-width: 0; display: block; line-height: 1.5; } .instruction-inline-signal, .instruction-inline-chip { display: inline-flex; align-items: center; gap: 0.24rem; min-width: 0; max-width: 100%; min-height: 1.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0.12rem 0.4rem; font-size: 0.92em; font-weight: 850; line-height: 1.1; white-space: nowrap; vertical-align: middle; margin: 0 0.12rem 0.16rem; } .instruction-inline-signal img { width: 1.45rem; height: 1.45rem; object-fit: contain; flex: 0 0 auto; } .instruction-inline-chip--blue { border-color: rgba(37, 99, 235, 0.32); background: rgba(37, 99, 235, 0.12); color: #1d4ed8; } .instruction-inline-chip--orange { border-color: rgba(234, 88, 12, 0.34); background: rgba(234, 88, 12, 0.12); color: #c2410c; } .instruction-inline-chip--circle::before, .instruction-inline-chip--triangle::before { content: ""; width: 0.85rem; height: 0.85rem; flex: 0 0 auto; background: currentColor; } .instruction-inline-chip--circle { color: #0f766e; } .instruction-inline-chip--circle::before { border-radius: 999px; } .instruction-inline-chip--triangle { color: #7c3aed; } .instruction-inline-chip--triangle::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* Plain solid colour rectangle inline in text (e.g. Flex 2 blue/orange rule swatches). */ .instruction-inline-swatch { display: inline-block; width: 1.6rem; height: 0.95rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.16); vertical-align: -0.12em; margin: 0 0.2rem; } .instruction-inline-swatch--blue { background: #2563eb; } .instruction-inline-swatch--orange { background: #ea580c; } .instruction-text-summary { margin: 0; line-height: 1.45; color: var(--text); } .instruction-text .instructions-guide-steps, .instruction-copy-steps, .screening-instruction-steps { margin-top: 0.65rem; } .instructions-difficulty-section { display: grid; gap: 0.75rem; } .instructions-difficulty-note, .instructions-difficulty-adaptive { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; } .instructions-difficulty-list { display: grid; gap: 0.5rem; } .instructions-difficulty-item { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.65rem 0.75rem; border: 1px solid color-mix(in srgb, var(--border) 74%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--panel) 62%, transparent); } .instructions-difficulty-level { display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: var(--fs-xs); font-weight: 900; white-space: nowrap; } .instructions-difficulty-text { color: var(--text); font-size: var(--fs-sm); line-height: 1.45; } .instructions-difficulty-adaptive { padding-top: 0.35rem; border-top: 1px solid var(--border); } .instructions-difficulty-scroll { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid color-mix(in srgb, var(--border) 74%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--panel) 62%, transparent); } .instructions-difficulty-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--text); } .instructions-difficulty-table th, .instructions-difficulty-table td { padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); white-space: nowrap; } .instructions-difficulty-table tbody tr:last-child td { border-bottom: none; } .instructions-difficulty-table thead th { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 900; position: sticky; top: 0; } .instructions-difficulty-table .instructions-difficulty-th-level, .instructions-difficulty-table .instructions-difficulty-td-level { position: sticky; left: 0; background: color-mix(in srgb, var(--panel) 92%, transparent); z-index: 1; } .instructions-difficulty-table thead .instructions-difficulty-th-level { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); z-index: 2; } .instructions-difficulty-footnotes { margin: 0.6rem 0 0; display: grid; gap: 0.25rem 0.65rem; grid-template-columns: max-content minmax(0, 1fr); font-size: var(--fs-xs); color: var(--muted); } .instructions-difficulty-footnotes dt { font-weight: 700; color: var(--text); } .instructions-difficulty-footnotes dd { margin: 0; } .instructions-settings { display: flex; flex-direction: column; gap: 0.6rem; } .instructions-settings-title { margin: 0; font-size: var(--fs-lg); } .instructions-settings-list { margin: 0; background: transparent; border: 0; border-radius: 0; padding: 0; display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); } .instructions-settings-group { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: clamp(0.8rem, 1.6vw, 1.2rem); display: grid; gap: 0.6rem; } body.theme-dark .instructions-settings-group { background: var(--panel); } .instructions-settings-group-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; } .instructions-settings-items { display: grid; gap: 0.4rem; } .instructions-setting-item { padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .instructions-setting-item.is-adaptive-adjusted { background: color-mix(in oklab, #dc2626 8%, var(--card)); } .instructions-setting-item:last-child { border-bottom: none; } body.theme-dark .instructions-setting-item.is-adaptive-adjusted { background: color-mix(in oklab, #ef4444 12%, var(--card)); } .instructions-settings-list .setting-title { font-weight: 700; margin-bottom: 0.2rem; font-size: var(--fs-sm); } .instructions-settings-list .setting-body { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; } @media (max-width: 900px) { body.programs-page .program-overlay { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 0.65fr) minmax(0, 1fr); } body.programs-page .programs-sidebar { grid-column: 1; grid-row: 2; } body.programs-page .program-panel { grid-column: 1; grid-row: 3; } .instructions-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .instructions-mode-tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: auto; align-items: center; } .instructions-mode-tabs button { flex: 0 0 auto; white-space: nowrap; text-align: center; } .instructions-guide-facts { grid-template-columns: 1fr; } .instructions-difficulty-item { grid-template-columns: 1fr; gap: 0.45rem; } } @media (max-width: 1000px) { body.settings-page { overflow: auto; } body.settings-page .settings-overlay { padding: calc(var(--page-top-padding) + env(safe-area-inset-top)) 12px calc(var(--page-bottom-padding, 18px) + env(safe-area-inset-bottom)); height: auto; min-height: 100dvh; overflow: visible; } body.settings-page .settings-panel-centered { height: auto; min-height: 0; overflow: visible; } body.settings-page .settings-content { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); overflow: visible; } body.settings-page .save-settings-wrapper { padding: var(--page-actions-pad, 1rem) 12px calc(var(--page-actions-pad, 1rem) + env(safe-area-inset-bottom)); } body.settings-page .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 12px; overflow: visible; } body.settings-page .settings-mode-tabs, body.settings-page #settingsModeTabs { width: 100%; height: auto; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; } body.settings-page #settingsModeTabs button { flex: 0 0 auto; white-space: nowrap; } body.settings-page .settings-columns { grid-template-columns: 1fr; height: auto; overflow: visible; } body.settings-page .settings-column-left, body.settings-page .settings-column-right { height: auto; overflow: visible; } body.settings-page #settingsOverlay.help-open .settings-content { padding-right: 12px; } body.settings-page .settings-help-drawer { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); max-height: 45vh; width: auto; } } /* Phones only: the glass bottom-nav (84px) is fixed at the viewport bottom, so reserve that height below the settings scroll area â€” otherwise the last control (Speichern) is hidden behind the nav and unreachable. Only when .has-bottom-nav is active (â‰¤767px). */ @media (max-width: 767px) { body.brand-refined.has-bottom-nav.settings-page .settings-overlay { padding-bottom: calc(var(--page-bottom-padding, 18px) + 84px + env(safe-area-inset-bottom)); } body.brand-refined.has-bottom-nav.settings-page .settings-help-drawer { bottom: calc(12px + 84px + env(safe-area-inset-bottom)); max-height: 40vh; } } @media (max-width: 520px) { body.programs-page { overflow: auto; } body.programs-page .program-overlay { height: auto; min-height: 100dvh; overflow: visible; padding: calc(var(--page-top-padding) + env(safe-area-inset-top)) 12px calc(var(--page-bottom-padding, 18px) + env(safe-area-inset-bottom)); grid-template-rows: auto auto auto; } body.programs-page .programs-sidebar { height: auto; max-height: min(38vh, 320px); } body.programs-page .program-panel { height: auto; overflow: visible; } body.programs-page .program-body { overflow: visible; } body.programs-page .program-sequence, body.programs-page .program-sequence-grid { overflow: visible; } } .instruction-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 92vw); height: auto; max-height: calc(100vh - 12vh); max-height: calc(100dvh - 12vh); background: var(--panel); z-index: 1200; display: none; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: auto auto; grid-template-areas: "prev content next" "dots dots dots"; gap: 1rem 1.25rem; padding: 1.5rem 1.75rem; border-radius: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28); align-items: center; justify-items: center; overflow: hidden; } /* Instruction overlay mockup container */ #instructionPanel .mockup-screen { position: relative; width: 85%; max-width: 860px; aspect-ratio: 16 / 9; min-height: 280px; max-height: 44vh; border: 5px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; } .instruction-panel.active { display: grid; } /* Inner content */ .instruction-content { grid-area: content; width: 100%; height: 100%; text-align: center; font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-lg); color: var(--text); display: grid; grid-template-rows: auto auto auto; gap: 1rem; justify-items: center; align-content: start; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .instruction-text { margin: 0; font-size: var(--fs-xl); line-height: 1.5; color: var(--text); max-height: none; overflow: visible; } #screeningInstructionText { font-size: var(--fs-md); } .instruction-text .instruction-text-summary, .instruction-text .instructions-guide-steps { font-size: var(--fs-md); text-align: left; } .instruction-mode-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); } .nav-arrow { width: 42px; height: 42px; cursor: pointer; position: static; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)); } .left-arrow { grid-area: prev; justify-self: end; } .right-arrow { grid-area: next; justify-self: start; } .instruction-close { position: absolute; top: 10px; right: 10px; background: transparent; border: none; font-size: var(--fs-2xl); line-height: 1; color: var(--muted); cursor: pointer; padding: 6px; } .instruction-close:hover { color: var(--text); } /* Pagination dots */ .pagination-dots { grid-area: dots; position: static; bottom: auto; left: auto; transform: none; display: flex; gap: 0.5rem; z-index: auto; } .pagination-dots .dot { width: 10px; height: 10px; background: var(--border-strong); border-radius: 50%; transition: background 0.3s ease; } .pagination-dots .dot.is-active, .pagination-dots .dot.active { /* keep .active for backward compat */ background: var(--accent); } /* Progress bars */ .progress-bar { position: fixed; /* relative to viewport */ width: 100vw; height: var(--progress-bar-height); background: var(--disabled-bg); z-index: 1001; overflow: hidden; display: none; /* shown by JS */ } .progress-bar.top-bar { top: 0; left: 0; } .progress-bar.bottom-bar { bottom: 0; left: 0; } .progress-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; } /* optional variant used by JS for duration animation */ .progress-fill.duration-fill { transition: width linear; } .progress-fill.grey { background: var(--text-muted); } /* Tick marks for trials under the bar */ .trial-increments { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; } .trial-increments .increment { flex: 1; border-right: 1px solid rgba(0, 0, 0, 0.2); } .trial-increments .increment:last-child { border-right: none; } /* ========================================================================== J) LOGIN SCREEN & SLIDER - Split layout, carousel pages, fixed nav bars and dots ========================================================================== */ /* Tabs above login/info panels */ .login-tabs { width: min(1200px, 94vw); margin: clamp(12px, 2.2vw, 22px) auto clamp(10px, 1.6vw, 18px); display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; } .login-pages { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 22px); padding: clamp(16px, 2.2vw, 26px) 0 clamp(24px, 3vw, 36px); } .login-pages .info-panel { margin: 0; } .panel-separator { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; padding: clamp(6px, 1.2vw, 10px) 0; } .panel-separator span { width: 10px; height: 10px; border-radius: 999px; background: #D01C1F; } .login-tab { appearance: none; border: 1px solid rgba(15, 23, 42, 0.2); background: var(--card); color: var(--text); border-radius: 999px; padding: 0.55rem 1rem; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .login-tab:hover { transform: translateY(-1px); border-color: rgba(15, 23, 42, 0.35); } .login-tab.is-active { background: #D01C1F; color: var(--text-on-dark); border-color: #D01C1F; } .login-tab:focus-visible { outline: 3px solid rgba(15, 23, 42, 0.25); outline-offset: 2px; } .info-panel { width: min(1200px, 94vw); margin: 0 auto clamp(18px, 2.6vw, 28px); } .info-panel .info-card { width: 100%; } .info-panel .hero-pill, .info-panel .page-pill { font-size: var(--fs-sm); padding: 6px 12px; letter-spacing: 0.04em; } .info-card--login { padding: 0; background: var(--card); box-shadow: none; backdrop-filter: none; } .info-card--login .login-wrapper { width: 100%; margin: 0; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: auto; } .info-card--login .login-wrapper.welcome-open { min-height: clamp(560px, 80vh, 920px); } .info-card--login .login-wrapper.welcome-open .login-left { min-height: inherit; } .info-card--login .login-left { justify-content: flex-start; --login-center-top: clamp(8px, 2vh, 18px); --login-center-bottom: clamp(24px, 4vh, 48px); } .login-wrapper.welcome-open .login-center { visibility: hidden; pointer-events: none; } /* Full viewport split layout */ .login-wrapper { display: flex; flex-direction: row; align-items: stretch; gap: clamp(14px, 2vw, 28px); width: min(1200px, 94vw); min-height: 100vh; min-height: 100svh; min-height: 100dvh; height: auto; margin: 0 auto; padding: clamp(16px, 2.5vw, 32px); font-size: var(--fs-md); font-family: 'Montserrat', sans-serif; border-radius: 28px; background: var(--card); box-shadow: none; overflow: hidden; position: relative; isolation: isolate; } /* Tab panel visibility */ .tab-panel { display: none; } .tab-panel.is-active { display: block; } .tab-panel--flex.is-active { display: flex; } .login-left { flex: 1 1 40%; background: transparent; padding: clamp(24px, 3vw, 42px); --login-center-top: clamp(16px, 6vh, 48px); --login-center-bottom: clamp(96px, 16vh, 160px); display: flex; flex-direction: column; align-items: stretch; justify-content: center; position: relative; /* anchors .form-panel in your CSS */ isolation: isolate; overflow: visible; border: none; border-radius: 0; box-shadow: none; outline: none; align-self: stretch; } .login-center { position: relative; margin: var(--login-center-top) 0 var(--login-center-bottom); flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; z-index: 2; overflow: visible; padding-bottom: clamp(8px, 2vh, 16px); } .login-left::before { display: none; } .login-left::after { display: none; } .login-left-card { display: contents; } .login-left-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .login-subtitle { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: 0.25rem; } .hero-note { margin-top: auto; padding: 14px 16px; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 16px; background: var(--card); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); display: flex; align-items: center; gap: 12px; } .hero-note h2 { color: #D01C1F; font-size: var(--fs-md); margin: 6px 0; } .hero-note p { color: var(--text-muted); margin: 0; line-height: 1.45; font-size: var(--fs-sm); } .hero-note .hero-pill { margin: 0; flex: 0 0 auto; max-width: 100%; white-space: nowrap; line-height: 1.3; text-align: left; word-break: normal; } .login-right { width: 100%; flex: 1 1 60%; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; display: flex; flex-direction: column; background: #D01C1F; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: clamp(8px, 1.5vw, 18px); position: relative; overflow: hidden; min-width: 0; padding: clamp(18px, 2.6vw, 32px); color: #f1f6ff; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); align-self: stretch; } .login-right::before, .login-right::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(1px); opacity: 0.6; } .login-right::before { width: 260px; height: 260px; background: none; top: -60px; right: -60px; } .login-right::after { width: 320px; height: 320px; background: none; bottom: -90px; left: -80px; } .right-hero { display: none; } .right-hero::after { content: ""; position: absolute; inset: 0; background: none; pointer-events: none; } .hero-copy h2 { color: #f7fbff; font-size: var(--fs-xl); line-height: 1.2; margin-bottom: 0.35rem; } .hero-copy p { color: rgba(241, 246, 255, 0.9); margin: 0.35rem 0 0.5rem; font-size: var(--fs-md); } .hero-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.12); color: #D01C1F; font-weight: 700; font-size: var(--fs-xl); letter-spacing: 0.02em; } .hero-visual { text-align: center; } .hero-visual img { width: min(440px, 100%); height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .nav-wrapper { display: none; } .info-card { width: 100%; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; height: 100%; max-height: 100%; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: rgba(255, 255, 255, 0.92); color: var(--text); border-radius: 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(6px); overflow: hidden; padding: clamp(22px, 3vw, 32px); position: relative; transition: box-shadow 0.2s ease, transform 0.2s ease; display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; font-size: var(--fs-xl); } .info-card--stacked { max-width: none; } .info-card-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .info-card-header h2 { margin: 0; color: var(--text); } /* Branding title under logo */ .branding { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0.4rem, 1.2vw, 0.85rem); flex-wrap: wrap; margin-bottom: 0.8rem; } .branding .login-logo { order: 2; margin: 0; } .branding .login-title { order: 1; } .login-title { font-weight: 700; font-size: var(--fs-2xl); color: var(--text); margin-top: 0; text-align: center; letter-spacing: 0.02em; } .login-page-title { margin: 0 0 1rem; font-size: var(--fs-xl); font-weight: 700; color: var(--text); text-align: center; } .login-test-notice { width: min(100%, 520px); margin: -0.45rem auto 0; padding: 0.8rem 0.95rem; border: 1px solid color-mix(in oklab, var(--accent) 44%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--accent) 10%, var(--card)); color: var(--accent-readable); font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; text-align: center; } .login-wrapper .login-logo { max-width: clamp(80px, 11vw, 130px); } .login-wrapper .hero-pill, .login-wrapper .page-pill { font-size: var(--fs-sm); padding: 6px 12px; letter-spacing: 0.04em; } /* Action links under the form */ .login-links { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-top: 0.8rem; } #loginForm + .login-links { margin-top: 0.2rem; margin-bottom: 0.75rem; } .login-link-text { color: var(--accent); text-decoration: underline; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-size: var(--fs-sm); } .login-link-text:hover { filter: brightness(0.9); } .login-link-text:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 35%, transparent); outline-offset: 2px; } .login-link-text--danger { color: #b63b41; } .link-btn { appearance: none; border: 1px solid rgba(15, 23, 42, 0.18); background: var(--panel); color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; padding: 0.4rem 0.95rem; border-radius: 999px; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .link-btn:hover { transform: translateY(-1px); background: var(--card); border-color: rgba(15, 23, 42, 0.35); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14); } .link-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2), 0 10px 20px rgba(15, 23, 42, 0.12); } .link-btn--primary { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28); } .link-btn--primary:hover { filter: brightness(1.05); } .link-btn--ghost { background: var(--card); } .link-btn--ghost:hover { background: var(--panel); } .link-btn--danger { background: #fff5f5; color: #b63b41; border-color: rgba(229, 72, 77, 0.35); } .link-btn--danger:hover { background: #ffe9ea; border-color: #e5484d; color: #a72f36; } body.theme-dark .link-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--text); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); } body.theme-dark .link-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); } body.theme-dark .link-btn--primary { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; } body.theme-dark .link-btn--ghost { background: rgba(255, 255, 255, 0.06); } body.theme-dark .link-btn--danger { background: rgba(229, 72, 77, 0.16); color: #ffd2d4; border-color: rgba(229, 72, 77, 0.5); } .inline-links { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; justify-content: center; margin-top: 0.25rem; } .login-text.centered-text { text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; color: var(--muted); } /* Carousel wrapper & pages */ .page-container { position: relative; width: 100%; padding: clamp(14px, 2vw, 22px); overflow-y: auto; overflow-x: hidden; z-index: 1; flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; padding-bottom: 36px; max-height: 100%; height: 100%; } .page-section p { margin-bottom: 0.95rem; line-height: 1.65; } .page-section p:last-child { margin-bottom: 0; } .page-section a { color: var(--accent); font-weight: 700; text-decoration: none; } .page-section a:hover { text-decoration: underline; } .page-section { display: none; } /* inactive */ .page-section.active { display: block; } /* active page */ .login-highlight-word { padding: 0.1rem 0.15rem; border-radius: 6px; transition: background .2s, color .2s; } .login-highlight-word.is-active { background: var(--accent); color: var(--text-on-dark); } /* Dots row (fixed at bottom of right half) */ .dots { position: static; transform: none; display: flex; gap: 10px; z-index: 2; } .dots span { width: 10px; height: 10px; background: var(--border-strong); border-radius: 50%; display: inline-block; transition: background 0.3s; } /* Active dot (supports both .is-active and legacy .active) */ .dots span.is-active, .dots span.active { background: var(--accent); } .page-pill { margin-bottom: 10px; font-size: var(--fs-xl); line-height: 1.05; } /* Force page-pill size on info pages (prevent inheriting larger hero-pill styles) */ .info-card .page-pill { font-size: var(--fs-lg) !important; line-height: 1.05; } .info-exercise-catalog { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.2rem; } .info-exercise-loading { color: var(--muted); font-weight: 700; } .info-exercise-group { display: grid; gap: 0.85rem; } .info-exercise-group-title { margin: 0; color: var(--text); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.2; } .info-exercise-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; } /* Special-setting badge: marks the ONE setting that modifies a mode from its base paradigm (e.g. cash1 â†’ Taschenrechner, space2 â†’ gespiegelte Antwort). Rendered inline next to that setting on the settings panel and the Anleitungen settings list â€” NOT on mode buttons. */ .setting-special-badge { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin-left: 0.35rem; flex: 0 0 auto; } .instructions-setting-item.is-special-setting, .cognitive-setting-row.is-special-setting { border-left: 3px solid var(--accent); padding-left: 8px; } .cognitive-setting-row.is-special-setting { border-radius: 4px; } .info-exercise-card-header { position: relative; } .info-exercise-card { position: relative; --mode-accent: var(--accent); display: grid; grid-template-columns: minmax(280px, 1.2fr) minmax(340px, 0.8fr); grid-template-rows: auto auto 1fr; align-items: start; gap: 0.75rem 0.85rem; min-width: 0; padding: clamp(0.7rem, 1.2vw, 0.9rem); border: 1px solid color-mix(in oklab, var(--mode-accent) 24%, var(--border)); border-left: 5px solid var(--mode-accent); border-radius: 0; background: transparent; } .info-exercise-card.red { --mode-accent: #D01C1F; } .info-exercise-card.blue { --mode-accent: #2563EB; } .info-exercise-card.yellow { --mode-accent: #FBBF24; } .info-exercise-card.green { --mode-accent: #16A34A; } .info-exercise-card.purple { --mode-accent: #9333ea; } .info-exercise-card-header { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .info-exercise-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: 8px; background: var(--mode-accent); font-size: 0.82rem; font-weight: 900; } /* (0,2,0) so it beats brand-tokens.css `body.brand-refined :where(span){color:var(--ink)}` (0,1,1) */ .info-exercise-card .info-exercise-icon { color: var(--text-on-dark); } .info-exercise-card.yellow .info-exercise-icon { color: #2F2A25; } .info-exercise-title-wrap { min-width: 0; } .info-exercise-title { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.15; } .info-exercise-focus { display: block; margin-top: 0.14rem; color: var(--muted); font-size: 0.82rem; font-weight: 800; line-height: 1.25; } .info-exercise-text { margin: 0; color: var(--text); font-size: 0.9rem; line-height: 1.45; } .info-exercise-guide-section { grid-column: 1; display: grid; gap: 0.65rem; padding: clamp(0.75rem, 1.2vw, 1rem); border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: none; } .info-exercise-guide-section h3 { margin: 0; color: var(--text); font-size: clamp(0.95rem, 1.15vw, 1.08rem); font-weight: 800; } .info-exercise-guide-steps { gap: 0.55rem; } .info-exercise-guide-steps li { grid-template-columns: 1.85rem minmax(0, 1fr); gap: 0.6rem; font-size: 0.9rem; line-height: 1.45; } .info-exercise-guide-steps li::before { width: 1.55rem; height: 1.55rem; font-size: 0.72rem; } .info-exercise-guide-steps .instruction-inline-signal, .info-exercise-guide-steps .instruction-inline-chip { min-height: 1.15rem; padding: 0 0.14rem; font-size: 0.9em; border: 0; margin: 0 0.04rem; border-radius: 6px; vertical-align: -0.12em; } .info-exercise-guide-steps .instruction-inline-signal { background: transparent; } .info-exercise-guide-steps .instruction-inline-signal img { display: inline-block; width: 1rem; height: 1rem; margin: 0; border-radius: 0; box-shadow: none; } .info-exercise-demo { grid-column: 2; grid-row: 1 / span 3; justify-self: end; width: 100%; max-width: 520px; min-height: clamp(230px, 23vw, 330px); aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 0; background: transparent; pointer-events: none; user-select: none; } .info-exercise-demo .cognitive-instruction-demo-container, .info-exercise-demo .cognitive-demo-screen { min-height: clamp(230px, 23vw, 330px); } .info-exercise-demo .cognitive-demo-screen, .info-exercise-demo .cognitive-demo-gamearea, .info-exercise-demo .cognitive-demo-screen .cognitive-stage { background: transparent; border-radius: 0; } .info-exercise-demo .cognitive-demo-screen .cognitive-asset-shell, .info-exercise-demo .cognitive-demo-screen .cognitive-rotation-figure { background: transparent; border-radius: 0; box-shadow: none; } .info-exercise-demo .cognitive-demo-actions { display: none; } .info-exercise-demo-loading, .info-exercise-demo-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: clamp(230px, 23vw, 330px); color: var(--muted); font-weight: 800; } @media (max-width: 960px) { .info-exercise-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; } .info-exercise-guide-section { grid-column: auto; } .info-exercise-demo { grid-column: auto; grid-row: auto; width: 100%; max-width: 100%; min-width: 0; min-height: clamp(180px, 48vw, 250px); } .info-exercise-demo .cognitive-instruction-demo-container, .info-exercise-demo .cognitive-demo-screen, .info-exercise-demo-loading, .info-exercise-demo-fallback { min-height: clamp(180px, 48vw, 250px); } } .playable-demo-page { display: grid; gap: 1rem; } .playable-demo-catalog { display: grid; gap: clamp(1rem, 2vw, 1.4rem); margin-top: 0.4rem; } .playable-demo-group { display: grid; gap: 0.8rem; } .playable-demo-group-title { margin: 0; color: var(--text); font-size: clamp(1.02rem, 1.4vw, 1.28rem); line-height: 1.2; } .playable-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 320px)); justify-content: start; gap: 0.8rem; } .playable-demo-card { --mode-accent: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0.7rem 0.85rem; min-width: 0; padding: 0.85rem; border: 1px solid color-mix(in oklab, var(--mode-accent) 24%, var(--border)); border-left: 4px solid var(--mode-accent); border-radius: 8px; background: var(--card); } .playable-demo-card.red { --mode-accent: #D01C1F; } .playable-demo-card.blue { --mode-accent: #2563EB; } .playable-demo-card.yellow { --mode-accent: #FBBF24; } .playable-demo-card.green { --mode-accent: #16A34A; } .playable-demo-card.purple { --mode-accent: #9333ea; } .playable-demo-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--mode-accent); color: var(--text-on-dark); font-size: 0.82rem; font-weight: 900; } .playable-demo-card.yellow .playable-demo-icon { color: #2F2A25; } .playable-demo-card-content { min-width: 0; } .playable-demo-card-title { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.15; } .playable-demo-card-focus { margin: 0.18rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.3; } .playable-demo-card-btn { grid-column: 1 / -1; justify-self: center; min-height: 2.25rem; padding: 0.55rem 0.85rem; border: 1px solid color-mix(in oklab, var(--mode-accent) 34%, transparent); border-radius: 8px; background: var(--mode-accent); color: var(--text-on-dark); font: 800 0.82rem/1.1 'Montserrat', Arial, sans-serif; cursor: pointer; } .playable-demo-card.yellow .playable-demo-card-btn { color: #2F2A25; } .playable-demo-card-btn:hover, .playable-demo-card-btn:focus-visible { filter: brightness(1.04); outline: 2px solid color-mix(in oklab, var(--mode-accent) 38%, transparent); outline-offset: 2px; } .playable-demo-modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 0.5rem; background: rgba(15, 23, 42, 0.72); } .playable-demo-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: calc(100vw - 1rem); height: calc(100dvh - 1rem); min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); border-radius: 8px; background: var(--panel); box-shadow: 0 26px 70px rgba(15, 23, 42, 0.34); } .playable-demo-header, .playable-demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; padding: 0.72rem clamp(0.8rem, 1.6vw, 1.15rem); border-color: var(--border); background: var(--card); } .playable-demo-header { border-bottom: 1px solid var(--border); } .playable-demo-footer { border-top: 1px solid var(--border); } .playable-demo-heading { min-width: 0; } .playable-demo-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.15; } .playable-demo-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; } .playable-demo-action { min-height: 2.35rem; padding: 0.55rem 0.85rem; border-radius: 8px; font: 800 0.82rem/1.1 'Montserrat', Arial, sans-serif; cursor: pointer; } .playable-demo-action--secondary { border: 1px solid var(--border); background: var(--panel); color: var(--text); } .playable-demo-action--primary { border: 1px solid var(--accent); background: var(--accent); color: var(--text-on-dark); } .playable-demo-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .playable-demo-body { display: grid; min-width: 0; min-height: 0; padding: clamp(0.35rem, 1vw, 0.75rem); background: var(--bg); } .playable-demo-gamearea { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; container-type: size; border: 1px solid color-mix(in oklab, var(--border) 72%, transparent); border-radius: 8px; background: var(--bg); isolation: isolate; outline: none; } .playable-demo-gamearea:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 26%, transparent); } .playable-demo-progress { flex: 1 1 auto; display: grid; grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.45fr); align-items: center; gap: 0.65rem; min-width: 0; width: auto; } .playable-demo-progress-bar { height: 0.46rem; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--border) 64%, transparent); } .playable-demo-progress-fill { display: block; width: 0%; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.18s ease; } .playable-demo-progress-bar--duration .playable-demo-progress-fill { width: 100%; background: #16A34A; opacity: 0.68; } .playable-demo-result { flex: 0 0 auto; color: var(--text); font-size: 0.84rem; font-weight: 800; line-height: 1.3; } .playable-demo-done { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.4rem; padding: 1rem; color: var(--text); text-align: center; background: var(--bg); } .playable-demo-done strong { font-size: clamp(1.25rem, 3vw, 2rem); } .playable-demo-done span { color: var(--muted); font-weight: 800; } .playable-demo-fixation-dot { position: absolute; left: 50%; top: 50%; z-index: 50; width: 18px; height: 18px; border-radius: 50%; background: #D01C1F; box-shadow: 0 0 0 5px rgba(208, 28, 31, 0.14); transform: translate(-50%, -50%); pointer-events: none; } @media (max-width: 760px) { .playable-demo-grid { grid-template-columns: 1fr; } .playable-demo-card { grid-template-columns: auto minmax(0, 1fr); } .playable-demo-card-btn { width: 100%; } .playable-demo-modal { padding: 0; } .playable-demo-dialog { width: 100vw; height: 100dvh; border-width: 0; border-radius: 0; } .playable-demo-header, .playable-demo-footer { align-items: stretch; flex-direction: column; padding: 0.65rem; } .playable-demo-actions { width: 100%; } .playable-demo-action { flex: 1 1 0; min-width: 0; } .playable-demo-progress { grid-template-columns: 1fr; } .playable-demo-result { font-size: 0.8rem; } } @media (max-height: 620px) { .playable-demo-header, .playable-demo-footer { padding-top: 0.48rem; padding-bottom: 0.48rem; } .playable-demo-action { min-height: 2.1rem; padding-top: 0.45rem; padding-bottom: 0.45rem; } } .portrait-wrap { text-align: center; margin: 8px 0 12px; } .portrait-img { width: min(240px, 60%); height: auto; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } .pager-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px 8px; flex-wrap: wrap; flex: 0 0 auto; } .pager-btn { border: 1px solid rgba(15, 23, 42, 0.18); background: var(--panel); color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; transition: background 0.2s ease, transform 0.1s ease; } .pager-btn:hover { background: var(--border); transform: translateY(-1px); } .pager-btn:active { transform: translateY(0); } /* Responsive tweaks */ @media (max-width: 1024px) { .login-wrapper { flex-direction: column; padding: clamp(14px, 2vw, 24px); gap: clamp(12px, 2vw, 20px); width: min(960px, 94vw); height: auto; font-size: var(--fs-md); } .login-left, .login-right { border-radius: 20px; min-height: auto; height: auto; } .login-left { z-index: 2; justify-content: flex-start; } .login-wrapper .login-center { position: static; transform: none; margin-bottom: 1rem; } .login-right { z-index: 1; padding: clamp(16px, 3vw, 28px); min-height: auto; max-height: none; } .info-card { border-radius: 20px; max-height: none; height: auto; font-size: var(--fs-lg); } } @media (max-width: 1024px) and (min-width: 769px) { .login-left.panel-open { justify-content: flex-start; } .login-left.panel-open #loginForm, .login-left.panel-open .login-links, .login-left.panel-open .hero-note { display: none; } .login-left.panel-open .form-panel { position: static; inset: auto; width: 100%; height: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; margin-top: clamp(12px, 2vw, 18px); } .login-left.panel-open .form-panel .login-form { width: min(600px, 100%); margin: 0 auto; } } @media (max-width: 1400px) { .login-wrapper { font-size: var(--fs-lg); } .hero-pill { font-size: var(--fs-lg); } .info-card { font-size: var(--fs-xl); } .login-logo { max-width: 130px; } } @media (max-width: 1700px) { .login-logo { max-width: 130px; } .hero-pill { font-size: var(--fs-2xs); } .info-card { font-size: var(--fs-lg); } .page-pill { font-size: var(--fs-lg); } } @media (min-width: 1920px) { .login-wrapper { width: min(1500px, 90vw); } } @media (min-width: 1025px) and (max-width: 1400px) { .login-wrapper { width: min(1320px, 96vw); } .login-left { flex: 1 1 40%; } .login-right { flex: 1 1 60%; } } /* Widescreen/aspect-ratio safeguard: scale down type instead of stretching at wide zooms */ @media (min-aspect-ratio: 16/9) { .login-wrapper { font-size: var(--fs-lg); max-height: 94vh; } .info-card { font-size: var(--fs-lg); } .hero-pill { font-size: var(--fs-sm); } .page-pill { font-size: var(--fs-md); } .login-logo { max-width: 120px; } } /* Compact layout for lower viewport heights (e.g., zoomed-in 150% around 1360x813) */ @media (max-height: 900px) { .login-wrapper { font-size: var(--fs-md); padding: clamp(12px, 2vw, 20px); max-height: none; } .login-left { padding: clamp(16px, 3vw, 26px); } .login-right { padding: clamp(14px, 2vw, 24px); } .info-card { font-size: var(--fs-lg); padding: clamp(16px, 2vw, 22px); } .hero-pill { font-size: var(--fs-2xs); } .info-card .page-pill { font-size: var(--fs-md) !important; } .login-logo { max-width: 110px; } .login-form { max-width: 380px; padding: 1.6rem; } .hero-note h2 { font-size: var(--fs-md); } .hero-note p { font-size: var(--fs-sm); } } @media (min-width: 1025px) and (max-width: 1400px) and (max-height: 1100px) and (orientation: landscape) { .login-wrapper { height: 100dvh; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; width: min(1320px, 96vw); gap: clamp(10px, 1.6vw, 22px); } .login-left, .login-right { min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .login-left { flex: 1 1 42%; padding: clamp(18px, 2.4vw, 32px); overflow-y: auto; } .login-right { flex: 1 1 58%; } .branding { flex-direction: column; gap: clamp(0.35rem, 1vw, 0.75rem); } .login-title { font-size: var(--fs-2xl); } .login-wrapper .login-logo { max-width: clamp(90px, 12vw, 140px); } } @media (max-height: 860px) and (orientation: landscape) { .login-center { margin: clamp(8px, 3vh, 18px) 0 clamp(24px, 6vh, 56px); justify-content: flex-start; } .login-wrapper .login-logo { max-width: clamp(90px, 12vw, 130px); } .login-title { font-size: var(--fs-2xl); } } @media (max-height: 820px) { .login-left { --login-center-top: clamp(8px, 2.5vh, 24px); --login-center-bottom: clamp(32px, 6vh, 80px); overflow-y: auto; overflow-x: hidden; } .login-center { justify-content: flex-start; } .form-panel { align-items: flex-start; justify-content: flex-start; overflow-y: auto; } } @media (max-width: 768px) { .login-wrapper { position: relative; } .login-left { z-index: 2; } .login-right { z-index: 1; } .login-left-card { width: min(520px, 100%); } .form-panel { position: fixed; inset: 0; height: 100dvh; max-height: 100dvh; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); align-items: flex-start; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 3000; } .form-panel .login-form { width: min(520px, 100%); margin: 0 auto; } #welcomePanel #welcomeFields { grid-template-columns: 1fr; } #welcomePanel .login-actions { gap: 0.75rem !important; flex-wrap: wrap; justify-content: center !important; width: 100%; } #welcomePanel .login-actions .login-btn { flex: 1 1 140px; max-width: 220px; } } @media (max-width: 640px) { .login-wrapper { width: 100%; border-radius: 0; padding: 12px 14px; box-shadow: none; } .login-left, .login-right { flex: 0 0 auto; } .login-wrapper .login-center { position: static; transform: none; margin-bottom: 1rem; } .login-wrapper .login-actions { flex-wrap: wrap; justify-content: center; } .login-wrapper .login-actions .login-btn { flex: 1 1 140px; max-width: 220px; } .login-left, .login-right, .info-card { border-radius: 16px; } .login-right { padding: 16px; } .login-form { padding: 1.4rem; } .hero-note { padding: 12px; } } @media (max-width: 420px) { .login-wrapper .login-actions .login-btn { flex: 1 1 100%; max-width: none; } } /* ========================================================================== K) HEADER ACTIONS (TOP/BOTTOM CONTROLS) - Settings, profile, data, logout ========================================================================== */ /* Base icon-only buttons */ button.icon-btn, .icon-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card); /* same token as .theme-toggle-pill */ border: 1px solid var(--border); box-shadow: 0 6px 20px var(--shadow); cursor: pointer; z-index: 2001; transition: transform .12s, box-shadow .12s, background .12s; } button.icon-btn:hover, .icon-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--shadow); } button.icon-btn .icon, .icon-btn .icon { width: 60%; height: 60%; object-fit: contain; pointer-events: none; } /* positions (keep as-is) */ #logoutBtn.icon-btn { top: 1vh; left: 1vw; } #dataBtn.icon-btn { bottom: 1vh; left: 1vw; } #openProfilePanel.icon-btn { bottom: 1vh; right: 1vw; } #settingsBtn.icon-btn { top: 1vh; right: 1vw; } .logout-btn { position: absolute; top: 1vh; left: 1vw; z-index: 2001; color: #D01C1F; } .data-btn { position: absolute; bottom: 1vh; left: 1vw; z-index: 2001; color: #D01C1F; } /* Optional clusters (when grouping multiple buttons in corners) */ .controls-top-left, .controls-top-right, .controls-bottom-left, .controls-bottom-right { position: absolute; display: flex; gap: .5rem; } .controls-top-left { top: 1rem; left: 1rem; } .controls-top-right { top: 1rem; right: 1rem; } .controls-bottom-left { bottom: 1rem; left: 1rem; } .controls-bottom-right { bottom: 1rem; right: 1rem; } /* ====================================================================== K1) THEME TOGGLE (dark mode slider) + Hilfe on same pill ====================================================================== */ .theme-toggle-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); right: auto; width: auto; display: flex; justify-content: center; pointer-events: none; /* container stays click-through */ z-index: 9999; } .theme-toggle { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px; /* more padding inside pill */ background: var(--card); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; } .theme-toggle-pill { pointer-events: auto; /* children are clickable */ display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px; min-width: 0; /* ensure enough width */ background: var(--card); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 20px var(--shadow); } body.ui-overlay-open .theme-toggle-bar { z-index: 900; } body.ui-overlay-open .theme-toggle-pill { opacity: 0.35; filter: grayscale(1); pointer-events: none; } body.program-overlay-open .theme-toggle-pill { filter: grayscale(1) blur(2px); } body.ui-overlay-open .mode-button-bar { z-index: 900; } /* tiny divider between the slider and Hilfe */ .theme-toggle-divider { width: 1px; height: 20px; background: var(--border); opacity: .7; } .theme-toggle__input { position: absolute; opacity: 0; pointer-events: none; display: none; } .theme-toggle__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; opacity: .6; transition: opacity .2s; } .theme-toggle__icon svg { width: 18px; height: 18px; fill: var(--text); } .theme-toggle__track { position: relative; width: 48px; height: 26px; background: var(--muted); border-radius: 999px; transition: background .2s; } .theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .22s, background .2s; } .theme-toggle__input:checked+.theme-toggle[role="switch"] .theme-toggle__thumb { transform: translateX(22px); } .theme-toggle__input:not(:checked)+.theme-toggle .theme-toggle__icon--sun { opacity: 1; } .theme-toggle__input:checked+.theme-toggle .theme-toggle__icon--moon { opacity: 1; } /* Style the Hilfe button as a pill and ensure it participates in layout */ .help-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; /* room for the text */ height: 32px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; /* prevent wrap */ cursor: pointer; transition: transform .1s, background .2s, color .2s, border-color .2s; } .help-btn:hover { background: var(--accent); color: var(--accent-contrast, #fff); border-color: var(--accent); } .pill-icon-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-height: 32px; padding: 0 0.65rem; gap: 0.45rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; cursor: pointer; transition: transform .1s, background .2s, border-color .2s; } .pill-icon-btn:hover { background: color-mix(in oklab, var(--accent) 12%, var(--card)); border-color: var(--accent); } /* Prevent hover lift on main screen controls so they don't jump after game end */ .theme-toggle-pill .pill-icon-btn:hover, .theme-toggle-pill .help-btn:hover, .main-actions .btn:hover, .profile-status-btn:hover { transform: none; } .pill-icon { width: 18px; height: 18px; object-fit: contain; pointer-events: none; } .pill-label { pointer-events: none; } /* compact tweak on very small screens */ @media (max-width: 480px) { .theme-toggle { gap: 8px; padding: 6px 8px; } .theme-toggle #hilfeBtn { width: 30px; height: 30px; } } /* ========================================================================== L) HELP OVERLAY - Onboarding arrows and labels ========================================================================== */ /* Fullscreen overlay behind help hints */ .hilfe-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); /* semi-transparent scrim */ z-index: 3000; display: none; /* toggled on when active */ } .hilfe-overlay.active { display: block; } /* Bubble labels */ .help-text { position: absolute; padding: 0.5rem 1rem; background: var(--panel); color: var(--text); border-radius: var(--radius, 8px); font-size: var(--fs-md); font-family: 'Montserrat', Arial, sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 3100; } /* Arrows (base) */ .arrow { width: 0; height: 0; position: absolute; border-style: solid; z-index: 3101; } /* Arrow direction variants */ .arrow-up { border-width: 0 10px 10px 10px; border-color: transparent transparent white transparent; } .arrow-down { border-width: 10px 10px 0 10px; border-color: white transparent transparent transparent; } .arrow-left { border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } .arrow-right { border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white; } /* Target-specific placements (examples) */ .help-logout { bottom: 5.5rem; left: calc(50% - 170px); } .help-profile { top: 7.5rem; left: 50%; transform: translateX(-50%); } .help-data { bottom: 5.5rem; left: calc(50% + 130px); transform: translateX(-50%); } .help-settings { top: 12.5rem; left: 50%; transform: translateX(-50%); } .help-mode { position: absolute; /* or fixed, depending on use */ top: 5rem; /* keep vertical offset */ left: 50%; /* start at horizontal center */ transform: translateX(-50%); /* pull it back by half its own width */ } .help-toggle { position: absolute; /* or fixed, depending on use */ bottom: 5rem; /* keep vertical offset */ left: 50%; /* start at horizontal center */ transform: translateX(-50%); /* pull it back by half its own width */ } .help-instruction { position: absolute; /* or fixed, depending on use */ bottom: 25%; /* keep vertical offset */ left: 50%; /* start at horizontal center */ transform: translateX(-50%); /* pull it back by half its own width */ } /* ========================================================================== M) END-OF-GAME FEEDBACK - Compact summary card shown after max. DurchgÃ¤nge ========================================================================== */ .end-feedback-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 3200; padding: 1rem; } .end-feedback-overlay.program { background: rgba(0, 0, 0, 0.55); } .end-feedback-overlay.active { display: flex; } .end-feedback-overlay.prep { display: flex; } .end-feedback-overlay.prep .end-feedback-card { opacity: 0; visibility: hidden; } .end-feedback-card { width: min(560px, 96vw); background: var(--card); color: var(--text); border-radius: 14px; padding: 1.5rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 1rem; } .end-feedback-header { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; } .end-feedback-kicker { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; } .end-feedback-card h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text); } .end-feedback-card .muted { color: var(--muted); font-size: var(--fs-sm); } .end-feedback-next { color: var(--text); font-size: var(--fs-sm); font-weight: 600; } .end-feedback-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; } .end-feedback-item { padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, var(--card) 90%, transparent); display: flex; flex-direction: column; gap: 0.2rem; } .end-feedback-item .label { font-size: var(--fs-sm); color: var(--muted); } .end-feedback-item .value { font-size: var(--fs-lg); font-weight: 700; color: var(--text); } .end-feedback-card .btn { align-self: center; min-width: 120px; } /* Program start panel (before each program step) */ .program-start-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); z-index: 2001; padding: 1rem; } body.theme-dark .program-start-overlay { background: rgba(17, 24, 39, 0.92); } .program-start-overlay.active { display: flex; } .program-start-card { width: min(560px, 96vw); background: var(--card); color: var(--text); border-radius: 14px; padding: 1.5rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; transform: translateY(clamp(-18px, -2vh, -10px)); } .program-start-card .btn { min-width: 140px; } .program-start-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .program-start-body { display: grid; gap: 0.85rem; justify-items: center; text-align: center; } .program-start-summary { margin: 0; color: var(--text); font-size: var(--fs-md); line-height: 1.45; text-align: left; align-self: stretch; } .program-start-details { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.45; max-width: 55ch; align-self: stretch; } .program-start-visual.mockup-screen { position: relative; width: min(840px, 100%); aspect-ratio: 16 / 9; min-height: 200px; max-height: 40vh; border: 5px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cognitive-start-overlay { z-index: 1300; align-items: center; padding-block: clamp(0.6rem, 1.5vh, 1rem); } .cognitive-start-overlay .program-start-card { width: min(1280px, 96vw); max-height: calc(100dvh - clamp(1.2rem, 3vh, 2rem)); padding: clamp(1rem, 1.8vh, 1.5rem); overflow-y: auto; align-items: stretch; text-align: left; gap: clamp(0.6rem, 1.2vh, 1rem); transform: translateY(clamp(-14px, -1.5vh, -8px)); } .cognitive-start-overlay .program-start-body { gap: clamp(0.55rem, 1.1vh, 0.85rem); justify-items: stretch; text-align: left; } .cognitive-start-overlay .program-start-card .btn { align-self: center; } .cognitive-start-overlay .program-start-actions { align-self: center; } .cognitive-start-overlay .program-start-visual.mockup-screen { width: min(920px, 100%); min-height: clamp(240px, 38vh, 440px); max-height: min(54vh, 500px); margin-inline: auto; } .program-start-visual.mockup-screen .cognitive-demo-progress { display: none; } .cognitive-start-badge { width: clamp(74px, 9vw, 112px); height: clamp(74px, 9vw, 112px); display: grid; place-items: center; border-radius: 12px; background: var(--accent); color: var(--text-on-dark); font-weight: 900; font-size: clamp(1.2rem, 2.3vw, 2rem); letter-spacing: 0; } .cognitive-start-badge.red { background: #D01C1F; } .cognitive-start-badge.blue { background: #2563EB; } .cognitive-start-badge.yellow { background: #FBBF24; color: #2F2A25; } .cognitive-start-badge.green { background: #16A34A; } .cognitive-start-badge.purple { background: #9333ea; } .cognitive-start-overlay .cognitive-start-badge.red, .cognitive-start-overlay .cognitive-start-badge.blue, .cognitive-start-overlay .cognitive-start-badge.green, .cognitive-start-overlay .cognitive-start-badge.purple { color: var(--text-on-dark); } .cognitive-start-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(0.9rem, 2vw, 1.25rem); align-items: center; } .cognitive-start-copy { display: grid; gap: 0.35rem; min-width: 0; } .cognitive-start-kicker { color: var(--muted); font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; } .program-start-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0; } .program-start-meta { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); line-height: 1.35; } .cognitive-start-goal { margin: 0; color: var(--accent); font-weight: 800; line-height: 1.35; } .cognitive-start-controls { justify-content: center; margin: clamp(0.25rem, 0.6vw, 0.6rem) 0 0.8rem; gap: 0.55rem; } .cognitive-start-control { width: clamp(40px, 4.4vw, 54px); height: clamp(40px, 4.4vw, 54px); border-radius: 10px; } .cognitive-start-steps { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: clamp(0.8rem, 1.5vw, 1rem); } /* Collapsible "Anleitung" wrapper around the start-card steps list. JS removes [open] ONLY when the card would overflow the viewport (short/phone screens); otherwise it stays expanded. */ .cognitive-start-anleitung { width: 100%; display: grid; gap: clamp(0.35rem, 0.9vh, 0.55rem); } .cognitive-start-anleitung-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; width: max-content; padding: 0.2rem 0.1rem; font-weight: 800; color: var(--text); user-select: none; } .cognitive-start-anleitung-summary::-webkit-details-marker { display: none; } .cognitive-start-anleitung-summary::after { content: ""; flex: 0 0 auto; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform 160ms ease; } .cognitive-start-anleitung[open] .cognitive-start-anleitung-summary::after { transform: translateY(0.06em) rotate(-135deg); } .cognitive-start-notes { display: grid; gap: 0.45rem; background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 12px; padding: clamp(0.8rem, 1.4vw, 1rem); } .cognitive-start-notes p { margin: 0; line-height: 1.45; color: var(--text); } .cognitive-start-notes strong { color: var(--accent); } /* Landscape / short viewports: the start card's vertical stack (mockup â†’ steps â†’ buttons) overflows and pushes START below the fold. Place the steps + controls BESIDE the mockup so the whole card fits without scrolling (validated: card ~982px tall â†’ ~620px). Single column stays the default for tall/portrait screens. */ @media (orientation: landscape) and (max-height: 820px) and (min-width: 700px) { .cognitive-start-overlay .program-start-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "intro intro" "visual steps" "controls steps"; align-items: start; column-gap: clamp(0.8rem, 1.8vw, 1.5rem); } .cognitive-start-overlay .cognitive-start-intro { grid-area: intro; } .cognitive-start-overlay .program-start-visual.mockup-screen { grid-area: visual; min-height: clamp(190px, 38vh, 330px); max-height: min(64vh, 440px); margin-block: 0; } .cognitive-start-overlay .cognitive-start-anleitung { grid-area: steps; align-self: start; } .cognitive-start-overlay .cognitive-start-controls { grid-area: controls; align-self: start; margin: 0.3rem 0 0; } } @media (max-width: 620px) { .cognitive-start-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; } /* The domain/focus title (e.g. "Aufmerksamkeit / Selektive Aufmerksamkeit") at --fs-xl is too large on phones and dominates the start card. Shrink it so the card stays compact. */ .program-start-title { font-size: clamp(1rem, 4vw, 1.25rem); line-height: 1.18; } } /* Screening instruction overlay */ .screening-instruction-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); z-index: 3200; padding: 1rem; } .screening-instruction-overlay.active { display: flex; } .screening-instruction-card { width: min(960px, 92vw); max-height: 90vh; background: var(--card); color: var(--text); border-radius: 20px; padding: clamp(1.2rem, 2.4vw, 1.8rem); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 1rem; text-align: left; overflow-y: auto; } .screening-instruction-header { display: flex; flex-direction: column; gap: 0.2rem; } .screening-instruction-title { font-size: var(--fs-xl); font-weight: 800; } .screening-instruction-meta { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; } .screening-instruction-visual { position: relative; width: min(760px, 100%); aspect-ratio: 16 / 9; min-height: 220px; max-height: 40vh; border: 5px solid var(--border); border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; margin: 0 auto; } .screening-instruction-card .btn { align-self: center; min-width: 160px; } @media (max-width: 520px) { .end-feedback-card { padding: 1.1rem; } .end-feedback-content { grid-template-columns: 1fr; } .end-feedback-card .btn { width: 100%; } } /* Medal celebration overlay */ .medal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); z-index: 3300; } .medal-overlay.active { display: flex; } .medal-card { background: var(--card); color: var(--text); border-radius: 14px; padding: 1.4rem 1.6rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); width: min(560px, 94vw); text-align: center; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; } .medal-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-sm); color: var(--text); margin: 0; } .medal-stage { position: relative; width: 220px; height: 220px; margin: 0 auto; } .medal-img { position: absolute; inset: 0; margin: auto; width: 150px; height: auto; opacity: 0; transform: scale(0.9); transition: opacity 0.5s ease, transform 0.5s ease; } .medal-img--old { transition: opacity 0.9s ease, transform 0.9s ease; } .medal-img--old.show { opacity: 0.9; transform: scale(1); } .medal-img--old.fade-out { opacity: 0; transform: scale(0.9) translateY(-10px); } .medal-img--new.show { opacity: 1; transform: scale(1.05); } .medal-img--new.pulse { animation: medal-pop 1s ease; } @keyframes medal-pop { 0% { transform: scale(0.4); opacity: 0; } 50% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* ========================================================================== UTILITIES (OPTIONAL) - Small one-line helpers: spacing, visibility, layout ========================================================================== */ .u-hidden { display: none !important; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .u-flex { display: flex !important; } .u-grid { display: grid !important; } .u-center { display: grid; place-items: center; } .u-gap { gap: var(--gap); } .u-gap-sm { gap: var(--gap-sm); } /* Compat: keep game area hidden until activated by JS */ #gameArea { display: none; background: transparent; } #gameArea.active { display: block; } /* === Settings overlay input styling (scoped) === */ #settingsOverlay .input-item input:not([type="checkbox"]):not([type="radio"]), #settingsOverlay .input-item select { width: min(240px, 100%); height: 38px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: 600 14px/1 'Montserrat', Arial, sans-serif; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } #settingsOverlay .input-item input:not([type="checkbox"]):not([type="radio"]).adaptive-highlight, #settingsOverlay .input-item select.adaptive-highlight { background: color-mix(in oklab, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent); } /* Focus ring */ #settingsOverlay .input-item input:not([type="checkbox"]):not([type="radio"]):focus, #settingsOverlay .input-item select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } /* Disabled state */ #settingsOverlay .input-item input:not([type="checkbox"]):not([type="radio"]):disabled, #settingsOverlay .input-item select:disabled { opacity: .65; cursor: not-allowed; } /* Invalid state (when you validate) */ #settingsOverlay .input-item input:invalid { border-color: #e5484d; box-shadow: 0 0 0 3px color-mix(in oklab, #e5484d 20%, transparent); } #settingsOverlay .input-item input[type="number"]::-webkit-outer-spin-button, #settingsOverlay .input-item input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #settingsOverlay .input-item input[type="number"] { -moz-appearance: textfield; } #settingsOverlay .input-item select.input-select, #settingsOverlay .input-item select { appearance: auto; background-image: none; padding-right: 1rem; } /* Label row tidy-up (label + (?) stays tight; input below) */ #settingsOverlay .input-item > .bold { display: inline-flex; align-items: center; gap: .4em; margin-bottom: .35em; } #settingsOverlay .cognitive-settings-fields { display: grid; gap: 0.65rem; } #settingsOverlay .cognitive-settings-fields .setting-group { padding-left: 0; } #settingsOverlay .cognitive-adaptive-settings-panel { display: grid; gap: 0.7rem; padding: 0.75rem; border: 1px solid color-mix(in oklab, #dc2626 22%, var(--border)); border-radius: 8px; background: color-mix(in oklab, #dc2626 8%, var(--card)); } #settingsOverlay .cognitive-adaptive-settings-panel__header { display: grid; gap: 0.2rem; } #settingsOverlay .cognitive-adaptive-settings-panel__header strong { color: color-mix(in oklab, #b91c1c 72%, var(--text)); font-size: var(--fs-sm); } #settingsOverlay .cognitive-adaptive-settings-panel__header span { color: var(--muted); font-size: 0.78rem; line-height: 1.35; } #settingsOverlay .cognitive-adaptive-settings-panel__fields { display: grid; gap: 0.55rem; } #settingsOverlay .cognitive-adaptive-settings-panel .cognitive-setting-row { padding: 0.55rem 0.65rem; border: 1px solid color-mix(in oklab, #dc2626 14%, var(--border)); border-radius: 7px; background: color-mix(in oklab, var(--card) 84%, transparent); } #settingsOverlay .cognitive-adaptive-settings-panel .cognitive-setting-row .setting { margin-bottom: 0; } #settingsOverlay .cognitive-adaptive-settings-panel .input-item > .bold { color: color-mix(in oklab, #b91c1c 68%, var(--text)); } body.theme-dark #settingsOverlay .cognitive-adaptive-settings-panel { border-color: color-mix(in oklab, #f87171 24%, var(--border)); background: color-mix(in oklab, #ef4444 12%, var(--card)); } body.theme-dark #settingsOverlay .cognitive-adaptive-settings-panel .cognitive-setting-row { border-color: color-mix(in oklab, #f87171 16%, var(--border)); } body.theme-dark #settingsOverlay .cognitive-adaptive-settings-panel__header strong, body.theme-dark #settingsOverlay .cognitive-adaptive-settings-panel .input-item > .bold { color: color-mix(in oklab, #fca5a5 58%, var(--text)); } #settingsOverlay .cognitive-setting-row.is-level-adjusted { padding: 0.65rem 0.75rem; border: 1px solid color-mix(in oklab, #dc2626 20%, var(--border)); border-radius: 8px; background: color-mix(in oklab, #dc2626 8%, var(--card)); } #settingsOverlay .cognitive-setting-row.is-level-adjusted .setting { margin-bottom: 0; } #settingsOverlay .cognitive-setting-row.is-level-adjusted .input-item > .bold { color: color-mix(in oklab, #b91c1c 72%, var(--text)); } body.theme-dark #settingsOverlay .cognitive-setting-row.is-level-adjusted { border-color: color-mix(in oklab, #f87171 24%, var(--border)); background: color-mix(in oklab, #ef4444 12%, var(--card)); } body.theme-dark #settingsOverlay .cognitive-setting-row.is-level-adjusted .input-item > .bold { color: color-mix(in oklab, #fca5a5 58%, var(--text)); } #settingsOverlay .setting-hint { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.78rem; line-height: 1.35; } /* Make checkbox rows breathe a bit */ #settingsOverlay .checkbox-item.with-spacing { align-items: flex-start; flex-direction: row; gap: .5rem; } #settingsOverlay .input-item.checkbox-item input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.1rem; padding: 0; } #settingsOverlay .input-item.checkbox-item .checkbox-copy { display: flex; flex-direction: column; min-width: 0; } #settingsOverlay .input-item.checkbox-item .setting-hint { margin-top: 0.2rem; } /* Optional: unify very narrow numeric fields */ #settingsOverlay input[type="number"][step="0.1"], #settingsOverlay input[type="number"][min][max] { width: 100px; } /* ========================== Radio Overlay ========================== */ .radio-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 3200; backdrop-filter: blur(2px); } .radio-overlay.active { display: flex; } .radio-panel { width: min(560px, 96vw); /* iOS standalone: 100vh is the FULL screen (taller than the visible viewport), so the panel overflowed and pushed the Ã— close button off the top â€” "too big, can't close". 100dvh = the visible viewport, so the panel fits and the close button stays on-screen. */ max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); max-height: calc(100dvh - 3rem); background: var(--panel); color: var(--text); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 1.35rem 1.6rem; display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden; --radio-chip-bg: color-mix(in oklab, var(--panel) 90%, transparent); --radio-chip-bg-hover: color-mix(in oklab, var(--panel) 82%, var(--accent) 12%); --radio-chip-border: var(--border); --radio-chip-highlight: var(--accent); --radio-chip-text: var(--text); --radio-slider-track: color-mix(in oklab, var(--text) 18%, var(--panel)); --radio-slider-fill-color: var(--radio-chip-highlight); --radio-slider-thumb-bg: var(--panel); --radio-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.15)); } body.theme-dark .radio-panel { --radio-chip-bg: color-mix(in oklab, var(--panel) 88%, #000 12%); --radio-chip-bg-hover: color-mix(in oklab, var(--panel) 78%, var(--accent) 18%); --radio-chip-border: var(--border); --radio-chip-text: var(--text); --radio-slider-track: color-mix(in oklab, var(--text) 30%, var(--panel)); --radio-slider-thumb-bg: var(--card); --radio-shadow: 0 2px 10px rgba(0,0,0,0.45); } .radio-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .radio-panel-body { display: flex; flex-direction: column; gap: 0.75rem; overflow: auto; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; } .radio-station-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; } .radio-station-btn { border: 1px solid var(--radio-chip-border); background: var(--radio-chip-bg); border-radius: 12px; padding: 14px 16px; min-height: 54px; text-align: left; cursor: pointer; font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-md); color: var(--radio-chip-text); box-shadow: var(--radio-shadow); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .radio-station-btn:hover { background: var(--radio-chip-bg-hover); border-color: var(--radio-chip-highlight); box-shadow: 0 4px 12px var(--shadow, rgba(0,0,0,0.2)); } .radio-station-btn.active { background: var(--radio-chip-highlight); color: var(--text-on-dark); border-color: var(--radio-chip-highlight); box-shadow: 0 0 0 2px color-mix(in oklab, var(--radio-chip-highlight) 45%, transparent), 0 8px 18px var(--shadow, rgba(0,0,0,0.22)); } .radio-volume { display: flex; align-items: center; gap: 0.75rem; } .radio-volume input[type="range"] { --radio-slider-fill: 50%; flex: 1; min-width: 120px; height: 22px; border-radius: 999px; background: linear-gradient( to right, var(--radio-slider-fill-color, var(--accent)) 0 var(--radio-slider-fill), var(--radio-slider-track, rgba(15, 23, 42, 0.2)) var(--radio-slider-fill) 100% ); background-position: center; background-repeat: no-repeat; background-size: 100% 10px; outline: none; accent-color: var(--radio-chip-highlight, var(--accent)); -webkit-appearance: none; appearance: none; cursor: pointer; } .radio-volume input[type="range"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--radio-chip-highlight, var(--accent)) 28%, transparent); } .radio-volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--radio-slider-thumb-bg, var(--card)); border: 2px solid var(--radio-chip-highlight, var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer; } .radio-volume input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--radio-slider-thumb-bg, var(--card)); border: 2px solid var(--radio-chip-highlight, var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer; } .radio-volume input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient( to right, var(--radio-slider-fill-color, var(--accent)) 0 var(--radio-slider-fill), var(--radio-slider-track, rgba(15, 23, 42, 0.2)) var(--radio-slider-fill) 100% ); } .radio-volume input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--radio-slider-track, rgba(15, 23, 42, 0.2)); } .radio-volume input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--radio-chip-highlight, var(--accent)); } .radio-switch { display: flex; align-items: center; } .switch-toggle__input { position: absolute; opacity: 0; pointer-events: none; } .switch-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .switch-toggle__track { position: relative; width: 48px; height: 26px; background: var(--muted); border-radius: 999px; transition: background .2s; } .switch-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .22s, background .2s; } .switch-toggle__input:checked + .switch-toggle .switch-toggle__track { background: var(--text); } #radioMasterToggle:checked + .switch-toggle .switch-toggle__track { background: #3DDA77; } .switch-toggle__input:checked + .switch-toggle .switch-toggle__thumb { transform: translateX(22px); } .switch-toggle__label { font-family: 'Montserrat', Arial, sans-serif; color: var(--text); } /* ====================================================================== L2) ONBOARDING MODAL + TOUR ====================================================================== */ .onboarding-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 3300; padding: 1rem; } .onboarding-overlay.active { display: flex; } .onboarding-card { width: min(720px, 94vw); background: var(--card); color: var(--text); border-radius: 16px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 0.75rem; position: relative; } .onboarding-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: var(--fs-xl); line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .onboarding-kicker { margin: 0; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .onboarding-lead, .onboarding-note { margin: 0; color: var(--muted); } .onboarding-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; } .onboarding-list strong { color: var(--text); } .onboarding-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; } .onboarding-tour { position: fixed; inset: 0; display: none; z-index: 3350; } .onboarding-tour.active { display: block; } .tour-spotlight { position: absolute; border-radius: 18px; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); transition: all 0.2s ease; pointer-events: none; } .tour-tooltip { position: absolute; width: min(360px, 92vw); background: var(--card); color: var(--text); border-radius: 14px; padding: 1rem; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 0.5rem; } .tour-kicker { font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .tour-title { margin: 0; font-size: var(--fs-lg); } .tour-body { margin: 0; color: var(--text); } .tour-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; } .tour-actions .tour-exit { margin-right: auto; } @media (max-width: 640px) { .onboarding-card { padding: 1.2rem; } .onboarding-actions { justify-content: center; } .onboarding-actions .btn { flex: 1 1 100%; } .tour-tooltip { width: min(360px, 94vw); } .tour-actions { justify-content: space-between; } } .settings-overlay.is-quick #settingsModeTabs, .settings-overlay.is-quick .settings-mode-tabs { display: none; } .settings-overlay.is-quick .settings-layout { grid-template-columns: 1fr; } .settings-overlay.is-quick .settings-page-header, .settings-overlay.is-quick #closeSettingsPanel { display: none; } .settings-overlay.is-quick .settings-panel-centered { width: min(860px, 92vw); height: min(72vh, 640px); max-height: min(72vh, 640px); } .settings-overlay.is-quick #saveSettingsAndBack { order: 1; } .settings-overlay.is-quick #saveSettings { order: 2; } /* ====================================================================== Login Menu Panel (2026 refresh) ====================================================================== */ .login-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 32px); background: var(--bg); } .login-panel { width: min(1400px, 96vw); height: min(92vh, 980px); background: var(--card); border-radius: 26px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15); display: flex; flex-direction: column; overflow: hidden; } .login-menu { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(14px, 2.4vw, 22px) clamp(12px, 2vw, 20px); min-height: clamp(56px, 7vh, 72px); background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .login-brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text); } .menu-logo { width: 60px; height: 42px; object-fit: contain; } .menu-title { font-size: var(--fs-lg); letter-spacing: 0.02em; } .neurohub-site-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0.35rem 0.65rem 0.35rem 0.45rem; border-radius: 999px; border: 1px solid color-mix(in oklab, #54e58c 58%, var(--border)); background: color-mix(in oklab, #54e58c 14%, var(--card)); color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-subtle); transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .neurohub-site-link:hover { transform: translateY(-1px); border-color: color-mix(in oklab, #54e58c 72%, var(--border)); background: color-mix(in oklab, #54e58c 20%, var(--card)); box-shadow: 0 8px 18px rgba(15, 42, 60, 0.12); } .neurohub-site-link__logo { width: 28px; height: 28px; object-fit: contain; } .menu-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: center; margin-left: auto; } .menu-btn { appearance: none; border: none; background: var(--panel); color: var(--text); border-radius: 999px; padding: 0.5rem 0.9rem; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .menu-btn:hover { transform: translateY(-1px); border-color: transparent; } .menu-btn.is-active { background: var(--accent); color: var(--text-on-dark); border-color: transparent; } .menu-btn:focus-visible { outline: none; } .menu-content { flex: 1; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; overflow: hidden; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background: var(--card); } .menu-section { display: none; height: 100%; min-height: 100%; margin: 0; } .menu-section.is-active { display: flex; flex-direction: column; flex: 1; overflow-y: auto; } #section-login.is-active { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(16px, 2.6vw, 28px); } #section-info, #section-broschueren, #section-spiele-testen, #section-aboutme, #section-privacy, #section-terms { background: var(--card); padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 36px) clamp(32px, 4vw, 56px); } #section-account { background: var(--card); padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 36px) clamp(32px, 4vw, 56px); align-items: center; justify-content: flex-start; } #section-info .info-panel, #section-broschueren .info-panel, #section-spiele-testen .info-panel, #section-aboutme .info-panel, #section-privacy .info-panel, #section-terms .info-panel { width: 100%; margin: 0; } #section-info .info-card, #section-broschueren .info-card, #section-spiele-testen .info-card, #section-aboutme .info-card, #section-privacy .info-card, #section-terms .info-card { flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; backdrop-filter: none !important; } /* ===== BroschÃ¼ren: Eintrag mit Seiten-BlÃ¤tterer ===== */ .brochure-entry { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 36px); align-items: flex-start; margin-top: 14px; } .brochure-entry__text { flex: 1 1 280px; min-width: 260px; } .brochure-entry__text p:first-child { margin-top: 0; } .brochure-flip { flex: 0 0 auto; width: min(320px, 80vw); } .brochure-flip:focus-visible { outline: 3px solid rgba(208, 28, 31, 0.4); outline-offset: 4px; border-radius: 8px; } .brochure-flip__viewport { aspect-ratio: 210 / 297; background: #fff; border: 1px solid rgba(208, 28, 31, 0.18); border-radius: 8px; box-shadow: 0 8px 26px rgba(20, 16, 12, 0.16); overflow: hidden; } .brochure-flip__img { display: block; width: 100%; height: 100%; object-fit: contain; } .brochure-flip__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; } .brochure-flip__btn { appearance: none; width: 40px; height: 40px; padding: 0; border: none; border-radius: 999px; background: #D01C1F; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, opacity 0.15s ease; } .brochure-flip__btn:hover:not(:disabled) { transform: translateY(-2px); } .brochure-flip__btn:disabled { opacity: 0.3; cursor: default; } .brochure-flip__btn:focus-visible { outline: 3px solid rgba(208, 28, 31, 0.4); outline-offset: 2px; } .brochure-flip__counter { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: var(--fs-sm, 0.92rem); min-width: 64px; text-align: center; } .brochure-langs { font-size: var(--fs-sm, 0.92rem); } .brochure-langs a { font-weight: 600; white-space: nowrap; } @media (max-width: 560px) { .brochure-flip { width: 100%; } } .login-legal-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.8rem clamp(16px, 2.4vw, 28px); border-top: 1px solid var(--border); background: color-mix(in oklab, var(--panel) 72%, var(--card) 28%); color: var(--muted); } .login-language-footer { border-top: 0; background: transparent; padding-top: 1rem; } .training-language-button .home-icon--text { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: color-mix(in oklab, var(--accent) 12%, var(--card)); color: var(--accent); font-size: 0.84rem; font-weight: 900; line-height: 1; } .language-menu-overlay { position: fixed; inset: 0; z-index: 14000; display: grid; place-items: center; padding: clamp(18px, 4vw, 36px); background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(12px); } .language-menu-overlay.is-hidden { display: none; } .language-menu-dialog { width: min(520px, 100%); border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow-strong); padding: clamp(18px, 3vw, 26px); } .language-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .language-menu-title { margin: 0; color: var(--text); font-size: var(--fs-lg); font-weight: 800; } .language-menu-close { appearance: none; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; font-size: 1.2rem; font-weight: 800; line-height: 1; min-width: 36px; min-height: 36px; } .language-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .language-menu-option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 48px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); padding: 0.72rem 0.85rem; font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-sm); font-weight: 800; text-decoration: none; } .language-menu-option:hover, .language-menu-option:focus-visible { border-color: var(--accent); outline: none; } .language-menu-option.is-active { background: var(--accent); border-color: var(--accent); } .language-menu-option.is-active, .language-menu-option.is-active span { color: #fff !important; } .language-menu-option.is-locked { opacity: 0.56; cursor: not-allowed; } .language-menu-code { font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; } .language-menu-status { color: currentColor; font-size: var(--fs-xs); font-weight: 700; opacity: 0.72; } @media (max-width: 520px) { .language-menu-grid { grid-template-columns: 1fr; } } .login-legal-link { appearance: none; border: 0; background: transparent; color: var(--muted); font-family: 'Montserrat', Arial, sans-serif; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; padding: 0.2rem 0.1rem; text-decoration: none; } .login-legal-link:hover, .login-legal-link:focus-visible { color: var(--accent); text-decoration: underline; } .login-legal-link:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 45%, transparent); outline-offset: 3px; border-radius: 6px; } .login-legal-separator { color: color-mix(in oklab, var(--muted) 58%, transparent); } #section-login .login-area { width: 100%; max-width: 560px; margin: 0 auto; justify-content: center; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; padding-block: clamp(12px, 2vw, 20px); } .login-area { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.2rem); } .login-area .login-form { margin-left: auto; margin-right: auto; width: min(100%, 520px); } .login-area .login-divider { width: min(520px, 100%); } .login-area .login-actions--oauth { justify-content: center; } .login-area .login-links { width: min(520px, 100%); } .login-area.panel-open #loginForm, .login-area.panel-open .login-test-notice, .login-area.panel-open .login-links, .login-area.panel-open .login-divider, .login-area.panel-open .login-actions--oauth { display: none; } .menu-content .info-panel { width: 100%; margin: 0; } .menu-content .info-card { height: auto; max-height: none; background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; } .menu-content .page-container { height: auto; max-height: none; overflow: visible; padding: 0; } #section-account .form-panel { position: static; display: block; width: 100%; background: transparent; border-radius: 0; border: none; box-shadow: none; backdrop-filter: none; padding: 0; } #section-account .form-panel.active { display: block; } #section-account #welcomePanel { align-items: stretch; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 100%; align-self: stretch; width: 100%; max-width: 980px; margin: 0 auto; gap: clamp(0.9rem, 2vw, 1.5rem); } #section-account #welcomePanel[aria-hidden="true"] { display: flex; } #section-account .account-area { display: flex; flex-direction: column; justify-content: center; min-height: 100%; width: 100%; flex: 1; } @media (max-width: 900px) { .login-panel { height: auto; max-height: none; } .menu-buttons { width: 100%; justify-content: flex-start; } } /* ========================================================================== END ========================================================================== */ /* === Training program button layout (stacked rows) === */ .training-programs .program-btn { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; } /* === Training section titles === */ .training-section-title { font-size: var(--fs-md); font-weight: 800; margin-bottom: 0.6rem; text-align: center; } /* === Training inner white panels === */ .training-panel-surface { background: #ffffff; border: 1px solid color-mix(in oklab, var(--border) 80%, transparent); border-radius: 18px; padding: clamp(0.9rem, 1.8vw, 1.4rem); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; min-height: 0; width: 100%; overflow-y: auto; } .training-panel-surface .training-programs { flex: 1; min-height: 0; } /* === Screening summary spacing === */ .screening-summary-actions .screening-details-btn { margin-right: 1.4rem; } .screening-summary-pill { display: inline-block; max-width: 100%; min-width: 0; text-align: center; white-space: normal; line-height: 1.25; } /* === Dark mode panel surfaces (settings + training) === */ body.theme-dark .training-panel-surface, body.theme-dark .settings-column-left, body.theme-dark .settings-column-right { background: var(--card); } /* === Trainings page: flat grid (no columns), allow vertical overflow === */ #trainingModes { display: grid; /* Floor raised 170pxâ†’220px so the iPad-portrait range (iPad Air 820/834px, iPad Pro 1024px) lays out 3 wide columns instead of 4 cramped ones, where mode names (e.g. "INTERFERE 2") wrapped to 2-3 lines. 220px guarantees the text column fits the longest label; 4 columns return on wider screens (~1060px+). */ --training-column-width: clamp(220px, 16vw, 270px); grid-template-columns: repeat(auto-fill, minmax(var(--training-column-width), 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: start; justify-content: center; overflow-x: hidden; overflow-y: auto; } .training-favorites { grid-column: 1 / -1; display: flex; flex-direction: column; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; } .training-favorites.is-hidden { display: none; } .training-favorite-modes { --training-column-width: clamp(220px, 16vw, 270px); --training-favorite-button-width: var(--training-column-width); display: flex; flex-wrap: wrap; gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: stretch; justify-content: center; width: 100%; overflow: visible; } .training-favorite-modes .training-mode-btn, .training-favorite-modes .program-btn { flex: 0 1 var(--training-favorite-button-width); width: var(--training-favorite-button-width); max-width: 100%; min-width: min(100%, var(--training-column-width)); min-height: clamp(112px, 12vw, 146px); } .training-favorite-modes .program-btn { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.05rem, 1.9vw, 1.5rem); border-radius: 20px; border: 1px solid var(--border); font-weight: 700; cursor: pointer; text-align: center; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); } #trainingModes .training-column { display: contents; } #modeButtonBar { overflow-y: auto; } #trainingModes .program-btn, .training-favorite-modes .program-btn { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: clamp(1.1rem, 2.2vw, 1.7rem); min-height: clamp(132px, 15vw, 176px); border-radius: 20px; --mode-accent: #473F37; border: 2px solid color-mix(in oklab, var(--mode-accent) 38%, var(--border)); background: color-mix(in oklab, var(--mode-accent) 28%, var(--card)); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; box-shadow: var(--shadow-subtle); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } #trainingModes .program-btn .home-label, .training-favorite-modes .program-btn .home-label { color: var(--text); } #trainingModes .program-btn .program-btn-icon, .training-favorite-modes .program-btn .program-btn-icon { width: clamp(30px, 3.2vw, 50px); height: clamp(30px, 3.2vw, 50px); object-fit: contain; pointer-events: none; } .training-page .training-mode-btn { min-height: clamp(132px, 15vw, 176px); padding: clamp(1.1rem, 2.2vw, 1.7rem); } /* === Fixation dot: hidden by default (shown by JS when needed) === */ #fixationDot { display: none; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* === Settings overlay feedback layout: keep buttons below feedback === */ .save-settings-wrapper { flex-direction: column; flex-wrap: nowrap; align-items: center; } .save-settings-wrapper .program-footer-actions { width: 100%; justify-content: center; } /* === Welcome panel low-height containment === */ #section-account .account-area { position: relative; } @media (max-height: 1024px) { #section-account .account-area { justify-content: flex-start; } #section-account #welcomePanel { overflow-y: auto; max-height: 100%; } } /* === Delete account confirmation text readability === */ #deletePanel .delete-confirm-text { font-size: clamp(0.85rem, 2.4vw, 1rem); line-height: 1.4; text-align: center; font-style: italic; margin-top: 0.8rem; } /* === Training page: stack programs panel under deck on phones === */ @media (max-width: 700px) { .training-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; } .training-deck { order: 1; } } /* === Welcome panel: loader while fields populate === */ #welcomeFields.is-loading { display: none; } .welcome-loader { --loader-track: color-mix(in oklab, var(--text) 25%, #ffffff 75%); --loader-accent: var(--accent); --loader-size: 64px; --loader-border: 6px; display: none; align-items: center; justify-content: center; padding: 0.75rem 0 1rem; } .welcome-loader.is-visible { display: flex; } .welcome-loader .loader { width: var(--loader-size); height: var(--loader-size); border-radius: 50%; position: relative; animation: pageLoaderRotate 1s linear infinite; } .welcome-loader .loader::before, .welcome-loader .loader::after { content: ""; box-sizing: border-box; position: absolute; inset: 0; border-radius: 50%; border: var(--loader-border) solid var(--loader-track); animation: pageLoaderClip 2s linear infinite; } .welcome-loader .loader::after { border-color: var(--loader-accent); border-top-color: transparent; } /* === Home grid: enforce 2 cols below 570px, 1 col below 380px === */ @media (max-width: 570px) { .home-grid, .home-grid.home-grid--has-profile, .home-grid.home-grid--no-profile { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } @media (max-width: 380px) { .home-grid, .home-grid.home-grid--has-profile, .home-grid.home-grid--no-profile { grid-template-columns: 1fr; } } /* === Welcome panel: avoid tall empty space on tablets === */ @media (max-width: 1024px) { #section-account .account-area { justify-content: flex-start; } } /* === Login/welcome scroll safety on short screens === */ @media (max-height: 820px) { .login-shell { align-items: flex-start; } .login-panel { height: min(92svh, 980px); } .menu-section.is-active { -webkit-overflow-scrolling: touch; } #section-login.is-active { align-items: flex-start; overflow-y: auto; } #section-login .login-area { padding-bottom: 24px; } #section-account { overflow-y: auto; } #section-account #welcomePanel { padding-bottom: 24px; } } /* === Settings content: remove padding === */ .settings-content, body.settings-page .settings-content, body.settings-page #settingsOverlay.help-open .settings-content { padding: 0; } /* === Profile: remove padding/margins for left + drawer === */ .profile-left, .profile-drawer, body.profile-page .profile-left, body.profile-page .profile-drawer, body.profile-page.profile-drawer-open .profile-left, body.profile-page.profile-drawer-open .profile-drawer { padding: 0; margin: 0; } /* === Profile list padding === */ .profile-list { padding: 12px; box-sizing: border-box; } /* === Profile header + drawer padding === */ .profile-header, .profile-drawer { padding: 12px; box-sizing: border-box; } /* === Programs actions bar: remove padding === */ body.programs-page .program-actions-bar { padding: 0; } /* === Profile drawer padding (override earlier resets) === */ .profile-drawer, body.profile-page .profile-drawer, body.profile-page.profile-drawer-open .profile-drawer { padding: 12px; box-sizing: border-box; } /* === Save settings wrapper: remove padding === */ .save-settings-wrapper, body.settings-page .save-settings-wrapper { padding: 0; } /* === Screening actions: remove padding === */ .screening-actions { padding: 0; } /* === Screening setup: allow grid to fill available height === */ #screeningSetup { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) auto; } /* === Training deck: normalize inner padding to 14px === */ .training-deck { padding: 14px; } /* === Action buttons: force 60px height for screening + settings saves === */ #screeningStartBtn, body.screening-page #screeningStartBtn, #saveSettings, #saveSettingsAndBack, body.settings-page #saveSettings, body.settings-page #saveSettingsAndBack { --btn-h: 60px; } /* === Normalize page header gaps === */ .training-page, .screening-page { row-gap: var(--page-header-content-gap); } body.programs-page .program-overlay { row-gap: var(--page-header-content-gap); } body.instructions-page #instructionsPage { row-gap: var(--page-header-content-gap); } body.settings-page .settings-overlay { gap: var(--page-header-content-gap); } body.profile-page .profile-overlay { row-gap: var(--page-header-content-gap); } /* === Cookie banner (subtle corner) ==================================== */ .cookie-banner-overlay { position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 10050; opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .cookie-banner-overlay.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; } .cookie-banner-card { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: min(520px, 92vw); background: color-mix(in oklab, var(--card) 94%, transparent); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); animation: cookieBannerIn 0.25s ease both; } .cookie-banner-toggle { border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; } .cookie-banner-toggle:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, #ffffff 40%); outline-offset: 3px; border-radius: 999px; } .cookie-banner-image { width: 56px; height: auto; opacity: 0.9; } .cookie-banner-content h2 { font-size: 1rem; margin-bottom: 0.2rem; } .cookie-banner-content { display: flex; flex-direction: column; } .cookie-banner-content p { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 0.6rem; } .cookie-banner-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner-content a:hover { color: color-mix(in oklab, var(--accent) 80%, #ffffff 20%); } .cookie-banner-btn { align-self: center; border: none; border-radius: 999px; padding: 0.4rem 1rem; font-weight: 700; font-size: var(--fs-xs); background: var(--accent); color: var(--accent-contrast); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2); } .cookie-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.24); } .cookie-banner-btn:active { transform: translateY(0); } .cookie-banner-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, #ffffff 40%); outline-offset: 2px; } @keyframes cookieBannerIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cookie-banner-overlay.is-collapsed .cookie-banner-card { max-width: none; padding: 10px; gap: 0; border-radius: 999px; } .cookie-banner-overlay.is-collapsed .cookie-banner-content { display: none; } @media (max-width: 640px) { .cookie-banner-overlay { left: 12px; right: 12px; } .cookie-banner-card { max-width: 100%; } } /* Lock login menu height so content never overlaps it */ .login-menu { flex: 0 0 auto; } /* === Login menu collapse on narrow screens === */ .menu-toggle { display: none; appearance: none; border: 1px solid color-mix(in oklab, var(--accent, #D01C1F) 78%, #ffffff 22%); background: var(--accent, #D01C1F); color: var(--accent-contrast); width: 42px; height: 42px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; padding: 0; } .menu-toggle:hover { background: color-mix(in oklab, var(--accent, #D01C1F) 88%, #000000 12%); } .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .menu-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; } .menu-toggle__bar { width: 20px; height: 2px; background: currentColor; border-radius: 999px; } @media (max-width: 720px) { .login-menu { align-items: center; } .menu-buttons.is-collapsible { width: auto; margin-left: auto; justify-content: flex-end; align-items: center; gap: 0; } .menu-buttons.is-collapsible .menu-toggle { display: inline-flex; margin-left: 0; align-self: center; } .menu-buttons.is-collapsible .menu-btn { display: none; flex: 1 1 100%; width: 100%; border-radius: 12px; margin-top: 0.45rem; text-align: left; } .menu-buttons.is-collapsible .neurohub-site-link { display: none; flex: 1 1 100%; width: 100%; border-radius: 12px; margin-top: 0.45rem; justify-content: flex-start; } .menu-buttons.is-collapsible.is-menu-open { width: 100%; margin-left: 0; justify-content: flex-start; align-items: stretch; } .menu-buttons.is-collapsible.is-menu-open .menu-toggle { margin-left: auto; } .menu-buttons.is-collapsible.is-menu-open .menu-btn { display: block; } .menu-buttons.is-collapsible.is-menu-open .neurohub-site-link { display: inline-flex; } } /* === Very short phone screens: keep login header + form reachable === */ @media (max-height: 760px) and (max-width: 900px) { .login-shell { align-items: flex-start; justify-content: flex-start; overflow-y: auto; padding: calc(8px + env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom)); } .login-panel { width: min(1400px, 100%); height: auto; max-height: none; min-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 14px; } .login-menu { padding: 10px 12px; min-height: 52px; } .menu-content { overflow-y: auto; } .menu-section.is-active { overflow-y: auto; -webkit-overflow-scrolling: touch; } #section-login.is-active { align-items: flex-start; justify-content: flex-start; overflow-y: auto; padding: 10px 12px 14px; } #section-login .login-area { padding-block: 6px 14px; gap: 0.6rem; } .login-page-title { margin: 0 0 0.35rem; line-height: 1.15; font-size: clamp(1.05rem, 4.2vw, 1.35rem); } } /* ========================================================================== Account Dashboard (post-login account area) ========================================================================== */ #section-account { box-sizing: border-box; min-height: 0; overflow: hidden; padding-bottom: clamp(14px, 2.2vw, 22px); } #section-account .account-area { min-height: 0; height: 100%; } #section-account .account-dashboard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); width: 100%; min-height: 0; height: 100%; align-items: stretch; } #section-account .account-sidebar { background: color-mix(in oklab, var(--card, #ffffff) 88%, #dbe5f0 12%); border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 18px; padding: 0.8rem; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; } #section-account .account-sidebar-nav { display: flex; flex-direction: column; gap: 0.38rem; min-height: 0; overflow-y: auto; } #section-account .account-nav-item { width: 100%; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text, #1f2e3b); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.62rem 0.7rem; font-size: clamp(0.9rem, 1vw, 0.97rem); font-weight: 600; text-align: left; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } #section-account .account-nav-item svg { flex: 0 0 auto; } #section-account .account-nav-item .account-nav-label { min-width: 0; } #section-account .account-nav-item .account-nav-badge { margin-left: auto; min-width: 1.2rem; height: 1.2rem; padding: 0 0.28rem; border-radius: 999px; background: #d43b31; color: #ffffff; font-size: 0.72rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 5px 12px rgba(212, 59, 49, 0.34); } #section-account .account-nav-item .account-nav-badge[hidden] { display: none; } #section-account .account-nav-item.has-notification { border-color: color-mix(in oklab, #d43b31 35%, #ffffff 65%); } #section-account .account-nav-item:hover { background: color-mix(in oklab, var(--accent, #D01C1F) 10%, #ffffff 90%); border-color: color-mix(in oklab, var(--accent, #D01C1F) 35%, #ffffff 65%); } #section-account .account-nav-item.is-active { background: color-mix(in oklab, var(--accent, #D01C1F) 18%, #ffffff 82%); border-color: color-mix(in oklab, var(--accent, #D01C1F) 56%, #ffffff 44%); color: var(--accent-readable); } #section-account .account-nav-item:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent, #D01C1F) 65%, #ffffff 35%); outline-offset: 2px; } #section-account .account-sidebar-footer { margin-top: 0; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 72%, #ffffff 28%); } #section-account .account-logout-btn { width: 100%; justify-content: center; } #section-account .account-main { background: transparent; border: 0; box-shadow: none; padding: clamp(0.45rem, 1.1vw, 0.85rem) 0 0; width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: clamp(0.8rem, 1.7vw, 1.2rem); min-height: 0; height: 100%; overflow: hidden; } #section-account .account-main:focus, #section-account .account-main:focus-visible { outline: none; } #section-account .account-header h2 { margin: 0; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.2; color: #102d45; } #section-account .account-header { display: flex; flex-direction: column; text-align: center; align-items: center; } #section-account .account-header[hidden] { display: none !important; } #section-account .account-header strong { font-weight: 800; } #section-account .account-header #welcomeUsernameHighlight { margin-left: 0.28em; } #section-account .account-subtitle { margin: 0.3rem 0 0; color: color-mix(in oklab, var(--text, #1f2e3b) 68%, #ffffff 32%); } #section-account #welcomePanel #welcomeFields { display: flex; flex-direction: column; gap: 0.95rem; width: 100%; max-width: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; background: transparent; border: 0; border-radius: 0; } #section-account #welcomePanel #welcomeFields.is-loading { display: none; } #section-account .account-fields { width: 100%; display: flex; flex-direction: column; gap: 0.95rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; } #section-account .account-bottom-actions { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 72%, #ffffff 28%); display: flex; justify-content: center; align-items: center; gap: 0.6rem; flex-wrap: wrap; flex: 0 0 auto; } #section-account .account-bottom-actions .login-btn { margin: 0; } #section-account .account-main.is-expired .account-bottom-actions { justify-content: center; flex-wrap: nowrap; } #section-account .account-main.is-expired .account-bottom-actions .login-btn { width: auto; flex: 0 0 auto; } #section-account .account-page { display: none; width: 100%; gap: 0.9rem; } #section-account .account-page.is-active { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); align-content: start; } #section-account .account-page[data-account-page-panel="kontakt"].is-active { display: block; min-height: 0; height: 100%; flex: 1 1 auto; } #section-account .account-card { width: 100%; max-width: 100%; box-sizing: border-box; background: #ffffff; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 16px; box-shadow: 0 10px 24px rgba(15, 33, 54, 0.08); padding: clamp(0.9rem, 1.8vw, 1.25rem); } #section-account .account-card-title { margin: 0 0 0.7rem; font-size: clamp(1rem, 1.4vw, 1.2rem); color: #D01C1F; } #section-account .account-subheading, #section-account .account-user-type-label { display: block; margin: 0 0 0.5rem; font-size: var(--fs-md); font-weight: 700; line-height: 1.3; color: var(--text, #1f2e3b); } #section-account #welcomeSecurityBlock { margin-top: 15px; } #section-account #welcomeSecurityBlock .welcome-security-actions { margin-top: 0; margin-bottom: 0; gap: 0.75rem; } #section-account .account-card--hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } #section-account .account-card--neurohub-migration { border-color: rgba(37, 99, 235, 0.22); background: rgba(37, 99, 235, 0.07); } #section-account .account-card--neurohub-migration .login-actions { justify-content: flex-start; margin-top: 0.85rem; } #section-account .account-card-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } #section-account .account-status-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: #17643b; } #section-account .account-status-badge.is-inactive { color: #b42318; } #section-account .account-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #26b164; box-shadow: 0 0 0 5px rgba(38, 177, 100, 0.15); } #section-account .account-status-badge.is-inactive .account-status-dot { background: #d92d20; box-shadow: 0 0 0 5px rgba(217, 45, 32, 0.16); } #section-account .account-card-action { display: flex; align-items: center; } #section-account .account-primary-btn { background: #D01C1F; color: var(--accent-contrast); border: 1px solid transparent; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } #section-account .account-main .account-primary-btn:disabled, #section-account .account-main .account-primary-btn.is-disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none; } #section-account .account-primary-btn:hover { background: #0f2a3d; transform: translateY(-1px); box-shadow: 0 13px 24px rgba(15, 42, 61, 0.25); } #section-account .account-main .account-primary-btn:disabled:hover, #section-account .account-main .account-primary-btn.is-disabled:hover { background: var(--disabled-bg); box-shadow: none; transform: none; } #section-account .account-primary-btn:active { transform: translateY(0); } #section-account .account-card--support .help { margin: 0; line-height: 1.5; } #section-account .account-card--activity { display: flex; flex-direction: column; gap: 0.85rem; } #section-account .account-activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } #section-account .account-activity-head .account-card-title { margin: 0; } #section-account .account-activity-month { color: #476178; font-weight: 600; font-size: 0.9rem; } #section-account .account-activity-label { color: #476178; font-size: 0.79rem; font-weight: 600; } #section-account .account-activity-calendar-block { display: flex; flex-direction: column; gap: 0.5rem; } #section-account .account-activity-calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: #5b6f82; text-align: center; } #section-account .account-activity-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; } #section-account .account-calendar-day { position: relative; min-height: 56px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 82%, #ffffff 18%); background: #f7fbff; color: #163a56; display: flex; align-items: flex-start; justify-content: flex-start; padding: 0.34rem 0.4rem; box-sizing: border-box; } #section-account .account-calendar-day.account-calendar-day--empty { border-style: dashed; border-color: color-mix(in oklab, var(--border, #d9e3ea) 65%, #ffffff 35%); background: #fbfdff; opacity: 0.55; } #section-account .account-calendar-day.is-login { background: color-mix(in oklab, var(--accent, #D01C1F) 22%, #ffffff 78%); border-color: color-mix(in oklab, var(--accent, #D01C1F) 52%, #ffffff 48%); } #section-account .account-calendar-day.is-today { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #D01C1F) 45%, #ffffff 55%) inset; } #section-account .account-calendar-day-number { font-size: 0.78rem; font-weight: 700; line-height: 1; } #section-account .account-calendar-day-check { position: absolute; right: 0.35rem; bottom: 0.3rem; display: inline-flex; align-items: center; justify-content: center; width: 1.22rem; height: 1.22rem; border-radius: 999px; background: #D01C1F; color: var(--accent-contrast); font-size: 0.84rem; font-weight: 700; } #section-account .account-activity-calendar-help { margin: 0; } #section-account .account-user-type-row { display: flex; flex-direction: column; gap: 0.75rem; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row + .account-user-type-row { margin-top: 15px; padding-top: 0; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 76%, #ffffff 24%); } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--username, #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--security, #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--account-type { padding: 0; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--security > .account-user-type-label, #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row--account-type > .account-user-type-label { padding-top: 15px; } #section-account .account-page[data-account-page-panel="einstellungen"] .account-user-type-row .field, #section-account .account-page[data-account-page-panel="einstellungen"] .welcome-security-actions { width: 100%; } #section-account .account-user-type-toggle { display: inline-flex; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 999px; padding: 0.2rem; background: #f4f7fb; width: fit-content; } #section-account .account-type-pill { border: 0; border-radius: 999px; background: transparent; color: #476178; font-weight: 700; padding: 0.35rem 0.75rem; cursor: default; } #section-account .account-type-pill.is-active { background: #D01C1F; color: var(--accent-contrast); } #section-account .account-contact-form textarea { min-height: 122px; resize: vertical; } #section-account .account-contact-layout { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 0.95rem; align-items: stretch; min-height: 0; height: 100%; overflow: hidden; } #section-account .account-contact-left { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.95rem; overflow: hidden; } #section-account .account-card--ticket-compose-trigger .login-actions { margin-top: 0.25rem; } #section-account .account-card--ticket-preview { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } #section-account .account-card--ticket-thread { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; } #section-account .account-ticket-preview-list { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 3px; padding-bottom: 3px; } #section-account .account-ticket-preview-item { width: 100%; display: flex; align-items: center; gap: 0.55rem; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 78%, #ffffff 22%); background: #f8fbff; border-radius: 11px; padding: 0.55rem 0.65rem; text-align: left; color: #1f2e3b; font-weight: 600; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } #section-account .account-ticket-preview-item:hover { border-color: color-mix(in oklab, var(--accent, #D01C1F) 45%, #ffffff 55%); background: var(--accent-soft); transform: translateY(-1px); } #section-account .account-ticket-preview-item.is-active { border-color: color-mix(in oklab, var(--accent, #D01C1F) 56%, #ffffff 44%); background: color-mix(in oklab, var(--accent, #D01C1F) 24%, #ffffff 76%); color: var(--accent-readable); } #section-account .account-ticket-preview-item.is-open { background: #ecfdf3; border-color: color-mix(in oklab, #16a34a 35%, #ffffff 65%); color: #166534; } #section-account .account-ticket-preview-item.is-open:hover { background: #dcfce7; border-color: #22c55e; } #section-account .account-ticket-preview-item.is-open.is-active { border-color: #16a34a; background: #bbf7d0; color: #14532d; } #section-account .account-ticket-preview-item.is-closed { background: #fef9c3; border-color: color-mix(in oklab, #d4a72c 45%, #ffffff 55%); color: #854d0e; } #section-account .account-ticket-preview-item.is-closed:hover { background: #fef08a; border-color: #ca8a04; } #section-account .account-ticket-preview-item.is-closed.is-active { border-color: #a16207; background: #fde047; color: #713f12; } #section-account .account-ticket-preview-title { display: block; flex: 1 1 auto; min-width: 0; line-height: 1.35; } #section-account .account-ticket-preview-lock { flex: 0 0 auto; margin-left: auto; font-size: 0.9rem; line-height: 1; color: currentColor; opacity: 0.95; } #section-account .account-ticket-thread-header { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; } #section-account .account-ticket-thread-headline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } #section-account .account-ticket-thread-header .account-card-title { margin: 0; } #section-account .account-ticket-thread--detail { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); border-radius: 12px; background: #f8fafd; padding: 0.7rem; } #section-account .account-contact-form--ticket-compose { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; } #section-account #accountContactSubject { margin-bottom: 15px; } #section-account .account-contact-form--ticket-compose .field { display: flex; flex-direction: column; } #section-account .account-contact-form--ticket-compose .field:last-of-type { flex: 1 1 auto; min-height: 0; } #section-account #accountContactMessage { flex: 1 1 auto; min-height: clamp(140px, 28vh, 420px); } #section-account .account-contact-form--ticket-compose .login-actions { margin-top: auto; padding-top: 0.75rem; } #section-account .account-contact-form--ticket-compose[aria-hidden="true"] { display: none; } #section-account .account-ticket-reply-form { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); } #section-account .account-ticket-reply-form[aria-hidden="true"] { display: none; } #section-account .account-ticket-reply-form textarea { min-height: 110px; resize: vertical; } #section-account .account-ticket-list { display: flex; flex-direction: column; gap: 0.7rem; } #section-account .account-ticket-item { border: 1px solid color-mix(in oklab, var(--border, #d9e3ea) 80%, #ffffff 20%); background: #f8fafd; border-radius: 12px; padding: 0.7rem; } #section-account .account-ticket-header { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.55rem; } #section-account .account-ticket-title-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } #section-account .account-ticket-status { font-size: 0.78rem; font-weight: 700; padding: 0.08rem 0.5rem; border-radius: 999px; } #section-account .account-ticket-status.is-open { background: #d8f6e4; color: #166534; } #section-account .account-ticket-status.is-closed { background: #e5e7eb; color: #374151; } #section-account .account-ticket-meta { color: #6b7280; font-size: 0.78rem; } #section-account .account-ticket-thread { display: flex; flex-direction: column; gap: 0.42rem; } #section-account .account-ticket-message { border-radius: 10px; padding: 0.5rem 0.6rem; } #section-account .account-ticket-message.is-user { background: #eaf3ff; } #section-account .account-ticket-message.is-admin { background: #ecfdf3; } #section-account .account-ticket-message-meta { font-size: 0.75rem; color: #64748b; margin-bottom: 0.2rem; } #section-account .account-ticket-message-body { color: #1e293b; line-height: 1.42; } #section-account .account-progress-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 960px) { #section-account { overflow-y: auto; } #section-account .account-area, #section-account .account-dashboard, #section-account .account-main { height: auto; } #section-account .account-fields { overflow: visible; padding-right: 0; } #section-account .account-dashboard { grid-template-columns: 1fr; } #section-account .account-contact-layout { grid-template-columns: 1fr; height: auto; overflow: visible; } #section-account .account-page[data-account-page-panel="kontakt"].is-active { height: auto; flex: 0 0 auto; } #section-account .account-contact-left { grid-template-rows: auto auto; overflow: visible; } #section-account .account-card--ticket-preview { height: auto; } #section-account .account-ticket-preview-list { max-height: 220px; min-height: 0; flex: 0 0 auto; } #section-account .account-card--ticket-thread { min-height: 0; height: auto; } #section-account .account-ticket-thread--detail { max-height: 320px; min-height: 160px; } #section-account .account-sidebar { min-height: 0; } #section-account .account-sidebar-nav { width: 100%; } #section-account .account-nav-item { justify-content: flex-start; } } @media (max-width: 700px) { #section-account .account-sidebar { padding: 0.7rem; border-radius: 14px; } #section-account .account-sidebar-nav { gap: 0.5rem; } #section-account .account-nav-item { width: 100%; } #section-account .account-card--hero { flex-direction: column; align-items: flex-start; } #section-account .account-card-action { width: 100%; } #section-account .account-primary-btn { width: 100%; } #section-account .account-calendar-day { min-height: 48px; padding: 0.26rem 0.32rem; } #section-account .account-calendar-day-check { width: 1.05rem; height: 1.05rem; font-size: 0.74rem; } #section-account .account-bottom-actions { justify-content: center; } #section-account .account-bottom-actions .login-btn { width: auto; flex: 0 0 auto; } #section-account .account-main.is-expired .account-bottom-actions { justify-content: center; } #section-account .account-main.is-expired .account-bottom-actions .login-btn, #section-account .account-main.is-expired .account-primary-btn { width: auto; } } /* ========================================================================== N) DESIGN-SYSTEM KONSOLIDIERUNG - Ruhige, grosse App-Bedienung auf Basis der Login-/Index-Sprache ========================================================================== */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); } :where(button, input, select, textarea) { font-family: 'Montserrat', Arial, sans-serif; } .btn, .login-btn, button.btn, button.login-btn { min-height: var(--target-size); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; } .btn--primary, .login-btn--primary, #loginBtn { background: #D01C1F; color: var(--accent-contrast); border-color: transparent; } .btn--ghost, .login-btn--ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); } .btn--ghost:hover, .login-btn--ghost:hover { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); color: var(--accent-soft-contrast); } /* Login page colour trial: PANTONE 18-1664 TCX Fiery Red web approximation */ body.login-public { --accent: #D01C1F; --accent-secondary: #FFB56B; --accent-secondary-soft: #FFF3E8; --accent-contrast: #FFFFFF; --accent-readable: #A91518; --accent-soft-contrast: #A91518; --accent-soft: #FCEDED; --focus-ring: 0 0 0 4px rgba(15, 23, 42, 0.32); } body.login-public .login-panel { box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 12px 32px rgba(15, 23, 42, 0.18); } body.login-public .login-form input, body.login-public .login-form select, body.login-public .login-form textarea { border-color: rgba(15, 23, 42, 0.22); } body.login-public .login-form input:focus, body.login-public .login-form select:focus, body.login-public .login-form textarea:focus { box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2); } body.login-public .login-form:focus-within { box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18); } body.login-public .login-btn--primary, body.login-public #loginBtn, body.login-public .menu-btn.is-active, body.login-public .menu-toggle, body.login-public .cookie-banner-btn { background: var(--accent); color: var(--accent-contrast); } body.login-public .login-btn--primary, body.login-public #loginBtn { box-shadow: 0 12px 24px rgba(15, 23, 42, 0.26); } body.login-public .login-btn--lightblue, body.login-public .login-link-text, body.login-public .cookie-banner-content a { color: #A91518; } body.login-public .login-btn--lightblue { background: var(--accent-secondary-soft); border-color: var(--accent-secondary); color: #A91518; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18); } body.login-public .login-btn--ghost { border-color: rgba(15, 23, 42, 0.5); } body.login-public .cookie-banner-btn { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22); } body.login-public .cookie-banner-btn:hover { box-shadow: 0 10px 20px rgba(15, 23, 42, 0.28); } input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea { min-height: var(--target-size); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: var(--fs-sm); } .page-header { width: 100%; } .page-header .page-title { letter-spacing: 0; color: var(--text); } .page-back { min-width: var(--target-size); } .top-level-close { display: none !important; } .settings-panel-centered, .profile-overlay, .program-overlay, .instructions-page, .training-panel-surface, .screening-panel { border-radius: var(--radius-lg); } .settings-panel-centered, .training-panel-surface, .screening-panel, .program-panel, .profile-main { box-shadow: var(--shadow-subtle); } .feedback-msg, .settings-save-feedback, .program-warning, .home-status-note { border-radius: var(--radius-sm); } .home-page { justify-content: flex-start; align-items: stretch; gap: var(--space-6); padding: max(20px, env(safe-area-inset-top)) min(4vw, 42px) max(20px, env(safe-area-inset-bottom)); background: var(--bg); } .home-hero, .home-grid.home-actions, .home-footer { width: min(1120px, 100%); margin-inline: auto; } .home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: var(--space-6); align-items: center; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-soft); } .home-brand { display: flex; align-items: center; gap: var(--space-4); min-width: 0; text-align: left; } .home-brand .logo { flex: 0 0 auto; width: 76px; height: 76px; margin: 0; } .home-title { margin: 0; font-size: var(--fs-2xl); line-height: 1.08; letter-spacing: 0; } .home-subtitle { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-md); line-height: 1.45; } .home-primary-action { min-height: 168px; width: 100%; align-items: flex-start; text-align: left; padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24); } .home-primary-action .home-icon { width: 54px; height: 54px; } .home-primary-action .home-label { font-size: var(--fs-xl); line-height: 1.15; } .home-primary-action .home-sub { font-size: var(--fs-sm); line-height: 1.35; } .home-status-note { grid-column: 1 / -1; display: inline-flex; align-items: center; min-height: var(--target-size); margin: 0; padding: 0.65rem 0.85rem; border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border)); border-style: dashed; background: color-mix(in oklab, var(--accent) 8%, var(--card)); color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-align: left; } .home-status-note[hidden] { display: none !important; } .home-status-note.is-warning { border-color: color-mix(in oklab, var(--accent) 22%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--card)); color: var(--text); } .home-grid.home-actions, .home-grid.home-actions.home-grid--has-profile, .home-grid.home-actions.home-grid--no-profile { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.75fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-5); } .home-action-group { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); } .home-action-group__title { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0; text-align: left; } .home-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .home-action-group:nth-of-type(2) .home-action-grid { grid-template-columns: 1fr; } .home-tile, .home-page .profile-status-btn { min-height: 128px; border-radius: var(--radius-md); border-color: var(--border); box-shadow: var(--shadow-subtle); transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .home-tile:hover, .home-page .profile-status-btn:hover { transform: none; border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-soft); } .home-tile:focus-visible, .home-page .profile-status-btn:focus-visible { box-shadow: var(--focus-ring); } .home-tile--compact { min-height: 88px; width: 100%; border-radius: var(--radius-md); justify-content: center; } .home-icon { width: 42px; height: 42px; } .home-label { font-size: var(--fs-sm); line-height: 1.2; overflow-wrap: anywhere; } .home-sub { line-height: 1.35; } .profile-status-btn.has-profile { border-color: color-mix(in oklab, var(--profile-color, var(--accent)) 55%, var(--border)); } .home-footer { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); text-align: left; } .home-footer-copy { display: flex; flex-direction: column; gap: 0.15rem; } .home-account-action { min-height: var(--target-size); width: auto; flex-direction: row; padding: 0.65rem 0.9rem; border-radius: var(--radius-md); gap: var(--space-2); box-shadow: none; background: transparent; } .home-account-action .home-icon { width: 22px; height: 22px; } .program-step-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: 100%; margin-top: var(--space-2); } .program-step-title-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; } .program-step-card .drag-handle { flex: 0 0 var(--target-size); width: var(--target-size); height: var(--target-size); min-height: var(--target-size); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: grab; font-size: var(--fs-md); font-weight: 800; line-height: 1; } .program-step-card .drag-handle:active { cursor: grabbing; } .program-step-card.is-dragging { opacity: 0.62; } .program-step-card.is-drop-target { outline: 3px dashed color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; } .program-step-controls .program-step-action-btn { position: static; min-height: var(--target-size); width: 100%; height: auto; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 800; } .program-step-controls .program-step-action-btn:disabled { opacity: 0.45; cursor: not-allowed; } .program-step-remove { min-width: var(--target-size); min-height: var(--target-size); } .program-connector-btn--insert, .program-add-slot { min-height: var(--target-size); } body.theme-dark .home-hero, body.theme-dark .home-action-group { background: var(--card); border-color: var(--border); } body.theme-dark .home-status-note.is-warning { background: color-mix(in oklab, var(--accent) 14%, var(--card)); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); color: var(--text); } @media (max-width: 980px) { .home-hero, .home-grid.home-actions, .home-grid.home-actions.home-grid--has-profile, .home-grid.home-actions.home-grid--no-profile { grid-template-columns: 1fr; } .home-primary-action { min-height: 140px; } } @media (max-width: 640px) { .home-page { padding-inline: var(--space-4); } .home-hero { padding: var(--space-4); } .home-brand { align-items: flex-start; } .home-brand .logo { width: 58px; height: 58px; } .home-title { font-size: var(--fs-xl); } .home-action-grid { grid-template-columns: 1fr; } .home-footer { flex-direction: column; align-items: stretch; } .home-account-action { justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } } /* Classic home layout: keeps the earlier main-page look with the newer system rules. */ .home-page { justify-content: safe center; /* see note above â€” never hide the top of an overflowing menu */ align-items: center; gap: clamp(1rem, 2.4vw, 2rem); /* Include the safe-area insets here â€” this global rule otherwise overrides the mobile media-query's safe-area padding, leaving content under the status bar in standalone/PWA. */ padding: calc(var(--page-top-padding) + env(safe-area-inset-top)) var(--page-header-padding) calc(var(--page-top-padding) + env(safe-area-inset-bottom)); } /* iOS standalone PWA: after a game (position:fixed + height:100% scroll-lock), iOS can drop env(safe-area-inset-top) to 0 until relaunch, dropping the home content under the status bar. Gate on a JS-set class (navigator.standalone) too â€” iOS home-screen apps do NOT reliably match @media display-mode:standalone, which left the media-query-only version inert. html.pwa-standalone .home-page is (0,2,1) â†’ beats the .home-page padding-top rules in the max-width media queries above; max() floors the inset to the real safe area (~59px) so the collapse can't bite. */ @media (display-mode: standalone) { body .home-page { padding-top: calc(var(--page-header-padding) + max(env(safe-area-inset-top), 59px)); } } html.pwa-standalone .home-page { padding-top: calc(var(--page-header-padding) + max(env(safe-area-inset-top), 59px)); } /* Subpages (training/screening/settings/â€¦): the .page-header bar has --page-header-pad-y: 0, so its ZurÃ¼ck/title sits at y=0, under the iOS status bar in a PWA. Floor the top inset (collapse-proof). (0,2,1) beats the .page-header / .training-header.page-header rules; standalone-only. */ html.pwa-standalone .page-header { padding-top: calc(var(--page-header-pad-y) + max(env(safe-area-inset-top), 59px) + 8px); } .home-page > .home-grid, .home-toggle-row { width: min(1100px, 100%); } .home-page > .home-grid { display: grid; gap: clamp(0.8rem, 1.6vw, 1.3rem); grid-template-columns: repeat(3, minmax(180px, 1fr)); } .home-page > .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .home-page > .home-grid.home-grid--no-profile { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .home-page .home-tile { min-height: 150px; width: auto; flex-direction: column; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1); } .home-page .home-tile--compact { min-height: auto; width: auto; flex-direction: row; padding: 0.6rem 1.4rem; border-radius: 999px; } .home-page .home-tile--compact .home-icon { width: 22px; height: 22px; } .home-page .home-icon { width: clamp(36px, 4vw, 46px); height: clamp(36px, 4vw, 46px); } .home-page #homeTrainBtn { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .home-page #homeTrainBtn .home-label, .home-page #homeTrainBtn .home-sub { color: var(--accent-contrast); } .home-page #homeTrainBtn .home-icon { width: clamp(48px, 5vw, 58px); height: clamp(48px, 5vw, 58px); } .home-page .home-label { font-size: var(--fs-md); } .home-page .profile-status-btn { min-height: 150px; border-radius: 20px; } .home-toggle-row .profile-status-btn, .home-toggle-row #logoutBtn { min-height: auto; width: auto; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.4rem; border-radius: 999px; } .home-toggle-row .profile-status-btn .profile-status-text { display: none; } .home-toggle-row .profile-status-btn .profile-status-color { position: static; width: 12px; height: 12px; border-width: 1px; } .home-toggle-row .profile-status-btn.has-profile { outline: none; } .home-status-note--classic { width: min(1100px, 100%); justify-content: center; min-height: 44px; padding: 0.5rem 0.75rem; font-size: var(--fs-xs); text-align: center; } .home-footer { width: auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; text-align: center; } @media (max-width: 1100px) { .home-page > .home-grid, .home-page > .home-grid.home-grid--has-profile { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .home-page > .home-grid.home-grid--no-profile { grid-template-columns: repeat(3, minmax(170px, 1fr)); } } @media (max-width: 860px) { .home-page { justify-content: flex-start; padding-top: calc(var(--page-header-padding) + env(safe-area-inset-top)); } .home-page > .home-grid, .home-page > .home-grid.home-grid--has-profile, .home-page > .home-grid.home-grid--no-profile { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 540px) { .home-page > .home-grid, .home-page > .home-grid.home-grid--has-profile, .home-page > .home-grid.home-grid--no-profile { grid-template-columns: 1fr; } } .training-page .mode-group-panel { border-radius: 14px; padding: clamp(0.7rem, 1vw, 1rem); width: 100%; display: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: color-mix(in oklab, var(--card) 88%, transparent); } .training-page .mode-group-panel.is-open { display: grid; } .training-page .training-mode-btn .mode-description { display: block; max-width: 100%; color: var(--muted); font-size: clamp(0.72rem, 0.76vw, 0.85rem); font-weight: 500; line-height: 1.25; } .training-page .training-mode-btn .mode-icon--registry { width: clamp(42px, 4vw, 56px); height: clamp(42px, 4vw, 56px); border-radius: 12px; background: color-mix(in oklab, var(--accent) 15%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 800; letter-spacing: 0; } .cognitive-stage { --cognitive-fixation-align-offset: clamp(-2.5rem, -4vh, -1.4rem); --cognitive-stimulus-size: clamp(80px, 10vw, 150px); position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 2.2vw, 2rem); padding: clamp(5.8rem, 12vh, 8rem) clamp(1rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem); color: var(--text); text-align: center; background: color-mix(in oklab, var(--bg) 86%, transparent); } /* Speed and vigilance modes carry a tall persistent header (title + "Gesucht: [symbol]" with an inline image slot up to 78px). The default padding-top of 5.8remâ€“8rem is not enough to clear that header on iPad-class viewports, so stimuli end up under the header. Reserve more top space whenever such a header is present. */ .cognitive-stage:has(.cognitive-persistent-hint--speed), .cognitive-stage:has(.cognitive-persistent-hint--vigil), .cognitive-stage:has(.cognitive-speed-target-guide), .cognitive-stage:has(.cognitive-vigil-target-guide) { padding-top: clamp(8rem, 20vh, 11rem); } /* Content-rich, UNTIMED planning stages (shopping / document-check / trip-planning) stack a tall task panel above their controls and exceed short/phone viewports â€” clipping the controls off the bottom. Let them scroll within the game area: `safe center` keeps them centred when they fit and top-anchored when they overflow, and overflow-y:auto makes the rest reachable. The persistent header is a SIBLING of the stage (positioned to the game area), so it stays put while this scrolls. */ .cognitive-stage--cash, .cognitive-stage--check, .cognitive-stage--plan { justify-content: safe center; overflow-y: auto; overscroll-behavior: contain; } .cognitive-persistent-header { position: absolute; top: calc(clamp(1rem, 3vh, 2rem) + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 34; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: min(780px, 92vw); padding: 0; color: var(--text); text-align: center; pointer-events: none; background: transparent; border: 0; box-shadow: none; } .cognitive-persistent-title { font-size: clamp(1.05rem, 1.7vw, 1.55rem); font-weight: 800; line-height: 1.12; } .cognitive-persistent-hint { max-width: min(780px, 92vw); color: var(--muted); font-size: clamp(0.8rem, 0.92vw, 0.98rem); font-weight: 500; line-height: 1.3; } /* On phones/tablets the centred title+hint share the top band with the fixed corner buttons ("Problem melden" left, "Verlassen" right). Keep the header on the SAME ROW as those buttons (top-aligned with them) but cap its width so the centred block fits in the gap between them â€” the text wraps downward if needed. The buttons are position:fixed, so a wrapping header never moves them down. (16rem reserve clears the ~110px-wide "Verlassen" button on both sides up to 820px.) */ @media (max-width: 820px) { .cognitive-persistent-header { top: calc(var(--progress-bar-height) + 1vh + env(safe-area-inset-top)); width: auto; max-width: calc(100vw - 16rem); } } .cognitive-persistent-hint--vigil, .cognitive-persistent-hint--speed { color: var(--text); font-size: clamp(0.95rem, 1.35vw, 1.3rem); font-weight: 800; line-height: 1.1; } .cognitive-header { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; max-width: min(780px, 92vw); } .cognitive-title { font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 800; } .cognitive-hint { color: var(--muted); font-size: clamp(0.9rem, 1.05vw, 1.1rem); line-height: 1.35; } @media (max-width: 720px) { .cognitive-stage { /* Reserve room at the top for the same-row header band (title + wrapped hint sit beside the corner buttons and grow downward), so the stimulus clears it. */ padding-top: clamp(7.5rem, 17vh, 9.5rem); } } .cognitive-input-state { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--muted); font-size: clamp(0.82rem, 0.92vw, 0.98rem); font-weight: 800; } .cognitive-stage.is-input-ready .cognitive-input-state { border-color: color-mix(in oklab, #16a34a 58%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); color: var(--text); } .cognitive-stage.is-trial-correct .cognitive-input-state { border-color: color-mix(in oklab, #16a34a 72%, var(--border)); background: color-mix(in oklab, #16a34a 18%, var(--card)); } .cognitive-stage.is-trial-error .cognitive-input-state { border-color: color-mix(in oklab, #dc2626 66%, var(--border)); background: color-mix(in oklab, #dc2626 14%, var(--card)); } .cognitive-trial-feedback { position: absolute; left: 50%; top: calc(50% + clamp(76px, 13vw, 150px)); z-index: 24; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0.32rem 0.72rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--text); font-size: clamp(0.86rem, 0.95vw, 1rem); font-weight: 800; line-height: 1.15; pointer-events: none; white-space: nowrap; } .cognitive-stage--simple .cognitive-trial-feedback, .cognitive-stage--gonogo .cognitive-trial-feedback { top: calc(50% + clamp(82px, 14vw, 165px)); } .cognitive-stage--rotation .cognitive-trial-feedback { top: calc(50% + clamp(150px, 21vw, 260px)); } .cognitive-stage--grid .cognitive-trial-feedback, .cognitive-stage--corsi .cognitive-trial-feedback, .cognitive-stage--construct .cognitive-trial-feedback, .cognitive-stage--space3 .cognitive-trial-feedback { top: calc(50% + clamp(150px, 24vw, 250px)); } .cognitive-trial-feedback.is-positive { border-color: color-mix(in oklab, #16a34a 62%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); } .cognitive-trial-feedback.is-negative { border-color: color-mix(in oklab, #dc2626 62%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); } .cognitive-stage.is-input-locked .cognitive-response-btn, .cognitive-stage.is-input-locked .cognitive-grid-cell:not(.is-highlighted):not(.is-selected):not(.is-entered) { opacity: 0.58; } .cognitive-stage.is-input-ready .cognitive-response-btn, .cognitive-stage.is-input-ready .cognitive-grid-cell:not(.is-empty) { opacity: 1; } .cognitive-stage.is-input-ready .cognitive-grid-cell:not(.is-empty), .cognitive-stage.is-input-ready .cognitive-response-btn { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent), 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-rule-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; width: min(780px, 94vw); } .cognitive-rule-guide--stacked { flex-direction: column; align-items: stretch; flex-wrap: nowrap; width: min(520px, 94vw); } .cognitive-rule-guide-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--muted); font-size: clamp(0.78rem, 0.9vw, 0.95rem); line-height: 1.2; } .cognitive-rule-guide-symbol { width: 1.85rem; height: 1.85rem; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text); font-weight: 900; } .cognitive-rule-guide-item strong { color: var(--text); } .cognitive-rule-guide-img { width: 2rem; height: 2rem; object-fit: contain; } .cognitive-rule-guide-content { display: inline-flex; align-items: center; gap: 0.28rem; flex-wrap: wrap; } .cognitive-rule-guide-inline-img { width: 1.75rem; height: 1.75rem; object-fit: contain; vertical-align: middle; } .cognitive-rule-guide-inline-img.is-arrow { width: 2.25rem; height: 2.25rem; } .cognitive-inline-token { --inline-token-color: #2563eb; width: 1.85rem; height: 1.35rem; display: inline-block; flex: 0 0 auto; vertical-align: middle; background: var(--inline-token-color); border: 1px solid rgba(15, 23, 42, 0.22); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26); } .cognitive-inline-token.is-blue { --inline-token-color: #2563eb; } .cognitive-inline-token.is-orange { --inline-token-color: #f97316; } .cognitive-inline-token--shape { width: 1.55rem; height: 1.55rem; border-color: rgba(15, 23, 42, 0.28); background: #111827; } .cognitive-inline-token--shape.is-circle { border-radius: 50%; } .cognitive-inline-token--shape.is-triangle { clip-path: polygon(50% 5%, 95% 92%, 5% 92%); border-radius: 0; } .cognitive-rule-guide-item.is-active { border-color: color-mix(in oklab, var(--primary) 58%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); color: var(--text); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .cognitive-stage--flex-animal { --flex-rule-active: #dc2626; gap: clamp(1.6rem, 4vh, 3rem); } .cognitive-stage--flex-animal .cognitive-rule-sequence { margin-bottom: clamp(0.45rem, 1.4vh, 1rem); } .cognitive-stage--flex-animal .cognitive-rule-guide { margin-bottom: clamp(0.85rem, 2.4vh, 1.8rem); } .cognitive-stage--flex-animal .cognitive-response-row { margin-top: clamp(0.8rem, 2.2vh, 1.6rem); } .cognitive-stage--flex-animal .cognitive-rule-guide-item { justify-content: center; text-align: center; min-height: 48px; } .cognitive-stage--flex-animal .cognitive-rule-guide-content { justify-content: center; text-align: center; } .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active { border-color: var(--flex-rule-active); background: var(--flex-rule-active); color: #fff; box-shadow: 0 12px 24px rgba(220, 38, 38, 0.2); } .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active strong, .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { color: #fff; } .cognitive-stage--flex-animal .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { background: rgba(255, 255, 255, 0.18); } .cognitive-stage--flex { --flex-rule-active: #dc2626; /* Match flex-animal's vertical breathing: rule guide â‡¢ stimulus â‡¢ response row are distributed with the same gaps so the layout reads consistently across both FLEX modes. */ gap: clamp(1.6rem, 4vh, 3rem); } .cognitive-stage--flex .cognitive-rule-sequence { margin-bottom: clamp(0.45rem, 1.4vh, 1rem); } .cognitive-stage--flex .cognitive-rule-guide { width: min(760px, 94vw); margin-bottom: clamp(0.85rem, 2.4vh, 1.8rem); } .cognitive-stage--flex .cognitive-response-row { margin-top: clamp(0.8rem, 2.2vh, 1.6rem); } .cognitive-stage--flex .cognitive-rule-guide--stacked { width: min(520px, 94vw); } .cognitive-stage--flex .cognitive-rule-guide-item { min-width: min(300px, 92vw); justify-content: center; text-align: center; } .cognitive-stage--flex .cognitive-rule-guide-content { justify-content: center; text-align: center; } .cognitive-stage--flex .cognitive-rule-guide-item.is-active { border-color: var(--flex-rule-active); background: var(--flex-rule-active); color: #fff; box-shadow: 0 12px 24px rgba(220, 38, 38, 0.2); } .cognitive-stage--flex .cognitive-rule-guide-item.is-active strong, .cognitive-stage--flex .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { color: #fff; } .cognitive-stage--flex .cognitive-rule-guide-item.is-active .cognitive-rule-guide-symbol { background: rgba(255, 255, 255, 0.18); } .cognitive-stage--flex .cognitive-rule-guide-item.is-switch-blink { animation: cognitiveFlexRuleSwitchBlink 460ms ease-out 1; } @keyframes cognitiveFlexRuleSwitchBlink { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.58), 0 12px 24px rgba(220, 38, 38, 0.18); } 38% { transform: scale(1.025); box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.24), 0 16px 30px rgba(220, 38, 38, 0.3); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), 0 12px 24px rgba(220, 38, 38, 0.2); } } .cognitive-stage--flex .cognitive-target { width: min(760px, 94vw); min-height: clamp(190px, 28vw, 330px); justify-items: center; } .cognitive-flex-window-board { width: min(720px, 94vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 2vw, 1.2rem); } .cognitive-flex-window { min-height: clamp(170px, 24vw, 280px); display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; gap: clamp(0.55rem, 1.2vw, 0.85rem); padding: clamp(0.65rem, 1.6vw, 1rem); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--card); box-shadow: var(--shadow-subtle, 0 1px 2px rgba(15, 23, 42, 0.08)); } .cognitive-flex-window.is-active { /* var(--primary) is not defined in this site's brand tokens â€” that's why the active panel was rendering with no background and showing the page-cream through. Use var(--accent) (the site's red) which IS defined. */ border-color: color-mix(in oklab, var(--accent) 70%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent), 0 18px 34px rgba(15, 23, 42, 0.14); } .cognitive-flex-window-board.is-position-rule .cognitive-flex-window { border-color: #dc2626; background: color-mix(in oklab, #dc2626 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #dc2626 30%, transparent), 0 18px 34px rgba(15, 23, 42, 0.14); } .cognitive-flex-window-rule { color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 900; line-height: 1.15; text-align: center; } .cognitive-flex-window-rule { color: var(--text); } .cognitive-flex-window-slot { min-height: clamp(118px, 17vw, 204px); display: grid; place-items: center; gap: 0.45rem; } .cognitive-flex-object { --flex-object-color: #2563eb; width: clamp(70px, 11vw, 132px); height: clamp(70px, 11vw, 132px); background: var(--flex-object-color); box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18); } .cognitive-flex-object.is-blue { --flex-object-color: #2563eb; } .cognitive-flex-object.is-orange { --flex-object-color: #f97316; } .cognitive-flex-object--circle { border-radius: 50%; } .cognitive-flex-object--triangle { clip-path: polygon(50% 6%, 94% 92%, 6% 92%); } .cognitive-stage--flex .cognitive-response-btn { min-width: clamp(170px, 20vw, 240px); } .cognitive-stage--flex .cognitive-response-btn.has-content-rows { display: inline-flex; flex-direction: column; gap: 0.38rem; min-height: 96px; padding-block: 0.75rem; } @media (max-width: 640px) { .cognitive-flex-window-board { /* Keep the two windows SIDE-BY-SIDE (2 columns) on phones â€” they're a left/right pair, so stacking them into rows broke the comparison. Just tighten the gap/width to fit. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.4rem, 1.6vw, 0.75rem); /* 100% (not 96vw): the board's parent (.cognitive-target) is already inset by the stage's symmetric 16px side padding, so 96vw overflowed it by ~16px on the right â€” the right window touched the edge while the left kept a gap. 100% fills the parent â†’ equal margins. */ width: 100%; } .cognitive-flex-window { min-height: clamp(128px, 38vw, 200px); } } .cognitive-rule-sequence { width: min(620px, 94vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); } .cognitive-rule-sequence-track { display: grid; grid-template-columns: repeat(15, clamp(26px, 4vw, 42px)); justify-content: center; align-items: center; gap: clamp(0.18rem, 0.6vw, 0.4rem); } .cognitive-rule-sequence-item { height: clamp(26px, 4vw, 42px); display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--muted); font-weight: 900; font-size: clamp(0.8rem, 1.2vw, 1rem); line-height: 1; transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease; } .cognitive-rule-sequence-item.is-current { border-color: var(--flex-rule-active, #dc2626); background: var(--flex-rule-active, #dc2626); color: #fff; transform: scale(1.14); box-shadow: 0 10px 22px rgba(220, 38, 38, 0.2); } .cognitive-rule-sequence-item.is-past:not(.is-current) { opacity: 0.55; } .cognitive-rule-sequence-item.is-empty { opacity: 0; } .cognitive-target { min-height: clamp(110px, 18vw, 220px); display: grid; place-items: center; font-weight: 800; transform: translateY(var(--cognitive-fixation-align-offset)); } .cognitive-stage--vigilance { --cognitive-vigil-symbol-size: clamp(165px, 24vmin, 300px); justify-content: center; padding: 0 clamp(1rem, 3vw, 3rem); background: transparent; } .cognitive-stage--vigilance .cognitive-target { min-height: var(--cognitive-vigil-symbol-size); transform: none; } .cognitive-stage--vigilance .cognitive-asset-shell--plain { width: var(--cognitive-vigil-symbol-size); height: var(--cognitive-vigil-symbol-size); background: transparent; border: none; box-shadow: none; } .cognitive-stage--vigilance .cognitive-asset-img { filter: drop-shadow(0 16px 26px rgba(15, 23, 42, 0.32)); } /* === VIGIL â€” porthole window onto open water === The player keeps watch through a framed rectangular window. Ships traverse the visible water from random directions (the trial stimulus); ducks paddle by independently as ambient ambience. */ .cognitive-stage--vigil-window .cognitive-vigil-scene { position: relative; /* Landscape rectangle (16:9). Width clamps so the window always fits even on tall narrow viewports â€” picks the smaller of 90vw or 1.78Ã—70vh. */ width: min(90vw, calc(70vh * 16 / 9), 880px); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.35); } /* Prep-modal demo: the live scene caps at 880px (~= the small demo box width), so it looks edge-to-edge. Scope it down inside the demo so the porthole reads as a contained WINDOW with margin around it, matching the real game's proportion. */ .cognitive-demo-gamearea .cognitive-stage--vigil-window .cognitive-vigil-scene { width: min(68%, 560px); } /* Minimalist window frame â€” sits ON TOP of everything, framing the water view. Brand-aligned: hairline border + soft inset highlight + subtle drop shadow. No heavy wooden look; fits the rest of the site's clean surface treatment. */ .cognitive-stage--vigil-window .cognitive-vigil-frame { position: absolute; inset: 0; pointer-events: none; z-index: 10; border: 1px solid var(--border); border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, var(--card)), 0 8px 18px rgba(15, 23, 42, 0.10); } /* The water â€” gradient skyâ†’sea plus animated wave layers behind the travellers. */ .cognitive-stage--vigil-window .cognitive-vigil-water { position: absolute; inset: 0; overflow: hidden; background: linear-gradient( 180deg, #cfe6f4 0%, #b6d8ec 32%, /* horizon line */ #94c5dc 33%, #6fb2d4 36%, #4a9dcb 70%, #357fb1 100% ); } .cognitive-stage--vigil-window .cognitive-vigil-wave { position: absolute; left: -10%; right: -10%; height: 14px; background: repeating-linear-gradient( 90deg, transparent 0 16px, rgba(255, 255, 255, 0.32) 16px 18px, transparent 18px 36px ); opacity: 0.55; filter: blur(0.4px); pointer-events: none; } .cognitive-stage--vigil-window .cognitive-vigil-wave--1 { top: 55%; animation: cognitive-vigil-wave-drift 6s linear infinite; } .cognitive-stage--vigil-window .cognitive-vigil-wave--2 { top: 70%; opacity: 0.4; animation: cognitive-vigil-wave-drift 8s linear infinite reverse; } .cognitive-stage--vigil-window .cognitive-vigil-wave--3 { top: 85%; opacity: 0.3; animation: cognitive-vigil-wave-drift 11s linear infinite; } @keyframes cognitive-vigil-wave-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-36px); } } /* Traveller â€” a sliding ship/pirate/duck. Z-axis order from FAR to NEAR: waves (z auto) < ducks (z 2) < ships/pirates (z 4) < frame (z 10). Ships always render above ducks even if they cross in the same lane. --vigil-travel-ms drives the cross-animation duration from JS per element. */ .cognitive-stage--vigil-window .cognitive-vigil-traveller { position: absolute; top: 50%; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; cursor: pointer; display: block; pointer-events: auto; transform: translateY(-50%); } .cognitive-stage--vigil-window .cognitive-vigil-traveller--ship, .cognitive-stage--vigil-window .cognitive-vigil-traveller--pirate { /* Ship-sized: moderately small so the window feels far. */ width: clamp(80px, 11vw, 140px); height: clamp(56px, 8vw, 96px); z-index: 4; } .cognitive-stage--vigil-window .cognitive-vigil-traveller--duck { /* Ducks are roughly a quarter of the ship area (~half the width AND half the height) and non-interactive â€” they live BEHIND ships in z-order so a ship sailing through a duck convoy is never visually blocked. */ width: clamp(20px, 2.75vw, 35px); height: clamp(14px, 2vw, 24px); cursor: default; pointer-events: none; z-index: 2; } .cognitive-stage--vigil-window .cognitive-vigil-traveller-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.25)); display: block; } /* Facing direction is applied EXPLICITLY to the img by direction+type. No transform stacking with the parent keyframe, no race. Ship sprites face RIGHT by default; duck sprite faces LEFT by default. - Ship/pirate going RTL â†’ flip (so it faces left while moving left). - Ship/pirate going LTR â†’ natural (faces right, moving right). - Duck going LTR â†’ flip (so it faces right while moving right). - Duck going RTL â†’ natural (faces left, moving left). */ .cognitive-stage--vigil-window .cognitive-vigil-traveller--ship.is-rtl .cognitive-vigil-traveller-img, .cognitive-stage--vigil-window .cognitive-vigil-traveller--pirate.is-rtl .cognitive-vigil-traveller-img, .cognitive-stage--vigil-window .cognitive-vigil-traveller--duck.is-ltr .cognitive-vigil-traveller-img { transform: scaleX(-1); } /* ship3.png ships in the assets folder facing LEFT (every other ship faces RIGHT). Invert the rule: LTR ship3 needs a flip; RTL ship3 already faces left naturally. */ .cognitive-stage--vigil-window .cognitive-vigil-traveller--ship.is-ltr .cognitive-vigil-traveller-img[src$="ship3.png"] { transform: scaleX(-1); } .cognitive-stage--vigil-window .cognitive-vigil-traveller--ship.is-rtl .cognitive-vigil-traveller-img[src$="ship3.png"] { transform: none; } .cognitive-stage--vigil-window .cognitive-vigil-traveller--pirate .cognitive-vigil-traveller-img { filter: drop-shadow(0 6px 10px rgba(40, 0, 0, 0.35)); } /* --- Per-ship reaction feedback --- When the player reacts (or misses), a coloured badge pops above the relevant ship and the hull picks up a matching glow. The badge is a child of the traveller, so it rides along with the ship's cross animation; its own pop animation is independent. */ .cognitive-stage--vigil-window .cognitive-vigil-hit-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); display: inline-flex; align-items: center; justify-content: center; width: clamp(26px, 3.4vw, 40px); height: clamp(26px, 3.4vw, 40px); border-radius: 50%; font-size: clamp(0.95rem, 1.8vw, 1.3rem); font-weight: 800; line-height: 1; color: #fff; pointer-events: none; z-index: 6; animation: cognitive-vigil-badge-pop 700ms cubic-bezier(0.2, 0.8, 0.3, 1) both; } .cognitive-stage--vigil-window .cognitive-vigil-hit-badge.is-hit { background: #1f9d57; box-shadow: 0 0 0 4px rgba(31, 157, 87, 0.25), 0 4px 10px rgba(0, 0, 0, 0.3); } .cognitive-stage--vigil-window .cognitive-vigil-hit-badge.is-wrong { background: var(--accent, #D01C1F); box-shadow: 0 0 0 4px rgba(208, 28, 31, 0.22), 0 4px 10px rgba(0, 0, 0, 0.3); } .cognitive-stage--vigil-window .cognitive-vigil-hit-badge.is-missed { background: #C98A2B; box-shadow: 0 0 0 4px rgba(201, 138, 43, 0.22), 0 4px 10px rgba(0, 0, 0, 0.3); } @keyframes cognitive-vigil-badge-pop { 0% { opacity: 0; transform: translate(-50%, -60%) scale(0.4); } 35% { opacity: 1; transform: translate(-50%, -100%) scale(1.18); } 60% { transform: translate(-50%, -100%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -100%) scale(1); } } /* Hull glow per outcome â€” applied to the img so it doesn't disturb the parent's translate-based cross animation. Specificity (0,4,0) beats the pirate filter (0,3,0). */ .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-caught .cognitive-vigil-traveller-img { filter: drop-shadow(0 0 9px rgba(31, 157, 87, 0.95)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-false-alarm .cognitive-vigil-traveller-img { filter: drop-shadow(0 0 9px rgba(208, 28, 31, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-missed .cognitive-vigil-traveller-img { filter: grayscale(0.6) drop-shadow(0 0 6px rgba(201, 138, 43, 0.7)); } /* Vertical lanes. Top lane is just below horizon, lower lanes deeper into water. */ .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-lane-1 { top: 50%; } .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-lane-2 { top: 64%; } .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-lane-3 { top: 78%; } /* Cross animations: traveller starts OFF-SCREEN one direction and exits off the opposite side over --vigil-travel-ms. Keyframes ONLY translate; the facing-direction scaleX is applied to the inner img via type+direction class rules (above) so no transform-stacking ambiguity can flip the wrong sprite. */ .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-ltr { left: 0; animation: cognitive-vigil-cross-ltr var(--vigil-travel-ms, 1500ms) linear forwards; } .cognitive-stage--vigil-window .cognitive-vigil-traveller.is-rtl { left: 0; animation: cognitive-vigil-cross-rtl var(--vigil-travel-ms, 1500ms) linear forwards; } @keyframes cognitive-vigil-cross-ltr { 0% { left: 0%; transform: translate(-100%, -50%); } 100% { left: 100%; transform: translate(0, -50%); } } @keyframes cognitive-vigil-cross-rtl { 0% { left: 100%; transform: translate(0, -50%); } 100% { left: 0%; transform: translate(-100%, -50%); } } /* Kill the framework's empty .cognitive-target div in vigil mode. It has a min-height that would push the wharf around when the renderer appends it. display:none removes it from layout flow entirely, eliminating the "window jumps up" symptom. */ .cognitive-stage--vigil-window .cognitive-target { display: none; } /* === /VIGIL â€” porthole window === */ .cognitive-vigil-target-guide, .cognitive-speed-target-guide { display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.45rem, 1vw, 0.8rem); max-width: min(92vw, 560px); color: var(--text); font-size: inherit; font-weight: inherit; line-height: 1.2; text-align: center; pointer-events: none; } .cognitive-vigil-target-label, .cognitive-speed-target-label { font-weight: 900; } .cognitive-vigil-target-image-slot, .cognitive-speed-target-image-slot { width: clamp(56px, 8vmin, 92px); height: clamp(56px, 8vmin, 92px); display: inline-grid; place-items: center; flex: 0 0 auto; } .cognitive-speed-target-image-slot { width: clamp(48px, 7vmin, 78px); height: clamp(48px, 7vmin, 78px); } .cognitive-vigil-target-img, .cognitive-speed-target-img { width: 100%; height: 100%; object-fit: contain; display: block; } .cognitive-target--auditory-only { visibility: hidden; } .cognitive-stage--grid > .cognitive-grid, .cognitive-stage--sequence > .cognitive-sequence-display, .cognitive-stage--departure-board > .departure-board, .cognitive-stage--corsi > .cognitive-grid { transform: translateY(var(--cognitive-fixation-align-offset)); } /* === STM 2 GlÃ¼hwÃ¼rmchen-Overlay === Every cell holds a firefly â€” dim by default. The cells that are part of the current step in the sequence "light up": the firefly inside glows to full brightness and the box gets a warm accent border + soft tint. Drop the firefly sprite at images/stm2/firefly.png. */ .cognitive-corsi-fireflies .cognitive-grid-cell { position: relative; } /* Base state: a dim firefly inside every box. We use ::before so the existing .is-entered::after (the response-order badge during recall) keeps full control of ::after and isn't dimmed. */ .cognitive-corsi-fireflies .cognitive-grid-cell::before { content: ''; position: absolute; inset: 14%; background-image: url('images/stm2/firefly.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.22; filter: grayscale(0.55) brightness(0.78); pointer-events: none; transition: opacity 200ms ease, filter 200ms ease; } /* Override the global bright-blue highlight: keep the card surface, just tint the box gently and warm the border so the "lit" boxes read as a glow rather than a flash. */ .cognitive-corsi-fireflies .cognitive-grid-cell.is-highlighted, .cognitive-corsi-fireflies .cognitive-grid-cell.is-target, .cognitive-corsi-fireflies .cognitive-grid-cell.is-selected { background: color-mix(in oklab, var(--accent-secondary, #FFB56B) 14%, var(--card)); color: var(--text); border-color: color-mix(in oklab, var(--accent-secondary, #FFB56B) 65%, var(--border)); } /* Lit state: the firefly glows to full strength and gently pulses. */ .cognitive-corsi-fireflies .cognitive-grid-cell.is-highlighted::before { opacity: 1; filter: none; animation: cognitive-firefly-flicker 1.6s ease-in-out infinite; } /* When the player taps a cell during recall, hide the firefly behind the red confirmation badge so the response-order pill is the only visible mark. */ .cognitive-corsi-fireflies .cognitive-grid-cell.is-entered::before { opacity: 0; } @keyframes cognitive-firefly-flicker { 0%, 100% { opacity: 0.92; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* Scale the grid container width with the grid size so 4Ã—4 and 5Ã—5 cells stay tappable. */ .cognitive-corsi-fireflies > .cognitive-grid[style*="--cognitive-grid-size: 4"] { width: min(64vw, 440px); } .cognitive-corsi-fireflies > .cognitive-grid[style*="--cognitive-grid-size: 5"] { width: min(72vw, 520px); } /* --- Scattered layout (classical Corsi style): boxes are positioned absolutely at random points inside a square area instead of a regular grid. The container has a fixed aspect ratio so the 0..1 normalised positions remain stable across viewports. Cells are sized via CSS variable so they scale with the area. --- */ .cognitive-corsi-fireflies .cognitive-grid--scattered { position: relative; display: block; aspect-ratio: 1 / 1; width: min(80vw, 560px); max-width: 80vw; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-subtle); padding: 0; /* Cell size scales with grid size: 3Ã—3 â†’ larger boxes, 5Ã—5 â†’ smaller boxes. */ --scattered-cell-size: clamp(48px, 14%, 90px); } .cognitive-corsi-fireflies .cognitive-grid--scattered[style*="--cognitive-grid-size: 4"] { --scattered-cell-size: clamp(44px, 12%, 78px); } .cognitive-corsi-fireflies .cognitive-grid--scattered[style*="--cognitive-grid-size: 5"] { --scattered-cell-size: clamp(40px, 10%, 68px); } .cognitive-corsi-fireflies .cognitive-grid--scattered .cognitive-grid-cell { position: absolute; width: var(--scattered-cell-size); height: var(--scattered-cell-size); /* Top/left from inline style place the cell's TOP-LEFT corner at the sampled point; translate(-50%,-50%) recentres so the sample point sits at the cell centre. */ transform: translate(-50%, -50%); } /* === /STM 2 GlÃ¼hwÃ¼rmchen-Overlay === */ /* === SELECT 1 Sushi-FÃ¶rderband === Brand-aligned: the belt is a clean white card with hairline taupe border and the app's soft shadow â€” same surface treatment as cash1 / check1. */ .cognitive-stage--select-sushi { position: relative; overflow: hidden; min-height: calc(100vh - 7rem); min-height: calc(100dvh - 7rem); justify-content: center; } /* Prep-modal demo: the live stage forces calc(100vh - 7rem) min-height and an 880px belt, so in the small demo box the centred content pushes the conveyor + plate below the visible area. Scope it down so the belt and the landing plate are fully visible. */ .cognitive-demo-gamearea .cognitive-stage--select-sushi { min-height: 0; } .cognitive-demo-gamearea .cognitive-stage--select-sushi .cognitive-sushi-belt { width: min(90%, 620px); height: clamp(170px, 30vh, 230px); } /* The full-game plate/dish are sized for an 880Ã—360 belt; in the short demo belt they overlap the conveyor strip. Shrink them and drop the plate so it sits clearly below the strip (strip occupies 8â€“46% of the belt; the plate must stay under that). */ .cognitive-demo-gamearea .cognitive-stage--select-sushi .cognitive-sushi-dish { width: clamp(46px, 12cqw, 74px); height: clamp(46px, 12cqw, 74px); } .cognitive-demo-gamearea .cognitive-stage--select-sushi .cognitive-sushi-plate { width: clamp(48px, 13cqw, 80px); bottom: 6%; } /* The default .cognitive-target element is unused for sushi â€” collapse it out of the flex flow so the belt isn't pushed down by an empty box. */ .cognitive-stage--select-sushi .cognitive-target { position: absolute; visibility: hidden; pointer-events: none; width: 0; height: 0; } .cognitive-stage--select-sushi .cognitive-sushi-target-cue { display: inline-flex; align-items: center; gap: 0.7rem; margin-left: 0.6rem; padding: 0.45rem 0.85rem 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--card); box-shadow: var(--shadow-subtle, 0 2px 6px rgba(15, 23, 42, 0.08)); vertical-align: middle; } .cognitive-stage--select-sushi .cognitive-sushi-target-cue-label { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .cognitive-stage--select-sushi .cognitive-sushi-target-cue-img { width: clamp(56px, 7vw, 88px); height: clamp(56px, 7vw, 88px); object-fit: contain; display: block; } .cognitive-stage--select-sushi .cognitive-sushi-belt { position: relative; width: min(94vw, 880px); height: clamp(260px, 36vh, 360px); margin: clamp(0.6rem, 1.4vh, 1.4rem) auto; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-subtle); } /* The conveyor strip â€” sub-band inside the card with hairline borders defining its top/bottom edges. The dish travels at its vertical centre. */ .cognitive-stage--select-sushi .cognitive-sushi-belt-strip { position: absolute; left: 0; right: 0; top: 8%; height: 38%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-3, #F4EFE6); pointer-events: none; } /* The plate â€” static element BELOW the conveyor strip. Tapped dishes drop onto it. Kept compact so it doesn't crowd the strip. */ .cognitive-stage--select-sushi .cognitive-sushi-plate { position: absolute; left: 50%; bottom: 10%; width: clamp(90px, 11vw, 130px); height: auto; transform: translateX(-50%); pointer-events: none; z-index: 1; user-select: none; -webkit-user-drag: none; opacity: 0.92; } .cognitive-stage--select-sushi .cognitive-sushi-dish { position: absolute; top: 27%; left: 0; width: clamp(88px, 10vw, 120px); height: clamp(88px, 10vw, 120px); margin: 0; padding: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); animation: cognitive-sushi-travel var(--cognitive-sushi-travel-ms, 4200ms) linear forwards; z-index: 3; } @keyframes cognitive-sushi-travel { from { left: 110%; } to { left: -20%; } } .cognitive-stage--select-sushi .cognitive-sushi-dish:focus-visible:not(.is-departed):not(.is-pulled) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; } .cognitive-stage--select-sushi .cognitive-sushi-dish-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .cognitive-stage--select-sushi .cognitive-sushi-dish.is-departed { opacity: 0.5; pointer-events: none; cursor: default; } /* On tap: freeze in place (JS pauses travel + pins inline left), then drop the food down onto the plate â€” translates from the strip to the plate's vertical centre with a small scale-down. The food stays visible on the plate until the dish is removed (end of the trial's travel timer). */ .cognitive-stage--select-sushi .cognitive-sushi-dish.is-pulled { animation: cognitive-sushi-pull 380ms cubic-bezier(0.55, 0.15, 0.45, 1) forwards; pointer-events: none; cursor: default; z-index: 4; } @keyframes cognitive-sushi-pull { 0% { top: 27%; transform: translate(-50%, -50%) scale(1); } 65% { top: 70%; transform: translate(-50%, -50%) scale(0.66); } 100% { top: 72%; transform: translate(-50%, -50%) scale(0.6); } } /* === /SELECT 1 Sushi-FÃ¶rderband === */ /* === IMPULSE 1 AsteroidenschieÃŸen === Brand-aligned: the scene is a clean white card with hairline border and soft shadow â€” same treatment as the sushi belt and the WM bays. The "space" theme comes from the user's meteor / planet artwork, not from the surface. The spaceship sits at the bottom as a quiet anchor sprite. */ .cognitive-stage--impulse-asteroid { position: relative; overflow: hidden; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-scene { position: relative; width: min(96cqw, 96vw, 960px); /* Taller scene so the lower third sits clearly BELOW the centre â€” the ship is anchored there and must read as "bottom of the screen". Use cqh (of #gameArea / the demo modal, both container-type:size) NOT vh: vh is the viewport, which overflowed the shorter playable-demo modal and short/landscape viewports. cqh sizes the scene to the actual play area in both. */ height: clamp(220px, 78cqh, 780px); margin: clamp(0.3rem, 1cqh, 1rem) auto; /* No panel â€” the spaceship + stimuli sit directly on the page background. */ } /* Prep-modal demo: the live scene is up to 780px tall and its anchors (spaceship at top:74%, fire button near the bottom) are calibrated for that height. In the small demo box (shortened further by the caption strip) those anchors collide and the meteor/ship render oversized. Scope the whole scene down so meteor, ship and SCHIESSEN all fit with clear gaps. */ .cognitive-demo-gamearea .cognitive-stage--impulse-asteroid .cognitive-asteroid-scene { height: min(330px, 82cqh); width: min(92%, 560px); } .cognitive-demo-gamearea .cognitive-stage--impulse-asteroid .cognitive-asteroid-object { top: 30%; width: clamp(62px, 13cqw, 96px); height: clamp(62px, 13cqw, 96px); } .cognitive-demo-gamearea .cognitive-stage--impulse-asteroid .cognitive-asteroid-spaceship { top: 62%; width: clamp(52px, 12cqw, 76px); height: clamp(52px, 12cqw, 76px); } .cognitive-demo-gamearea .cognitive-stage--impulse-asteroid .cognitive-asteroid-fire-btn { bottom: clamp(8px, 2.5cqh, 16px); min-width: clamp(108px, 24cqw, 168px); padding: clamp(0.32rem, 1.4cqh, 0.5rem) clamp(0.8rem, 3cqw, 1.3rem); font-size: clamp(0.72rem, 2.4cqw, 0.92rem); } /* The default .cognitive-target element is unused for impulse-asteroid â€” collapse it out of the flex flow so the scene isn't pushed below centre by an empty box (same fix as sushi). */ .cognitive-stage--impulse-asteroid .cognitive-target { position: absolute; visibility: hidden; pointer-events: none; width: 0; height: 0; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0.55; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-spaceship { position: absolute; left: 50%; /* Anchored in the LOWER third of the (tall) scene so it reads as "bottom of the screen", well below centre and far from the meteor (which holds at top:34%). */ top: 74%; width: clamp(72px, 9vw, 104px); height: clamp(72px, 9vw, 104px); transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 2; pointer-events: none; opacity: 0.95; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-spaceship.is-placeholder { /* Quiet outlined triangle when no spaceship image is provided yet. */ background: var(--accent-secondary, #FFB56B); clip-path: polygon(50% 8%, 92% 92%, 50% 75%, 8% 92%); } /* SCHIESSEN button â€” third input channel (click-on-stimulus + Space/Enter + this). Neutral chip style matching the rest of the site: white card surface, hairline border, subtle shadow. Brand-aligned with WM 1's count chips. */ .cognitive-stage--impulse-asteroid .cognitive-asteroid-fire-btn { position: absolute; left: 50%; /* Sits clearly below the spaceship with a comfortable gap; not glued to the very bottom edge so the layout reads as a thoughtful composition. */ bottom: clamp(20px, 3vh, 36px); transform: translateX(-50%); min-width: clamp(140px, 22vw, 220px); padding: clamp(0.6rem, 1.3vh, 0.9rem) clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--card); color: var(--text); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; cursor: pointer; user-select: none; z-index: 3; box-shadow: var(--shadow-subtle, 0 2px 6px rgba(15, 23, 42, 0.08)); transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-fire-btn:hover, .cognitive-stage--impulse-asteroid .cognitive-asteroid-fire-btn:focus-visible { border-color: var(--accent, #D01C1F); outline: 2px solid color-mix(in oklab, var(--accent, #D01C1F) 30%, transparent); outline-offset: 3px; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-fire-btn:active { transform: translateX(-50%) translateY(1px); } .cognitive-stage--impulse-asteroid .cognitive-asteroid-spaceship-img { width: 100%; height: 100%; object-fit: contain; display: block; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-object { position: absolute; left: 50%; /* Upper area of the scene â€” leaves a wide gap to the ship at top:74%. */ top: 34%; width: clamp(96px, 12vw, 148px); height: clamp(96px, 12vw, 148px); margin: 0; padding: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; /* No spawn-in: the stimulus is at full size + opacity from frame 0. The animation only handles the hold + fade-out at the very end. */ transform: translate(-50%, -50%) scale(1); opacity: 1; animation: cognitive-asteroid-appear var(--cognitive-asteroid-total-ms, 3000ms) linear forwards; z-index: 3; } /* Stimulus is INSTANT at frame 0 (no scale-up, no fade-in). Holds full size for the active phase, then quickly fades out at the very end of the trial if untouched. */ @keyframes cognitive-asteroid-appear { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 90% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; } } .cognitive-stage--impulse-asteroid .cognitive-asteroid-object-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .cognitive-stage--impulse-asteroid .cognitive-asteroid-object:focus-visible:not(.is-shot) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; } /* On tap: the click handler overrides `animation` inline to play the explosion keyframe. The class itself just locks interaction. */ .cognitive-stage--impulse-asteroid .cognitive-asteroid-object.is-shot { pointer-events: none; cursor: default; } /* Destruction: the original asteroid/planet image is swapped to pop.png by JS, then this keyframe punches the pop burst outward (small â†’ larger â†’ fade). The brief scale-up makes the "destroyed!" feedback unmistakable. */ @keyframes cognitive-asteroid-explode { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; } 60% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.65); opacity: 0; } } /* Projectile fired from the spaceship toward the stimulus on tap. Start position (inline left/top) is the spaceship's nose; end offset (dx/dy) is the delta to the stimulus centre. */ .cognitive-stage--impulse-asteroid .cognitive-asteroid-projectile { position: absolute; width: 10px; height: 16px; margin: -8px 0 0 -5px; background: linear-gradient(180deg, #fff5a0 0%, #ffb347 65%, #ff7a18 100%); border-radius: 50% 50% 35% 35%; box-shadow: 0 0 10px rgba(255, 198, 80, 0.85), 0 0 22px rgba(255, 160, 60, 0.45); pointer-events: none; z-index: 4; animation: cognitive-asteroid-projectile-fly var(--cognitive-projectile-ms, 180ms) linear forwards; } @keyframes cognitive-asteroid-projectile-fly { from { transform: translate(0, 0); } to { transform: translate(var(--cognitive-projectile-dx, 0), var(--cognitive-projectile-dy, 0)); } } /* === /IMPULSE 1 AsteroidenschieÃŸen === */ /* === WM 1 Container-Terminal v2 === Quantity-tracking Updating-WM. Phase 1: bays open, container stacks visible. Phase 2: lids close, crane rides between bays carrying 1-3 cargo cubes. Phase 3: numeric chips for "how many in bay X?". Brand-aligned: card-like wharf with hairline border and soft shadow. The crane is a slim trolley on a single rail, wood-toned with a quiet drop shadow. */ /* Prep-modal demo: the live wharf is sized to the full viewport (--wharf-width up to 920px, --crane-headroom up to 15rem, viewport-sized cubes), so it overflows the small demo box and the gantry beam is clipped above the visible area ("crane not visible"). Scope the scene down to the demo gamearea (now a size container) so the whole terminal â€” crane, bays and probe â€” fits and centres. */ .cognitive-demo-gamearea .cognitive-stage--container-terminal .cognitive-wharf { --cube-w: clamp(28px, 12cqw, 52px); --cube-h: clamp(15px, 6cqh, 27px); --bay-pad-x: clamp(0.2rem, 0.9cqw, 0.55rem); --wharf-width: min(96%, 540px); --crane-headroom: clamp(2.8rem, 19cqh, 4.8rem); padding: clamp(0.5rem, 1.4cqw, 0.9rem) clamp(0.45rem, 1.2cqw, 0.8rem) clamp(0.4rem, 1cqw, 0.7rem); } .cognitive-demo-gamearea .cognitive-stage--container-terminal .cognitive-bay-lid-number { font-size: clamp(1rem, 7cqw, 2.1rem); } .cognitive-demo-gamearea .cognitive-stage--container-terminal .cognitive-bay-label { font-size: clamp(0.5rem, 2.4cqw, 0.7rem); } .cognitive-demo-gamearea .cognitive-stage--container-terminal { gap: clamp(0.3rem, 1.2cqh, 0.8rem); } .cognitive-stage--container-terminal { display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 1.5vh, 1.4rem); } .cognitive-stage--container-terminal .cognitive-wharf { --bay-count: var(--cognitive-bay-count, 4); /* The terminal row is [truck lane | containersâ€¦]; the crane treats the truck as column 0. */ --col-count: var(--cognitive-col-count, 5); --bay-capacity: var(--cognitive-bay-capacity, 6); /* --bay-rows is the number of effective stack rows now that pakete pack 2-per-row. JS computes ceil(bay-capacity / 2) and writes --cognitive-bay-rows; fall back to 3 (matches default bay-capacity = 6) if the var is absent. */ --bay-rows: var(--cognitive-bay-rows, 3); /* --cube-w / --cube-h are the ACTUAL display dimensions of a single paket. Bumped up vs the old single-column layout so each paket reads clearly even when packed two-per-row. Aspect roughly 1:0.6 keeps the shipping-container look. The min(â€¦, fit) term caps the cube so two pakete + a bay always fit one grid column (wharf-width / col-count); without it, high bay counts (up to 6 bays = 7 columns) overflowed the wharf. The bays-row uses 1fr columns and the crane trolley positions by col-count percentage, so shrinking the cube keeps the crane aligned. */ --cube-w: min(clamp(72px, 8.5vw, 110px), calc(var(--wharf-width) / var(--col-count) / 2 - 0.8rem)); --cube-h: clamp(42px, 4.5vh, 68px); --bay-pad-x: clamp(0.4rem, 1vw, 0.9rem); --wharf-width: min(94vw, 920px); --crane-headroom: clamp(9rem, 22vh, 15rem); position: relative; width: var(--wharf-width); padding: clamp(0.9rem, 1.6vw, 1.3rem) clamp(0.7rem, 1.4vw, 1.1rem) clamp(0.6rem, 1.2vw, 1rem); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-subtle); } /* --- Bays row --- */ .cognitive-stage--container-terminal .cognitive-bays-row { display: grid; /* minmax(0, 1fr) (not plain 1fr): forces all columns EQUAL and bounded to the wharf width, so a wide child (e.g. a long bay label) can't blow a column out and overflow the terminal at high bay counts. Equal columns also keep the crane trolley â€” which positions by col-count percentage â€” aligned with the bays. Oversized content clips instead of pushing. */ grid-template-columns: repeat(var(--col-count), minmax(0, 1fr)); gap: var(--bay-pad-x); width: 100%; margin-top: var(--crane-headroom); /* leaves headroom for the gantry beam + cable */ } /* WM1 on portrait phones (best-effort): 5 bay columns each holding a 2-wide cube stack can't fit the 72px min cube width, so the containers overflowed the screen. Shrink the cubes (and crane headroom) so the terminal fits the viewport width. Small but legible. */ @media (orientation: portrait) and (max-width: 640px) { .cognitive-stage--container-terminal .cognitive-wharf { --wharf-width: 96vw; /* Same fit-cap as the base rule: two pakete + bay always fit one of the col-count columns so the terminal never exceeds the phone width (crane stays aligned). */ --cube-w: min(clamp(24px, 7vw, 72px), calc(var(--wharf-width) / var(--col-count) / 2 - 0.6rem)); --cube-h: clamp(15px, 4.2vw, 68px); --crane-headroom: clamp(6rem, 16vh, 12rem); --bay-pad-x: clamp(0.25rem, 0.8vw, 0.6rem); padding: clamp(0.5rem, 1.4vw, 1rem) clamp(0.35rem, 1vw, 0.7rem); } } .cognitive-stage--container-terminal .cognitive-bays-row.is-occluded .cognitive-bay-stack { visibility: hidden; } /* --- Loading truck (grid column 0): the crane fetches deliveries from it and drops removals onto it, so an add (truckâ†’container) and a remove (containerâ†’truck) read differently from a move. --- */ .cognitive-stage--container-terminal .cognitive-truck-lane { position: relative; /* Keep the loading truck (and its image) in front of the gantry crane (z-index 3) so the crane beam/trolley never paints over it. The wharf + bays-row aren't stacking contexts, so this lane's z-index competes directly with the crane's. */ z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; /* label aligns with the container labels at the bottom */ gap: 0.3rem; } .cognitive-stage--container-terminal .cognitive-truck-figure { position: relative; width: 100%; /* lift the truck up into the container-interior vertical band (tune to taste) */ margin-bottom: calc(var(--cube-h) * 0.6); transform: scaleX(-1); /* flip the truck so the cab faces out and the cargo box faces the containers */ } .cognitive-stage--container-terminal .cognitive-truck-img { display: block; width: 100%; height: auto; aspect-ratio: 512 / 297; /* reserve space before load so the lane + load-zone don't collapse */ filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.18)); transition: filter 200ms ease, transform 200ms ease; } /* Invisible measuring zone over the truck's cargo bed (the right-facing truck's box is its left â…”). The crane lowers onto this â€” its position decides where the cargo lands on the truck. */ .cognitive-stage--container-terminal .cognitive-truck-load { position: absolute; left: 7%; width: 58%; top: 8%; height: 16%; pointer-events: none; } .cognitive-stage--container-terminal .cognitive-truck-lane.is-active .cognitive-truck-img { filter: drop-shadow(0 0 2px var(--accent-secondary, #FFB56B)) drop-shadow(0 3px 5px rgba(15, 23, 42, 0.22)); transform: translateY(-1px); } .cognitive-stage--container-terminal .cognitive-bay { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; } .cognitive-stage--container-terminal .cognitive-bay-interior { position: relative; /* Height accounts for the EFFECTIVE row count after 2-column packing â€” i.e. ceil(bay-capacity / 2) â€” not the raw capacity. JS sets --bay-rows. */ height: calc((var(--cube-h) + 4px) * var(--bay-rows) + 0.5rem); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface-3, #F4EFE6); display: flex; align-items: flex-end; justify-content: center; padding: 4px; overflow: hidden; transition: border-color 200ms ease, background 200ms ease; } .cognitive-stage--container-terminal .cognitive-bay.is-active .cognitive-bay-interior { /* Active-bay highlight uses the warm secondary accent (peach) â€” on-brand and clearly distinct from the red --accent "probed" state below. */ border-color: var(--accent-secondary, #FFB56B); border-width: 2px; background: color-mix(in oklab, var(--accent-secondary, #FFB56B) 22%, var(--surface-3, #F4EFE6)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-secondary, #FFB56B) 30%, transparent); } .cognitive-stage--container-terminal .cognitive-bay.is-active .cognitive-bay-lid { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-secondary, #FFB56B) 35%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12); } .cognitive-stage--container-terminal .cognitive-bay.is-probed .cognitive-bay-interior { border-color: var(--accent); background: var(--accent-soft, color-mix(in oklab, var(--accent) 12%, var(--card))); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent); } /* 2-column packing â€” pakete fill the bay from the BOTTOM up, two per row. `flex-flow: row wrap-reverse` places the FIRST line at the bottom and wraps additional lines upward; `align-content: flex-start` (cross-start = bottom under wrap-reverse) keeps the whole stack hugging the floor. This guarantees the bottom row fills first, so an odd paket count leaves the gap in the TOP row (a box never floats above an empty cell). */ .cognitive-stage--container-terminal .cognitive-bay-stack { display: flex; flex-flow: row wrap-reverse; align-content: flex-start; justify-content: center; gap: 3px; width: 100%; height: 100%; } /* A single Paket (the small package transported by the crane and stacked in containers). Renders the wooden box image with optional colour shift via hue-rotate per cube. flex-basis 50% packs two per row; max-width caps the rendered size on wide bays. */ .cognitive-stage--container-terminal .cognitive-bay-cube { flex: 0 0 calc(50% - 3px); max-width: var(--cube-w); height: var(--cube-h); border: none; border-radius: 0; background-image: url('images/boxes/014-box-2.png'); background-size: contain; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; box-shadow: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); } /* Colour variants via hue-rotate + saturation tweaks on top of the brown base. Pakete in easy/medium levels carry varied colours; hard levels switch to all brown. */ /* Muted earthy pastels â€” colour-tinted boxes, not neon. Saturation < 1 keeps the wood tone visible underneath; small hue-rotate gives just enough variation. */ .cognitive-stage--container-terminal .cognitive-bay-cube[data-cube-color="red"] { filter: hue-rotate(-30deg) saturate(0.9) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .cognitive-stage--container-terminal .cognitive-bay-cube[data-cube-color="blue"] { filter: hue-rotate(170deg) saturate(0.85) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .cognitive-stage--container-terminal .cognitive-bay-cube[data-cube-color="green"] { filter: hue-rotate(75deg) saturate(0.8) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .cognitive-stage--container-terminal .cognitive-bay-cube[data-cube-color="yellow"] { filter: hue-rotate(15deg) saturate(1.0) brightness(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .cognitive-stage--container-terminal .cognitive-bay-cube[data-cube-color="purple"] { filter: hue-rotate(225deg) saturate(0.8) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .cognitive-stage--container-terminal .cognitive-bay-cube[data-cube-color="orange"] { filter: hue-rotate(-12deg) saturate(0.95) brightness(1.03) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } /* Brown = no hue shift; default styling above already renders the natural brown box. */ .cognitive-stage--container-terminal .cognitive-bay-cube.is-arriving { /* Container rises into place from below â€” gives the visual impression that the stack is being built UP from the bottom, container by container. */ animation: cognitive-cube-rise 320ms cubic-bezier(0.3, 0, 0.3, 1); } @keyframes cognitive-cube-rise { 0% { transform: translateY(22px); opacity: 0.0; } 60% { opacity: 1.0; } 100% { transform: translateY(0); opacity: 1.0; } } /* Lid â€” sliding cover that appears during the update phase. */ /* Brand-aligned lid: light card surface with hairline border + subtle shadow. Replaces the heavy dark wood â€” fits the rest of the site's soft palette. */ .cognitive-stage--container-terminal .cognitive-bay-lid { position: absolute; top: 0; left: 0; right: 0; /* Match the bay-interior height, now driven by --bay-rows (= ceil(capacity/2)). */ height: calc((var(--cube-h) + 4px) * var(--bay-rows) + 0.5rem); background: color-mix(in oklab, var(--border) 40%, var(--card)); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); transform: translateY(-105%); transform-origin: top center; transition: transform 320ms cubic-bezier(0.5, 0, 0.2, 1); z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--card) 70%, transparent), 0 2px 6px rgba(0, 0, 0, 0.08); } /* Drop the heavy plank pattern â€” the clean card surface IS the lid look. */ .cognitive-stage--container-terminal .cognitive-bay-lid::before { display: none; } /* Big container-number painted on the closed lid so the player can identify each container even while it's closed (Phase 2). Dark text on light card surface. */ .cognitive-stage--container-terminal .cognitive-bay-lid-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.02em; color: color-mix(in oklab, var(--text) 75%, transparent); pointer-events: none; z-index: 1; line-height: 1; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .cognitive-stage--container-terminal .cognitive-bay.is-lid-closed .cognitive-bay-lid { transform: translateY(0); } .cognitive-stage--container-terminal .cognitive-bay.is-lid-flap .cognitive-bay-lid { /* Brief peek: lid slides back up ~45% so the source/target is clearly recognisable (the top half of the bay opens). The cubes still live at the bottom, so the count stays hidden under the remaining half-lid. */ transform: translateY(-45%); transition-duration: 240ms; } /* Reveal phase (after the answer): lid retracts fully and the actual final stack becomes visible so the player can see what was inside each container. The probed container gets an additional correct/wrong tint as feedback. */ .cognitive-stage--container-terminal .cognitive-bay.is-revealed .cognitive-bay-lid { transform: translateY(-105%); transition-duration: 420ms; } .cognitive-stage--container-terminal .cognitive-bay.is-revealed .cognitive-bay-stack { visibility: visible; } .cognitive-stage--container-terminal .cognitive-bay.is-revealed-correct .cognitive-bay-interior { border-color: #16A34A; border-width: 2px; background: color-mix(in oklab, #16A34A 18%, var(--surface-3, #F4EFE6)); box-shadow: 0 0 0 3px color-mix(in oklab, #16A34A 35%, transparent); } .cognitive-stage--container-terminal .cognitive-bay.is-revealed-wrong .cognitive-bay-interior { border-color: #DC2626; border-width: 2px; background: color-mix(in oklab, #DC2626 18%, var(--surface-3, #F4EFE6)); box-shadow: 0 0 0 3px color-mix(in oklab, #DC2626 35%, transparent); } .cognitive-stage--container-terminal .cognitive-bay-label { font-size: clamp(0.78rem, 1.1vw, 0.95rem); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--muted); margin: 0; /* Don't let the label force its grid column wider than 1fr â€” clip with an ellipsis as a last resort (the JS already switches to a numeric label at high bay counts). */ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Portal-style gantry crane --- */ .cognitive-stage--container-terminal .cognitive-crane { /* Crane frames the full bays-row: legs straddle the outer bays, horizontal beam high up, trolley rides on the beam, cable pays out to descend into a bay. Horizontal insets match the wharf padding so trolley percentage positions land on bay centres. */ position: absolute; top: clamp(0.2rem, 0.6vh, 0.6rem); left: clamp(0.7rem, 1.4vw, 1.1rem); right: clamp(0.7rem, 1.4vw, 1.1rem); bottom: clamp(2.5rem, 6vh, 4rem); /* leave the bay-label row free */ pointer-events: none; z-index: 3; } /* Vertical legs anchor the gantry to the wharf floor. Steel-coloured with hairline highlights so they read as actual crane structure, not decorative borders. */ .cognitive-stage--container-terminal .cognitive-crane-leg { position: absolute; top: 0; bottom: 0; width: clamp(8px, 1vw, 12px); background: linear-gradient(90deg, #5a5a5a 0%, #3a3a3a 50%, #2a2a2a 100%); border-radius: 2px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.15); } .cognitive-stage--container-terminal .cognitive-crane-leg::before, .cognitive-stage--container-terminal .cognitive-crane-leg::after { /* Faint rivet/joint marks for industrial feel â€” small horizontal ticks every ~25%. */ content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: rgba(0, 0, 0, 0.35); } .cognitive-stage--container-terminal .cognitive-crane-leg::before { top: 25%; } .cognitive-stage--container-terminal .cognitive-crane-leg::after { top: 60%; } /* Push the legs slightly OUTSIDE the bays-row so they don't overlap the leftmost/rightmost bay borders. The negative offset puts them in the wharf's padding zone â€” they look like the gantry frame surrounding the storage yard. */ .cognitive-stage--container-terminal .cognitive-crane-leg--left { left: clamp(-14px, -1vw, -8px); } .cognitive-stage--container-terminal .cognitive-crane-leg--right { right: clamp(-14px, -1vw, -8px); } /* Horizontal beam spanning leg-to-leg â€” extends to the outside negative offsets so it visually connects the two legs. Trolley positions inside the beam use the inset cross-track for bay alignment. */ .cognitive-stage--container-terminal .cognitive-crane-beam { position: absolute; top: clamp(2px, 0.4vh, 6px); left: clamp(-14px, -1vw, -8px); right: clamp(-14px, -1vw, -8px); height: clamp(14px, 2.4vh, 20px); background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 50%, #232323 100%); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.15); } /* Subtle trusswork pattern across the beam for visual interest. */ .cognitive-stage--container-terminal .cognitive-crane-beam::before { content: ''; position: absolute; inset: 25% 4% 25% 4%; background: repeating-linear-gradient( -45deg, transparent 0 6px, rgba(0, 0, 0, 0.22) 6px 7px ); border-radius: 1px; pointer-events: none; } .cognitive-stage--container-terminal .cognitive-crane-rail { /* Thin rail at the bottom edge of the beam â€” visible groove the trolley wheels sit in. */ position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(180deg, #888 0%, #5a5a5a 100%); border-radius: 0 0 3px 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); } .cognitive-stage--container-terminal .cognitive-crane-trolley { /* The beam extends slightly outside the bays-row (to connect the legs). The trolley positions are computed relative to the INNER bays-row area, not the full beam. --beam-inset matches the negative offset of the legs so the inner area = bays-row width. CSS var --crane-bay holds the 0-indexed bay slot (can also go to -0.7 or N for off-screen). --crane-travel-ms is set by JS to match the trial's STEP_TO_TRAVEL window so the trolley always finishes its motion before the drop is scheduled. */ --bay-i: var(--crane-bay, 0); --beam-inset: clamp(8px, 1vw, 14px); position: absolute; top: 0; /* Column 0 is the truck lane, columns 1..N the containers â†’ divide by --col-count (bays + 1). */ left: calc(var(--beam-inset) + (var(--bay-i) + 0.5) * ((100% - 2 * var(--beam-inset)) / var(--col-count))); transform: translateX(-50%); transition: left var(--crane-travel-ms, 360ms) cubic-bezier(0.35, 0.05, 0.4, 1); width: clamp(30px, 4vw, 48px); } .cognitive-stage--container-terminal .cognitive-crane.is-parked .cognitive-crane-trolley { opacity: 0.35; } .cognitive-stage--container-terminal .cognitive-crane-arm { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; /* Raised by default. The descent is applied ONLY while the trolley carries .is-lowered (rules below), using the JS-measured --crane-lower-px set inline on the trolley. */ padding-top: 0; transition: padding-top var(--crane-lower-ms, 380ms) cubic-bezier(0.45, 0.05, 0.4, 1); } .cognitive-stage--container-terminal .cognitive-crane-arm::before { /* Cable from rail (anchored at top of arm) down to the grip. Short when raised; pays out (rule below) while lowering. */ content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: clamp(10px, 2vh, 18px); background: #2d2d2d; transition: height var(--crane-lower-ms, 380ms) cubic-bezier(0.45, 0.05, 0.4, 1); } /* Lowered: push the grip+cargo down and pay out the cable by the JS-measured amount. --crane-lower-px is set inline on the trolley by setCraneLowerForBay() (measured per bay so cargo lands inside the container across viewports); the var() fallback (0) keeps the crane raised until JS has measured. */ .cognitive-stage--container-terminal .cognitive-crane-trolley.is-lowered .cognitive-crane-arm { padding-top: var(--crane-lower-px, 0px); } .cognitive-stage--container-terminal .cognitive-crane-trolley.is-lowered .cognitive-crane-arm::before { height: calc(clamp(10px, 2vh, 18px) + var(--crane-lower-px, 0px)); } /* === WM1 START button â€” sits BELOW the containers, styled as a neutral chip that matches the rest of the site (mirrors the SCHIESSEN chip in IMPULSE 1). Player clicks to begin the crane phase after they're done encoding the initial paket counts. === */ .cognitive-stage--container-terminal .cognitive-wm1-start-footer { display: flex; justify-content: center; width: 100%; margin: clamp(0.8rem, 1.6vh, 1.4rem) 0 0; padding: 0; } .cognitive-stage--container-terminal .cognitive-wm1-start-btn { display: inline-block; min-width: clamp(140px, 22vw, 220px); padding: clamp(0.6rem, 1.3vh, 0.9rem) clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--card); color: var(--text); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; cursor: pointer; user-select: none; box-shadow: var(--shadow-subtle, 0 2px 6px rgba(15, 23, 42, 0.08)); transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease; } .cognitive-stage--container-terminal .cognitive-wm1-start-btn:hover, .cognitive-stage--container-terminal .cognitive-wm1-start-btn:focus-visible { border-color: var(--accent, #D01C1F); outline: 2px solid color-mix(in oklab, var(--accent, #D01C1F) 30%, transparent); outline-offset: 3px; } .cognitive-stage--container-terminal .cognitive-wm1-start-btn:active { transform: translateY(1px); } .cognitive-stage--container-terminal .cognitive-crane-grip { margin-top: clamp(14px, 2.4vh, 22px); width: clamp(44px, 5.2vw, 60px); height: clamp(7px, 1.2vh, 10px); background: linear-gradient(180deg, #6b6b6b 0%, #404040 100%); border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); position: relative; } .cognitive-stage--container-terminal .cognitive-crane-cargo { position: absolute; /* Hang BELOW the grip so the cargo is visually attached, not above the trolley. */ top: 100%; margin-top: 2px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 4; } .cognitive-stage--container-terminal .cognitive-crane-cargo.is-empty { display: none; } /* Paket being lifted by the crane. Same wooden-box image as the bay cubes so the visual identity matches; colour driven by data-cube-color via hue-rotate filter. */ .cognitive-stage--container-terminal .cognitive-crane-cube { width: var(--cube-w); height: var(--cube-h); border: none; border-radius: 0; background-image: url('images/boxes/014-box-2.png'); background-size: contain; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; box-shadow: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28)); position: relative; } .cognitive-stage--container-terminal .cognitive-crane-cube[data-cube-color="red"] { filter: hue-rotate(-30deg) saturate(0.9) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22)); } .cognitive-stage--container-terminal .cognitive-crane-cube[data-cube-color="blue"] { filter: hue-rotate(170deg) saturate(0.85) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22)); } .cognitive-stage--container-terminal .cognitive-crane-cube[data-cube-color="green"] { filter: hue-rotate(75deg) saturate(0.8) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22)); } .cognitive-stage--container-terminal .cognitive-crane-cube[data-cube-color="yellow"] { filter: hue-rotate(15deg) saturate(1.0) brightness(1.05) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22)); } .cognitive-stage--container-terminal .cognitive-crane-cube[data-cube-color="purple"] { filter: hue-rotate(225deg) saturate(0.8) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22)); } .cognitive-stage--container-terminal .cognitive-crane-cube[data-cube-color="orange"] { filter: hue-rotate(-12deg) saturate(0.95) brightness(1.03) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22)); } .cognitive-stage--container-terminal .cognitive-crane-bulk-badge { position: absolute; top: -0.6rem; right: -1.0rem; min-width: 1.8rem; height: 1.8rem; padding: 0 0.4rem; border-radius: 999px; background: var(--accent, #D01C1F); color: #fff; font-size: 1rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28); z-index: 5; } /* --- Caption + probe --- */ .cognitive-stage--container-terminal .cognitive-gantry-caption { margin-top: 0.6rem; padding: 0.25rem 0.8rem; font-weight: 600; font-size: clamp(0.85rem, 1.3vw, 1rem); color: var(--text); text-align: center; } .cognitive-stage--container-terminal .cognitive-container-probe { display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 1.4vh, 1.1rem); width: min(94vw, 880px); padding: clamp(0.6rem, 1.2vw, 0.9rem); } .cognitive-stage--container-terminal .cognitive-container-probe-question { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; text-align: center; color: var(--text); } .cognitive-stage--container-terminal .cognitive-container-option-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.45rem, 1vw, 0.8rem); } /* Numeric count chips â€” simple white cards with a saturated digit. */ .cognitive-stage--container-terminal .cognitive-container-count-chip { display: grid; place-items: center; min-width: clamp(48px, 6vw, 64px); height: clamp(48px, 6vw, 64px); padding: 0 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--card); color: var(--text); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; cursor: pointer; user-select: none; transition: transform 120ms ease, border-color 160ms ease, background 160ms ease; } .cognitive-stage--container-terminal .cognitive-container-count-chip:hover, .cognitive-stage--container-terminal .cognitive-container-count-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .cognitive-stage--container-terminal .cognitive-container-count-chip.is-selected { outline: 2px solid var(--accent); outline-offset: 3px; background: var(--accent-soft, color-mix(in oklab, var(--accent) 14%, var(--card))); } /* === /WM 1 Container-Terminal v2 === */ .cognitive-asset-shell { position: relative; width: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); height: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); display: grid; place-items: center; border-radius: 12px; padding: 10%; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); } .cognitive-asset-shell--plain { padding: 0; background: transparent; box-shadow: none; } .cognitive-asset-img, .cognitive-arrow-img, .cognitive-animal-img, .cognitive-go-stop-img, .cognitive-grid-asset, .cognitive-card-img, .cognitive-rotation-img, .cognitive-flanker-img, .cognitive-stop-signal-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .cognitive-asset-label { position: absolute; inset: auto 8% 8%; display: grid; place-items: center; min-height: 28%; border-radius: 8px; background: rgba(17, 24, 39, 0.82); color: #ffffff; font-size: clamp(0.78rem, 1vw, 1.05rem); font-weight: 900; } .cognitive-arrow-img { width: var(--cognitive-stimulus-size, clamp(90px, 12vw, 180px)); height: var(--cognitive-stimulus-size, clamp(90px, 12vw, 180px)); } .cognitive-stage--leftright .cognitive-arrow-img, .cognitive-stage--stopsignal .cognitive-arrow-img { width: clamp(140px, calc(var(--cognitive-stimulus-size, 100px) * 2.2), 280px); height: clamp(140px, calc(var(--cognitive-stimulus-size, 100px) * 2.2), 280px); } /* SELECT 2 themed direction stimuli (animals/cars) reuse the arrow slot but are richer silhouettes; give them a touch more room. object-fit: contain (inherited) preserves their varied aspect ratios. */ .cognitive-stage--leftright .cognitive-arrow-img.cognitive-direction-img--themed { width: clamp(150px, calc(var(--cognitive-stimulus-size, 100px) * 2.4), 300px); height: clamp(150px, calc(var(--cognitive-stimulus-size, 100px) * 2.4), 300px); } .cognitive-animal-img { width: clamp(120px, 18vw, 260px); height: clamp(120px, 18vw, 260px); filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.16)); } .cognitive-go-stop-img { width: clamp(112px, calc(var(--cognitive-stimulus-size, 100px) * 1.7), 240px); height: clamp(112px, calc(var(--cognitive-stimulus-size, 100px) * 1.7), 240px); filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.18)); } .cognitive-animal-target { min-height: clamp(150px, 22vw, 280px); } .cognitive-go-stop-target { min-height: clamp(145px, 22vw, 280px); } .cognitive-prospect-target { min-height: clamp(320px, 44vw, 480px); } /* ===== PROSPECT "Weichensteller" â€” TOP-DOWN Y junction (rail.png tracks + CSS trains) ===== */ .cognitive-prospect-railway { position: relative; /* Viewport-based width (NOT 100%): the arms/stem/train are absolutely positioned, so in the centred flex stage a `100%` width collapses to 0 â€” which, with overflow:hidden, would clip the whole scene away. A concrete width gives overflow:hidden a real box to clip (top only). */ width: min(440px, 92vw); --rail-h: clamp(320px, 42vw, 470px); /* longer arms â€” tracks extend up toward the header */ height: var(--rail-h); margin: 0 auto; overflow: hidden; /* train hidden above the visible track â†’ emerges from under the instruction/Verlassen header instead of flashing over it */ --rail-w: clamp(34px, 7vw, 50px); --arm-angle: 34deg; --junction-y: 48%; } /* Track segments: rail.png tiled along each segment's length (rails run lengthwise). */ .cognitive-rail-arm, .cognitive-rail-stem { position: absolute; left: 50%; width: var(--rail-w); background-image: url(images/prospect/rail.png); background-size: 100% auto; background-repeat: repeat-y; background-position: center top; border-radius: 6px; } /* Two angled arms from the top down to the junction (pivot at their lower/junction end). */ .cognitive-rail-arm { /* The arm pivots about its BOTTOM (the junction); a rotated arm of height = --junction-y would end ~junction-y*(1-cos34) below the railway top, leaving a railless gap where the train "floats". Make it longer (height/cos34) and shift its top up so the bottom stays at the junction and the rotated TOP reaches the railway top (the clip line). 0.829 = cos(34deg) = the --arm-angle. */ height: calc(var(--junction-y) / 0.829); top: calc(var(--junction-y) - var(--junction-y) / 0.829); transform-origin: bottom center; } .cognitive-rail-arm.is-left { transform: translateX(-50%) rotate(calc(-1 * var(--arm-angle))); } .cognitive-rail-arm.is-right { transform: translateX(-50%) rotate(var(--arm-angle)); } /* The centre stem from the junction straight down. */ .cognitive-rail-stem { top: var(--junction-y); height: calc(100% - var(--junction-y)); transform: translateX(-50%); } /* Small switch indicator at the junction (replaces the old big grey hub). Tints + points to the set track. */ .cognitive-rail-junction { position: absolute; left: 50%; top: var(--junction-y); transform: translate(-50%, -50%); width: clamp(14px, 3vw, 20px); height: clamp(14px, 3vw, 20px); border-radius: 999px; background: #cbd5e1; box-shadow: inset 0 0 0 1.5px rgba(71, 85, 105, 0.55); z-index: 3; transition: background-color 140ms ease; } /* Direction chevron (a small white triangle) â€” hidden until a track is set. */ .cognitive-rail-junction::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; /* points RIGHT by default */ border-color: transparent transparent transparent #ffffff; opacity: 0; transform: translate(-50%, -50%); transition: opacity 140ms ease; } .cognitive-prospect-railway[data-switch="left"] .cognitive-rail-junction, .cognitive-prospect-railway[data-switch="right"] .cognitive-rail-junction { background: #38bdf8; box-shadow: inset 0 0 0 1.5px rgba(2, 132, 199, 0.7); } .cognitive-prospect-railway[data-switch="right"] .cognitive-rail-junction::after { opacity: 1; transform: translate(-28%, -50%); } .cognitive-prospect-railway[data-switch="left"] .cognitive-rail-junction::after { opacity: 1; transform: translate(-72%, -50%) scaleX(-1); } /* Train = 3 rounded-square cars, each absolutely positioned + transformed per-frame by JS (positionProspectCars): the cars articulate independently down the arriving arm and then one-by-one straight down the centre stem. The wrapper only carries the colour (--car) + drop-shadow. */ .cognitive-train { --car: #14b8a6; --car-trim: #0f766e; --pcar: calc(var(--rail-h) * 0.1); /* per-car size; scales with the scene (live + demo) */ position: absolute; inset: 0; /* fills the railway; JS positions each car along the Y route */ z-index: 4; pointer-events: none; filter: drop-shadow(0 4px 7px rgba(15, 23, 42, 0.28)); } /* Wrong / timeout: tint the cars red as the train drives back up the arm. */ .cognitive-prospect-railway.is-reversing .cognitive-train-car { border-color: #b91c1c; box-shadow: inset 0 0 0 2px rgba(185, 28, 28, 0.45); } /* Each car is absolutely positioned; its translate()+rotate() transform is set per-frame by JS (positionProspectCars) so the cars articulate independently through the Y switch. */ .cognitive-train-car { position: absolute; left: 0; top: 0; width: var(--pcar); height: var(--pcar); border-radius: 8px; background: linear-gradient(180deg, color-mix(in oklab, var(--car) 84%, #fff), var(--car) 62%, var(--car-trim)); border: 2px solid var(--car-trim); transform-origin: center; } /* Rails on the side of each car (bogies). */ .cognitive-train-car::before { content: ''; position: absolute; left: -3px; right: -3px; top: 22%; bottom: 22%; border-left: 3px solid #475569; border-right: 3px solid #475569; } /* Loco front window. */ .cognitive-train-car.is-loco::after { content: ''; position: absolute; left: 24%; top: 16%; width: 52%; height: 32%; border-radius: 3px; background: #d6f0fb; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25); } /* Cue colour: neutral teal vs. the rare red Express. */ .cognitive-prospect-railway[data-cue="express"] .cognitive-train { --car: #D01C1F; --car-trim: #991b1b; } /* Salience: the Express grows less conspicuous at higher levels (harder to notice). */ .cognitive-prospect-railway[data-salience="spÃ¼rbar"][data-cue="express"] .cognitive-train { filter: saturate(0.82) drop-shadow(0 4px 7px rgba(15, 23, 42, 0.24)); } .cognitive-prospect-railway[data-salience="dezent"][data-cue="express"] .cognitive-train { filter: saturate(0.55) drop-shadow(0 4px 7px rgba(15, 23, 42, 0.2)); } /* Small demo box: shrink the junction scene to fit (keep --rail-h in sync so the transform math matches). NOTE: width must be CONCRETE (container-relative + px cap), NOT `min(100%, â€¦)`. The arms/stem/train are absolutely positioned so the railway has no intrinsic width; in the centred flex stage `100%` collapses to 0 (same trap the live rule at ~15412 documents), and with overflow:hidden that clipped the whole demo scene away â€” the "empty demo". 88cqw resolves against the demo gamearea (container-type:size). */ .cognitive-demo-gamearea .cognitive-prospect-railway { --rail-h: clamp(150px, 42cqh, 240px); height: var(--rail-h); width: min(88cqw, 230px); } .cognitive-prospect-display { display: grid; justify-items: center; align-items: center; gap: clamp(0.55rem, 1.4vw, 0.9rem); } .cognitive-prospect-main { display: grid; justify-items: center; gap: 0.35rem; } .cognitive-prospect-arrow { object-fit: contain; display: block; filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.16)); } .cognitive-prospect-arrow.is-prospect-standard { width: clamp(84px, 13vw, 170px); height: clamp(84px, 13vw, 170px); } .cognitive-prospect-arrow.is-prospect-special-cue { width: clamp(100px, 15vw, 196px); height: clamp(100px, 15vw, 196px); } .cognitive-prospect-main-label { color: var(--muted); font-size: clamp(0.82rem, 1vw, 1rem); font-weight: 900; } .cognitive-prospect-display.has-special-cue .cognitive-prospect-main-label { color: #dc2626; } .cognitive-prospect-special { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 62px; padding: 0.45rem 0.75rem; border: 2px solid #dc2626; border-radius: 8px; background: color-mix(in oklab, #dc2626 12%, var(--card)); color: var(--text); font-size: clamp(0.9rem, 1.1vw, 1.08rem); font-weight: 900; box-shadow: 0 12px 24px rgba(220, 38, 38, 0.14); } .cognitive-prospect-special-img { width: clamp(48px, 7vw, 76px); height: clamp(48px, 7vw, 76px); object-fit: contain; display: block; } .cognitive-stage--prospective .cognitive-rule-guide { width: min(720px, 94vw); } .cognitive-stage--prospective .cognitive-rule-guide-item { min-width: min(260px, 92vw); justify-content: flex-start; } .cognitive-stage--prospective .cognitive-rule-guide-item.is-active { border-color: color-mix(in oklab, #dc2626 56%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); } .cognitive-stage--prospective .cognitive-response-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(32rem, 92vw); gap: 0.7rem; } .cognitive-stage--prospective .cognitive-response-btn { min-width: 0; } .cognitive-response-btn.is-prospect-special { grid-column: 1 / -1; justify-self: center; min-width: min(17rem, 100%); border-color: color-mix(in oklab, #dc2626 52%, var(--border)); background: color-mix(in oklab, #dc2626 10%, var(--card)); } .cognitive-flanker-assets { display: flex; align-items: center; justify-content: center; gap: clamp(0.25rem, 0.75vw, 0.7rem); } .cognitive-flanker-img { width: clamp(44px, 6vw, 86px); height: clamp(44px, 6vw, 86px); opacity: 0.72; } .cognitive-flanker-img.is-center { opacity: 1; transform-origin: center; scale: 1.16; } /* INTERFERE 1 birds are detailed head profiles â€” a touch larger than the thin arrows so the facing direction reads clearly. Flankers stay dimmed (0.72). */ .cognitive-flanker-img.is-bird { width: clamp(54px, 7vw, 104px); height: clamp(54px, 7vw, 104px); } /* INTERFERE 1 fish are landscape-oriented profiles; object-fit:contain keeps their aspect ratio inside a square box, so a slightly larger box keeps them as legible as the birds. Flankers stay dimmed (0.72). */ .cognitive-flanker-img.is-fish { width: clamp(58px, 7.6vw, 116px); height: clamp(58px, 7.6vw, 116px); } .cognitive-shape { width: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); height: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); display: grid; place-items: center; color: white; font-size: calc(var(--cognitive-stimulus-size, 100px) * 0.24); } .cognitive-shape--circle { border-radius: 50%; } .cognitive-shape--square { border-radius: 8px; } .cognitive-shape--triangle { width: 0; height: 0; border-left: calc(var(--cognitive-stimulus-size, 100px) * 0.52) solid transparent; border-right: calc(var(--cognitive-stimulus-size, 100px) * 0.52) solid transparent; border-bottom: calc(var(--cognitive-stimulus-size, 100px) * 0.9) solid #2563eb; background: transparent !important; } .cognitive-shape--diamond { transform: rotate(45deg); border-radius: 8px; } .cognitive-color--blue { background: #2563eb; } .cognitive-color--orange { background: #f97316; } .cognitive-color--green { background: #16a34a; } .cognitive-color--purple { background: #7c3aed; } .cognitive-color--gray { background: #64748b; } .cognitive-arrow, .cognitive-flanker, .cognitive-letter, .cognitive-word, .cognitive-sound { font-size: calc(var(--cognitive-stimulus-size, 100px) * 1.15); line-height: 1; } .cognitive-stage--nback { --nback-card-w: clamp(72px, 11vw, 132px); --nback-card-h: clamp(96px, 14vw, 170px); --nback-card-gap: clamp(8px, 1.4vw, 18px); --nback-zone-gap: clamp(18px, 3vw, 38px); --nback-card-radius: 14px; --nback-frame-color: #2563eb; } .cognitive-nback-strip { display: flex; align-items: center; justify-content: center; gap: var(--nback-zone-gap); perspective: 1400px; padding: clamp(10px, 2vh, 22px) clamp(8px, 2vw, 24px); min-height: calc(var(--nback-card-h) + 24px); } .cognitive-nback-history, .cognitive-nback-deck { display: flex; align-items: center; gap: var(--nback-card-gap); } .cognitive-nback-history { justify-content: flex-end; min-height: var(--nback-card-h); } .cognitive-nback-deck { position: relative; flex-shrink: 0; width: calc(var(--nback-card-w) + 14px); height: var(--nback-card-h); } .cognitive-nback-deck .cognitive-nback-card { position: absolute; inset: 0; margin: 0; } .cognitive-nback-deck .cognitive-nback-card:nth-child(1) { transform: translate(0, 0) scale(1); z-index: 2; } .cognitive-nback-deck .cognitive-nback-card:nth-child(2) { transform: translate(7px, 5px) scale(0.95); filter: brightness(0.92); z-index: 1; } .cognitive-nback-card { width: var(--nback-card-w); height: var(--nback-card-h); position: relative; border-radius: var(--nback-card-radius); transition: opacity 260ms ease, transform 360ms ease; cursor: default; flex-shrink: 0; } .cognitive-nback-card.is-active { cursor: pointer; } .cognitive-nback-card.is-incoming { transform: translateX(calc(var(--nback-card-w) + var(--nback-zone-gap))); } .cognitive-nback-card.is-leaving { opacity: 0; transform: translateX(-32px) scale(0.92); pointer-events: none; } .cognitive-nback-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 460ms cubic-bezier(0.45, 0.05, 0.25, 1); transform: rotateY(0deg); } .cognitive-nback-card.is-flipped .cognitive-nback-card-inner, .cognitive-nback-card.is-upcoming .cognitive-nback-card-inner { transform: rotateY(180deg); } .cognitive-nback-card-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--nback-card-radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } .cognitive-nback-card-face--front { background: var(--card, #ffffff); border: 1px solid color-mix(in oklab, var(--border, #e2e8f0) 70%, transparent); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); padding: clamp(8px, 1.4vw, 14px); } .cognitive-nback-card-face--back { transform: rotateY(180deg); background: linear-gradient(135deg, color-mix(in oklab, var(--primary, #2563eb) 8%, var(--card, #f8fafc)) 0%, color-mix(in oklab, var(--primary, #2563eb) 14%, var(--card, #f8fafc)) 100%); border: 1px solid color-mix(in oklab, var(--border, #e2e8f0) 80%, transparent); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); } .cognitive-nback-card-face--back::after { content: ""; position: absolute; inset: 14%; background-image: url("images/logo-problem-solving.png"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.08; filter: grayscale(1) contrast(0.7); pointer-events: none; } .cognitive-nback-letter { font-size: calc(var(--nback-card-h) * 0.55); font-weight: 800; line-height: 1; color: var(--text, #0f172a); } .cognitive-nback-card-face--front .cognitive-asset-shell { width: 80%; height: 80%; box-shadow: none; padding: 0; } .cognitive-nback-card-face--front .cognitive-asset-img { width: 100%; height: 100%; object-fit: contain; } .cognitive-nback-card.is-nback-target { outline: 3px solid var(--nback-frame-color); outline-offset: 4px; box-shadow: 0 0 0 8px color-mix(in oklab, var(--nback-frame-color) 16%, transparent), 0 12px 28px rgba(15, 23, 42, 0.18); transition: outline-color 220ms ease, box-shadow 220ms ease, opacity 260ms ease, transform 360ms ease; } .cognitive-stage--nback.is-trial-error .cognitive-nback-card.is-nback-target .cognitive-nback-card-inner { transform: rotateY(0deg); } .cognitive-stage--nback.is-trial-correct .cognitive-nback-card.is-nback-target { outline-color: #16a34a; box-shadow: 0 0 0 8px color-mix(in oklab, #16a34a 18%, transparent), 0 12px 28px rgba(15, 23, 42, 0.18); animation: nback-target-correct-pulse 620ms ease-out 1; } .cognitive-stage--nback.is-trial-error .cognitive-nback-card.is-nback-target { outline-color: #dc2626; box-shadow: 0 0 0 8px color-mix(in oklab, #dc2626 18%, transparent), 0 12px 28px rgba(15, 23, 42, 0.18); } @keyframes nback-target-correct-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 8px color-mix(in oklab, #16a34a 18%, transparent), 0 12px 28px rgba(15, 23, 42, 0.18); } 45% { transform: scale(1.05); box-shadow: 0 0 0 18px color-mix(in oklab, #16a34a 36%, transparent), 0 14px 32px rgba(15, 23, 42, 0.22); } 100% { transform: scale(1); box-shadow: 0 0 0 8px color-mix(in oklab, #16a34a 18%, transparent), 0 12px 28px rgba(15, 23, 42, 0.18); } } .cognitive-nback-card.is-nback-target::before { content: "Vergleichen â†’"; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0.22rem 0.6rem; border-radius: 999px; background: color-mix(in oklab, var(--nback-frame-color) 18%, var(--card, #ffffff)); color: var(--nback-frame-color); font-size: clamp(0.7rem, 1.4cqw, 0.95rem); font-weight: 700; letter-spacing: 0.02em; pointer-events: none; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); z-index: 5; } .cognitive-stage--nback.is-trial-correct .cognitive-nback-card.is-nback-target::before { background: color-mix(in oklab, #16a34a 18%, var(--card, #ffffff)); color: #15803d; } .cognitive-stage--nback.is-trial-error .cognitive-nback-card.is-nback-target::before { background: color-mix(in oklab, #dc2626 18%, var(--card, #ffffff)); color: #b91c1c; } @keyframes nback-pair-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .cognitive-nback-strip.is-pair-cueing .cognitive-nback-card.is-nback-target, .cognitive-nback-strip.is-pair-cueing .cognitive-nback-card.is-active { animation: nback-pair-pulse 480ms ease-in-out 1; } .cognitive-stroop-comparison { align-content: center; justify-content: center; gap: clamp(0.85rem, 2.4vw, 1.25rem); text-align: center; } /* "Plakatwand": the dark neon sign is mounted ON a billboard. The PNG (peach frame, grey lamps + post) is the background; the dark sign is absolutely positioned to FILL the white inner display panel so the whole thing reads as an illuminated billboard. Respond to the glow colour. */ .cognitive-stroop-billboard { position: relative; /* ~86vw on phones, capped at 360px so it never dwarfs a wide desktop game area. */ width: min(360px, 86vw); aspect-ratio: 1 / 1; /* matches the 512Ã—512 source â€” lamps + post never cropped */ background: url('images/interfere2/billboard.png') center / contain no-repeat; container-type: inline-size; /* makes this the containing block + the cqw reference */ flex: 0 0 auto; /* never let a flex parent stretch it */ } .cognitive-stroop-sign { /* Fill the billboard's white display rectangle (pixel-measured from the art: left 6.25%, right 93.6%, top 12.5%, bottom 49.8%). */ position: absolute; left: 6.25%; right: 6.4%; top: 12.5%; bottom: 50.2%; display: flex; align-items: center; justify-content: center; padding: 0 4%; border-radius: 6px; /* small â€” a large radius would expose the white corners */ /* Same dusk-slate gradient as before; keeps the neon glow popping on the lit panel. */ background: radial-gradient(ellipse at center, #46505f 0%, #2a313d 82%); /* Thin DARK border + inner-only shadow so no light line/halo is drawn on the peach frame. */ border: 1px solid rgba(15, 23, 42, 0.45); box-shadow: inset 0 0 16px rgba(15, 23, 42, 0.45); overflow: hidden; /* clip glow/word to the lit panel rectangle */ } .cognitive-stroop-word { /* Neon-tube display font; falls back to the app font if Monoton is unavailable. */ font-family: 'Monoton', 'Montserrat', system-ui, sans-serif; font-weight: 400; /* Monoton ships a single weight â€” avoid faux-bold */ letter-spacing: 0.04em; /* slightly tighter than before so the 7-char "VIOLETT" fits */ line-height: 1.05; /* Panel-relative size: the billboard is the query container (container-type: inline-size), so 1cqw = 1% of the billboard width. 13cqw keeps even "VIOLETT" within the lit panel; the clamp floors it for ~320px phones and caps it on desktop. Overrides .cognitive-word's calc() size. */ font-size: clamp(1.05rem, 13cqw, 2.6rem); white-space: nowrap; /* Multi-layer coloured glow: the bright halo carries the hue so the colour reads clearly even through the thin neon-tube strokes (the brighter on-sign ink colour helps too). */ text-shadow: 0 0 0.08em currentColor, 0 0 0.22em currentColor, 0 0 0.5em currentColor, 0 0 0.95em currentColor; } /* On the small DEMO/preview mock screens (start-card visual, instruction panel, etc.) the full-size billboard (width: min(360px,86vw), square, NO height cap) overflowed downward onto the colour buttons. Scale it to the demo container â€” `.cognitive-demo-screen` has container-type:size, so cqw/cqh reference it here â€” and add a HEIGHT cap (60cqh) so it never exceeds the short mock screen. The public info-page demo keeps its own tighter override (higher specificity wins there). */ .cognitive-demo-screen .cognitive-stroop-billboard { width: min(86cqw, 360px, 60cqh); } .cognitive-demo-screen .cognitive-stroop-word { /* Lower the floor/cap (base is clamp(1.05rem, 13cqw, 2.6rem), sized for the full-screen game) so the word stays small on the shrunken demo billboard; mirrors the proven info-page demo override. The lit sign has overflow:hidden, so any residual on the smallest billboards is clipped to the sign rather than spilling outside the billboard. */ font-size: clamp(0.4rem, 13cqw, 1.5rem); } /* Response buttons stay NEUTRAL â€” only the colour NAME as text, no colour fill â€” so the player must name the glow colour (resisting the word) rather than just match a swatch by sight, which would bypass the interference demand. */ .cognitive-response-btn.is-stroop-choice { min-width: clamp(92px, 17vw, 150px); font-weight: 800; } .cognitive-rule-cue, .cognitive-correction, .cognitive-stop-label { padding: 0.4rem 0.8rem; border-radius: 8px; background: #111827; color: #ffffff; font-weight: 800; } .cognitive-stop-label { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); background: #dc2626; z-index: 15; } .cognitive-stop-asset { padding: 0; border-radius: 16px; background: transparent; box-shadow: none; } .cognitive-stop-signal-img { width: clamp(86px, calc(var(--cognitive-stimulus-size, 100px) * 1.25), 170px); height: clamp(86px, calc(var(--cognitive-stimulus-size, 100px) * 1.25), 170px); filter: drop-shadow(0 12px 20px rgba(220, 38, 38, 0.32)); } .cognitive-stage--impulse2 .cognitive-arrow.cognitive-impulse2 { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; /* Tall enough to contain the absolutely-positioned hammer's full swing arc so it never overflows into the Links/Rechts response row below. */ min-height: clamp(340px, 50vh, 460px); } .cognitive-stage--impulse2 .cognitive-impulse2-hammer { /* Absolutely positioned + out of flow, so removing the hammer between trials does NOT change the arrow container's height â€” the Links/Rechts response buttons stay put. */ position: absolute; left: 50%; top: 50%; width: clamp(220px, calc(var(--cognitive-stimulus-size, 100px) * 3.6), 380px); height: auto; /* Diagonal gavel art (head upper-right at 0Â°). Rest -45Â° = a centred, upright hammer, head raised. The swing pivots about the centre but ALSO translates toward the side button, so the head visibly arcs down-and-out and lands on the button (it briefly leaves centre during the swing â€” acceptable). */ transform-origin: 50% 50%; transform: translate(-50%, -50%) rotate(-45deg); transition: transform 200ms cubic-bezier(.4, .05, .35, 1); z-index: 2; } /* Left-trials render the hammer mirrored so the left swing mirrors the right. */ .cognitive-stage--impulse2 .cognitive-impulse2-hammer.is-mirror { transform: translate(-50%, -50%) scaleX(-1) rotate(-45deg); } /* Swing: a real hammer strike â€” wind up, swing the head down-and-out onto the side button, then settle on it. */ .cognitive-stage--impulse2 .cognitive-impulse2-hammer.is-swing-right { animation: impulse2-strike-right 320ms cubic-bezier(.4, .05, .35, 1) forwards; } .cognitive-stage--impulse2 .cognitive-impulse2-hammer.is-mirror.is-swing-left { animation: impulse2-strike-left 320ms cubic-bezier(.4, .05, .35, 1) forwards; } /* Fallback (wrong-direction press on a right-trial hammer): static head-left. */ .cognitive-stage--impulse2 .cognitive-impulse2-hammer.is-swing-left { transform: translate(-50%, -50%) rotate(-135deg); } /* Right strike: rest (head up, centred) -> cock back -> arc down-right onto the button (translate carries the head out to the lowered side button) -> settle. */ @keyframes impulse2-strike-right { 0% { transform: translate(-50%, -50%) rotate(-45deg); } /* raised, ready, centred */ 18% { transform: translate(-57%, -53%) rotate(-68deg); } /* wind up + lift */ 58% { transform: translate(-21%, -23%) rotate(108deg); } /* strike + slight overshoot */ 100% { transform: translate(-24%, -26%) rotate(100deg); } /* settle on the lowered button */ } @keyframes impulse2-strike-left { 0% { transform: translate(-50%, -50%) scaleX(-1) rotate(-45deg); } 18% { transform: translate(-43%, -53%) scaleX(-1) rotate(-68deg); } 58% { transform: translate(-79%, -23%) scaleX(-1) rotate(108deg); } 100% { transform: translate(-76%, -26%) scaleX(-1) rotate(100deg); } } .cognitive-stage--impulse2 .cognitive-impulse2-button { position: absolute; top: 50%; left: 50%; /* Anchor at the stage centre, then push the button OUT by --side-x and DOWN by --impulse2-drop so it sits exactly where the swung hammer head lands (down-and-out). px-based + stimulus-size-scaled so it tracks the hammer at every difficulty. Each side sets --side-x; every transform state keeps both offsets. */ /* Reach = lateral offset of the ghost/bomb from centre. Pulled in from 2.2 â†’ 1.85 so the ghost sits closer to the (resting, upright) hammer instead of stranded out near the swing landing point. The strike animation's head still overlaps it. */ --impulse2-reach: calc(var(--cognitive-stimulus-size, 80px) * 1.85); --impulse2-drop: calc(var(--cognitive-stimulus-size, 80px) * 1.35); --side-x: 0px; /* Ghost faces left by default; right-side spawns flip it (set on --right below). */ --ghost-flip: 1; /* Sized up so the ghost/bomb reads clearly next to the large hammer (was ~88px). */ width: clamp(120px, calc(var(--cognitive-stimulus-size, 100px) * 2), 220px); height: auto; transform: translate(calc(-50% + var(--side-x)), calc(-50% + var(--impulse2-drop))) scaleX(var(--ghost-flip)); transition: transform 160ms ease-out, filter 160ms ease-out; z-index: 1; } .cognitive-stage--impulse2 .cognitive-impulse2-button--left { --side-x: calc(-1 * var(--impulse2-reach)); } .cognitive-stage--impulse2 .cognitive-impulse2-button--right { --side-x: var(--impulse2-reach); --ghost-flip: -1; } /* IMPULSE 2 on narrow phones: the side ghost buttons sit at Â±(stimulusÃ—2.2) from centre PLUS their own half-width, which pushed them off both screen edges. Scale the stimulus down (drives the reach) and cap the hammer/ghost widths so the whole scene (hammer + both side ghosts) fits the viewport width. */ @media (max-width: 640px) { .cognitive-stage--impulse2 { --cognitive-stimulus-size: clamp(42px, 11vw, 72px); } .cognitive-stage--impulse2 .cognitive-impulse2-hammer { width: clamp(150px, 46vw, 380px); } .cognitive-stage--impulse2 .cognitive-impulse2-button { width: clamp(84px, 24vw, 160px); } } .cognitive-stage--impulse2 .cognitive-impulse2-button.is-bomb { transform: translate(calc(-50% + var(--side-x)), calc(-50% + var(--impulse2-drop))) scale(1.08); filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.55)); } .cognitive-stage--impulse2 .cognitive-impulse2-button.is-hit { transform: translate(calc(-50% + var(--side-x)), calc(-54% + var(--impulse2-drop))) scale(0.88) scaleX(var(--ghost-flip)); filter: brightness(1.35) drop-shadow(0 0 16px rgba(34, 197, 94, 0.55)); } @keyframes impulse2-explode { 0% { transform: translate(calc(-50% + var(--side-x)), calc(-50% + var(--impulse2-drop))) scale(1.08); } 20% { transform: translate(calc(-50% + var(--side-x)), calc(-50% + var(--impulse2-drop))) scale(1.40) rotate(-6deg); filter: drop-shadow(0 0 22px rgba(220, 38, 38, 0.95)) brightness(1.3); } 60% { transform: translate(calc(-50% + var(--side-x)), calc(-50% + var(--impulse2-drop))) scale(1.20) rotate(4deg); } 100% { transform: translate(calc(-50% + var(--side-x)), calc(-50% + var(--impulse2-drop))) scale(1.05); filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.55)); } } .cognitive-stage--impulse2 .cognitive-impulse2-button.has-exploded { animation: impulse2-explode 260ms ease-out forwards; } /* IMPULSE 2 live streak badge â€” consecutive "got it" trials. Rendered as a normal-flow chip appended AFTER the Links/Rechts response row, so the stage's flex column centres it BELOW the buttons (previously top-centred, where it collided with the mode header). */ .cognitive-stage--impulse2 .cognitive-impulse2-streak { z-index: 6; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.42rem 0.95rem; border: 2px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font: 800 clamp(0.9rem, 1.7vw, 1.15rem)/1 'Montserrat', Arial, sans-serif; letter-spacing: 0.02em; box-shadow: var(--shadow-subtle, 0 2px 6px rgba(15, 23, 42, 0.1)); pointer-events: none; } .cognitive-stage--impulse2 .cognitive-impulse2-streak.is-active { border-color: var(--accent); color: var(--accent); } /* The prep-modal demo runs no real trials, so the badge would be a static "Serie: 0". Hide it. */ .cognitive-demo-gamearea .cognitive-impulse2-streak { display: none; } .cognitive-response-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; } /* On PORTRAIT phones, vertically CENTRE the stimulus AND drop the reaction buttons (Links/Rechts, Fertig, colour choices, â€¦) to the bottom of the screen for comfortable thumb reach. `margin-block:auto` on the stimulus container absorbs the free space above AND below it (so it centres), which leaves the response row at the bottom of the full-height stage flex column â€” and, unlike a `margin-top:auto` on the row, the stimulus is NOT top-anchored. Everything stays in flow, so no fixed-position overlap. */ @media (orientation: portrait) and (max-width: 640px) { .cognitive-stage > .cognitive-target, .cognitive-stage > .divide-drive-scene, .cognitive-stage > .cognitive-prospect-target { margin-block: auto; } .cognitive-response-row { margin-top: 0; margin-bottom: calc(env(safe-area-inset-bottom) + clamp(0.6rem, 2.5vh, 1.2rem)); } /* Logic 2 builds its stimulus as .cognitive-logic-around (+ an optional matrix-rule label) rather than a .cognitive-target, so the systemic rule above misses it and the Â«FertigÂ» row ends up centred with the grid instead of at the bottom. Give the grid auto margins so it centres in the space above and the response row falls to the bottom like every other mode. When the matrix-rule label is present it takes the top auto-margin so it stays attached to the grid (no gap between label and matrix). */ .cognitive-stage--logic-pattern-matrix > .cognitive-logic-around { margin-top: auto; margin-bottom: auto; } .cognitive-stage--logic-pattern-matrix > .cognitive-logic-matrix-rule { margin-top: auto; } .cognitive-stage--logic-pattern-matrix > .cognitive-logic-matrix-rule ~ .cognitive-logic-around { margin-top: 0; } } .cognitive-response-btn, .cognitive-grid-cell { display: inline-flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09); } /* SPEED scanning grid (6Ã—6) â€” give each tile a subtle "frame" so the symbols sit inside a frame rather than floating. Scoped to --six so the stm2/space2 grids that share .cognitive-grid-cell are untouched. Only padding/radius/ background here â€” the resting/ready box-shadow stays owned by the .cognitive-stage.is-input-ready rule so the clickable cue is preserved. */ .cognitive-grid--six .cognitive-grid-cell:not(.is-empty) { padding: 0.3rem; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 247, 251, 0.9)), var(--card); } .cognitive-response-btn { min-width: 120px; min-height: 48px; padding: 0.7rem 1rem; } .cognitive-response-btn.is-left-right-response { min-width: clamp(150px, 15vw, 220px); min-height: clamp(62px, 7vh, 82px); padding: 0.9rem 1.25rem; font-size: clamp(1.05rem, 1.2vw, 1.22rem); } /* SELECT 2 themed direction buttons: representative image (facing the button's direction) stacked over the direction word. */ .cognitive-response-btn.cognitive-direction-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: clamp(96px, 12vh, 134px); padding: 0.6rem 1.1rem; } .cognitive-direction-btn-img { width: clamp(56px, 7vw, 92px); height: clamp(56px, 7vw, 92px); object-fit: contain; pointer-events: none; } .cognitive-direction-btn-label { font-size: clamp(0.95rem, 1.1vw, 1.15rem); font-weight: 800; line-height: 1; } /* When a Space (distractor) button is present, lay the row out as Links/Rechts on the top line and the space button spanning a second line below them. */ .cognitive-response-row:has(.cognitive-direction-btn--space) { display: grid; grid-template-columns: auto auto; gap: clamp(0.6rem, 1.2vw, 1rem); justify-content: center; justify-items: center; } .cognitive-direction-btn--space { grid-column: 1 / -1; } .cognitive-stage--calculation .cognitive-response-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; width: min(34rem, 92vw); } .cognitive-stage--calculation .cognitive-response-btn { min-width: 0; min-height: 5.5rem; padding: 0.9rem 1rem; font-size: 2.4rem; line-height: 1; } .cognitive-stage--calculation-chain { gap: clamp(0.7rem, 2vh, 1.35rem); justify-content: center; } .cognitive-calc-chain { width: min(760px, 94vw); display: grid; justify-items: center; gap: clamp(0.55rem, 1.5vh, 1rem); } .cognitive-calc-status { min-height: 1.35rem; color: var(--muted); font-size: clamp(0.82rem, 1.2vw, 1rem); font-weight: 800; letter-spacing: 0; } .cognitive-calc-token-display { width: min(420px, 86vw); min-height: clamp(92px, 18vh, 150px); display: grid; place-items: center; border: 1px solid color-mix(in oklab, var(--border) 74%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--card) 88%, transparent); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.11); } .cognitive-calc-token { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(4.6rem, 14vw, 7rem); min-height: clamp(4.6rem, 14vw, 7rem); padding: 0.25rem 0.7rem; border-radius: 8px; color: var(--text); font-size: clamp(3rem, 9vw, 5.8rem); font-weight: 900; line-height: 1; } .cognitive-calc-token.is-operator { color: var(--accent-text); } .cognitive-calc-token.is-question { color: color-mix(in oklab, var(--accent-text) 86%, var(--text)); } .cognitive-calc-token.is-answer { border: 2px solid currentColor; background: color-mix(in oklab, currentColor 10%, var(--card)); font-variant-numeric: tabular-nums; } .cognitive-calc-token.is-answer.is-correct { color: #15803d; } .cognitive-calc-token.is-answer.is-error { color: #dc2626; } .cognitive-calc-progress { display: flex; justify-content: center; gap: clamp(0.22rem, 0.8vw, 0.42rem); width: min(420px, 86vw); } .cognitive-calc-progress-dot { width: clamp(0.42rem, 1.1vw, 0.62rem); height: clamp(0.42rem, 1.1vw, 0.62rem); border-radius: 999px; background: color-mix(in oklab, var(--border) 70%, transparent); transition: background 160ms ease, transform 160ms ease; } .cognitive-calc-progress-dot.is-active { transform: scale(1.28); background: var(--accent); } .cognitive-calc-progress-dot.is-done { background: color-mix(in oklab, var(--accent) 58%, var(--border)); } .cognitive-calc-answer-wrap { width: min(420px, 86vw); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.65rem; } .cognitive-calc-answer-label { color: var(--muted); font-size: clamp(0.78rem, 1vw, 0.92rem); font-weight: 800; } .cognitive-calc-answer { min-height: clamp(2.5rem, 7cqh, 4rem); display: flex; align-items: center; justify-content: flex-end; padding: 0.25rem 0.9rem; border: 2px solid color-mix(in oklab, var(--accent) 42%, var(--border)); border-radius: 8px; background: var(--card); color: var(--text); font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 900; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px rgba(15, 23, 42, 0.08); font-variant-numeric: tabular-nums; } .cognitive-calc-answer.is-empty { color: color-mix(in oklab, var(--muted) 58%, transparent); } .cognitive-calc-keypad { width: min(420px, 86vw); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.4rem, 1vw, 0.65rem); } .cognitive-calc-key { min-width: 0; /* cqh (of #gameArea / demo modal) not vh, so the 4-row keypad fits the play area, not the viewport. */ min-height: clamp(2.4rem, 8cqh, 4rem); border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-family: 'Montserrat', Arial, sans-serif; font-size: clamp(1.35rem, 3.5vw, 2rem); font-weight: 900; cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease; } .cognitive-calc-key:hover, .cognitive-calc-key:focus-visible { border-color: color-mix(in oklab, var(--accent) 58%, var(--border)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-calc-key.is-utility { color: var(--muted); font-size: clamp(1.05rem, 2.6vw, 1.55rem); } .cognitive-calc-key.is-submit { grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-size: clamp(1.05rem, 2.5vw, 1.45rem); } .cognitive-calc-key.is-registered { transform: scale(0.96); } .cognitive-calc-key.is-ignored, .cognitive-calc-answer.is-ignored { animation: cognitiveIgnoredInput 180ms ease; box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 46%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-stage--calculation-chain.is-input-locked .cognitive-calc-keypad { pointer-events: none; opacity: 0.55; } .cognitive-stage--calculation-chain:not(.is-ready-for-answer) .cognitive-calc-answer-wrap { opacity: 0.52; } .cognitive-calc-solution { max-width: min(640px, 92vw); padding: 0.42rem 0.72rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: clamp(0.9rem, 1.35vw, 1.05rem); font-weight: 800; text-align: center; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .cognitive-calc-solution.is-error { border-color: color-mix(in oklab, #dc2626 50%, var(--border)); background: color-mix(in oklab, #dc2626 10%, var(--card)); } .cognitive-calc-solution.is-correct { border-color: color-mix(in oklab, #16a34a 48%, var(--border)); background: color-mix(in oklab, #16a34a 10%, var(--card)); } .cognitive-response-label { line-height: 1.1; } .cognitive-response-icon { width: 1.8rem; height: 1.8rem; object-fit: contain; flex: 0 0 auto; } .cognitive-response-icon.is-arrow { width: 2.65rem; height: 2.65rem; } .cognitive-stage--flex-animal .cognitive-response-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; min-width: clamp(150px, 16vw, 210px); min-height: 58px; } .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon { flex-direction: column; gap: 0.35rem; min-height: 92px; padding-block: 0.7rem; } .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows { flex-direction: column; gap: 0.45rem; min-height: 116px; padding-block: 0.75rem; } .cognitive-stage--flex-animal .cognitive-response-btn .cognitive-response-icon.is-arrow { width: 2.15rem; height: 2.15rem; } .cognitive-response-rowline { display: inline-flex; align-items: center; justify-content: center; gap: 0.48rem; min-height: 2.2rem; } .cognitive-response-btn.is-space-response { flex-direction: column; gap: 0.1rem; } .cognitive-response-btn.is-space-response .cognitive-response-rowline { min-height: 0; } .cognitive-response-btn.is-space-response .cognitive-response-rowline:nth-child(2) .cognitive-response-label { font-size: 0.78em; font-weight: 600; opacity: 0.75; } .cognitive-response-rowline .cognitive-response-icon.is-arrow { width: 2.15rem; height: 2.15rem; } .cognitive-response-btn.is-registered, .cognitive-grid-cell.is-registered { transform: scale(0.97); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 58%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-response-btn.is-response-correct { border-color: color-mix(in oklab, #16a34a 64%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 42%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-response-btn.is-response-wrong { border-color: color-mix(in oklab, #dc2626 64%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 42%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-response-btn.is-ignored, .cognitive-grid-cell.is-ignored { animation: cognitiveIgnoredInput 180ms ease; box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 58%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-choice-prompt, .cognitive-sequence-display { font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 800; max-width: min(900px, 94vw); overflow-wrap: anywhere; } .cognitive-stage--logic-sequence, .cognitive-stage--logic-matrix { gap: clamp(0.9rem, 2.3vh, 1.7rem); } .cognitive-logic-sequence { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(0.28rem, 0.8vw, 0.55rem); max-width: min(880px, 94vw); } .cognitive-logic-sequence-item { min-width: clamp(54px, 8vw, 92px); min-height: clamp(54px, 8vw, 92px); display: grid; place-items: center; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(1.5rem, 4vw, 3.2rem); font-weight: 900; line-height: 1; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .cognitive-logic-sequence-item.has-symbol { width: clamp(62px, 8.8vw, 104px); height: clamp(62px, 8.8vw, 104px); padding: clamp(0.38rem, 0.8vw, 0.62rem); } .cognitive-logic-sequence-item.is-missing { border-color: color-mix(in oklab, var(--primary) 56%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); } /* LOGIC 1 "find the error": every symbol is a tappable button. */ .cognitive-logic-sequence-item.is-tappable { cursor: pointer; font-family: inherit; transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; } .cognitive-logic-sequence-item.is-tappable:hover, .cognitive-logic-sequence-item.is-tappable:focus-visible { border-color: color-mix(in oklab, var(--primary) 60%, var(--border)); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16); transform: translateY(-2px); outline: none; } .cognitive-logic-sequence-item.is-tappable:disabled { cursor: default; transform: none; } .cognitive-logic-sequence-item.is-error-correct { border-color: #16a34a; background: color-mix(in oklab, #16a34a 18%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 45%, transparent); } .cognitive-logic-sequence-item.is-error-wrong { border-color: #dc2626; background: color-mix(in oklab, #dc2626 16%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 42%, transparent); } /* Wider row so 6â€“7 symbols usually stay on one line; arrows connect the stimuli. */ .cognitive-logic-sequence--find-error { max-width: min(1100px, 96vw); } /* Arrow + symbol form one non-breaking unit: on a wrap the arrow leads into the wrapped symbol on the new line, keeping the sequence readable as one continuous flow. */ .cognitive-logic-sequence-link { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: clamp(0.28rem, 0.8vw, 0.55rem); } .cognitive-logic-sequence-arrow { color: var(--muted); font-size: clamp(1.25rem, 2.6vw, 2.1rem); font-weight: 900; line-height: 1; } .cognitive-logic-symbol { --logic-symbol-mask: none; --logic-symbol-color: #2563eb; --logic-symbol-scale: 1; --logic-symbol-rotation: 0deg; width: 100%; height: 100%; display: grid; place-items: center; color: var(--text); font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 900; line-height: 1; } .cognitive-logic-symbol::before { content: ""; width: 100%; height: 100%; display: block; background: var(--logic-symbol-color); transform: rotate(var(--logic-symbol-rotation)) scale(var(--logic-symbol-scale)); transform-origin: center; -webkit-mask: var(--logic-symbol-mask) center / contain no-repeat; mask: var(--logic-symbol-mask) center / contain no-repeat; } .cognitive-logic-symbol.is-missing-symbol::before { display: none; } .cognitive-logic-option-symbol { display: inline-flex; align-items: center; justify-content: center; width: clamp(48px, 7vw, 76px); height: clamp(48px, 7vw, 76px); margin-inline: auto; } .cognitive-logic-sequence-separator { color: var(--muted); font-size: clamp(1.2rem, 3vw, 2.4rem); font-weight: 900; } .cognitive-logic-matrix { width: min(780px, 94vw); display: grid; gap: clamp(0.45rem, 1.1vw, 0.72rem); } .cognitive-logic-matrix-row { display: grid; grid-template-columns: minmax(78px, 0.7fr) repeat(2, minmax(64px, 0.7fr)) 34px minmax(70px, 0.7fr); align-items: center; gap: clamp(0.28rem, 0.8vw, 0.55rem); } .cognitive-logic-matrix-label { color: var(--muted); font-size: clamp(0.72rem, 0.95vw, 0.9rem); font-weight: 900; line-height: 1.15; text-align: right; } .cognitive-logic-matrix-cell { min-height: clamp(64px, 9vw, 104px); display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(1.45rem, 3.4vw, 2.7rem); font-weight: 900; line-height: 1; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .cognitive-logic-matrix-cell.is-card { position: relative; padding: 0.28rem; } .cognitive-logic-card-img { width: clamp(44px, 7vw, 82px); height: clamp(58px, 9vw, 108px); object-fit: contain; display: block; } .cognitive-logic-card-value { position: absolute; right: 0.28rem; bottom: 0.28rem; min-width: 1.65rem; min-height: 1.65rem; display: grid; place-items: center; border-radius: 7px; background: rgba(17, 24, 39, 0.86); color: #fff; font-size: clamp(0.78rem, 1.1vw, 1rem); font-weight: 900; } .cognitive-logic-matrix-cell.is-missing { border-color: color-mix(in oklab, var(--primary) 56%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, var(--card)); } .cognitive-logic-matrix-row.is-challenge .cognitive-logic-matrix-label { color: var(--text); } .cognitive-logic-matrix-arrow { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.8rem); font-weight: 900; } .cognitive-logic-pattern-board { --logic-matrix-size: 3; width: min(62vh, 560px, 94vw); display: grid; grid-template-columns: repeat(var(--logic-matrix-size), minmax(0, 1fr)); gap: clamp(0.38rem, 0.9vw, 0.65rem); } /* LOGIC 2: decorative frame (images/logic2/frame.png) hugging the matrix grid. Scoped to the live game stage (not the tiny passive demo boards). Padding gives the cells breathing room inside the frame; box-sizing keeps the framed board within its min() width. */ .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { box-sizing: border-box; padding: clamp(5px, 1.2vw, 11px); border: clamp(12px, 2.5vw, 20px) solid transparent; border-image-source: url('images/logic2/frame.png'); border-image-slice: 30; border-image-repeat: stretch; /* Guarantee a perfectly square board â†’ square cells (including the "?" missing cell) at every grid size, rather than relying on per-cell aspect-ratio alone (which can drift, e.g. at 4Ã—4). */ aspect-ratio: 1; grid-template-rows: repeat(var(--logic-matrix-size, 3), minmax(0, 1fr)); } .cognitive-logic-pattern-cell { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 93%, transparent); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .cognitive-logic-pattern-cell.is-missing { border-color: color-mix(in oklab, var(--primary) 62%, var(--border)); background: color-mix(in oklab, var(--primary) 13%, var(--card)); } .cognitive-logic-pattern-symbol-card { width: 100%; height: 100%; display: grid; place-items: center; position: relative; padding: clamp(0.34rem, 0.8vw, 0.58rem); color: var(--text); font-weight: 900; } .cognitive-logic-pattern-symbol-card.is-missing { font-size: clamp(1.9rem, 5vw, 3.6rem); } /* One sized shape per cell now (size = the third rule dimension), so give it room; the small/ medium/large contrast comes from the symbol's own scale transform. */ .cognitive-logic-pattern-symbol { width: clamp(42px, 62%, 82px); height: clamp(42px, 62%, 82px); } .cognitive-logic-pattern-symbol-card[data-count="1"] .cognitive-logic-pattern-symbol { width: clamp(42px, 58%, 76px); height: clamp(42px, 58%, 76px); } .cognitive-logic-pattern-symbol-card[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cognitive-logic-pattern-symbol-card[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .cognitive-logic-pattern-symbol-card[data-count="3"] .cognitive-logic-pattern-symbol:first-child { grid-column: 1 / -1; justify-self: center; } /* LOGIC 2 "build the cell": chip groups sit AROUND the centred grid â€” Form left, Farbe right, GrÃ¶sse below â€” and the user composes the missing symbol; the preview builds up live. */ .cognitive-logic-around { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "left matrix right" "below below below"; align-items: center; justify-items: center; gap: clamp(0.5rem, 1.6vw, 1.2rem); margin-top: clamp(0.4rem, 1.4vh, 1rem); } .cognitive-logic-around-matrix { grid-area: matrix; } .cognitive-logic-around-group { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .cognitive-logic-around-group--left { grid-area: left; } .cognitive-logic-around-group--right { grid-area: right; } .cognitive-logic-around-group--below { grid-area: below; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: clamp(0.3rem, 1vh, 0.6rem); } .cognitive-logic-builder-chips--col { flex-direction: column; } .cognitive-logic-build-size-word { font-weight: 900; line-height: 1; color: var(--text); } .cognitive-logic-builder-label { font-weight: 900; color: var(--muted); font-size: clamp(0.9rem, 1.3vw, 1.1rem); } .cognitive-logic-builder-chips { display: flex; flex-wrap: wrap; gap: clamp(0.35rem, 0.9vw, 0.6rem); } .cognitive-logic-builder-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-width: clamp(54px, 7vw, 78px); min-height: clamp(54px, 7vw, 78px); padding: 0.4rem 0.5rem; border: 2px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .cognitive-logic-builder-chip:hover { border-color: color-mix(in oklab, var(--primary) 50%, var(--border)); transform: translateY(-1px); } .cognitive-logic-builder-chip.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent); } .cognitive-logic-builder-chip:disabled { cursor: default; transform: none; } .cognitive-logic-builder-shape { width: clamp(34px, 4.5vw, 48px); height: clamp(34px, 4.5vw, 48px); } .cognitive-logic-builder-swatch { width: clamp(30px, 4vw, 42px); height: clamp(30px, 4vw, 42px); border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.16); } .cognitive-logic-builder-chip-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; } .cognitive-logic-builder-size-dot { width: clamp(34px, 4.6vw, 50px); height: clamp(34px, 4.6vw, 50px); display: grid; place-items: center; } .cognitive-logic-builder-size-dot::before { content: ""; width: calc(100% * var(--builder-size-scale, 1)); height: calc(100% * var(--builder-size-scale, 1)); border-radius: 50%; background: #475569; } .cognitive-logic-builder-chip-label { font-size: 0.72rem; font-weight: 800; color: var(--muted); } .cognitive-response-btn[data-response="done"].is-disabled { opacity: 0.5; } /* LOGIC 2 build mode: the action row holds a single "Fertig" button. The inherited auto-fit response grid stretched it across the full row width (and left-anchored it). Lay it out as a centred flex row with a normal-width button instead. */ .cognitive-stage--logic-pattern-matrix .cognitive-response-row.cognitive-logic-builder-actions { display: flex; justify-content: center; } .cognitive-stage--logic-pattern-matrix .cognitive-response-row.cognitive-logic-builder-actions .cognitive-response-btn { flex: 0 0 auto; min-width: clamp(160px, 30vw, 240px); } .cognitive-logic-pattern-cell.is-build-correct { outline: 3px solid #16a34a; outline-offset: -1px; } .cognitive-logic-pattern-cell.is-build-wrong { outline: 3px solid #dc2626; outline-offset: -1px; } .cognitive-logic-matrix-rule { max-width: min(620px, 94vw); color: var(--muted); font-size: clamp(0.78rem, 1vw, 0.94rem); font-weight: 800; text-align: center; } .cognitive-stage--logic-sequence .cognitive-response-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(74px, 12vw, 112px), 1fr)); width: min(780px, 94vw); justify-items: center; gap: clamp(0.65rem, 1.2vw, 0.95rem); margin-top: clamp(1.4rem, 6vh, 4.8rem); } .cognitive-stage--logic-matrix .cognitive-response-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(640px, 94vw); gap: 0.65rem; } .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(auto-fit, minmax(clamp(72px, 12vw, 104px), 1fr)); width: min(720px, 94vw); justify-items: stretch; } .cognitive-stage--logic-sequence .cognitive-response-btn { min-width: 0; min-height: clamp(78px, 10vw, 116px); padding: clamp(0.55rem, 1vw, 0.85rem); font-size: clamp(1rem, 2vw, 1.4rem); } .cognitive-stage--logic-sequence .cognitive-response-btn.is-logic-symbol-option { aspect-ratio: 1.1; display: inline-flex; align-items: center; justify-content: center; } .cognitive-stage--logic-matrix .cognitive-response-btn { min-width: 0; min-height: clamp(52px, 7vw, 72px); padding: 0.7rem 0.8rem; font-size: clamp(1rem, 2vw, 1.4rem); } .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { aspect-ratio: 1.08; min-height: clamp(74px, 11vw, 108px); padding: 0.25rem; } @media (max-height: 720px) { .cognitive-stage--logic-pattern-matrix { justify-content: flex-start; overflow-y: auto; gap: clamp(0.34rem, 1vh, 0.68rem); padding-top: clamp(4.6rem, 13vh, 6.2rem); padding-bottom: 0.7rem; } .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { width: min(48vh, 480px, 88vw); gap: clamp(0.24rem, 0.7vw, 0.46rem); } .cognitive-stage--logic-pattern-matrix .cognitive-logic-matrix-rule { font-size: clamp(0.68rem, 0.9vw, 0.84rem); line-height: 1.18; } .cognitive-stage--logic-pattern-matrix .cognitive-response-row { gap: clamp(0.38rem, 0.8vw, 0.58rem); width: min(620px, 92vw); } .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { min-height: clamp(56px, 9vh, 84px); } } @media (max-height: 560px) { .cognitive-stage--logic-pattern-matrix { gap: 0.3rem; padding-top: 4.2rem; padding-bottom: 0.45rem; } .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { width: min(42vh, 390px, 82vw); } .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { min-height: clamp(44px, 8vh, 62px); } } /* General short-viewport reclaim (landscape phones, Safari-toolbar landscape, very short windows). The base stage reserves clamp(5.8rem,12vh,8rem) up to 11rem of top-padding for the instruction header, which on a ~313-441px-tall game area eats most of the height and pushes the content + response buttons off the bottom. Compress the (pointer-events:none) header and reclaim the padding so more modes fit without clipping. Mode-specific rules (logic2 etc.) stay more specific and win. */ @media (max-height: 600px) { .cognitive-stage { padding-top: clamp(3rem, 9vh, 4.6rem); padding-bottom: clamp(0.5rem, 2vh, 1rem); gap: clamp(0.5rem, 1.4vh, 1.1rem); } .cognitive-stage:has(.cognitive-persistent-hint--speed), .cognitive-stage:has(.cognitive-persistent-hint--vigil), .cognitive-stage:has(.cognitive-speed-target-guide), .cognitive-stage:has(.cognitive-vigil-target-guide) { padding-top: clamp(3.4rem, 10vh, 5rem); } .cognitive-persistent-header { gap: 0.1rem; width: min(94vw, 720px); } .cognitive-persistent-title { font-size: clamp(0.98rem, 1.6vw, 1.3rem); } .cognitive-persistent-hint { font-size: clamp(0.8rem, 1.15vw, 1.02rem); line-height: 1.12; } .cognitive-response-row { gap: clamp(0.34rem, 1vh, 0.6rem); } } .cognitive-response-btn.is-logic-matrix-option.is-wrong-option { opacity: 0.45; cursor: not-allowed; border-color: color-mix(in oklab, #dc2626 64%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 48%, transparent); } .cognitive-response-btn.is-logic-matrix-option.is-correct-option { border-color: color-mix(in oklab, #16a34a 64%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 58%, transparent), 0 10px 24px rgba(15, 23, 42, 0.12); } .cognitive-logic-feedback { max-width: min(760px, 92vw); padding: 0.42rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(0.82rem, 1vw, 0.98rem); font-weight: 800; line-height: 1.25; } .cognitive-logic-feedback.is-correct { border-color: color-mix(in oklab, #16a34a 56%, var(--border)); background: color-mix(in oklab, #16a34a 11%, var(--card)); } .cognitive-logic-feedback.is-error { border-color: color-mix(in oklab, #dc2626 56%, var(--border)); background: color-mix(in oklab, #dc2626 10%, var(--card)); } @media (max-width: 640px) { .cognitive-logic-pattern-board { width: min(86vw, 420px); } .cognitive-logic-matrix-row { grid-template-columns: 1fr 1fr 28px 1fr; } .cognitive-logic-matrix-label { grid-column: 1 / -1; text-align: center; } .cognitive-stage--logic-sequence .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(420px, 94vw); } .cognitive-stage--logic-matrix .cognitive-response-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 420px) { .cognitive-stage--logic-sequence .cognitive-response-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* LOGIC 2 "build the cell" on PORTRAIT phones: the 3-column "Form | matrix | Farbe" layout overflows â€” the ~86vw matrix board leaves no room for the side chip columns, so the Form (left) and Farbe (right) groups get pushed off both screen edges and clipped, and the whole block reads as off-centre. Stack vertically instead: a capped, centred matrix on top, with the chip groups below as centred horizontal rows. Landscape phones keep the side-by-side layout (width > 640), where it fits and saves vertical space. */ @media (max-width: 640px) and (orientation: portrait) { .cognitive-logic-around { grid-template-columns: minmax(0, 1fr); grid-template-areas: "matrix" "left" "right" "below"; gap: clamp(0.45rem, 2.2vw, 0.95rem); width: 100%; } .cognitive-logic-around-group--left, .cognitive-logic-around-group--right, .cognitive-logic-around-group--below { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.3rem, 1.4vw, 0.55rem); margin-top: 0; width: 100%; } /* the side groups stacked their chips in a vertical column; flow them in a centred row now */ .cognitive-logic-around .cognitive-logic-builder-chips--col { flex-direction: row; flex-wrap: wrap; justify-content: center; } /* Stacked layout has the full width to itself (chips are below now), so let the grid grow large for legibility â€” capped so it still leaves a small margin and the board stays on screen. */ .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { width: min(90vw, 460px); } /* lower the per-symbol floor so cells never crowd on the narrowest phones */ .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-symbol { width: clamp(32px, 60%, 72px); height: clamp(32px, 60%, 72px); } } .departure-board { width: min(880px, 94vw); /* On high levels many destination rows are added; cap the board to the play area and let it scroll so the bottom rows aren't clipped off-screen. */ max-height: 100%; overflow-y: auto; display: grid; gap: clamp(0.35rem, 0.8vw, 0.55rem); padding: clamp(0.7rem, 1.4vw, 1rem); border: 1px solid rgba(148, 163, 184, 0.72); border-radius: 8px; background: #e5e7eb; color: #111827; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12); transition: opacity 220ms ease, transform 220ms ease; } .departure-board.is-cleared { opacity: 0; transform: translateY(calc(var(--cognitive-fixation-align-offset) - 0.8rem)) scale(0.98); pointer-events: none; } .departure-board-header, .departure-board-row { display: grid; grid-template-columns: minmax(132px, 0.75fr) minmax(64px, 0.35fr) minmax(180px, 1fr); align-items: center; gap: clamp(0.45rem, 1vw, 0.8rem); } .departure-board-header { padding: 0.2rem clamp(0.55rem, 1.1vw, 0.85rem); color: #475569; font-size: clamp(0.72rem, 1vw, 0.86rem); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .departure-board-row { min-height: clamp(54px, 7vw, 72px); padding: clamp(0.45rem, 1vw, 0.7rem) clamp(0.55rem, 1.1vw, 0.85rem); border: 1px solid rgba(148, 163, 184, 0.72); border-radius: 8px; background: #f8fafc; opacity: 0; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; } .departure-board-row.is-visible { opacity: 1; transform: translateY(0); } .departure-board-flight { display: inline-flex; align-items: center; gap: clamp(0.4rem, 0.8vw, 0.65rem); min-width: 0; } .departure-board-flight strong, .departure-board-time, .departure-board-destination { overflow-wrap: anywhere; } .departure-board-plane { width: clamp(34px, 5vw, 52px); height: clamp(34px, 5vw, 52px); object-fit: contain; flex: 0 0 auto; } .departure-board-time { color: #1d4ed8; font-weight: 900; font-variant-numeric: tabular-nums; } .departure-board-destination { font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: 900; } .departure-countdown { position: absolute; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%); min-width: clamp(110px, 20vw, 180px); min-height: clamp(110px, 20vw, 180px); display: grid; place-items: center; border: 1px solid color-mix(in oklab, #2563eb 42%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--card) 90%, #dbeafe); color: var(--text); font-size: clamp(3.8rem, 12vw, 7rem); font-weight: 900; line-height: 1; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14); } .departure-countdown[hidden] { display: none; } .corsi-countdown { position: absolute; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%); min-width: clamp(96px, 16vw, 150px); min-height: clamp(96px, 16vw, 150px); display: grid; place-items: center; border: 1px solid color-mix(in oklab, #2563eb 42%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, #dbeafe); color: var(--text); font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 900; line-height: 1; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14); } .corsi-countdown[hidden] { display: none; } .cognitive-airport-response-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(980px, 94vw); gap: clamp(0.75rem, 1.2vw, 1rem); } .cognitive-airport-option-btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.65rem; min-width: 0; min-height: clamp(78px, 9vw, 98px); padding: 0.9rem 1rem; text-align: left; } .cognitive-airport-option-btn .cognitive-response-label { font-size: clamp(1.08rem, 1.45vw, 1.28rem); font-weight: 900; } .cognitive-airport-option-plane { width: 3rem; height: 3rem; } .cognitive-airport-option-btn.is-selected { border-color: color-mix(in oklab, #16a34a 54%, var(--border)); background: color-mix(in oklab, #16a34a 13%, var(--card)); color: var(--text); opacity: 0.82; } .cognitive-airport-option-btn.is-selected::after { content: attr(data-selected-order); position: absolute; top: 0.35rem; right: 0.45rem; min-width: 1.35rem; min-height: 1.35rem; display: grid; place-items: center; border-radius: 999px; background: #16a34a; color: #ffffff; font-size: 0.78rem; font-weight: 900; } @media (max-width: 560px) { .departure-board-header { display: none; } .departure-board-row { grid-template-columns: 1fr; gap: 0.18rem; } .departure-board-time { font-size: 0.9rem; } .cognitive-airport-response-row { grid-template-columns: 1fr; } } .cognitive-grid { --cognitive-grid-size: 3; display: grid; grid-template-columns: repeat(var(--cognitive-grid-size), minmax(0, 1fr)); gap: clamp(0.35rem, 0.8vw, 0.7rem); } .cognitive-grid--six { width: min(76vw, 560px); } .cognitive-grid--small { width: min(48vw, 320px); } .cognitive-stage--construct { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; align-items: center; justify-items: center; justify-content: center; overflow: hidden; } .cognitive-construct-grids { position: relative; grid-row: 1; align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-content: center; gap: clamp(0.6rem, 2vw, 1.6rem); /* Cap the 2-grid block by container HEIGHT too (86cqh of #gameArea / demo modal, both container-type:size): width-only sizing ballooned the luggage grids to ~480px each on wide viewports, making them too tall and clipping the top. cqh shrinks them to fit; narrow phones stay cqw-driven (the cqh cap only bites on wide+short viewports). */ width: min(96cqw, 96vw, 960px, 86cqh); transform: none; } .cognitive-construct-grids .cognitive-grid--small { width: 100%; } /* SPACE 2 coffer skin â€” each grid sits inside an open-luggage PNG. The PNG has two compartments (lid + body) split by a horizontal hinge; cells are placed into the two compartments with an empty "hinge" row track between them so the visual gap aligns with the hinge of the suitcase. Padding + row-template are tuned to the PNG geometry, measured by pixel sampling: the recessed cavity of each compartment (mauve back-wall + darker front lip) spans lid 6.86%â€“49.41% of height (center 28.1%) and body 54.39%â€“96.95% (center 75.7%). The cell blocks are centered in those cavities. */ .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1717 / 2392; background-image: url('images/space2/luggage_open.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; /* NOTE: CSS padding percentages resolve against the container WIDTH, not its height. Container is portrait (480 Ã— 668), so 1% padding â‰ˆ 4.8px regardless of direction. Top > bottom shifts the whole cell block down so it centers in the compartment cavities (which sit slightly below the geometric middle). */ padding: 12% 9.5% 4.5% 9.5%; box-sizing: border-box; row-gap: clamp(0.18rem, 0.35vw, 0.32rem); column-gap: clamp(0.28rem, 0.6vw, 0.5rem); justify-items: stretch; align-items: stretch; } /* 2x2 â€” Space 2 entry levels. 1 cell row in the lid, hinge, 1 cell row in the body. Hinge fr trimmed (was 0.247) and lid fr nudged down (was 0.964) so the gap between lid and body cell groups looks slightly tighter, while cells still sit inside the PNG light-brown rectangles. */ .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 2"] { grid-template-rows: 0.94fr 0.1fr 1fr; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 2"] > .cognitive-grid-cell:nth-child(-n+2) { grid-row: 1; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 2"] > .cognitive-grid-cell:nth-child(n+3):nth-child(-n+4) { grid-row: 3; } /* 4x4 â€” 2 cell rows in the lid, hinge, 2 cell rows in the body. Hinge fr trimmed (was 0.49) and lid fr nudged down (was 0.96) so the gap between lid and body cell groups looks slightly tighter. */ .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 4"] { grid-template-rows: 0.94fr 0.94fr 0.25fr 1fr 1fr; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 4"] > .cognitive-grid-cell:nth-child(-n+4) { grid-row: 1; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 4"] > .cognitive-grid-cell:nth-child(n+5):nth-child(-n+8) { grid-row: 2; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 4"] > .cognitive-grid-cell:nth-child(n+9):nth-child(-n+12) { grid-row: 4; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 4"] > .cognitive-grid-cell:nth-child(n+13):nth-child(-n+16) { grid-row: 5; } /* 6 rows Ã— 5 cols â€” 3 cell rows in the lid, hinge, 3 cell rows in the body. One column is dropped from the row count so cells stay roomy enough to read the clothing icons clearly. 30 cells total. Hinge fr trimmed (was 0.74) and lid fr nudged down (was 0.96) to tighten the gap between cell groups. */ .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 6"] { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 0.9fr 0.9fr 0.9fr 0.4fr 1fr 1fr 1fr; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 6"] > .cognitive-grid-cell:nth-child(-n+5) { grid-row: 1; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 6"] > .cognitive-grid-cell:nth-child(n+6):nth-child(-n+10) { grid-row: 2; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 6"] > .cognitive-grid-cell:nth-child(n+11):nth-child(-n+15) { grid-row: 3; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 6"] > .cognitive-grid-cell:nth-child(n+16):nth-child(-n+20) { grid-row: 5; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 6"] > .cognitive-grid-cell:nth-child(n+21):nth-child(-n+25) { grid-row: 6; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 6"] > .cognitive-grid-cell:nth-child(n+26):nth-child(-n+30) { grid-row: 7; } /* 8 rows Ã— 7 cols â€” maxSize. 4 cell rows in the lid, hinge, 4 cell rows in the body. One column dropped from the row count so the dense max-level layout keeps readable cell sizes. 56 cells total. Hinge fr trimmed (was 0.987) and lid fr nudged down (was 0.963) to tighten the gap between cell groups. */ .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 0.9fr 0.9fr 0.9fr 0.9fr 0.55fr 1fr 1fr 1fr 1fr; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(-n+7) { grid-row: 1; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(n+8):nth-child(-n+14) { grid-row: 2; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(n+15):nth-child(-n+21) { grid-row: 3; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(n+22):nth-child(-n+28) { grid-row: 4; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(n+29):nth-child(-n+35) { grid-row: 6; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(n+36):nth-child(-n+42) { grid-row: 7; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(n+43):nth-child(-n+49) { grid-row: 8; } .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid--small[style*="--cognitive-grid-size: 8"] > .cognitive-grid-cell:nth-child(n+50):nth-child(-n+56) { grid-row: 9; } /* Cells inside a coffer: stretch horizontally to fill the column track (so column width â€” not the shape image's intrinsic size â€” drives cell size), keep aspect-ratio:1 from the base rule for square cells, and use a lighter background + cleaner border so empty cells read as packing slots over the brown coffer interior. */ .cognitive-stage--construct .cognitive-construct-grids .cognitive-grid-cell { width: 100%; min-width: 0; min-height: 0; justify-self: stretch; align-self: center; background: color-mix(in oklab, #ffffff 78%, var(--card)); border-color: color-mix(in oklab, #ffffff 30%, var(--border)); } /* Mirrored mode: widen the gap so the mirror-axis indicator has clear space. */ .cognitive-stage--construct.is-mirrored .cognitive-construct-grids { column-gap: clamp(2.6rem, 8vw, 5rem); } /* Vertical mirror axis between target + build grids, with arrows pointing OUTWARD (left toward the target, right toward the build) to signal mirrored entry. */ .cognitive-construct-mirror { position: absolute; top: 3%; bottom: 3%; left: 50%; transform: translateX(-50%); width: clamp(2.6rem, 8vw, 5rem); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; } .cognitive-construct-mirror-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--accent) 0 9px, transparent 9px 16px); border-radius: 2px; opacity: 0.9; } .cognitive-construct-mirror-arrow { position: absolute; top: 50%; width: 0; height: 0; border-top: 0.62rem solid transparent; border-bottom: 0.62rem solid transparent; transform: translateY(-50%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .cognitive-construct-mirror-arrow--left { left: 0; border-right: 0.82rem solid var(--accent); } .cognitive-construct-mirror-arrow--right { right: 0; border-left: 0.82rem solid var(--accent); } /* "GESPIEGELT" heading â€” centered ABOVE both grids. It's a child of the grids container, so bottom:100% resolves against the full grid block, lifting it clear of the top row. */ .cognitive-construct-mirror-label { position: absolute; bottom: calc(100% + 0.45rem); left: 50%; transform: translateX(-50%); z-index: 6; font-size: clamp(0.56rem, 1.5vw, 0.74rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); background: var(--card); padding: 0.16rem 0.5rem; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 6px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .cognitive-stage--construct .cognitive-grid { gap: clamp(0.18rem, 0.55vw, 0.55rem); } .cognitive-construct-picker { grid-row: 2; align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.35rem, 0.9vw, 0.7rem); width: min(94vw, 720px); } .cognitive-stage--construct .cognitive-response-row { grid-row: 3; align-self: end; } .cognitive-construct-picker-btn, .cognitive-construct-erase-btn { height: clamp(56px, 7.5vmin, 76px); display: grid; place-items: center; border: 2px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-construct-picker-btn { width: clamp(56px, 7.5vmin, 76px); padding: clamp(0.32rem, 0.8vmin, 0.52rem); } .cognitive-construct-erase-btn { min-width: clamp(102px, 13vmin, 136px); padding: 0 0.85rem; font-size: clamp(0.9rem, 1vw, 1.05rem); font-weight: 900; } .cognitive-construct-picker-btn:hover, .cognitive-construct-picker-btn:focus-visible, .cognitive-construct-erase-btn:hover, .cognitive-construct-erase-btn:focus-visible { border-color: color-mix(in oklab, #2563eb 62%, var(--border)); outline: none; } .cognitive-construct-picker-btn.is-selected, .cognitive-construct-erase-btn.is-selected { border-color: #2563eb; background: color-mix(in oklab, #2563eb 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #2563eb 28%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-construct-picker.is-empty .cognitive-construct-picker-btn, .cognitive-construct-picker.is-empty .cognitive-construct-erase-btn, .cognitive-stage--construct .cognitive-response-row.is-empty .cognitive-response-btn { color: transparent; background: color-mix(in oklab, var(--card) 78%, transparent); border-color: color-mix(in oklab, var(--border) 74%, transparent); box-shadow: none; pointer-events: none; } .cognitive-construct-picker-img, .cognitive-construct-shape-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } /* SPACE 2 mirrored mode â€” when the stage is in mirrored mode (plan.mirroredResponse), the picker buttons and the shapes placed in the build grid both show MIRRORED versions so the response visually matches the mirrored target the user has to construct. The TARGET grid itself stays unmirrored â€” that's the original pattern. */ .cognitive-stage--construct.is-mirrored .cognitive-construct-picker-img, .cognitive-stage--construct.is-mirrored .cognitive-grid--build .cognitive-construct-shape-img { transform: scaleX(-1); } .cognitive-grid--target .cognitive-grid-cell { cursor: default; pointer-events: none; } .cognitive-grid--target .cognitive-grid-cell:disabled { opacity: 1; } .cognitive-grid-cell { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; font-size: clamp(1rem, 2vw, 1.8rem); } .cognitive-grid-cell.is-target, .cognitive-grid-cell.is-highlighted, .cognitive-grid-cell.is-selected { background: #2563eb; color: #ffffff; border-color: #2563eb; } .cognitive-stage--construct .cognitive-grid-cell.is-target, .cognitive-stage--construct .cognitive-grid-cell.has-construct-shape { background: color-mix(in oklab, #2563eb 8%, var(--card)); color: var(--text); border-color: color-mix(in oklab, #2563eb 42%, var(--border)); } .cognitive-stage--construct .cognitive-grid-cell.has-construct-shape { box-shadow: inset 0 0 0 2px color-mix(in oklab, #2563eb 22%, transparent), 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-stage--construct .cognitive-grid--build .cognitive-grid-cell:hover, .cognitive-stage--construct .cognitive-grid--build .cognitive-grid-cell:focus-visible { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, #2563eb 22%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-grid-cell.is-entered { position: relative; background: #D01C1F; color: #ffffff; border-color: #D01C1F; } .cognitive-grid-cell.is-entered::after { content: attr(data-response-order); position: absolute; right: 6px; bottom: 5px; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #7A1011; font-size: 0.76rem; font-weight: 900; } .cognitive-grid-cell.is-distractor { color: #94a3b8; } .cognitive-dual-dot { width: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); height: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); border-radius: 50%; background: #64748b; } .cognitive-dual-dot.is-target { background: #2563eb; } .cognitive-tracking .cognitive-dual-dot { animation: cognitiveTrack 2.1s ease-in-out infinite alternate; } @keyframes cognitiveTrack { from { transform: translateX(-120px); } to { transform: translateX(120px); } } .cognitive-stage--divide-driving, .cognitive-stage--divide-tower { justify-content: center; gap: clamp(0.8rem, 1.5vw, 1.2rem); padding: clamp(5.4rem, 10vh, 7rem) clamp(0.8rem, 2vw, 1.8rem) clamp(0.8rem, 2vw, 1.4rem); background: color-mix(in oklab, var(--bg) 82%, #dbeafe); } .cognitive-stage--divide-driving { background: #fff; } .cognitive-stage--divide-airport { justify-content: stretch; align-items: stretch; gap: 0; padding: clamp(5.2rem, 10vh, 6.8rem) 0 0; overflow: hidden; background: #fff; } .divide-drive-scene, .divide-tower-cockpit { width: min(1120px, 96vw); border: 1px solid color-mix(in oklab, var(--border) 74%, transparent); border-radius: 8px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); } .divide-drive-scene { --divide-road-offset: 0px; --divide-tree-offset: 0px; --divide-road-top: 56%; --divide-speed-value: 0%; --divide-speed-target-left: 45%; --divide-speed-target-width: 20%; position: relative; height: min(62vh, 560px); min-height: 390px; overflow: hidden; border: 0; box-shadow: none; background: transparent; } .divide-drive-sky { display: none; } .divide-drive-road { position: absolute; left: -8%; right: -8%; top: var(--divide-road-top); height: 30%; transform: translateY(-50%); overflow: hidden; background: linear-gradient(180deg, #475569, #334155 52%, #1f2937); border-block: 5px solid #e5e7eb; } .divide-drive-road-markings { position: absolute; inset: 47% 0 auto; height: 8px; background: repeating-linear-gradient(90deg, #f8fafc 0 54px, transparent 54px 110px); background-position-x: var(--divide-road-offset); opacity: 0.95; } .divide-drive-car-wrap { position: absolute; top: calc(var(--divide-road-top) - clamp(42px, 6vw, 72px)); z-index: 8; width: clamp(112px, 14vw, 190px); aspect-ratio: 2.1 / 1; display: grid; place-items: center; filter: drop-shadow(0 16px 18px rgba(15, 23, 42, 0.22)); } .cognitive-stage--divide-driving[data-drive-direction="leftToRight"] .divide-drive-car-wrap { left: clamp(6%, 14vw, 22%); } .cognitive-stage--divide-driving[data-drive-direction="rightToLeft"] .divide-drive-car-wrap { right: clamp(6%, 14vw, 22%); } .cognitive-stage--divide-driving[data-drive-direction="leftToRight"] .divide-drive-car { transform: scaleX(-1); } .divide-drive-car { width: 100%; height: 100%; object-fit: contain; } .divide-drive-event-layer { position: absolute; inset: 0; z-index: 16; pointer-events: none; } .divide-drive-tree-layer { position: absolute; left: 0; right: 0; bottom: calc(100% - var(--divide-road-top) + 84px); z-index: 5; opacity: 0.88; pointer-events: none; height: 0; } .divide-drive-tree { position: absolute; left: 0; bottom: 0; width: clamp(76px, 8.4vw, 132px); height: auto; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(15, 23, 42, 0.16)); transform: translateX(var(--divide-tree-x, -220px)) translateY(var(--divide-tree-y, 0px)); will-change: transform; } .divide-drive-tree--2, .divide-drive-tree--5 { width: clamp(64px, 7.2vw, 116px); --divide-tree-y: -0.15rem; } .divide-drive-tree--3 { width: clamp(88px, 9.2vw, 148px); --divide-tree-y: -0.25rem; } .divide-drive-traffic { position: absolute; top: calc(var(--divide-road-top) - clamp(160px, 20vw, 230px)); left: 50%; transform: translateX(-50%); z-index: 1; display: grid; place-items: center; gap: 0.2rem; pointer-events: auto; cursor: pointer; min-width: clamp(76px, 9vw, 112px); padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--card); color: var(--text); font-weight: 900; box-shadow: var(--shadow-subtle, 0 1px 2px rgba(15, 23, 42, 0.08)); } .divide-drive-traffic img { width: clamp(52px, 6vw, 84px); height: clamp(52px, 6vw, 84px); object-fit: contain; } .divide-drive-traffic.is-red { outline: 3px solid color-mix(in oklab, #dc2626 62%, transparent); } .divide-drive-traffic.is-green { outline: 3px solid color-mix(in oklab, #16a34a 62%, transparent); } .divide-drive-traffic.is-missed { outline: 3px solid color-mix(in oklab, #f97316 70%, transparent); } .divide-speed-panel { position: absolute; left: 50%; bottom: clamp(0.85rem, 2vw, 1.25rem); z-index: 13; transform: translateX(-50%); width: min(760px, 88%); padding: clamp(0.58rem, 1.5vw, 0.85rem); border: 1px solid color-mix(in oklab, var(--border) 78%, transparent); border-radius: 8px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1); } .divide-speed-header, .divide-speed-scale { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .divide-speed-header { margin-bottom: 0.45rem; color: var(--text); font-weight: 900; } .divide-speed-readout { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; } .divide-speed-meter { position: relative; height: clamp(22px, 3.4vw, 34px); overflow: hidden; border-radius: 8px; background: linear-gradient(90deg, rgba(220, 38, 38, 0.2), rgba(249, 115, 22, 0.16) 32%, rgba(22, 163, 74, 0.16) 50%, rgba(249, 115, 22, 0.16) 68%, rgba(220, 38, 38, 0.2)); border: 1px solid color-mix(in oklab, var(--border) 72%, transparent); } .divide-speed-target { position: absolute; top: 0; bottom: 0; left: var(--divide-speed-target-left); width: var(--divide-speed-target-width); background: color-mix(in oklab, #16a34a 58%, transparent); box-shadow: inset 0 0 0 2px color-mix(in oklab, #15803d 78%, transparent); } .divide-speed-fill { position: absolute; inset: 0 auto 0 0; width: var(--divide-speed-value); background: linear-gradient(90deg, #2563eb, #0ea5e9); opacity: 0.55; } .divide-speed-needle { position: absolute; top: -5px; bottom: -5px; left: var(--divide-speed-value); width: 4px; transform: translateX(-50%); border-radius: 999px; background: #0f172a; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.78); } .divide-speed-panel[data-speed-state="target"] .divide-speed-needle { background: #15803d; } .divide-speed-panel[data-speed-state="near"] .divide-speed-needle { background: #f97316; } .divide-speed-panel[data-speed-state="out"] .divide-speed-needle { background: #dc2626; } .divide-speed-scale { margin-top: 0.35rem; color: var(--muted); font-size: 0.78rem; font-weight: 800; } .divide-speed-deviation { margin-top: 0.25rem; color: var(--text); font-size: 0.86rem; font-weight: 900; text-align: center; } .divide-speed-touch-zones { position: absolute; left: 0; right: 0; bottom: 0; z-index: 14; display: grid; grid-template-columns: 1fr 1fr; min-height: 32%; pointer-events: none; } .divide-speed-touch-zone { display: grid; place-items: center; align-content: center; gap: 0.2rem; border: 0; background: transparent; color: color-mix(in oklab, var(--text) 68%, transparent); cursor: pointer; touch-action: none; pointer-events: auto; opacity: 0.18; transition: opacity 140ms ease, background-color 140ms ease; } .divide-speed-touch-zone span { font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1; } .divide-speed-touch-zone strong { font-size: clamp(0.7rem, 1.5vw, 0.88rem); text-transform: uppercase; } .divide-speed-touch-zone.is-active, .divide-speed-touch-zone:active { opacity: 0.48; background: color-mix(in oklab, #2563eb 12%, transparent); } .divide-status-strip, .divide-tower-log { border-radius: 8px; border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--text); font-weight: 800; } .divide-status-strip { position: absolute; left: 50%; top: clamp(0.65rem, 1.6vw, 1rem); z-index: 12; transform: translateX(-50%); width: min(620px, 88%); min-height: 42px; display: grid; place-items: center; padding: 0.45rem 0.8rem; } .divide-status-strip[data-tone="alert"], .divide-tower-log[data-tone="notice"] { border-color: color-mix(in oklab, #f97316 62%, var(--border)); background: color-mix(in oklab, #f97316 12%, var(--card)); } .divide-status-strip[data-tone="success"], .divide-tower-log[data-tone="success"] { border-color: color-mix(in oklab, #16a34a 62%, var(--border)); background: color-mix(in oklab, #16a34a 12%, var(--card)); } .divide-status-strip[data-tone="error"], .divide-tower-log[data-tone="error"] { border-color: color-mix(in oklab, #dc2626 62%, var(--border)); background: color-mix(in oklab, #dc2626 12%, var(--card)); } .divide-status-strip[data-tone="notice"] { border-color: color-mix(in oklab, #f59e0b 60%, var(--border)); background: color-mix(in oklab, #f59e0b 12%, var(--card)); } /* App feedback toast â€” a centred, card-style panel with a status icon (replaces the old top-left inline-positioned feedback). Used for profile/settings messages + conflicts. */ .app-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10050; display: flex; align-items: center; gap: 0.75rem; max-width: min(460px, 88vw); padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.6vw, 1.5rem); border: 2px solid var(--border, #e2e8f0); border-radius: 16px; background: var(--card, #fff); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3); font-family: Montserrat, Arial, sans-serif; animation: app-toast-in 180ms ease; } .app-toast.is-leaving { opacity: 0; transition: opacity 360ms ease; } .app-toast .app-toast-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: 1.15rem; font-weight: 900; color: #fff; /* 2-class selector beats brand-tokens text :where() override */ background: #2563eb; } .app-toast .app-toast-text { min-width: 0; font-size: clamp(0.9rem, 1.4vw, 1.05rem); font-weight: 600; line-height: 1.35; color: var(--text, #1f2937); } .app-toast--error { border-color: color-mix(in oklab, #dc2626 55%, var(--border)); } .app-toast--error .app-toast-icon { background: #dc2626; } .app-toast--ok { border-color: color-mix(in oklab, #16a34a 55%, var(--border)); } .app-toast--ok .app-toast-icon { background: #16a34a; } @keyframes app-toast-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } } /* DIVIDE 3 â€” aphasia-friendly multi-panel monitoring. Panels idle; a firing panel shows an icon, a depleting ring and (battery) a draining bar, and needs one tap. panelAlignment shifts the whole grid into the intact hemifield for neglect / visual-field loss. */ .cognitive-stage--divide-life { justify-content: center; /* vertically centre the windows in the play area */ align-items: center; gap: 0; padding: clamp(5.2rem, 10vh, 6.8rem) 0 clamp(1.2rem, 3vh, 2rem); overflow: hidden; } /* No visible containing panel â€” the browser windows float directly on the stage, content-sized so the stage's flex-centering keeps them vertically centred on screen. */ .divide-life-scene { position: relative; width: min(1120px, 96vw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(0.4rem, 1.5vw, 1rem); } /* panelAlignment shifts the grid into the intact hemifield (neglect / visual-field loss). */ .divide-life-scene[data-panel-alignment="centered"] { align-items: center; } .divide-life-scene[data-panel-alignment="left"] { align-items: flex-start; } .divide-life-scene[data-panel-alignment="right"] { align-items: flex-end; } .divide-life-grid { display: grid; gap: clamp(0.9rem, 2.4vw, 1.8rem); grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(640px, 100%); } .divide-life-grid[data-panel-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(860px, 100%); } /* 4 windows form a 2Ã—2; with the 4:3 (browser-shaped) panels the block is wider than tall, so a modest viewport-height cap keeps it on screen. */ .divide-life-grid[data-panel-count="4"] { width: min(640px, 100%, 82vh); } /* Each panel is a little browser window: chrome titlebar (traffic-light dots + app name) over a white content area showing the app image. */ .divide-life-panel { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 3; /* browser-window shape â€” wider than tall */ padding: 0; border: 2px solid color-mix(in oklab, var(--border) 78%, transparent); border-radius: 14px; background: #fff; overflow: hidden; cursor: pointer; font: inherit; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .divide-life-panel:hover { transform: translateY(-2px); } .divide-life-titlebar { display: flex; align-items: center; gap: 0.5rem; padding: clamp(0.32rem, 0.9vw, 0.5rem) clamp(0.5rem, 1.2vw, 0.8rem); background: linear-gradient(180deg, #f1f5f9, #e2e8f0); border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .divide-life-dots { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; } .divide-life-dots i { width: clamp(0.5rem, 1vw, 0.72rem); height: clamp(0.5rem, 1vw, 0.72rem); border-radius: 50%; background: #cbd5e1; } .divide-life-dots i:nth-child(1) { background: #ef4444; } .divide-life-dots i:nth-child(2) { background: #f59e0b; } .divide-life-dots i:nth-child(3) { background: #22c55e; } .divide-life-title { font-weight: 800; font-size: clamp(0.72rem, 1.2vw, 0.95rem); color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .divide-life-body { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; /* icon is always vertically + horizontally centred, never glued to the header */ padding: clamp(0.5rem, 1.8vw, 1.1rem); } .divide-life-figure { position: relative; display: grid; place-items: center; align-self: center; width: clamp(58px, 11vw, 104px); height: clamp(58px, 11vw, 104px); } .divide-life-icon-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* NO firing highlight and NO countdown ring â€” the window looks identical to idle; only its CONTENT changes (phone rings / mail badge / battery empty / video paused), so the user must notice it. */ /* Brief AFTER-THE-FACT result feedback only (does not pre-cue the reaction). */ .divide-life-panel.is-handled { border-color: #16a34a; box-shadow: 0 0 0 4px color-mix(in oklab, #16a34a 20%, transparent); } .divide-life-panel.is-missed { border-color: #dc2626; box-shadow: 0 0 0 4px color-mix(in oklab, #dc2626 18%, transparent); } .divide-life-panel.is-false-tap { animation: divide-life-shake 0.42s ease; border-color: #dc2626; } /* Ball window = a little video: the ball bounces while playing, freezes + shows a pause symbol overlay when it fires (tap to resume). */ .divide-life-panel--ball .divide-life-icon-img { animation: divide-life-bounce 1s ease-in-out infinite; } .divide-life-panel--ball.is-firing .divide-life-icon-img { animation-play-state: paused; } .divide-life-pause { position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; object-fit: contain; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.35)); transition: opacity 140ms ease; } .divide-life-panel--ball.is-firing .divide-life-pause { opacity: 1; } @keyframes divide-life-bounce { 0%, 100% { transform: translateY(8%); } 50% { transform: translateY(-18%); } } @keyframes divide-life-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .cognitive-stage--divide-driving.is-driving-paused .divide-drive-road, .cognitive-stage--divide-driving.is-driving-paused .divide-drive-sky { filter: saturate(0.82); } .divide-action-row { width: min(1120px, 96vw); align-items: stretch; } .divide-action-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; min-width: clamp(132px, 16vw, 210px); } .divide-action-label { font-size: clamp(0.92rem, 1vw, 1.05rem); } .divide-action-key { color: var(--muted); font-size: 0.75rem; font-weight: 800; } .divide-action-btn--brake { border-color: color-mix(in oklab, #dc2626 48%, var(--border)); } .divide-action-btn--approve { border-color: color-mix(in oklab, #2563eb 48%, var(--border)); } .divide-action-btn--wait { border-color: color-mix(in oklab, #f97316 48%, var(--border)); } .divide-action-btn--check { border-color: color-mix(in oklab, #16a34a 42%, var(--border)); } .divide-tower-cockpit { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, 0.75fr); gap: clamp(0.7rem, 1.2vw, 1rem); min-height: min(58vh, 520px); padding: clamp(0.7rem, 1.3vw, 1rem); background: color-mix(in oklab, var(--card) 88%, #e0f2fe); } .divide-tower-radar { position: relative; min-height: 340px; overflow: hidden; border: 1px solid color-mix(in oklab, #0f766e 42%, var(--border)); border-radius: 8px; background: radial-gradient(circle at center, rgba(20, 184, 166, 0.16) 0 2px, transparent 3px 100%), repeating-radial-gradient(circle at center, rgba(20, 184, 166, 0.22) 0 2px, transparent 2px 74px), linear-gradient(135deg, #0f172a, #134e4a); color: #d1fae5; } .divide-tower-radar-grid { position: absolute; inset: 0; background: linear-gradient(rgba(209,250,229,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(209,250,229,0.12) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.55; } .divide-tower-radar-sweep { position: absolute; left: 50%; top: 50%; width: 52%; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(134,239,172,0.9), rgba(134,239,172,0)); animation: divideRadarSweep 4.4s linear infinite; } .divide-tower-plane-layer { position: absolute; inset: 0; } .divide-tower-plane { position: absolute; z-index: 4; display: grid; gap: 0.1rem; min-width: 82px; padding: 0.45rem 0.55rem; border: 1px solid rgba(255,255,255,0.36); border-radius: 8px; background: rgba(15, 23, 42, 0.84); color: #f8fafc; text-align: center; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22); } .divide-tower-plane::before { content: ""; width: 36px; height: 18px; margin: 0 auto 0.1rem; clip-path: polygon(0 42%, 43% 42%, 50% 0, 57% 42%, 100% 42%, 100% 58%, 57% 58%, 50% 100%, 43% 58%, 0 58%); background: currentColor; } .divide-tower-plane.is-request { color: #bfdbfe; border-color: rgba(147, 197, 253, 0.5); } .divide-tower-plane.is-clear { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.52); } .divide-tower-plane.is-hold { color: #fed7aa; border-color: rgba(249, 115, 22, 0.55); } .divide-tower-plane.is-complete { outline: 3px solid rgba(34, 197, 94, 0.55); } .divide-tower-plane.is-error { outline: 3px solid rgba(239, 68, 68, 0.62); } .divide-tower-radar-label { position: absolute; left: 0.8rem; bottom: 0.75rem; z-index: 5; color: rgba(209,250,229,0.82); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .divide-tower-panel-stack { display: grid; grid-template-rows: auto auto 1fr; gap: clamp(0.55rem, 1vw, 0.8rem); } .divide-tower-panel { display: grid; gap: 0.35rem; align-content: center; min-height: 104px; padding: clamp(0.75rem, 1.3vw, 1rem); border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); text-align: left; } .divide-panel-kicker { color: var(--muted); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .divide-tower-panel strong { font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1; } .divide-tower-runway-panel:not(.is-closed), .divide-tower-weather-panel:not(.is-blocking) { border-color: color-mix(in oklab, #16a34a 44%, var(--border)); } .divide-tower-runway-panel.is-closed, .divide-tower-weather-panel.is-blocking { border-color: color-mix(in oklab, #dc2626 50%, var(--border)); background: color-mix(in oklab, #dc2626 10%, var(--card)); } .divide-tower-panel.needs-check { animation: dividePanelNeedsCheck 780ms ease-in-out infinite; } .divide-tower-log { min-height: 76px; padding: 0.75rem; text-align: left; } .divide-airport-scene { position: relative; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; /* Blend with the page (no light-blue panel) like the sibling scenes / other game modes â€” the previous sky-blue gradient + bordered panel read as a coloured box the header overlapped. */ border: 0; border-radius: 12px; box-shadow: none; background: transparent; } .divide-airport-route-map, .divide-airport-node-layer, .divide-airport-plane-layer { position: absolute; inset: 0; } .divide-airport-route-map { z-index: 1; display: block; width: 100%; height: 100%; } .divide-airport-route { fill: none; stroke: rgba(37, 99, 235, 0.34); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 30 22; } .divide-airport-route.is-active { stroke: rgba(37, 99, 235, 0.34); stroke-width: 6; stroke-dasharray: 30 22; } .divide-airport-node-layer { z-index: 3; pointer-events: none; } .divide-airport-node { --cooldown-progress: 0deg; position: absolute; width: clamp(76px, 9vw, 116px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); display: grid; place-items: center; color: #0f172a; } .divide-airport-donut { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#f97316 var(--cooldown-progress), rgba(15, 23, 42, 0.16) 0deg 360deg); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); } .divide-airport-donut::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: rgba(248, 250, 252, 0.92); } .divide-airport-cooldown { position: relative; z-index: 2; transform: translateY(-2.1rem); min-width: 4ch; padding: 0.18rem 0.48rem; border-radius: 999px; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: clamp(0.86rem, 1.35vw, 1.08rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; text-align: center; } .divide-airport-cooldown[hidden] { display: none; } .divide-airport-lock-cross { position: absolute; z-index: 4; width: 72%; height: 72%; opacity: 0; pointer-events: none; transform: rotate(0deg) scale(0.92); transition: opacity 120ms ease, transform 120ms ease; } .divide-airport-lock-cross::before, .divide-airport-lock-cross::after { content: ""; position: absolute; left: 50%; top: 50%; width: 112%; height: clamp(8px, 1vw, 13px); border-radius: 999px; background: #dc2626; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.78), 0 8px 14px rgba(127, 29, 29, 0.2); transform-origin: center; } .divide-airport-lock-cross::before { transform: translate(-50%, -50%) rotate(45deg); } .divide-airport-lock-cross::after { transform: translate(-50%, -50%) rotate(-45deg); } .divide-airport-node.is-cooling .divide-airport-lock-cross { opacity: 1; transform: scale(1); } .divide-airport-icon { position: relative; z-index: 1; width: 54%; height: 54%; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(15, 23, 42, 0.18)); } .divide-airport-code { position: absolute; z-index: 2; left: 50%; bottom: -0.35rem; transform: translateX(-50%); min-width: 4ch; padding: 0.18rem 0.38rem; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: #0f172a; font-size: clamp(0.72rem, 1.2vw, 0.9rem); font-weight: 950; letter-spacing: 0.04em; text-align: center; } .divide-airport-plane-layer { z-index: 6; pointer-events: none; } .divide-airport-plane { --plane-rotation: 0deg; position: absolute; z-index: 7; width: clamp(62px, 7vw, 98px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.22)); } .divide-airport-plane img { width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--plane-rotation)); transform-origin: center; } /* Circular countdown ring around each plane â€” for users who cannot read the numeric countdown. Driven from the same `progress` (0â†’1) the flight loop already computes: stroke-dashoffset = progress * 100 (pathLength is 100). */ .divide-airport-plane-ring { position: absolute; inset: -26%; transform: rotate(-90deg); overflow: visible; pointer-events: none; z-index: 1; } .divide-ring-track { fill: none; stroke: rgba(15, 23, 42, 0.16); stroke-width: 2.4; } .divide-ring-progress { fill: none; stroke: #f59e0b; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke 200ms ease; } .divide-airport-plane-countdown { position: absolute; left: 50%; top: auto; bottom: -1.05rem; z-index: 3; transform: translateX(-50%); min-width: 4ch; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(15, 23, 42, 0.82); color: #fff; font-size: clamp(0.86rem, 1.3vw, 1.05rem); font-weight: 950; font-variant-numeric: tabular-nums; line-height: 1.1; } /* Badges/Pills/Chips mit weisser Schrift. The brand-tokens.css rule `body.brand-refined :where(p, span, li, label) { color: var(--ink); }` has specificity (0,1,1) because of the `body.brand-refined` prefix (`:where()` adds 0, but the body+class anchor is 0,1,1). To beat it we must match or exceed (0,1,1): add the `body.brand-refined` prefix here too â†’ (0,2,1) â†’ our white text wins. */ body.brand-refined .divide-airport-cooldown, body.brand-refined .divide-airport-plane-countdown, body.brand-refined .cash-token-count, body.brand-refined .divide-airport-cooldown *, body.brand-refined .divide-airport-plane-countdown *, body.brand-refined .cash-token-count * { color: #fff; } /* Fallback for pages NOT in brand-refined mode (defensive â€” same color anyway). */ .divide-airport-cooldown, .divide-airport-plane-countdown, .cash-token-count { color: #fff; } .divide-airport-plane.is-aborting img { filter: saturate(1.12); } .divide-airport-plane.is-false-abort img, .divide-airport-plane.is-missed-abort img { filter: drop-shadow(0 0 0 #dc2626) saturate(0.78); } .divide-airport-plane.is-landed { opacity: 0.72; transform: translate(-50%, -50%) scale(0.82); transition: opacity 220ms ease, transform 220ms ease; } .divide-airport-plane.is-missed-abort { animation: divideAirportErrorPulse 360ms ease-in-out 2; } .divide-airport-status { /* Removed per request: the "Sperrzeiten der FlughÃ¤fen prÃ¼fen." status strip is hidden (the JS still references it harmlessly). Only the airport (divide2) strip â€” the divide1 driving strip uses .divide-status-strip without .divide-airport-status and is unaffected. */ display: none; } @keyframes divideAirportErrorPulse { 0%, 100% { filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.22)); } 50% { filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.75)); } } @keyframes divideRadarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dividePanelNeedsCheck { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, #f97316 34%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in oklab, #f97316 16%, transparent); } } @media (max-width: 860px) { .divide-drive-scene { min-height: 380px; height: 60vh; } .cognitive-stage--divide-airport { padding-top: clamp(4.8rem, 10vh, 6rem); } .divide-tower-cockpit { grid-template-columns: 1fr; min-height: 0; } .divide-tower-radar { min-height: 300px; } .divide-tower-panel-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .divide-tower-log { grid-column: 1 / -1; } } @media (max-width: 560px) { .cognitive-stage--divide-driving, .cognitive-stage--divide-tower { padding-inline: 0.55rem; } .cognitive-stage--divide-airport { padding: clamp(4.6rem, 12vh, 5.6rem) 0 0; } .divide-drive-scene { width: 96vw; min-height: 360px; } .divide-airport-node { width: clamp(66px, 18vw, 84px); } .divide-airport-plane { width: clamp(56px, 15vw, 78px); } .divide-speed-panel { width: 92%; padding: 0.55rem; } .divide-speed-scale { font-size: 0.68rem; } .divide-status-strip { width: 92%; font-size: 0.82rem; } .divide-tower-panel-stack { grid-template-columns: 1fr; } } .cognitive-rotation-pair { position: relative; display: flex; gap: clamp(2rem, 5vw, 5rem); align-items: center; justify-content: center; } /* SPACE 1 "NICHT gleich" answer button â€” the negation is signature red so it can't be misread. Needs a 2-class selector to beat brand-tokens.css's (0,1,1) text-colour override (see memory). */ .cognitive-response-btn .space-not-equal { color: var(--accent-text); font-weight: 900; letter-spacing: 0.02em; margin-right: 0.32em; } .cognitive-stage--rotation .cognitive-target { min-height: clamp(260px, 32vw, 430px); } .cognitive-stage--rotation .cognitive-rotation-pair { gap: clamp(1.4rem, 4vw, 4rem); } .cognitive-rotation-figure { width: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); height: var(--cognitive-stimulus-size, clamp(80px, 10vw, 150px)); display: grid; place-items: center; border: 4px solid #2563eb; border-radius: 12px; background: var(--card); padding: 8%; color: #2563eb; font-size: calc(var(--cognitive-stimulus-size, 100px) * 0.72); font-weight: 900; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease, box-shadow 180ms ease; } .cognitive-stage--rotation .cognitive-rotation-figure { border-width: 3px; padding: 5%; } /* SPACE 1 graduated scenes: absolute-positioned objects inside the figure box. The figure keeps its rigid outer transform; items are placed/rotated individually but mirror & rotate WITH the figure. */ .cognitive-rotation-figure.is-scene { position: relative; display: block; padding: 0; } .cognitive-rotation-figure.is-multi { width: var(--cognitive-rotation-multi-size, clamp(150px, 17vw, 240px)); height: var(--cognitive-rotation-multi-size, clamp(150px, 17vw, 240px)); } .cognitive-rotation-item { position: absolute; width: 60%; height: 60%; display: grid; place-items: center; /* left / top / transform (translate + per-item rotate + scale) are set inline per item. The inner .cognitive-rotation-img inherits width/height 100% + object-fit:contain. */ } .cognitive-rotation-pair.is-revealing-answer .cognitive-rotation-figure.is-answer-reveal { border-color: color-mix(in oklab, var(--primary) 72%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 16%, transparent), 0 18px 32px rgba(15, 23, 42, 0.14); } .cognitive-rotation-pair.is-revealing-answer.is-correct-response .cognitive-rotation-figure.is-answer-reveal { border-color: #16a34a; box-shadow: 0 0 0 4px color-mix(in oklab, #16a34a 18%, transparent), 0 18px 32px rgba(15, 23, 42, 0.14); } .cognitive-rotation-pair.is-revealing-answer.is-error-response .cognitive-rotation-figure.is-answer-reveal { border-color: color-mix(in oklab, #dc2626 70%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, #dc2626 16%, transparent), 0 18px 32px rgba(15, 23, 42, 0.14); } .cognitive-rotation-pair.is-revealing-answer::after { content: attr(data-answer); position: absolute; top: calc(100% + 0.65rem); left: 50%; transform: translateX(-50%); padding: 0.28rem 0.62rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); font-weight: 800; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .cognitive-stage--space3 { gap: clamp(0.65rem, 1.7vh, 1.35rem); } .space3-workspace { width: min(96vw, 1120px); display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr); align-items: center; justify-items: center; gap: clamp(1rem, 3vw, 2.4rem); transform: translateY(var(--cognitive-fixation-align-offset)); } .space3-panel { display: grid; justify-items: center; gap: clamp(0.35rem, 0.9vh, 0.65rem); width: 100%; } .space3-panel--photo { align-self: center; transform: none; } .space3-panel-label { color: var(--muted); font-size: clamp(0.78rem, 0.9vw, 0.95rem); font-weight: 800; line-height: 1; text-transform: uppercase; } .space3-side-grid { --space3-cols: 3; --space3-rows: 3; display: grid; grid-template-columns: repeat(var(--space3-cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--space3-rows), minmax(0, 1fr)); gap: clamp(0.16rem, 0.45vw, 0.32rem); width: min(28vw, 340px); min-width: 180px; padding: clamp(0.32rem, 0.75vw, 0.55rem); border: 1px solid color-mix(in oklab, var(--primary) 34%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--card) 82%, transparent); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .space3-side-cell { aspect-ratio: 1; min-width: 0; border-radius: 5px; background: var(--space3-cube-color); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 3px 8px rgba(15, 23, 42, 0.12); } .space3-side-cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 62%, transparent); } .space3-iso-svg { width: min(78vw, 640px); max-height: min(34vh, 360px); display: block; overflow: visible; filter: drop-shadow(0 18px 22px rgba(15, 23, 42, 0.16)); } .space3-camera-map { position: relative; width: min(58vw, 720px); min-height: clamp(300px, 44vh, 470px); display: grid; place-items: center; padding: clamp(2.2rem, 4.2vw, 3.4rem); } .space3-camera-cones { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .space3-camera-cone { opacity: 0; fill: color-mix(in oklab, #facc15 24%, transparent); stroke: color-mix(in oklab, #f59e0b 42%, transparent); stroke-width: 0.55; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px color-mix(in oklab, #facc15 24%, transparent)); transition: opacity 140ms ease; } .space3-camera-map:has(.space3-camera-marker--front:hover) .space3-camera-cone--front, .space3-camera-map:has(.space3-camera-marker--front:focus-visible) .space3-camera-cone--front, .space3-camera-map:has(.space3-camera-marker--right:hover) .space3-camera-cone--right, .space3-camera-map:has(.space3-camera-marker--right:focus-visible) .space3-camera-cone--right, .space3-camera-map:has(.space3-camera-marker--back:hover) .space3-camera-cone--back, .space3-camera-map:has(.space3-camera-marker--back:focus-visible) .space3-camera-cone--back, .space3-camera-map:has(.space3-camera-marker--left:hover) .space3-camera-cone--left, .space3-camera-map:has(.space3-camera-marker--left:focus-visible) .space3-camera-cone--left { opacity: 1; } .space3-camera-map .space3-iso-svg { position: relative; z-index: 1; width: min(46vw, 560px); max-height: min(36vh, 360px); } .space3-camera-marker { position: absolute; z-index: 3; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: center; justify-content: center; justify-items: center; gap: 0.12rem; min-width: clamp(4.4rem, 7vw, 5.9rem); min-height: clamp(4.4rem, 7vw, 5.9rem); padding: 0.2rem 0.32rem; border: 1px solid color-mix(in oklab, var(--primary) 34%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--card) 78%, transparent); color: var(--text); font-weight: 850; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); cursor: pointer; touch-action: manipulation; } .space3-camera-marker:hover, .space3-camera-marker:focus-visible { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .space3-camera-img { grid-column: 1 / -1; justify-self: center; width: clamp(2.2rem, 4.4vw, 3.2rem); height: clamp(2.2rem, 4.4vw, 3.2rem); object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(15, 23, 42, 0.2)); } .space3-camera-marker-number { grid-column: 1 / -1; justify-self: center; width: 1.35rem; height: 1.35rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.78rem; line-height: 1; } .space3-camera-marker--front { right: 12%; top: 2%; } .space3-camera-marker--right { right: 12%; bottom: 0; } .space3-camera-marker--back { left: 12%; bottom: 0; } .space3-camera-marker--left { left: 12%; top: 2%; } .space3-camera-marker--left .space3-camera-img { transform: none; } .space3-camera-marker--front .space3-camera-img { transform: scaleX(-1); } .space3-camera-marker--back .space3-camera-img { transform: scaleY(-1); } .space3-camera-marker--right .space3-camera-img { transform: scaleX(-1) scaleY(-1); } .space3-cube-face { stroke: rgba(15, 23, 42, 0.24); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .space3-camera-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.45rem, 1vw, 0.75rem); width: min(760px, 94vw); } .space3-camera-row .space3-camera-btn { min-width: 0; min-height: 52px; padding-inline: clamp(0.55rem, 1vw, 0.9rem); } .space3-camera-btn.is-correct-camera { border-color: #16a34a; background: color-mix(in oklab, #16a34a 18%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 24%, transparent), 0 10px 24px rgba(15, 23, 42, 0.1); } .space3-camera-marker.is-correct-camera { border-color: #16a34a; background: color-mix(in oklab, #16a34a 18%, var(--card)); } .space3-camera-marker.is-correct-camera .space3-camera-marker-number { background: #16a34a; } .space3-camera-btn.is-wrong-camera { border-color: #dc2626; background: color-mix(in oklab, #dc2626 14%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 20%, transparent), 0 10px 24px rgba(15, 23, 42, 0.1); } .space3-camera-marker.is-wrong-camera { border-color: #dc2626; background: color-mix(in oklab, #dc2626 14%, var(--card)); } .space3-camera-marker.is-wrong-camera .space3-camera-marker-number { background: #dc2626; } .cognitive-stage.is-input-locked .space3-camera-marker { opacity: 0.58; } .cognitive-stage.is-input-ready .space3-camera-marker { opacity: 1; } .space3-workspace.is-correct-response .space3-panel--photo .space3-side-grid { border-color: #16a34a; } .space3-workspace.is-error-response .space3-panel--photo .space3-side-grid { border-color: color-mix(in oklab, #dc2626 64%, var(--border)); } @media (max-width: 760px) { .cognitive-stage--space3 { padding-inline: 0.65rem; padding-bottom: 0.75rem; } .space3-workspace { width: min(96vw, 520px); grid-template-columns: 1fr; gap: 0.7rem; } .space3-panel--photo { transform: none; } .space3-side-grid { width: min(70vw, 285px); min-width: 0; } .space3-camera-map { width: min(96vw, 500px); min-height: 282px; padding: 2.15rem 1rem; } .space3-iso-svg { width: min(94vw, 460px); max-height: 30vh; } .space3-camera-map .space3-iso-svg { width: min(78vw, 360px); } .space3-camera-marker { min-width: 4.35rem; min-height: 3.85rem; padding: 0.16rem 0.26rem; gap: 0.04rem 0.2rem; } .space3-camera-img { width: 2rem; height: 2rem; } .space3-camera-marker-number { width: 1.15rem; height: 1.15rem; font-size: 0.68rem; } .space3-camera-marker--front { right: 7%; top: 4%; } .space3-camera-marker--right { right: 7%; bottom: 0; } .space3-camera-marker--back { left: 7%; bottom: 0; } .space3-camera-marker--left { left: 7%; top: 4%; } .space3-camera-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(94vw, 420px); } } @media (max-height: 700px) { .cognitive-stage--space3 { gap: 0.55rem; } .space3-workspace { gap: 0.45rem; } .space3-camera-map { min-height: 215px; padding-top: 1.85rem; padding-bottom: 1.85rem; } .space3-camera-img { width: clamp(1.85rem, 3.6vw, 2.55rem); height: clamp(1.85rem, 3.6vw, 2.55rem); } .space3-iso-svg { max-height: 28vh; } .space3-camera-row .space3-camera-btn { min-height: 44px; padding-block: 0.5rem; } } .cognitive-card-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.45rem, 1vw, 0.9rem); max-width: min(900px, 94vw); } .cognitive-card-item { display: grid; gap: 0.28rem; justify-items: center; color: var(--muted); font-size: clamp(0.72rem, 0.9vw, 0.9rem); font-weight: 800; } .cognitive-card-img { width: clamp(54px, 6vw, 92px); height: clamp(54px, 6vw, 92px); } .cognitive-stage--wm2 { gap: clamp(0.75rem, 1.6vw, 1.35rem); } .cognitive-wm2-rule { width: min(760px, 92vw); padding: 0.55rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--text); font-size: clamp(0.95rem, 1.1vw, 1.15rem); font-weight: 800; line-height: 1.35; } .cognitive-wm2-presenter { display: grid; justify-items: center; gap: 0.75rem; min-height: clamp(230px, 34vh, 360px); } .cognitive-wm2-presenter[hidden], .cognitive-wm2-response[hidden] { display: none !important; } .cognitive-wm2-phase { color: var(--muted); font-size: clamp(0.9rem, 1vw, 1rem); font-weight: 800; } .cognitive-wm2-presenter-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(0.45rem, 1vw, 0.85rem); width: min(900px, 94vw); } .cognitive-wm2-presenter-card { width: clamp(78px, 10vw, 132px); aspect-ratio: 5 / 7; display: grid; place-items: center; border-radius: 10px; } .cognitive-wm2-presenter-card.is-empty { border: 2px dashed color-mix(in oklab, var(--border) 82%, transparent); } .cognitive-wm2-memory-img, .cognitive-wm2-card-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .cognitive-wm2-response { display: grid; justify-items: center; gap: clamp(0.75rem, 1.3vw, 1.2rem); width: min(980px, 96vw); } /* WM2 on portrait phones: CENTRE the interactive area (slots + card pool + ZurÃ¼cksetzen/PrÃ¼fen) in the space below the rule label â€” previously it was pinned to the bottom, which stranded the drop slots low on the screen with a big empty gap above. margin-block:auto centres it (and top-anchors + scrolls if it ever overflows). */ @media (orientation: portrait) and (max-width: 640px) { .cognitive-wm2-response { margin-block: auto; } } .cognitive-wm2-response.is-feedback-locked { pointer-events: none; } .cognitive-wm2-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.45rem, 0.9vw, 0.8rem); width: min(760px, 94vw); min-height: clamp(110px, 16vh, 160px); padding: clamp(0.65rem, 1.2vw, 1rem); border: 2px dashed color-mix(in oklab, var(--border) 85%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--card) 72%, transparent); } .cognitive-wm2-slots.is-drop-target, .cognitive-wm2-slot.is-drop-target { border-color: color-mix(in oklab, var(--primary) 70%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent); } .cognitive-wm2-slot, .cognitive-wm2-pool-card { aspect-ratio: 5 / 7; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 0.22rem; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-wm2-slot { position: relative; width: clamp(62px, 7.5vw, 98px); overflow: visible; } .cognitive-wm2-slot.is-filled { border-color: color-mix(in oklab, #16a34a 68%, var(--border)); } .cognitive-wm2-slot.is-wm2-correct, .cognitive-wm2-pool-card.is-wm2-correct { border-color: color-mix(in oklab, #16a34a 78%, var(--border)); background: color-mix(in oklab, #dcfce7 58%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 20%, transparent), 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-wm2-slot.is-wm2-wrong, .cognitive-wm2-pool-card.is-wm2-wrong { border-color: color-mix(in oklab, #dc2626 78%, var(--border)); background: color-mix(in oklab, #fee2e2 60%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 18%, transparent), 0 8px 18px rgba(15, 23, 42, 0.09); } .cognitive-wm2-slot-solution { position: absolute; right: -0.38rem; bottom: -0.38rem; width: clamp(28px, 42%, 46px); aspect-ratio: 5 / 7; display: grid; place-items: center; padding: 0.08rem; border: 2px solid color-mix(in oklab, #2563eb 78%, var(--border)); border-radius: 6px; background: var(--card); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22); z-index: 2; } .cognitive-wm2-solution-img { width: 100%; height: 100%; object-fit: contain; display: block; } .cognitive-wm2-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.42rem, 0.8vw, 0.72rem); max-width: min(900px, 96vw); } .cognitive-wm2-pool-card { width: clamp(54px, 6.5vw, 82px); cursor: grab; } .cognitive-wm2-pool-card:active { cursor: grabbing; } .cognitive-wm2-pool-card.is-used { opacity: 0.34; cursor: not-allowed; } .cognitive-wm2-response.is-feedback-locked .cognitive-wm2-slot, .cognitive-wm2-response.is-feedback-locked .cognitive-wm2-pool-card { cursor: default; } .cognitive-wm2-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.55rem, 1vw, 0.85rem); } .cognitive-wm2-check, .cognitive-wm2-reset { min-width: 150px; min-height: 52px; } .cognitive-wm2-reset { font-weight: 900; } @media (max-width: 720px) { .cognitive-wm2-presenter { min-height: clamp(190px, 30vh, 280px); } .cognitive-wm2-slots { min-height: 96px; } } .cognitive-grid-cell .cognitive-grid-asset { width: 78%; height: 78%; } .cognitive-grid-cell.is-empty { visibility: hidden; pointer-events: none; } .cognitive-block-overlay, .cognitive-complete-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem); background: color-mix(in oklab, var(--bg) 76%, transparent); } .cognitive-feedback-card { width: min(620px, 94vw); display: grid; gap: 1rem; justify-items: center; text-align: center; padding: clamp(1.1rem, 2.4vw, 2rem); border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18); } .cognitive-feedback-card h3, .cognitive-feedback-card p { margin: 0; } .cognitive-feedback-kicker { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0; } .cognitive-feedback-metrics { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .cognitive-feedback-metrics span { display: grid; gap: 0.15rem; padding: 0.75rem; border-radius: 8px; background: color-mix(in oklab, var(--accent) 9%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); } @media (max-width: 620px) { .cognitive-feedback-metrics { grid-template-columns: 1fr; } } @keyframes cognitiveIgnoredInput { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } } .cognitive-stones-frame { width: min(100%, 1100px); height: min(68vh, 760px); border: 1px solid var(--border); border-radius: 8px; background: #ffffff; } .instruction-generic-demo { display: grid; place-items: center; width: min(300px, 70vw); aspect-ratio: 1.8; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--accent); font-weight: 900; font-size: clamp(1.3rem, 4vw, 2.4rem); } /* Compact registry layout for the expanded training catalogue */ .training-page .training-modes, .training-deck .training-modes { display: flex; flex-direction: column; grid-template-columns: none; gap: clamp(0.8rem, 1.2vw, 1.1rem); overflow-x: visible; } .training-page .mode-group-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.45rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .training-page .mode-group-toggle { min-height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 0.45rem 0.7rem; font-size: clamp(0.82rem, 0.9vw, 0.95rem); font-weight: 750; letter-spacing: 0; } .training-page .mode-group-toggle.is-open, .training-page .mode-group-toggle.active { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: var(--accent-soft); color: var(--accent-soft-contrast); } .training-page .mode-group-panels { width: 100%; align-items: stretch; gap: 0; } .training-page .mode-group-panel { width: 100%; display: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(0.55rem, 0.9vw, 0.85rem); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .training-page .mode-group-panel.is-open { display: grid; } .training-page .training-mode-btn { min-height: clamp(150px, 14vw, 172px); height: 100%; padding: 1.15rem 2.8rem 1.15rem 0.95rem; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.7rem; row-gap: 0.32rem; align-content: center; align-items: center; justify-items: start; text-align: left; border-radius: 20px; border-color: color-mix(in oklab, var(--border) 88%, var(--text) 12%); background: color-mix(in oklab, var(--card) 94%, var(--accent-secondary-soft) 6%); box-shadow: var(--shadow-subtle); transform: none; } .training-page .training-mode-btn.active { border-color: color-mix(in oklab, var(--accent) 52%, var(--border)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent); } .training-page .training-mode-btn .mode-icon { grid-column: 1; grid-row: 1 / span 2; } .training-page .training-mode-btn .mode-icon--registry { width: 42px; height: 42px; border-radius: 8px; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); color: var(--accent-readable); font-size: 0.82rem; font-weight: 850; } .training-page .training-mode-btn .mode-icon-img { max-width: 42px; max-height: 42px; } .training-page .training-mode-btn .home-label { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; width: 100%; font-size: clamp(0.92rem, 0.98vw, 1.02rem); line-height: 1.15; color: var(--text); overflow-wrap: anywhere; } .training-page .training-mode-btn .mode-description { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; width: 100%; color: var(--muted); font-size: clamp(0.74rem, 0.78vw, 0.84rem); line-height: 1.24; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .training-page .training-mode-btn .mode-gear-btn { top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; font-size: 1rem; box-shadow: none; } /* "NEU" badge for modes changed since the last deploy â€” sits at the top centre of the training button, between the favourite (top-left) and gear (top-right) controls. */ .training-page .training-mode-btn .mode-new-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.22rem; height: 26px; padding: 0 0.5rem; border-radius: 999px; background: color-mix(in oklab, #f59e0b 18%, var(--card)); border: 1px solid color-mix(in oklab, #f59e0b 55%, var(--border)); color: color-mix(in oklab, #b45309 72%, var(--text)); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em; line-height: 1; pointer-events: none; white-space: nowrap; z-index: 3; } .training-page .training-mode-btn .mode-new-badge-icon { width: 15px; height: 15px; object-fit: contain; } /* Same NEU badge inside the program builder: the buttons there are clones of the home training buttons (class .program-mode-item, inside body.programs-page), so the .training-page rule above never matches. Without this the badge falls back to the raw full-size special.png with no pointer-events:none, inflating the button and blocking clicks (reported via feedback). */ .program-mode-item .mode-new-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.22rem; height: 26px; padding: 0 0.5rem; border-radius: 999px; background: color-mix(in oklab, #f59e0b 18%, var(--card)); border: 1px solid color-mix(in oklab, #f59e0b 55%, var(--border)); color: color-mix(in oklab, #b45309 72%, var(--text)); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em; line-height: 1; pointer-events: none; white-space: nowrap; z-index: 3; } .program-mode-item .mode-new-badge-icon { width: 15px; height: 15px; object-fit: contain; } .training-page .training-mode-btn .mode-favorite-btn, .training-page .program-btn .mode-favorite-btn, .training-page .program-btn .program-favorite-btn { position: absolute; top: 8px; left: 8px; width: clamp(44px, 3.6vw, 48px); height: clamp(44px, 3.6vw, 48px); border-radius: 50%; border: 1px solid color-mix(in oklab, var(--border) 78%, transparent); background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--muted); display: grid; place-items: center; font-size: 1.08rem; line-height: 1; box-shadow: none; cursor: pointer; user-select: none; } body.theme-dark .training-page .training-mode-btn .mode-favorite-btn, body.theme-dark .training-page .program-btn .mode-favorite-btn, body.theme-dark .training-page .program-btn .program-favorite-btn { background: color-mix(in oklab, var(--card) 35%, #000000 65%); border-color: color-mix(in oklab, var(--border) 70%, #000000 30%); } .training-page .training-mode-btn.is-favorite .mode-favorite-btn, .training-page .training-mode-btn .mode-favorite-btn.is-favorite, .training-page .program-btn.is-favorite .mode-favorite-btn, .training-page .program-btn .mode-favorite-btn.is-favorite, .training-page .program-btn.is-favorite .program-favorite-btn, .training-page .program-btn .program-favorite-btn.is-favorite, .program-btn-actions .program-favorite-btn.is-favorite { border-color: color-mix(in oklab, #f59e0b 58%, var(--border)); background: color-mix(in oklab, #f59e0b 18%, var(--card)); color: #b45309; } .training-page .training-mode-btn .mode-favorite-btn:focus-visible, .training-page .program-btn .mode-favorite-btn:focus-visible, .training-page .program-btn .program-favorite-btn:focus-visible, .program-btn-actions .program-favorite-btn:focus-visible { outline: 2px solid color-mix(in oklab, #f59e0b 55%, transparent); outline-offset: 2px; } .program-btn-actions .program-favorite-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--border) 78%, transparent); background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--muted); display: grid; place-items: center; font-size: 1rem; line-height: 1; cursor: pointer; user-select: none; } @media (hover: hover) and (pointer: fine) { .training-page .training-mode-btn:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--accent) 32%, var(--border)); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); } } @media (max-width: 620px) { .training-page .mode-group-panel { grid-template-columns: 1fr; } .training-page .training-mode-btn { min-height: 120px; } } /* Flat training catalogue and cognitive domain colours */ .training-page .training-modes, .training-deck .training-modes { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--training-column-width, 190px), 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); align-items: start; } .training-page .mode-group-row, .training-page .mode-group-panels { display: none; } .mode-btn.red { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; } .mode-btn.blue { background: #2563EB; color: var(--text-on-dark); border-color: transparent; } .mode-btn.yellow { background: #FBBF24; color: #2F2A25; border-color: transparent; } .mode-btn.green { background: #16A34A; color: var(--text-on-dark); border-color: transparent; } .mode-btn.purple { background: #9333ea; color: var(--text-on-dark); border-color: transparent; } .training-page .training-mode-btn.red, .training-page .training-mode-btn.blue, .training-page .training-mode-btn.yellow, .training-page .training-mode-btn.green, .training-page .training-mode-btn.purple, .program-mode-overlay .training-mode-btn.red, .program-mode-overlay .training-mode-btn.blue, .program-mode-overlay .training-mode-btn.yellow, .program-mode-overlay .training-mode-btn.green, .program-mode-overlay .training-mode-btn.purple { --mode-accent: var(--accent); --mode-soft: color-mix(in oklab, var(--mode-accent) 10%, var(--card)); --mode-border: color-mix(in oklab, var(--mode-accent) 38%, var(--border)); background: var(--mode-soft); border-color: var(--mode-border); color: var(--text); } .training-page .training-mode-btn.red, .program-mode-overlay .training-mode-btn.red { --mode-accent: #D01C1F; } .training-page .training-mode-btn.blue, .program-mode-overlay .training-mode-btn.blue { --mode-accent: #075992; } .training-page .training-mode-btn.yellow, .program-mode-overlay .training-mode-btn.yellow { --mode-accent: #FBBF24; } .training-page .training-mode-btn.green, .program-mode-overlay .training-mode-btn.green { --mode-accent: #16A34A; } .training-page .training-mode-btn.purple, .program-mode-overlay .training-mode-btn.purple { --mode-accent: #9333ea; } .training-page .training-mode-btn.red .mode-icon--registry, .training-page .training-mode-btn.blue .mode-icon--registry, .training-page .training-mode-btn.yellow .mode-icon--registry, .training-page .training-mode-btn.green .mode-icon--registry, .training-page .training-mode-btn.purple .mode-icon--registry, .program-mode-overlay .training-mode-btn.red .mode-icon--registry, .program-mode-overlay .training-mode-btn.blue .mode-icon--registry, .program-mode-overlay .training-mode-btn.yellow .mode-icon--registry, .program-mode-overlay .training-mode-btn.green .mode-icon--registry, .program-mode-overlay .training-mode-btn.purple .mode-icon--registry { background: var(--mode-accent); border-color: transparent; color: var(--text-on-dark); } .training-page .training-mode-btn.yellow .mode-icon--registry, .program-mode-overlay .training-mode-btn.yellow .mode-icon--registry { color: #2F2A25; } .training-page .training-mode-btn.active { border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 62%, var(--border)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } .training-page .training-mode-btn.is-favorite { border-color: #f59e0b; } #trainingModes .program-btn.is-favorite, .training-favorite-modes .program-btn.is-favorite { border-color: #f59e0b; } @media (hover: hover) and (pointer: fine) { .training-page .training-mode-btn:hover { transform: none; border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } .program-mode-overlay .training-mode-btn:hover { transform: none; border-color: color-mix(in oklab, var(--mode-accent, var(--accent)) 50%, var(--border)); box-shadow: 0 8px 18px color-mix(in oklab, var(--mode-accent, var(--accent)) 18%, transparent); } .training-page .training-mode-btn .mode-favorite-btn:hover, .training-page .program-btn .mode-favorite-btn:hover, .training-page .program-btn .program-favorite-btn:hover, .program-btn-actions .program-favorite-btn:hover { border-color: color-mix(in oklab, #f59e0b 58%, var(--border)); background: color-mix(in oklab, #f59e0b 14%, var(--card)); color: #b45309; } .training-programs .program-btn:hover { transform: none; } } /* Settings: editable fields and difficulty progression */ .settings-columns { grid-template-columns: minmax(300px, 0.95fr) minmax(340px, 1.05fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; align-items: stretch; } .settings-column-left, .settings-column-right { display: block; height: 100%; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: clamp(12px, 1.4vw, 18px); } #soundToggleGroup { margin-top: clamp(1.1rem, 2vw, 1.6rem); } .settings-column-left > h3, .settings-column-right > h3 { margin: 0.25rem 0 0.35rem; padding-left: 0; } .settings-adaptive-status { display: grid; gap: 0.3rem; margin: 0.75rem 0 1rem; padding: 0.8rem 0.9rem; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--accent) 8%, var(--card)); color: var(--text); } .settings-adaptive-status strong { color: var(--accent); font-size: var(--fs-sm); } .settings-adaptive-status span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; } .settings-difficulty-group { padding-left: 0 !important; } .settings-difficulty-list { display: grid; gap: 0.55rem; } .settings-difficulty-note { margin: 0 0 0.2rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; } .settings-difficulty-item { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.65rem 0.75rem; border: 1px solid color-mix(in oklab, var(--border) 74%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--panel) 62%, transparent); } .settings-difficulty-level { display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); font-size: var(--fs-xs); font-weight: 900; white-space: nowrap; } .settings-difficulty-text { color: var(--text); font-size: var(--fs-sm); line-height: 1.45; } .settings-difficulty-scroll { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid color-mix(in oklab, var(--border) 74%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--panel) 62%, transparent); } .settings-difficulty-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--text); } .settings-difficulty-table th, .settings-difficulty-table td { padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent); white-space: nowrap; } .settings-difficulty-table tbody tr:last-child td { border-bottom: none; } .settings-difficulty-table thead th { background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 900; position: sticky; top: 0; } .settings-difficulty-table .settings-difficulty-th-level, .settings-difficulty-table .settings-difficulty-td-level { position: sticky; left: 0; background: color-mix(in oklab, var(--panel) 92%, transparent); z-index: 1; } .settings-difficulty-table thead .settings-difficulty-th-level { background: color-mix(in oklab, var(--accent) 12%, var(--panel)); z-index: 2; } .settings-difficulty-footnotes { margin: 0.6rem 0 0; display: grid; gap: 0.25rem 0.65rem; grid-template-columns: max-content minmax(0, 1fr); font-size: var(--fs-xs); color: var(--muted); } .settings-difficulty-footnotes dt { font-weight: 700; color: var(--text); } .settings-difficulty-footnotes dd { margin: 0; } .program-color-red { background: #D01C1F; color: var(--text-on-dark); border-color: transparent; } .program-color-blue { background: #2563EB; color: var(--text-on-dark); border-color: transparent; } .program-color-yellow { background: #FBBF24; color: #2F2A25; border-color: transparent; } .program-color-green { background: #16A34A; color: var(--text-on-dark); border-color: transparent; } .program-color-purple { background: #9333ea; color: var(--text-on-dark); border-color: transparent; } .program-color-purple .program-step-meta, .program-color-purple .program-step-summary { color: color-mix(in oklab, var(--text-on-dark) 86%, transparent); } .program-color-red .program-step-meta, .program-color-red .program-step-summary, .program-color-blue .program-step-meta, .program-color-blue .program-step-summary, .program-color-green .program-step-meta, .program-color-green .program-step-summary { color: color-mix(in oklab, var(--text-on-dark) 86%, transparent); } .program-color-yellow .program-step-meta, .program-color-yellow .program-step-summary { color: #5F4310; } @media (max-width: 620px) { .training-page .training-modes, .training-deck .training-modes { grid-template-columns: 1fr; } .training-favorite-modes { --training-favorite-button-width: 100%; } } /* Quick-Einstellungen aus Training/Programmen: kein Panel im Panel. */ .settings-overlay.is-quick .settings-layout { margin-top: 0; height: 100%; min-height: 0; } .settings-overlay.is-quick .settings-columns { grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .settings-overlay.is-quick .settings-difficulty-column { display: none; } /* Scaled cognitive instruction viewport: uses the real game DOM inside mockup screens. */ .cognitive-instruction-demo-container { width: 100%; height: 100%; min-height: 0; } .cognitive-demo-screen { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; container-type: size; overflow: hidden; background: var(--bg); color: var(--text); border-radius: 8px; font-family: 'Montserrat', Arial, sans-serif; } .cognitive-demo-gamearea { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; container-type: size; overflow: hidden; background: var(--bg); } /* Safety net for the Anleitungen demos: the game stimulus rules are sized in vw for the full viewport and overflow the small mock screen on modes without a per-mode demo override (flex1, prospect1, space1, wm2, â€¦). Cap any demo image/stimulus to the gamearea (cqh references this size container) so nothing spills out. Per-mode cqw/cqh overrides above still fine-tune the well-covered modes. */ .cognitive-demo-gamearea :is(img, [class*="-img"], .cognitive-target, .cognitive-shape) { max-width: 100%; max-height: 88cqh; } .cognitive-demo-caption { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.1rem; padding: 0.4rem 0.85rem; font: 600 clamp(0.74rem, 1.55cqw, 0.92rem)/1.25 'Montserrat', Arial, sans-serif; color: var(--text); background: var(--card); border-top: 1px solid var(--border); z-index: 72; } .cognitive-demo-progress { display: none; position: absolute; left: 0; width: 100%; height: 6px; z-index: 70; overflow: hidden; background: var(--disabled-bg); } .cognitive-demo-progress--top { top: 0; } .cognitive-demo-progress--bottom { bottom: 0; } .cognitive-demo-progress-fill { width: 0; height: 100%; background: var(--accent); transition: width 260ms ease; } .cognitive-demo-progress-fill--duration { background: color-mix(in oklab, var(--accent) 68%, #16a34a 32%); } .cognitive-demo-actions { position: absolute; top: 12px; right: 12px; z-index: 74; display: flex; } .cognitive-demo-actions button { min-height: 28px; padding: 0.34rem 0.62rem; border: 0; border-radius: 8px; background: #D01C1F; color: #fff; font: 800 0.72rem/1 'Montserrat', Arial, sans-serif; } .cognitive-demo-screen .cognitive-stage { --cognitive-fixation-align-offset: -10px; --cognitive-stimulus-size: clamp(54px, 10cqw, 96px); padding: 54px 22px 22px; gap: clamp(0.4rem, 1.45cqw, 0.78rem); background: color-mix(in oklab, var(--bg) 90%, transparent); } .cognitive-demo-screen .cognitive-persistent-header { top: 20px; width: min(78%, 640px); gap: 0.18rem; } .cognitive-demo-screen .cognitive-persistent-title { font-size: clamp(0.78rem, 1.55cqw, 1.02rem); line-height: 1.05; } .cognitive-demo-screen .cognitive-persistent-hint { max-width: min(520px, 86%); font-size: clamp(0.58rem, 1.15cqw, 0.78rem); line-height: 1.18; } .cognitive-demo-screen .cognitive-target { min-height: clamp(54px, 18cqh, 96px); } .cognitive-demo-screen .cognitive-asset-shell { border-radius: 10px; } .cognitive-demo-screen .cognitive-go-stop-img, .cognitive-demo-screen .cognitive-arrow-img { width: clamp(54px, 10cqw, 96px); height: clamp(54px, 10cqw, 96px); } .cognitive-demo-screen .cognitive-stage--leftright .cognitive-arrow-img, .cognitive-demo-screen .cognitive-stage--stopsignal .cognitive-arrow-img { width: clamp(76px, 15cqw, 132px); height: clamp(76px, 15cqw, 132px); } /* IMPULSE 2 demo: the demo stage only gets --stopsignal (the live game adds --impulse2 via its persistent-response surface, which the demo bypasses), so the hammer/button PNGs would render at their raw 512px size. Size + lay them out for the small demo box here. */ .cognitive-demo-gamearea .cognitive-stage--stopsignal .cognitive-arrow.cognitive-impulse2 { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(130px, 42cqh, 210px); } .cognitive-demo-gamearea .cognitive-stage--stopsignal .cognitive-impulse2-hammer { position: absolute; left: 50%; top: 50%; width: clamp(72px, 19cqw, 134px); height: auto; /* Keep the centring translate (the live game's strike keyframes start from this exact transform); dropping it pushed the hammer down-and-right of centre. */ transform: translate(-50%, -50%) rotate(-45deg); transform-origin: 50% 50%; z-index: 2; } .cognitive-demo-gamearea .cognitive-stage--stopsignal .cognitive-impulse2-button { position: absolute; top: 50%; left: 50%; /* Demo hammer is smaller, so use a smaller centre-offset reach + drop to match â€” the ghost sits out-and-down where the swung hammer head lands, and flips when it spawns on the right. */ --impulse2-reach: clamp(48px, 13cqw, 92px); --impulse2-drop: clamp(26px, 7cqw, 52px); width: clamp(50px, 13cqw, 90px); height: auto; transform: translate(calc(-50% + var(--side-x, 0px)), calc(-50% + var(--impulse2-drop))) scaleX(var(--ghost-flip, 1)); z-index: 1; } .cognitive-demo-screen .cognitive-animal-img { width: clamp(68px, 13cqw, 116px); height: clamp(68px, 13cqw, 116px); } .cognitive-demo-screen .cognitive-flanker-assets { gap: clamp(0.16rem, 0.72cqw, 0.38rem); } .cognitive-demo-screen .cognitive-flanker-img { width: clamp(28px, 5cqw, 52px); height: clamp(28px, 5cqw, 52px); } .cognitive-demo-screen .cognitive-choice-prompt, .cognitive-demo-screen .cognitive-sequence-display { max-width: min(86%, 640px); font-size: clamp(0.95rem, 3.8cqw, 1.65rem); line-height: 1.05; } .cognitive-demo-screen .cognitive-response-row { max-width: 92%; gap: 0.42rem; } .cognitive-demo-screen .cognitive-response-btn { min-width: min(84px, 20cqw); min-height: 34px; padding: 0.44rem 0.58rem; border-radius: 7px; font-size: clamp(0.6rem, 1.1cqw, 0.76rem); line-height: 1.1; } .cognitive-demo-screen .cognitive-stage--vigilance { --cognitive-vigil-symbol-size: clamp(62px, 14cqw, 108px); } .cognitive-demo-screen .cognitive-stage--vigilance .cognitive-target { min-height: clamp(72px, 22cqh, 116px); } .cognitive-demo-screen .cognitive-vigil-target-guide, .cognitive-demo-screen .cognitive-speed-target-guide { gap: 0.32rem; font-size: clamp(0.58rem, 1.05cqw, 0.74rem); } .cognitive-demo-screen .cognitive-vigil-target-image-slot { width: clamp(26px, 4.6cqw, 42px); height: clamp(26px, 4.6cqw, 42px); } .cognitive-demo-screen .cognitive-speed-target-image-slot { width: clamp(22px, 4cqw, 34px); height: clamp(22px, 4cqw, 34px); } /* FLEX rule-sequence strip: the base track sizes its 15 columns by 4vw (~42px on a wide screen), so in the small demo box the strip is far too wide and the A/B blocks look spread out. Scale it to the demo container so the blocks cluster like the real game. */ .cognitive-demo-screen .cognitive-rule-sequence { width: min(96cqw, 380px); } .cognitive-demo-screen .cognitive-rule-sequence-track { grid-template-columns: repeat(15, clamp(14px, 4cqw, 22px)); gap: clamp(0.08rem, 0.4cqw, 0.2rem); } .cognitive-demo-screen .cognitive-rule-sequence-item { height: clamp(14px, 4cqw, 22px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide { width: min(62cqw, 390px); max-width: 72%; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide--stacked, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide--stacked { width: min(56cqw, 340px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide-item, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide-item { min-width: 0; width: 100%; gap: 0.28rem; padding: 0.28rem 0.38rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide-content, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide-content { gap: 0.16rem; flex-wrap: wrap; } .cognitive-demo-screen .cognitive-rule-guide-symbol { width: 1.35rem; height: 1.35rem; font-size: 0.72rem; } .cognitive-demo-screen .cognitive-rule-guide-inline-img { width: 1.15rem; height: 1.15rem; } .cognitive-demo-screen .cognitive-rule-guide-inline-img.is-arrow { width: 1.35rem; } .cognitive-demo-screen .cognitive-stage--flex .cognitive-target { width: min(60cqw, 380px); min-height: clamp(112px, 30cqh, 165px); } .cognitive-demo-screen .cognitive-stage--flex-animal, .cognitive-demo-screen .cognitive-stage--flex { gap: clamp(0.34rem, 1.25cqh, 0.68rem); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-sequence, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-sequence { margin-bottom: 0; width: min(82%, 500px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide { margin-bottom: 0; width: min(70%, 440px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-target { min-height: clamp(82px, 24cqh, 144px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-row { margin-top: 0; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn { min-width: min(96px, 22cqw); min-height: 34px; padding: 0.36rem 0.48rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-stacked-icon { min-height: 58px; padding-block: 0.38rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-content-rows { gap: 0.22rem; min-height: 64px; padding-block: 0.38rem; } .cognitive-demo-screen .cognitive-flex-window-board { width: min(58cqw, 360px); gap: 0.42rem; } .cognitive-demo-screen .cognitive-flex-window { min-height: clamp(86px, 21cqh, 128px); gap: 0.28rem; padding: 0.38rem; } .cognitive-demo-screen .cognitive-flex-window-slot { min-height: clamp(44px, 11cqh, 68px); } .cognitive-demo-screen .cognitive-flex-object { width: clamp(36px, 7cqw, 62px); height: clamp(36px, 7cqw, 62px); } .cognitive-demo-screen .cognitive-prospect-target { min-height: clamp(88px, 24cqh, 148px); } .cognitive-demo-screen .cognitive-prospect-arrow.is-prospect-standard { width: clamp(48px, 9cqw, 82px); height: clamp(48px, 9cqw, 82px); } .cognitive-demo-screen .cognitive-prospect-arrow.is-prospect-special-cue { width: clamp(56px, 10cqw, 94px); height: clamp(56px, 10cqw, 94px); } .cognitive-demo-screen .cognitive-stage--prospective .cognitive-response-row { width: min(58cqw, 300px); gap: 0.36rem; } .cognitive-demo-screen .cognitive-stage--prospective .cognitive-response-btn { min-height: 34px; padding: 0.36rem 0.46rem; } .cognitive-demo-screen .cognitive-response-btn.is-prospect-special { min-width: min(9.5rem, 100%); } .cognitive-demo-screen .cognitive-stage--calculation .cognitive-response-row { width: min(82%, 360px); gap: 0.45rem; } .cognitive-demo-screen .cognitive-stage--calculation .cognitive-response-btn { min-height: 42px; padding: 0.48rem 0.6rem; font-size: clamp(0.9rem, 3.1cqw, 1.32rem); } .cognitive-demo-screen .cognitive-stage--calculation-chain { gap: clamp(0.25rem, 1cqh, 0.45rem); padding-top: clamp(44px, 12cqh, 58px); } .cognitive-demo-screen .cognitive-calc-chain { width: min(86cqw, 380px); gap: clamp(0.22rem, 0.8cqh, 0.42rem); } .cognitive-demo-screen .cognitive-calc-status { min-height: 1rem; font-size: clamp(0.54rem, 1.05cqw, 0.72rem); } .cognitive-demo-screen .cognitive-calc-token-display { width: min(64cqw, 260px); min-height: clamp(52px, 15cqh, 82px); } .cognitive-demo-screen .cognitive-calc-token { min-width: clamp(2.6rem, 11cqw, 4.2rem); min-height: clamp(2.6rem, 11cqw, 4.2rem); font-size: clamp(1.75rem, 7cqw, 3.1rem); } .cognitive-demo-screen .cognitive-calc-progress { width: min(64cqw, 260px); gap: 0.18rem; } .cognitive-demo-screen .cognitive-calc-progress-dot { width: 0.36rem; height: 0.36rem; } .cognitive-demo-screen .cognitive-calc-answer-wrap, .cognitive-demo-screen .cognitive-calc-keypad { width: min(64cqw, 260px); } .cognitive-demo-screen .cognitive-calc-answer-wrap { gap: 0.34rem; } .cognitive-demo-screen .cognitive-calc-answer-label { font-size: clamp(0.54rem, 1cqw, 0.68rem); } .cognitive-demo-screen .cognitive-calc-answer { min-height: clamp(32px, 8.8cqh, 46px); padding: 0.16rem 0.5rem; font-size: clamp(1.2rem, 4.5cqw, 1.9rem); } .cognitive-demo-screen .cognitive-calc-keypad { gap: 0.22rem; } .cognitive-demo-screen .cognitive-calc-key { min-height: clamp(26px, 7cqh, 36px); border-radius: 7px; font-size: clamp(0.82rem, 2.5cqw, 1.1rem); } .cognitive-demo-screen .cognitive-rule-guide { width: min(86%, 560px); gap: 0.32rem; } .cognitive-demo-screen .cognitive-rule-guide-item { min-height: 34px; padding: 0.34rem 0.48rem; border-radius: 7px; font-size: clamp(0.58rem, 1cqw, 0.72rem); } .cognitive-demo-screen .cognitive-rule-sequence { width: min(86%, 520px); } .cognitive-demo-screen .cognitive-rule-sequence-track { gap: 0.18rem; } .cognitive-demo-screen .cognitive-rule-sequence-item { width: 22px; height: 22px; font-size: 0.66rem; } .cognitive-demo-screen .cognitive-grid { gap: clamp(0.16rem, 0.52cqw, 0.34rem); } .cognitive-demo-screen .cognitive-grid--six { width: min(54cqw, 270px); } .cognitive-demo-screen .cognitive-grid--small { width: min(34cqw, 185px); } .cognitive-demo-screen .cognitive-construct-grids .cognitive-grid--small { width: 100%; max-width: 100%; } .cognitive-demo-screen .cognitive-grid-cell { font-size: clamp(0.68rem, 1.35cqw, 0.94rem); border-radius: 7px; } .cognitive-demo-screen .cognitive-grid-cell .cognitive-grid-asset { width: 74%; height: 74%; } .cognitive-demo-screen .cognitive-construct-grids { grid-row: 1; width: min(76cqw, 340px); gap: 0.58rem; transform: none; } .cognitive-demo-screen .cognitive-construct-picker { grid-row: 2; width: min(76cqw, 340px); gap: 0.28rem; } .cognitive-demo-screen .cognitive-stage--construct { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; justify-items: center; } .cognitive-demo-screen .cognitive-stage--construct .cognitive-response-row { grid-row: 3; } .cognitive-demo-screen .cognitive-construct-picker-btn { width: 32px; height: 32px; } .cognitive-demo-screen .cognitive-construct-erase-btn { min-width: 4.5rem; height: 32px; padding: 0 0.55rem; font-size: 0.68rem; } .cognitive-demo-screen .cognitive-stage--logic-sequence, .cognitive-demo-screen .cognitive-stage--logic-matrix, .cognitive-demo-screen .cognitive-stage--construct { gap: clamp(0.38rem, 1.25cqh, 0.72rem); } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-row, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-row { width: min(82%, 420px); gap: 0.42rem; } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-btn { min-height: 36px; padding: 0.42rem 0.5rem; font-size: clamp(0.68rem, 1.35cqw, 0.92rem); } .cognitive-demo-screen .cognitive-logic-matrix { width: min(78cqw, 600px); gap: clamp(0.28rem, 0.9cqh, 0.44rem); } .cognitive-demo-screen .cognitive-logic-matrix-row { grid-template-columns: minmax(60px, 0.62fr) repeat(2, minmax(50px, 0.72fr)) 26px minmax(58px, 0.72fr); gap: 0.32rem; } .cognitive-demo-screen .cognitive-logic-matrix-label { font-size: clamp(0.58rem, 0.92cqw, 0.74rem); } .cognitive-demo-screen .cognitive-logic-matrix-cell { min-height: clamp(50px, 16cqh, 82px); font-size: clamp(1.1rem, 3cqw, 2rem); } .cognitive-demo-screen .cognitive-logic-card-img { width: clamp(34px, 6cqw, 58px); height: clamp(44px, 9cqh, 76px); } .cognitive-demo-screen .cognitive-logic-card-value { min-width: 1.3rem; min-height: 1.3rem; font-size: 0.72rem; } .cognitive-demo-screen .cognitive-logic-matrix-arrow { font-size: clamp(0.9rem, 2cqw, 1.3rem); } .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix { gap: clamp(0.2rem, 0.8cqh, 0.4rem); /* Center the matrix vertically and keep its top edge clear of the persistent header (title + hint reach ~52px). flex-start with a tiny padding-top let the board slide up under the header and pushed all the empty space to the bottom. */ justify-content: center; overflow-y: auto; padding-top: clamp(46px, 12cqh, 60px); padding-bottom: clamp(10px, 2.4cqh, 16px); } .cognitive-demo-screen .cognitive-logic-pattern-board { width: min(38cqh, 42cqw, 188px); gap: clamp(0.12rem, 0.4cqw, 0.22rem); } .cognitive-demo-screen .cognitive-logic-pattern-cell { border-radius: 7px; box-shadow: 0 5px 12px rgba(15, 23, 42, 0.09); } .cognitive-demo-screen .cognitive-logic-pattern-symbol-card { padding: clamp(0.16rem, 0.48cqw, 0.28rem); } .cognitive-demo-screen .cognitive-logic-pattern-symbol-card.is-missing { font-size: clamp(1rem, 4cqw, 1.7rem); } .cognitive-demo-screen .cognitive-logic-pattern-symbol { width: clamp(13px, 38%, 26px); height: clamp(13px, 38%, 26px); } .cognitive-demo-screen .cognitive-logic-pattern-symbol-card[data-count="1"] .cognitive-logic-pattern-symbol { width: clamp(20px, 52%, 34px); height: clamp(20px, 52%, 34px); } .cognitive-demo-screen .cognitive-logic-matrix-rule { max-width: min(72cqw, 360px); font-size: clamp(0.5rem, 1.05cqw, 0.66rem); } .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-row { width: min(72cqw, 350px); gap: clamp(0.22rem, 0.62cqw, 0.34rem); } .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { min-height: clamp(30px, 7cqh, 44px); padding: 0.1rem; } /* The option card is square-driven by its symbol card (~102px) â†’ too tall. Cap the symbol card so the response buttons are shorter while staying 3-across. */ .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .is-logic-matrix-option .cognitive-logic-pattern-symbol-card { max-height: clamp(40px, 11cqh, 56px); } .cognitive-demo-screen .cognitive-stage--divide-driving, .cognitive-demo-screen .cognitive-stage--divide-tower, .cognitive-demo-screen .cognitive-stage--divide-airport { padding: clamp(42px, 12cqh, 56px) clamp(10px, 2.3cqw, 18px) clamp(12px, 2.8cqh, 18px); gap: clamp(0.32rem, 1.25cqh, 0.55rem); } .cognitive-demo-screen .cognitive-stage--divide-airport { justify-content: center; align-items: center; } .cognitive-demo-screen .divide-drive-scene, .cognitive-demo-screen .divide-tower-cockpit, .cognitive-demo-screen .divide-airport-scene { width: min(92%, 720px); border-radius: 8px; } /* DIVIDE 3 demo: keep the windows centred and shrink them so ALL fit the small demo area (cqw/cqh resolve against the container-type:size demo gamearea). */ .cognitive-demo-screen .divide-life-scene { width: 100%; min-height: 0; height: 100%; padding: clamp(0.3rem, 2cqw, 0.9rem); gap: clamp(0.3rem, 1.4cqh, 0.7rem); } .cognitive-demo-screen .divide-life-grid, .cognitive-demo-screen .divide-life-grid[data-panel-count="3"], .cognitive-demo-screen .divide-life-grid[data-panel-count="4"] { width: min(86cqw, 72cqh); gap: clamp(0.3rem, 2cqw, 0.7rem); } .cognitive-demo-screen .divide-life-body { /* Demo panels are short (4 windows in the grid); the inherited ~1.1rem body padding left almost no vertical room. Switch to flex so the figure resolves its height against the (short, definite) body height â€” in the base grid track a %-height is indeterminate and the icon ballooned off the body WIDTH and got clipped. */ padding: clamp(0.25rem, 1.4cqw, 0.55rem); display: flex; align-items: center; justify-content: center; min-height: 0; } .cognitive-demo-screen .divide-life-figure { /* Fill the panel body and use flex (not the base grid, whose auto row sizes to the image's natural height and overflows) so the icon's max-height:100% resolves against the figure's definite height. */ width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; } .cognitive-demo-screen .divide-life-icon-img { /* min:0 lets the image shrink below its intrinsic size inside the short flex figure. */ min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; } .cognitive-demo-screen .divide-life-titlebar { padding: clamp(0.2rem, 1cqw, 0.4rem) clamp(0.3rem, 1.4cqw, 0.6rem); } .cognitive-demo-screen .divide-life-title { font-size: clamp(0.5rem, 2.4cqw, 0.8rem); } .cognitive-demo-screen .divide-life-dots i { width: clamp(0.34rem, 1.5cqw, 0.6rem); height: clamp(0.34rem, 1.5cqw, 0.6rem); } .cognitive-demo-screen .divide-life-status { min-height: 0; font-size: clamp(0.55rem, 2.2cqw, 0.82rem); } .cognitive-demo-screen .divide-drive-scene, .cognitive-demo-screen .divide-airport-scene { flex: 0 0 auto; height: clamp(220px, 52cqh, 280px); min-height: 220px; } .cognitive-demo-screen .divide-airport-node { width: clamp(48px, 10cqw, 74px); } .cognitive-demo-screen .divide-airport-plane { width: clamp(44px, 9cqw, 68px); } .cognitive-demo-screen .divide-airport-status--demo-bottom { top: auto; bottom: clamp(0.5rem, 1.9cqh, 0.9rem); width: min(560px, calc(100% - 1.4rem)); min-height: 34px; padding: 0.32rem 0.58rem; font-size: clamp(0.58rem, 1.05cqw, 0.76rem); line-height: 1.12; } .cognitive-demo-screen .divide-airport-cooldown, .cognitive-demo-screen .divide-airport-plane-countdown, .cognitive-demo-screen .divide-airport-code { font-size: clamp(0.58rem, 1.05cqw, 0.76rem); } .cognitive-demo-screen .divide-drive-car { width: clamp(68px, 13cqw, 118px); } .cognitive-demo-screen .divide-speed-panel { width: 86%; bottom: 0.52rem; padding: 0.34rem 0.42rem; } .cognitive-demo-screen .divide-speed-header, .cognitive-demo-screen .divide-speed-scale, .cognitive-demo-screen .divide-speed-deviation { font-size: clamp(0.52rem, 0.95cqw, 0.7rem); } .cognitive-demo-screen .divide-speed-meter { height: clamp(14px, 3cqh, 20px); } .cognitive-demo-screen .divide-speed-touch-zones { display: none; } .cognitive-demo-screen .divide-drive-traffic img { width: clamp(34px, 6.4cqw, 58px); height: clamp(34px, 6.4cqw, 58px); } .cognitive-demo-screen .divide-drive-traffic { top: clamp(8px, 8cqh, 30px); z-index: 18; min-width: clamp(56px, 12cqw, 82px); padding: 0.26rem 0.34rem; gap: 0.1rem; } .cognitive-demo-screen .divide-drive-traffic span { font-size: clamp(0.54rem, 1.2cqw, 0.72rem); } .cognitive-demo-screen .divide-drive-tree-layer { bottom: calc(100% - var(--divide-road-top) + 60px); } .cognitive-demo-screen .divide-drive-tree { width: clamp(66px, 7.4vw, 116px); } .cognitive-demo-screen .divide-drive-tree--2, .cognitive-demo-screen .divide-drive-tree--5 { width: clamp(56px, 6.4vw, 102px); } .cognitive-demo-screen .divide-drive-tree--3 { width: clamp(76px, 8.2vw, 130px); } .cognitive-demo-screen .divide-status-strip, .cognitive-demo-screen .divide-tower-log { font-size: clamp(0.56rem, 1cqw, 0.72rem); } .cognitive-demo-screen .divide-action-row { max-width: 94%; gap: 0.38rem; } .cognitive-demo-screen .divide-action-btn { min-width: 82px; min-height: 34px; padding: 0.36rem 0.46rem; } .cognitive-demo-screen .divide-action-key { font-size: 0.58rem; } .cognitive-demo-screen .divide-tower-cockpit { grid-template-columns: minmax(0, 1.72fr) minmax(150px, 0.74fr); gap: 0.38rem; min-height: 0; height: clamp(205px, 54cqh, 238px); padding: 0.46rem; } .cognitive-demo-screen .divide-tower-radar { min-height: 0; height: 100%; } .cognitive-demo-screen .divide-tower-panel-stack { grid-template-rows: minmax(46px, auto) minmax(46px, auto) minmax(42px, 1fr); gap: 0.32rem; min-height: 0; } .cognitive-demo-screen .divide-tower-panel { gap: 0.18rem; min-height: 46px; padding: 0.36rem 0.42rem; border-radius: 7px; } .cognitive-demo-screen .divide-tower-panel strong { font-size: clamp(0.78rem, 1.45cqw, 0.96rem); } .cognitive-demo-screen .divide-tower-log { min-height: 42px; padding: 0.42rem; } .cognitive-demo-screen .divide-tower-plane { min-width: 66px; padding: 0.24rem 0.32rem; font-size: clamp(0.56rem, 1cqw, 0.68rem); } .cognitive-demo-screen .divide-tower-plane::before { width: 28px; height: 14px; } .cognitive-demo-screen .departure-board { width: min(84%, 480px); gap: 0.28rem; padding: 0.48rem; } .cognitive-demo-screen .departure-board-header, .cognitive-demo-screen .departure-board-row { grid-template-columns: minmax(86px, 0.7fr) minmax(46px, 0.35fr) minmax(100px, 1fr); gap: 0.36rem; } .cognitive-demo-screen .departure-board-row { min-height: 40px; padding: 0.32rem 0.42rem; border-radius: 7px; } .cognitive-demo-screen .departure-board-plane { width: 28px; height: 28px; } .cognitive-demo-screen .departure-board-destination { font-size: clamp(0.78rem, 1.35cqw, 0.96rem); } .cognitive-demo-screen .cognitive-airport-response-row { width: min(84%, 620px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; } .cognitive-demo-screen .cognitive-airport-option-btn { min-height: 42px; padding-inline: 0.5rem; } .cognitive-demo-screen .cognitive-airport-option-plane { width: 1.55rem; height: 1.55rem; } .cognitive-demo-screen .cognitive-wm2-rule { width: min(86%, 620px); padding: 0.42rem 0.62rem; font-size: clamp(0.58rem, 1.05cqw, 0.76rem); } .cognitive-demo-screen .cognitive-stage--wm2 { gap: clamp(0.42rem, 1.25cqh, 0.72rem); } .cognitive-demo-screen .cognitive-wm2-presenter { width: min(90%, 620px); min-height: clamp(100px, 28cqh, 160px); gap: 0.45rem; } .cognitive-demo-screen .cognitive-wm2-presenter-cards { width: min(86%, 520px); gap: 0.32rem; } .cognitive-demo-screen .cognitive-wm2-presenter-card { width: clamp(44px, 8cqw, 72px); } .cognitive-demo-screen .cognitive-wm2-response { width: min(86%, 600px); gap: 0.36rem; } .cognitive-demo-screen .cognitive-wm2-slots { width: min(86%, 520px); min-height: clamp(72px, 18cqh, 112px); padding: 0.42rem; } .cognitive-demo-screen .cognitive-wm2-slot { width: clamp(38px, 6.4cqw, 60px); } .cognitive-demo-screen .cognitive-wm2-pool { max-width: min(86%, 520px); gap: 0.28rem; } .cognitive-demo-screen .cognitive-wm2-pool-card { width: clamp(34px, 5.6cqw, 54px); } .cognitive-demo-screen .cognitive-wm2-check, .cognitive-demo-screen .cognitive-wm2-reset { min-width: 96px; min-height: 34px; padding: 0.42rem 0.7rem; font-size: 0.72rem; } .cognitive-demo-screen .cognitive-stage--rotation .cognitive-target { min-height: clamp(116px, 32cqh, 190px); } .cognitive-demo-screen .cognitive-rotation-pair { gap: clamp(0.6rem, 2.3cqw, 1.35rem); } .cognitive-demo-screen .cognitive-rotation-figure { width: clamp(64px, 12cqw, 106px); height: clamp(64px, 12cqw, 106px); border-width: 2px; } .cognitive-demo-screen .space3-workspace { width: min(94%, 540px); grid-template-columns: minmax(120px, 0.78fr) minmax(0, 1.22fr); gap: 0.45rem; } .cognitive-demo-screen .space3-panel { gap: 0.28rem; } .cognitive-demo-screen .space3-side-grid { width: min(30cqw, 175px); min-width: 110px; gap: 0.14rem; padding: 0.3rem; } .cognitive-demo-screen .space3-camera-map { width: min(54cqw, 350px); min-height: 180px; padding: 1.55rem; } .cognitive-demo-screen .space3-iso-svg { width: min(50cqw, 300px); max-height: 150px; } .cognitive-demo-screen .space3-camera-map .space3-iso-svg { width: min(44cqw, 245px); } .cognitive-demo-screen .space3-camera-marker { min-width: 3.35rem; min-height: 3.05rem; padding: 0.12rem 0.22rem; gap: 0.03rem 0.16rem; } .cognitive-demo-screen .space3-camera-img { width: 1.55rem; height: 1.55rem; } .cognitive-demo-screen .space3-camera-marker-number { width: 1.02rem; height: 1.02rem; font-size: 0.66rem; } .cognitive-demo-screen .space3-camera-marker--front { right: 7%; top: 5%; } .cognitive-demo-screen .space3-camera-marker--right { right: 7%; bottom: 0; } .cognitive-demo-screen .space3-camera-marker--back { left: 7%; bottom: 0; } .cognitive-demo-screen .space3-camera-marker--left { left: 7%; top: 5%; } .cognitive-demo-screen .space3-camera-row { width: min(86%, 520px); gap: 0.36rem; } .cognitive-demo-screen .space3-camera-row .space3-camera-btn { min-height: 34px; padding: 0.36rem 0.48rem; } .cognitive-demo-screen .cognitive-demo-fixation-dot { position: relative; width: clamp(26px, 5.2cqw, 38px); height: clamp(26px, 5.2cqw, 38px); border: 2px solid #fff; border-radius: 999px; background: #D01C1F; box-shadow: 0 0 0 9px rgba(208, 28, 31, 0.14), 0 10px 20px rgba(15, 23, 42, 0.18); animation: cognitiveDemoFixationBlink 900ms steps(1, end) 3; } @keyframes cognitiveDemoFixationBlink { 0%, 48% { opacity: 1; transform: scale(1); } 49%, 100% { opacity: 0.22; transform: scale(0.9); } } .cognitive-demo-tone-pulse { position: absolute; width: 110px; height: 110px; border: 3px solid color-mix(in oklab, var(--accent) 70%, transparent); border-radius: 999px; pointer-events: none; animation: cognitiveDemoTonePulse 3.1s ease-in-out infinite; } .cognitive-demo-reaction-pulse { position: absolute; left: 50%; bottom: clamp(16px, 4cqh, 30px); z-index: 64; transform: translate(-50%, 10px) scale(0.96); padding: 0.34rem 0.68rem; border: 1px solid color-mix(in oklab, #16a34a 54%, var(--border)); border-radius: 999px; background: color-mix(in oklab, #16a34a 14%, var(--card)); color: var(--text); font-size: clamp(0.6rem, 1.1cqw, 0.76rem); font-weight: 900; opacity: 0; transition: opacity 220ms ease, transform 220ms ease; } .cognitive-demo-reaction-pulse.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; } /* IMPULSE 1 demo NoGo cue â€” reuses the reaction-pulse pill in a "don't react" (red) palette so the planet/withhold step reads differently to the green "Reaktion" go cue. Plain rgba (no color-mix) so it renders on older Safari too. */ .cognitive-demo-nogo-pulse { border-color: rgba(220, 38, 38, 0.55); background: rgba(220, 38, 38, 0.12); } .cognitive-stage--impulse-asteroid .cognitive-asteroid-object.is-spared { outline: 3px dashed rgba(220, 38, 38, 0.6); outline-offset: 6px; border-radius: 50%; } .cognitive-demo-press-indicator { position: absolute; z-index: 78; width: clamp(38px, 7cqw, 68px); height: auto; pointer-events: none; transform: translate(-50%, -50%) scale(0.76); opacity: 0; filter: none; transition: opacity 360ms ease, transform 360ms ease; } .cognitive-demo-press-indicator.is-visible { opacity: 0.96; transform: translate(-50%, -50%) scale(1); } .cognitive-demo-press-indicator.is-fading { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } .cognitive-demo-screen .is-demo-selected { border-color: #16a34a; box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 28%, transparent), 0 8px 18px rgba(15, 23, 42, 0.1); } .cognitive-demo-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 900; } @keyframes cognitiveDemoTonePulse { 0% { transform: scale(0.62); opacity: 0.12; } 45% { opacity: 0.75; } 100% { transform: scale(1.15); opacity: 0; } } @media (max-width: 620px) { .cognitive-demo-screen .cognitive-stage { padding: 48px 12px 16px; } .cognitive-demo-screen .cognitive-persistent-header { top: 18px; width: min(76%, 420px); } .cognitive-demo-actions { top: 10px; right: 10px; } .cognitive-demo-actions button { min-height: 26px; padding-inline: 0.5rem; font-size: 0.64rem; } .cognitive-demo-screen .cognitive-grid--six { width: min(72%, 285px); } .cognitive-demo-screen .cognitive-grid--small { width: min(58%, 220px); } .cognitive-demo-screen .divide-tower-cockpit { grid-template-columns: 1fr; } .cognitive-demo-screen .divide-tower-radar { min-height: 128px; } .cognitive-demo-screen .space3-workspace { width: min(92%, 390px); grid-template-columns: 1fr; } .cognitive-demo-screen .space3-panel--photo { transform: none; } .cognitive-demo-screen .space3-side-grid { width: min(54cqw, 200px); } .cognitive-demo-screen .space3-camera-map { width: min(88cqw, 340px); min-height: 188px; padding-inline: 1rem; } .cognitive-demo-screen .departure-board-header { display: none; } .cognitive-demo-screen .departure-board-row { grid-template-columns: 1fr; } .cognitive-demo-screen .space3-camera-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-height: 320px) { .cognitive-demo-screen .cognitive-stage { --cognitive-fixation-align-offset: 0; padding: 30px 10px 10px; gap: 0.25rem; } .cognitive-demo-screen .cognitive-persistent-header { top: 10px; width: min(88%, 400px); gap: 0.08rem; } .cognitive-demo-screen .cognitive-persistent-title { font-size: 0.72rem; } .cognitive-demo-screen .cognitive-persistent-hint { max-width: min(360px, 90%); font-size: 0.5rem; line-height: 1.08; } .cognitive-demo-screen .cognitive-target { min-height: clamp(48px, 18cqh, 82px); } .cognitive-demo-screen .cognitive-grid--six { width: min(38cqw, 140px); } .cognitive-demo-screen .cognitive-grid--small { width: min(30cqw, 120px); } .cognitive-demo-screen .cognitive-stage--grid > .cognitive-grid { transform: none; } .cognitive-demo-screen .cognitive-stage--grid { transform: scale(0.9); transform-origin: center; } .cognitive-demo-screen .cognitive-word, .cognitive-demo-screen .cognitive-letter, .cognitive-demo-screen .cognitive-flanker { font-size: 2.35rem; } .cognitive-demo-screen .cognitive-speed-target-guide { gap: 0.18rem; font-size: 0.5rem; } .cognitive-demo-screen .cognitive-speed-target-image-slot { width: 20px; height: 20px; } .cognitive-demo-screen .cognitive-stage--flex-animal, .cognitive-demo-screen .cognitive-stage--flex { gap: 0.24rem; } .cognitive-demo-screen .cognitive-stage--flex-animal { transform: scale(0.84); transform-origin: center; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide { width: min(78%, 360px); max-width: 78%; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-rule-guide--stacked, .cognitive-demo-screen .cognitive-stage--flex .cognitive-rule-guide--stacked { width: min(70%, 320px); } .cognitive-demo-screen .cognitive-rule-guide-item { min-height: 26px; padding: 0.18rem 0.28rem; font-size: 0.52rem; } .cognitive-demo-screen .cognitive-rule-guide-symbol { width: 1rem; height: 1rem; font-size: 0.55rem; } .cognitive-demo-screen .cognitive-rule-guide-inline-img { width: 0.9rem; height: 0.9rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-target { min-height: clamp(40px, 15cqh, 58px); } .cognitive-demo-screen .cognitive-animal-img { width: clamp(34px, 10cqw, 48px); height: clamp(34px, 10cqw, 48px); } .cognitive-demo-screen .cognitive-stage--flex .cognitive-target { min-height: clamp(58px, 20cqh, 80px); } .cognitive-demo-screen .cognitive-flex-window-board { width: min(52cqw, 250px); gap: 0.24rem; } .cognitive-demo-screen .cognitive-flex-window { min-height: clamp(44px, 16cqh, 64px); padding: 0.24rem; } .cognitive-demo-screen .cognitive-flex-window-slot { min-height: clamp(28px, 9cqh, 42px); } .cognitive-demo-screen .cognitive-flex-object { width: clamp(24px, 6cqw, 38px); height: clamp(24px, 6cqw, 38px); } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn { min-width: min(96px, 24cqw); min-height: 28px; padding: 0.24rem 0.32rem; font-size: 0.52rem; } .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-content-rows, .cognitive-demo-screen .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon, .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-stacked-icon { gap: 0.12rem; min-height: 36px; padding-block: 0.18rem; } .cognitive-demo-screen .cognitive-response-icon { width: 1rem; height: 1rem; } .cognitive-demo-screen .cognitive-response-rowline { gap: 0.12rem; font-size: 0.5rem; } .cognitive-demo-screen .cognitive-logic-matrix { width: min(66cqw, 300px); gap: 0.14rem; } .cognitive-demo-screen .cognitive-logic-matrix-row { grid-template-columns: minmax(42px, 0.58fr) repeat(2, minmax(32px, 0.7fr)) 16px minmax(36px, 0.7fr); gap: 0.14rem; } .cognitive-demo-screen .cognitive-logic-matrix-label { font-size: 0.52rem; } .cognitive-demo-screen .cognitive-logic-matrix-cell { min-height: clamp(28px, 11cqh, 34px); padding: 0.12rem; font-size: 0.94rem; } .cognitive-demo-screen .cognitive-logic-card-img { width: clamp(20px, 4.4cqw, 28px); height: clamp(26px, 6.8cqh, 34px); } .cognitive-demo-screen .cognitive-logic-card-value { right: 0.12rem; bottom: 0.12rem; min-width: 0.86rem; min-height: 0.86rem; font-size: 0.48rem; } .cognitive-demo-screen .cognitive-logic-matrix-arrow { font-size: 0.9rem; } .cognitive-demo-screen .cognitive-stage--logic-matrix { transform: scale(0.86); transform-origin: center; } .cognitive-demo-screen .cognitive-stage--logic-sequence { transform: scale(0.88); transform-origin: center; } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-row, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-row { width: min(78%, 430px); gap: 0.24rem; } .cognitive-demo-screen .cognitive-stage--logic-sequence .cognitive-response-btn, .cognitive-demo-screen .cognitive-stage--logic-matrix .cognitive-response-btn { min-height: 24px; padding: 0.2rem 0.26rem; font-size: 0.5rem; } .cognitive-demo-screen .departure-board { width: min(76cqw, 360px); gap: 0.16rem; padding: 0.28rem; } .cognitive-demo-screen .departure-board-header, .cognitive-demo-screen .departure-board-row { grid-template-columns: minmax(62px, 0.7fr) minmax(36px, 0.35fr) minmax(76px, 1fr); gap: 0.22rem; } .cognitive-demo-screen .departure-board-row { min-height: 28px; padding: 0.2rem 0.28rem; font-size: 0.56rem; } .cognitive-demo-screen .departure-board-plane { width: 20px; height: 20px; } .cognitive-demo-screen .departure-board-destination { font-size: 0.62rem; } .cognitive-demo-screen .space3-workspace { width: min(90%, 380px); grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1.28fr); gap: 0.25rem; } .cognitive-demo-screen .space3-side-grid { width: min(28cqw, 115px); min-width: 72px; gap: 0.08rem; padding: 0.18rem; } .cognitive-demo-screen .space3-camera-map { width: min(46cqw, 210px); min-height: 112px; padding: 0.8rem; } .cognitive-demo-screen .space3-iso-svg { width: min(42cqw, 170px); max-height: 88px; } .cognitive-demo-screen .space3-camera-marker { min-width: 2.55rem; min-height: 2.25rem; padding: 0.1rem 0.16rem; } .cognitive-demo-screen .space3-camera-img { width: 1.15rem; height: 1.15rem; } .cognitive-demo-screen .space3-camera-marker-number { width: 0.82rem; height: 0.82rem; font-size: 0.52rem; } .cognitive-demo-screen .space3-camera-row { width: min(84%, 380px); gap: 0.24rem; } .cognitive-demo-screen .space3-camera-row .space3-camera-btn { min-height: 28px; padding: 0.24rem 0.32rem; font-size: 0.56rem; } } .info-exercise-demo .cognitive-demo-screen img { margin: 0; border-radius: 0; box-shadow: none; } .info-exercise-demo .cognitive-demo-screen .cognitive-asset-shell--plain, .info-exercise-demo .cognitive-demo-screen .cognitive-stop-asset, .info-exercise-demo .cognitive-demo-screen .cognitive-rotation-figure { background: transparent; border-color: transparent; border-radius: 0; box-shadow: none; } .info-exercise-demo .cognitive-demo-screen .cognitive-response-btn, .info-exercise-demo .cognitive-demo-screen .cognitive-construct-picker-btn, .info-exercise-demo .cognitive-demo-screen .cognitive-grid-cell { align-items: center; justify-content: center; } /* Login info demos use much smaller viewports than the real game area. */ body.login-public #section-info .info-exercise-demo:is( [data-mode="divide1"], [data-mode="divide2"], [data-mode="speed1"], [data-mode="interfere2"], [data-mode="flex1"], [data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"], [data-mode="stm1"], [data-mode="wm1"], [data-mode="wm2"], [data-mode="prospect1"], [data-mode="space1"], [data-mode="space2"], [data-mode="calc1"] ), body.login-public #section-info .info-exercise-demo:is( [data-mode="divide1"], [data-mode="divide2"], [data-mode="speed1"], [data-mode="interfere2"], [data-mode="flex1"], [data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"], [data-mode="stm1"], [data-mode="wm1"], [data-mode="wm2"], [data-mode="prospect1"], [data-mode="space1"], [data-mode="space2"], [data-mode="calc1"] ) .cognitive-instruction-demo-container, body.login-public #section-info .info-exercise-demo:is( [data-mode="divide1"], [data-mode="divide2"], [data-mode="speed1"], [data-mode="interfere2"], [data-mode="flex1"], [data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"], [data-mode="stm1"], [data-mode="wm1"], [data-mode="wm2"], [data-mode="prospect1"], [data-mode="space1"], [data-mode="space2"], [data-mode="calc1"] ) .cognitive-demo-screen { min-height: clamp(240px, 62vw, 330px); } body.login-public #section-info .info-exercise-demo:is([data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"]), body.login-public #section-info .info-exercise-demo:is([data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"]) .cognitive-instruction-demo-container, body.login-public #section-info .info-exercise-demo:is([data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"]) .cognitive-demo-screen { min-height: clamp(280px, 76vw, 330px); } body.login-public #section-info .info-exercise-demo[data-mode="calc1"], body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-instruction-demo-container, body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen { min-height: clamp(260px, 68vw, 330px); } @media (max-width: 960px) { body.login-public #section-info .info-exercise-demo[data-mode="flex2"], body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-instruction-demo-container, body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen { min-height: clamp(360px, 95vw, 410px); } } body.login-public #section-info .info-exercise-demo:is([data-mode="divide1"], [data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"], [data-mode="stm1"], [data-mode="calc1"]) .cognitive-demo-screen .cognitive-stage { justify-content: flex-start; gap: clamp(0.26rem, 0.95cqh, 0.48rem); padding-top: clamp(72px, 21cqh, 86px); padding-bottom: clamp(8px, 2cqh, 14px); } body.login-public #section-info .info-exercise-demo[data-mode="speed1"] .cognitive-demo-screen .cognitive-stage--grid { justify-content: flex-start; padding-top: clamp(86px, 25cqh, 98px); padding-bottom: clamp(8px, 2cqh, 14px); } body.login-public #section-info .info-exercise-demo[data-mode="divide1"] .cognitive-demo-screen .divide-drive-scene { height: clamp(172px, 48cqh, 218px); min-height: 172px; } body.login-public #section-info .info-exercise-demo[data-mode="speed1"] .cognitive-demo-screen .cognitive-grid--six { width: min(46cqw, 230px); } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-stage--flex .cognitive-target { min-height: clamp(68px, 19cqh, 98px); margin-top: clamp(0.14rem, 0.55cqh, 0.28rem); } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-flex-window-board { width: min(48cqw, 260px); gap: clamp(0.18rem, 0.55cqh, 0.28rem); } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-flex-window { min-height: clamp(52px, 14cqh, 76px); gap: 0.12rem; padding: clamp(0.18rem, 0.55cqh, 0.28rem); } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-flex-window-slot { min-height: clamp(30px, 8cqh, 44px); } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-flex-window-rule { font-size: clamp(0.66rem, 1.35cqw, 0.84rem); } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-flex-object { width: clamp(30px, 6cqw, 44px); height: clamp(30px, 6cqw, 44px); } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-stage--flex .cognitive-response-btn.has-content-rows { gap: 0.08rem; min-width: min(72px, 17cqw); min-height: 34px; padding: 0.16rem 0.24rem; } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-response-icon { width: 0.78rem; height: 0.78rem; } body.login-public #section-info .info-exercise-demo[data-mode="flex2"] .cognitive-demo-screen .cognitive-response-rowline { gap: 0.08rem; min-height: 1rem; font-size: 0.52rem; } body.login-public #section-info .info-exercise-demo[data-mode="logic1"] .cognitive-demo-screen .cognitive-logic-sequence { max-width: min(88cqw, 430px); gap: clamp(0.14rem, 0.42cqw, 0.28rem); } body.login-public #section-info .info-exercise-demo[data-mode="logic1"] .cognitive-demo-screen .cognitive-logic-sequence-item.has-symbol, body.login-public #section-info .info-exercise-demo[data-mode="logic1"] .cognitive-demo-screen .cognitive-logic-sequence-item { min-width: clamp(46px, 9cqw, 70px); min-height: clamp(46px, 9cqw, 70px); width: clamp(46px, 9cqw, 70px); height: clamp(46px, 9cqw, 70px); padding: clamp(0.22rem, 0.54cqw, 0.38rem); } body.login-public #section-info .info-exercise-demo[data-mode="logic1"] .cognitive-demo-screen .cognitive-logic-sequence-separator { font-size: clamp(0.85rem, 2.4cqw, 1.25rem); } body.login-public #section-info .info-exercise-demo[data-mode="logic2"] .cognitive-demo-screen .cognitive-logic-pattern-board { width: min(40cqh, 40cqw, 210px); } body.login-public #section-info .info-exercise-demo[data-mode="logic2"] .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(72cqw, 320px); gap: 0.28rem; } body.login-public #section-info .info-exercise-demo[data-mode="logic2"] .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { aspect-ratio: auto; min-height: 0; height: clamp(46px, 13cqh, 72px); padding: 0.12rem; } body.login-public #section-info .info-exercise-demo[data-mode="stm1"] .cognitive-demo-screen .departure-board { width: min(76%, 460px); gap: 0.18rem; padding: 0.34rem; font-size: clamp(0.56rem, 1.02cqw, 0.74rem); } body.login-public #section-info .info-exercise-demo[data-mode="stm1"] .cognitive-demo-screen .departure-board-header, body.login-public #section-info .info-exercise-demo[data-mode="stm1"] .cognitive-demo-screen .departure-board-row { gap: 0.24rem; } body.login-public #section-info .info-exercise-demo[data-mode="stm1"] .cognitive-demo-screen .departure-board-row { min-height: 32px; padding: 0.22rem 0.32rem; } body.login-public #section-info .info-exercise-demo[data-mode="stm1"] .cognitive-demo-screen .departure-board-plane { width: 22px; height: 22px; } body.login-public #section-info .info-exercise-demo[data-mode="stm1"] .cognitive-demo-screen .departure-board-destination { font-size: clamp(0.62rem, 1.05cqw, 0.78rem); } body.login-public #section-info .info-exercise-demo:is( [data-mode="interfere2"], [data-mode="flex1"], [data-mode="flex2"], [data-mode="stm1"], [data-mode="space2"], [data-mode="space3"] ) .cognitive-demo-screen .cognitive-stage { transform: scale(0.9); transform-origin: center; } body.login-public #section-info .info-exercise-demo[data-mode="interfere2"] .cognitive-demo-screen .cognitive-stage--stroop { --cognitive-stimulus-size: clamp(42px, 8.5cqw, 64px); } body.login-public #section-info .info-exercise-demo[data-mode="interfere2"] .cognitive-demo-screen .cognitive-stroop-comparison { gap: clamp(0.36rem, 1.2cqh, 0.58rem); } body.login-public #section-info .info-exercise-demo[data-mode="interfere2"] .cognitive-demo-screen .cognitive-stroop-target { min-width: clamp(112px, 24cqw, 170px); padding: 0.28rem 0.58rem; font-size: clamp(0.92rem, 2.2cqw, 1.28rem); } /* The Stroop billboard is square and sized by WIDTH (min(360px,86vw)) in the live game, but the demo gamearea is short (~250-330px tall) â€” without a height cap the square billboard overflows downward onto the colour buttons. Cap by container height (cqh of the demo gamearea) so the whole stage (instruction + billboard + buttons) fits with no overlap. */ body.login-public #section-info .info-exercise-demo[data-mode="interfere2"] .cognitive-demo-screen .cognitive-stroop-billboard { width: min(86cqw, 230px, 48cqh); } /* The word size is 13cqw (proportional to the billboard) with a 1.05rem floor meant for ~320px phones. On the small demo billboard that floor wins and the (wide Monoton) word overflows the lit sign panel ("ORANGE" â†’ "RANC"). Lower the floor in the demo so 13cqw stays proportional and fits. */ body.login-public #section-info .info-exercise-demo[data-mode="interfere2"] .cognitive-demo-screen .cognitive-stroop-word { font-size: clamp(0.4rem, 13cqw, 1.5rem); } body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-stage--nback { --cognitive-stimulus-size: clamp(50px, 9.5cqw, 78px) !important; } body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-target { min-height: clamp(70px, 19cqh, 104px); } body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-asset-shell, body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-shape { width: clamp(50px, 9.5cqw, 78px) !important; height: clamp(50px, 9.5cqw, 78px) !important; } body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-letter { font-size: clamp(1.9rem, 7.4cqw, 2.8rem) !important; } body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-stage--nback { --nback-card-w: clamp(38px, 9cqw, 64px); --nback-card-h: clamp(52px, 12cqw, 86px); --nback-card-gap: clamp(4px, 1cqw, 8px); --nback-zone-gap: clamp(10px, 2cqw, 18px); --nback-card-radius: 9px; } body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-nback-strip { gap: clamp(10px, 2cqw, 18px); padding: clamp(4px, 1cqh, 8px); min-height: calc(var(--nback-card-h) + 8px); } body.login-public #section-info .info-exercise-demo[data-mode="wm1"] .cognitive-demo-screen .cognitive-nback-letter { font-size: clamp(1.2rem, 6.5cqw, 2.2rem); } body.login-public #section-info .info-exercise-demo[data-mode="space2"] .cognitive-demo-screen .cognitive-stage--construct { padding-top: clamp(50px, 16cqh, 64px); padding-bottom: clamp(8px, 2cqh, 12px); gap: clamp(0.12rem, 0.58cqh, 0.26rem); transform: none; } body.login-public #section-info .info-exercise-demo[data-mode="space2"] .cognitive-demo-screen .cognitive-construct-grids, body.login-public #section-info .info-exercise-demo[data-mode="space2"] .cognitive-demo-screen .cognitive-construct-picker { width: min(60cqw, 280px); } body.login-public #section-info .info-exercise-demo[data-mode="space2"] .cognitive-demo-screen .cognitive-construct-grids { gap: clamp(0.24rem, 0.85cqw, 0.4rem); } body.login-public #section-info .info-exercise-demo[data-mode="space2"] .cognitive-demo-screen .cognitive-construct-picker-btn { width: clamp(24px, 5.8cqw, 32px); height: clamp(24px, 5.8cqw, 32px); } body.login-public #section-info .info-exercise-demo[data-mode="space2"] .cognitive-demo-screen .cognitive-construct-erase-btn { min-width: clamp(3.6rem, 14cqw, 4.5rem); height: clamp(24px, 5.8cqw, 32px); font-size: clamp(0.56rem, 1.12cqw, 0.66rem); } body.login-public #section-info .info-exercise-demo[data-mode="space2"] .cognitive-demo-screen .cognitive-stage--construct .cognitive-response-btn { min-height: 30px; padding: 0.28rem 0.72rem; font-size: 0.68rem; } body.login-public #section-info .info-exercise-demo[data-mode="space3"] .cognitive-demo-screen .space3-workspace { width: min(88%, 460px); gap: 0.34rem; } body.login-public #section-info .info-exercise-demo[data-mode="space3"] .cognitive-demo-screen .space3-camera-map { width: min(48cqw, 305px); min-height: 160px; padding: 1.25rem; } body.login-public #section-info .info-exercise-demo[data-mode="space3"] .cognitive-demo-screen .space3-camera-map .space3-iso-svg { width: min(38cqw, 215px); max-height: 132px; } body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-chain { gap: clamp(0.16rem, 0.58cqh, 0.32rem); transform: scale(0.92); transform-origin: top center; } body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-token-display, body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-answer-wrap, body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-keypad { width: min(58cqw, 240px); } @container (max-height: 300px) { body.login-public #section-info .info-exercise-demo:is( [data-mode="divide1"], [data-mode="divide2"], [data-mode="speed1"], [data-mode="interfere2"], [data-mode="flex1"], [data-mode="flex2"], [data-mode="logic1"], [data-mode="logic2"], [data-mode="stm1"], [data-mode="wm1"], [data-mode="wm2"], [data-mode="prospect1"], [data-mode="space1"], [data-mode="space2"] ) .cognitive-demo-screen .cognitive-stage { justify-content: flex-start; gap: clamp(0.12rem, 0.6cqh, 0.24rem); padding-top: clamp(58px, 23cqh, 70px); padding-bottom: clamp(8px, 2cqh, 14px); } body.login-public #section-info .info-exercise-demo[data-mode="speed1"] .cognitive-demo-screen .cognitive-stage--grid { padding-top: clamp(64px, 28cqh, 78px); } body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-stage--calculation-chain { padding-top: clamp(58px, 23cqh, 70px); } body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-chain { transform: scale(0.68); } body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-token-display, body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-answer-wrap, body.login-public #section-info .info-exercise-demo[data-mode="calc1"] .cognitive-demo-screen .cognitive-calc-keypad { width: min(54cqw, 190px); } body.login-public #section-info .info-exercise-demo[data-mode="divide1"] .cognitive-demo-screen .divide-drive-scene, body.login-public #section-info .info-exercise-demo[data-mode="divide2"] .cognitive-demo-screen .divide-airport-scene { height: clamp(128px, 43cqh, 164px); min-height: 128px; } body.login-public #section-info .info-exercise-demo[data-mode="logic1"] .cognitive-demo-screen .cognitive-logic-sequence-item.has-symbol, body.login-public #section-info .info-exercise-demo[data-mode="logic1"] .cognitive-demo-screen .cognitive-logic-sequence-item { min-width: clamp(34px, 10cqw, 48px); min-height: clamp(34px, 10cqw, 48px); width: clamp(34px, 10cqw, 48px); height: clamp(34px, 10cqw, 48px); } body.login-public #section-info .info-exercise-demo[data-mode="logic2"] .cognitive-demo-screen .cognitive-logic-pattern-board { width: min(34cqh, 38cqw, 150px); } body.login-public #section-info .info-exercise-demo[data-mode="logic2"] .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(72cqw, 250px); gap: 0.18rem; } body.login-public #section-info .info-exercise-demo[data-mode="logic2"] .cognitive-demo-screen .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { aspect-ratio: auto; min-height: 0; height: clamp(42px, 13cqh, 58px); padding: 0.1rem; } } @media (max-width: 420px) { #gameArea .cognitive-stage--logic-pattern-matrix, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix { /* Centre the matrix + chips + Fertig vertically (safe centre â†’ top-anchored only if it would overflow), clear of the persistent header; scroll if a big grid doesn't fit. */ justify-content: safe center; gap: clamp(0.4rem, 1.4vh, 0.72rem); padding-top: clamp(4.6rem, 12vh, 6rem); padding-bottom: clamp(0.6rem, 2vh, 1rem); overflow-y: auto; } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { width: min(90vw, 360px); } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(94%, 360px); gap: 0.3rem; } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { aspect-ratio: auto; min-height: 0; height: clamp(52px, 8cqh, 66px); padding: 0.12rem; } } /* Authoritative LOGIC 2 phone override: the layered @media/@container rules top-anchored the matrix (justify-content:flex-start) and capped it tiny (42cqw â†’ ~164px), leaving a big empty gap below. Force it vertically centred + a usable, viewport-relative width. `!important` beats the (un-!important) container-query rules regardless of source order; `safe center` still top-anchors + scrolls if a big grid genuinely doesn't fit. */ @media (orientation: portrait) and (max-width: 640px) { #gameArea .cognitive-stage--logic-pattern-matrix { justify-content: safe center !important; overflow-y: auto !important; } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { width: min(90vw, 360px) !important; } } @container (max-height: 660px) { #gameArea .cognitive-stage--logic-pattern-matrix, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix { justify-content: flex-start; gap: clamp(0.22rem, 0.85cqh, 0.48rem); padding-top: clamp(4.45rem, 12.5cqh, 5.4rem); padding-bottom: clamp(0.35rem, 1.25cqh, 0.7rem); overflow: hidden; } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { width: min(40cqh, 42cqw, 330px); gap: clamp(0.16rem, 0.45cqw, 0.34rem); } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-logic-matrix-rule, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-logic-matrix-rule { max-width: min(520px, 88cqw); font-size: clamp(0.58rem, 1.15cqw, 0.78rem); line-height: 1.14; } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(540px, 88cqw); gap: clamp(0.22rem, 0.7cqh, 0.36rem); } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { aspect-ratio: auto; min-height: 0; height: clamp(44px, 8.6cqh, 58px); padding: 0.12rem; } #gameArea .cognitive-stage--flex-animal, .playable-demo-gamearea .cognitive-stage--flex-animal { justify-content: flex-start; gap: clamp(0.18rem, 0.82cqh, 0.48rem); padding-top: clamp(4.35rem, 12.2cqh, 5.35rem); padding-bottom: clamp(0.35rem, 1.25cqh, 0.7rem); overflow: hidden; } #gameArea .cognitive-stage--flex-animal .cognitive-rule-sequence, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-sequence { width: min(74cqw, 480px); margin-bottom: 0; } #gameArea .cognitive-stage--flex-animal .cognitive-rule-sequence-track, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-sequence-track { grid-template-columns: repeat(15, clamp(18px, 3.1cqw, 30px)); gap: clamp(0.1rem, 0.36cqw, 0.22rem); } #gameArea .cognitive-stage--flex-animal .cognitive-rule-sequence-item, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-sequence-item { height: clamp(18px, 3.1cqw, 30px); font-size: clamp(0.54rem, 0.92cqw, 0.72rem); } #gameArea .cognitive-stage--flex-animal .cognitive-rule-guide, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-guide { width: min(64cqw, 380px); margin-bottom: 0; gap: 0.22rem; } #gameArea .cognitive-stage--flex-animal .cognitive-rule-guide-item, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-guide-item { min-height: 28px; gap: 0.24rem; padding: 0.2rem 0.32rem; font-size: clamp(0.5rem, 0.92cqw, 0.64rem); line-height: 1.08; } #gameArea .cognitive-stage--flex-animal .cognitive-rule-guide-symbol, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-guide-symbol { width: 1.05rem; height: 1.05rem; font-size: 0.58rem; } #gameArea .cognitive-stage--flex-animal .cognitive-rule-guide-inline-img, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-guide-inline-img { width: 1rem; height: 1rem; } #gameArea .cognitive-stage--flex-animal .cognitive-rule-guide-inline-img.is-arrow, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-rule-guide-inline-img.is-arrow { width: 1.18rem; height: 1.18rem; } #gameArea .cognitive-stage--flex-animal .cognitive-target, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-target { min-height: clamp(58px, 18cqh, 102px); transform: none; } #gameArea .cognitive-stage--flex-animal .cognitive-animal-img, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-animal-img { width: clamp(58px, 18cqh, 108px); height: clamp(58px, 18cqh, 108px); } #gameArea .cognitive-stage--flex-animal .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-response-row { gap: 0.3rem; margin-top: 0; } #gameArea .cognitive-stage--flex-animal .cognitive-response-btn, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-response-btn { min-width: min(128px, 22cqw); min-height: 32px; padding: 0.28rem 0.4rem; font-size: clamp(0.58rem, 1.05cqw, 0.76rem); } #gameArea .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-response-btn.has-content-rows, #gameArea .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-response-btn.has-stacked-icon { gap: 0.16rem; min-height: 44px; padding-block: 0.22rem; } #gameArea .cognitive-stage--flex-animal .cognitive-response-icon, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-response-icon { width: 1.05rem; height: 1.05rem; } #gameArea .cognitive-stage--flex-animal .cognitive-response-rowline, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-response-rowline { gap: 0.14rem; min-height: 1.35rem; } } @container (max-height: 540px) { #gameArea .cognitive-stage--divide-driving, .playable-demo-gamearea .cognitive-stage--divide-driving { justify-content: flex-start; gap: clamp(0.28rem, 0.9cqh, 0.45rem); padding-top: clamp(3.55rem, 12cqh, 4.45rem); padding-bottom: clamp(0.32rem, 1.15cqh, 0.55rem); overflow: hidden; } #gameArea .cognitive-stage--divide-driving .divide-drive-scene, .playable-demo-gamearea .cognitive-stage--divide-driving .divide-drive-scene { width: min(100%, 1120px); min-height: 0; height: clamp(230px, 54cqh, 310px); } #gameArea .cognitive-stage--divide-driving .divide-speed-panel, .playable-demo-gamearea .cognitive-stage--divide-driving .divide-speed-panel { bottom: 0.45rem; padding: 0.34rem 0.42rem; } #gameArea .cognitive-stage--divide-driving .divide-speed-meter, .playable-demo-gamearea .cognitive-stage--divide-driving .divide-speed-meter { height: clamp(14px, 3cqh, 20px); } #gameArea .cognitive-stage--divide-driving .divide-action-row, .playable-demo-gamearea .cognitive-stage--divide-driving .divide-action-row { width: min(100%, 1120px); max-width: 100%; gap: 0.34rem; } #gameArea .cognitive-stage--divide-driving .divide-action-btn, .playable-demo-gamearea .cognitive-stage--divide-driving .divide-action-btn { min-width: 112px; min-height: 40px; padding: 0.34rem 0.5rem; } } @container (max-height: 960px) { #gameArea .cognitive-stage--logic-pattern-matrix, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix { justify-content: flex-start; gap: clamp(0.22rem, 0.75cqh, 0.55rem); padding-top: clamp(4.1rem, 8.8cqh, 5.25rem); padding-bottom: clamp(0.35rem, 1.1cqh, 0.7rem); overflow: hidden; } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-logic-pattern-board { width: min(50cqh, 42cqw, 430px); gap: clamp(0.16rem, 0.45cqw, 0.38rem); } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-response-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(620px, 84cqw); gap: clamp(0.22rem, 0.62cqh, 0.42rem); } #gameArea .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option, .playable-demo-gamearea .cognitive-stage--logic-pattern-matrix .cognitive-response-btn.is-logic-matrix-option { min-height: clamp(42px, 8cqh, 72px); padding: 0.12rem; } } @container (max-height: 560px) { #gameArea .cognitive-stage, .playable-demo-gamearea .cognitive-stage { --cognitive-fixation-align-offset: 0rem; gap: clamp(0.2rem, 0.8cqh, 0.5rem); padding: clamp(3.05rem, 9.2cqh, 3.95rem) clamp(0.45rem, 1.5cqw, 1rem) clamp(0.28rem, 1cqh, 0.65rem); } #gameArea .cognitive-persistent-header, .playable-demo-gamearea .cognitive-persistent-header { top: clamp(0.32rem, 1.3cqh, 0.62rem); gap: 0.1rem; width: min(96cqw, 760px); } #gameArea .cognitive-persistent-title, .playable-demo-gamearea .cognitive-persistent-title { font-size: clamp(0.95rem, 4cqh, 1.42rem); line-height: 1.05; } #gameArea .cognitive-persistent-hint, .playable-demo-gamearea .cognitive-persistent-hint { font-size: clamp(0.62rem, 2.25cqh, 0.82rem); line-height: 1.08; max-width: min(88cqw, 620px); } #gameArea .cognitive-grid--six, .playable-demo-gamearea .cognitive-grid--six { width: min(64cqh, 58cqw, 340px); gap: clamp(0.14rem, 0.48cqh, 0.32rem); } #gameArea .cognitive-grid--small, .playable-demo-gamearea .cognitive-grid--small { width: min(68cqh, 42cqw, 250px); gap: clamp(0.14rem, 0.48cqh, 0.3rem); } #gameArea .cognitive-grid-cell, .playable-demo-gamearea .cognitive-grid-cell { font-size: clamp(0.72rem, 3cqh, 1.2rem); } #gameArea .cognitive-stage--flex, .playable-demo-gamearea .cognitive-stage--flex, #gameArea .cognitive-stage--prospective, .playable-demo-gamearea .cognitive-stage--prospective, #gameArea .cognitive-stage--departure-board, .playable-demo-gamearea .cognitive-stage--departure-board, #gameArea .cognitive-stage--rotation, .playable-demo-gamearea .cognitive-stage--rotation, #gameArea .cognitive-stage--wm2, .playable-demo-gamearea .cognitive-stage--wm2 { justify-content: flex-start; } #gameArea .cognitive-stage--flex .cognitive-rule-guide, .playable-demo-gamearea .cognitive-stage--flex .cognitive-rule-guide { width: min(58cqw, 420px); gap: 0.18rem; } #gameArea .cognitive-stage--flex .cognitive-rule-guide-item, .playable-demo-gamearea .cognitive-stage--flex .cognitive-rule-guide-item { min-width: 0; min-height: 26px; padding: 0.18rem 0.3rem; font-size: clamp(0.52rem, 1.45cqh, 0.68rem); line-height: 1.05; } #gameArea .cognitive-stage--flex .cognitive-rule-guide-symbol, .playable-demo-gamearea .cognitive-stage--flex .cognitive-rule-guide-symbol, #gameArea .cognitive-stage--prospective .cognitive-rule-guide-symbol, .playable-demo-gamearea .cognitive-stage--prospective .cognitive-rule-guide-symbol { width: 1rem; height: 1rem; font-size: 0.58rem; } #gameArea .cognitive-stage--flex .cognitive-inline-token, .playable-demo-gamearea .cognitive-stage--flex .cognitive-inline-token { width: 1.05rem; height: 0.9rem; } #gameArea .cognitive-stage--flex .cognitive-target, .playable-demo-gamearea .cognitive-stage--flex .cognitive-target { width: min(88cqw, 640px); min-height: clamp(82px, 30cqh, 150px); transform: none; } #gameArea .cognitive-flex-window-board, .playable-demo-gamearea .cognitive-flex-window-board { gap: clamp(0.24rem, 0.8cqh, 0.42rem); } #gameArea .cognitive-flex-window, .playable-demo-gamearea .cognitive-flex-window { min-height: clamp(66px, 25cqh, 118px); gap: 0.18rem; padding: clamp(0.22rem, 0.7cqh, 0.38rem); } #gameArea .cognitive-flex-window-rule, .playable-demo-gamearea .cognitive-flex-window-rule { font-size: clamp(0.62rem, 2.1cqh, 0.9rem); } #gameArea .cognitive-flex-object, .playable-demo-gamearea .cognitive-flex-object { width: clamp(28px, 8cqh, 46px); height: clamp(28px, 8cqh, 46px); } #gameArea .cognitive-stage--flex .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--flex .cognitive-response-row, #gameArea .cognitive-stage--prospective .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--prospective .cognitive-response-row { gap: 0.25rem; margin-top: 0; } #gameArea .cognitive-stage--flex .cognitive-response-btn, .playable-demo-gamearea .cognitive-stage--flex .cognitive-response-btn { min-width: min(116px, 20cqw); min-height: 32px; padding: 0.28rem 0.4rem; font-size: clamp(0.58rem, 1.8cqh, 0.76rem); } #gameArea .cognitive-stage--flex .cognitive-response-btn.has-content-rows, .playable-demo-gamearea .cognitive-stage--flex .cognitive-response-btn.has-content-rows { gap: 0.14rem; min-height: 42px; padding-block: 0.22rem; } #gameArea .departure-board, .playable-demo-gamearea .departure-board { width: min(96cqw, 880px); gap: clamp(0.12rem, 0.42cqh, 0.28rem); padding: clamp(0.22rem, 0.72cqh, 0.42rem); } #gameArea .departure-board-header, .playable-demo-gamearea .departure-board-header { padding: 0.08rem 0.34rem; font-size: clamp(0.52rem, 1.6cqh, 0.68rem); } #gameArea .departure-board-row, .playable-demo-gamearea .departure-board-row { min-height: clamp(28px, 8.8cqh, 42px); padding: 0.18rem 0.34rem; } #gameArea .departure-board-plane, .playable-demo-gamearea .departure-board-plane { width: clamp(22px, 6cqh, 34px); height: clamp(22px, 6cqh, 34px); } #gameArea .departure-board-destination, .playable-demo-gamearea .departure-board-destination { font-size: clamp(0.72rem, 2.35cqh, 0.98rem); } #gameArea .cognitive-stage--rotation, .playable-demo-gamearea .cognitive-stage--rotation { --cognitive-stimulus-size: min(140px, 30cqh, 22cqw) !important; } #gameArea .cognitive-stage--rotation .cognitive-target, .playable-demo-gamearea .cognitive-stage--rotation .cognitive-target { min-height: clamp(92px, 34cqh, 170px); transform: none; } #gameArea .cognitive-stage--rotation .cognitive-rotation-pair, .playable-demo-gamearea .cognitive-stage--rotation .cognitive-rotation-pair { gap: clamp(0.55rem, 2cqw, 1.2rem); } #gameArea .cognitive-stage--prospective .cognitive-rule-guide, .playable-demo-gamearea .cognitive-stage--prospective .cognitive-rule-guide { width: min(84cqw, 520px); gap: 0.22rem; } #gameArea .cognitive-stage--prospective .cognitive-rule-guide-item, .playable-demo-gamearea .cognitive-stage--prospective .cognitive-rule-guide-item { min-width: 0; min-height: 28px; padding: 0.2rem 0.34rem; font-size: clamp(0.56rem, 1.6cqh, 0.74rem); } #gameArea .cognitive-prospect-target, .playable-demo-gamearea .cognitive-prospect-target { min-height: clamp(70px, 28cqh, 122px); transform: none; } #gameArea .cognitive-prospect-arrow.is-prospect-standard, .playable-demo-gamearea .cognitive-prospect-arrow.is-prospect-standard { width: clamp(42px, 14cqh, 76px); height: clamp(42px, 14cqh, 76px); } #gameArea .cognitive-prospect-arrow.is-prospect-special-cue, .playable-demo-gamearea .cognitive-prospect-arrow.is-prospect-special-cue { width: clamp(48px, 15cqh, 84px); height: clamp(48px, 15cqh, 84px); } #gameArea .cognitive-stage--prospective .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--prospective .cognitive-response-row { width: min(52cqw, 420px); } #gameArea .cognitive-stage--prospective .cognitive-response-btn, .playable-demo-gamearea .cognitive-stage--prospective .cognitive-response-btn, #gameArea .cognitive-stage--calculation .cognitive-response-btn, .playable-demo-gamearea .cognitive-stage--calculation .cognitive-response-btn { min-height: 34px; padding: 0.34rem 0.45rem; font-size: clamp(0.72rem, 2.6cqh, 1rem); } #gameArea .cognitive-stage--construct .cognitive-construct-grids, .playable-demo-gamearea .cognitive-stage--construct .cognitive-construct-grids { width: min(82cqw, 70cqh, 520px); gap: clamp(0.18rem, 0.55cqh, 0.34rem); transform: none; } #gameArea .cognitive-construct-picker, .playable-demo-gamearea .cognitive-construct-picker { gap: 0.16rem; } #gameArea .cognitive-construct-picker-btn, .playable-demo-gamearea .cognitive-construct-picker-btn { width: clamp(30px, 8cqh, 42px); height: clamp(30px, 8cqh, 42px); } #gameArea .cognitive-stage--wm2, .playable-demo-gamearea .cognitive-stage--wm2 { gap: 0.32rem; } #gameArea .cognitive-wm2-rule, .playable-demo-gamearea .cognitive-wm2-rule { padding: 0.28rem 0.48rem; font-size: clamp(0.62rem, 1.9cqh, 0.82rem); line-height: 1.12; } #gameArea .cognitive-wm2-presenter, .playable-demo-gamearea .cognitive-wm2-presenter { min-height: clamp(110px, 38cqh, 180px); gap: 0.28rem; } #gameArea .cognitive-wm2-presenter-card, .playable-demo-gamearea .cognitive-wm2-presenter-card { width: clamp(44px, 11cqh, 72px); } #gameArea .cognitive-stage--calculation .cognitive-response-row, .playable-demo-gamearea .cognitive-stage--calculation .cognitive-response-row { width: min(28rem, 72cqw); gap: 0.4rem; } #gameArea .cognitive-stage--calculation .cognitive-response-btn, .playable-demo-gamearea .cognitive-stage--calculation .cognitive-response-btn { min-height: clamp(2.75rem, 17cqh, 4rem); font-size: clamp(1.25rem, 6cqh, 1.9rem); line-height: 1; } #gameArea .cognitive-stage--calculation-chain, .playable-demo-gamearea .cognitive-stage--calculation-chain { justify-content: flex-start; gap: clamp(0.18rem, 0.72cqh, 0.42rem); } #gameArea .cognitive-calc-chain, .playable-demo-gamearea .cognitive-calc-chain { width: min(86cqw, 420px); gap: clamp(0.16rem, 0.62cqh, 0.34rem); } #gameArea .cognitive-calc-token-display, .playable-demo-gamearea .cognitive-calc-token-display { min-height: clamp(54px, 16cqh, 82px); } #gameArea .cognitive-calc-token, .playable-demo-gamearea .cognitive-calc-token { min-width: clamp(2.8rem, 10cqh, 4rem); min-height: clamp(2.8rem, 10cqh, 4rem); font-size: clamp(1.9rem, 7cqh, 3rem); } #gameArea .cognitive-calc-answer, .playable-demo-gamearea .cognitive-calc-answer { min-height: clamp(2.25rem, 9cqh, 3.1rem); font-size: clamp(1.35rem, 5.4cqh, 2.1rem); } #gameArea .cognitive-calc-key, .playable-demo-gamearea .cognitive-calc-key { min-height: clamp(2rem, 8.4cqh, 2.7rem); font-size: clamp(0.92rem, 3.5cqh, 1.25rem); } } @container (max-height: 380px) { #gameArea .cognitive-stage, .playable-demo-gamearea .cognitive-stage { gap: clamp(0.14rem, 0.55cqh, 0.32rem); padding-top: clamp(2.55rem, 8.4cqh, 3.2rem); padding-bottom: 0.2rem; } #gameArea .cognitive-persistent-hint, .playable-demo-gamearea .cognitive-persistent-hint { max-height: 2.2em; overflow: hidden; } #gameArea .cognitive-grid--six, .playable-demo-gamearea .cognitive-grid--six { width: min(58cqh, 52cqw, 260px); } #gameArea .cognitive-stage--flex .cognitive-rule-guide, .playable-demo-gamearea .cognitive-stage--flex .cognitive-rule-guide { width: min(56cqw, 360px); } #gameArea .cognitive-stage--flex .cognitive-target, .playable-demo-gamearea .cognitive-stage--flex .cognitive-target { min-height: clamp(64px, 23cqh, 98px); } #gameArea .cognitive-flex-window, .playable-demo-gamearea .cognitive-flex-window { min-height: clamp(54px, 20cqh, 82px); } #gameArea .cognitive-stage--flex .cognitive-response-btn.has-content-rows, .playable-demo-gamearea .cognitive-stage--flex .cognitive-response-btn.has-content-rows { min-height: 36px; } } @container (max-width: 430px) { #gameArea .cognitive-target, .playable-demo-gamearea .cognitive-target { max-width: 100%; } #gameArea .cognitive-stroop-comparison, .playable-demo-gamearea .cognitive-stroop-comparison { width: min(100%, 94cqw); gap: clamp(0.45rem, 1.4cqw, 0.75rem); } #gameArea .cognitive-stage--stroop, .playable-demo-gamearea .cognitive-stage--stroop { --cognitive-stimulus-size: min(120px, 28cqw) !important; } #gameArea .cognitive-stroop-target, .playable-demo-gamearea .cognitive-stroop-target { min-width: min(150px, 82cqw); padding: 0.35rem 0.55rem; font-size: clamp(1rem, 6cqw, 1.45rem); } #gameArea .cognitive-stage--rotation, .playable-demo-gamearea .cognitive-stage--rotation { --cognitive-stimulus-size: min(128px, 34cqw, 26cqh) !important; } #gameArea .space3-workspace, .playable-demo-gamearea .space3-workspace { gap: 0.42rem; transform: none; } #gameArea .space3-panel, .playable-demo-gamearea .space3-panel { gap: 0.22rem; } #gameArea .space3-panel-label, .playable-demo-gamearea .space3-panel-label { font-size: clamp(0.68rem, 3.1cqw, 0.82rem); } #gameArea .space3-side-grid, .playable-demo-gamearea .space3-side-grid { width: min(44cqw, 170px); padding: 0.28rem; gap: 0.14rem; } #gameArea .space3-camera-map, .playable-demo-gamearea .space3-camera-map { width: min(92cqw, 330px); min-height: clamp(180px, 34cqh, 235px); padding: 1.15rem 0.55rem; } #gameArea .space3-camera-map .space3-iso-svg, .playable-demo-gamearea .space3-camera-map .space3-iso-svg { width: min(70cqw, 270px); max-height: clamp(145px, 26cqh, 205px); } #gameArea .space3-camera-marker, .playable-demo-gamearea .space3-camera-marker { min-width: 3rem; min-height: 2.7rem; padding: 0.08rem 0.16rem; } #gameArea .space3-camera-img, .playable-demo-gamearea .space3-camera-img { width: 1.35rem; height: 1.35rem; } #gameArea .space3-camera-marker-number, .playable-demo-gamearea .space3-camera-marker-number { width: 0.9rem; height: 0.9rem; font-size: 0.56rem; } } #gameArea .cognitive-response-btn.is-left-right-response, .playable-demo-gamearea .cognitive-response-btn.is-left-right-response { min-width: clamp(150px, 18vmin, 230px); min-height: clamp(58px, 8vmin, 84px); padding: 0.85rem 1.15rem; } #gameArea .cognitive-stage--flex-animal .cognitive-response-btn.is-left-right-response, .playable-demo-gamearea .cognitive-stage--flex-animal .cognitive-response-btn.is-left-right-response { min-width: clamp(166px, 20vmin, 248px); min-height: clamp(86px, 11vmin, 124px); } #gameArea .cognitive-stage--construct .cognitive-construct-picker-btn, .playable-demo-gamearea .cognitive-stage--construct .cognitive-construct-picker-btn { width: clamp(50px, 8vmin, 76px); height: clamp(50px, 8vmin, 76px); } #gameArea .cognitive-stage--construct .cognitive-construct-erase-btn, .playable-demo-gamearea .cognitive-stage--construct .cognitive-construct-erase-btn { min-width: clamp(96px, 14vmin, 138px); height: clamp(50px, 8vmin, 76px); } /* =========================================================== ALLTAG-Modi (cash1 EXACT, check1 CHECK, plan1 PLAN) =========================================================== */ .cognitive-stage--cash, .cognitive-stage--check, .cognitive-stage--plan { /* Inherit position:absolute/inset:0/flex from .cognitive-stage base. Override only what's needed for scrollable, content-heavy layouts. */ align-items: center; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; padding: clamp(5.8rem, 12vh, 8rem) clamp(0.8rem, 4vw, 3rem) clamp(1rem, 3vw, 2.4rem); gap: clamp(10px, 1.5vw, 18px); } /* Wraps zentrieren sich horizontal und vertikal. Wenn der Inhalt hÃ¶her als der Viewport ist, kollabieren die auto-Margins zu 0 und die Inhalte beginnen oben (mit Padding zum Header). */ .cash-wrap, .check-wrap, .plan-wrap { width: 100%; max-width: 1200px; margin: auto; align-self: center; text-align: left; } .check-wrap { display: flex; flex-direction: column; gap: clamp(10px, 1.5vw, 18px); } @media (max-width: 720px) { .cognitive-stage--cash, .cognitive-stage--check, .cognitive-stage--plan { padding-top: clamp(6.5rem, 16vh, 9rem); padding-left: clamp(0.4rem, 2vw, 1rem); padding-right: clamp(0.4rem, 2vw, 1rem); } } /* ---------- EXACT (cash1) ---------- */ .cash-wrap { display: grid; grid-template-areas: "cart cart" "pay wallet"; grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.3fr); gap: clamp(10px, 1.2vw, 18px); align-items: stretch; justify-items: stretch; max-width: 1500px; margin: 0 auto; width: 100%; } .cash-cart { grid-area: cart; min-width: 0; } .cash-pay-area { grid-area: pay; min-width: 0; justify-content: center; } .cash-wallet { grid-area: wallet; min-width: 0; justify-content: center; } @media (max-width: 900px) { .cash-wrap { grid-template-areas: "cart" "pay" "wallet"; grid-template-columns: 1fr; } } .cash-cart { background: var(--card, #fff); border: 1px solid var(--border, #d8dde6); border-radius: 12px; padding: clamp(10px, 1.5vw, 18px); box-shadow: var(--shadow-subtle, 0 2px 6px rgba(0,0,0,0.04)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .cash-cart-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text, #1a1a1a); text-align: center; } .cash-cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; width: 100%; } .cash-cart-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-width: 170px; flex: 0 1 auto; border-radius: 8px; background: color-mix(in oklab, var(--card) 96%, #9333ea 4%); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .cash-cart-item .cash-item-img { flex: 0 0 auto; width: 32px; height: 32px; margin: 0; } .cash-cart-item .cash-item-icon { flex: 0 0 auto; font-size: 1.3rem; } .cash-cart-item .cash-item-name { flex: 1 1 auto; font-size: 0.92rem; min-width: 0; } .cash-cart-item .cash-item-line { flex: 0 0 auto; font-size: 0.95rem; } .cash-item-icon { font-size: 1.5rem; line-height: 1; text-align: center; } .cash-item-img { width: 40px; height: 40px; object-fit: contain; display: block; margin: 0 auto; } .cash-item-name { font-weight: 600; overflow-wrap: anywhere; } .cash-qty { display: inline-block; padding: 1px 6px; border-radius: 999px; background: color-mix(in oklab, #9333ea 14%, var(--card)); color: #6b21a8; font-size: 0.75rem; font-weight: 700; margin-right: 4px; } .cash-promo { display: inline-block; padding: 1px 6px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 0.7rem; font-weight: 700; margin-left: 4px; } .cash-promo--bundle { background: #dbeafe; color: #1e40af; } .cash-promo--addOn { background: #dcfce7; color: #166534; } .cash-item-price { font-variant-numeric: tabular-nums; color: var(--text-muted, #555); font-size: 0.95rem; text-align: right; } .cash-price-old { color: #aaa; margin-right: 4px; } .cash-item-line { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text, #1a1a1a); min-width: 60px; text-align: right; } .cash-summary, .cash-pay-area { background: var(--card, #fff); border: 2px solid var(--border, #d8dde6); border-radius: 12px; padding: clamp(12px, 1.6vw, 20px); box-shadow: var(--shadow-subtle); display: flex; flex-direction: column; gap: 12px; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .cash-pay-area.is-exact { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18), var(--shadow-subtle); } .cash-pay-area.is-incorrect { border-color: #dc2626; background: #fef2f2; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18), var(--shadow-subtle); } .cash-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #9333ea; color: #fff; font-weight: 800; font-size: 0.9rem; } .cash-summary-head, .cash-pay-head { display: flex; align-items: center; gap: 10px; } .cash-step-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } .cash-step-hint { margin: 0; color: var(--text-muted, #555); font-size: 0.9rem; } .cash-summary-input-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cash-summary-currency { font-weight: 700; color: var(--text-muted); } .cash-total-input { flex: 1 1 140px; min-width: 120px; padding: 10px 14px; font-size: 1.3rem; font-weight: 600; border: 2px solid var(--border, #d8dde6); border-radius: 8px; font-variant-numeric: tabular-nums; text-align: right; background: #fff; color: var(--text, #1a1a1a); transition: border-color 0.15s, box-shadow 0.15s; } .cash-total-input:focus { outline: none; border-color: #9333ea; box-shadow: 0 0 0 3px color-mix(in oklab, #9333ea 22%, transparent); } .cash-total-input.is-error { border-color: #dc2626; animation: cash-shake 0.3s ease-out; } @keyframes cash-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .cash-summary-feedback { margin: 0; min-height: 1.2em; font-size: 0.9rem; color: var(--text-muted); } .cash-summary-feedback.is-success { color: #16a34a; font-weight: 600; } .cash-summary.is-done .cash-total-input { border-color: #16a34a; background: #f0fdf4; } .cash-pay-meters { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 12px; background: color-mix(in oklab, var(--card) 92%, #9333ea 8%); border-radius: 8px; font-variant-numeric: tabular-nums; font-size: 0.95rem; } .cash-pay-meter strong { font-weight: 800; color: var(--text); margin-left: 4px; } .cash-pay-diff-amount.is-zero { color: #16a34a; } .cash-pay-diff-amount.is-overshoot { color: #dc2626; } .cash-pay-diff-amount.is-undershoot { color: #ea580c; } .cash-pay-stack { flex: 1 1 auto; min-height: clamp(140px, 26vh, 280px); overflow-y: auto; padding: 10px; background: #f8fafc; border: 2px dashed var(--border, #d8dde6); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; align-content: flex-start; } .cash-pay-stack-empty { width: 100%; text-align: center; color: var(--text-muted, #888); font-size: 0.9rem; font-style: italic; } .cash-wallet { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: color-mix(in oklab, var(--card) 96%, transparent); border-radius: 8px; border: 2px dashed var(--border, #d8dde6); transition: border-color 0.15s, background-color 0.15s; } .cash-wallet.is-drop-target { border-color: #9333ea; background: #faf5ff; } .cash-wallet-group { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; } .cash-wallet-group + .cash-wallet-group { border-top: 1px solid var(--border, #d8dde6); padding-top: 10px; } .cash-wallet-group-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #555); } .cash-wallet-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .cash-pay-stack.is-drop-target { border-color: #9333ea; background: #faf5ff; } .cash-token.is-dragging, .cash-stack-token.is-dragging { opacity: 0.45; transform: scale(0.96); } .cash-token, .cash-stack-token { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px 6px; background: transparent; border: 2px solid transparent; border-radius: 8px; cursor: grab; transition: transform 0.1s, border-color 0.1s, opacity 0.1s; font-family: inherit; } .cash-token:active, .cash-stack-token:active { cursor: grabbing; } .cash-token:hover, .cash-stack-token:hover { border-color: color-mix(in oklab, #9333ea 50%, var(--border)); transform: translateY(-1px); } .cash-token:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .cash-token-svg, .cash-token-img { display: block; width: clamp(60px, 7vmin, 90px); height: auto; pointer-events: none; object-fit: contain; } .cash-token--note .cash-token-img, .cash-stack-token--note .cash-token-img { width: clamp(96px, 11vmin, 140px); } .cash-stack-token .cash-token-img { width: clamp(52px, 6vmin, 76px); } .cash-stack-token--note .cash-token-img { width: clamp(78px, 9.5vmin, 118px); } .cash-token-count { font-size: 0.95rem; font-weight: 800; color: #fff; background: #1f2937; padding: 2px 8px; border-radius: 999px; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .cash-confirm-payment { align-self: flex-start; } /* ---------- EXACT optional calculator ---------- */ .cash-calc-footer { grid-area: unset; display: flex; justify-content: center; width: 100%; margin-top: clamp(0.4rem, 1.2vw, 0.9rem); } .cash-calc-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.45rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font: 700 0.86rem/1 'Montserrat', Arial, sans-serif; cursor: pointer; transition: border-color 140ms ease, color 140ms ease; } .cash-calc-toggle::before { content: 'ðŸ§®'; font-size: 1.05em; } .cash-calc-toggle:hover, .cash-calc-toggle:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; } .cash-calc-overlay { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, #000 30%, transparent); padding: 1rem; } .cash-calc-overlay[hidden] { display: none; } .cash-calc { width: min(290px, 90vw); display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32); } .cash-calc-head { display: flex; align-items: center; justify-content: space-between; } .cash-calc-title { font: 800 0.95rem/1 'Montserrat', Arial, sans-serif; color: var(--text); } .cash-calc-close { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--disabled-bg, #ece8e0); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; } .cash-calc-close:hover, .cash-calc-close:focus-visible { background: var(--accent); color: #fff; outline: none; } .cash-calc-display { text-align: right; font: 700 1.65rem/1 'Montserrat', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--text); padding: 0.5rem 0.65rem; min-height: 2.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cash-calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; } .cash-calc-key { min-height: 46px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2, #f6f3ee); color: var(--text); font: 700 1.08rem/1 'Montserrat', Arial, sans-serif; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, transform 60ms ease; } .cash-calc-key:hover, .cash-calc-key:focus-visible { border-color: var(--accent); outline: none; } .cash-calc-key:active { transform: translateY(1px); } .cash-calc-key--op { background: color-mix(in oklab, var(--accent) 14%, var(--card)); color: var(--accent); } .cash-calc-key--equals { background: var(--accent); color: #fff; border-color: var(--accent); } .cash-calc-key--clear { background: color-mix(in oklab, #DC2626 13%, var(--card)); color: #DC2626; } .cash-calc-key--back { font-size: 1rem; } .cash-calc-key--wide { grid-column: span 2; } /* ---------- CHECK (check1) ---------- */ .check-instructions { margin: 0 auto; max-width: 1100px; text-align: center; color: var(--text-muted); font-size: 0.95rem; } .check-docs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.5vw, 22px); max-width: 1200px; margin: 0 auto; width: 100%; align-items: start; } @media (max-width: 900px) { .check-docs { grid-template-columns: 1fr; } } .check-doc { background: var(--card, #fff); border: 1px solid var(--border, #d8dde6); border-radius: 12px; padding: clamp(10px, 1.5vw, 18px); box-shadow: var(--shadow-subtle); display: flex; flex-direction: column; gap: 10px; } .check-doc.is-source { background: color-mix(in oklab, var(--card) 96%, #94a3b8 6%); } .check-doc.is-target { border-color: color-mix(in oklab, #9333ea 35%, var(--border)); transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .cognitive-stage--check.is-trial-correct .check-doc.is-target { background: color-mix(in oklab, #16a34a 14%, var(--card)); border-color: #16a34a; box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 25%, transparent); } .cognitive-stage--check.is-trial-error .check-doc.is-target { background: color-mix(in oklab, #dc2626 14%, var(--card)); border-color: #dc2626; box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 25%, transparent); } /* WÃ¤hrend des Feedbacks: ZeilenhintergrÃ¼nde und markierte Zellen transparent schalten, damit die grÃ¼ne/rote FÃ¤rbung des Lieferscheins durchscheint. */ .cognitive-stage--check.is-trial-correct .check-doc.is-target .check-doc-row, .cognitive-stage--check.is-trial-error .check-doc.is-target .check-doc-row, .cognitive-stage--check.is-trial-correct .check-doc.is-target .check-doc-row--head, .cognitive-stage--check.is-trial-error .check-doc.is-target .check-doc-row--head { background: transparent; } .cognitive-stage--check.is-trial-correct .check-doc.is-target .check-cell-clickable.is-marked, .cognitive-stage--check.is-trial-error .check-doc.is-target .check-cell-clickable.is-marked { background: transparent; box-shadow: none; } .check-doc-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); border-bottom: 2px solid color-mix(in oklab, var(--border) 70%, transparent); padding-bottom: 6px; } .check-doc.is-target .check-doc-title { color: #6b21a8; } body.theme-dark .check-doc.is-target .check-doc-title { color: #C084FC; } .check-doc-table { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; font-variant-numeric: tabular-nums; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 600px) { .check-doc-table { font-size: 0.78rem; } .check-doc-table--cols-4 { font-size: 0.72rem; } .check-doc-table--cols-5 { font-size: 0.66rem; } } .check-doc-row { display: grid; gap: 4px; padding: 8px 10px; border-radius: 6px; } .check-doc-row:not(.check-doc-row--head) { padding: 1px 6px; } .check-doc-row:not(.check-doc-row--head) .check-doc-cell { display: flex; align-items: center; min-height: 30px; } .check-doc--table .check-doc-row, .check-doc--receipt .check-doc-row, .check-doc--list .check-doc-row, .check-doc--addresses .check-doc-row, .check-doc--calendar .check-doc-row { grid-template-columns: repeat(var(--col-count, 4), 1fr); } /* Default column templates (overridden inline by JS based on actual column count) */ .check-doc--list .check-doc-row { grid-template-columns: repeat(var(--col-count, 2), minmax(0, 1fr)); } .check-doc--receipt .check-doc-row { grid-template-columns: repeat(var(--col-count, 3), minmax(0, 1fr)); } .check-doc--table .check-doc-row { grid-template-columns: repeat(var(--col-count, 4), minmax(0, 1fr)); } .check-doc--addresses .check-doc-row { grid-template-columns: repeat(var(--col-count, 4), minmax(0, 1fr)); } .check-doc--calendar .check-doc-row { grid-template-columns: repeat(var(--col-count, 4), minmax(0, 1fr)); } /* Compact display when many columns are visible */ .check-doc-table--cols-4 { font-size: 0.84rem; } .check-doc-table--cols-5 { font-size: 0.76rem; } .check-doc-table--cols-4 .check-doc-cell, .check-doc-table--cols-5 .check-doc-cell { padding: 2px 3px; } .check-doc-table--cols-4 .check-cell-clickable, .check-doc-table--cols-5 .check-cell-clickable { padding: 6px 4px; } .check-doc-row--head { background: color-mix(in oklab, var(--card) 86%, #94a3b8 14%); font-weight: 700; color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .check-doc-row:not(.check-doc-row--head):nth-child(even) { background: color-mix(in oklab, var(--card) 96%, #94a3b8 4%); } .check-doc-cell { padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .check-doc-cell--head { font-weight: 700; } .check-cell-clickable { cursor: pointer; border-radius: 6px; transition: background 0.12s, box-shadow 0.12s, color 0.12s; user-select: none; padding: 4px 6px; min-height: 28px; display: flex; align-items: center; } @media (hover: hover) and (pointer: fine) { .check-cell-clickable:hover { background: color-mix(in oklab, #9333ea 14%, transparent); } } .check-cell-clickable.is-marked { background: #fee2e2; color: #991b1b; font-weight: 700; text-decoration: line-through; box-shadow: inset 0 0 0 2px #dc2626; } .check-cell-clickable:focus-visible { outline: 2px solid #9333ea; outline-offset: 1px; } /* CHECK review states (shown after Â«FertigÂ» / Â«WeiterÂ») */ .check-doc-cell.is-hit { background: #d1fae5; outline: 2px solid #059669; outline-offset: -2px; font-weight: 700; } .check-doc-cell.is-miss { background: #fff7ed; outline: 2px solid #ea580c; outline-offset: -2px; } .check-doc-cell.is-false-alarm { background: #fee2e2; outline: 2px solid #dc2626; outline-offset: -2px; text-decoration: line-through; opacity: 0.8; } .check-progress { margin: 0 auto; text-align: center; color: var(--text-muted); font-size: 0.9rem; } .check-confirm { align-self: center; height: auto; min-height: 56px; min-width: 220px; width: auto; padding: 16px 38px; font-size: 1.05rem; } /* ---------- PLAN (plan1) ---------- */ .plan-wrap { display: flex; flex-direction: column; gap: clamp(10px, 1.5vw, 18px); /* Auf grossen Bildschirmen mehr Platz fÃ¼r Karte + Panels nutzen (vorher fix 1100px). */ max-width: min(1500px, 96vw); /* margin:auto (statt 0 auto) zentriert die Karte im Flex-Stage auch vertikal; bei zu hohem Inhalt kollabieren die auto-Margins zu 0 und der Inhalt scrollt von oben (dokumentiert bei .cash/.check/.plan-wrap). */ margin: auto; align-self: center; width: 100%; } .plan-phase-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-subtle); } .plan-phase-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; border-radius: 8px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; transition: background 0.15s, color 0.15s; } .plan-phase-tab.is-active { background: color-mix(in oklab, var(--accent) 16%, var(--card)); color: var(--accent); font-weight: 800; } .plan-phase-icon { font-size: 1.3rem; } .plan-phase-bar--minimal .plan-phase-label, .plan-phase-bar--icon-only .plan-phase-label { display: none; } .plan-phase-bar--icon-only .plan-phase-tab { padding: 6px 4px; } @media (max-width: 520px) { .plan-phase-bar { gap: 4px; padding: 4px; } .plan-phase-tab { padding: 6px 3px; font-size: 0.75rem; } .plan-phase-icon { font-size: 1.1rem; } .plan-placed-item, .plan-available-item { grid-template-columns: 24px 1fr auto; gap: 4px; padding: 6px 8px; font-size: 0.85rem; } .plan-placed-item { grid-template-columns: 22px 22px 1fr auto auto; } } .plan-phase-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: clamp(14px, 2vw, 24px); box-shadow: var(--shadow-subtle); display: flex; flex-direction: column; gap: 14px; } .plan-phase-hint { margin: 0; color: var(--text-muted); font-size: 0.95rem; } .plan-section-title { margin: 8px 0 4px; font-size: 0.95rem; font-weight: 700; color: var(--text); } /* ===================================================================== PLAN â€” "Trips around town" route planner. Minimalist, token-driven scene that mirrors the divide2 airport map (.divide-airport-*) so it inherits light + dark themes automatically. ===================================================================== */ .plan-phase-area { width: 100%; } /* Map + side panel; stacks on narrow screens. */ .plan-town-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.9fr); gap: clamp(12px, 1.6vw, 20px); align-items: start; } @media (max-width: 720px) { .plan-town-layout { grid-template-columns: 1fr; } } .plan-town-map-col { min-width: 0; } .plan-town-side-col { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); min-width: 0; } /* ---- Map scene (mirrors .divide-airport-scene) ---- */ .plan-town-scene { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 300px; /* HÃ¶he an den Viewport binden (SeitenverhÃ¤ltnis bleibt erhalten), damit die grÃ¶ssere Karte auf grossen Schirmen nicht Ã¼ber den Bildschirm hinauswÃ¤chst. */ max-width: calc(66vh * 4 / 3); margin-inline: auto; overflow: hidden; isolation: isolate; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--card) 96%, var(--text) 4%); box-shadow: var(--shadow-subtle); } .plan-town-map-col--run .plan-town-scene { aspect-ratio: 16 / 10; max-width: calc(66vh * 16 / 10); } .plan-town-road-map { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; } .plan-town-road { fill: none; stroke: color-mix(in oklab, var(--muted) 55%, transparent); stroke-width: 3.2; stroke-linecap: round; } .plan-town-route { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; } .plan-town-roadlabel-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* Einheitliche Strassen â†’ eine Legende statt Beschriftung pro Strasse. */ .plan-town-road-legend { position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 999px; background: color-mix(in oklab, var(--card) 90%, transparent); border: 1px solid var(--border); color: var(--text-muted); font-size: clamp(0.64rem, 1.1vw, 0.8rem); font-weight: 700; white-space: nowrap; pointer-events: none; } .plan-town-road-time { position: absolute; transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 5px; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--text-muted); font-size: clamp(0.62rem, 1.15vw, 0.82rem); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; } .plan-town-pin-layer { position: absolute; inset: 0; z-index: 3; } .plan-town-car-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; } /* Verdikt-Panels wÃ¤hrend der Fahrt â€“ tauchen am Stopp auf und bleiben stehen. */ .plan-town-verdict-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; } .plan-town-verdict-pop { position: absolute; transform: translate(var(--pop-x, -50%), var(--pop-y, calc(-100% - 26px))) scale(0.9); transform-origin: center bottom; display: flex; align-items: center; gap: 7px; max-width: 190px; padding: 5px 9px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--border); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18); opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; } .plan-town-verdict-pop.is-shown { opacity: 1; transform: translate(var(--pop-x, -50%), var(--pop-y, calc(-100% - 26px))) scale(1); } .plan-town-verdict-pop.is-ok { border-color: #16a34a; } .plan-town-verdict-pop.is-bad { border-color: #dc2626; } .plan-town-verdict-pop-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; line-height: 1; color: #fff; } .plan-town-verdict-pop.is-ok .plan-town-verdict-pop-mark { background: #16a34a; } .plan-town-verdict-pop.is-bad .plan-town-verdict-pop-mark { background: #dc2626; } .plan-town-verdict-pop-text { display: flex; flex-direction: column; min-width: 0; } .plan-town-verdict-pop-name { font-weight: 800; font-size: 0.78rem; color: var(--text); line-height: 1.1; } .plan-town-verdict-pop-note { font-size: 0.7rem; color: var(--text-muted); line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* Pins â€” flat markers positioned by left/top %. */ .plan-town-pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: default; z-index: 3; } button.plan-town-pin { cursor: pointer; } .plan-town-pin-marker { position: relative; display: grid; place-items: center; width: clamp(40px, 6vw, 56px); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--card); border: 1.5px solid var(--border); box-shadow: var(--shadow-subtle); font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1; transition: border-color 0.15s, transform 0.15s, background 0.15s; } .plan-town-pin-img { width: 82%; height: 82%; object-fit: contain; } .plan-town-pin-emoji { display: flex; } /* Reine Kreuzungen: kleiner, inerter Punkt â€“ keine Erledigung. */ .plan-town-pin.is-junction { pointer-events: none; z-index: 2; } .plan-town-pin.is-junction .plan-town-pin-marker { width: clamp(8px, 1.1vw, 12px); border-width: 1px; box-shadow: none; background: color-mix(in oklab, var(--muted) 30%, var(--card)); } .plan-town-pin-label { max-width: 10ch; font-size: clamp(0.66rem, 1.1vw, 0.8rem); font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } button.plan-town-pin:hover .plan-town-pin-marker { border-color: var(--accent); transform: scale(1.06); } .plan-town-pin.is-home .plan-town-pin-marker { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); background: color-mix(in oklab, var(--accent) 10%, var(--card)); } /* Route abgeschlossen (Zuhause angetippt): krÃ¤ftiger Akzentrahmen. */ .plan-town-pin.is-home.is-route-closed .plan-town-pin-marker { border-color: #16a34a; border-width: 2.5px; background: color-mix(in oklab, #16a34a 16%, var(--card)); } .plan-town-pin.is-selected .plan-town-pin-marker { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, var(--card)); } .plan-town-pin.is-arrived-ok .plan-town-pin-marker { border-color: #16a34a; background: color-mix(in oklab, #16a34a 16%, var(--card)); } .plan-town-pin.is-arrived-bad .plan-town-pin-marker { border-color: #dc2626; background: color-mix(in oklab, #dc2626 16%, var(--card)); } .plan-town-pin-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 1; } .plan-town-pin-badge[hidden] { display: none; } /* Car avatar (mirrors .divide-airport-plane). */ .plan-town-car { --plan-car-rotation: 0deg; position: absolute; transform: translate(-50%, -50%); width: clamp(34px, 5vw, 48px); aspect-ratio: 1 / 1; display: grid; place-items: center; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.22)); } .plan-town-car img { width: 100%; height: 100%; object-fit: contain; /* Das Auto-Sprite zeigt nach oben (Norden); der Drehwinkel wird aus atan2(y,x) bestimmt (0Â° = Osten). Daher +90Â° Grund-Offset, damit das Auto in Fahrtrichtung zeigt. */ transform: rotate(calc(var(--plan-car-rotation) + 90deg)); transform-origin: center; } /* Status strip â€” reuses .divide-status-strip, shrunk to sit inside the scene. */ .plan-town-scene .plan-town-status { width: min(92%, 460px); min-height: 34px; top: 8px; font-size: clamp(0.72rem, 1.2vw, 0.86rem); font-weight: 700; } /* ---- To-do list + route box ---- */ .plan-town-todo, .plan-town-route-box { border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, var(--card) 94%, transparent); padding: 10px 12px; } .plan-town-todo .plan-section-title, .plan-town-route-box .plan-section-title { margin-top: 0; } .plan-town-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .plan-town-todo-item { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; } .plan-town-todo-icon { font-size: 1.05rem; line-height: 1.2; } .plan-town-todo-text { display: flex; flex-direction: column; min-width: 0; text-align: left; } /* Name + Pills in einer umbrechenden Zeile: bei wenig Platz rutschen die Pills unter den Namen, damit der Name nie auf 0 zusammengedrÃ¼ckt wird (schmales Seitenpanel ~244px). */ .plan-town-todo-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 3px; } .plan-town-todo-name { font-weight: 700; color: var(--text); font-size: 0.9rem; flex: 1 1 6rem; min-width: 0; } .plan-town-todo-notes { color: var(--text-muted); font-size: 0.76rem; line-height: 1.25; } /* Termin-/Dauer-Pills rechts neben dem Namen (rechtsbÃ¼ndig, brechen bei Bedarf um). */ .plan-town-todo-badges { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 5px; } .plan-town-todo-dur { white-space: nowrap; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); background: color-mix(in oklab, var(--muted) 22%, transparent); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } /* Termin-Pill â€“ wie die Dauer, aber betont (Akzentfarbe), links davon. */ .plan-town-todo-termin { white-space: nowrap; font-size: 0.72rem; font-weight: 800; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } /* Schon eingeplante Orte bleiben sichtbar (Termine!), markiert mit Akzent-Name + Reihenfolge-Nummer. */ .plan-town-todo-marker { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; justify-self: center; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .plan-town-todo-item.is-planned .plan-town-todo-name { color: var(--accent); } .plan-town-todo-empty { margin: 2px 0 0; font-size: 0.8rem; font-weight: 700; color: #16a34a; } .plan-town-todo-day { margin: 10px 0 0; font-size: 0.8rem; font-weight: 700; color: var(--text); } /* Tages-Twist als eigenes Panel Ã¼ber â€žHeute zu erledigen". */ .plan-town-twist-panel { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, #f97316 55%, var(--border)); background: color-mix(in oklab, #f97316 12%, var(--card)); color: var(--text); font-size: 0.82rem; font-weight: 700; line-height: 1.25; } .plan-town-twist-icon { font-size: 1.05rem; flex: 0 0 auto; } /* ---- Route list ---- */ .plan-town-route-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .plan-town-route-row { display: grid; grid-template-columns: 18px 20px 1fr auto auto; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: color-mix(in oklab, var(--card) 90%, transparent); font-size: 0.82rem; } .plan-town-route-row.is-home { grid-template-columns: 20px 1fr auto; color: var(--text-muted); background: transparent; font-weight: 600; } .plan-town-route-sub { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-muted); line-height: 1.2; } .plan-town-route-row.is-empty { grid-template-columns: 1fr; color: var(--text-muted); font-style: italic; font-size: 0.82rem; } /* Aufforderung, Zuhause anzutippen, um die Route abzuschliessen. */ .plan-town-route-row.is-prompt { grid-template-columns: 20px 1fr; border: 1px dashed color-mix(in oklab, var(--accent) 55%, var(--border)); background: color-mix(in oklab, var(--accent) 6%, transparent); color: var(--accent); font-weight: 700; } .plan-town-route-row.is-bad .plan-town-route-sub { color: #dc2626; } .plan-town-route-row.is-ok { box-shadow: inset 2px 0 0 #16a34a; } .plan-town-route-row.is-bad { box-shadow: inset 2px 0 0 #dc2626; } .plan-town-route-pos { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 800; } .plan-town-route-icon { font-size: 0.95rem; } .plan-town-route-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-town-route-arrival { font-variant-numeric: tabular-nums; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); } .plan-town-route-remove { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 4px; } .plan-town-route-remove:hover { color: #dc2626; } /* ---- Day clock + time meter ---- */ .plan-town-clock { font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .plan-town-clock[data-tone="bad"] { color: #dc2626; } .plan-town-meter { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--muted) 30%, transparent); overflow: hidden; } .plan-town-meter-fill { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 0.25s ease; } .plan-town-meter-fill[data-tone="bad"] { background: #dc2626; } /* ---- Result phase ---- */ .plan-town-result-head { display: flex; align-items: center; gap: 14px; } .plan-town-score { flex: 0 0 auto; display: grid; place-items: center; width: clamp(54px, 8vw, 72px); aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 900; font-variant-numeric: tabular-nums; } .plan-town-score[data-tone="bad"] { border-color: #dc2626; color: #dc2626; } .plan-town-result-summary { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .plan-town-result-summary strong { font-size: 1.02rem; color: var(--text); } .plan-town-result-summary span { font-size: 0.84rem; color: var(--text-muted); } .plan-town-verdict-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .plan-town-verdict-row { display: grid; grid-template-columns: 20px 1fr auto; grid-template-areas: "icon name time" "icon note note"; gap: 0 8px; align-items: center; padding: 6px 8px; border-radius: 6px; background: color-mix(in oklab, var(--card) 90%, transparent); } .plan-town-verdict-row.is-ok { box-shadow: inset 3px 0 0 #16a34a; } .plan-town-verdict-row.is-bad { box-shadow: inset 3px 0 0 #dc2626; } .plan-town-verdict-icon { grid-area: icon; font-weight: 800; } .plan-town-verdict-row.is-ok .plan-town-verdict-icon { color: #16a34a; } .plan-town-verdict-row.is-bad .plan-town-verdict-icon { color: #dc2626; } .plan-town-verdict-name { grid-area: name; font-weight: 700; color: var(--text); font-size: 0.88rem; } .plan-town-verdict-time { grid-area: time; font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--text-muted); } .plan-town-verdict-note { grid-area: note; font-size: 0.78rem; color: var(--text-muted); } /* Phase action buttons extend .cognitive-response-btn â€” layout only. */ .plan-phase-next, .plan-town-go, .plan-finish { align-self: center; min-width: clamp(160px, 22vw, 220px); } .plan-town-go:disabled { opacity: 0.5; cursor: not-allowed; } .plan-scene { padding: 12px 14px; background: color-mix(in oklab, var(--card) 92%, #9333ea 8%); border-radius: 8px; border-left: 3px solid #9333ea; } .plan-scene-text { margin: 0; color: var(--text); line-height: 1.4; } .plan-scene-summary { padding: 8px 12px; background: color-mix(in oklab, var(--card) 94%, #9333ea 6%); border-radius: 6px; font-size: 0.92rem; } .plan-items-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .plan-item-card { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: color-mix(in oklab, var(--card) 96%, var(--accent) 4%); border: 1px solid var(--border); border-radius: 6px; } .plan-item-icon { font-size: 1.3rem; text-align: center; } .plan-item-name { font-weight: 600; color: var(--text); } .plan-item-duration { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .plan-constraints-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .plan-constraint-item { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; padding: 10px 12px; background: #fef3c7; border: 2px solid #fbbf24; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .plan-constraint-item:hover { transform: translateY(-1px); } .plan-constraint-item.is-tapped { background: #dcfce7; border-color: #16a34a; cursor: default; } .plan-constraint-item.is-tapped::after { content: 'âœ“'; color: #16a34a; font-weight: 800; margin-left: auto; } .plan-constraints-list.is-recap .plan-constraint-item { background: var(--card); border-color: var(--border); cursor: default; } .plan-constraints-list.is-recap .plan-constraint-bullet { color: var(--text-muted, #888); } .plan-constraints-list.is-recap .plan-constraint-item:hover { transform: none; } .plan-constraint-bullet { color: #92400e; text-align: center; } .plan-constraint-item.is-tapped .plan-constraint-bullet { color: #15803d; } .plan-constraint-label { color: var(--text); } .plan-placed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 60px; } .plan-placed-item { display: grid; grid-template-columns: 28px 28px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; background: color-mix(in oklab, var(--card) 92%, #9333ea 8%); border: 1px solid color-mix(in oklab, var(--border) 60%, #9333ea 40%); border-radius: 6px; } .plan-placed-pos { font-weight: 800; color: #6b21a8; text-align: center; } .plan-placed-remove { width: 44px; height: 44px; padding: 0; background: transparent; border: 2px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 1.4rem; font-weight: 700; line-height: 1; transition: background 0.15s, border-color 0.15s, color 0.15s; } .plan-placed-remove:hover { background: #fee2e2; color: #991b1b; border-color: #dc2626; } .plan-available-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .plan-available-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--card); border: 2px dashed var(--border); border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.9rem; text-align: left; transition: border-color 0.15s, transform 0.1s; } .plan-available-item:hover { border-color: #9333ea; transform: translateY(-1px); } .plan-scene-items { margin: 8px 0 0; color: var(--text); } .plan-reorder-list .plan-placed-item { display: grid; grid-template-columns: 28px 28px 1fr auto auto auto; gap: 8px; align-items: center; } .plan-reorder-btn { width: 44px; height: 44px; padding: 0; background: var(--card); border: 2px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 1.4rem; font-weight: 700; font-family: inherit; line-height: 1; transition: background 0.15s, border-color 0.15s; } .plan-reorder-btn:hover:not(:disabled) { border-color: #9333ea; background: color-mix(in oklab, var(--card) 88%, #9333ea 12%); } .plan-reorder-btn:disabled { opacity: 0.35; cursor: not-allowed; } .plan-eval-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .plan-eval-row { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; row-gap: 2px; align-items: start; padding: 10px 12px; border-left: 3px solid #94a3b8; border-radius: 0 6px 6px 0; background: var(--card); } .plan-eval-row.is-correct { border-left-color: #16a34a; background: #f0fdf4; } .plan-eval-row.is-violation { border-left-color: #dc2626; background: #fef2f2; } .plan-eval-icon { font-weight: 700; font-size: 1.05rem; line-height: 1.4; } .plan-eval-row.is-correct .plan-eval-icon { color: #16a34a; } .plan-eval-row.is-violation .plan-eval-icon { color: #991b1b; } .plan-eval-label { font-weight: 600; } .plan-eval-reason { grid-column: 2; font-size: 0.85rem; color: #4b5563; } .plan-phase-next, .plan-finish { align-self: center; } /* =========================================================== ALLTAG-Modi (cash1 EXACT, check1 CHECK, plan1 PLAN) =========================================================== */ /* Stage Container -- gemeinsame Struktur */ .cognitive-stage--cash, .cognitive-stage--check, .cognitive-stage--plan { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; gap: 12px; } /* ===== Demo-Frames fÃ¼r Anleitungs-Demo ===== */ .cognitive-stage--demo { padding: 14px 18px; } /* --- EXACT Demo --- */ .cash-demo-wrap { display: flex; flex-direction: column; gap: clamp(0.28rem, 1cqh, 0.6rem); width: 100%; height: 100%; font-size: clamp(0.6rem, 1.3cqw, 0.88rem); box-sizing: border-box; } .cash-demo-header { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.55rem; border-radius: 6px; background: color-mix(in oklab, var(--card) 80%, #9333ea 20%); font-weight: 700; flex-shrink: 0; } .cash-demo-total { font-size: clamp(0.72rem, 1.6cqw, 1rem); color: #6b21a8; } .cash-demo-cart { display: flex; flex-direction: column; gap: 0.18rem; flex: 1 1 auto; } .cash-demo-cart-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.35rem; padding: 0.18rem 0.45rem; background: var(--card); border: 1px solid var(--border); border-radius: 5px; } .cash-demo-icon { font-size: 1.05em; } .cash-demo-price { font-variant-numeric: tabular-nums; font-weight: 600; } /* pay-phase two-column layout */ .cash-demo-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; flex: 1 1 auto; min-height: 0; } .cash-demo-stack-area { display: flex; flex-direction: column; gap: 0.22rem; background: #f8fafc; border: 2px dashed var(--border); border-radius: 6px; padding: 0.3rem 0.4rem; } .cash-demo-stack-label { font-weight: 700; font-size: 0.82em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .cash-demo-stack { display: flex; flex-wrap: wrap; gap: 0.25rem; } .cash-demo-wallet-area { display: flex; flex-direction: column; gap: 0.28rem; border: 2px dashed var(--border); border-radius: 6px; padding: 0.3rem 0.4rem; background: color-mix(in oklab, var(--card) 96%, transparent); } .cash-demo-wallet-group { display: flex; flex-direction: column; gap: 0.15rem; } .cash-demo-wallet-group + .cash-demo-wallet-group { border-top: 1px solid var(--border); padding-top: 0.2rem; } .cash-demo-wallet-group-label { font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .cash-demo-wallet-row { display: flex; flex-wrap: wrap; gap: 0.2rem; } .cash-demo-denom { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; border: 2px solid var(--border); background: var(--card); font-size: 0.88em; } .cash-demo-denom--note { min-width: 2.6em; padding: 0.18rem 0.4rem; border-radius: 4px; background: #fef3c7; border-color: #f59e0b; color: #92400e; } .cash-demo-denom--coin { min-width: 2em; padding: 0.18rem 0.3rem; border-radius: 999px; background: #f3f4f6; border-color: #9ca3af; color: #1f2937; } .cash-demo-denom.is-placed { outline: 2px solid #16a34a; outline-offset: 1px; } .cash-demo-denom.is-used { opacity: 0.4; } .cash-demo-action { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; font-size: clamp(0.55rem, 1.1cqw, 0.78rem); } .cash-demo-paid { font-weight: 700; color: #15803d; font-size: 0.88em; } .cash-demo-btn { padding: 0.25rem 0.7rem; border-radius: 4px; background: #9333ea; color: #fff; font-weight: 800; } .cash-demo-btn.is-active { box-shadow: 0 0 0 3px color-mix(in oklab, #9333ea 32%, transparent); } .cash-demo-hint { color: var(--text-muted); font-style: italic; } /* --- CHECK Demo --- */ .check-demo-wrap { display: flex; flex-direction: column; gap: clamp(0.25rem, 1cqh, 0.5rem); width: 100%; font-size: clamp(0.55rem, 1.2cqw, 0.82rem); } .check-demo-header { font-weight: 700; padding: 0.22rem 0.5rem; background: color-mix(in oklab, var(--card) 86%, #94a3b8 14%); border-radius: 5px; color: var(--text-muted); font-size: 0.88em; text-transform: uppercase; letter-spacing: 0.03em; } .check-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; flex: 1 1 auto; } .check-demo-doc { background: color-mix(in oklab, var(--card) 96%, #94a3b8 6%); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.35rem; display: flex; flex-direction: column; gap: 0.2rem; } .check-demo-doc--target { background: var(--card); border-color: color-mix(in oklab, #9333ea 35%, var(--border)); } .check-demo-doc-caption { font-weight: 700; padding-bottom: 0.2rem; border-bottom: 1.5px solid color-mix(in oklab, var(--border) 70%, transparent); font-size: 0.85em; color: var(--text-muted); } .check-demo-doc--target .check-demo-doc-caption { color: #6b21a8; } .check-demo-table { display: flex; flex-direction: column; gap: 0.1rem; font-variant-numeric: tabular-nums; } .check-demo-row { display: grid; grid-template-columns: 1fr 1fr 0.6fr 0.8fr; gap: 0.15rem; border-radius: 3px; padding: 0.08rem 0.1rem; } .check-demo-row:nth-child(even) { background: color-mix(in oklab, var(--card) 96%, #94a3b8 4%); } .check-demo-cell { padding: 0.12rem 0.2rem; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .check-demo-cell.is-error { background: #fee2e2; color: #991b1b; font-weight: 700; animation: check-demo-pulse 1.4s ease-in-out infinite; } .check-demo-cell.is-marked { background: #fee2e2; color: #991b1b; font-weight: 700; text-decoration: line-through; box-shadow: inset 0 0 0 1.5px #dc2626; border-radius: 3px; } @keyframes check-demo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); } } .check-demo-hint { text-align: center; font-style: italic; color: var(--text-muted); font-size: 0.9em; flex-shrink: 0; } /* --- PLAN Demo --- */ .plan-demo-wrap { display: flex; flex-direction: column; gap: clamp(0.3rem, 1.1cqh, 0.55rem); width: 100%; font-size: clamp(0.6rem, 1.3cqw, 0.85rem); } .plan-demo-phase { text-align: center; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #6b21a8; font-size: clamp(0.65rem, 1.5cqw, 0.9rem); } .plan-demo-constraint { align-self: center; padding: 0.2rem 0.7rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 600; font-size: 0.9em; border: 1px solid #f59e0b; } .plan-demo-board { background: var(--card); border: 1px dashed var(--border); border-radius: 6px; padding: 0.5rem; } .plan-demo-pool { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; } .plan-demo-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: color-mix(in oklab, var(--card) 80%, #9333ea 20%); border: 1px solid #9333ea; font-weight: 600; } .plan-demo-timeline { display: flex; flex-direction: column; gap: 0.25rem; } .plan-demo-slot { display: grid; grid-template-columns: auto auto 1fr; gap: 0.4rem; align-items: center; padding: 0.25rem 0.5rem; background: color-mix(in oklab, var(--bg) 92%, transparent); border-left: 3px solid #9333ea; border-radius: 4px; } .plan-demo-slot.is-checked { border-left-color: #15803d; background: color-mix(in oklab, #d1fae5 35%, var(--bg) 65%); } .plan-demo-slot.is-checked::after { content: '\2713'; color: #15803d; font-weight: 800; margin-left: auto; } .plan-demo-slot-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); } .plan-demo-hint { text-align: center; font-style: italic; color: var(--text-muted); } body.login-public #section-info .info-exercise-demo:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]), body.login-public #section-info .info-exercise-demo:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-instruction-demo-container, body.login-public #section-info .info-exercise-demo:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen { min-height: clamp(230px, 23vw, 330px); } body.login-public #section-info .info-exercise-demo:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-stage { overflow: hidden; padding: clamp(42px, 13cqh, 54px) clamp(0.25rem, 1cqw, 0.6rem) 0.35rem; gap: 0.28rem; } body.login-public #section-info .info-exercise-demo:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-header { top: clamp(10px, 4cqh, 16px); width: min(90%, 520px); gap: 0.12rem; } body.login-public #section-info .info-exercise-demo:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-title { font-size: clamp(0.78rem, 1.55cqw, 1.05rem); } body.login-public #section-info .info-exercise-demo:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-hint { max-width: min(480px, 92%); font-size: clamp(0.58rem, 1.12cqw, 0.76rem); line-height: 1.15; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wrap, body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-wrap, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-wrap { margin: 0 auto; transform-origin: top center; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wrap { position: relative; left: 50%; width: 190%; max-width: 1180px; transform: translateX(-50%) scale(0.46); } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-pay-area, body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wallet { gap: 0.24rem; padding: 0.34rem; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-pay-stack { min-height: clamp(54px, 13cqh, 92px); padding: 0.3rem; gap: 0.22rem; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-pay-stack-empty { font-size: 0.68rem; line-height: 1.25; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wallet-group { grid-template-columns: 40px 1fr; gap: 0.28rem; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wallet-group + .cash-wallet-group { padding-top: 0.22rem; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wallet-group-label { font-size: 0.58rem; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wallet-row { gap: 0.22rem; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-token, body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-stack-token { gap: 1px; padding: 2px 3px 3px; border-width: 1px; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-token-img, body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-stack-token .cash-token-img { width: clamp(24px, 4.1vmin, 36px); } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-token--note .cash-token-img, body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-stack-token--note .cash-token-img { width: clamp(40px, 6.2vmin, 58px); } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-token-count { min-width: 1.25rem; padding: 1px 4px; font-size: 0.66rem; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-wrap { position: relative; left: 50%; width: 150%; max-width: 1280px; gap: 0.34rem; transform: translateX(-50%) scale(0.56); } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-instructions { display: none; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-docs { gap: 0.38rem; min-width: 0; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc { gap: 0.22rem; padding: 0.38rem; min-width: 0; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc-title { padding-bottom: 0.22rem; font-size: 0.95rem; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc-table { overflow: hidden; min-width: 0; font-size: 0.66rem; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc-row { gap: 0.12rem; padding: 0.2rem 0.28rem; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc-row--head { font-size: 0.64rem; letter-spacing: 0; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc-cell { overflow-wrap: normal; white-space: nowrap; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc-row:not(.check-doc-row--head) .check-doc-cell { min-height: 1.45rem; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-cell-clickable { padding: 0.2rem 0.26rem; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-progress { font-size: 0.78rem; } body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-confirm { min-height: 1.75rem; min-width: 6.8rem; padding: 0.35rem 0.82rem; font-size: 0.76rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-wrap { position: relative; left: 50%; width: 148%; max-width: 1120px; gap: 0.36rem; transform: translateX(-50%) scale(0.58); } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-phase-bar { gap: 0.22rem; padding: 0.28rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-phase-tab { gap: 0.08rem; padding: 0.32rem 0.35rem; font-size: 0.8rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-phase-icon { font-size: 1.05rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-phase-card { gap: 0.4rem; padding: 0.55rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-phase-hint, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-scene-text, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-section-title, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-item-name, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-constraint-label { font-size: clamp(0.72rem, 1cqw, 0.86rem); line-height: 1.28; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-scene { padding: 0.55rem 0.68rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-items-list, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-available-items { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0.24rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-item-card, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-available-item, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-placed-item, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-constraint-item { gap: 0.24rem; padding: 0.28rem 0.36rem; } body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-phase-next, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-finish { min-height: 2.25rem; padding: 0.52rem 1.1rem; font-size: 0.88rem; } body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-cart, body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-pay-area, body.login-public #section-info .info-exercise-demo[data-mode="cash1"] .cash-wallet, body.login-public #section-info .info-exercise-demo[data-mode="check1"] .check-doc, body.login-public #section-info .info-exercise-demo[data-mode="plan1"] .plan-phase-card { box-shadow: none; } .program-start-visual.mockup-screen:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-stage { overflow: hidden; padding: clamp(56px, 12cqh, 72px) clamp(0.5rem, 1.5cqw, 1rem) clamp(0.4rem, 1.1cqh, 0.7rem); gap: clamp(0.28rem, 0.9cqh, 0.5rem); } .program-start-visual.mockup-screen:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-header { top: clamp(10px, 3.4cqh, 18px); width: min(90%, 720px); } .program-start-visual.mockup-screen:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-title { font-size: clamp(0.9rem, 1.85cqw, 1.25rem); } .program-start-visual.mockup-screen:is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-hint { max-width: min(680px, 92%); font-size: clamp(0.62rem, 1.22cqw, 0.86rem); line-height: 1.15; } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-wrap, .program-start-visual.mockup-screen[data-mode="check1"] .check-wrap, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-wrap { margin: 0 auto; transform-origin: top center; } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-wrap { position: relative; left: 50%; width: 126%; max-width: 1360px; gap: clamp(0.45rem, 1cqw, 0.7rem); transform: translateX(-50%) scale(0.79); } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-cart, .program-start-visual.mockup-screen[data-mode="cash1"] .cash-pay-area, .program-start-visual.mockup-screen[data-mode="cash1"] .cash-wallet { padding: clamp(0.5rem, 1.05cqw, 0.85rem); gap: clamp(0.35rem, 0.9cqw, 0.65rem); box-shadow: none; } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-cart-title, .program-start-visual.mockup-screen[data-mode="cash1"] .cash-step-title { font-size: clamp(0.9rem, 1.45cqw, 1.05rem); } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-cart-list { gap: 0.34rem; } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-cart-item { min-width: 140px; gap: 0.34rem; padding: 0.3rem 0.55rem; } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-cart-item .cash-item-img { width: 26px; height: 26px; } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-cart-item .cash-item-name, .program-start-visual.mockup-screen[data-mode="cash1"] .cash-cart-item .cash-item-line, .program-start-visual.mockup-screen[data-mode="cash1"] .cash-step-hint { font-size: clamp(0.72rem, 1.15cqw, 0.88rem); } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-pay-stack { min-height: clamp(72px, 15cqh, 126px); } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-token-img { width: clamp(34px, 4.2cqw, 50px); } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-token--note .cash-token-img, .program-start-visual.mockup-screen[data-mode="cash1"] .cash-stack-token--note .cash-token-img { width: clamp(52px, 6.6cqw, 76px); } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-wallet-group { grid-template-columns: 58px 1fr; gap: 0.5rem; } .program-start-visual.mockup-screen[data-mode="cash1"] .cash-confirm-payment { min-height: 2.4rem; padding: 0.55rem 1rem; font-size: 0.85rem; } .program-start-visual.mockup-screen[data-mode="check1"] .check-wrap { position: relative; left: 50%; width: 126%; max-width: 1240px; gap: 0.52rem; transform: translateX(-50%) scale(0.79); } .program-start-visual.mockup-screen[data-mode="check1"] .check-instructions { display: none; } .program-start-visual.mockup-screen[data-mode="check1"] .check-docs { gap: 0.55rem; min-width: 0; } .program-start-visual.mockup-screen[data-mode="check1"] .check-doc { gap: 0.36rem; padding: 0.6rem; min-width: 0; box-shadow: none; } .program-start-visual.mockup-screen[data-mode="check1"] .check-doc-title { padding-bottom: 0.22rem; font-size: 0.96rem; } .program-start-visual.mockup-screen[data-mode="check1"] .check-doc-table { overflow: hidden; min-width: 0; font-size: clamp(0.7rem, 1.06cqw, 0.84rem); } .program-start-visual.mockup-screen[data-mode="check1"] .check-doc-row { gap: 0.18rem; padding: 0.28rem 0.38rem; } .program-start-visual.mockup-screen[data-mode="check1"] .check-doc-row--head { font-size: 0.64rem; letter-spacing: 0; } .program-start-visual.mockup-screen[data-mode="check1"] .check-doc-cell { overflow-wrap: normal; white-space: nowrap; } .program-start-visual.mockup-screen[data-mode="check1"] .check-doc-row:not(.check-doc-row--head) .check-doc-cell { min-height: 1.65rem; } .program-start-visual.mockup-screen[data-mode="check1"] .check-cell-clickable { padding: 0.24rem 0.32rem; } .program-start-visual.mockup-screen[data-mode="check1"] .check-progress { font-size: 0.78rem; } .program-start-visual.mockup-screen[data-mode="check1"] .check-confirm { min-height: 2.15rem; min-width: 8rem; padding: 0.45rem 1rem; font-size: 0.84rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-wrap { position: relative; left: 50%; width: 118%; max-width: 1160px; gap: 0.54rem; transform: translateX(-50%) scale(0.85); } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-bar, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-card { box-shadow: none; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-bar { gap: 0.22rem; padding: 0.28rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-tab { gap: 0.08rem; padding: 0.34rem 0.38rem; font-size: 0.78rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-icon { font-size: 1.12rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-card { gap: 0.55rem; padding: 0.7rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-hint, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-scene-text, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-section-title, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-item-name, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-constraint-label { font-size: clamp(0.78rem, 1.14cqw, 0.94rem); line-height: 1.22; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-scene { padding: 0.46rem 0.55rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-items-list, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-available-items { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.34rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-item-card, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-available-item, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-placed-item, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-constraint-item { gap: 0.34rem; padding: 0.36rem 0.46rem; } .program-start-visual.mockup-screen[data-mode="plan1"] .plan-phase-next, .program-start-visual.mockup-screen[data-mode="plan1"] .plan-finish { min-height: 2.25rem; padding: 0.48rem 1rem; font-size: 0.84rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen):is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-stage { overflow: hidden; padding: clamp(48px, 13cqh, 64px) clamp(0.34rem, 1.1cqw, 0.7rem) clamp(0.28rem, 0.9cqh, 0.55rem); gap: clamp(0.2rem, 0.7cqh, 0.38rem); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen):is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-header { top: clamp(8px, 3cqh, 15px); width: min(92%, 620px); gap: 0.12rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen):is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-title { font-size: clamp(0.76rem, 1.5cqw, 1.02rem); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen):is([data-mode="cash1"], [data-mode="check1"], [data-mode="plan1"]) .cognitive-demo-screen .cognitive-persistent-hint { max-width: min(560px, 92%); font-size: clamp(0.5rem, 1cqw, 0.68rem); line-height: 1.12; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-wrap, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-wrap, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-wrap { position: relative; left: 50%; margin: 0 auto; transform-origin: top center; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-wrap { width: 134%; max-width: 1360px; gap: clamp(0.3rem, 0.8cqw, 0.55rem); transform: translateX(-50%) scale(0.74); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-cart, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-pay-area, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-wallet { padding: clamp(0.38rem, 0.86cqw, 0.68rem); gap: clamp(0.26rem, 0.7cqw, 0.48rem); box-shadow: none; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-cart-title, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-step-title { font-size: clamp(0.78rem, 1.18cqw, 0.94rem); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-cart-list { gap: 0.24rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-cart-item { min-width: 118px; gap: 0.24rem; padding: 0.24rem 0.42rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-cart-item .cash-item-img { width: 22px; height: 22px; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-cart-item .cash-item-name, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-cart-item .cash-item-line, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-step-hint { font-size: clamp(0.6rem, 0.92cqw, 0.76rem); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-pay-stack { min-height: clamp(56px, 13cqh, 105px); padding: 0.34rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-token-img { width: clamp(28px, 3.5cqw, 42px); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-token--note .cash-token-img, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-stack-token--note .cash-token-img { width: clamp(42px, 5.4cqw, 64px); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-wallet-group { grid-template-columns: 48px 1fr; gap: 0.36rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="cash1"] .cash-confirm-payment { min-height: 1.95rem; padding: 0.4rem 0.78rem; font-size: 0.7rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-wrap { width: 132%; max-width: 1240px; gap: 0.42rem; transform: translateX(-50%) scale(0.76); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-instructions { display: none; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-docs { gap: 0.42rem; min-width: 0; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-doc { gap: 0.28rem; padding: 0.48rem; min-width: 0; box-shadow: none; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-doc-title { padding-bottom: 0.2rem; font-size: 0.84rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-doc-table { overflow: hidden; min-width: 0; font-size: clamp(0.66rem, 0.98cqw, 0.8rem); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-doc-row { gap: 0.14rem; padding: 0.24rem 0.32rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-doc-row--head { font-size: 0.58rem; letter-spacing: 0; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-doc-cell { overflow-wrap: normal; white-space: nowrap; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-doc-row:not(.check-doc-row--head) .check-doc-cell { min-height: 1.58rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-cell-clickable { padding: 0.22rem 0.28rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-progress { font-size: 0.68rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="check1"] .check-confirm { min-height: 1.9rem; min-width: 7.2rem; padding: 0.38rem 0.84rem; font-size: 0.74rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-wrap { width: 122%; max-width: 1120px; gap: 0.42rem; transform: translateX(-50%) scale(0.82); } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-bar, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-card { box-shadow: none; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-bar { gap: 0.16rem; padding: 0.22rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-tab { gap: 0.08rem; padding: 0.28rem 0.32rem; font-size: 0.66rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-icon { font-size: 0.98rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-card { gap: 0.42rem; padding: 0.56rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-hint, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-scene-text, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-section-title, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-item-name, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-constraint-label { font-size: clamp(0.66rem, 0.98cqw, 0.8rem); line-height: 1.2; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-scene { padding: 0.34rem 0.42rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-items-list, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-available-items { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.28rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-item-card, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-available-item, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-placed-item, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-constraint-item { gap: 0.24rem; padding: 0.26rem 0.34rem; } :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-phase-next, :is(.instructions-visual.mockup-screen, #instructionPanel .mockup-screen, .screening-instruction-visual.mockup-screen)[data-mode="plan1"] .plan-finish { min-height: 1.95rem; padding: 0.4rem 0.84rem; font-size: 0.72rem; } /* ===== Multiselect-Felder (constraintTypes, themePool) ===== */ .cognitive-setting-row[data-cognitive-multiselect-group] .multiselect-options { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.4rem; } .cognitive-setting-row .multiselect-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } .cognitive-setting-row .multiselect-option:hover { border-color: #9333ea; } .cognitive-setting-row .multiselect-option input[type="checkbox"]:checked + .checkbox-copy { font-weight: 700; color: #6b21a8; } /* â”€â”€ Adaptive field lock/unlock â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ #settingsOverlay .cognitive-adaptive-settings-panel .adaptive-field { display: flex; align-items: flex-start; gap: 0.4rem; } .adaptive-lock-btn { background: none; border: none; cursor: pointer; padding: 3px; border-radius: 4px; line-height: 1; flex-shrink: 0; margin-top: 0.15rem; color: color-mix(in oklab, #b91c1c 60%, var(--muted, #888)); opacity: 0.65; transition: opacity 0.15s, color 0.15s; } .adaptive-lock-btn:hover { opacity: 1; } /* Locked state â€“ the field follows adaptive logic */ .adaptive-field.is-locked input[readonly], .adaptive-field.is-locked select:disabled, .adaptive-field.is-locked input[type="checkbox"]:disabled + .checkbox-copy { opacity: 0.7; cursor: default; } .adaptive-field.is-locked input[readonly] { background: color-mix(in oklab, var(--bg, #f9f9f9) 80%, transparent); } /* Unlocked state â€“ the therapist has manually overridden this field */ .adaptive-field.is-unlocked { border-color: #d97706 !important; background: color-mix(in oklab, #fbbf24 6%, var(--card)) !important; } .adaptive-field.is-unlocked .adaptive-lock-btn { color: #d97706; opacity: 1; } #settingsOverlay .cognitive-adaptive-settings-panel .adaptive-field.is-unlocked .input-item > .bold { color: color-mix(in oklab, #b45309 72%, var(--text)); } body.theme-dark .adaptive-field.is-unlocked { border-color: #fbbf24 !important; background: color-mix(in oklab, #f59e0b 10%, var(--card)) !important; } body.theme-dark .adaptive-field.is-unlocked .adaptive-lock-btn { color: #fbbf24; } body.theme-dark #settingsOverlay .cognitive-adaptive-settings-panel .adaptive-field.is-unlocked .input-item > .bold { color: color-mix(in oklab, #fcd34d 58%, var(--text)); } #settingsOverlay .cognitive-adaptive-settings-panel .adaptive-field .setting { flex: 1; min-width: 0; } /* ========================================================================== Z) RESPONSIVE TUNE-UP (2026-05-15) Closes coverage gaps for ultra-small phones (<=360px), iPad-landscape (769-839px), and widescreen (>=1700px). Mirrors sakkadentraining.ch. ========================================================================== */ /* Ultra-small phones (iPhone SE 1, older Androids) â€” slightly compact body */ @media (max-width: 360px) { :root { --fs-md: 1rem; --fs-lg: 1.12rem; --fs-xl: 1.4rem; } .screening-mode-btn { min-height: 60px; padding: 0.55rem 0.8rem; } .btn { font-size: var(--fs-xs); } } /* iPad-landscape gap (769â€“839px) */ @media (min-width: 769px) and (max-width: 839px) { .page, .main-content { padding-left: clamp(16px, 3vw, 28px); padding-right: clamp(16px, 3vw, 28px); } .screening-mode-btn { min-height: 72px; } } /* Widescreen (>=1700px) â€” cap text scaling */ @media (min-width: 1700px) { :root { --fs-md: 1.05rem; --fs-lg: 1.18rem; --fs-xl: 1.55rem; --fs-2xl: 2.1rem; } .main-content, .page { max-width: 1500px; margin-inline: auto; } .main-content:has(> #trainingPage:not(.is-hidden)), .main-content:has(> #screeningPage:not(.is-hidden)) { max-width: none; margin-inline: 0; } } .screening-toggle-btn { font-size: var(--fs-sm); } @media (prefers-contrast: more) { :root { --muted: var(--ink-2); } } /* N7 (2026-05-23) â€” M-CARD-1: Auf Mobile sind Mode-Card-Beschreibungen ("Visuelle Reizverarbeitung", "Links/rechts nach RÃ¤umen") nach 2 Zeilen abgeschnitten und werden zu "Visuelle Reiz-..." etc. Auf Mobile-Viewports 3 Zeilen erlauben + Schrift leicht hochskalieren fÃ¼r bessere Lesbarkeit. 720px-Breakpoint matched die existierende Mobile-Bottom-Nav-Schwelle. */ @media (max-width: 720px) { .training-page .training-mode-btn .mode-description { -webkit-line-clamp: 3; font-size: 0.78rem; line-height: 1.3; } }