/* Phone-first, portrait, dark. * * Everything here is a mapping of Iashchak design system tokens onto this one * screen — no raw colour, type, spacing, radius, shadow or duration is invented * below, only composed. The tokens arrive from vendor/ds/theme.css, which * index.html loads first. * * Three deliberate departures from the system, all because this is a game * surface rather than an app surface: * * 1. The theme is PINNED dark on instead of following * the reader. Two minutes of full-screen flashing on a white ground is a * worse product, and the split overlay is a dark console in the system's own * vocabulary. * 2. Zazor, the stencil, sets the brand and the two Czech words and nothing * else. The system is explicit that numerals are Golos and "never the * stencil", and it is right: at readout size Zazor's bridges fragment and * a score of 1840 reads as 1$40. Every number here is --font-mono. * 3. Both brand hues are on screen at once, against the "one accent per screen" * rule. Here the two sides ARE the content: left is the primary indigo (hue * 267, from "iash") and right the leaf secondary (hue 103, from "chak") — * the system's own two-hue DNA used semantically, not decoratively. Colour * is never the only channel: each half also carries its Czech word and its * position. */ :root { --side-left: var(--accent); --side-right: var(--secondary); /* The component tints (alpha .16) are calibrated for a card inside a page. A half of the screen needs more presence than that to read as a zone, so the washes below are the same hues at a game-surface alpha. */ --wash-left: rgba(138, 103, 227, 0.16); --wash-right: rgba(119, 184, 74, 0.14); --wash-hit: rgba(63, 196, 127, 0.30); --wash-miss: rgba(240, 101, 106, 0.30); --pad: var(--space-8); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-text-size-adjust: 100%; overscroll-behavior: none; /* Kills double-tap-to-zoom. iOS Safari has ignored `maximum-scale` since iOS 10, and a double tap is far too easy to produce by accident in a game whose whole input is fast tapping — the second tap of an eager answer zoomed the board. `manipulation` keeps scroll and pinch, drops the double-tap gesture. */ touch-action: manipulation; } body { /* The interrupt overlay is positioned against this box, so it must be the visual viewport and nothing taller. */ position: fixed; inset: 0; display: flex; flex-direction: column; } button { font: inherit; color: inherit; border: 0; background: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; cursor: pointer; } /* Non-negotiable in the system: focus is always visible. */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); } .screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-6); padding: calc(var(--pad) + env(safe-area-inset-top)) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom)); } .screen[hidden] { display: none; } /* The game screen must never scroll; the two screens around it may need to. */ .screen-scroll { overflow-y: auto; overscroll-behavior: contain; } /* UPPERCASE is reserved by the system for mono overlines. This is that. */ .overline { margin: 0; font-family: var(--font-mono); font-size: var(--fs-overline); line-height: var(--lh-overline); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); } /* ---------- buttons ---------- */ .btn { min-height: var(--control-lg); padding: var(--space-6) var(--space-10); border-radius: var(--radius-md); font-weight: var(--fw-bold); font-size: var(--fs-body-lg); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); } .btn-primary { background: var(--accent-solid); color: var(--accent-solid-fg); box-shadow: var(--shadow-accent); } .btn-primary:active { background: var(--accent-solid-pressed); /* The system's press is a small firm nudge down, never a bounce. */ transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--text-secondary); box-shadow: none; } .btn-ghost:active { background: var(--surface-card); transform: translateY(1px); } /* ---------- start screen ---------- */ #screen-start { gap: var(--space-10); } .brand { display: flex; align-items: baseline; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(28px, 9vw, 48px); letter-spacing: var(--tracking-wide); } .brand-l { color: var(--side-left); } .brand-r { color: var(--side-right); } .brand-slash { color: var(--text-tertiary); } .tagline { margin: calc(var(--space-6) * -1) 0 0; text-align: center; color: var(--text-secondary); font-size: var(--fs-body); } /* Mode picker. The card owns the radius and clips; nothing inside re-rounds. */ .modes { display: flex; flex-direction: column; gap: var(--space-4); } .mode { display: block; text-align: left; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .mode b { display: block; font-size: var(--fs-title); font-weight: var(--fw-bold); } .mode span { display: block; margin-top: var(--space-2); color: var(--text-tertiary); font-size: var(--fs-caption); } .mode[aria-checked="true"] { background: var(--accent-tint); border-color: var(--accent); } .mode[aria-checked="true"] b { color: var(--accent-hover); } .how { margin: 0; padding-left: var(--space-12); color: var(--text-secondary); font-size: var(--fs-body); } .how li + li { margin-top: var(--space-5); } .how b { color: var(--text-primary); font-weight: var(--fw-bold); } .how .w-l { color: var(--side-left); } .how .w-r { color: var(--side-right); } .hint { margin: 0; color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); } #voice-hint { min-height: 2.6em; } .hint.warn { color: var(--warning-fg); } /* ---------- leaderboard ---------- */ .board { display: flex; flex-direction: column; gap: var(--space-4); } .board-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-lg); /* Outer edge only: the card owns the radius, the rows inside stay square. */ overflow: hidden; background: var(--surface-card); } .board-list:empty { display: none; } .board-list li { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: baseline; gap: var(--space-6); padding: var(--space-6) var(--space-8); } .board-list li + li { border-top: 1px solid var(--border-subtle); } .board-list li.fresh { background: var(--accent-tint); } .board-place { color: var(--text-tertiary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .board-score { font-family: var(--font-mono); font-weight: var(--fw-extrabold); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; } .board-meta { color: var(--text-tertiary); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; text-align: right; } .board-empty { margin: 0; color: var(--text-tertiary); font-size: var(--fs-caption); } .board-empty[hidden] { display: none; } .wordmark { margin: var(--space-6) 0 0; text-align: center; font-family: var(--font-mono); font-weight: var(--fw-extrabold); font-size: var(--fs-caption); color: var(--text-tertiary); } .wordmark-dot { color: var(--accent); } /* ---------- game screen ---------- */ .hud { display: flex; gap: var(--space-4); } .stat { flex: 1; min-width: 0; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); text-align: center; } .stat b { display: block; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: 1.15; font-variant-numeric: tabular-nums; } .stat .overline { display: block; margin-top: var(--space-1); } .timerbar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-subtle); overflow: hidden; } .timerbar i { display: block; height: 100%; width: 100%; transform-origin: left center; background: linear-gradient(90deg, var(--side-left), var(--side-right)); } .timerbar i.low { background: var(--danger); } .problem-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } .problem { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: clamp(40px, 14vw, 76px); letter-spacing: var(--tracking-wide); font-variant-numeric: tabular-nums; text-align: center; } .problem.correct { color: var(--success); } .problem.wrong { color: var(--danger); } .choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .choice { min-height: 84px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-strong); font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-h1); font-variant-numeric: tabular-nums; transition: background var(--dur-instant) var(--ease-standard); } .choice:active { background: var(--surface-raised); } .choice.correct { background: var(--success-tint); border-color: var(--success); color: var(--success); } .choice.wrong { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); } .mini { text-align: center; color: var(--text-tertiary); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; } /* ---------- result screen ---------- */ #screen-result { justify-content: center; } #screen-result .overline { text-align: center; } .res-reason { margin: 0; text-align: center; color: var(--text-secondary); } .score-big { text-align: center; } .score-big b { display: block; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: clamp(56px, 19vw, 96px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent-hover); } .score-big .overline { display: block; margin-top: var(--space-3); } .rank { margin: 0 auto; padding: var(--space-3) var(--space-8); border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-hover); font-weight: var(--fw-bold); font-size: var(--fs-caption); } .rank[hidden] { display: none; } .results { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .results > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); } .results > div[hidden] { display: none; } .results dt { color: var(--text-tertiary); font-size: var(--fs-caption); } .results dd { margin: 0; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-title); font-variant-numeric: tabular-nums; } /* ---------- the left/right interrupt ---------- */ .split { position: fixed; inset: 0; z-index: 10; display: flex; background: var(--surface-ink); /* No gesture at all on the overlay: this is the one surface where a stray pinch or double tap costs the player a scored reaction. */ touch-action: none; } .split[hidden] { display: none; } .half { /* min-width:0 is load-bearing: without it a long unwrapped word sets the half's min-content width and the two stop being halves. */ flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; touch-action: none; transition: background var(--dur-instant) var(--ease-standard); } /* The two brand hues identify the sides only while the answer is still open. Once it is resolved the halves drop back to ink and the only colour left is the verdict — otherwise leaf green (the right side) and mint green (correct) are on screen together and neither means anything. */ .half-left { border-right-width: 1px; } .half-right { border-left-width: 1px; } .split:not(.resolved) .half-left { background: var(--wash-left); } .split:not(.resolved) .half-right { background: var(--wash-right); } .split.resolved .half { background: var(--surface-ink); } .half .mark { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); color: var(--text-on-ink-dim); opacity: 0.45; } /* Before the answer the mark is a lone "?" and wants the whole half; after it, BOTH halves carry a Czech word, so the size is keyed off the overlay and not off which half was hit — otherwise the losing side keeps the huge type. */ .split:not(.resolved) .mark { font-size: clamp(56px, 20vw, 112px); } .split.resolved .mark { font-size: clamp(22px, 7.5vw, 40px); } .split.resolved .half.hit { background: var(--wash-hit); border-color: var(--success); } .split.resolved .half.miss { background: var(--wash-miss); border-color: var(--danger); } /* Both words are readable once they are the lesson rather than the question. */ .split.resolved .mark { opacity: 1; } .half.hit .mark { color: var(--success); } .half.miss .mark { color: var(--danger); } .cue-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(40px, 14vw, 88px); letter-spacing: var(--tracking-wide); pointer-events: none; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8); } .cue-word[hidden] { display: none; } .cue-result { position: absolute; left: 0; right: 0; bottom: calc(12vh + env(safe-area-inset-bottom)); text-align: center; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; pointer-events: none; } .cue-result[hidden] { display: none; } .cue-result.ok { color: var(--success); } .cue-result.bad { color: var(--danger); } @media (min-width: 640px) { body { max-width: var(--container-sm); margin: 0 auto; border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); } .split { max-width: var(--container-sm); left: 50%; transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }