/* ============================================================ THEME / RESKIN LAYER Change everything about the look here. All colors, fonts, radii and the brand name come from these variables. ============================================================ */ :root { --brand-name: "SwiftKeys"; --bg: #0f1420; --bg-elevated: #181f2e; --surface: #1f2738; --surface-2: #283145; --border: #2f3a52; --text: #e8edf6; --text-dim: #9aa6bd; --accent: #4f8cff; --accent-soft: rgba(79, 140, 255, 0.16); --good: #3ddc97; --bad: #ff6b6b; --warn: #ffcf5c; --key-bg: #232c3f; --key-border: #36425d; --key-active: var(--accent); --key-next-glow: 0 0 0 2px var(--accent), 0 0 18px var(--accent-soft); --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* Light theme override — toggled via data-theme on */ :root[data-theme="light"] { --bg: #eef1f7; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f1f4fa; --border: #dce1ec; --text: #1a2233; --text-dim: #5b6679; --key-bg: #ffffff; --key-border: #d4dae6; --shadow: 0 10px 30px rgba(40, 60, 100, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } .app { max-width: 980px; margin: 0 auto; padding: 20px 18px 60px; } /* ---------- Header ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; } .brand .logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #8b5cff); color: #fff; font-size: 20px; box-shadow: var(--shadow); } .topbar-actions { display: flex; gap: 8px; } .btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 9px 14px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; transition: transform .06s ease, background .15s ease, border-color .15s ease; } .btn:hover { background: var(--surface-2); border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { filter: brightness(1.06); } .btn.ghost { background: transparent; } /* ---------- Layout ---------- */ .layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; } @media (max-width: 820px) { .layout { grid-template-columns: 1fr; } } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* ---------- Sidebar lessons ---------- */ .sidebar { padding: 14px; max-height: 70vh; overflow-y: auto; } .sidebar h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin: 4px 6px 12px; } .unit-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin: 14px 6px 6px; } .lesson-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; } .lesson-item:hover { background: var(--surface-2); } .lesson-item.active { background: var(--accent-soft); border-color: var(--accent); } .lesson-item .title { font-size: 14px; flex: 1; } .lesson-item .stars { font-size: 12px; letter-spacing: 1px; color: var(--warn); white-space: nowrap; } .lesson-item.done .title::after { content: " ✓"; color: var(--good); } /* ---------- Main / stage ---------- */ .stage { padding: 22px; } .stage-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .stage-head .lesson-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .stage-head .lesson-unit { color: var(--text-dim); font-size: 13px; } .metrics { display: flex; gap: 10px; margin: 16px 0 18px; } .metric { flex: 1; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 6px; } .metric .value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; } .metric .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-top: 2px; } .metric.wpm .value { color: var(--accent); } .metric.acc .value { color: var(--good); } /* ---------- Typing surface ---------- */ .typing-box { font-family: var(--font-mono); font-size: 24px; line-height: 1.9; letter-spacing: .5px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; position: relative; user-select: none; word-break: break-word; } .typing-box .char { transition: color .05s, background .05s; border-radius: 3px; } .typing-box .char.correct { color: var(--good); } .typing-box .char.incorrect { color: var(--bad); background: rgba(255, 107, 107, 0.14); } .typing-box .char.incorrect.space { background: rgba(255, 107, 107, 0.3); } .typing-box .char.pending { color: var(--text-dim); } .typing-box .char.current { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); } .hidden-input { position: absolute; opacity: 0; pointer-events: none; left: 0; top: 0; width: 1px; height: 1px; } .tap-hint { text-align: center; color: var(--text-dim); font-size: 13px; margin-top: 10px; } /* ---------- Keyboard ---------- */ .keyboard { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; align-items: center; } .kb-row { display: flex; gap: 8px; } .key { min-width: 42px; height: 46px; padding: 0 10px; background: var(--key-bg); border: 1px solid var(--key-border); border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 15px; color: var(--text-dim); text-transform: uppercase; } .key.space { min-width: 280px; } .key.next { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: var(--key-next-glow); } .key.pressed { background: var(--surface-2); color: var(--text); transform: translateY(1px); } .key.f-home, .key.j-home { border-bottom: 3px solid var(--accent); } /* Finger color hints on the next key */ .key.next[data-finger^="l"] { box-shadow: var(--key-next-glow); } /* ---------- Result modal ---------- */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; place-items: center; padding: 20px; z-index: 50; } .overlay.show { display: grid; } .result-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; width: 100%; max-width: 420px; text-align: center; } .result-card h3 { margin: 0 0 4px; font-size: 22px; } .result-stars { font-size: 34px; color: var(--warn); margin: 10px 0; letter-spacing: 4px; } .result-grid { display: flex; gap: 12px; margin: 18px 0; } .result-grid .metric { background: var(--surface-2); } .result-actions { display: flex; gap: 10px; justify-content: center; } footer { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 36px; } /* ============================================================ MODE TABS + ADVENTURE MODE ============================================================ */ .mode-tabs { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; } .mode-tab { border: none; background: transparent; color: var(--text-dim); font: inherit; font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; } .mode-tab:hover { color: var(--text); } .mode-tab.active { background: var(--accent); color: #fff; } /* Stage becomes a positioned container so the background sits behind. */ .stage { position: relative; overflow: hidden; } .stage-content { position: relative; z-index: 1; } .stage-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .4s ease; pointer-events: none; } /* When in adventure mode, reveal background + darken for legibility. */ .stage.adventure .stage-bg { opacity: 1; } .stage.adventure .stage-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,20,.45) 0%, rgba(8,12,20,.62) 55%, rgba(8,12,20,.82) 100%); } .stage.adventure .lesson-title, .stage.adventure .lesson-unit { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); } .stage.adventure .metric { background: rgba(20,26,40,.7); border-color: rgba(255,255,255,.12); } .stage.adventure .typing-box { background: rgba(10,14,22,.78); border-color: rgba(255,255,255,.18); backdrop-filter: blur(2px); } .stage.adventure .key { background: rgba(20,26,40,.72); color: #d6deec; } .stage.adventure .tap-hint { color: #e8edf6; text-shadow: 0 1px 4px rgba(0,0,0,.6); } /* Adventure runs over a darkened photo, so foreground colors are locked to legible light values in BOTH light and dark themes (the theme variables would otherwise flip dark and become unreadable here). */ .stage.adventure .typing-box .char.pending { color: #aeb8cc; } .stage.adventure .typing-box .char.correct { color: #56e39b; } .stage.adventure .typing-box .char.incorrect { color: #ff8585; background: rgba(255,107,107,.22); } .stage.adventure .typing-box .char.current { color: #fff; } .stage.adventure .metric .value { color: #fff; } .stage.adventure .metric.wpm .value { color: #8ab4ff; } .stage.adventure .metric.acc .value { color: #56e39b; } .stage.adventure .metric .label { color: rgba(255,255,255,.78); } .stage.adventure .key.pressed { color: #fff; } /* Adventure story panel */ .adv-panel { display: none; margin: 14px 0 4px; } .stage.adventure .adv-panel { display: block; } .adv-enemy { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .adv-enemy-name { font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); } .adv-stage-count { font-size: 12px; font-weight: 700; color: #fff; opacity: .85; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .adv-healthbar { height: 16px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2); } .adv-health-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff6b6b, #ffcf5c); transition: width .5s cubic-bezier(.4,1.3,.5,1); } .adv-say { margin-top: 10px; font-size: 15px; font-weight: 600; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); min-height: 22px; } .stage.hit .stage-content { animation: shake .3s; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* Adventure list items in sidebar */ .adv-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; } .adv-item:hover { background: var(--surface-2); } .adv-item.active { background: var(--accent-soft); border-color: var(--accent); } .adv-item .adv-emoji { font-size: 22px; } .adv-item .adv-name { font-size: 14px; font-weight: 600; flex: 1; } .adv-item.done .adv-name::after { content: " ⭐"; } .result-card.win { border-color: var(--good); } .result-win-emoji { font-size: 46px; margin-bottom: 6px; } /* ---------- Animated enemy avatar ---------- */ .adv-avatar-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 6px; height: 110px; } .adv-avatar { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); animation: bob 2.2s ease-in-out infinite; transform-origin: center bottom; will-change: transform; } /* Custom drawn sprite shown as a circular boss portrait. */ .adv-avatar.has-sprite { width: 100px; height: 100px; font-size: 0; border-radius: 50%; background-size: cover; background-position: center top; border: 3px solid var(--accent); box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 8px 20px rgba(0,0,0,.55); } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } } /* Hit reaction: jolt back + flash red. */ .adv-avatar.hit { animation: enemyHit .42s ease; } @keyframes enemyHit { 0% { transform: translateY(0) scale(1); filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); } 20% { transform: translateY(-4px) scale(1.25) rotate(-12deg); filter: drop-shadow(0 0 14px #ff6b6b) brightness(1.6) saturate(0.3); } 45% { transform: translateY(2px) scale(0.9) rotate(10deg); } 100% { transform: translateY(0) scale(1); } } /* Win celebration: happy spin + bounce. */ .adv-avatar.win { animation: enemyWin 1s ease infinite; } @keyframes enemyWin { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-16px) rotate(-15deg) scale(1.15); } 50% { transform: translateY(0) rotate(0) scale(1); } 75% { transform: translateY(-16px) rotate(15deg) scale(1.15); } } /* Floating sparkle particles on hit. */ .adv-fx { position: absolute; inset: 0; pointer-events: none; } .adv-fx .spark { position: absolute; left: 50%; top: 40%; font-size: 20px; animation: spark .6s ease-out forwards; } @keyframes spark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } } .btn.muted { opacity: .55; } /* ---------- Adventure stars in sidebar ---------- */ .adv-item .adv-stars { font-size: 12px; letter-spacing: 1px; color: var(--warn); white-space: nowrap; } .adv-item.done .adv-name::after { content: ""; } /* ---------- World map quest select ---------- */ .quest-map { display: none; } .stage.map-view .quest-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } /* In map view, hide the battle UI. */ .stage.map-view .adv-panel, .stage.map-view .metrics, .stage.map-view .typing-box, .stage.map-view .tap-hint, .stage.map-view .keyboard, .stage.map-view #restartBtn, .stage.map-view #mapBtn { display: none; } .quest-card { position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; border: 2px solid rgba(255,255,255,.18); aspect-ratio: 16 / 11; background-size: cover; background-position: center; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; } .quest-card:hover { transform: translateY(-3px) scale(1.02); border-color: #fff; } .quest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.78) 100%); } .quest-card .qc-body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 10px 12px; color: #fff; } .quest-card .qc-emoji { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); } .quest-card .qc-title { font-size: 14px; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,.8); margin-top: 2px; } .quest-card .qc-stars { font-size: 13px; letter-spacing: 2px; color: var(--warn); text-shadow: 0 1px 3px rgba(0,0,0,.7); } .quest-card .qc-locked { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 30px; background: rgba(8,12,20,.62); color: #fff; } .quest-card.cleared { border-color: var(--good); } .map-title { color: var(--text); } .stage.adventure.map-view .stage-bg { opacity: 0; } .stage.adventure.map-view .map-title { color: var(--text); } .result-stars-row { font-size: 30px; color: var(--warn); letter-spacing: 4px; margin: 8px 0; } /* Locked quests */ .quest-card.locked { cursor: not-allowed; filter: saturate(.5); } .quest-card.locked:hover { transform: none; border-color: rgba(255,255,255,.18); } .adv-item.locked { opacity: .5; cursor: not-allowed; } .adv-item.locked .adv-name::after { content: " 🔒"; } /* Confetti */ .confetti-piece { position: fixed; top: -12px; z-index: 200; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; animation: confettiFall var(--dur) linear forwards; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(108vh) rotate(720deg); opacity: .9; } }