/* ============================================================================ donotpanic-iq — "Dark Claude Console" theme ---------------------------------------------------------------------------- All colours/spacing live as tokens. The default theme is defined on :root. A future theme is a pure drop-in: add a single block, e.g. [data-theme="grok"] { --bg:...; --accent:...; ... } and set . No other CSS changes needed. System font everywhere — no serif, no web fonts (zero-dep, offline-friendly). ============================================================================ */ :root { --bg:#1f1e1d; --bg-2:#262624; --panel:#2a2a27; --panel-2:#1a1a18; --ink:#f5f4ee; --muted:#9b958c; --border:#3a3936; --accent:#d97757; --accent-2:#bd5d3a; /* Claude terracotta / clay */ --ok:#7fae8a; --bad:#d98a76; --radius:12px; --font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: radial-gradient(900px 500px at 72% -12%, rgba(217,119,87,.10), transparent 60%), var(--bg); color: var(--ink); min-height: 100vh; display: grid; place-items: center; padding: 24px; -webkit-font-smoothing: antialiased; } .wrap { width: min(680px, 100%); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: 0 18px 50px rgba(0,0,0,.35); } h1, h2, h3 { letter-spacing: -.02em; font-weight: 700; } h1 { margin: 0 0 4px; font-size: 1.8rem; } h3 { margin: 0 0 4px; } .dolphin { font-size: 2.2rem; line-height: 1; } .muted { color: var(--muted); } .center { text-align: center; } a { color: var(--accent); } code { background: var(--panel-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; font-size: .85em; } /* ── Layout helpers ──────────────────────────────────────────────────────── */ .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; } .hidden { display: none; } .err { color: var(--bad); margin-top: 10px; min-height: 1.2em; } .footer { margin-top: 22px; font-size: .85rem; } /* ── Inputs ──────────────────────────────────────────────────────────────── */ input[type=text] { flex: 1; min-width: 200px; padding: 14px 16px; font-size: 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--ink); outline: none; font-family: var(--font); } input[type=text]:focus { border-color: var(--accent); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ button { padding: 13px 20px; font-size: 1rem; font-weight: 600; font-family: var(--font); border: 0; border-radius: 10px; cursor: pointer; background: var(--accent); color: #1a1a18; transition: transform .06s ease, background .12s ease, opacity .12s ease; } button:hover { background: var(--accent-2); } button:active { transform: translateY(1px); } button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); } button.ghost:hover { background: var(--bg-2); border-color: var(--accent); } button:disabled { opacity: .55; cursor: default; } /* ── Campaign menu: level cards + game tiles ─────────────────────────────── */ .progress-line { font-size: .9rem; } .level { margin-top: 18px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); } .level-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .level-name { font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; } .level-tag { font-size: .72rem; color: var(--accent); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; } .level.locked { opacity: .6; } .level.locked .lock-msg { color: var(--muted); font-size: .85rem; margin: 8px 0 0; } .grid { display: grid; gap: 12px; margin-top: 14px; } .tile { text-align: left; padding: 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); cursor: pointer; color: var(--ink); font-weight: 600; } .tile:hover:not(:disabled) { border-color: var(--accent); background: var(--panel); } .tile h3 { margin: 0 0 4px; font-size: 1.05rem; } .tile p { margin: 4px 0 0; font-weight: 400; } .tile.done { border-color: var(--ok); } .tile .check { color: var(--ok); font-weight: 700; } .pill { display: inline-block; font-size: .72rem; color: var(--accent); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; } /* unlock toast */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--accent); color: #1a1a18; font-weight: 700; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 50; animation: toastIn .25s ease; } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } } /* ── Shared game UI ──────────────────────────────────────────────────────── */ .qa { margin-top: 20px; } .opts { display: grid; gap: 10px; margin-top: 14px; } .opt { text-align: left; background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); font-weight: 600; } .opt:hover:not(:disabled) { background: var(--panel-2); border-color: var(--accent); } .opt.correct { border-color: var(--ok); } .opt.wrong { border-color: var(--bad); } .bigscore { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; } /* ── Small screens ───────────────────────────────────────────────────────── */ @media (max-width: 380px) { .card { padding: 20px; } h1 { font-size: 1.5rem; } .bigscore { font-size: 2.1rem; } }