/* Layout: one calm column on a clean graphite or porcelain ground. Liquid lives inside the things you touch (buttons, selections, your orb); the typing stage owns the middle of the screen. */ :root { --bg: #f7f8fa; --bg2: #ffffff; --sub: #8e94a4; --sub2: #e3e6ec; --text: #16181d; --main: #ff6a3d; --main2: #ff3d7f; --err: #e5484d; --err2: #b4262b; --on-main: #ffffff; --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; --font-type: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --type-size: 3.1rem; --r-lg: 26px; --r-md: 18px; --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.45, .5, 1); --gold: #e0a100; --silver: #8d99ae; --bronze: #c07a3d; --rim: rgba(255, 255, 255, .8); --shade: rgba(20, 24, 40, .1); --line: rgba(17, 19, 24, .08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c0d11; --bg2: #1a1c23; --sub: #5a5f70; --sub2: #262833; --text: #eef0f5; --main: #ff8a5c; --main2: #ff5d8f; --err: #ff5d73; --err2: #a3364a; --on-main: #1a0f0a; --rim: rgba(255, 255, 255, .1); --shade: rgba(0, 0, 0, .55); --line: rgba(255, 255, 255, .07); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0c0d11; --bg2: #1a1c23; --sub: #5a5f70; --sub2: #262833; --text: #eef0f5; --main: #ff8a5c; --main2: #ff5d8f; --err: #ff5d73; --err2: #a3364a; --on-main: #1a0f0a; --rim: rgba(255, 255, 255, .1); --shade: rgba(0, 0, 0, .55); --line: rgba(255, 255, 255, .07); color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; letter-spacing: -.005em; transition: background-color .5s ease, color .5s ease; -webkit-font-smoothing: antialiased; } /* Nothing may make the page scroll sideways. `clip` (unlike `hidden`) can't be scrolled programmatically by focus or caret moves. */ html { overflow-x: hidden; } /* On the root, `clip` is treated as `hidden` (still scrollable by focus and caret moves). Clip on instead, and give its own overflow so body's doesn't propagate to the viewport. */ @supports (overflow: clip) { html { overflow: auto; } body { overflow-x: clip; } } [hidden] { display: none !important; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic { width: 20px; height: 20px; stroke-width: 1.7; } :focus-visible { outline: 2px solid var(--main); outline-offset: 3px; border-radius: 10px; } kbd { font-family: var(--font-type); font-size: .78em; color: var(--text); padding: .12em .5em; border-radius: 7px; background: var(--bg2); box-shadow: inset 0 -2px 0 var(--sub2), inset 0 0 0 1px var(--line); } ::selection { background: color-mix(in oklab, var(--main) 35%, transparent); } #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; } /* ---------- material: glass surfaces ---------- */ :where(.glass) { position: relative; } .glass { background: color-mix(in oklab, var(--bg2) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 0 var(--rim), inset 0 0 0 1px var(--line), 0 14px 36px -24px var(--shade); } .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, -60%), color-mix(in oklab, var(--main) 10%, transparent), transparent 65%); opacity: 0; transition: opacity .35s ease; } .glass:hover::before { opacity: 1; } /* ---------- material: liquid fill inside the controls you press ---------- */ .fluid, .btn.primary, .seg button.on { position: relative; isolation: isolate; overflow: hidden; } .fluid::after, .btn.primary::after, .seg button.on::after { content: ""; position: absolute; inset: -45%; z-index: -1; pointer-events: none; background: radial-gradient(26% 32% at 30% 38%, rgba(255, 255, 255, .6), transparent 70%), radial-gradient(30% 36% at 72% 62%, color-mix(in oklab, var(--main2) 75%, transparent), transparent 72%), radial-gradient(24% 28% at 55% 22%, rgba(255, 255, 255, .35), transparent 70%); mix-blend-mode: soft-light; opacity: .85; animation: fluid 10s ease-in-out infinite alternate; transition: opacity .3s; } .fluid:hover::after, .btn.primary:hover::after { animation-duration: 3.2s; opacity: 1; } @keyframes fluid { 0% { transform: translate(-7%, 5%) rotate(0deg) scale(1); } 50% { transform: translate(6%, -6%) rotate(170deg) scale(1.1); } 100% { transform: translate(-4%, 7%) rotate(330deg) scale(.95); } } #app { position: relative; z-index: 1; min-height: 100%; max-width: 1360px; margin: 0 auto; padding-inline: clamp(16px, 4.5vw, 72px); padding-block: 20px 18px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 16px; } /* ---------- chrome & focus mode ---------- */ .chrome { transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); } body.typing .chrome { opacity: 0; pointer-events: none; filter: blur(6px); } body.typing #top.chrome { transform: translateY(-8px); } body.typing { cursor: none; } /* ---------- header ---------- */ #top { display: flex; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; flex: none; } .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--main); transition: color .5s; } .brand-mark svg { width: 30px; height: 30px; overflow: visible; } .brand-mark .bm-tile { fill: #0f1014; } .brand-mark .bm-bar, .brand-mark .bm-head { fill: none; stroke: #ff633b; stroke-width: 3; stroke-linecap: round; } .brand-mark .bm-head, .brand-mark .bm-bar { transform-box: fill-box; transform-origin: center; transition: transform .26s var(--spring); } .brand:hover .bm-head { transform: scale(1.1); } .brand:hover .bm-bar { transform: scaleY(1.14); } .brand-mark .bm-bar { animation: caretBlink 1.15s steps(1) infinite; } @keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } } body.running .brand-mark .bm-bar { animation: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .brand-mark .bm-bar { animation: none; } } .brand-name { font-family: var(--font-display); font-weight: 650; font-size: 1.5rem; letter-spacing: -.045em; line-height: 1; } .brand-name span { color: var(--main); transition: color .5s; } .nav { display: flex; gap: 2px; margin-inline: auto; padding: 5px; border-radius: 999px; position: relative; min-width: 0; } .nav-btn { position: relative; z-index: 1; height: 42px; min-width: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; color: var(--sub); font-size: .92rem; font-weight: 550; transition: color .25s ease, transform .35s var(--spring); } .nav-btn:hover { color: var(--text); } .nav-btn:active { transform: scale(.92); } .nav-btn.active { color: var(--text); } .nav-btn.active .ic { color: var(--main); } .nav-label { display: none; } .nav-btn.active .nav-label { display: inline; } .nav-btn .badge { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 3px color-mix(in oklab, var(--err) 25%, transparent); } .liquid-ind { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 999px; pointer-events: none; background: color-mix(in oklab, var(--main) 14%, var(--bg2)); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px color-mix(in oklab, var(--main) 22%, transparent), 0 8px 18px -10px color-mix(in oklab, var(--main) 55%, transparent); } .liquid-ind::after { opacity: .55; } .top-right { display: flex; align-items: center; gap: 10px; flex: none; } .round-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--sub); transition: color .2s, transform .35s var(--spring); } .round-btn:hover { color: var(--text); } .round-btn:active { transform: scale(.9); } .profile { position: relative; width: 46px; height: 46px; display: grid; place-items: center; transition: transform .35s var(--spring); } .profile:hover { transform: scale(1.05); } .profile:active { transform: scale(.92); } .profile .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .ring-bg { stroke: var(--line); stroke-width: 3; } .ring-fg { stroke: var(--main); stroke-width: 3; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; transition: stroke-dashoffset 1s var(--ease), stroke .5s; } .profile .lvl { position: absolute; right: -4px; bottom: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--text); color: var(--bg); box-shadow: 0 0 0 2px var(--bg); } /* the orb: a generated avatar unique to each name */ .face { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; isolation: isolate; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 12px -4px var(--shade); } .face .orb, .av .orb, .pod .orb { position: absolute; inset: 0; width: 100%; height: 100%; } .face .orb { animation: orbSpin 16s linear infinite; } .face::after { content: ""; position: absolute; inset: -30%; z-index: 1; background: radial-gradient(30% 30% at 35% 30%, rgba(255,255,255,.45), transparent 70%); mix-blend-mode: soft-light; animation: fluid 8s ease-in-out infinite alternate; pointer-events: none; } .face b { position: relative; z-index: 2; color: #fff; font-weight: 700; font-size: .95rem; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .face.big { width: 60px; height: 60px; } .face.big b { font-size: 1.5rem; } @keyframes orbSpin { to { transform: rotate(360deg); } } /* ---------- welcome & stage head ---------- */ #view-type { display: flex; flex-direction: column; justify-content: center; gap: 26px; min-height: 0; padding-bottom: 4vh; } .welcome { align-self: center; display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 999px; max-width: 100%; min-width: 0; animation: rise .6s var(--ease); transition: opacity .4s var(--ease), transform .4s var(--ease), filter .4s var(--ease); } body.running .welcome { opacity: 0; transform: translateY(-8px); filter: blur(4px); pointer-events: none; } .welcome > .ic { color: var(--main); } .welcome-text { font-size: .92rem; color: var(--sub); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .welcome-text b { color: var(--text); font-weight: 600; } .ws { display: none; } .stage-head { display: grid; align-items: end; min-height: 4.2rem; } .stage-head > * { grid-area: 1 / 1; } .hello { display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: opacity .35s var(--ease), transform .45s var(--ease); } body.running .hello { opacity: 0; transform: translateY(-10px); pointer-events: none; } .hello-left { display: flex; flex-direction: column; min-width: 0; } .hello-line { font-size: 1.3rem; font-weight: 550; letter-spacing: -.025em; } .hello-sub { font-size: .94rem; color: var(--sub); } .hello-sub b { color: var(--text); font-weight: 600; } .daily-ring { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; transition: transform .35s var(--spring); } .daily-ring:hover { transform: scale(1.06); } .daily-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .daily-ring .ring-bg, .daily-ring .ring-fg { stroke-width: 4; } .daily-ring .ring-fg { stroke-dasharray: 113.1; stroke-dashoffset: 113.1; } .daily-ring.done .ring-fg { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--main) 60%, transparent)); } #dailyText { font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; } /* ---------- config pill: one line, scrolls sideways on narrow screens ---------- */ .config { align-self: center; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; border-radius: 999px; padding: 5px; font-size: .9rem; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .config::-webkit-scrollbar { display: none; } .cfg-group { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; border-radius: 999px; flex: none; } .cfg-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; } .cfg-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; color: var(--sub); transition: color .25s ease, transform .35s var(--spring); white-space: nowrap; } .cfg-btn .ic { width: 17px; height: 17px; } .cfg-btn:hover { color: var(--text); } .cfg-btn:active { transform: scale(.93); } .cfg-btn.on { color: var(--text); } .cfg-btn.on .ic { color: var(--main); } .cfg-group:not([data-liquid]) .cfg-btn.on { color: var(--main); } .cfg-label { color: var(--text); font-weight: 600; padding: 0 10px; white-space: nowrap; } /* ---------- test area ---------- */ #testArea { display: flex; flex-direction: column; gap: 14px; position: relative; } #liveBar { display: flex; align-items: baseline; gap: 28px; font-variant-numeric: tabular-nums; pointer-events: none; } #liveBar > span { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .5s var(--spring); } body.running #liveBar > span { opacity: 1; transform: none; } body.running #liveBar > span:nth-child(2) { transition-delay: .04s; } body.running #liveBar > span:nth-child(3) { transition-delay: .08s; } body.running #liveBar > span:nth-child(4) { transition-delay: .12s; } .live-main { font-family: var(--font-display); font-weight: 250; font-size: 4.2rem; color: var(--main); line-height: .9; letter-spacing: -.05em; display: inline-block; transform-origin: left bottom; } .live-main.beat { animation: beat .22s var(--ease); } @keyframes beat { 35% { transform: scale(1.1); } } .live-sub { display: inline-flex; align-items: baseline; gap: 5px; color: var(--sub); font-size: 1.05rem; } .live-sub b { font-family: var(--font-display); color: var(--text); font-weight: 400; font-size: 2rem; letter-spacing: -.03em; } /* flow capsule: fills with every correct key in a row */ .flow { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; color: var(--sub); font-size: .9rem; align-self: center; } .flow .ic { width: 18px; height: 18px; transition: color .3s, transform .4s var(--spring); } .flow-cap { position: relative; width: 110px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); box-shadow: inset 0 1px 2px var(--shade); } .flow-cap i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); border-radius: 6px; background: linear-gradient(90deg, color-mix(in oklab, var(--main) 60%, transparent), var(--main)); transition: transform .35s var(--spring); } .flow-cap i::after { content: ""; position: absolute; inset: 0; background: radial-gradient(10px 8px at 20% 30%, rgba(255,255,255,.55), transparent), radial-gradient(12px 8px at 70% 60%, rgba(255,255,255,.35), transparent); background-size: 40px 12px; animation: flowShine 1.4s linear infinite; } @keyframes flowShine { to { background-position: 40px 0, -40px 0; } } .flow em { font-style: normal; min-width: 3.4em; font-variant-numeric: tabular-nums; } body.in-flow .flow { color: var(--main); } body.in-flow .flow .ic { color: var(--main); transform: scale(1.15); } body.in-flow .flow-cap { box-shadow: 0 0 16px -2px color-mix(in oklab, var(--main) 70%, transparent); } body.in-flow .caret:not(.pace) { box-shadow: 0 0 26px 2px color-mix(in oklab, var(--main) 70%, transparent); } #liveProgress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .35s ease; } body.running #liveProgress { opacity: 1; } #liveProgress i { display: block; height: 100%; width: 100%; border-radius: 3px; transform-origin: left; transform: scaleX(0); background: var(--main); transition: transform .25s linear; } #modeNote { font-size: .98rem; color: var(--sub); max-width: 72ch; } #modeNote:empty { display: none; } #modeNote b { color: var(--main); font-weight: 600; letter-spacing: .06em; } #wordsWrap { position: relative; font-family: var(--font-type); font-size: calc(var(--type-size) * var(--type-scale, 1)); line-height: 1.55; height: 4.65em; overflow: hidden; cursor: text; letter-spacing: -.01em; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 1.7em), rgba(0,0,0,.4) 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 1.7em), rgba(0,0,0,.4) 100%); } #hiddenInput, .stage-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; pointer-events: none; } #words { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; user-select: none; -webkit-user-select: none; transition: opacity .35s ease; } #words.shift { animation: lineShift .34s var(--ease); } @keyframes lineShift { from { transform: translateY(var(--shift, 1.55em)); } to { transform: none; } } #words.enter { animation: wordsIn .55s var(--ease); } @keyframes wordsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } #wordsWrap.tape { height: 2.1em; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); } #wordsWrap.tape #words { flex-wrap: nowrap; padding-top: .28em; transform: translateX(var(--tx, 0px)); transition: transform .3s var(--ease), opacity .35s ease; } /* words: typed ones recede, the current one is brightest, upcoming ones wait in soft grey */ .word { position: relative; z-index: 1; margin-right: .6em; height: 1.55em; white-space: nowrap; flex: none; transition: opacity .45s var(--ease); } .word.done { opacity: .58; } .word.done.err { opacity: .75; } .word > span { color: var(--sub); display: inline-block; transition: color .12s linear; } .word.cur > span { color: color-mix(in oklab, var(--sub) 60%, var(--text)); } .word > span.c, .word.cur > span.c { color: var(--text); } .word > span.c.pop { animation: ink .34s var(--ease); } @keyframes ink { 0% { color: var(--main); transform: translateY(.12em) scale(.9); } 45% { color: var(--main); transform: translateY(-.02em) scale(1.04); } 100% { transform: none; } } .word > span.x, .word.cur > span.x { color: var(--err); } .word > span.x.pop { animation: jelly .4s var(--ease); } @keyframes jelly { 20% { transform: scale(1.18, .82); } 40% { transform: scale(.88, 1.12) translateX(-.04em); } 60% { transform: scale(1.06, .95) translateX(.04em); } 100% { transform: none; } } .word > span.e { color: var(--err2); opacity: .85; } .word.err::after { content: ""; position: absolute; left: 0; right: 0; bottom: .16em; height: 2px; border-radius: 2px; background: var(--err); opacity: .75; } .word.settle { animation: settle .32s var(--spring); } @keyframes settle { 30% { transform: scale(1.03, .94); } } body.blind #words .word > span.x { color: var(--text); } body.blind #words .word > span.e { display: none; } body.blind #words .word.err::after { display: none; } #wordHL { position: absolute; z-index: 0; left: 0; top: 0; border-radius: .32em; pointer-events: none; background: color-mix(in oklab, var(--main) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 16%, transparent); opacity: 0; transition: opacity .3s ease; } #wordHL.on { opacity: 1; } .caret { position: absolute; left: 0; top: 0; width: .09em; height: 1.1em; border-radius: 99px; background: var(--main); will-change: transform; z-index: 2; pointer-events: none; box-shadow: 0 0 16px color-mix(in oklab, var(--main) 55%, transparent); transition: opacity .2s, box-shadow .4s; } .caret.blink { animation: blink 1.1s ease-in-out infinite; } @keyframes blink { 0%, 45% { opacity: 1; } 60%, 85% { opacity: .15; } 100% { opacity: 1; } } .caret.block { background: color-mix(in oklab, var(--main) 38%, transparent); border-radius: .18em; box-shadow: none; } .caret.box { background: transparent; box-shadow: inset 0 0 0 2px var(--main); border-radius: .18em; } .caret.pace { background: var(--sub); opacity: .5; z-index: 1; box-shadow: none; } .caret.pace.box { background: transparent; box-shadow: inset 0 0 0 2px var(--sub); } .caret.bump { animation: caretBump .22s ease; } @keyframes caretBump { 30% { margin-left: -.07em; } 60% { margin-left: .07em; } } .ripple { position: absolute; z-index: 1; width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border-radius: 50%; pointer-events: none; border: 2px solid var(--main); opacity: .5; animation: ripple .55s var(--ease) forwards; } @keyframes ripple { to { transform: scale(2.6); opacity: 0; } } #aura { position: absolute; inset: -40% -10%; background: radial-gradient(55% 50% at 50% 50%, color-mix(in oklab, var(--main) 30%, transparent), transparent 70%); opacity: 0; transition: opacity .8s ease; pointer-events: none; filter: blur(30px); } #countdown { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; font-family: var(--font-display); font-weight: 250; font-size: 2.6em; color: var(--main); background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #countdown span { animation: cdPop .9s var(--spring); } @keyframes cdPop { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { opacity: .25; } } /* unfocused: words stay crisp; a small pill says what to do */ #focusHint { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; padding-bottom: .15em; font-family: var(--font-ui); font-size: .95rem; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--spring); transform: translateY(8px); } #focusHint span { padding: 10px 18px; border-radius: 999px; } #wordsWrap.blurred #words { opacity: .55; } #wordsWrap.blurred #focusHint { opacity: 1; transform: none; } #wordsWrap.blurred .caret, #wordsWrap.blurred #wordHL { opacity: 0; } .test-actions { display: flex; justify-content: center; } .icon-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--sub); transition: color .2s, transform .5s var(--spring); } .icon-btn .ic { width: 22px; height: 22px; } .icon-btn:hover { color: var(--text); transform: rotate(-40deg); } .icon-btn:active { transform: rotate(-140deg) scale(.9); } .icon-btn.small { width: 36px; height: 36px; } .icon-btn.small:hover { transform: none; } .icon-btn.small .ic { width: 18px; height: 18px; } /* ---------- keyboard ---------- */ .kb { display: flex; flex-direction: column; align-items: center; gap: 6px; user-select: none; } .kb-row { display: flex; gap: 6px; } .key { --heat: 0%; --finger: transparent; width: 2.8rem; height: 2.6rem; border-radius: 11px; display: grid; place-items: center; position: relative; font-family: var(--font-type); font-size: .88rem; color: var(--sub); background: color-mix(in oklab, var(--finger) 24%, var(--bg2)); box-shadow: inset 0 1px 0 var(--rim), inset 0 -2px 0 var(--line), inset 0 0 0 1px var(--line); transition: transform .12s var(--spring), background-color .2s, color .2s; } .key.w15 { width: 4rem; } .key.w18 { width: 4.8rem; } .key.w22 { width: 5.8rem; } .key.space { width: 17.5rem; } .key.home::after { content: ""; position: absolute; bottom: 6px; width: 10px; height: 2px; border-radius: 1px; background: var(--sub); } .key.down { transform: translateY(2px) scale(.96); background: color-mix(in oklab, var(--main) 30%, var(--bg2)); color: var(--text); } .key.bad { background: color-mix(in oklab, var(--err) 40%, var(--bg2)); color: var(--text); } .key.next { box-shadow: inset 0 0 0 2px var(--main), 0 0 18px -4px var(--main); color: var(--text); transform: translateY(-2px); } #keyboard { margin-top: 10px; } .kb.mini .key { width: 1.95rem; height: 1.95rem; font-size: .74rem; border-radius: 8px; background: color-mix(in oklab, var(--err) var(--heat), var(--bg2)); } .kb.mini .key.space { width: 10rem; } .kb.mini .key.hot { color: var(--text); } .kb.mini { overflow-x: auto; gap: 4px; } .kb.mini .kb-row { gap: 4px; } #fingerLegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .82rem; color: var(--sub); } #fingerLegend span { display: inline-flex; align-items: center; gap: 6px; } #fingerLegend i { width: 10px; height: 10px; border-radius: 3px; } /* ---------- race ---------- */ #racePanel { display: flex; flex-direction: column; gap: 14px; animation: rise .5s var(--ease); } .race-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .race-status { font-size: 1.05rem; color: var(--sub); min-width: 0; } .race-status b { color: var(--text); font-weight: 600; } .race-actions { display: flex; gap: 8px; flex-wrap: wrap; } .lanes { display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-lg); padding: 14px 20px; } .lane { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 4.4rem; align-items: center; gap: 16px; height: 40px; } .lane .who { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .95rem; } .lane .who .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lane .who img, .lane .who .av { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: none; } .lane .tag { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); border: 1px solid var(--sub2); border-radius: 5px; padding: 0 5px; flex: none; } .lane.me .who { color: var(--text); font-weight: 650; } .track { position: relative; height: 100%; } .track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--line); } .track::after { content: ""; position: absolute; right: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--text) 0 3px, transparent 3px 6px); opacity: .45; } .runner { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; border-radius: 50%; transform: translate(calc(var(--p, 0) * (var(--tw, 300px) - 26px)), -50%); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.2), 0 6px 14px -4px var(--shade); } .lane.human .runner { transition: transform .25s linear; } .lane .spd { text-align: right; font-size: .9rem; color: var(--sub); font-variant-numeric: tabular-nums; } .lane .place { font-weight: 700; color: var(--text); } .medal-1 { color: var(--gold) !important; } .medal-2 { color: var(--silver) !important; } .medal-3 { color: var(--bronze) !important; } /* ---------- results ---------- */ #results { display: flex; flex-direction: column; gap: 22px; animation: wordsIn .6s var(--ease); } .res-top { display: grid; grid-template-columns: minmax(220px, auto) 1fr; gap: 28px; align-items: stretch; } .res-big { display: flex; flex-direction: column; gap: 4px; position: relative; justify-content: center; } .big-stat { display: flex; flex-direction: column; } .big-stat .label { font-size: .95rem; color: var(--sub); } .big-stat .value { font-family: var(--font-display); font-weight: 200; font-size: 8.5rem; line-height: .9; color: var(--main); font-variant-numeric: tabular-nums; letter-spacing: -.06em; } .big-stat.small .value { font-size: 3.6rem; color: var(--text); font-weight: 300; letter-spacing: -.04em; } #resBadge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; background: color-mix(in oklab, var(--main) 14%, transparent); color: var(--main); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 28%, transparent); animation: badgeIn .7s var(--spring); } #resBadge svg { width: 17px; height: 17px; fill: currentColor; stroke: none; } #resBadge.fail { background: color-mix(in oklab, var(--err) 14%, transparent); color: var(--err); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--err) 28%, transparent); } #resBadge .stars { display: inline-flex; gap: 2px; } #resBadge .stars svg.off { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .45; } @keyframes badgeIn { from { transform: scale(.5); opacity: 0; } } .res-chart { min-width: 0; display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-lg); padding: 18px 20px 12px; } .chart-legend { display: flex; gap: 18px; font-size: .82rem; color: var(--sub); } .lg { display: inline-flex; align-items: center; gap: 7px; } .lg::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: currentColor; } .lg-wpm::before { background: var(--main); } .lg-raw::before { background: var(--sub); } .lg-err::before { width: 8px; height: 8px; border-radius: 50%; background: var(--err); } .chart-box { position: relative; height: 240px; } .chart-box canvas { width: 100%; height: 100%; display: block; } .tip { position: absolute; top: 0; pointer-events: none; border-radius: 12px; padding: 8px 12px; font-size: .84rem; line-height: 1.45; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 3; } .tip b { font-weight: 650; } .tip .t-h { color: var(--sub); font-size: .76rem; } .res-row { display: flex; flex-wrap: wrap; gap: 16px 44px; padding: 18px 24px; border-radius: var(--r-lg); } .res-cell { display: flex; flex-direction: column; min-width: 0; } .res-cell .label { font-size: .84rem; color: var(--sub); } .res-cell .value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.03em; } .res-cell .value small { font-size: 1rem; color: var(--sub); font-weight: 400; letter-spacing: 0; } .res-cell .value.accent { color: var(--main); } .res-actions { display: flex; flex-wrap: wrap; gap: 10px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; color: var(--text); font-size: .95rem; font-weight: 550; transition: transform .4s var(--spring), background-color .2s, color .2s, box-shadow .2s; } .btn .ic { width: 18px; height: 18px; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(.94); transition-duration: .12s; } .btn.primary { background: var(--main); color: var(--on-main); font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.14), 0 12px 26px -12px color-mix(in oklab, var(--main) 85%, transparent); } .btn.on { color: var(--main); } .btn.small { padding: 8px 14px; font-size: .88rem; } .btn.danger { color: var(--err); } .btn.danger.primary { background: var(--err); color: #fff; } .btn:disabled { opacity: .45; cursor: default; } .res-panel { border-radius: var(--r-lg); padding: 22px; animation: rise .4s var(--ease); } .panel-note { margin: 0 0 12px; font-size: .9rem; color: var(--sub); } .hist-words, .replay-words { display: flex; flex-wrap: wrap; gap: .15em .55em; font-family: var(--font-type); font-size: 1.3rem; line-height: 1.75; } .hist-words .word, .replay-words .word { margin: 0; height: auto; } .hist-words .word { border-radius: 7px; padding: 0 4px; background: color-mix(in oklab, var(--main) var(--burst, 0%), transparent); cursor: help; } .hist-words .word:hover::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-family: var(--font-ui); font-size: .8rem; padding: 5px 10px; border-radius: 9px; white-space: nowrap; z-index: 2; } .burst-scale { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--sub); margin-bottom: 12px; } .burst-scale i { width: 80px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--main) 55%, transparent)); box-shadow: inset 0 0 0 1px var(--line); } .replay-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; color: var(--sub); font-variant-numeric: tabular-nums; font-size: .9rem; } .replay-words { position: relative; } .replay-words .caret { height: 1.2em; } .res-hint { margin: 0; color: var(--sub); font-size: .86rem; text-align: center; } /* ---------- pages ---------- */ .view { animation: viewIn .5s var(--ease); } @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } } .page { padding-block: 12px 36px; display: flex; flex-direction: column; gap: 36px; } .page h1 { font-family: var(--font-display); font-weight: 300; font-size: 3.4rem; letter-spacing: -.055em; margin: 0; line-height: 1; text-wrap: balance; } .page h2 { font-family: var(--font-display); font-weight: 550; font-size: 1.3rem; margin: 0 0 14px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .page-lede { margin: 10px 0 0; color: var(--sub); max-width: 62ch; font-size: 1.05rem; } .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stat { border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stat .label { font-size: .82rem; color: var(--sub); } .stat .value { font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.045em; } .stat .value small { font-size: .95rem; color: var(--sub); font-weight: 400; letter-spacing: 0; } .stat .foot { font-size: .82rem; color: var(--sub); } .stat.hero .value { color: var(--main); } .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } .two-col > * { min-width: 0; border-radius: var(--r-lg); padding: 22px; } .hist-chart { position: relative; height: 250px; } .pairs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .pair { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--line); font-family: var(--font-type); font-size: .95rem; } .pair small { font-family: var(--font-ui); color: var(--sub); font-size: .76rem; } .table-wrap { overflow-x: auto; border-radius: var(--r-lg); padding: 10px 22px 14px; } table.data { width: 100%; border-collapse: collapse; font-size: .94rem; font-variant-numeric: tabular-nums; } table.data th { text-align: left; font-weight: 500; color: var(--sub); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px 8px 0; } table.data td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); white-space: nowrap; } table.data td.num { font-family: var(--font-type); font-size: .9rem; } table.data td.strong { color: var(--main); font-weight: 600; } .chip { display: inline-block; font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--text); margin-left: 5px; vertical-align: 1px; font-family: var(--font-ui); font-weight: 550; letter-spacing: 0; } /* Profile Hero Card */ .profile-hero-card { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 24px 28px; border-radius: var(--r-lg); flex-wrap: wrap; } .ph-main { display: flex; align-items: center; gap: 20px; flex: 1 1 340px; min-width: 0; } .ph-avatar-wrap { position: relative; cursor: pointer; border-radius: 999px; padding: 4px; transition: transform .35s var(--spring); outline: none; } .ph-avatar-wrap:hover { transform: scale(1.05); } .ph-avatar-frame { width: 76px; height: 76px; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg2); box-shadow: 0 4px 18px -4px var(--shade), inset 0 0 0 1px var(--line); } .ph-avatar-img { width: 100%; height: 100%; object-fit: cover; } .ph-avatar-frame .orb { width: 100%; height: 100%; } .ph-avatar-frame b { position: absolute; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); } .ph-avatar-badge-count { position: absolute; bottom: 0; right: 0; background: var(--main); color: var(--on-main); font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; box-shadow: 0 2px 6px var(--shade); border: 2px solid var(--bg); font-family: var(--font-ui); } .ph-info { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .ph-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ph-name { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; margin: 0; line-height: 1.2; letter-spacing: -.03em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-rank-pill { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: color-mix(in oklab, var(--main) 14%, var(--bg2)); color: var(--main); border: 1px solid color-mix(in oklab, var(--main) 28%, transparent); letter-spacing: .02em; } .ph-acct-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 550; color: var(--sub); } .ph-acct-pill svg { width: 14px; height: 14px; } .ph-level-bar-wrap { display: flex; flex-direction: column; gap: 4px; max-width: 320px; } .ph-level-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--sub); font-weight: 550; } .ph-level-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; } .ph-level-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--main), var(--main2)); transition: width .8s var(--ease); } .ph-quick-stats { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .ph-stat { display: flex; flex-direction: column; gap: 2px; min-width: 95px; } .ph-stat-lbl { font-size: .76rem; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; font-weight: 550; } .ph-stat-val { font-family: var(--font-display); font-size: 1.85rem; font-weight: 350; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--text); } .ph-stat-val.highlight { color: var(--main); } .ph-stat-val small { font-size: .85rem; color: var(--sub); font-weight: 400; } .ph-stat-sub { font-size: .76rem; color: var(--sub); } /* Personal Bests Separated Groups */ .pb-group { display: flex; flex-direction: column; gap: 14px; } .pb-group-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .pb-group-title { display: flex; align-items: center; gap: 14px; } .pb-group-title h2 { margin: 0; font-size: 1.35rem; font-weight: 600; } .pb-group-desc { margin: 2px 0 0; font-size: .86rem; color: var(--sub); } .pb-icon-tile { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pb-icon-tile.time { background: color-mix(in oklab, #3b82f6 18%, var(--bg2)); color: #3b82f6; } .pb-icon-tile.words { background: color-mix(in oklab, #10b981 18%, var(--bg2)); color: #10b981; } .pb-icon-tile.special { background: color-mix(in oklab, #f59e0b 18%, var(--bg2)); color: #f59e0b; } .pb-icon-tile.cal-tile { background: color-mix(in oklab, var(--main) 18%, var(--bg2)); color: var(--main); } .pb-icon-tile svg { width: 22px; height: 22px; } .pb-cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .pb-card { border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; cursor: pointer; transition: transform .3s var(--spring), box-shadow .3s var(--ease), border-color .2s; outline: none; min-height: 154px; position: relative; } .pb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px var(--shade), inset 0 0 0 1px color-mix(in oklab, var(--main) 35%, transparent); } .pb-card:active { transform: scale(.98); } .pb-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .pb-mode-tag { font-family: var(--font-display); font-size: .92rem; font-weight: 650; letter-spacing: -.01em; color: var(--text); text-transform: capitalize; } .pb-acc-tag { font-size: .74rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, #10b981 16%, var(--bg2)); color: #10b981; border: 1px solid color-mix(in oklab, #10b981 25%, transparent); } .pb-empty-tag { font-size: .72rem; color: var(--sub); padding: 2px 6px; border-radius: 999px; background: var(--line); } .pb-card-center { display: flex; flex-direction: column; gap: 4px; } .pb-wpm-wrap { display: flex; align-items: baseline; gap: 6px; } .pb-wpm-val { font-family: var(--font-display); font-size: 2.5rem; font-weight: 350; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: var(--text); } .pb-card.has-pb .pb-wpm-val { color: var(--main); } .pb-card.empty-pb .pb-wpm-val { color: var(--sub2); } .pb-wpm-unit { font-size: .88rem; color: var(--sub); font-weight: 500; } .pb-meta-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--sub); min-height: 1.2em; } .pb-meta-raw { font-family: var(--font-type); } .pb-meta-none { color: var(--sub); font-style: italic; font-size: .76rem; } .pb-card-bottom { display: flex; justify-content: space-between; align-items: center; font-size: .76rem; color: var(--sub); padding-top: 8px; border-top: 1px solid var(--line); } .pb-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-action-link { display: inline-flex; align-items: center; gap: 4px; color: var(--main); font-weight: 600; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--spring); } .pb-action-link svg { width: 13px; height: 13px; } .pb-card:hover .pb-action-link { opacity: 1; transform: translateX(0); } /* Activity Heatmap Calendar */ .activity-heatmap { border-radius: var(--r-lg); padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; } .cal-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } .cal-title { display: flex; align-items: center; gap: 14px; } .cal-title h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; } .cal-title p { margin: 2px 0 0; font-size: .84rem; color: var(--sub); } .cal-streak-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: color-mix(in oklab, #f59e0b 16%, var(--bg2)); color: #f59e0b; border: 1px solid color-mix(in oklab, #f59e0b 28%, transparent); font-size: .84rem; font-weight: 600; } .cal-streak-badge svg { width: 16px; height: 16px; } .cal-body { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .cal-weekdays { display: flex; flex-direction: column; justify-content: space-between; font-size: .68rem; color: var(--sub); padding-top: 20px; height: 98px; user-select: none; } .cal-cols-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .cal-months { display: flex; gap: 4px; font-size: .7rem; color: var(--sub); height: 16px; user-select: none; } .cal-month-lbl { flex: 1; min-width: 14px; white-space: nowrap; } .cal-grid { display: flex; gap: 4px; } .cal-col { display: flex; flex-direction: column; gap: 4px; flex: 1; } .cal-cell { width: 100%; aspect-ratio: 1; max-width: 15px; border-radius: 3px; background: var(--line); transition: transform .15s, outline .15s; cursor: pointer; } .cal-cell:hover { transform: scale(1.35); outline: 2px solid var(--text); z-index: 2; position: relative; } .cal-cell.lvl-0 { background: var(--line); opacity: .45; } .cal-cell.lvl-1 { background: color-mix(in oklab, var(--main) 35%, var(--bg2)); } .cal-cell.lvl-2 { background: color-mix(in oklab, var(--main) 60%, var(--bg2)); } .cal-cell.lvl-3 { background: var(--main); } .cal-cell.lvl-4 { background: color-mix(in oklab, var(--main) 85%, #fff); box-shadow: 0 0 6px color-mix(in oklab, var(--main) 60%, transparent); } .cal-cell.future { background: transparent; pointer-events: none; } .cal-foot { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--sub); flex-wrap: wrap; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); } .cal-stats-summary { display: flex; align-items: center; gap: 8px; } .cal-stats-summary b { color: var(--text); } .cal-legend { display: flex; align-items: center; gap: 5px; font-size: .72rem; } .cal-legend .cal-cell { width: 11px; height: 11px; aspect-ratio: 1; pointer-events: none; } /* Sheet Mini PB Strip */ .sheet-pbs { margin: -4px 0 10px; } .sheet-pb-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .spb-card { border-radius: 12px; background: var(--line); padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: transform .2s var(--spring), background-color .2s; outline: none; } .spb-card:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--main) 18%, var(--bg2)); } .spb-card .spb-lbl { font-size: .68rem; font-weight: 650; color: var(--sub); text-transform: uppercase; } .spb-card b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; } .spb-card small { font-size: .64rem; color: var(--sub); } .empty { border-radius: var(--r-lg); padding: 40px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .empty p { margin: 0; color: var(--sub); max-width: 48ch; } .empty h2 { justify-content: center; } .empty .ghost-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-bottom: 6px; } .empty .ghost-bars i { width: 12px; border-radius: 6px; background: color-mix(in oklab, var(--main) 30%, transparent); } /* learn */ .course-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 14px 14px 24px; border-radius: 999px; } .course-meter { flex: 1; min-width: 180px; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; } .course-meter i { display: block; height: 100%; background: var(--main); border-radius: 5px; transition: width .8s var(--ease); } .lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .lesson { text-align: left; border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: transform .45s var(--spring); } .lesson:hover { transform: translateY(-3px); } .lesson.next { box-shadow: inset 0 0 0 2px var(--main), 0 18px 40px -22px var(--shade); } .lesson .num { font-size: .76rem; color: var(--sub); letter-spacing: .04em; } .lesson .nm { font-family: var(--font-display); font-weight: 550; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.02em; } .lesson .keys { font-family: var(--font-type); color: var(--main); font-size: 1rem; letter-spacing: .18em; min-height: 1.3em; } .lesson .stars { display: flex; gap: 3px; color: var(--gold); } .lesson .stars svg { width: 17px; height: 17px; fill: currentColor; stroke: none; } .lesson .stars svg.off { fill: var(--line); } .star-rules { font-size: .88rem; color: var(--sub); margin: -18px 0 0; } /* games */ .game-page { gap: 20px; } .game-hub { display: flex; flex-direction: column; gap: 24px; width: 100%; animation: viewIn .4s var(--ease); } .game-view-container { display: flex; flex-direction: column; gap: 16px; width: 100%; animation: viewIn .4s var(--ease); } .game-top-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 16px; border-radius: 20px; flex-wrap: wrap; } .gtb-left, .gtb-center, .gtb-right { display: flex; align-items: center; gap: 12px; } .back-to-hub-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--sub); cursor: pointer; transition: transform .3s var(--spring), color .2s, background-color .2s; } .back-to-hub-btn:hover { color: var(--text); background: color-mix(in oklab, var(--main) 12%, var(--bg2)); transform: translateX(-2px); } .back-to-hub-btn:active { transform: scale(.95); } .back-to-hub-btn svg { width: 16px; height: 16px; } .gtb-title { display: flex; align-items: baseline; gap: 8px; } .gtb-badge { font-family: var(--font-display); font-weight: 650; font-size: 1.15rem; letter-spacing: -.02em; color: var(--text); } .gtb-sub { font-size: .8rem; color: var(--sub); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .gtb-best { display: flex; align-items: baseline; gap: 6px; font-size: .88rem; color: var(--sub); } .gtb-best .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; } .gtb-best b { color: var(--main); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; } .game-tabs { display: flex; gap: 4px; padding: 5px; border-radius: 22px; align-self: flex-start; } .game-tab { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 18px; border-radius: 18px; color: var(--sub); text-align: left; transition: color .2s, background-color .3s, transform .35s var(--spring); } .game-tab:active { transform: scale(.96); } .game-tab .gt-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; } .game-tab .gt-sub { font-size: .8rem; } .game-tab.on { color: var(--text); background: color-mix(in oklab, var(--main) 14%, var(--bg2)); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px color-mix(in oklab, var(--main) 22%, transparent); } .game-pane { display: flex; flex-direction: column; gap: 16px; width: 100%; } .game-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .game-best { display: flex; flex-direction: column; align-items: flex-end; } .game-best .label { font-size: .82rem; color: var(--sub); } .game-best .value { font-family: var(--font-display); font-weight: 250; font-size: 3rem; line-height: 1; color: var(--main); font-variant-numeric: tabular-nums; letter-spacing: -.05em; } .stage { position: relative; width: 100%; height: clamp(430px, 58vh, 540px); border-radius: 28px; overflow: hidden; background: #e2bd63; cursor: text; box-shadow: 0 30px 70px -34px var(--shade), inset 0 0 0 1px rgba(255,255,255,.12); } .stage.night { background: #0b0c24; } .stage canvas { display: block; width: 100%; height: 100%; } .g-hud { position: absolute; left: 0; right: 0; top: 0; padding: 18px 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; color: #fff; text-shadow: 0 1px 3px #0006; } .g-left { display: flex; flex-direction: column; gap: 4px; } .g-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; } .g-score { font-family: var(--font-display); font-weight: 300; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .g-level { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; } .g-combo { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; } .g-emp { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d9c2ff; } .g-lives { display: flex; gap: 4px; margin-right: 46px; } .g-lives svg { width: 28px; height: 28px; fill: #ffffff33; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 1px 2px #0005); } .g-lives svg.on { fill: #ff5d73; } .g-lives.shields svg.on { fill: #5fe3f5; } .g-fever { width: 120px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.28); overflow: hidden; box-shadow: 0 1px 3px #0003; } .g-fever i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #ffe7a3, #ffb454); border-radius: 4px; transition: transform .3s var(--ease); } .g-fever.hot i { background: linear-gradient(90deg, #ffd35a, #ff7a3d); animation: hotPulse .5s ease-in-out infinite alternate; } .g-fever.night i { background: linear-gradient(90deg, #9ff3ff, #c9a5ff); } @keyframes hotPulse { to { filter: brightness(1.3); } } .g-missions { position: absolute; left: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; max-width: calc(100% - 32px); } .g-missions span { position: relative; overflow: hidden; padding: 4px 10px; border-radius: 999px; background: rgba(20, 14, 8, .35); color: #fff; font-size: .74rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .g-missions span i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 210, 110, .35); transition: width .4s var(--ease); } .g-missions span b { position: relative; font-weight: 600; } .g-missions span.done { background: rgba(60, 170, 90, .6); } .g-missions.night span { background: rgba(10, 12, 40, .5); } .g-missions.night span i { background: rgba(124, 240, 255, .28); } .g-music { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2; transition: transform .35s var(--spring); } .g-music:active { transform: scale(.9); } .g-music svg { width: 18px; height: 18px; } .g-music.off { opacity: .6; } .g-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(closest-side, #2a18104d, #2a181026); z-index: 3; } .g-card { width: min(470px, 100%); background: rgba(255, 250, 242, .86); color: #2f2419; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-radius: 26px; padding: 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 24px 60px -16px #0009; animation: dropIn .45s var(--spring); } .g-card h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 2.8rem; line-height: 1; letter-spacing: -.05em; color: inherit; } .g-card p { margin: 0; color: #6b5a48; font-size: .94rem; max-width: 44ch; } .g-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9480f; } .g-small { font-size: .8rem; color: #8a7760; } .g-card .btn.primary { background: #e8590c; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -10px #e8590c; } .g-pace { display: flex; gap: 4px; background: rgba(120, 90, 50, .1); padding: 4px; border-radius: 999px; } .g-pace button { padding: 6px 14px; border-radius: 999px; font-size: .86rem; color: #7a654d; } .g-pace button.on { background: #fff; color: #2f2419; font-weight: 600; box-shadow: 0 2px 6px #0002; } .g-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .9rem; color: #6b5a48; } .g-stats b { color: #2f2419; font-variant-numeric: tabular-nums; } .g-mlist { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .88rem; color: #6b5a48; text-align: left; } .g-mlist li { display: flex; align-items: center; gap: 8px; } .g-mlist li span { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px #c9b49a; flex: none; } .g-mlist li.done { color: #2b8a3e; font-weight: 600; } .g-mlist li.done span { background: #2b8a3e; box-shadow: none; } .g-card.night { background: rgba(21, 23, 58, .86); color: #ecebff; box-shadow: inset 0 1px 0 rgba(124,240,255,.25), 0 24px 60px -16px #000c; } .g-card.night p, .g-card.night .g-stats, .g-card.night .g-small, .g-card.night .g-mlist { color: #a9a7d6; } .g-card.night .g-stats b { color: #fff; } .g-card.night .g-kicker { color: #7cf0ff; } .g-card.night .btn.primary { background: #3fd7ea; color: #0b0c24; box-shadow: 0 10px 22px -10px #3fd7ea; } .g-card.night .g-pace { background: rgba(255,255,255,.07); } .g-card.night .g-pace button { color: #a9a7d6; } .g-card.night .g-pace button.on { background: #353a78; color: #fff; } .g-card.night .g-mlist li span { box-shadow: inset 0 0 0 2px #4a4f86; } .g-card.night .g-mlist li.done { color: #7cf0ff; } .g-card.night .g-mlist li.done span { background: #3fd7ea; } .game-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .game-tips > div { border-radius: var(--r-md); padding: 14px 16px; font-size: .9rem; color: var(--sub); } .game-tips b { color: var(--text); font-weight: 600; } /* ranks */ .rank-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 5px; border-radius: 999px; align-self: flex-start; max-width: 100%; } .rank-tabs button { padding: 9px 16px; border-radius: 999px; color: var(--sub); font-size: .92rem; font-weight: 550; transition: color .2s, background-color .3s; } .rank-tabs button.on { background: color-mix(in oklab, var(--main) 14%, var(--bg2)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 22%, transparent); } .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; } .pod { border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; } .pod.p1 { padding-block: 30px; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--gold) 55%, transparent), 0 18px 40px -22px var(--shade); } .pod .medal { font-weight: 700; font-size: 1rem; } .pod img, .pod .av { position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; } .pod .nm { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pod .sc { font-family: var(--font-display); font-weight: 300; font-size: 2.4rem; color: var(--main); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.05em; } .rank-row-me td { background: color-mix(in oklab, var(--main) 10%, transparent); } .who-cell { display: flex; align-items: center; gap: 10px; } .who-cell img, .who-cell .av { position: relative; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; } /* settings */ .set-section { display: flex; flex-direction: column; border-radius: var(--r-lg); padding: 8px 24px 12px; } .set-section > h2 { margin: 18px 0 6px; } .set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); } .set-row.stack { grid-template-columns: 1fr; } .set-row .name { font-weight: 600; } .set-row .desc { color: var(--sub); font-size: .9rem; max-width: 62ch; } .seg { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .set-row.stack .seg { justify-content: flex-start; } .seg button { padding: 8px 14px; border-radius: 999px; color: var(--sub); font-size: .9rem; font-weight: 550; background: var(--line); transition: background-color .25s, color .25s, transform .35s var(--spring); } .seg button:hover { color: var(--text); } .seg button:active { transform: scale(.93); } .seg button.on { background: var(--main); color: var(--on-main); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px -8px var(--main); } input[type="range"] { accent-color: var(--main); width: 200px; } .num-input { width: 90px; padding: 9px 12px; border-radius: 12px; border: 0; color: var(--text); background: var(--line); font: inherit; font-family: var(--font-type); } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .theme-card { border-radius: 16px; padding: 13px 15px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; font-weight: 550; box-shadow: inset 0 0 0 1px #8882, 0 10px 24px -18px #0006; transition: transform .4s var(--spring), box-shadow .2s; } .theme-card:hover { transform: translateY(-3px); } .theme-card.on { box-shadow: inset 0 0 0 2px var(--main), 0 0 0 3px var(--bg), 0 12px 26px -16px #0008; } .theme-card .sw { display: flex; gap: 4px; } .theme-card .sw i { width: 11px; height: 11px; border-radius: 50%; } .font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .font-card { padding: 12px 14px; border-radius: 14px; text-align: left; color: var(--sub); font-size: 1.02rem; background: var(--line); transition: color .2s, background-color .25s, transform .4s var(--spring); } .font-card:hover { color: var(--text); transform: translateY(-2px); } .font-card.on { color: var(--on-main); background: var(--main); } .font-card small { display: block; font-family: var(--font-ui); font-size: .72rem; opacity: .7; margin-top: 2px; } .custom-theme { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .custom-theme label { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--sub); } .custom-theme input[type="color"] { width: 36px; height: 32px; border: 0; padding: 0; background: none; border-radius: 10px; cursor: pointer; } .swatches { display: flex; flex-wrap: wrap; gap: 10px; } .swatch { width: 34px; height: 34px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--c) 50%, #fff), var(--c) 62%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), 0 6px 14px -6px var(--c); transition: transform .4s var(--spring); } .swatch:hover { transform: scale(1.12); } .swatch.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); } .swatch.theme-default { --c: var(--main); background: conic-gradient(from 200deg, #ffb454, #ff7a8a, #a99bff, #6cc4ff, #5fe0b7, #ffb454); } .confirm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* achievements */ .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .ach { display: flex; gap: 13px; align-items: center; border-radius: var(--r-md); padding: 13px 15px; min-width: 0; } .ach .ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--line); color: var(--sub); } .ach .ico svg { width: 20px; height: 20px; } .ach.got .ico { background: color-mix(in oklab, var(--main) 16%, transparent); color: var(--main); } .ach.got .ico svg { fill: currentColor; stroke: none; } .ach .t { font-weight: 600; font-size: .94rem; } .ach .d { font-size: .82rem; color: var(--sub); } .ach:not(.got) { opacity: .65; } .rank { color: var(--main); font-weight: 600; } /* ---------- footer ---------- */ #foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--sub); font-size: .84rem; flex-wrap: wrap; } .foot-right { display: flex; align-items: center; gap: 16px; margin-left: auto; } .keys-hint .dot { margin: 0 6px; } .theme-link { display: inline-flex; align-items: center; gap: 7px; color: var(--sub); } .theme-link .ic { width: 16px; height: 16px; } .theme-link:hover { color: var(--text); } .online { display: inline-flex; align-items: center; gap: 7px; } .online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3cc47c; box-shadow: 0 0 0 3px #3cc47c33; animation: breathe 2.4s ease-in-out infinite; } @keyframes breathe { 50% { box-shadow: 0 0 0 6px #3cc47c11; } } /* ---------- overlays ---------- */ .overlay { position: fixed; inset: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0; } } .palette-box, .modal-box { width: min(620px, 100%); border-radius: 28px; background: color-mix(in oklab, var(--bg2) 88%, transparent); overflow: hidden; animation: dropIn .45s var(--spring); } @keyframes dropIn { from { transform: translateY(-14px) scale(.96); opacity: 0; } } .palette-field { display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid var(--line); } .palette-field .ic { color: var(--sub); } #paletteInput { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.15rem; padding: 20px 0; outline: none; } #paletteList { max-height: 52vh; overflow-y: auto; padding: 8px; } .p-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border-radius: 14px; color: var(--text); font-size: .96rem; } .p-item .grp { color: var(--sub); font-size: .8rem; } .p-item .cur { color: var(--main); font-size: .8rem; font-weight: 600; } .p-item.sel { background: color-mix(in oklab, var(--main) 14%, transparent); } .p-empty { padding: 16px; color: var(--sub); font-size: .94rem; } .modal-box { padding: 26px; display: flex; flex-direction: column; gap: 14px; overflow: visible; } .modal-box h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -.035em; } .modal-note { margin: 0; color: var(--sub); font-size: .92rem; } #customText, .field input[type="text"] { width: 100%; resize: vertical; border: 0; border-radius: 16px; padding: 13px 15px; background: var(--line); color: var(--text); font-family: var(--font-type); font-size: .96rem; line-height: 1.5; outline: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; } .field input[type="text"] { font-family: var(--font-ui); font-size: 1.05rem; } #customText:focus, .field input[type="text"]:focus { box-shadow: inset 0 0 0 2px var(--main); } .check { display: inline-flex; gap: 8px; align-items: center; font-size: .94rem; color: var(--sub); } .check input { accent-color: var(--main); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .sheet { gap: 18px; } .sheet-head { display: flex; align-items: center; gap: 16px; } .sheet-head > div { flex: 1; min-width: 0; } .field { display: flex; flex-direction: column; gap: 8px; } .field > span { font-size: .86rem; color: var(--sub); font-weight: 550; } .field .seg { justify-content: flex-start; } #toast { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 24px) scale(.96); color: var(--text); padding: 12px 20px; border-radius: 999px; font-size: .94rem; font-weight: 550; background: color-mix(in oklab, var(--bg2) 90%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s, transform .45s var(--spring); z-index: 60; max-width: calc(100% - 32px); } #toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); } #popLayer { position: fixed; inset: 0; pointer-events: none; z-index: 45; } .pop-text { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 650; color: var(--main); font-size: 1.7rem; letter-spacing: -.03em; animation: floatUp 1.1s var(--ease) forwards; white-space: nowrap; } @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -180%) scale(1); } } /* ---------- responsive ---------- */ @media (max-width: 1200px) { :root { --type-size: 2.7rem; } .nav-btn.active .nav-label { display: none; } .nav-btn { padding: 0 12px; } } @media (max-width: 1180px) { .cfg-btn .cl { display: none; } } @media (max-width: 980px) { :root { --type-size: 2.35rem; } .game-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .big-stat .value { font-size: 6.5rem; } .config { align-self: stretch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } } @media (max-width: 860px) { :root { --type-size: 2.05rem; } .res-top { grid-template-columns: 1fr; } .res-big { flex-direction: row; flex-wrap: wrap; gap: 28px; align-items: flex-end; } .two-col { grid-template-columns: 1fr; } .pb-cards-grid, .pb-grid, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet-pb-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ph-quick-stats { gap: 14px; } #keyboard, #fingerLegend { display: none; } .lane { grid-template-columns: 7rem minmax(0, 1fr) 3.4rem; gap: 10px; } .brand-name { display: none; } .live-main { font-size: 3.2rem; } .flow-cap { width: 70px; } .flow em { display: none; } } @media (max-width: 600px) { :root { --type-size: 1.6rem; } #app { padding-block: 12px; gap: 14px; } #view-type { gap: 18px; justify-content: flex-start; padding-top: 4vh; } #top { gap: 8px; } .nav { padding: 3px; margin-inline: 0 auto; } .nav-btn { height: 36px; min-width: 34px; padding: 0 7px; } .nav-btn .ic { width: 18px; height: 18px; } #paletteBtn { display: none; } .brand-mark, .brand-mark svg { width: 27px; height: 27px; } .profile { width: 40px; height: 40px; } .face { width: 29px; height: 29px; } .keys-hint { display: none; } .big-stat .value { font-size: 4.6rem; } .big-stat.small .value { font-size: 2.6rem; } .live-main { font-size: 2.5rem; } .live-sub b { font-size: 1.45rem; } #liveBar { gap: 18px; } .set-row { grid-template-columns: 1fr; } .seg { justify-content: flex-start; } .pb-cards-grid { grid-template-columns: 1fr; } .profile-hero-card { padding: 18px 20px; } .ph-main { flex-direction: column; text-align: center; } .ph-name-row { justify-content: center; } .ph-level-bar-wrap { margin: 0 auto; width: 100%; } .ph-quick-stats { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; gap: 12px; } .sheet-pb-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stage { height: clamp(340px, 50vh, 440px); border-radius: 20px; } .game-top-bar { padding: 8px 12px; gap: 10px; } .gtb-badge { font-size: 1rem; } .game-tips { grid-template-columns: 1fr; } .g-score { font-size: 1.8rem; } .g-card { padding: 18px; gap: 8px; } .g-card h2 { font-size: 2rem; } .g-card p { font-size: .85rem; } .g-missions { display: none; } .game-head, .game-best { align-items: flex-start; } .page h1 { font-size: 2.5rem; } .podium { grid-template-columns: 1fr; } .lane { grid-template-columns: 5.5rem minmax(0, 1fr) 3rem; gap: 8px; } .lane .tag { display: none; } .set-section { padding: 6px 16px 10px; } .hello-line { font-size: 1.12rem; } .hello-sub { font-size: .86rem; } .course-bar { border-radius: 24px; } .wm, .wl { display: none; } .ws { display: inline; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ================= graphics layer ================= */ /* glossy app-style tiles: each section owns a color */ .tile, .nav-ic { --t1: #ffa06b; --t2: #ff5a36; } .t-type { --t1: #ffa06b; --t2: #ff5a36; } .t-learn { --t1: #5ee0a8; --t2: #12a567; } .t-race { --t1: #72b4ff; --t2: #2f6bff; } .t-play { --t1: #b690ff; --t2: #7447f5; } .t-ranks { --t1: #ffd466; --t2: #f29d00; } .t-progress { --t1: #ff8ab4; --t2: #ee3f7c; } .t-settings { --t1: #b3bccd; --t2: #66728a; } .tile { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, var(--t1), var(--t2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.12), 0 10px 22px -10px var(--t2); } .tile::before { content: ""; position: absolute; inset: 0 0 48% 0; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); } .tile .ic { position: relative; width: 58%; height: 58%; stroke-width: 2; color: #fff; } .page-title { display: flex; align-items: center; gap: 18px; min-width: 0; } .page-title .tile { width: 60px; height: 60px; border-radius: 19px; animation: tileIn .7s var(--spring) both; } @keyframes tileIn { from { transform: scale(.4) rotate(-14deg); opacity: 0; } } .nav-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; transition: background .3s, box-shadow .3s, transform .45s var(--spring); position: relative; overflow: hidden; } .nav-ic .ic { width: 19px; height: 19px; } .nav-btn.active .nav-ic { background: linear-gradient(145deg, var(--t1), var(--t2)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 14px -6px var(--t2); transform: scale(1.06); } .nav-btn.active .nav-ic .ic { color: #fff; } .nav-btn { padding: 0 8px 0 6px; } .nav .liquid-ind { background: color-mix(in oklab, var(--bg2) 90%, transparent); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--line), 0 8px 18px -12px var(--shade); } .nav .liquid-ind::after { opacity: .25; } .page-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; } .hero-art { width: 280px; height: 150px; flex: none; } .hero-art svg { width: 100%; height: 100%; display: block; } /* badges */ .badge { width: 64px; height: 64px; flex: none; overflow: visible; } .badge .shine { animation: shine 3.6s ease-in-out infinite; } @keyframes shine { 0%, 55% { transform: translateX(-60px) skewX(-20deg); } 80%, 100% { transform: translateX(80px) skewX(-20deg); } } .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .ach { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 14px 16px; transition: transform .45s var(--spring); } .ach:hover { transform: translateY(-3px); } .ach .badge { width: 68px; height: 68px; } .ach:not(.got) .badge { filter: grayscale(1); opacity: .38; } .ach:not(.got) { opacity: 1; } .ach:not(.got) .t { color: var(--sub); } .ach .d { max-width: 22ch; } .ach-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ach-meter { flex: 1; min-width: 160px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; } .ach-meter i { display: block; height: 100%; background: linear-gradient(90deg, #ffd466, #f29d00); border-radius: 4px; } /* achievement unlock cards */ #unlocks { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; z-index: 70; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100% - 36px); } .unlock { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 22px; pointer-events: auto; background: color-mix(in oklab, var(--bg2) 92%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--line), 0 24px 50px -20px var(--shade); animation: unlockIn .7s var(--spring) both; } .unlock.out { animation: unlockOut .4s var(--ease) forwards; } .unlock .badge { width: 54px; height: 54px; animation: badgePop .9s var(--spring) .15s both; } .unlock small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--main); } .unlock b { display: block; font-size: 1rem; font-weight: 650; } .unlock span.d { font-size: .82rem; color: var(--sub); } @keyframes unlockIn { from { transform: translateX(120%) scale(.9); opacity: 0; } } @keyframes unlockOut { to { transform: translateX(120%); opacity: 0; } } @keyframes badgePop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } } /* level up celebration */ .celebrate { align-items: center; padding-top: 16px; } .lvl-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 30px 38px 26px; border-radius: 32px; background: color-mix(in oklab, var(--bg2) 94%, transparent); box-shadow: inset 0 1px 0 var(--rim), 0 40px 90px -30px var(--shade); animation: dropIn .6s var(--spring); max-width: 100%; } .lvl-ring { position: relative; width: 150px; height: 150px; display: grid; place-items: center; } .lvl-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .lvl-ring .ring-bg { stroke-width: 8; } .lvl-ring .ring-fg { stroke-width: 8; stroke-dasharray: 427; stroke-dashoffset: 427; animation: ringFill 1.2s var(--ease) .2s forwards; stroke: url(#lvlGrad); } @keyframes ringFill { to { stroke-dashoffset: 0; } } .lvl-ring b { font-family: var(--font-display); font-weight: 250; font-size: 4.2rem; letter-spacing: -.05em; line-height: 1; animation: badgePop .9s var(--spring) .5s both; } .lvl-card small { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--main); } .lvl-card h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; letter-spacing: -.035em; } .lvl-card p { margin: 0; color: var(--sub); max-width: 34ch; } /* game hub */ .hub-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .coins { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; } .coins b { font-size: 1.15rem; font-weight: 650; } .coin { width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc93c 45%, #e29a00); box-shadow: inset 0 -2px 3px rgba(150,80,0,.35), 0 3px 8px -3px #e29a00; } .coin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(160,90,0,.45); } .coins.bump { animation: coinBump .5s var(--spring); } @keyframes coinBump { 40% { transform: scale(1.15); } } .game-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .game-card { display: flex; flex-direction: column; text-align: left; border-radius: 26px; overflow: hidden; position: relative; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -26px var(--shade); transition: transform .5s var(--spring), box-shadow .3s; } .game-card { padding: 0; align-items: stretch; color: var(--text); } .game-card:hover { transform: translateY(-4px); } .game-pane .game-head { display: none; } .game-card:active { transform: scale(.98); } .game-card.on { box-shadow: inset 0 0 0 2px var(--main), 0 24px 50px -24px color-mix(in oklab, var(--main) 55%, transparent); } .gc-art { display: block; height: 150px; position: relative; overflow: hidden; } .gc-art svg { width: 100%; height: 100%; display: block; transition: transform .8s var(--ease); } .game-card:hover .gc-art svg { transform: scale(1.05); } .gc-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; } .game-card .gt-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; color: var(--text); } .game-card .gt-sub { font-size: .88rem; color: var(--sub); } .gc-meta { display: flex; gap: 14px; margin-top: 6px; font-size: .84rem; color: var(--sub); flex-wrap: wrap; } .gc-meta b { color: var(--text); font-weight: 600; } .gc-play-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 16px; border-radius: 999px; background: var(--main); color: var(--on-main); font-family: var(--font-display); font-weight: 600; font-size: .88rem; box-shadow: 0 4px 14px -4px var(--main); align-self: flex-start; transition: transform .3s var(--spring), box-shadow .3s; } .gc-play-pill .ic { width: 14px; height: 14px; } .game-card:hover .gc-play-pill { transform: translateX(3px) scale(1.04); } .game-card .game-tab.on, .game-card.on { background: var(--bg2); } /* stage picker and looks inside the game cards */ .g-card { max-height: calc(100% - 20px); overflow-y: auto; scrollbar-width: thin; } .g-stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; } .g-stage { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; border-radius: 12px; background: rgba(120, 90, 50, .1); color: #5a4632; font-weight: 700; font-size: .92rem; transition: transform .35s var(--spring), background .2s; } .g-stage i { font-style: normal; font-size: .62rem; letter-spacing: 1px; color: #e0a100; min-height: .9em; } .g-stage.on { background: #e8590c; color: #fff; } .g-stage.on i { color: #fff3c4; } .g-stage:disabled { opacity: .38; cursor: default; } .g-stage:not(:disabled):hover { transform: translateY(-2px); } .g-modes { display: flex; gap: 4px; background: rgba(120, 90, 50, .1); padding: 4px; border-radius: 999px; } .g-modes button { padding: 6px 14px; border-radius: 999px; font-size: .86rem; color: #7a654d; } .g-modes button.on { background: #fff; color: #2f2419; font-weight: 600; box-shadow: 0 2px 6px #0002; } .g-skins { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .g-skin { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; background: rgba(120, 90, 50, .1); font-size: .82rem; color: #5a4632; transition: transform .35s var(--spring); } .g-skin:hover { transform: translateY(-2px); } .g-skin .dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0,0,0,.2); } .g-skin.on { background: #fff; box-shadow: 0 0 0 2px #e8590c; color: #2f2419; font-weight: 600; } .g-skin .price { display: inline-flex; align-items: center; gap: 4px; } .g-skin .price .coin { width: 13px; height: 13px; } .g-skin .price .coin::after { inset: 2.5px; } .g-card.night .g-stage, .g-card.night .g-modes, .g-card.night .g-skin { background: rgba(255,255,255,.07); color: #c6c4ee; } .g-card.night .g-stage.on { background: #3fd7ea; color: #0b0c24; } .g-card.night .g-modes button { color: #a9a7d6; } .g-card.night .g-modes button.on { background: #353a78; color: #fff; } .g-card.night .g-skin.on { background: #353a78; box-shadow: 0 0 0 2px #3fd7ea; color: #fff; } .g-won-stars { display: flex; gap: 6px; } .g-won-stars svg { width: 44px; height: 44px; fill: #e8dcc8; stroke: none; } .g-won-stars svg.on { fill: #ffc93c; filter: drop-shadow(0 4px 8px rgba(224,161,0,.45)); animation: badgePop .8s var(--spring) both; } .g-won-stars svg:nth-child(2).on { animation-delay: .18s; } .g-won-stars svg:nth-child(3).on { animation-delay: .36s; } .g-card.night .g-won-stars svg { fill: #2a2d5c; } .g-coins-won { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #b8740a; } .g-card.night .g-coins-won { color: #ffe27a; } /* keycaps on lesson cards */ .keycaps { display: flex; gap: 5px; flex-wrap: wrap; min-height: 32px; } .keycap { min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px; display: inline-grid; place-items: center; font-family: var(--font-type); font-size: .95rem; color: var(--text); background: var(--bg2); box-shadow: inset 0 -3px 0 var(--sub2), inset 0 0 0 1px var(--line), 0 2px 4px -2px var(--shade); } .keycap.new { color: #fff; background: linear-gradient(145deg, var(--t1, #ffa06b), var(--t2, #ff5a36)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5); } .keycap.word { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .02em; } .lesson { --t1: #5ee0a8; --t2: #12a567; } /* results reveal */ .res-cell { animation: rise .55s var(--ease) both; } .res-cell:nth-child(2) { animation-delay: .05s; } .res-cell:nth-child(3) { animation-delay: .1s; } .res-cell:nth-child(4) { animation-delay: .15s; } .res-cell:nth-child(5) { animation-delay: .2s; } .res-cell:nth-child(6) { animation-delay: .25s; } .res-cell:nth-child(7) { animation-delay: .3s; } .res-actions .btn { animation: rise .5s var(--ease) both; } .res-actions .btn:nth-child(2) { animation-delay: .06s; } .res-actions .btn:nth-child(3) { animation-delay: .12s; } .res-actions .btn:nth-child(4) { animation-delay: .18s; } .res-actions .btn:nth-child(5) { animation-delay: .24s; } .res-actions .btn:nth-child(6) { animation-delay: .3s; } .big-stat .value { animation: numIn .8s var(--spring) both; } @keyframes numIn { from { transform: translateY(18px) scale(.9); opacity: 0; filter: blur(6px); } } @media (max-width: 860px) { .hero-art { display: none; } .page-hero { grid-template-columns: 1fr; } } @media (max-width: 600px) { .game-cards { grid-template-columns: 1fr; } .gc-art { height: 110px; } .page-title .tile { width: 48px; height: 48px; border-radius: 15px; } .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } #unlocks { left: 12px; right: 12px; top: 12px; } .nav-ic { width: 27px; height: 27px; } } .gc-art svg, .hero-art svg { stroke: none; } .g-card { gap: 9px; padding: 20px 24px; } .g-card h2 { font-size: 2.4rem; } .g-stage { padding: 5px 0 3px; } @media (max-width: 600px) { .g-card h2 { font-size: 1.9rem; } .g-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .g-stage { font-size: .82rem; border-radius: 9px; } .g-skins { flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 6px; } .g-skin { font-size: .78rem; padding: 4px 9px 4px 5px; } .g-skin .dot { width: 16px; height: 16px; } .g-skin { flex: none; } } .g-card > * { flex-shrink: 0; } /* ---------- bold typing stage ---------- */ #wordsWrap { font-weight: var(--type-weight, 620); letter-spacing: 0; } .word.done { opacity: 1; } .word.done > span.c { color: var(--text); } .live-main { font-weight: 650; letter-spacing: -.035em; } .live-sub b { font-weight: 550; } .caret.block { background: var(--main); border-radius: .14em; box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--main) 70%, transparent); z-index: 0; } .caret.block.blink { animation: blinkSoft 1.1s ease-in-out infinite; } @keyframes blinkSoft { 0%, 45% { opacity: 1; } 65%, 85% { opacity: .55; } 100% { opacity: 1; } } .word > span.at, .word.cur > span.at { color: var(--on-main); } .word > span.at.x { color: var(--on-main); } #wordsWrap.blurred .word > span.at { color: inherit; } /* keyboard tinted with the accent, like a soft keycap set */ .key { background: color-mix(in oklab, var(--finger) 24%, color-mix(in oklab, var(--main) 13%, var(--bg2))); color: color-mix(in oklab, var(--main) 55%, var(--sub)); box-shadow: inset 0 1px 0 var(--rim), inset 0 -2px 0 color-mix(in oklab, var(--main) 14%, transparent); } .key.down { background: color-mix(in oklab, var(--main) 55%, var(--bg2)); color: var(--on-main); transform: translateY(2px) scale(.94); } #keyboard { opacity: .9; } /* ---------- responsive fixes ---------- */ .btn, .cfg-btn, .cfg-summary, .round-btn, .icon-btn { flex: none; white-space: nowrap; } .welcome .btn { flex: none; } .welcome-text { flex: 1; } /* focus hint: centred over dimmed words instead of covering a line */ #focusHint { inset: 0; align-items: center; padding: 0; transform: scale(.96); } #focusHint span { background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px -14px var(--shade); color: var(--text); font-weight: 550; } #wordsWrap.blurred #words { opacity: .22; } #wordsWrap.blurred #focusHint { transform: none; } .cfg-summary { display: none; } @media (max-width: 980px) { .config { align-self: center; -webkit-mask-image: none; mask-image: none; } } @media (max-width: 720px) { .config { flex-direction: column; align-items: stretch; border-radius: 24px; overflow: visible; padding: 5px; max-width: 100%; } .config:not(.open) > .cfg-group, .config:not(.open) > .cfg-sep { display: none; } .cfg-summary { display: inline-flex; align-self: center; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; color: var(--text); font-weight: 600; font-size: .95rem; } .cfg-summary .ic { width: 18px; height: 18px; color: var(--main); } .cfg-summary .chev { width: 16px; height: 16px; color: var(--sub); transition: transform .35s var(--spring); } .config.open { align-self: stretch; padding: 8px; gap: 4px; } .config.open .cfg-summary .chev { transform: rotate(180deg); } .config.open > .cfg-group { justify-content: center; flex-wrap: wrap; row-gap: 2px; } .config.open > .cfg-sep { width: 40%; height: 1px; margin: 4px auto; } .config.open .cfg-btn .cl { display: inline; } .welcome { max-width: 100%; } } /* narrow: the controls hint repeats the tips under the stage */ @media (max-width: 600px) { .g-card > .g-small:last-child { display: none; } } /* heatmap keyboard: fluid keys that always fit their card */ .kb.mini { width: 100%; overflow: visible; align-items: stretch; gap: clamp(3px, .5vw, 5px); } .kb.mini .kb-row { justify-content: center; gap: clamp(3px, .5vw, 5px); min-width: 0; } .kb.mini .kb-row .key { flex: 0 1 2.1rem; width: auto; min-width: 0; max-width: 2.1rem; height: auto; aspect-ratio: 1; padding: 0; font-size: clamp(.62rem, 1.6vw, .76rem); } .kb.mini .kb-row .key.space { flex: 0 1 11rem; max-width: 11rem; aspect-ratio: auto; height: 1.7rem; } .kb.mini .kb-row .key.space::before { content: "space"; font-size: .66rem; letter-spacing: .06em; color: var(--sub); } .kb.mini .kb-row .key.home::after { bottom: 3px; width: 8px; } /* page illustrations follow the theme */ .hero-art .a-card { fill: var(--bg2); stroke: var(--line); } .hero-art .a-key { fill: var(--bg); stroke: var(--line); } .hero-art .a-mute { fill: var(--sub); } .hero-art .a-line { fill: var(--line); } .hero-art .a-dot { fill: var(--bg2); } .hero-art svg { overflow: visible; } [data-tone="dark"] .hero-art .a-pastel { opacity: .32; } [data-tone="dark"] .hero-art circle.a-pastel { opacity: .12; } /* keystrokes only ever relayout the words box, never the page */ #wordsWrap { contain: layout style; } #words { contain: layout style; } /* The words box is a hard clip, not a scroll container: focus, touch or drag can never slide the text sideways, and the page can never scroll sideways either. (Older browsers fall back to overflow: hidden plus a JS reset.) */ @supports (overflow: clip) { #wordsWrap { overflow: clip; } } #aura { inset: -40% 0; } /* ================= daily quests ================= */ .hello { position: relative; } .hello-right { display: flex; align-items: center; gap: 10px; flex: none; } .quest-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--bg2); color: var(--text); font-size: .86rem; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -14px var(--shade); transition: transform .35s var(--spring), box-shadow .3s; } .quest-pill:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 40%, var(--line)), 0 12px 24px -14px var(--shade); } .quest-pill .ic { width: 18px; height: 18px; color: var(--main); } .qp-dots { display: inline-flex; gap: 4px; } .qp-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--sub) 35%, transparent); transition: background-color .3s, transform .5s var(--spring); } .qp-dots i.on { background: var(--main); transform: scale(1.15); } .quest-pill.all { background: color-mix(in oklab, var(--main) 14%, var(--bg2)); } .quest-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: min(410px, calc(100vw - 32px)); padding: 16px; border-radius: 22px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line), 0 28px 60px -24px var(--shade); transform-origin: 90% 0; animation: qPop .38s var(--spring) both; } @keyframes qPop { from { opacity: 0; transform: translateY(-6px) scale(.96); } } .q-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .q-head small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--main); } .q-head b { font-size: 1.12rem; font-weight: 650; letter-spacing: -.02em; } .q-reset { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--sub); white-space: nowrap; } .q-streak { display: inline-flex; align-items: center; gap: 3px; color: var(--main); font-weight: 650; } .q-streak .ic { width: 15px; height: 15px; } .q-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; } .q-list .q-row { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: transform .3s var(--spring), box-shadow .25s; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: color-mix(in oklab, var(--bg) 70%, var(--bg2)); box-shadow: inset 0 0 0 1px var(--line); } .q-list .qi .badge { width: 40px; height: 40px; display: block; } .q-list .q-row:not(.done) .qi { filter: saturate(.55); opacity: .85; } .q-list .qt { min-width: 0; } .q-list .qt b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; text-wrap: balance; } .qbar { display: block; height: 6px; margin-top: 7px; border-radius: 3px; background: var(--line); overflow: hidden; } .qbar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--main), var(--main2)); transition: width .8s var(--spring); } .q-list .qr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: .78rem; color: var(--sub); font-variant-numeric: tabular-nums; } .q-list .qr .ic { width: 16px; height: 16px; } .q-list .qr em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-weight: 650; color: #d99400; } .q-list .qr em .ic { width: 14px; height: 14px; } .q-list .q-row:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 35%, var(--line)); } .q-list .q-row.done { background: color-mix(in oklab, var(--main) 8%, var(--bg2)); } .q-list .q-row.done .qr > .ic { color: var(--main); stroke-width: 2.6; } .q-list .q-row.done .qr span { color: var(--main); font-weight: 650; } .q-chest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: .84rem; color: var(--sub); box-shadow: inset 0 0 0 1.5px var(--line); } .q-chest .ic { width: 20px; height: 20px; flex: none; color: #f0a800; } .q-chest.open { color: var(--text); background: color-mix(in oklab, #ffc93c 16%, var(--bg2)); box-shadow: none; } .hub-quests { padding: 18px 20px; border-radius: 24px; margin-block: 4px 18px; } .hub-quests .q-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .hub-quests .q-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .quest-pill .qp-label { display: none; } .quest-pill { padding: 0 11px; } .hub-quests { padding: 14px; } } /* quest progress on the results screen */ .res-quests { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .rq-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin-right: 4px; } .rq { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 14px 10px 12px; border-radius: 14px; background: var(--bg2); font-size: .86rem; box-shadow: inset 0 0 0 1px var(--line); animation: rqIn .6s var(--spring) both; } .rq:nth-child(3) { animation-delay: .08s; } .rq:nth-child(4) { animation-delay: .16s; } @keyframes rqIn { from { opacity: 0; transform: translateY(8px) scale(.96); } } .rq .ic { width: 17px; height: 17px; flex: none; color: var(--main); } .rq-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rq b { flex: none; display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-variant-numeric: tabular-nums; } .rq b .ic { width: 14px; height: 14px; color: #d99400; } .rq > i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: linear-gradient(90deg, var(--main), var(--main2)); border-radius: 0 2px 2px 0; animation: rqBar 1s var(--ease) .25s both; } @keyframes rqBar { from { width: 0; } } .rq.done { background: color-mix(in oklab, var(--main) 10%, var(--bg2)); } .rq.done b { color: #d99400; } @media (max-width: 560px) { .rq-label { width: 100%; text-align: center; margin: 0; } } /* backup and restore */ .set-row.stack { flex-direction: column; align-items: stretch; } .restore-box { display: flex; gap: 10px; align-items: flex-start; width: 100%; } .restore-box textarea, .backup-out { flex: 1; min-width: 0; width: 100%; resize: vertical; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 14px; font: .8rem/1.4 var(--font-mono, ui-monospace, monospace); color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); word-break: break-all; } .restore-box textarea:focus, .backup-out:focus { outline: none; box-shadow: inset 0 0 0 2px var(--main); } #backupRow { min-width: 0; } .backup-out { max-width: 340px; } @media (max-width: 720px) { .restore-box { flex-direction: column; } .backup-out { max-width: none; } } /* ================= accounts ================= */ .overlay { overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 560px) { .overlay { padding-top: calc(16px + env(safe-area-inset-top, 0px)); } .modal-box { padding: 20px; } } .acct { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 20px; background: color-mix(in oklab, var(--main) 7%, var(--bg2)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 18%, var(--line)); animation: acctIn .45s var(--spring) both; } @keyframes acctIn { from { opacity: 0; transform: translateY(6px); } } .acct-row { display: flex; align-items: center; gap: 12px; } .acct-badge { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--main); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); } .acct-badge .ic { width: 20px; height: 20px; } .acct-badge.on { color: var(--on-main); background: linear-gradient(145deg, var(--main), var(--main2)); box-shadow: 0 8px 18px -10px var(--main); } .acct-badge.on .ic { stroke-width: 2.6; } .acct-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .acct-t b { font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; } .acct-t span { font-size: .84rem; color: var(--sub); overflow-wrap: anywhere; } .acct-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .acct-form { display: flex; flex-direction: column; gap: 12px; } .acct-tabs { align-self: flex-start; } .acct input[type="text"], .acct input:not([type]), .acct input[type="password"] { width: 100%; border: 0; border-radius: 14px; padding: 12px 14px; background: var(--bg2); color: var(--text); font: 500 1rem var(--font-ui); outline: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; } .acct input:focus { box-shadow: inset 0 0 0 2px var(--main); } .pw { position: relative; display: block; } .pw input { padding-right: 64px !important; } .pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 10px; font-size: .78rem; font-weight: 650; color: var(--sub); } .pw-eye:hover { color: var(--text); background: var(--line); } .acct-err { margin: 0; min-height: 1em; font-size: .86rem; font-weight: 550; color: var(--err); } .acct-err:empty { display: none; } .acct-fine { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--sub); } .acct-link { align-self: flex-start; font-size: .8rem; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; } .acct-link:hover { color: var(--err); } .btn.google { background: var(--bg2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -12px var(--shade); } .btn.google .g-logo { width: 17px; height: 17px; flex: none; } .btn[disabled] { opacity: .6; pointer-events: none; } /* ================= play mode: the game owns the screen ================= */ body.game-play #app { max-width: none; padding-inline: clamp(10px, 1.6vw, 26px); } body.game-play #foot { display: none; } .game-page.in-play { padding-block: 0; gap: 12px; } .in-play .game-view-container { gap: 12px; } .in-play .game-pane { position: relative; } .in-play .stage { border-radius: 24px; } .in-play .game-tips { display: none; } .in-play.tips-open .game-tips { display: grid; position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 6; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; cursor: pointer; animation: tipsUp .4s var(--spring) both; } .in-play.tips-open .game-tips > div { background: color-mix(in oklab, var(--bg2) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 34px -18px rgba(0,0,0,.45); } @keyframes tipsUp { from { opacity: 0; transform: translateY(12px); } } .gtb-help { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 .95rem var(--font-ui); color: var(--sub); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, background-color .2s, transform .3s var(--spring); } .gtb-help:hover { color: var(--text); transform: translateY(-1px); } .gtb-help.on { color: var(--on-main); background: var(--main); box-shadow: none; } @media (max-width: 900px) { .in-play.tips-open .game-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .in-play.tips-open .game-tips { grid-template-columns: minmax(0, 1fr); left: 10px; right: 10px; bottom: 10px; } .in-play .game-top-bar { padding: 8px 10px; row-gap: 8px; } .in-play .gtb-left { flex: 1; min-width: 0; gap: 8px; } .in-play .back-to-hub-btn span, .in-play .gtb-sub, .in-play .gtb-best { display: none; } .in-play .back-to-hub-btn { padding: 8px 10px; } .in-play .gtb-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .in-play .gtb-right { gap: 8px; } .in-play .gtb-center { order: 3; width: 100%; justify-content: center; } } /* ================= rewards & momentum ================= */ .streak-pill, .daily-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 11px; border-radius: 999px; white-space: nowrap; background: var(--bg2); font-size: .84rem; font-weight: 600; color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -14px var(--shade); transition: transform .35s var(--spring), box-shadow .3s, background-color .3s; } .streak-pill:hover, .daily-chip:hover { transform: translateY(-1px); } .streak-pill .ic, .daily-chip .ic { width: 17px; height: 17px; } .streak-pill .ic { color: var(--sub); transition: color .3s, transform .5s var(--spring); } .streak-pill.lit .ic { color: #ff8a3d; transform: scale(1.12); animation: flicker 2.6s ease-in-out infinite; } .streak-pill.lit { background: color-mix(in oklab, #ff8a3d 12%, var(--bg2)); } .streak-pill.risk { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, #ff8a3d 55%, var(--line)), 0 8px 20px -14px var(--shade); } .streak-pill.risk .ic { color: #ff8a3d; } @keyframes flicker { 0%, 100% { transform: scale(1.12) rotate(0); } 40% { transform: scale(1.2) rotate(-4deg); } 70% { transform: scale(1.08) rotate(3deg); } } .daily-chip { color: var(--main); } .daily-chip .ic { color: var(--main); } .daily-chip:not(.done) { background: color-mix(in oklab, var(--main) 11%, var(--bg2)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 35%, var(--line)), 0 8px 20px -14px var(--shade); } .daily-chip.done { color: var(--text); } @media (max-width: 1100px) { .hello-right { flex-wrap: wrap; justify-content: flex-end; } } @media (max-width: 720px) { .streak-pill span, .daily-chip span { font-size: .8rem; } .daily-chip { padding: 0 11px 0 9px; } } @media (max-width: 560px) { .hello { flex-wrap: wrap; } .hello-right { width: 100%; justify-content: flex-start; } } .res-reward { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: stretch; padding: 18px 20px; border-radius: 22px; animation: rise .6s var(--spring) both; } .res-reward[hidden] { display: none; } .rw-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sub); } .rw-lbl b { color: var(--main); } .rw-sub { font-size: .82rem; color: var(--sub); } .rw-big { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; } .rw-big.up { color: #2fae72; } .rw-big.down { color: var(--sub); } .rw-xp { display: flex; flex-direction: column; gap: 8px; justify-content: center; } .rw-top { display: flex; justify-content: space-between; align-items: baseline; } .rw-val { font-weight: 700; color: var(--main); font-variant-numeric: tabular-nums; } .rw-bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; } .rw-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--main), var(--main2)); box-shadow: 0 0 16px -2px var(--main); transition: width 1.1s var(--spring) .35s; } .rw-cell { display: flex; flex-direction: column; gap: 4px; justify-content: center; } .rw-target { position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 12px 16px; border-radius: 16px; overflow: hidden; background: color-mix(in oklab, var(--main) 11%, var(--bg2)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--main) 40%, transparent); transition: transform .35s var(--spring), box-shadow .25s; } .rw-target:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--main), 0 16px 30px -18px var(--main); } .rw-target .rw-big { color: var(--main); } .rw-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .84rem; color: var(--on-main); background: var(--main); padding: 7px 12px; border-radius: 999px; } .rw-go .ic { width: 15px; height: 15px; } .rw-streak { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .86rem; color: var(--sub); padding-top: 4px; border-top: 1px solid var(--line); } .rw-streak .ic { width: 16px; height: 16px; color: #ff8a3d; } .rw-streak b { color: var(--text); } @media (max-width: 760px) { .res-reward { grid-template-columns: minmax(0, 1fr); } .rw-go { position: static; transform: none; align-self: flex-start; margin-top: 6px; } } .daily-chip .s { display: none; } @media (max-width: 560px) { .daily-chip .l { display: none; } .daily-chip .s { display: inline; } .hello-right { gap: 8px; } } /* ================= launch polish: sign-in, leaderboards ================= */ .signin-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 13px; border-radius: 999px; font-size: .9rem; font-weight: 650; white-space: nowrap; color: var(--on-main); background: linear-gradient(145deg, var(--main), var(--main2)); box-shadow: 0 10px 24px -12px var(--main); transition: transform .35s var(--spring), box-shadow .3s; } .signin-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px var(--main); } .signin-btn:active { transform: scale(.96); } .signin-btn .ic { width: 18px; height: 18px; } @media (max-width: 560px) { .signin-btn { width: 42px; padding: 0; justify-content: center; } .signin-btn span { display: none; } } .rk-count { margin-bottom: 0; } .rk-count b { color: var(--text); } .rk-mine { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 20px; animation: rise .5s var(--spring) both; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--main) 45%, transparent); background: color-mix(in oklab, var(--main) 8%, var(--bg2)); } .rk-mine.empty-rank { box-shadow: inset 0 0 0 1px var(--line); background: var(--bg2); } .rk-me-rank { font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: -.04em; color: var(--main); min-width: 3.2ch; font-variant-numeric: tabular-nums; } .rk-mine.empty-rank .rk-me-rank { color: var(--sub); } .rk-me-txt { display: flex; flex-direction: column; min-width: 0; } .rk-me-txt small { font-size: .84rem; color: var(--sub); } .rk-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; font-size: .88rem; color: var(--text); background: color-mix(in oklab, #ffb400 16%, var(--bg2)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #ffb400 40%, transparent); } .pod { animation: rise .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 70ms); } .pod.is-me { box-shadow: inset 0 0 0 2px var(--main), 0 18px 40px -22px var(--shade); } .table-wrap tr { animation: rise .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 30ms); } #rankBody { display: flex; flex-direction: column; gap: 14px; min-height: 320px; } .rank-tabs button { transition: color .2s, background-color .3s, transform .3s var(--spring); } .rank-tabs button:active { transform: scale(.95); } .rk-skel { display: flex; flex-direction: column; gap: 14px; } .sk i, .sk-row i { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--line), color-mix(in oklab, var(--sub) 22%, transparent), var(--line)); background-size: 220% 100%; animation: skShine 1.4s ease-in-out infinite; } .sk .sk-c { width: 52px; height: 52px; border-radius: 50%; } .sk .sk-l { width: 60%; height: 14px; } .sk .sk-n { width: 40%; height: 30px; } .sk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 70px; gap: 16px; align-items: center; padding: 12px 6px; } .sk-row i { height: 16px; } .sk-row i:first-child { width: 22px; } @keyframes skShine { to { background-position: -220% 0; } } @media (prefers-reduced-motion: reduce) { .sk i, .sk-row i, .pod, .table-wrap tr, .rk-mine { animation: none; } } /* ================= Collectible Badges & Avatars ================= */ .face .av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .sheet-badge-btn { margin-top: .45rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; font-size: .82rem; font-weight: 600; } #sheetFace[role="button"] { cursor: pointer; position: relative; transition: transform .2s var(--spring), box-shadow .2s; } #sheetFace[role="button"]:hover { transform: scale(1.06); } #sheetFace[role="button"]::after { content: "edit"; position: absolute; bottom: -2px; right: -2px; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--main); color: var(--on-main); padding: 1px 5px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none; } /* Tier Glows & Colors */ .tier-common { --tier-color: #94a3b8; --tier-glow: rgba(148, 163, 184, 0.4); } .tier-rare { --tier-color: #38bdf8; --tier-glow: rgba(56, 189, 248, 0.55); } .tier-epic { --tier-color: #c084fc; --tier-glow: rgba(192, 132, 252, 0.65); } .tier-legendary { --tier-color: #fbbf24; --tier-glow: rgba(251, 191, 36, 0.75); } .tier-mythic { --tier-color: #f43f5e; --tier-glow: rgba(244, 63, 94, 0.85); } /* Badges Modal Dialog */ .badges-modal { max-width: 920px; width: min(920px, calc(100vw - 32px)); max-height: min(88vh, 800px); display: flex; flex-direction: column; padding: 24px; overflow: hidden; } .badges-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .badges-modal-head h2 { font-size: 1.45rem; margin-bottom: 4px; } .badges-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .badges-filter-bar .seg button { text-transform: capitalize; } .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; overflow-y: auto; padding-right: 4px; padding-bottom: 12px; overscroll-behavior: contain; } .badge-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg2) 65%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: transform .25s var(--spring), border-color .2s, box-shadow .25s, background-color .2s; user-select: none; } .badge-card:hover { transform: translateY(-3px); border-color: var(--tier-color, var(--main)); box-shadow: 0 10px 24px -8px var(--tier-glow, var(--shade)); } .badge-card.equipped { border-color: var(--main); background: color-mix(in oklab, var(--main) 12%, var(--bg2)); box-shadow: 0 0 0 1.5px var(--main), 0 12px 28px -10px var(--main); } .badge-card.locked { cursor: default; opacity: 0.62; filter: grayscale(0.5); } .badge-card.locked:hover { transform: none; border-color: var(--line); box-shadow: none; } .badge-icon-wrap { position: relative; width: 68px; height: 68px; margin-bottom: 10px; } .badge-icon-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px -2px var(--tier-glow, rgba(0,0,0,.3)); transition: transform .25s var(--spring); } .badge-card:hover:not(.locked) .badge-icon-wrap img { transform: scale(1.08); } .badge-card.tier-mythic:not(.locked) .badge-icon-wrap img { animation: mythicPulse 3s ease-in-out infinite alternate; } @keyframes mythicPulse { 0% { box-shadow: 0 0 12px rgba(244,63,94,0.6); } 100% { box-shadow: 0 0 24px rgba(244,63,94,0.9), 0 0 36px rgba(251,191,36,0.5); } } .badge-lock-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); border-radius: 50%; color: #fff; } .badge-lock-overlay svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); } .badge-name { font-size: .86rem; font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 4px; } .badge-tier-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tier-color, var(--sub)); padding: 2px 6px; border-radius: 999px; background: color-mix(in oklab, var(--tier-color, var(--sub)) 14%, transparent); margin-bottom: 6px; } .badge-desc { font-size: .74rem; color: var(--sub); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .badge-status { margin-top: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .badge-card.equipped .badge-status { color: var(--main); } .badge-card:not(.equipped):not(.locked) .badge-status { color: var(--sub); opacity: 0.8; } .badge-card:not(.equipped):not(.locked):hover .badge-status { color: var(--text); opacity: 1; } .badge-card.locked .badge-status { color: var(--sub); font-size: .7rem; font-weight: 500; text-transform: none; } /* Badge Unlock Toast */ .unlock.badge-unlock { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: color-mix(in oklab, var(--bg2) 90%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid var(--tier-color, var(--line)); box-shadow: 0 18px 40px -14px var(--shade), 0 0 20px -4px var(--tier-glow, var(--main)); } .unlock.badge-unlock .unlock-badge-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 14px var(--tier-glow, var(--main)); } .unlock.badge-unlock .equip-btn { margin-left: auto; padding: 6px 14px; font-size: .8rem; font-weight: 700; border-radius: 999px; background: var(--main); color: var(--on-main); border: none; cursor: pointer; white-space: nowrap; transition: transform .2s var(--spring); } .unlock.badge-unlock .equip-btn:hover { transform: scale(1.05); } /* badge progress: locked badges show how far along you are */ .bp { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; } .bp i { display: block; height: 100%; border-radius: inherit; background: var(--tier-color, var(--main)); box-shadow: 0 0 10px -2px var(--tier-color, var(--main)); transition: width .8s var(--spring); } .bp-t { display: block; margin-top: 4px; font-size: .74rem; font-weight: 650; color: var(--tier-color, var(--sub)); font-variant-numeric: tabular-nums; } .badges-next { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: color-mix(in oklab, var(--main) 9%, var(--bg2)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--main) 25%, transparent); font-size: .88rem; } .badges-next span { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--main); } .badges-next b { font-weight: 650; } .badges-next em { font-style: normal; color: var(--sub); } .badges-next i { font-style: normal; font-weight: 700; color: var(--main); font-variant-numeric: tabular-nums; margin-left: auto; } .badges-guest { margin-top: 8px; padding: 8px 12px; border-radius: 12px; color: var(--text); background: color-mix(in oklab, #ffb400 14%, var(--bg2)); } .badge-batch .batch-imgs { display: flex; flex: none; } .badge-batch .batch-imgs img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-left: -14px; box-shadow: 0 0 0 3px var(--bg2); } .badge-batch .batch-imgs img:first-child { margin-left: 0; } /* Personal-best filter and all-records table */ .pb-filter { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .pb-filter-head h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 600; } .pb-filter-head .panel-note { margin: 0; max-width: 70ch; } .pb-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } .pb-fld { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; } .pb-fld select { font: inherit; font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 9rem; } .pb-all { padding: 6px 20px; } .pb-all > summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; } .pb-all > summary::-webkit-details-marker { display: none; } .pb-all > summary::before { content: '▸'; display: inline-block; margin-right: 8px; transition: transform .15s; } .pb-all[open] > summary::before { transform: rotate(90deg); } .pb-all .table-wrap { overflow-x: auto; padding-bottom: 12px; } .pb-row { cursor: pointer; } .pb-row:hover td, .pb-row:focus-visible td { background: color-mix(in oklab, var(--accent) 8%, transparent); } /* ========================================================= Weekly Competitive Leagues (Duolingo Style) ========================================================= */ .league-hero { display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-lg); padding: 24px; position: relative; overflow: hidden; box-shadow: 0 18px 40px -20px var(--shade); border: 1px solid var(--line); } .league-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .league-badge-title { display: flex; align-items: center; gap: 14px; } .league-emblem-icon { font-size: 2.8rem; line-height: 1; display: grid; place-items: center; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); } .league-hero-head h2 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; } .league-hero-head p { margin: 2px 0 0; color: var(--sub); font-size: .92rem; } .league-countdown-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: color-mix(in oklab, var(--main) 12%, var(--bg2)); border: 1px solid color-mix(in oklab, var(--main) 25%, transparent); font-size: .88rem; font-weight: 600; color: var(--main); } .league-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .league-stat-card { padding: 14px 16px; border-radius: var(--r-md); background: color-mix(in oklab, var(--bg2) 60%, transparent); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .league-stat-lbl { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; } .league-stat-val { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; } .league-stat-sub { font-size: .84rem; color: var(--sub); } /* Zone Tags */ .zone-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .zone-tag.promo { background: rgba(46, 213, 115, 0.16); color: #2ed573; box-shadow: 0 0 10px -2px rgba(46, 213, 115, 0.3); } .zone-tag.safe { background: var(--line); color: var(--sub); } .zone-tag.demote { background: rgba(255, 71, 87, 0.16); color: #ff4757; box-shadow: 0 0 10px -2px rgba(255, 71, 87, 0.3); } /* League Table & Dividers */ .league-table-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); margin-top: 14px; } .league-row-me td { background: color-mix(in oklab, var(--main) 14%, var(--bg2)) !important; font-weight: 600; } .league-row-me .who-cell b { color: var(--main); } .league-divider-tr td { padding: 0 !important; border: 0 !important; } .league-divider-box { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .league-divider-box.promo { background: color-mix(in oklab, #2ed573 14%, transparent); color: #2ed573; border-top: 1.5px dashed color-mix(in oklab, #2ed573 40%, transparent); border-bottom: 1.5px dashed color-mix(in oklab, #2ed573 40%, transparent); } .league-divider-box.demote { background: color-mix(in oklab, #ff4757 14%, transparent); color: #ff4757; border-top: 1.5px dashed color-mix(in oklab, #ff4757 40%, transparent); border-bottom: 1.5px dashed color-mix(in oklab, #ff4757 40%, transparent); } .bounty-pill { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--gold) 15%, transparent); color: var(--gold); font-weight: 700; margin-left: 6px; } /* Results Screen League Badge */ .rw-league { background: color-mix(in oklab, var(--main) 8%, var(--bg2)); border: 1px solid color-mix(in oklab, var(--main) 18%, transparent); } .rw-league .rw-big.up { color: #2ed573; } .rw-league .rw-big.down { color: #ff4757; } .rw-of { font-size: .95rem; font-weight: 500; color: var(--sub); } /* League Rollover Modal */ .league-modal { text-align: center; max-width: 440px; } .league-modal-emblem { font-size: 3.6rem; margin-bottom: 10px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.3)); } .league-modal-card { border-radius: var(--r-md); padding: 14px 18px; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; text-align: left; } .lmc-row { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; } .lmc-row span { color: var(--sub); } .foot-link { color: var(--sub); font-size: .8rem; text-decoration: none; margin-right: 12px; } .foot-link:hover { color: var(--text); text-decoration: underline; } /* Leaderboard: period switch, dates, join button */ .rk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } .rk-head .rk-count { margin: 0; } .rk-period { flex: none; } .rk-mine > .btn { margin-left: auto; flex: none; } .pod-when { font-size: .74rem; color: var(--sub); } .data td.rk-when, .data th.rk-when { color: var(--sub); white-space: nowrap; font-size: .82rem; text-align: right; } @media (max-width: 640px) { .data td.rk-when, .data th.rk-when { display: none; } .rk-mine { flex-wrap: wrap; } .rk-mine > .btn { margin-left: 0; width: 100%; } } /* Phones: the top three as compact rows in rank order (1st, 2nd, 3rd), not a tall stacked podium. */ @media (max-width: 640px) { .podium { grid-template-columns: 1fr; gap: 8px; } .podium > .pod.p1 { order: 1; } .podium > .pod.p2 { order: 2; } .podium > .pod.p3 { order: 3; } .podium > :not(.pod) { display: none; } .pod, .pod.p1 { flex-direction: row; align-items: center; text-align: left; padding: 12px 14px; gap: 12px; flex-wrap: wrap; } .pod img, .pod .av { width: 38px; height: 38px; flex: none; } .pod .medal { min-width: 2.2em; } .pod .nm { flex: 1 1 0; min-width: 0; } .pod .sc { font-size: 1.7rem; } .pod .sc + .panel-note { margin: 0; flex-basis: 100%; padding-left: calc(2.2em + 50px); font-size: .78rem; } .pod .pod-when { display: none; } }