:root { /* Chalk-on-blackboard palette — deep chalkboard green-black base, warm chalk-white text, pastel chalk accents. */ --bg: #1a2420; --bg-raised: #223028; --bg-inset: #101815; --border: #3d5245; --border-soft: #2c3b32; --text: #eae6da; --text-dim: #b7c2b8; --text-faint: #6f8177; --accent: #a9d6e5; --accent-dim: #2f4a52; --good: #b8e3a0; --bad: #f0a3a3; --star: #f5e2a0; --scope-bar: #d8dcd0; /* Uneven chalk-stroke shadow — a soft glow layer plus two small hard-offset layers, instead of a single clean glow. Paint-only (doesn't affect box metrics), so it's safe on the mono Fitch grid too, not just --hand text. */ --chalk-shadow: 0 0 1px rgba(234,230,218,0.4), 0.4px 0.3px 0px rgba(234,230,218,0.15), -0.3px 0.4px 0.5px rgba(234,230,218,0.12); /* Real monospace only — the Fitch grid's column alignment depends on true monospacing (see .formula's white-space: pre), so a handwriting font never goes here even in a chalk theme. */ --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Chalk-handwriting font for UI chrome only (title, headings, nav, buttons) — never the proof text itself. Loaded via a Google Fonts in each HTML file's ; falls back to --sans if that link is unavailable. */ --hand: "Kalam", var(--sans); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; } body { display: flex; flex-direction: column; /* Chalk-dust smudges and flecks — CSS-only, no image assets. */ background: radial-gradient(ellipse at 20% 15%, rgba(234,230,218,0.05), transparent 50%), radial-gradient(ellipse at 80% 75%, rgba(234,230,218,0.04), transparent 55%), radial-gradient(circle at 60% 10%, rgba(234,230,218,0.025), transparent 8%), radial-gradient(circle at 12% 60%, rgba(234,230,218,0.025), transparent 6%), radial-gradient(circle at 90% 40%, rgba(234,230,218,0.02), transparent 7%), var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } /* Chalk-handwriting treatment for UI chrome — headings, nav, buttons, labels. Font-family stays off the Fitch grid for column alignment (see --mono's comment above), but the chalk-stroke shadow itself is paint-only and is applied to the proof text too, further down. */ h1, h2, h3 { font-family: var(--hand); text-shadow: var(--chalk-shadow); } /* ---------- Header / nav ---------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg-raised); position: sticky; top: 0; z-index: 20; } .site-title { font-family: var(--hand); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--accent); text-shadow: var(--chalk-shadow); } .site-nav { display: flex; gap: 0.5rem; } .site-nav a { font-family: var(--hand); color: var(--text-dim); padding: 0.4rem 0.7rem; border-radius: 0.4rem; font-size: 1.05rem; text-shadow: var(--chalk-shadow); } .site-nav a:hover, .site-nav a.active { background: var(--bg-inset); color: var(--text); text-decoration: none; } main { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 1rem 1rem 6rem; } /* ---------- Puzzle header ---------- */ .puzzle-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; } .puzzle-header h1 { font-size: 1.2rem; margin: 0; } .puzzle-meta { color: var(--text-dim); font-size: 0.85rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .badge-prop { background: #24344d; color: #8fb4ff; } .badge-fol { background: #2f2447; color: #c39bff; } .badge-identity { background: #26402e; color: #7fe0a0; } .premises-box { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-family: var(--mono); font-size: 0.95rem; text-shadow: var(--chalk-shadow); } .label { font-family: var(--sans); color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: var(--chalk-shadow); } .premises-box .label { margin-bottom: 0.35rem; } .premises-box .goal { color: var(--accent); } /* ---------- Fitch proof rendering ---------- */ .fitch-proof { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem 0.5rem; font-family: var(--mono); font-size: 0.95rem; overflow-x: auto; text-shadow: var(--chalk-shadow); } .fitch-box { border-left: 3px solid var(--scope-bar); padding-left: 0.85rem; margin-left: 0.3rem; } .fitch-box.orcase { border-left-style: dashed; } /* Marks where a scope's "given" block (premises, or a subproof's opening assumption/eigen line) ends and derived lines begin — classic Fitch notation draws a short rule here; this game previously drew nothing. */ .fitch-divider { border-top: 1.5px solid var(--text-dim); width: 1.6rem; margin: 0.15rem 0 0.35rem 0.5rem; } .fitch-line { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.42rem 0.5rem; border-radius: 0.3rem; white-space: nowrap; } .fitch-line:hover { background: rgba(255,255,255,0.02); } .fitch-line .lineno { color: var(--text-faint); min-width: 1.6rem; text-align: right; user-select: none; } .fitch-line .formula { flex: 1; overflow-x: auto; white-space: pre; } .fitch-line .justification { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; } .fitch-line.assumption .formula { text-decoration: underline; text-underline-offset: 3px; } .fitch-line.eigen .formula::before { content: "…"; color: var(--text-faint); } .eigen-badge { display: inline-block; background: var(--accent-dim); color: var(--accent); font-size: 0.7rem; font-weight: 700; border-radius: 0.3rem; padding: 0.05rem 0.4rem; margin-left: 0.3rem; } .fitch-line.citable { cursor: pointer; } .fitch-line.citable:hover { background: rgba(110,168,254,0.12); } .fitch-line.citable .lineno { color: var(--accent); } .fitch-line.dim { opacity: 0.35; } .fitch-line.picked { background: rgba(110,168,254,0.2); outline: 1px solid var(--accent); } .fitch-line.conclusion-hit { background: rgba(74,222,128,0.14); outline: 1px solid var(--good); } /* ---------- Toolbar ---------- */ .toolbar-wrap { position: sticky; bottom: 0; background: var(--bg-raised); border-top: 1px solid var(--border); margin: 1rem -1rem -1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); } @media (max-height: 600px) { .toolbar-wrap { max-height: 70vh; overflow-y: auto; } } .toolbar-status { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem; gap: 0.5rem; flex-wrap: wrap; } .step-counter { color: var(--text); font-weight: 600; } .toolbar-actions { display: flex; gap: 0.4rem; } .icon-btn { background: var(--bg-inset); border: 1px solid var(--border); color: var(--text-dim); border-radius: 0.4rem; padding: 0.3rem 0.6rem; font-size: 0.8rem; } .icon-btn:hover { color: var(--text); border-color: var(--accent); } .icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } .rule-select-wrap { margin-bottom: 0.6rem; } select { appearance: none; -webkit-appearance: none; background-color: var(--bg-inset); background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 1.1rem) center, calc(100% - 0.8rem) center; background-size: 0.3rem 0.3rem, 0.3rem 0.3rem; background-repeat: no-repeat; border: 1px solid var(--border); color: var(--text); border-radius: 0.5rem; padding: 0.55rem 1.8rem 0.55rem 0.7rem; font-size: 0.9rem; font-family: inherit; width: 100%; } select:hover { border-color: var(--accent); } select:focus { outline: none; border-color: var(--accent); } select:disabled { opacity: 0.4; cursor: not-allowed; } select option { background: var(--bg-raised); color: var(--text); } .rule-select { font-weight: 600; } /* ---------- Guided-mode panel ---------- */ .guided-panel { background: var(--bg-inset); border: 1px solid var(--accent-dim); border-radius: 0.5rem; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; font-size: 0.88rem; } .guided-panel .prompt { color: var(--text); margin-bottom: 0.4rem; } .guided-panel .picked-refs { color: var(--accent); font-family: var(--mono); margin-bottom: 0.4rem; } .field-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; } input[type="text"] { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 0.35rem; padding: 0.4rem 0.5rem; font-family: var(--mono); font-size: 0.9rem; flex: 1; min-width: 8rem; } input[type="text"]:focus { outline: none; border-color: var(--accent); } .field-row select { flex: 1; width: auto; min-width: 6rem; } /* ---------- Formula builder ---------- */ .formula-slot { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .formula-slot > select { width: auto; min-width: 6rem; } .formula-slot-nested { display: flex; align-items: flex-start; gap: 0.5rem; flex-basis: 100%; border-left: 2px solid var(--scope-bar); padding-left: 0.85rem; margin-left: 0.3rem; margin-top: 0.2rem; } .formula-slot-label { color: var(--text-dim); font-size: 0.8rem; padding-top: 0.55rem; white-space: nowrap; flex-shrink: 0; } .formula-slot-nested > .formula-slot { flex: 1; min-width: 0; } .preview-line { font-family: var(--mono); background: var(--bg); border-radius: 0.35rem; padding: 0.4rem 0.6rem; margin-bottom: 0.4rem; color: var(--good); } .error-line { color: var(--bad); font-size: 0.85rem; margin-bottom: 0.4rem; } .guided-panel .actions { display: flex; gap: 0.5rem; } .btn { font-family: var(--hand); border-radius: 0.4rem; padding: 0.45rem 0.9rem; font-size: 1rem; font-weight: 600; border: 1px solid var(--border); background: var(--bg-inset); color: var(--text); text-shadow: var(--chalk-shadow); } .btn:disabled { opacity: 0.35; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #0c1220; } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost:hover { border-color: var(--accent); color: var(--accent); } .btn.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } /* ---------- Win screen ---------- */ .win-overlay { position: fixed; inset: 0; background: rgba(8,9,12,0.72); display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; overflow-y: auto; z-index: 50; } .win-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 0.8rem; padding: 1.5rem; max-width: 640px; width: 100%; } .win-card h2 { margin-top: 0; } .win-score-row { display: flex; gap: 1.5rem; margin: 1rem 0; flex-wrap: wrap; } .win-stat { text-align: center; } .win-stat .num { font-size: 1.8rem; font-weight: 700; } .win-stat .lbl { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .win-stat.star .num { color: var(--star); } .win-stat.good .num { color: var(--good); } .win-stat.over .num { color: var(--bad); } .share-block { font-family: var(--mono); background: var(--bg-inset); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem; white-space: pre-wrap; margin: 0.75rem 0; font-size: 0.9rem; } /* ---------- Archive ---------- */ .archive-list { display: flex; flex-direction: column; gap: 0.5rem; } .archive-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.6rem 0.9rem; flex-wrap: wrap; } .archive-row .title { font-weight: 600; } .archive-row .result { font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim); } .archive-row .result.solved { color: var(--good); } .archive-row .result.star { color: var(--star); } /* ---------- Stats page ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .stat-tile { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.9rem; text-align: center; } .stat-tile .num { font-size: 1.6rem; font-weight: 700; } .stat-tile .lbl { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; } .histogram { display: flex; flex-direction: column; gap: 0.35rem; } .hist-row { display: grid; grid-template-columns: 3.2rem 1fr 2.4rem; align-items: center; gap: 0.5rem; font-size: 0.82rem; } .hist-row .hist-label { color: var(--text-dim); font-family: var(--mono); text-align: right; } .hist-row .hist-track { background: var(--bg-inset); border-radius: 0.25rem; height: 0.85rem; overflow: hidden; } .hist-row .hist-bar { background: var(--accent); height: 100%; border-radius: 0.25rem; } .hist-row.is-star .hist-bar { background: var(--star); } .hist-row .hist-count { color: var(--text-dim); } .empty-state { color: var(--text-dim); text-align: center; padding: 2rem 1rem; } /* ---------- Tutorial ---------- */ .help-btn { background: var(--bg-inset); border: 1px solid var(--border); color: var(--text-dim); border-radius: 50%; width: 1.8rem; height: 1.8rem; font-size: 0.85rem; font-weight: 700; line-height: 1; flex-shrink: 0; } .help-btn:hover { border-color: var(--accent); color: var(--accent); } .tutorial-card h3 { margin-bottom: 0.4rem; font-size: 0.95rem; } .tutorial-card ol { margin: 0 0 1rem; padding-left: 1.2rem; } .tutorial-card ol li { margin-bottom: 0.3rem; } .tutorial-card p { color: var(--text-dim); line-height: 1.5; } .legend-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin-bottom: 0.5rem; } .legend-row { display: contents; } .legend-row code { font-family: var(--mono); background: var(--bg-inset); border-radius: 0.3rem; padding: 0.1rem 0.4rem; color: var(--accent); white-space: nowrap; } .legend-row span { color: var(--text-dim); font-size: 0.88rem; align-self: center; } /* ---------- Rule tutorial (lesson picker + lesson play) ---------- */ .lesson-blurb { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.75rem; } .lesson-back-link { display: inline-block; margin-bottom: 0.75rem; } .lesson-complete-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .archive-row-blurb { color: var(--text-dim); font-size: 0.85rem; line-height: 1.4; max-width: 22rem; text-align: right; } @media (max-width: 560px) { main { padding: 0.6rem 0.6rem 6rem; } /* .toolbar-wrap's negative side margins bleed it to main's edges — they must track main's own side padding at this breakpoint, or the bar overhangs the viewport (pre-existing mismatch, only exposed now that a mobile pass is actually checking for horizontal overflow). */ .toolbar-wrap { margin: 1rem -0.6rem -0.6rem; } .fitch-proof { font-size: 0.85rem; } .win-score-row { gap: 0.9rem; } .win-card, .tutorial-card { padding: 1rem; } .win-overlay { padding: 1.25rem 0.5rem; } .legend-grid { grid-template-columns: 1fr; } .legend-row { display: block; margin-bottom: 0.3rem; } .archive-row { flex-direction: column; align-items: flex-start; } .archive-row-blurb { text-align: left; max-width: none; } .formula-slot-nested { padding-left: 0.6rem; margin-left: 0.15rem; } /* Four nav links (Today/Archive/Stats/Tutorial) no longer fit alongside the title on one row at this width — wrap nav to its own full row. */ .site-header { flex-wrap: wrap; row-gap: 0.4rem; padding: 0.6rem 0.8rem; } .site-nav { width: 100%; justify-content: space-between; gap: 0.2rem; } .site-nav a { padding: 0.35rem 0.4rem; font-size: 0.8rem; } }