/* ========================================================================== Rätselheft – Design system base styles (docs/design.md) Self-hosted fonts, light/dark tokens, safe-area, base components. ========================================================================== */ /* --- Fonts (self-hosted, Latin subset, no CDN) --------------------------- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-600.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/fraunces-700.woff2') format('woff2'); } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/karla-400.woff2') format('woff2'); } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/karla-600.woff2') format('woff2'); } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/karla-700.woff2') format('woff2'); } /* --- Design tokens --------------------------------------------------------- */ :root { --bg: #F4EFE6; --surface: #1F1B16; --on-surface: #F4EFE6; --ink: #1F1B16; --muted: #6B6358; --line: #D6CCBA; --line-dashed: #B9AE9C; --nav-bg: #EBE4D7; --accent: #B3400C; --on-accent: #FFFFFF; --accent-on-surface: #E0703A; --cell-covered: #9A8B72; /* >= 3:1 vs --cell-open (WCAG 1.4.11) */ --cell-open: #FBF8F2; --cell-grid: #BFB29D; --num-1: #1E40AF; --num-2: #166534; --num-3: #B3400C; --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Karla', system-ui, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --page-margin: 20px; --radius-card: 14px; --radius-button: 10px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg: #1A1714; --surface: #EFE8DC; --on-surface: #1A1714; --ink: #EFE8DC; --muted: #A89F91; --line: #3A342C; --line-dashed: #4A4238; --nav-bg: #221E1A; --accent: #E0703A; --on-accent: #1A1714; --accent-on-surface: #B3400C; --cell-covered: #706756; /* >= 3:1 vs --cell-open, --ink on it >= 4.5:1 */ --cell-open: #1C1916; --cell-grid: #4A4238; --num-1: #8FB0FF; --num-2: #7BC49A; --num-3: #F09A6E; color-scheme: dark; } } /* Manual theme override (js/app.js sets data-theme on ) takes precedence over the system preference. */ :root[data-theme='light'] { --bg: #F4EFE6; --surface: #1F1B16; --on-surface: #F4EFE6; --ink: #1F1B16; --muted: #6B6358; --line: #D6CCBA; --line-dashed: #B9AE9C; --nav-bg: #EBE4D7; --accent: #B3400C; --on-accent: #FFFFFF; --accent-on-surface: #E0703A; --cell-covered: #9A8B72; /* >= 3:1 vs --cell-open (WCAG 1.4.11) */ --cell-open: #FBF8F2; --cell-grid: #BFB29D; --num-1: #1E40AF; --num-2: #166534; --num-3: #B3400C; color-scheme: light; } :root[data-theme='dark'] { --bg: #1A1714; --surface: #EFE8DC; --on-surface: #1A1714; --ink: #EFE8DC; --muted: #A89F91; --line: #3A342C; --line-dashed: #4A4238; --nav-bg: #221E1A; --accent: #E0703A; --on-accent: #1A1714; --accent-on-surface: #B3400C; --cell-covered: #706756; --cell-open: #1C1916; --cell-grid: #4A4238; --num-1: #8FB0FF; --num-2: #7BC49A; --num-3: #F09A6E; color-scheme: dark; } /* --- Reset / base ------------------------------------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } h1, h2, h3, p, ul, figure { margin: 0; } a { color: inherit; text-decoration: none; } button, select, input { font: inherit; color: inherit; } svg { display: block; } ::selection { background: var(--accent); color: var(--on-accent); } .tabular-nums { font-variant-numeric: tabular-nums; } /* --- App shell / safe area ------------------------------------------------ */ .app-shell { min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(72px + env(safe-area-inset-bottom)) env(safe-area-inset-left); /* clip (unlike hidden) does not create a scroll container, so position: sticky inside the shell still sticks to the viewport. */ overflow-x: hidden; overflow-x: clip; } .page { max-width: 480px; margin: 0 auto; padding: var(--space-5) var(--page-margin) var(--space-8); } /* --- Typography scale ----------------------------------------------------- */ .page-title { font-family: var(--font-serif); font-weight: 700; font-size: 46px; line-height: 1; margin-bottom: var(--space-4); } .page-subtitle { color: var(--muted); margin-bottom: var(--space-4); } .section-title { font-family: var(--font-serif); font-weight: 700; font-size: 22px; margin-bottom: var(--space-3); } .label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .empty-state { color: var(--muted); padding: var(--space-6) 0; } .rule-double { height: 4px; margin-bottom: var(--space-5); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); } /* --- Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-button); border: 1.5px solid var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: 15px; cursor: pointer; background: transparent; color: var(--ink); width: 100%; margin-bottom: var(--space-3); } .btn--filled { background: var(--ink); color: var(--bg); } .btn--outline { background: transparent; color: var(--ink); } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; } .select { display: block; width: 100%; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-button); border: 1.5px solid var(--ink); background: var(--bg); color: var(--ink); margin-bottom: var(--space-4); } .toggle-row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; margin-bottom: var(--space-2); } .toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); } /* --- Cards ------------------------------------------------------------------ */ .card { display: block; background: var(--surface); color: var(--on-surface); border-radius: var(--radius-card); padding: var(--space-5); margin-bottom: var(--space-6); } .card--continue__label { color: var(--accent-on-surface); /* accent 'Hellton' readable on the inverted card */ } .card--continue__title { font-family: var(--font-serif); font-weight: 700; font-size: 24px; margin: var(--space-2) 0; } .card--continue__mode { color: var(--on-surface); opacity: 0.8; } /* --- Game list / mode list ---------------------------------------------------- */ .game-list { border-top: 1px dashed var(--line-dashed); } .game-list__row, .mode-list .game-list__row { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; padding: var(--space-3) 0; border-bottom: 1px dashed var(--line-dashed); } .tile-icon { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; } .game-list__info { flex: 1 1 auto; min-width: 0; } .game-list__name { font-family: var(--font-serif); font-weight: 600; font-size: 19px; } .game-list__desc { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-list__best { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .mode-list { border-top: 1px dashed var(--line-dashed); margin-bottom: var(--space-5); } /* --- Tab bar ------------------------------------------------------------------ */ .tab-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--nav-bg); border-top: 1px solid var(--line); padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); z-index: 20; } .tab-bar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) 0; min-height: 44px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid transparent; } .tab-bar__item.is-active { color: var(--ink); border-bottom-color: var(--accent); } /* --- Game header (rendered by js/game-host.js) --------------------------------- */ .game-header { padding: var(--space-3) var(--page-margin) 0; max-width: 480px; margin: 0 auto; } .game-header__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); } /* Title and mode on one line (wraps only if the title is very long). */ .game-header__heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); margin-bottom: var(--space-3); } .game-header__back { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; } .game-header__actions { display: flex; gap: var(--space-2); } .game-header__title { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 1.1; } .game-header__mode { color: var(--muted); } /* --- Stat band ------------------------------------------------------------------ */ .stat-band { max-width: 480px; margin: 0 auto var(--space-5); padding: 0 var(--page-margin); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); } .stat-band__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-2); border-left: 1px solid var(--line); } .stat-band__col:first-child { border-left: none; } .stat-band__label { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .stat-band__value { font-family: var(--font-serif); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; } /* --- Game stage (spiel-spezifischer Container) ---------------------------------- */ .game-stage { max-width: 480px; margin: 0 auto; padding: 0 var(--page-margin) var(--space-6); } .game-unavailable { max-width: 480px; margin: 0 auto; padding: var(--space-8) var(--page-margin); text-align: center; } .game-unavailable p { color: var(--muted); margin-bottom: var(--space-5); } /* --- Generic playfield helpers (used by games) ----------------------------------- */ .cell { background: var(--cell-covered); border: none; } .cell--open { background: var(--cell-open); } .cell--num-1 { color: var(--num-1); } .cell--num-2 { color: var(--num-2); } .cell--num-3 { color: var(--num-3); } /* --- Toolbar (Werkzeugleiste) ---------------------------------------------------- */ .toolbar { max-width: 480px; margin: 0 auto; padding: 0 var(--page-margin) var(--space-2); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .toolbar__btn { min-height: 56px; border-radius: var(--radius-button); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; } .toolbar__btn.is-active { background: var(--ink); color: var(--bg); } .toolbar__hint { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13px; } /* --- Bottom sheets (result dialog, menu, confirm) -------------------------------- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; } .sheet { width: 100%; max-width: 480px; background: var(--bg); color: var(--ink); border-top: 3px solid var(--ink); border-radius: var(--radius-card) var(--radius-card) 0 0; padding: var(--space-5) var(--page-margin) calc(var(--space-6) + env(safe-area-inset-bottom)); position: relative; } .sheet::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink); } .sheet__title { font-family: var(--font-serif); font-weight: 700; font-size: 24px; margin-bottom: var(--space-4); } .sheet__message { color: var(--muted); margin-bottom: var(--space-5); } .sheet__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); } .sheet__actions .btn { margin-bottom: 0; } /* Two secondary actions side by side (result dialog: Übersicht | Zur Rangliste). */ .sheet__actions-row { display: flex; gap: var(--space-2); } .sheet__actions-row .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--space-3); } .result-dialog .stat-band { padding: 0; margin: 0 0 var(--space-2); } .menu-list { list-style: none; padding: 0; margin: 0; border-top: 1px dashed var(--line-dashed); } .menu-list__item { width: 100%; min-height: 52px; text-align: left; background: none; border: none; border-bottom: 1px dashed var(--line-dashed); font-size: 16px; font-weight: 600; } /* --- Toasts ----------------------------------------------------------------------- */ .toast-region { position: fixed; left: var(--page-margin); right: var(--page-margin); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; } .toast { background: var(--surface); color: var(--on-surface); border-radius: var(--radius-button); padding: var(--space-3) var(--space-4); font-size: 14px; max-width: 480px; width: 100%; text-align: center; transition: opacity 0.3s ease; } .toast--action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; } .toast__action { background: none; border: none; color: var(--accent-on-surface); /* toast is inverted (--surface) */ font-weight: 700; } .toast--hide { opacity: 0; } /* Update notice: actions on the right; while a partie runs (deferred) it is more prominent: accent line on the left, text above the actions. */ .toast__actions { display: flex; flex-shrink: 0; justify-content: flex-end; gap: var(--space-1); } .toast__action--secondary { color: var(--on-surface); font-weight: 600; } .toast--update-deferred { flex-direction: column; align-items: stretch; gap: var(--space-1); border-left: 3px solid var(--accent-on-surface); } /* --- Segmented control (Rangliste filters) ----------------------------------------- */ .segmented { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; } .segmented__item { min-height: 44px; cursor: pointer; padding: 0 var(--space-3); border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; } .segmented__item[aria-current='true'] { background: var(--ink); color: var(--bg); } /* --- Leaderboard table -------------------------------------------------------------- */ .leaderboard-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); } .leaderboard-table td { padding: var(--space-2) var(--space-2); border-bottom: 1px dashed var(--line-dashed); } .leaderboard-table__rank { font-family: var(--font-serif); font-weight: 700; width: 2.5em; } .leaderboard-table__value { text-align: right; font-variant-numeric: tabular-nums; } .leaderboard-table__row--me { border-bottom: 2px solid var(--accent); } .leaderboard-total { text-align: center; } /* --- Settings ------------------------------------------------------------------------ */ .settings-section { margin-bottom: var(--space-7); } .settings-row__value { font-family: var(--font-serif); font-weight: 600; font-size: 19px; margin-bottom: var(--space-3); } .settings-row__hint { color: var(--muted); margin-bottom: var(--space-3); } /* ========================================================================== Additions: utilities, states and helpers used by js/ and by the games. ========================================================================== */ /* --- Utilities ---------------------------------------------------------------------- */ [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Keyboard focus: visible ring in accent, not shown for pointer clicks. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } button, label.btn, .tab-bar__item, .game-list__row { cursor: pointer; } button:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: default; } /* --- Overview header ------------------------------------------------------------------- */ .overview-header__date { display: block; margin-bottom: var(--space-2); } .page--overview .page-title { margin-bottom: var(--space-3); } /* Back link used on mode select / leaderboard pages (same look as game header). */ .page > .game-header__back { margin-bottom: var(--space-2); } /* --- Card action ("Fortsetzen", later "Jetzt lösen") ------------------------------------- */ .card__action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--space-4); padding: 0 var(--space-5); border-radius: var(--radius-button); background: var(--accent); color: var(--on-accent); font-weight: 700; } /* --- Tile icon: game icon.svg painted in currentColor via mask -------------------------- */ .tile-icon { color: var(--ink); } .tile-icon__glyph { display: block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; } .game-list__best .stat-band__value { font-size: 20px; } /* --- Hover (mouse/pen only; touch gets no sticky hover) ------------------------------- */ @media (hover: hover) { .game-list__row:hover .game-list__name, .game-header__back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .btn--outline:hover, .segmented__item:not([aria-current='true']):hover, .toolbar__btn:not(.is-active):hover, .icon-button:hover, .menu-list__item:hover { background: var(--nav-bg); } .tab-bar__item:hover { color: var(--ink); } } /* --- Inputs ----------------------------------------------------------------------------- */ .input { display: block; width: 100%; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-button); border: 1.5px solid var(--ink); background: var(--bg); color: var(--ink); font-size: 16px; /* >= 16px prevents iOS zoom on focus */ margin-bottom: var(--space-3); } .input-hint { color: var(--muted); font-size: 13px; margin-bottom: var(--space-3); } .input-error { color: var(--accent); font-size: 13px; font-weight: 700; margin-bottom: var(--space-3); } /* --- Sheets: scroll lock + tall content ------------------------------------------------- */ body.has-open-sheet { overflow: hidden; } .sheet { max-height: calc(100dvh - 48px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; } .result-dialog .sheet__message { margin: var(--space-3) 0 0; } .menu-list__item { display: block; padding: 0 var(--space-1); color: var(--ink); cursor: pointer; } .toast__action { min-height: 44px; padding: 0 var(--space-2); cursor: pointer; } /* --- Game stage & playfield helpers ------------------------------------------------------ Games may use these base classes inside their .game- container and override them there. The board follows design.md: 2 px ink frame, square cells, 1 px grid drawn by `gap` on --cell-grid. */ .game-stage { position: relative; touch-action: manipulation; } .board { display: grid; gap: 1px; background: var(--cell-grid); border: 2px solid var(--ink); width: max-content; max-width: 100%; margin: 0 auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .board .cell { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0; border-radius: 0; font-family: var(--font-serif); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } /* Scroll/zoom container for boards larger than the viewport (e.g. 16×30). Only this container scrolls, never the page horizontally. */ .board-scroll { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; } .game-status-line { text-align: center; color: var(--muted); font-size: 13px; margin: var(--space-2) 0; } /* Toolbar in the thumb zone below the board. */ .toolbar { margin-top: var(--space-4); } .toolbar__btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: 15px; } /* --- Leaderboard details ---------------------------------------------------------------- */ .leaderboard-table__name { max-width: 0; /* lets the name column shrink and ellipsize */ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard-table__row--me td { font-weight: 700; border-bottom: 2px solid var(--accent); } /* --- Phase 3: Rangliste, Name, Hinweise ------------------------------------------------- */ .page-title--compact { font-size: 32px; line-height: 1.1; } /* Equal-width segments (Zeitraum: 4 × on 320 px content width, no scrolling). */ .segmented--fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex-wrap: nowrap; } .segmented--fill .segmented__item { padding: 0 var(--space-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard-table th { text-align: left; padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--ink); font-family: var(--font-sans); font-weight: 700; } .leaderboard-table th.leaderboard-table__value { text-align: right; } .leaderboard-table__rank { font-variant-numeric: tabular-nums; } .leaderboard-table__gap td { text-align: center; color: var(--muted); letter-spacing: 0.2em; } .leaderboard-own { color: var(--accent); text-align: center; margin-bottom: var(--space-2); } .leaderboard-hint:not(:empty) { margin-bottom: var(--space-4); } /* Notice (e.g. token no longer known): outlined, accent rule on the left. */ .notice { border: 1.5px solid var(--ink); border-left: 4px solid var(--accent); border-radius: var(--radius-button); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .notice__text { margin-bottom: var(--space-3); } .notice__action { margin-bottom: 0; } .name-dialog__label { display: block; margin-bottom: var(--space-2); } .name-dialog .input[aria-invalid='true'] { border-color: var(--accent); } .sheet:focus { outline: none; } .result-dialog__note-action { margin-top: var(--space-3); margin-bottom: 0; } .rejected-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); border-top: 1px dashed var(--line-dashed); } .rejected-list__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px dashed var(--line-dashed); } .rejected-list__title { font-weight: 700; } .rejected-list__reason { color: var(--muted); font-size: 13px; } /* --- Game route (body.is-game-route, set by js/app.js) ------------------------------------ The tab bar is hidden while playing so header, board and toolbar fit on 360×640; the toolbar sticks to the bottom edge (thumb zone). Games size their board via --stage-available-height (docs/game-api.md). */ body.is-game-route .tab-bar { display: none; } body.is-game-route .app-shell { padding-bottom: env(safe-area-inset-bottom); } body.is-game-route .toast-region { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); } body.is-game-route .game-stage { padding-bottom: var(--space-2); } body.is-game-route .game-stage .toolbar { position: sticky; bottom: env(safe-area-inset-bottom); z-index: 5; background: var(--bg); padding-top: var(--space-2); padding-bottom: var(--space-2); } /* Short screens (e.g. 360×640): denser header and stat band. */ @media (max-height: 700px) { .game-header { padding-top: var(--space-2); } .game-header__title { font-size: 28px; } .game-header__heading { margin-bottom: var(--space-2); } .stat-band { margin-bottom: var(--space-3); } .stat-band__col { padding: var(--space-1) var(--space-2); gap: 0; } .stat-band__value { font-size: 20px; } } /* Mode select: mark the mode whose partie is saved. */ .mode-list__running { color: var(--accent); font-weight: 700; } /* --- Phase 5: Tagesrätsel, Verifizierung --------------------------------------------------- */ /* Tagesrätsel-Karte (design.md): inverted, label in the accent light tone, serif title, "Jetzt lösen", stylised mini preview on the right. */ .card--daily { display: flex; align-items: stretch; gap: var(--space-4); } .card--daily__body { flex: 1 1 auto; min-width: 0; } .card--daily__label { color: var(--accent-on-surface); } .card--daily__title { font-family: var(--font-serif); font-weight: 700; font-size: 24px; line-height: 1.15; margin: var(--space-2) 0 var(--space-1); } .card--daily__meta { color: var(--on-surface); opacity: 0.8; font-size: 14px; } .card--daily__preview { flex: none; align-self: center; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--on-surface); /* grid motif: 1 px lines every 22 px (4 × 4 cells) */ background-image: linear-gradient(to right, color-mix(in srgb, var(--on-surface) 28%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--on-surface) 28%, transparent) 1px, transparent 1px); background-size: 21px 21px; background-position: -1px -1px; } .card--daily__glyph { display: block; width: 44px; height: 44px; background-color: var(--accent-on-surface); -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; } @media (max-width: 340px) { .card--daily__preview { width: 64px; height: 64px; background-size: 16px 16px; } .card--daily__glyph { width: 32px; height: 32px; } } /* Compact "Weiterspielen" rows below the daily card (overview). */ .continue-list { margin: calc(-1 * var(--space-2)) 0 var(--space-6); } .continue-list__title { margin-bottom: var(--space-1); } .continue-list__row { display: flex; align-items: baseline; gap: var(--space-2); min-height: 44px; padding: var(--space-2) 0; border-bottom: 1px dashed var(--line-dashed); } .continue-list__name { font-family: var(--font-serif); font-weight: 600; font-size: 17px; } .continue-list__mode { color: var(--muted); font-size: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .continue-list__action { color: var(--accent); font-weight: 700; font-size: 14px; white-space: nowrap; } /* Mode select: the daily entry sits on top, marked with an accent rule. */ .mode-list .mode-list__daily { border-left: 3px solid var(--accent); padding-left: var(--space-3); } .mode-list__daily-label { display: block; color: var(--accent); } /* Rangliste: fixed period for daily puzzles and the verified filter. */ .leaderboard-period-fixed { min-height: 44px; display: flex; align-items: center; margin-bottom: var(--space-2); } .leaderboard-filter { margin-bottom: var(--space-4); } .leaderboard-result .btn { margin-top: var(--space-3); } /* Result dialog: daily kicker and verification line. */ .result-dialog__kicker { color: var(--accent); margin-bottom: var(--space-1); } .result-dialog__verification { margin: var(--space-3) 0 0; font-size: 13px; font-weight: 700; color: var(--muted); } .result-dialog__verification.is-verified { color: var(--ink); } .result-dialog__verification.is-verified::before { content: '✓ '; color: var(--accent); } /* Game stage while a restart waits for its run token. */ .game-stage.is-preparing { opacity: 0.5; } .game-stage__preparing { color: var(--muted); text-align: center; padding: var(--space-6) 0; } /* --- Wider screens: keep the tab bar content centred ------------------------------------ */ @media (min-width: 600px) { .tab-bar { padding-left: calc(50% - 240px); padding-right: calc(50% - 240px); } } /* --- Reduced motion ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }