/* =========================================================== Game Mode — quiz/game/terminal renderer Two visual variants on the same engine, controlled by . =========================================================== */ .game-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; } .game-screen { display: block; } .game-screen--hidden { display: none; } /* ----------- Start screen ----------- */ .game-hero { margin-bottom: 32px; } .game-hero .eyebrow { margin: 0 0 8px; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-text); font-weight: 600; } .game-hero h1 { margin: 0 0 12px; font-family: 'Fraunces', Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; color: var(--text); } .game-hero .lead { margin: 0; color: var(--text-muted); max-width: 70ch; } .game-config { display: grid; gap: 24px; } .game-fieldset { border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px 20px; background: var(--bg-card); margin: 0; } .game-fieldset legend { padding: 0 8px; font-weight: 600; font-size: 0.95rem; color: var(--text); } .game-mode-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .mode-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-muted); cursor: pointer; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; } .mode-card:hover { border-color: var(--primary); background: var(--bg-accent); } .mode-card:has(input:checked) { border-color: var(--primary); background: var(--bg-accent); box-shadow: 0 0 0 3px var(--primary-soft); } .mode-card input { position: absolute; opacity: 0; pointer-events: none; } .mode-card__title { font-weight: 700; color: var(--text); } .mode-card__desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.4; } .game-pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .pill { position: relative; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface-muted); cursor: pointer; font-size: 0.9rem; color: var(--text); transition: border-color 120ms ease, background 120ms ease; } .pill input { position: absolute; opacity: 0; pointer-events: none; } .pill:has(input:checked) { border-color: var(--primary); background: var(--bg-accent); color: var(--primary-text); font-weight: 600; } .pill:hover { border-color: var(--primary); } /* Level pills use difficulty-tier colors so the selected state mirrors the * page-meta pill on study pages — visual continuity reinforces what each * level means. */ .pill--level-foundational:has(input:checked) { border-color: rgba(47, 125, 74, 0.55); background: rgba(47, 125, 74, 0.12); color: #2f7d4a; } .pill--level-mid:has(input:checked) { border-color: rgba(180, 106, 0, 0.55); background: rgba(180, 106, 0, 0.12); color: #b46a00; } .pill--level-senior:has(input:checked) { border-color: rgba(176, 58, 58, 0.55); background: rgba(176, 58, 58, 0.12); color: #b03a3a; } [data-theme="dark"] .pill--level-foundational:has(input:checked) { color: #6ed18e; background: rgba(110, 209, 142, 0.16); border-color: rgba(110, 209, 142, 0.5); } [data-theme="dark"] .pill--level-mid:has(input:checked) { color: #f0b35a; background: rgba(240, 179, 90, 0.16); border-color: rgba(240, 179, 90, 0.5); } [data-theme="dark"] .pill--level-senior:has(input:checked) { color: #ef7a7a; background: rgba(239, 122, 122, 0.16); border-color: rgba(239, 122, 122, 0.5); } .game-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .game-actions--center { justify-content: center; margin-top: 24px; } .game-meta { color: var(--text-muted); font-size: 0.9rem; } .btn-primary { appearance: none; border: none; padding: 12px 28px; border-radius: 999px; background: var(--primary); color: var(--primary-on); font-weight: 700; cursor: pointer; font-size: 1rem; transition: background 120ms ease, transform 120ms ease; } .btn-primary:hover { background: var(--primary-hover); } .btn-primary:active { background: var(--primary-active); transform: scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ghost { appearance: none; border: 1.5px solid var(--border); padding: 10px 22px; border-radius: 999px; background: transparent; color: var(--text); font-weight: 600; cursor: pointer; font-size: 0.95rem; text-decoration: none; display: inline-block; transition: border-color 120ms ease, background 120ms ease; } .btn-ghost:hover { border-color: var(--primary); background: var(--bg-accent); } /* ----------- Play screen ----------- */ .game-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); } .game-progress { font-weight: 700; color: var(--text); } .game-mode-tag, .game-score-tag { padding: 4px 12px; border-radius: 999px; background: var(--bg-accent); color: var(--primary-text); font-size: 0.85rem; font-weight: 600; } .game-toolbar .btn-ghost { margin-left: auto; padding: 6px 16px; font-size: 0.85rem; } .game-question { border: 1px solid var(--border); border-radius: 16px; padding: 28px; background: var(--bg-card); } .game-prompt { margin: 0 0 24px; font-size: 1.25rem; line-height: 1.5; font-weight: 600; color: var(--text); } /* mode-specific input UI */ .choice-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; } .choice-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-muted); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .choice-item:hover { border-color: var(--primary); background: var(--bg-accent); } .choice-item:has(input:checked) { border-color: var(--primary); background: var(--bg-accent); } .choice-item.correct { border-color: var(--success, #22c55e); background: rgba(34, 197, 94, 0.12); } .choice-item.wrong { border-color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.12); } .choice-item input { margin-top: 4px; flex-shrink: 0; } .choice-text { flex: 1; word-break: break-word; white-space: pre-wrap; } .text-input, .code-input { width: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-input, var(--bg-card)); color: var(--text); font-size: 1rem; font-family: inherit; margin-bottom: 24px; resize: vertical; } .code-input { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 220px; white-space: pre; overflow-wrap: normal; overflow-x: auto; font-size: 0.92rem; line-height: 1.55; } .text-input:focus, .code-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .game-feedback { margin: 16px 0 24px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--border); } .game-feedback.correct { border-color: var(--success, #22c55e); background: rgba(34, 197, 94, 0.08); } .game-feedback.wrong { border-color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.08); } .game-feedback h3 { margin: 0 0 8px; font-size: 1.05rem; } .game-feedback p { margin: 0 0 6px; color: var(--text-muted); white-space: pre-wrap; } .game-feedback .feedback-detail { font-size: 0.95rem; color: var(--text); } /* Flag button on cards-mode feedback */ .game-flag-btn { margin-top: 10px; appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; cursor: pointer; font-family: inherit; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .game-flag-btn:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); } .game-flag-btn[data-flagged="1"] { background: rgba(239, 68, 68, 0.08); border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); } /* Flag button on terminal-mode feedback */ .term-flag-btn { align-self: flex-start; margin-top: 6px; background: transparent; border: 1px dashed #1f3b2c; color: #79c79f; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85rem; padding: 4px 12px; border-radius: 4px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .term-flag-btn:hover { border-color: #ff5f56; color: #ff8585; } .term-flag-btn[data-flagged="1"] { border-color: #4ade80; color: #4ade80; background: rgba(74, 222, 128, 0.06); } body[data-renderer="cards"] .term-flag-btn { display: none; } /* End-screen flag summary */ .flag-summary { margin-top: 24px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-muted, var(--bg-card)); text-align: left; } .flag-summary p { margin: 0 0 8px; color: var(--text-muted); } .flag-summary p strong { color: var(--text); } .flag-summary__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .flag-summary__actions .btn-ghost { padding: 6px 14px; font-size: 0.85rem; } .flag-summary__hint { font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; } .flag-summary__hint code { background: var(--surface-muted); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; } .game-question-actions { display: flex; justify-content: flex-end; gap: 12px; } /* ----------- End screen ----------- */ .game-end { text-align: center; padding: 48px 16px 16px; } .game-end .eyebrow { margin: 0 0 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-text); font-weight: 600; } .game-end h2 { margin: 0 0 24px; font-family: 'Fraunces', Georgia, serif; font-size: 2rem; color: var(--text); } .game-score-big { font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; color: var(--primary); line-height: 1; } .game-score-pct { font-size: 1.5rem; color: var(--text-muted); margin: 8px 0 32px; } .game-end-breakdown { max-width: 560px; margin: 0 auto 24px; text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; background: var(--bg-card); } .game-end-breakdown ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .game-end-breakdown li { display: flex; justify-content: space-between; color: var(--text-muted); } .game-end-breakdown li strong { color: var(--text); } /* ========================================================================= TERMINAL RENDERER (body[data-renderer="terminal"]) Same DOM, different visual skin: monospace, prompt prefix, blinking caret. ========================================================================= */ body[data-renderer="terminal"] { background: #050b10; } body[data-renderer="terminal"] .game-page { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color: #d2f5d2; } body[data-renderer="terminal"] .game-hero h1, body[data-renderer="terminal"] .game-hero .lead, body[data-renderer="terminal"] .game-hero .eyebrow, body[data-renderer="terminal"] .game-fieldset legend, body[data-renderer="terminal"] .game-meta, body[data-renderer="terminal"] .game-progress, body[data-renderer="terminal"] .game-end h2 { color: #93f593; font-family: 'JetBrains Mono', ui-monospace, monospace; } body[data-renderer="terminal"] .game-fieldset, body[data-renderer="terminal"] .game-toolbar, body[data-renderer="terminal"] .game-question, body[data-renderer="terminal"] .game-end-breakdown { background: #0a141a; border-color: #1f3b2c; border-style: solid; } body[data-renderer="terminal"] .mode-card, body[data-renderer="terminal"] .pill, body[data-renderer="terminal"] .choice-item { background: #0a141a; border-color: #1f3b2c; color: #d2f5d2; } body[data-renderer="terminal"] .mode-card:has(input:checked), body[data-renderer="terminal"] .pill:has(input:checked), body[data-renderer="terminal"] .choice-item:has(input:checked) { border-color: #4ade80; background: rgba(74, 222, 128, 0.08); color: #d2f5d2; } body[data-renderer="terminal"] .mode-card__title, body[data-renderer="terminal"] .game-prompt { color: #93f593; } body[data-renderer="terminal"] .mode-card__desc, body[data-renderer="terminal"] .game-feedback p { color: #79c79f; } body[data-renderer="terminal"] .text-input, body[data-renderer="terminal"] .code-input { background: #050b10; border-color: #1f3b2c; color: #d2f5d2; font-family: 'JetBrains Mono', ui-monospace, monospace; caret-color: #4ade80; } body[data-renderer="terminal"] .text-input:focus, body[data-renderer="terminal"] .code-input:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15); } body[data-renderer="terminal"] .btn-primary { background: #4ade80; color: #050b10; } body[data-renderer="terminal"] .btn-primary:hover { background: #6ee7a3; } body[data-renderer="terminal"] .btn-ghost { border-color: #1f3b2c; color: #93f593; } body[data-renderer="terminal"] .btn-ghost:hover { border-color: #4ade80; background: rgba(74, 222, 128, 0.08); } body[data-renderer="terminal"] .game-mode-tag, body[data-renderer="terminal"] .game-score-tag { background: rgba(74, 222, 128, 0.1); color: #93f593; } body[data-renderer="terminal"] .game-prompt::before { content: "$ "; color: #4ade80; } body[data-renderer="terminal"] .choice-text::before { content: "[" attr(data-index) "] "; color: #4ade80; font-weight: 700; } body[data-renderer="terminal"] .game-score-big { color: #4ade80; } body[data-renderer="terminal"] .game-feedback.correct h3::before { content: "✓ "; color: #4ade80; } body[data-renderer="terminal"] .game-feedback.wrong h3::before { content: "✗ "; color: #ef4444; } /* ----------- Track-tree (hierarchical multi-select) ----------- */ .legend-hint { font-weight: 400; font-size: 0.85rem; color: var(--text-muted); } .track-filter-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.9rem; } .link-btn { appearance: none; border: none; background: transparent; color: var(--primary-text); font-weight: 600; cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 120ms ease; } .link-btn:hover, .link-btn:focus-visible { text-decoration-color: currentColor; outline: none; } .dot-sep { color: var(--text-muted); opacity: 0.5; } .filter-summary { color: var(--text-muted); margin-left: auto; } .track-tree { display: grid; gap: 12px; } .track-tree__loading { color: var(--text-muted); margin: 0; } .track-row { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); overflow: hidden; } .track-row__header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--bg-card); border-bottom: 1px solid var(--border); } .track-row__toggle { appearance: none; border: none; background: transparent; color: var(--text); font-size: 1rem; cursor: pointer; padding: 2px 6px; font-family: inherit; width: 24px; text-align: center; } .track-row__check { margin: 0; flex-shrink: 0; } .track-row__title { font-weight: 700; color: var(--text); flex: 1; } .track-row__count { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .track-row__modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; padding: 12px 16px; } .track-row[data-collapsed="true"] .track-row__modules { display: none; } .module-block { display: flex; flex-direction: column; } .module-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 0.92rem; color: var(--text); } .module-row:hover { background: var(--bg-accent); } .module-row__check { margin: 0; flex-shrink: 0; } .module-row__title { flex: 1; } .module-row__count { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .module-row__toggle { appearance: none; border: none; background: transparent; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; padding: 0 2px; font-family: inherit; width: 18px; text-align: center; flex-shrink: 0; line-height: 1; } .module-row__toggle:hover { color: var(--text); } .module-row__toggle--placeholder { display: inline-block; width: 18px; flex-shrink: 0; } /* Sub-topic level (third tier) */ .topic-list { display: grid; gap: 2px; padding: 4px 0 4px 28px; margin: 0 0 6px; border-left: 1px dashed var(--border); margin-left: 11px; } .module-block[data-topics-collapsed="true"] .topic-list { display: none; } .topic-row { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 4px; cursor: pointer; font-size: 0.84rem; color: var(--text-muted); } .topic-row:hover { background: var(--bg-accent); color: var(--text); } .topic-row__check { margin: 0; flex-shrink: 0; transform: scale(0.9); } .topic-row__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topic-row__count { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ----------- Terminal-chrome (fake mac window header) ----------- */ .terminal-chrome { display: none; } body[data-renderer="terminal"] .terminal-chrome { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #0d1820; border: 1px solid #1f3b2c; border-bottom: none; border-radius: 12px 12px 0 0; margin-bottom: -1px; } .terminal-chrome__lights { display: flex; gap: 6px; } .terminal-chrome__lights .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .dot-red { background: #ff5f56; } .dot-yellow { background: #ffbd2e; } .dot-green { background: #27c93f; } .terminal-chrome__title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85rem; color: #79c79f; flex: 1; text-align: center; letter-spacing: 0.02em; } .terminal-chrome__spacer { width: 60px; } body[data-renderer="terminal"] .game-toolbar { border-radius: 0; border-top: none; } body[data-renderer="terminal"] .game-question { border-radius: 0 0 12px 12px; } /* ----------- Filter tag in toolbar ----------- */ .game-filter-tag { padding: 4px 10px; border-radius: 999px; background: var(--bg-accent-2, var(--surface-muted)); color: var(--text-muted); font-size: 0.8rem; font-weight: 500; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-renderer="terminal"] .game-filter-tag { background: rgba(74, 222, 128, 0.06); color: #79c79f; } .game-filter-tag:empty { display: none; } /* ----------- Icon-only ghost button (fullscreen toggle) ----------- */ .btn-icon { padding: 6px 10px; font-size: 1.05rem; line-height: 1; } .icon-fs-exit { display: none; } body.game-fullscreen .icon-fs-enter { display: none; } body.game-fullscreen .icon-fs-exit { display: inline; } /* ----------- Terminal-flavored CTAs ----------- */ .btn-terminal { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; } body[data-renderer="terminal"] .btn-primary, body[data-renderer="terminal"] .btn-ghost { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ========================================================================= FULLSCREEN MODE body.game-fullscreen takes over the viewport, hides the global nav and any other chrome, and lets the play surface breathe. Combined with renderer "terminal" it actually feels like a terminal app. ========================================================================= */ body.game-fullscreen .global-nav, body.game-fullscreen header.global-nav, body.game-fullscreen [data-global-nav-root] { display: none !important; } body.game-fullscreen .game-page { max-width: none; margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; } body.game-fullscreen .game-screen { flex: 1; padding: 24px clamp(16px, 5vw, 60px); } body.game-fullscreen[data-renderer="terminal"] { background: #050b10; } body.game-fullscreen[data-renderer="terminal"] .game-page::before { /* subtle CRT scanline vibe; respects reduced motion */ content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 180deg, rgba(74, 222, 128, 0.025) 0, rgba(74, 222, 128, 0.025) 1px, transparent 1px, transparent 3px ); z-index: 1; } @media (prefers-reduced-motion: reduce) { body.game-fullscreen[data-renderer="terminal"] .game-page::before { display: none; } } body.game-fullscreen .terminal-chrome { border-radius: 0; } body.game-fullscreen .game-question { border-radius: 0; } /* ========================================================================= TERMINAL-GAME DOM (used only when body[data-renderer="terminal"]) The terminal renderer replaces the static .choice-list with an animated transcript: AI types out the question, choices appear as numbered items, user "types" their pick at a shell prompt. Number keys 1-9 select choices. ========================================================================= */ .term-transcript { display: none; } body[data-renderer="terminal"] .term-transcript { display: flex; flex-direction: column; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; line-height: 1.55; color: #d2f5d2; white-space: pre-wrap; word-break: break-word; min-height: 320px; } body[data-renderer="terminal"] .choice-list, body[data-renderer="terminal"] .game-prompt, body[data-renderer="terminal"] #game-text-answer, body[data-renderer="terminal"] #game-code-answer, body[data-renderer="terminal"] .game-question-actions { display: none !important; } /* Restore for non-radio/non-multi: text and code modes still need their inputs. We re-show them via a class on the transcript. */ body[data-renderer="terminal"] .term-transcript[data-mode="text"] ~ #game-text-answer, body[data-renderer="terminal"] .term-transcript[data-mode="text"] ~ .game-question-actions, body[data-renderer="terminal"] .term-transcript[data-mode="code"] ~ #game-code-answer, body[data-renderer="terminal"] .term-transcript[data-mode="code"] ~ .game-question-actions { display: revert !important; } body[data-renderer="terminal"] .term-transcript[data-mode="text"] ~ .game-question-actions, body[data-renderer="terminal"] .term-transcript[data-mode="code"] ~ .game-question-actions { display: flex !important; } .term-line { margin: 0; display: block; white-space: pre-wrap; } .term-line--sys { color: #6e8090; } .term-line--sys::before { content: "# "; color: #4a5d6c; } .term-line--ai { color: #93f593; } .term-line--ai::before { content: "ai@quiz ~ $ "; color: #4ade80; opacity: 0.8; margin-right: 2px; } .term-line--ai-cont { color: #d2f5d2; padding-left: 1.5em; } /* continuation, no prompt */ .term-line--question { color: #c4f5c4; font-weight: 600; padding-left: 1.5em; } .term-line--user { color: #d2f5d2; } .term-line--user::before { content: "you@quiz ~ $ "; color: #4ade80; margin-right: 2px; } .term-line--ok { color: #4ade80; } .term-line--ok::before { content: "[ OK ] "; color: #4ade80; } .term-line--fail { color: #ff8585; } .term-line--fail::before { content: "[FAIL] "; color: #ff5f56; } .term-line--hint { color: #6e8090; font-style: italic; padding-left: 1.5em; } .term-choice { display: block; padding: 2px 6px 2px 1.5em; border-radius: 4px; cursor: pointer; color: #d2f5d2; transition: background 80ms ease, color 80ms ease; } .term-choice:hover, .term-choice.is-focused { background: rgba(74, 222, 128, 0.08); color: #c4f5c4; } .term-choice .term-choice__num { color: #4ade80; font-weight: 700; margin-right: 8px; } .term-choice.is-selected .term-choice__num::after { content: " ▸"; color: #4ade80; margin-left: -4px; } .term-choice.is-correct { color: #4ade80; } .term-choice.is-correct .term-choice__num { color: #4ade80; } .term-choice.is-correct::after { content: " ← correct"; color: #4ade80; font-weight: 600; opacity: 0.85; } .term-choice.is-wrong { color: #ff8585; } .term-choice.is-wrong .term-choice__num { color: #ff5f56; } .term-choice.is-wrong::after { content: " ← your pick"; color: #ff5f56; font-weight: 600; opacity: 0.85; } /* Blinking caret used during AI typing and at the user prompt */ .term-caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; background: #4ade80; vertical-align: -0.18em; animation: term-blink 1s steps(2, end) infinite; } @keyframes term-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .term-caret { animation: none; } } .term-prompt-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .term-prompt-row::before { content: "you@quiz ~ $"; color: #4ade80; white-space: nowrap; } .term-prompt-input { flex: 1; background: transparent; border: none; outline: none; color: #d2f5d2; font-family: inherit; font-size: inherit; padding: 0; caret-color: #4ade80; } .term-prompt-input::placeholder { color: #4a5d6c; font-style: italic; } /* Multi-mode: show selected count + selection list */ .term-multi-tray { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 1.5em; color: #79c79f; font-size: 0.88rem; } .term-multi-tray .label { color: #6e8090; } /* Boot intro on first terminal launch in a session */ .term-boot { color: #93f593; font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: pre; margin: 0 0 12px; } .term-boot .ok { color: #4ade80; } /* Mobile tweaks */ @media (max-width: 600px) { .game-question { padding: 18px; } .mode-card { padding: 12px 14px; } .track-row__modules { grid-template-columns: 1fr; } .topic-list { padding-left: 22px; margin-left: 9px; } .terminal-chrome__title { font-size: 0.75rem; } .game-filter-tag { display: none; } body[data-renderer="terminal"] .term-transcript { font-size: 0.88rem; } }