/* ============================================================ Quant Quest — design system A dark "fintech terminal meets arcade" aesthetic. ============================================================ */ :root { color-scheme: dark; --bg: #0a0e1a; --bg-2: #0e1424; --panel: #131b30; --panel-2: #1a2440; --line: #25314f; --line-soft: #1b2440; --ink: #eaf0ff; --ink-soft: #aab6d6; --ink-dim: #6b7aa0; --brand: #38e1c8; --brand-2: #6f8bff; --gold: #ffcb6b; --good: #34d399; --bad: #fb6f8a; --warn: #ffb454; --w-color: var(--brand); --w-accent: var(--brand-2); --shadow: 0 18px 50px -16px rgba(0,0,0,.6); --radius: 18px; --maxw: 1080px; --mono: "JetBrains Mono", ui-monospace, monospace; } /* ============================================================ Light theme — opt-in via (account setting on /notifications, mirrored to localStorage by base.html's boot script). Accents are darker cousins of the dark palette: they double as text on white panels, so each keeps ~4.5:1 contrast. Everything below scoped to the attribute; no attribute = the dark default above. ============================================================ */ html[data-theme="light"] { color-scheme: light; --bg: #eef2f9; --bg-2: #e4eaf5; --panel: #ffffff; --panel-2: #edf1f9; --line: #c6d2e4; --line-soft: #d9e2ef; --ink: #17213a; --ink-soft: #46557b; --ink-dim: #66759b; --brand: #0a9284; --brand-2: #4f63d2; --gold: #a97812; --good: #0d8f63; --bad: #d02e62; --warn: #b45309; --shadow: 0 18px 50px -16px rgba(23,33,58,.22); } html[data-theme="light"] body{ background: radial-gradient(1200px 700px at 80% -10%, #dce6f5 0%, transparent 60%), radial-gradient(900px 600px at 0% 0%, #e1e9f6 0%, transparent 55%), var(--bg); } html[data-theme="light"] .aurora{ opacity: .35; } html[data-theme="light"] .topbar{ background: rgba(247,250,254,.78); } html[data-theme="light"] .xpbar-text{ text-shadow: 0 1px 2px rgba(255,255,255,.55); } /* white text where the dark theme used near-black on bright accent fills */ html[data-theme="light"] .btn-primary, html[data-theme="light"] .acct-avatar, html[data-theme="light"] .davatar, html[data-theme="light"] .opt.selected .opt-key, html[data-theme="light"] .opt.correct .opt-key, html[data-theme="light"] .opt.wrong .opt-key{ color: #fff; } html[data-theme="light"] .btn-primary{ box-shadow: 0 10px 28px -8px rgba(10,146,132,.45); } html[data-theme="light"] .btn-primary:hover{ box-shadow: 0 14px 34px -8px rgba(10,146,132,.55); } html[data-theme="light"] .star:not(.on){ color: #c2cde2; } html[data-theme="light"] .world{ background: linear-gradient(180deg, rgba(23,33,58,.03), transparent); } /* per-world accent hues are authored for dark panels — pull them toward ink */ html[data-theme="light"] :is(.world-kicker, .node-num){ color: color-mix(in srgb, var(--w-color) 60%, #223); } html[data-theme="light"] .table-wrap tbody tr:nth-child(even){ background: rgba(23,33,58,.03); } html[data-theme="light"] .callout-example{ background: rgba(23,33,58,.03); } html[data-theme="light"] :is(.boss-intro, .boss-hp-wrap, .boss-hp-bar){ border-color: #ecc2d1; } html[data-theme="light"] .boss-hp-bar{ background: #f6dde6; } html[data-theme="light"] .lvl-beginner{ color: #15803d; } html[data-theme="light"] .lvl-intermediate{ color: #a16207; } html[data-theme="light"] .lvl-advanced{ color: #b91c1c; } html[data-theme="light"] :is(.t-silver.is-earned, .t-silver.trophy-total.is-earned, .badge-card.t-silver.earned){ border-color: #94a3b8; } html[data-theme="light"] .site-footer{ background: linear-gradient(180deg, transparent, rgba(198,210,228,.45)); } html[data-theme="light"] .dthread{ background: rgba(237,241,249,.7); } /* Screens stay screens: chart canvases and the Desk's market feeds are drawn in JS with dark-terminal colors, so they keep a dark bezel in light mode. */ html[data-theme="light"] .widget :is(canvas, svg){ background: #0e1424; } html[data-theme="light"] :is(.ticker, .newsfeed){ --ink: #eaf0ff; --ink-soft: #aab6d6; --ink-dim: #6b7aa0; --good: #34d399; --bad: #fb6f8a; --warn: #ffb454; --line: #25314f; --line-soft: #1b2440; color: var(--ink); } /* Desk severity accents double as text/border colors on light panels */ html[data-theme="light"] .desk{ --sev: #0a9284; } html[data-theme="light"] .desk[data-severity="calm"]{ --sev: #0d8f63; } html[data-theme="light"] .desk[data-severity="normal"]{ --sev: #0a9284; } html[data-theme="light"] .desk[data-severity="elevated"]{ --sev: #a97812; } html[data-theme="light"] .desk[data-severity="stress"]{ --sev: #b45309; } html[data-theme="light"] .desk[data-severity="crisis"]{ --sev: #d02e62; } html[data-theme="light"] .desk[data-severity="catastrophe"]{ --sev: #dc2643; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* No page may scroll sideways: stray wide content (an unwrappable KaTeX span, a long token) must clip at the viewport instead of widening it. `clip` (with `hidden` as the older-browser fallback) doesn't create a scroll container, so position: sticky descendants keep working. */ html { overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: "Inter", system-ui, sans-serif; background: radial-gradient(1200px 700px at 80% -10%, #16203a 0%, transparent 60%), radial-gradient(900px 600px at 0% 0%, #131a30 0%, transparent 55%), var(--bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; } h1,h2,h3,.brand-name,.world-title,.intro-title,.hero-title { font-family: "Sora", sans-serif; } a { color: inherit; text-decoration: none; } b { color: var(--ink); } /* Aurora background flourish */ .aurora{ position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background: radial-gradient(600px 400px at 15% 20%, rgba(56,225,200,.10), transparent 70%), radial-gradient(700px 500px at 85% 70%, rgba(111,139,255,.12), transparent 70%), radial-gradient(500px 400px at 60% 110%, rgba(244,114,182,.08), transparent 70%); animation: drift 24s ease-in-out infinite alternate; } @keyframes drift { to { transform: translate3d(0,-20px,0) scale(1.05); } } .content { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 28px 22px 90px; } /* ============================================================ Top bar / HUD */ .topbar{ position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 12px 22px; background: rgba(10,14,26,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); transition: transform .3s ease; } .brand{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; } .brand-mark{ font-size: 22px; line-height: 0; } /* The logo mark is the shared app icon (static/img/icon-192.png) — the same image as the favicon/manifest — so branding is identical everywhere it shows (header, footer, auth screens, the "we'll be right back" loader). The tile is dark navy, so it needs a ring to lift it off a dark-mode topbar and gain definition on a light one; the tuned rings below give both modes even contrast and a soft glow keeps it balanced against the wordmark. */ .brand-mark img{ display: inline-block; vertical-align: middle; width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.35); } html[data-theme="light"] .brand-mark img{ box-shadow: 0 0 0 1px rgba(15,23,42,.14), 0 1px 6px rgba(15,23,42,.18); } /* Inline contexts (footer copy, auth card) sit a touch smaller next to text. */ .footer-brand .brand-mark img, .auth-brand .brand-mark img{ width: 22px; height: 22px; border-radius: 6px; } .brand-name{ letter-spacing: -.5px; } .brand-accent{ color: var(--brand); } .player{ margin-left: auto; display: flex; align-items: center; gap: 16px; } .hud-rank{ text-align: right; line-height: 1.1; } .hud-rank-title{ display: block; font-weight: 700; font-size: 13px; } .hud-level{ font-size: 11px; color: var(--ink-dim); } .hud-level b{ color: var(--brand); } .xpbar{ position: relative; width: 180px; height: 22px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; } .xpbar-fill{ position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 16px rgba(56,225,200,.5); } .xpbar-text{ position: absolute; inset: 0; text-align: center; line-height: 22px; white-space: nowrap; font-size: 11px; font-weight: 600; font-family: var(--mono); text-shadow: 0 1px 2px rgba(0,0,0,.7); } .xpbar-max{ color: var(--gold); font-weight: 800; letter-spacing: .5px; } .hud-stats{ display: flex; gap: 8px; } .hud-chip{ font-size: 13px; padding: 5px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); } .hud-link:hover{ border-color: var(--brand); } /* ============================================================ Account / Auth */ .account{ margin-left: 14px; display: flex; align-items: center; gap: 10px; } /* Theme toggle — a single icon button that cycles dark → light → system. The active pref (mirrored onto before first paint) picks which glyph shows, so there's no post-load icon flicker. */ .theme-toggle{ display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 16px; line-height: 1; background: var(--panel); border: 1px solid var(--line); color: var(--ink); } .theme-toggle:hover{ border-color: var(--brand); } .theme-toggle .ti{ display: none; } html:not([data-theme-pref]) .theme-toggle .ti-dark, html[data-theme-pref="dark"] .theme-toggle .ti-dark, html[data-theme-pref="light"] .theme-toggle .ti-light, html[data-theme-pref="system"] .theme-toggle .ti-system{ display: block; } /* No HUD (the hub, or any signed-out page) → nothing pushes the account chip right, so do it here. With a .player present the HUD already owns the auto. */ .topbar:not(:has(.player)) .account{ margin-left: auto; } .btn-sm{ padding: 7px 14px; font-size: 13px; border-radius: 11px; } .acct-menu{ position: relative; } .acct-chip{ display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 4px; color: var(--ink); } .acct-chip:hover{ border-color: var(--brand); } .acct-avatar{ width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #051018; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .acct-name{ font-size: 13px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-caret{ font-size: 10px; color: var(--ink-dim); } .acct-dropdown{ position: absolute; right: 0; top: calc(100% + 8px); width: 220px; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: none; } .acct-dropdown.open{ display: block; animation: fadeUp .18s ease both; } .acct-email{ font-size: 12px; color: var(--ink-dim); padding: 6px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; word-break: break-all; } .acct-dropdown a, .acct-dropdown button{ display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ink-soft); font-family: inherit; font-size: 14px; padding: 9px 10px; border-radius: 9px; cursor: pointer; } .acct-dropdown a:hover, .acct-dropdown button:hover{ background: var(--panel-2); color: var(--ink); } .auth-page{ min-height: 70vh; display: grid; place-items: center; padding: 24px 0; } .auth-card{ width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 32px 30px; box-shadow: var(--shadow); text-align: center; } .auth-brand{ font-family: "Sora"; font-weight: 800; font-size: 19px; } .auth-title{ font-size: 25px; margin: 18px 0 6px; } .auth-sub{ color: var(--ink-dim); font-size: 14px; margin: 0 0 22px; } .auth-error{ background: rgba(251,111,138,.1); border: 1px solid rgba(251,111,138,.35); color: var(--bad); font-size: 13.5px; padding: 10px 12px; border-radius: 11px; margin-bottom: 18px; } .oauth-buttons{ display: flex; flex-direction: column; gap: 10px; } .oauth-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; color: #1a1a1a; font-weight: 600; font-size: 14.5px; border: 1px solid var(--line); transition: transform .12s, box-shadow .2s; } .oauth-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(255,255,255,.4); } .oauth-apple{ background: #000; color: #fff; } .auth-or{ display: flex; align-items: center; gap: 12px; color: var(--ink-dim); font-size: 12px; margin: 18px 0; } .auth-or::before, .auth-or::after{ content: ""; flex: 1; height: 1px; background: var(--line); } .auth-form{ display: flex; flex-direction: column; gap: 14px; text-align: left; } .auth-form label{ display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; } .auth-form input{ font-family: inherit; font-size: 15px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1.5px solid var(--line); color: var(--ink); } .auth-form input:focus{ outline: none; border-color: var(--brand); } .auth-form button{ margin-top: 6px; width: 100%; } .label-row{ display: flex; justify-content: space-between; align-items: baseline; } .forgot-link{ font-size: 11.5px; color: var(--brand); font-weight: 600; } /* Live password strength meter (templates/_pw_hint.html): a bar whose width + colour track the zxcvbn score (-1 empty → 0 very weak … 4 strong), plus a coloured label and a detail line. */ .pw-strength{ margin: -6px 0 2px; } .pw-bar{ height: 6px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; } .pw-bar-fill{ display: block; height: 100%; width: 0; border-radius: 6px; background: var(--ink-dim); transition: width .2s ease, background-color .2s ease; } .pw-bar[data-score="0"] .pw-bar-fill{ width: 25%; background: var(--bad); } .pw-bar[data-score="1"] .pw-bar-fill{ width: 45%; background: var(--bad); } .pw-bar[data-score="2"] .pw-bar-fill{ width: 65%; background: var(--warn); } .pw-bar[data-score="3"] .pw-bar-fill{ width: 82%; background: var(--brand); } .pw-bar[data-score="4"] .pw-bar-fill{ width: 100%; background: var(--good); } .pw-note{ margin: 7px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-dim); } .pw-label{ font-weight: 700; } .pw-label:not(:empty){ margin-right: 4px; } .pw-label:not(:empty)::after{ content: " ·"; color: var(--ink-dim); font-weight: 400; } .pw-label[data-score="0"], .pw-label[data-score="1"]{ color: var(--bad); } .pw-label[data-score="2"]{ color: var(--warn); } .pw-label[data-score="3"]{ color: var(--brand); } .pw-label[data-score="4"]{ color: var(--good); } .auth-switch{ margin-top: 18px; font-size: 13.5px; color: var(--ink-dim); } /* email-verification banner */ .verify-banner{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 10px 18px; font-size: 13.5px; color: #2a1a05; background: linear-gradient(90deg, var(--gold), #ffd98a); text-align: center; } .verify-banner b{ color: #2a1a05; } .verify-banner form{ display: inline; } .verify-banner button{ font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; background: rgba(0,0,0,.16); color: #2a1a05; border: 1px solid rgba(0,0,0,.25); padding: 4px 12px; border-radius: 999px; } .verify-banner button:hover{ background: rgba(0,0,0,.26); } .auth-switch a, .auth-guest{ color: var(--brand); font-weight: 600; } .auth-guest{ display: inline-block; margin-top: 14px; font-size: 13px; } /* ============================================================ Buttons */ .btn{ display: inline-flex; align-items: center; gap: 8px; justify-content: center; font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s, background .2s, border-color .2s; user-select: none; background: var(--panel-2); color: var(--ink); } .btn:hover{ transform: translateY(-2px); } .btn:active{ transform: translateY(0) scale(.98); } .btn:disabled{ opacity: .45; cursor: not-allowed; transform: none; } .btn-lg{ padding: 14px 28px; font-size: 16px; border-radius: 16px; } .btn-primary{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #051018; box-shadow: 0 10px 28px -8px rgba(56,225,200,.6); } .btn-primary:hover{ box-shadow: 0 14px 34px -8px rgba(56,225,200,.7); } .btn-ghost{ background: transparent; border-color: var(--line); color: var(--ink-soft); } .btn-ghost:hover{ border-color: var(--brand); color: var(--ink); } /* ============================================================ Hero */ .hero{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: 36px 0 50px; } .hero-badge{ display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--brand); background: rgba(56,225,200,.08); border: 1px solid rgba(56,225,200,.25); padding: 6px 12px; border-radius: 999px; } .hero-title{ font-size: 50px; line-height: 1.04; margin: 18px 0 14px; letter-spacing: -1.5px; } .grad-text{ background: linear-gradient(120deg, var(--brand), var(--brand-2) 60%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub{ color: var(--ink-soft); font-size: 17px; line-height: 1.6; max-width: 540px; } .hero-cta{ display: flex; align-items: center; gap: 26px; margin-top: 26px; flex-wrap: wrap; } .hero-stats{ display: flex; gap: 22px; } .hero-stats div{ display: flex; flex-direction: column; } .hero-stats b{ font-size: 24px; font-family: "Sora"; color: var(--brand); } .hero-stats span{ font-size: 12px; color: var(--ink-dim); } .hero-art{ position: relative; } #heroCanvas{ width: 100%; height: auto; border-radius: var(--radius); background: linear-gradient(180deg, #0c1426, #0a1020); border: 1px solid var(--line); box-shadow: var(--shadow); } .hero-art-cap{ text-align: center; font-size: 12px; color: var(--ink-dim); margin-top: 10px; font-style: italic; } /* ============================================================ World map */ .map{ display: flex; flex-direction: column; gap: 18px; } .world{ background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); border: 1px solid var(--line-soft); border-radius: 24px; padding: 26px 26px 38px; position: relative; overflow: hidden; } .world::before{ content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--w-color), var(--w-accent)); } .world-head{ display: flex; align-items: center; gap: 18px; } .world-emblem{ font-size: 34px; width: 64px; height: 64px; border-radius: 18px; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--w-color) 35%, transparent), transparent 70%), var(--panel); border: 1px solid var(--line); box-shadow: 0 0 26px -8px var(--w-color); } .world-kicker{ font-size: 12px; letter-spacing: 1.5px; font-weight: 700; color: var(--w-color); text-transform: uppercase; } .cleared{ color: var(--gold); } .world-title{ margin: 3px 0 1px; font-size: 26px; letter-spacing: -.5px; } .world-sub{ margin: 0; color: var(--ink-dim); font-size: 13px; } .world-meta{ flex: 1; } .world-blurb{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 14px 0 6px; max-width: 720px; } .world-progress .ring{ --pct: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-family: var(--mono); color: var(--ink-soft); background: conic-gradient(var(--w-color) calc(var(--pct)*1%), var(--line) 0); position: relative; } .world-progress .ring::after{ content:""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-2); } .world-progress .ring span{ position: relative; z-index: 1; } /* serpentine track */ .track{ list-style: none; margin: 24px 0 0; padding: 0; position: relative; } .track::before{ content:""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--line) 0 10px, transparent 10px 20px); } .node-row{ --node-w: min(46%, 420px); display: flex; margin: 6px 0; position: relative; } .node-row.left{ justify-content: flex-start; } .node-row.right{ justify-content: flex-end; } .node-row:has(.node-boss){ --node-w: min(48%, 460px); } .node{ display: flex; align-items: center; gap: 14px; width: var(--node-w); padding: 12px 16px; border-radius: 18px; position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--line); transition: transform .14s ease, box-shadow .25s, border-color .2s; } .node-row.right .node{ flex-direction: row-reverse; text-align: right; } /* Connector: bridges each node's inner edge to the central spine (50%). Anchored with left/right (not a fixed width) so it always meets the spine, whatever the track width or node cap. --node-w matches the node width, so the two stay aligned. */ .node-row::after{ content:""; position: absolute; top: 50%; height: 3px; transform: translateY(-50%); background: var(--line); } .node-row.left::after{ left: var(--node-w); right: 50%; } .node-row.right::after{ left: 50%; right: var(--node-w); } .node-available{ border-color: color-mix(in srgb, var(--w-color) 55%, var(--line)); box-shadow: 0 0 0 0 var(--w-color); cursor: pointer; } .node-available:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px -14px var(--w-color); border-color: var(--w-color); } .node-available .node-disc{ animation: pulseGlow 2.4s ease-in-out infinite; } .node-completed{ cursor: pointer; } .node-completed:hover{ transform: translateY(-2px); border-color: var(--w-color); } .node-locked{ opacity: .55; filter: grayscale(.5); cursor: not-allowed; } .node-boss .node-disc{ background: radial-gradient(circle at 30% 25%, #ff8aa8, #b1264a); border-color: #ff8aa8; } .node-disc{ flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; position: relative; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--w-color) 40%, transparent), transparent 70%), var(--panel-2); border: 1px solid var(--line); } .node-completed .node-disc{ background: radial-gradient(circle at 30% 25%, var(--w-color), var(--w-accent)); border-color: var(--w-color); } .node-lock{ font-size: 22px; opacity: .8; } .boss-flag{ position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); } .node-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .node-num{ font-size: 10.5px; letter-spacing: 1px; font-weight: 700; color: var(--w-color); text-transform: uppercase; } .node-title{ font-weight: 700; font-size: 15px; line-height: 1.2; } .node-stars{ display: flex; align-items: center; gap: 3px; margin-top: 3px; } .node-row.right .node-stars{ justify-content: flex-end; } .star{ color: #2c3658; font-size: 14px; } .star.on{ color: var(--gold); text-shadow: 0 0 8px rgba(255,203,107,.6); } .node-diff{ margin-left: 8px; color: var(--ink-dim); font-size: 9px; letter-spacing: 1px; } .node-req{ font-size: 11px; color: var(--ink-dim); } @keyframes pulseGlow{ 0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--w-color) 60%, transparent); } 50%{ box-shadow: 0 0 0 8px transparent; } } /* side quests (optional deep dives) */ .sidequests{ margin: 22px 0 4px; padding: 18px; border-radius: 18px; border: 1px dashed var(--line); background: linear-gradient(180deg, rgba(255,203,107,.04), transparent); } .sq-head{ font-family: "Sora"; font-weight: 700; font-size: 14px; color: var(--gold); margin-bottom: 14px; } .sq-head span{ color: var(--ink-dim); font-weight: 400; font-size: 12.5px; } .sq-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; } .sq-card{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); transition: transform .14s, border-color .2s, box-shadow .2s; } .sq-available{ cursor: pointer; border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); } .sq-available:hover{ transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 12px 28px -16px var(--gold); } .sq-completed{ cursor: pointer; } .sq-completed:hover{ transform: translateY(-2px); border-color: var(--gold); } .sq-locked{ opacity: .5; filter: grayscale(.6); cursor: not-allowed; } .sq-icon{ font-size: 26px; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); } .sq-completed .sq-icon{ background: radial-gradient(circle at 30% 25%, var(--gold), #d99a2b); border-color: var(--gold); } .sq-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sq-title{ font-weight: 600; font-size: 14px; line-height: 1.25; } .sq-meta{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-dim); } .sq-diff{ letter-spacing: 1px; } .sq-req{ font-style: italic; } .side-tag{ color: var(--gold); font-weight: 800; letter-spacing: 1px; } /* side-quest suggestions (shown on a boss loss / desk blow-up) */ .sq-suggest-wrap{ display: flex; flex-direction: column; gap: 8px; margin: 6px auto 18px; max-width: 460px; text-align: left; } .sq-suggest-label{ font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .5px; text-align: center; margin-bottom: 2px; } .sq-suggest{ display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(255,203,107,.06); border: 1px solid rgba(255,203,107,.3); color: var(--ink); font-size: 14px; transition: transform .12s, border-color .2s; } .sq-suggest:hover{ transform: translateX(3px); border-color: var(--gold); } .sq-suggest-go{ margin-left: auto; color: var(--gold); } /* finale */ /* The live-simulation final boss — the map's permanent last node (see web/courses._sim_node). Always shown; locked until the boss is cleared, replayable forever once survived. */ .sim-final{ margin: 30px 0 10px; display: flex; justify-content: center; } .sim-node{ display: flex; gap: 20px; align-items: center; width: 100%; max-width: 640px; padding: 22px 26px; border-radius: 20px; text-align: left; border: 1px solid #5a2440; background: radial-gradient(600px 200px at 50% -40%, rgba(251,111,138,.16), transparent 70%), var(--panel); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s; } .sim-node[href]:hover{ transform: translateY(-3px); border-color: #fb6f8a; box-shadow: 0 14px 40px rgba(251,111,138,.22); } .sim-node-disc{ position: relative; flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: var(--panel-2); border: 1px solid var(--line); } .sim-node-crown{ position: absolute; top: -10px; right: -8px; font-size: 20px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .sim-node-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sim-node-kicker{ font-size: 11px; letter-spacing: 1px; font-weight: 700; color: var(--bad); } .sim-node-title{ font-size: 22px; font-weight: 800; letter-spacing: -.4px; } .sim-node-sub{ font-size: 14px; color: var(--ink-soft); line-height: 1.45; } .sim-node-stars{ margin-top: 4px; font-size: 16px; letter-spacing: 2px; line-height: 1; } .sim-node-stars .star{ color: var(--line); } .sim-node-stars .star.on{ color: #ffcb6b; } .sim-node-cta{ margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--brand); } /* locked: dimmed, not a link */ .sim-node.sim-locked{ border-color: var(--line); background: var(--panel); opacity: .72; cursor: default; } .sim-node.sim-locked .sim-node-kicker{ color: var(--ink-dim); } .sim-node.sim-locked .sim-node-cta{ color: var(--ink-dim); } .sim-node.sim-locked .sim-node-crown{ filter: grayscale(1) opacity(.5); } /* completed: green accent so a survived run reads as "done, replay welcome" */ .sim-node.sim-completed{ border-color: #2f6d4f; background: radial-gradient(600px 200px at 50% -40%, rgba(52,211,153,.14), transparent 70%), var(--panel); } .sim-node.sim-completed .sim-node-kicker{ color: var(--good); } .sim-node.sim-completed .sim-node-cta{ color: var(--good); } .sim-node.sim-completed[href]:hover{ border-color: #34d399; box-shadow: 0 14px 40px rgba(52,211,153,.2); } @media (max-width: 560px){ .sim-node{ gap: 14px; padding: 18px; } .sim-node-disc{ width: 52px; height: 52px; font-size: 26px; } .sim-node-title{ font-size: 18px; } } .finale{ margin-top: 10px; } .finale-card{ text-align: center; padding: 40px; border-radius: 24px; border: 1px dashed var(--line); background: linear-gradient(180deg, rgba(255,203,107,.05), transparent); } .finale-icon{ font-size: 44px; } .finale-card h2{ margin: 10px 0; } .finale-card p{ color: var(--ink-soft); max-width: 560px; margin: 0 auto 18px; line-height: 1.6; } /* Support nudge — discrete "buy me a coffee" card. Used on the level results screen (revealed by level.js after a cleared level). Warm gold accent so it's visible without competing with the surrounding UI; a slim row, not a card. */ .coffee-nudge{ display: flex; align-items: center; gap: 14px; margin: 24px 0 2px; padding: 13px 18px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--gold) 42%, var(--line)); background: linear-gradient(180deg, rgba(255,203,107,.07), transparent); color: var(--ink-soft); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .coffee-nudge:hover{ transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 14px 30px -18px var(--gold); } .coffee-cup{ font-size: 26px; line-height: 1; flex: none; } .coffee-txt{ font-size: 13.5px; line-height: 1.5; } .coffee-txt b{ display: block; color: var(--ink); font-family: "Sora"; font-size: 14px; margin-bottom: 1px; } .coffee-go{ margin-left: auto; flex: none; white-space: nowrap; font-family: "Sora"; font-weight: 700; font-size: 13px; color: var(--gold); padding: 8px 14px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); background: rgba(255,203,107,.08); } .coffee-nudge:hover .coffee-go{ border-color: var(--gold); background: rgba(255,203,107,.16); } @media (max-width: 560px){ .coffee-nudge{ flex-wrap: wrap; } .coffee-go{ margin-left: 0; width: 100%; text-align: center; } } /* Compact variant — on the results screen the card sits among XP/badges/actions, so it needs tighter spacing and left-aligned copy. */ .coffee-nudge-sm{ margin: 6px 0 24px; text-align: left; } /* When the player replays a just-cleared world (the results→quiz transition is in-page, no reload), hide the BMC widget its world-clear popup injected so it can't hang around during the ongoing quiz. Toggled by level.js. */ body.bmc-hide [id^="bmc-"]{ display: none !important; } /* Footer support link — a touch of gold to lift it out of the muted nav row. */ .footer-links .footer-coffee{ color: var(--gold); } .footer-links .footer-coffee:hover{ color: var(--gold); text-decoration: underline; } /* ============================================================ Level pages */ .level{ max-width: 760px; margin: 0 auto; } .back-link{ display: inline-block; color: var(--ink-dim); font-size: 14px; margin-bottom: 18px; } .back-link:hover{ color: var(--brand); } .stage{ animation: fadeUp .4s ease both; } .hidden{ display: none !important; } @keyframes fadeUp{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} } .level-card{ background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .intro-card{ text-align: center; } .intro-icon{ font-size: 56px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); } .intro-kicker{ font-size: 12px; letter-spacing: 1px; color: var(--ink-dim); margin: 10px 0; font-weight: 600; } .intro-title{ font-size: 32px; margin: 4px 0 8px; letter-spacing: -.5px; } .intro-sub{ color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 560px; margin: 0 auto; } .intro-tagline{ color: var(--brand); font-style: italic; margin-top: 14px; } .boss-tag{ color: var(--bad); font-weight: 800; letter-spacing: 1px; } .boss-intro{ border-color: #5a2440; background: radial-gradient(700px 300px at 50% -20%, rgba(251,111,138,.14), transparent 70%), var(--panel); } .concept-chips{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0; } .chip{ font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-soft); } .prereq-note{ font-size: 13px; color: var(--ink-dim); margin: 14px 0; } .prev-record{ font-size: 14px; margin: 10px 0; } /* One-line "how this works" under the Begin button — hearts, pass mark, no loss. */ .quiz-rules{ color: var(--ink-dim); font-size: 12.5px; line-height: 1.6; max-width: 460px; margin: 16px auto 0; } #beginBtn{ margin-top: 22px; } /* lesson */ .lesson-top{ display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .lesson-progress{ flex: 1; height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; border: 1px solid var(--line); } .lesson-progress-fill{ height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .4s ease; } .lesson-count{ font-size: 13px; color: var(--ink-dim); font-family: var(--mono); } .lesson-card{ min-height: 280px; } .lesson-card h3{ font-size: 22px; margin: 0 0 14px; } .lesson-body{ color: var(--ink-soft); font-size: 16px; line-height: 1.7; } .lesson-body p{ margin: 0 0 14px; } .lesson-body strong, .lesson-body b{ color: var(--ink); } .lesson-body code{ font-family: var(--mono); background: var(--bg-2); padding: 2px 6px; border-radius: 6px; font-size: 13px; color: var(--brand); } .lesson-body ul, .lesson-body ol{ padding-left: 22px; margin: 0 0 14px; } .lesson-body li{ margin: 6px 0; } .lesson-nav{ display: flex; justify-content: space-between; margin-top: 18px; } /* Per-card depth selector — a segmented control letting the reader pick how much explanation a card shows (Bare → Full). Hidden on cards with no extra depth authored; disabled pills mark depths this card doesn't carry. */ .depth-bar{ display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; } .depth-label{ font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-dim); } .depth-pills{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); } .depth-pill{ appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 6px 15px; border-radius: 999px; transition: background .15s ease, color .15s ease; } .depth-pill:hover:not(:disabled):not(.active){ color: var(--ink); } .depth-pill.active{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: var(--bg); box-shadow: 0 2px 10px rgba(0,0,0,.28); } .depth-pill:disabled{ opacity: .3; cursor: default; } .depth-hint{ font-size: 12.5px; color: var(--ink-dim); font-style: italic; } @media (max-width: 620px){ .depth-bar{ gap: 8px; } .depth-pill{ padding: 6px 11px; font-size: 12px; } .depth-hint{ flex-basis: 100%; } } /* Markdown tables (lessons, quiz prompts, explanations, callouts). marked() emits a bare ; quest.js wraps each one in .table-wrap so wide tables scroll sideways on phones instead of bursting the card or squashing text. */ .table-wrap{ margin: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; } .table-wrap table{ width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; } .table-wrap th, .table-wrap td{ padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .table-wrap thead th{ background: var(--panel-2); color: var(--ink); font-weight: 700; font-size: 12.5px; letter-spacing: .3px; } .table-wrap tbody tr:last-child td{ border-bottom: none; } .table-wrap tbody tr:nth-child(even){ background: rgba(255,255,255,.02); } .table-wrap td:first-child{ color: var(--ink); font-weight: 600; } .table-wrap td code, .table-wrap th code{ font-family: var(--mono); background: var(--bg-2); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; color: var(--brand); white-space: nowrap; } .callout{ border-radius: 14px; padding: 14px 16px; margin: 18px 0 4px; border: 1px solid; font-size: 15px; line-height: 1.55; } .callout-key{ background: rgba(56,225,200,.07); border-color: rgba(56,225,200,.3); } .callout-tip{ background: rgba(111,139,255,.07); border-color: rgba(111,139,255,.3); } .callout-warn{ background: rgba(255,180,84,.07); border-color: rgba(255,180,84,.3); } .callout-example{ background: rgba(255,255,255,.03); border-color: var(--line); } .callout-label{ font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 6px; } .callout-key .callout-label{ color: var(--brand); } .callout-tip .callout-label{ color: var(--brand-2); } .callout-warn .callout-label{ color: var(--warn); } /* quiz */ .quiz-top{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .hearts{ display: flex; gap: 3px; font-size: 18px; } .heart{ transition: transform .3s, opacity .3s; } .heart.lost{ opacity: .25; transform: scale(.8); filter: grayscale(1); } .quiz-progress{ flex: 1; height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; border: 1px solid var(--line); } .quiz-progress-fill{ height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .4s ease; } .quiz-count{ font-size: 13px; color: var(--ink-dim); font-family: var(--mono); } .quiz-card{ min-height: 200px; } .q-prompt{ font-size: 19px; line-height: 1.5; margin-bottom: 20px; font-family: "Sora"; font-weight: 600; } .q-hint{ font-size: 13px; color: var(--ink-dim); margin-top: -8px; margin-bottom: 16px; } /* opt-in tool pills (hint + calculator) */ .q-tools{ display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; } .hint-toggle{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold); background: rgba(255,203,107,.08); border: 1px solid rgba(255,203,107,.28); padding: 5px 12px; border-radius: 999px; transition: background .15s, border-color .15s; } .hint-toggle:hover{ background: rgba(255,203,107,.16); border-color: var(--gold); } .hint-text{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: -6px 0 16px; padding: 11px 14px; border-radius: 12px; background: rgba(255,203,107,.06); border: 1px solid rgba(255,203,107,.22); animation: fadeUp .25s ease both; } /* opt-in calculator (numeric questions) */ .calc-toggle{ color: var(--brand); background: rgba(56,225,200,.08); border-color: rgba(56,225,200,.28); } .calc-toggle:hover{ background: rgba(56,225,200,.16); border-color: var(--brand); } .calc-panel{ width: min(320px, 100%); margin: -6px auto 18px; padding: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; animation: fadeUp .25s ease both; } .calc-display{ width: 100%; box-sizing: border-box; text-align: right; font-family: var(--mono); font-size: 17px; color: var(--ink); padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1.5px solid var(--line); } .calc-display:focus{ outline: none; border-color: var(--brand); } .calc-result-row{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 30px; padding: 4px 2px; } .calc-preview{ font-family: var(--mono); font-size: 14px; color: var(--brand); overflow-wrap: anywhere; min-width: 0; } .calc-use{ flex: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; color: #051018; background: var(--brand); border: 1px solid transparent; border-radius: 999px; padding: 4px 11px; } .calc-use:hover{ filter: brightness(1.1); } .calc-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .calc-btn{ font-family: var(--mono); font-size: 15px; padding: 9px 0; border-radius: 9px; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); transition: background .12s, border-color .12s; } .calc-btn:hover{ border-color: var(--brand-2); } .calc-btn.op{ color: var(--brand-2); font-weight: 700; } .calc-btn.fn{ font-size: 12.5px; color: var(--brand); background: rgba(56,225,200,.06); } /* comfortable tap targets on touch screens */ @media (pointer: coarse){ .calc-btn{ padding: 13px 0; } } .calc-eq{ grid-column: 1 / -1; background: var(--brand); border-color: var(--brand); color: #051018; font-weight: 800; } .options{ display: flex; flex-direction: column; gap: 10px; } .opt{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; font-size: 15.5px; } .opt:hover{ border-color: var(--brand-2); transform: translateX(2px); } .opt.selected{ border-color: var(--brand); background: rgba(56,225,200,.08); } .opt.correct{ border-color: var(--good); background: rgba(52,211,153,.12); } .opt.wrong{ border-color: var(--bad); background: rgba(251,111,138,.12); } .opt-key{ width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; background: var(--bg-2); border: 1px solid var(--line); } .opt.selected .opt-key{ background: var(--brand); color: #051018; border-color: var(--brand); } .opt.correct .opt-key{ background: var(--good); color: #052015; } .opt.wrong .opt-key{ background: var(--bad); color: #2a0710; } .numeric-input{ display: flex; align-items: center; gap: 10px; } .numeric-input input{ font-family: var(--mono); font-size: 22px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1.5px solid var(--line); color: var(--ink); width: 220px; } .numeric-input input:focus{ outline: none; border-color: var(--brand); } .numeric-unit{ font-size: 18px; color: var(--ink-soft); } .tf-row{ display: flex; gap: 12px; } .tf-row .opt{ flex: 1; justify-content: center; font-size: 17px; font-weight: 600; } /* order (drag list) */ .order-list{ display: flex; flex-direction: column; gap: 8px; } .order-item{ display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 12px; background: var(--panel-2); border: 1.5px solid var(--line); cursor: grab; font-size: 15px; /* touch-action:none lets the DragDropTouch polyfill own the gesture (drag, not scroll) when a touch starts on a row; no text selection / iOS callout. */ touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .order-item.dragging{ opacity: .4; } .order-item.over{ border-color: var(--brand); } .order-grip{ color: var(--ink-dim); font-size: 18px; } .order-rank{ width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--bg-2); font-family: var(--mono); font-size: 12px; color: var(--brand); } .order-item.correct{ border-color: var(--good); } .order-item.wrong{ border-color: var(--bad); } /* match */ .match-grid{ display: flex; flex-direction: column; gap: 10px; } .match-row{ display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .match-left{ padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14.5px; } .match-select{ padding: 11px 12px; border-radius: 12px; background: var(--bg-2); border: 1.5px solid var(--line); color: var(--ink); font-size: 14px; font-family: inherit; min-width: 160px; } .match-select:focus{ outline: none; border-color: var(--brand); } .match-row.correct .match-select{ border-color: var(--good); } .match-row.wrong .match-select{ border-color: var(--bad); } .quiz-foot{ margin-top: 22px; } .feedback{ border-radius: 14px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease, margin .3s; font-size: 15px; line-height: 1.6; } .feedback.show{ max-height: 600px; padding: 16px 18px; margin-bottom: 16px; } .feedback.ok{ background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.35); } .feedback.no{ background: rgba(251,111,138,.1); border: 1px solid rgba(251,111,138,.35); } .feedback-title{ font-weight: 800; font-family: "Sora"; margin-bottom: 4px; } .feedback.ok .feedback-title{ color: var(--good); } .feedback.no .feedback-title{ color: var(--bad); } #checkBtn, #continueBtn{ width: 100%; } /* boss */ .boss-banner{ margin-bottom: 18px; } .boss-hp-wrap{ display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: radial-gradient(500px 120px at 0% 50%, rgba(251,111,138,.12), transparent 70%), var(--panel); border: 1px solid #5a2440; } .boss-avatar{ font-size: 38px; animation: bob 2s ease-in-out infinite; } @keyframes bob{ 50%{ transform: translateY(-6px) rotate(-4deg);} } .boss-hp{ flex: 1; } .boss-hp-label{ font-weight: 700; font-family: "Sora"; margin-bottom: 6px; } .boss-hp-bar{ height: 16px; border-radius: 999px; background: #2a1422; border: 1px solid #5a2440; overflow: hidden; } .boss-hp-fill{ height: 100%; width: 100%; background: linear-gradient(90deg, #ff5d7e, #b1264a); transition: width .6s cubic-bezier(.2,.8,.2,1); } /* results */ .results-card{ text-align: center; } .results-stars{ display: flex; justify-content: center; gap: 10px; font-size: 52px; margin-bottom: 8px; } .results-stars .star{ color: #2c3658; transition: transform .4s, color .4s; } .results-stars .star.on{ color: var(--gold); text-shadow: 0 0 22px rgba(255,203,107,.7); animation: starPop .5s ease both; } @keyframes starPop{ 0%{ transform: scale(0) rotate(-40deg);} 70%{ transform: scale(1.3);} 100%{ transform: scale(1);} } .results-title{ font-size: 30px; margin: 6px 0; } .results-sub{ color: var(--ink-soft); } .results-xp{ font-family: var(--mono); font-size: 30px; color: var(--brand); font-weight: 700; margin: 16px 0; } .results-badges{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; } .results-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .results-signup{ margin: 6px auto 20px; max-width: 460px; padding: 16px 18px; border-radius: 14px; background: rgba(255,203,107,.07); border: 1px solid rgba(255,203,107,.35); animation: fadeUp .5s ease both; } .results-signup-txt{ margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } /* Milestone account nudge — same gold-tint card as the signup nudge but with a subtle brand edge and a two-action row (primary CTA + "maybe later"). Uses design-system vars so it tracks light/dark automatically. */ .results-acct-nudge{ margin: 6px auto 20px; max-width: 460px; padding: 16px 18px; border-radius: 14px; text-align: center; background: rgba(56,225,200,.06); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(56,225,200,.12); animation: fadeUp .45s ease both; } .results-acct-txt{ margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } .results-acct-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ============================================================ Achievements */ .achievements-page{ max-width: 920px; margin: 0 auto; } .ach-head{ margin: 6px 0 24px; } .ach-head h1{ font-size: 32px; margin: 0 0 6px; } .ach-head p{ color: var(--ink-soft); } .badge-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 16px; } .badge-card{ position: relative; text-align: center; padding: 24px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); transition: transform .15s; } .badge-card.earned{ border-color: var(--gold); box-shadow: 0 0 30px -14px var(--gold); } .badge-card.locked{ opacity: .5; filter: grayscale(.8); } .badge-card:hover{ transform: translateY(-3px); } .badge-icon{ font-size: 42px; } .badge-title{ font-family: "Sora"; font-weight: 700; margin: 8px 0 4px; } .badge-desc{ font-size: 13px; color: var(--ink-dim); line-height: 1.5; } .badge-stamp{ position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 2px 6px; } .results-badges .badge-mini{ display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,203,107,.1); border: 1px solid var(--gold); animation: fadeUp .5s ease both; } .danger-zone{ margin: 40px 0; text-align: center; } /* ============================================================ Widgets */ .widget{ margin: 22px 0 6px; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--bg-2); } .widget-title{ font-family: "Sora"; font-weight: 700; font-size: 14px; color: var(--brand); margin-bottom: 4px; letter-spacing: .3px; } .widget-note{ font-size: 12.5px; color: var(--ink-dim); margin-bottom: 14px; } .widget canvas, .widget svg{ display: block; width: 100%; height: auto; border-radius: 10px; } .widget-controls{ display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .ctrl{ display: grid; grid-template-columns: 130px minmax(0,1fr) 70px; gap: 12px; align-items: center; font-size: 13px; } .ctrl label{ color: var(--ink-soft); } /* width:100% + min-width:0 let the range track shrink with the grid cell instead of forcing its ~133px intrinsic width and pushing the value column off-card. */ .ctrl input[type=range]{ -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 6px; border-radius: 999px; background: var(--line); outline: none; } .ctrl input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); cursor: pointer; box-shadow: 0 0 10px rgba(56,225,200,.6); } .ctrl .val{ font-family: var(--mono); color: var(--brand); text-align: right; } .widget-readout{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .readout{ display: flex; flex-direction: column; } .readout .k{ font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .5px; } .readout .v{ font-family: var(--mono); font-size: 20px; color: var(--ink); font-weight: 700; } .widget-btn{ font-size: 13px; padding: 8px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; } .widget-btn:hover{ border-color: var(--brand); } /* ============================================================ Toasts */ .toast-root{ position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: center; } .toast{ display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--brand); box-shadow: var(--shadow); font-weight: 600; animation: toastIn .4s ease both; } .toast.gold{ border-color: var(--gold); } @keyframes toastIn{ from{ opacity:0; transform: translateY(20px) scale(.9);} to{ opacity:1; transform:none;} } /* ============================================================ Responsive */ @media (max-width: 880px){ .hero{ grid-template-columns: 1fr; } .hero-title{ font-size: 38px; } .hero-art{ order: -1; } .player{ gap: 10px; } .xpbar{ width: 110px; } .hud-rank-title{ display: none; } } @media (max-width: 620px){ .node{ width: 100% !important; } .node-row{ justify-content: center !important; } .track::before{ left: 28px; } .node-row::after{ display: none; } .node-row.right .node{ flex-direction: row; text-align: left; } .ctrl{ grid-template-columns: 84px minmax(0,1fr) 52px; } /* Top bar: wrap the HUD onto its own full-width row so nothing is crammed. Row 1 = brand (left) + account avatar (right); row 2 = the XP/stats HUD. */ .topbar{ flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; } /* Reclaim screen space on phones: slide the (tall, two-row) bar out of view when scrolling down, back in when scrolling up. quest.js toggles .nav-up. */ .topbar.nav-up{ transform: translateY(-100%); } .brand{ font-size: 17px; } .brand-mark{ font-size: 20px; } .topbar .brand-mark img{ width: 23px; height: 23px; } .account{ margin-left: auto; } /* pin account to the right of the brand */ .acct-name, .acct-caret{ display: none; } /* avatar-only chip on phones */ .acct-chip{ gap: 0; padding: 3px; } .player{ order: 3; width: 100%; /* force the HUD onto the second row */ margin-left: 0; gap: 10px; justify-content: space-between; } .hud-rank{ flex: 0 0 auto; } .xpbar{ flex: 1 1 auto; width: auto; min-width: 0; } /* fill the row width */ .hud-stats{ flex: 0 0 auto; gap: 6px; } .hud-chip{ padding: 5px 8px; } } /* ============================================================ The Desk (final boss sim) */ .desk{ --sev: #38e1c8; max-width: 1000px; margin: 0 auto; } .desk[data-severity="calm"]{ --sev: #34d399; } .desk[data-severity="normal"]{ --sev: #38e1c8; } .desk[data-severity="elevated"]{ --sev: #ffcb6b; } .desk[data-severity="stress"]{ --sev: #ffb454; } .desk[data-severity="crisis"]{ --sev: #fb6f8a; } .desk[data-severity="catastrophe"]{ --sev: #ff3b5c; } .desk[data-severity="catastrophe"] .scenario-card{ animation: alarm 1.4s ease-in-out infinite; } @keyframes alarm{ 0%,100%{ box-shadow: 0 0 0 1px #5a2440, var(--shadow);} 50%{ box-shadow: 0 0 36px -6px #ff3b5c, var(--shadow);} } .desk-rules{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; text-align: left; } .rule{ display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); } .rule-ico{ font-size: 22px; } .rule b{ display: block; font-family: "Sora"; } .rule span{ font-size: 12.5px; color: var(--ink-dim); } .meters{ display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; } .meter{ background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; transition: box-shadow .3s, transform .2s; } .meter-top{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .meter-k{ font-size: 11.5px; color: var(--ink-soft); } .meter-v{ font-family: var(--mono); font-weight: 700; font-size: 18px; } .meter-bar{ height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; } .meter-fill{ height: 100%; width: 50%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1), background .4s; } .meter-fill.cap{ background: linear-gradient(90deg,#34d399,#38e1c8); } .meter-fill.rep{ background: linear-gradient(90deg,#6f8bff,#38e1c8); } .bump-up{ animation: bumpUp .5s ease; } .bump-down{ animation: bumpDown .5s ease; } @keyframes bumpUp{ 0%{ transform: scale(1);} 40%{ transform: scale(1.05); box-shadow:0 0 22px -6px var(--good);} 100%{ transform: scale(1);} } @keyframes bumpDown{ 0%{ transform: scale(1);} 20%{ transform: translateX(-4px);} 40%{ transform: translateX(4px); box-shadow:0 0 22px -6px var(--bad);} 60%{ transform: translateX(-3px);} 100%{ transform: translateX(0);} } .ticker{ display: flex; gap: 10px; overflow-x: auto; padding: 10px 12px; background: #05080f; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; font-family: var(--mono); } .tick{ display: flex; flex-direction: column; min-width: 96px; padding: 4px 10px; border-left: 2px solid var(--line); } .tick-k{ font-size: 10px; color: var(--ink-dim); letter-spacing: .5px; } .tick-v{ font-size: 15px; font-weight: 700; } .tick-c{ font-size: 11px; } .tick-up{ border-left-color: var(--good); } .tick-up .tick-c{ color: var(--good); } .tick-down{ border-left-color: var(--bad); } .tick-down .tick-c{ color: var(--bad); } .tick-flat{ border-left-color: var(--line); } .tick-flat .tick-c{ color: var(--ink-dim); } .desk-cols{ display: grid; grid-template-columns: 1fr 250px; gap: 16px; align-items: start; } .scn-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .scn-clock{ font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--sev); } .scn-sev{ font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--sev); color: var(--sev); } .scn-prog{ margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); } .scn-headline{ font-family: "Sora"; font-weight: 700; font-size: 19px; line-height: 1.35; margin-bottom: 10px; } .scn-brief{ color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin-bottom: 18px; } .scn-options{ display: flex; flex-direction: column; gap: 10px; } .scn-opt{ display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); border: 1.5px solid var(--line); color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1.45; transition: border-color .15s, transform .1s, background .15s; font-family: inherit; } .scn-opt:hover{ border-color: var(--sev); transform: translateX(3px); } .scn-opt-key{ flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; background: var(--bg-2); border: 1px solid var(--line); margin-top: 1px; } .consequence-card .cons-tag{ font-family: "Sora"; font-weight: 800; font-size: 16px; margin-bottom: 12px; } .tag-good{ color: var(--good); } .tag-ok{ color: var(--warn); } .tag-bad{ color: var(--bad); } .cons-deltas{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .delta{ font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .d-up{ background: rgba(52,211,153,.12); color: var(--good); border: 1px solid rgba(52,211,153,.35); } .d-down{ background: rgba(251,111,138,.12); color: var(--bad); border: 1px solid rgba(251,111,138,.35); } .cons-text{ color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin-bottom: 18px; } .consequence-card #consContinue{ width: 100%; } .newsfeed{ background: #05080f; border: 1px solid var(--line); border-radius: 14px; padding: 12px; position: sticky; top: 80px; max-height: 70vh; overflow-y: auto; } .newsfeed-title{ font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--ink-dim); margin-bottom: 10px; } .news-item{ padding: 8px 0; border-bottom: 1px dashed var(--line-soft); animation: fadeUp .4s ease both; } .news-time{ display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-dim); } .news-head{ font-size: 12.5px; line-height: 1.4; } .news-item.sev-crisis .news-head, .news-item.sev-catastrophe .news-head{ color: var(--bad); font-weight: 600; } .news-item.sev-stress .news-head{ color: var(--warn); } .desk-final{ display: flex; justify-content: center; gap: 28px; margin: 16px 0; } .desk-final div{ display: flex; flex-direction: column; } .desk-final span{ font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .5px; } .desk-final b{ font-family: var(--mono); font-size: 22px; } @media (max-width: 820px){ .meters{ grid-template-columns: 1fr 1fr; } .desk-cols{ grid-template-columns: 1fr; } .newsfeed{ position: static; max-height: none; } .desk-rules{ grid-template-columns: 1fr; } } .katex{ font-size: 1.04em; } .lesson-body .katex-display{ margin: 14px 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; } /* ============================================================ Finicade hub */ .hub-hero .hero-inner{ max-width: 760px; } .arcade{ max-width: 1040px; margin: 0 auto; padding: 4px 0 64px; } .arcade-section{ margin-top: 44px; } .arcade-h{ font-family: "Sora"; font-size: 22px; font-weight: 800; letter-spacing: -.3px; } .arcade-sub{ color: var(--ink-dim); font-size: 14px; margin-top: 4px; } .game-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; } .game-card{ display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); position: relative; text-decoration: none; color: var(--ink); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .game-card.is-live:hover{ transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow); } .game-card.is-soon{ opacity: .6; } .game-icon{ font-size: 34px; line-height: 1; } /* The body grows to fill the card so the last strip inside it (the progress block on live cards, the "Coming soon" badge on roadmap ones) bottom-aligns across a row — a 2-line and a 4-line blurb no longer leave their Levels/XP rows at different heights. Flex means margins don't collapse, so the child spacing below is set explicitly to match. */ .game-body{ display: flex; flex-direction: column; flex: 1 1 auto; } .game-tag{ font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--brand); font-weight: 700; } .game-tag-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Plain-language difficulty pill so newcomers can tell which cabinet fits. */ .game-level{ font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--line); } .lvl-beginner{ color: #4ade80; border-color: rgba(74,222,128,.45); background: rgba(74,222,128,.10); } .lvl-intermediate{ color: #fbbf24; border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.10); } .lvl-advanced{ color: #f87171; border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.10); } /* The one cabinet a total newcomer should walk to first. */ .game-card.is-start-here{ border-color: rgba(74,222,128,.55); } .start-here-ribbon{ position: absolute; top: 14px; right: -8px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: #052e16; background: linear-gradient(90deg, #4ade80, #86efac); padding: 4px 12px; border-radius: 8px 0 0 8px; box-shadow: 0 2px 10px rgba(74,222,128,.35); } .hero-browse{ color: var(--ink-soft); font-size: 14px; font-weight: 600; text-decoration: none; } .hero-browse:hover{ color: var(--brand); } .game-title{ font-family: "Sora"; font-size: 19px; font-weight: 700; margin: 3px 0 0; } .game-blurb{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; } .game-go{ margin-top: auto; align-self: flex-start; font-weight: 700; color: var(--brand); font-size: 14px; padding-top: 4px; } .game-badge{ margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; background: var(--panel); } /* Per-game progress + PlayStation-style trophies on the hub cards. */ .game-progress{ margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; } .gp-head{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .gp-pct{ font-family: var(--mono); font-weight: 800; font-size: 15px; color: var(--brand); } .gp-detail{ font-size: 11.5px; color: var(--ink-dim); } .gp-cta{ color: var(--ink-soft); font-weight: 600; } .gp-bar{ position: relative; height: 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; } .gp-bar span{ position: absolute; inset: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 0 10px rgba(56,225,200,.45); } .trophies{ display: flex; align-items: center; gap: 9px; margin-top: 1px; } .trophy-count{ margin-left: 4px; color: var(--ink-soft); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .trophy{ width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: 16px; } .trophy-icon{ line-height: 1; } .trophy.is-locked .trophy-icon{ filter: grayscale(1) brightness(.7); opacity: .5; } .t-bronze.is-earned{ border-color: #cd7f32; background: rgba(205,127,50,.14); box-shadow: 0 0 10px rgba(205,127,50,.45); } .t-silver.is-earned{ border-color: #cbd5e1; background: rgba(203,213,225,.14); box-shadow: 0 0 10px rgba(203,213,225,.40); } .t-gold.is-earned{ border-color: #ffd34d; background: rgba(255,211,77,.16); box-shadow: 0 0 12px rgba(255,211,77,.50); } .t-platinum.is-earned{ border-color: #7dd3fc; background: rgba(125,211,252,.16); box-shadow: 0 0 14px rgba(125,211,252,.55); } /* ---- Arcade trophy cabinet (/trophies) ---- */ .trophy-totals{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .trophy-total{ display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); } .trophy-total .tt-icon{ font-size: 24px; line-height: 1; } .trophy-total.is-locked .tt-icon{ filter: grayscale(1) brightness(.7); opacity: .5; } .tt-count{ font-size: 18px; font-weight: 700; } .tt-count .tt-of{ color: var(--ink-dim); font-weight: 600; font-size: 14px; margin-left: 2px; } .tt-label{ color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .t-bronze.trophy-total.is-earned{ border-color: #cd7f32; } .t-silver.trophy-total.is-earned{ border-color: #cbd5e1; } .t-gold.trophy-total.is-earned{ border-color: #ffd34d; } .t-platinum.trophy-total.is-earned{ border-color: #7dd3fc; } .trophy-game{ margin-top: 30px; } .trophy-game-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ink); } .trophy-game-head:hover .tg-title{ color: var(--brand); } .tg-icon{ font-size: 26px; } .tg-title{ font-size: 20px; font-weight: 700; } .tg-count{ margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600; } .badge-card .badge-tier{ color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; margin: 2px 0 6px; } .badge-card.t-bronze.earned{ border-color: #cd7f32; box-shadow: 0 0 30px -14px #cd7f32; } .badge-card.t-silver.earned{ border-color: #cbd5e1; box-shadow: 0 0 30px -14px #cbd5e1; } .badge-card.t-gold.earned{ border-color: #ffd34d; box-shadow: 0 0 30px -14px #ffd34d; } .badge-card.t-platinum.earned{ border-color: #7dd3fc; box-shadow: 0 0 30px -14px #7dd3fc; } @media (max-width: 620px){ .game-grid{ grid-template-columns: 1fr; } .arcade-h{ font-size: 19px; } } /* ---- Site footer (all pages) ---- */ .site-footer{ margin-top: 60px; border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, transparent, rgba(10,14,26,.6)); } .footer-inner{ max-width: var(--maxw); margin: 0 auto; padding: 34px 24px 44px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; } .footer-brand{ color: var(--ink-soft); font-size: 14px; max-width: 300px; line-height: 1.6; } .footer-brand b{ font-family: "Sora", sans-serif; } .footer-free{ color: var(--brand); } .footer-news{ flex: 1 1 300px; max-width: 420px; } .footer-news-label{ display: block; color: var(--ink-soft); font-size: 13px; margin-bottom: 8px; } .footer-news-row{ display: flex; gap: 8px; } .footer-news-row input{ flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; } .footer-news-row input:focus{ outline: none; border-color: var(--brand); } .footer-links{ display: flex; flex-direction: column; gap: 8px; } .footer-links a{ color: var(--ink-dim); font-size: 14px; } .footer-links a:hover{ color: var(--brand); } .footer-legal{ flex-basis: 100%; margin: 4px 0 0; color: var(--ink-dim); font-size: 12px; line-height: 1.6; max-width: 720px; } /* ---- Glossary (/glossary + /glossary/) ---- */ .glossary-page{ max-width: 860px; margin: 0 auto; padding: 26px 22px 60px; } .glossary-head h1{ font-family: "Sora", sans-serif; font-size: 34px; margin: 0 0 10px; } .glossary-sub{ color: var(--ink-soft); line-height: 1.65; max-width: 660px; } /* Directory: search + jump nav + per-category sections */ .glossary-search{ position: relative; margin: 22px 0 4px; max-width: 480px; } .glossary-search-icon{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: .7; pointer-events: none; } .glossary-search input{ width: 100%; padding: 12px 16px 12px 40px; font-size: 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); } .glossary-search input:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(56,225,200,.15); } .glossary-search input::placeholder{ color: var(--ink-dim); } .glossary-noresults{ margin: 24px 0; color: var(--ink-soft); font-size: 15px; } .glossary-jump{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; } .glossary-jump a{ font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--panel); } .glossary-jump a:hover{ color: var(--brand); border-color: var(--brand); } .glossary-cat{ margin-top: 34px; scroll-margin-top: 80px; } .glossary-cat-title{ font-family: "Sora", sans-serif; font-size: 21px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; } .glossary-cat-count{ font-size: 13px; color: var(--ink-dim); font-weight: 500; } .glossary-list{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; } .glossary-entry{ padding: 12px 2px; border-bottom: 1px solid var(--line-soft); } .glossary-entry dt{ font-family: "Sora", sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 4px; } .glossary-entry dt a{ color: var(--brand); } .glossary-entry dt a:hover{ text-decoration: underline; } .glossary-entry dd{ margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: 14px; } /* Term page (/glossary/) */ .breadcrumb{ font-size: 13px; color: var(--ink-dim); margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb a{ color: var(--ink-soft); } .breadcrumb a:hover{ color: var(--brand); } .term-head{ margin-bottom: 18px; } .term-kicker{ display: inline-block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-2); font-weight: 700; margin-bottom: 8px; } .glossary-term h1{ font-family: "Sora", sans-serif; font-size: 34px; margin: 0; } .term-def{ color: var(--ink); line-height: 1.75; font-size: 17px; } .term-def p{ margin: 0 0 14px; } .taught-in{ margin-top: 34px; } .taught-in h2{ font-family: "Sora", sans-serif; font-size: 20px; margin: 0 0 6px; } .taught-sub{ color: var(--ink-soft); line-height: 1.6; margin: 0 0 16px; max-width: 640px; } .taught-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .taught-card{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .15s, transform .15s; } .taught-card:hover{ border-color: var(--brand); transform: translateY(-2px); } .taught-icon{ font-size: 24px; line-height: 1; flex: none; } .taught-body{ display: flex; flex-direction: column; min-width: 0; flex: 1; } .taught-level{ font-size: 12px; color: var(--ink-dim); } .taught-title{ font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); } .taught-go{ font-size: 13px; color: var(--brand-2); font-weight: 700; flex: none; white-space: nowrap; } .related-terms{ margin-top: 34px; } .related-terms h2{ font-family: "Sora", sans-serif; font-size: 20px; margin: 0 0 12px; } .related-chips{ display: flex; flex-wrap: wrap; gap: 8px; } .related-chip{ font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--panel); } .related-chip:hover{ color: var(--brand); border-color: var(--brand); } .glossary-learn{ display: inline-block; color: var(--brand-2); font-size: 15px; white-space: nowrap; } .glossary-learn:hover{ color: var(--brand); } .glossary-cta{ margin-top: 40px; padding: 30px; text-align: center; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(56,225,200,.08), rgba(111,139,255,.08)); } .glossary-cta h2{ font-family: "Sora", sans-serif; font-size: 22px; margin: 0 0 8px; } .glossary-cta p{ color: var(--ink-soft); margin: 0 0 18px; } .glossary-term .back-link{ display: inline-block; margin-top: 28px; color: var(--ink-soft); font-size: 14px; } .glossary-term .back-link:hover{ color: var(--brand); } @media (max-width: 620px){ .glossary-list, .taught-grid{ grid-template-columns: 1fr; } } /* ---- Trophy sharing ---- */ .share-btn{ margin-top: 12px; } @media (max-width: 620px){ .footer-inner{ flex-direction: column; } } /* ============================================================ Community Q&A A discussion thread under every lesson card and (answered) quiz question, plus the notification bell in the top bar. */ .discuss{ margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 10px; } .discuss-toggle{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: none; border: none; color: var(--ink-dim); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 9px; } .discuss-toggle:hover{ color: var(--brand); background: var(--panel-2); } .discuss-count{ min-width: 20px; padding: 1px 7px; border-radius: 999px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-soft); } .discuss-count:empty{ display: none; } .discuss-panel{ margin-top: 10px; display: grid; gap: 12px; } .dempty{ color: var(--ink-dim); font-size: 13px; padding: 2px 8px; } .dthread{ border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; background: rgba(14, 20, 36, .55); } .dcomment{ display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; } .davatar{ flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #051018; background: linear-gradient(135deg, var(--brand-2), var(--brand)); } .dcomment.mine .davatar{ background: linear-gradient(135deg, var(--gold), var(--brand)); } .dmain{ min-width: 0; } .dhead{ display: flex; align-items: baseline; gap: 8px; } .dauthor{ font-size: 13px; font-weight: 700; color: var(--ink-soft); } .dtime{ font-size: 11px; color: var(--ink-dim); } .dbody{ margin: 3px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .dreplies{ margin: 4px 0 0 22px; padding-left: 12px; border-left: 2px solid var(--line-soft); display: grid; gap: 2px; } .dactions{ margin: 6px 0 0 36px; } .dreply-btn{ background: none; border: none; cursor: pointer; font-family: inherit; color: var(--brand-2); font-size: 12.5px; font-weight: 600; padding: 3px 6px; border-radius: 7px; } .dreply-btn:hover{ color: var(--brand); background: var(--panel-2); } .dsignin{ display: inline-block; color: var(--brand-2); font-size: 13px; font-weight: 600; padding: 4px 6px; } .dsignin:hover{ color: var(--brand); } .dcomposer{ display: grid; gap: 6px; } .dcomposer textarea{ width: 100%; resize: vertical; min-height: 44px; max-height: 220px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: inherit; font-size: 14px; } .dcomposer textarea:focus{ outline: none; border-color: var(--brand); } .dcomposer-foot{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .dcount{ font-size: 12px; color: var(--warn); } /* ---- Notification badge (on the account avatar) + history page ---- */ .acct-avatar{ position: relative; } .acct-badge{ position: absolute; bottom: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg); line-height: 1; } .acct-badge.hidden{ display: none; } .acct-notif-count{ margin-left: 6px; } .acct-notif-count:not(:empty){ display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; } .notifs-page{ max-width: 660px; margin: 0 auto; } .notifs-head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; } .notifs-head h1{ font-size: 26px; margin: 8px 0 18px; } .notifs-empty{ color: var(--ink-soft); line-height: 1.6; } .notifs-list{ display: grid; gap: 8px; } .notif-item{ display: block; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft); } .notif-item:hover{ background: var(--panel-2); border-color: var(--line); } .notif-item.unread{ background: rgba(56,225,200,.06); box-shadow: inset 3px 0 0 var(--brand); } .notif-title{ font-size: 14px; font-weight: 700; color: var(--ink); } .notif-snippet{ font-size: 13px; color: var(--ink-soft); margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif-where{ font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; } /* ---- Notification history: pager ---- */ .notifs-pager{ display: flex; justify-content: space-between; align-items: center; margin-top: 16px; } /* ---- Account settings page (/settings) ---- */ .settings-page{ max-width: 660px; margin: 0 auto; } .settings-page h1{ font-size: 26px; margin: 8px 0 6px; } .settings-intro{ color: var(--ink-dim); font-size: 13.5px; margin: 0 0 10px; } .setting-block{ margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); } .setting-block h2{ font-size: 16px; margin: 0 0 4px; } .setting-sub{ color: var(--ink-dim); font-size: 13px; margin: 0 0 12px; } .pref-group{ display: flex; gap: 18px; flex-wrap: wrap; } .pref-group label{ display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); cursor: pointer; } .pref-group label:hover{ color: var(--ink); } .pref-group input{ accent-color: var(--brand); } /* ---- Legal pages (/privacy, /terms) ---- */ .legal-page{ max-width: 760px; margin: 0 auto; } .legal-page h1{ font-size: 28px; margin: 8px 0 4px; } .legal-meta{ color: var(--ink-dim); font-size: 12.5px; margin: 0 0 18px; } .legal-intro{ color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0 0 8px; } .legal-block{ margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .legal-block h2{ font-size: 17px; margin: 0 0 8px; } .legal-block p{ color: var(--ink-soft); font-size: 14px; line-height: 1.65; margin: 0 0 10px; } .legal-block ul{ margin: 0 0 10px; padding-left: 20px; } .legal-block li{ color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 0 0 7px; } .legal-block a{ color: var(--brand); } .legal-block.legal-callout{ background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; margin-top: 26px; } .legal-callout h2{ margin-top: 0; } .legal-see-also{ margin-top: 26px; font-size: 14px; color: var(--ink-dim); } .legal-see-also a{ color: var(--brand); } /* ---- Branded 404 (web/errors.py -> templates/404.html) ---- */ .notfound{ max-width: 640px; margin: 6vh auto 0; text-align: center; padding: 0 16px; } .notfound-code{ font-size: clamp(64px, 16vw, 128px); font-weight: 800; line-height: 1; letter-spacing: 4px; color: var(--ink); font-family: 'Sora', sans-serif; } .notfound-coin{ display: inline-block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); animation: nf-bob 2.4s ease-in-out infinite; } @keyframes nf-bob{ 50%{ transform: translateY(-10px) rotate(-6deg); } } .notfound-title{ font-size: clamp(22px, 5vw, 30px); margin: 18px 0 8px; } .notfound-sub{ color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 460px; margin: 0 auto 26px; } .notfound-cta{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .notfound-games{ margin-top: 40px; } .notfound-games-label{ color: var(--ink-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; } .notfound-game-grid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .notfound-game{ display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-2); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; } .notfound-game:hover{ border-color: var(--brand); transform: translateY(-2px); } .notfound-game-icon{ font-size: 22px; line-height: 1; } .notfound-game-title{ font-size: 14px; font-weight: 600; } /* ----------------------------------------------------------- Weekly League */ .league-page{ max-width: 640px; margin: 0 auto; padding: 8px 0 40px; } .league-head{ display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .league-badge{ flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 34px; background: color-mix(in srgb, var(--div-color, var(--gold)) 22%, var(--panel)); border: 2px solid var(--div-color, var(--gold)); box-shadow: 0 0 22px -6px var(--div-color, var(--gold)); } .league-head h1{ margin: 0 0 4px; font-size: 26px; } .league-sub{ margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; } .league-legend{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .lg-tag{ font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); } .lg-tag-up{ color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); } .lg-tag-down{ color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); } .league-board{ list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); } .lg-row{ display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line-soft); } .lg-row:first-child{ border-top: 0; } .lg-rank{ flex: none; width: 26px; text-align: right; font-family: var(--mono); font-size: 13px; color: var(--ink-dim); } .lg-name{ flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-you{ font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; background: var(--brand); color: #04121a; margin-left: 6px; vertical-align: middle; } .lg-xp{ flex: none; font-family: var(--mono); font-size: 14px; font-weight: 700; } .lg-xp small{ color: var(--ink-dim); font-weight: 500; } .lg-row.is-promote{ background: color-mix(in srgb, var(--good) 9%, transparent); } .lg-row.is-promote .lg-rank{ color: var(--good); } .lg-row.is-relegate{ background: color-mix(in srgb, var(--bad) 8%, transparent); } .lg-row.is-relegate .lg-rank{ color: var(--bad); } .lg-row.is-me{ box-shadow: inset 3px 0 0 var(--brand); } .league-foot{ text-align: center; color: var(--ink-soft); margin-top: 14px; font-size: 14px; } .league-empty{ text-align: center; padding: 22px 0; } .league-result{ font-size: 17px; margin: 0 0 6px; } .league-result.up{ color: var(--good); } .league-result.down{ color: var(--bad); } .league-empty-cta{ color: var(--ink-soft); margin: 0 auto 18px; max-width: 380px; } /* Hub teaser strip */ .league-strip{ display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; } .league-strip:hover{ border-color: var(--gold); transform: translateY(-2px); } .ls-badge{ flex: none; width: 40px; height: 40px; border-radius: 11px; font-size: 22px; display: grid; place-items: center; background: color-mix(in srgb, var(--div-color, var(--gold)) 22%, var(--panel)); border: 1px solid var(--div-color, var(--gold)); } .ls-text{ flex: 1; display: flex; flex-direction: column; line-height: 1.3; } .ls-detail{ color: var(--ink-soft); font-size: 13px; } .ls-go{ flex: none; color: var(--gold); font-weight: 700; font-size: 14px; } /* Results-screen nudge */ .league-nudge{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin: 10px auto 4px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--ink); text-decoration: none; font-size: 14px; } .league-nudge:hover{ border-color: var(--gold); } .league-nudge-rank{ color: var(--ink-soft); } .league-nudge-go{ color: var(--gold); font-weight: 700; }