/* ============================================================================ Contourly — production stylesheet Extracted faithfully from docs/contourly-design/screens-v2.dc.html (2a–2p) + reveal prototype (screens-v1.dc.html §1g / v2 §2g). Design language: sticker cards, fat ink outlines, hard shadows (no blur), giant pressable buttons, flag coins, starbursts, sticker rotations. Namespace: .ct-* | Tokens: --ct-* | Mobile-first ≥320px, desktop ≥920px. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* ink + paper */ --ct-ink: #171612; /* borders, text, hard shadows */ --ct-paper: #E7E2D3; /* page background */ --ct-cream: #F6F4EF; /* panel / sheet background */ --ct-white: #fff; /* card background */ /* brand + accents */ --ct-blue: #2741E6; /* primary / cobalt — CTAs, "close" mark */ --ct-yellow: #FFD23E; /* accent — score bursts, share, highlights */ --ct-coral: #FF6B5E; /* hot accent — streaks, error stickers */ --ct-mint: #B7F2CD; /* positive chip (won +12) */ --ct-green: #1E7A46; /* success / "drawing…" live dot */ --ct-amber: #B45309; /* reconnecting */ --ct-red: #C9302B; /* danger, urgent timer, "missed" mark */ /* text */ --ct-text: var(--ct-ink); --ct-text-2: #4A463E; /* secondary copy */ --ct-text-3: #6B6558; /* muted labels */ --ct-text-4: #8A8375; /* faint / hints */ /* lines + surfaces */ --ct-hairline: #EEEAE0; /* row separators on white */ --ct-skeleton: #E5E0D2; /* loading blocks, loss text-shadow */ --ct-disabled: #D9D4C7; /* inactive pips / empty code cells */ /* dark (VS intro, story card, toasts) */ --ct-dark: #171612; --ct-dark-text: #F6F4EF; --ct-dark-text-2: #B5AF9F; --ct-dark-text-3: #5A554A; --ct-dark-check: #7CE0A3; /* toast checkmark */ /* scrim */ --ct-scrim: rgba(23, 22, 18, .45); --ct-dark-shadow: rgba(23, 22, 18, .35); --ct-cream-shadow: rgba(246, 244, 239, .25); /* hard shadows on dark bg */ /* borders */ --ct-bw-hair: 1.5px; --ct-bw-thin: 2px; --ct-bw: 2.5px; /* standard sticker border */ --ct-bw-fat: 3px; --ct-bw-input-shadow: 3px; /* hard shadows — always 0 0, never blurred */ --ct-sh-2: 0 2px 0 var(--ct-ink); --ct-sh-3: 0 3px 0 var(--ct-ink); --ct-sh-4: 0 4px 0 var(--ct-ink); --ct-sh-5: 0 5px 0 var(--ct-ink); --ct-sh-6: 0 6px 0 var(--ct-ink); --ct-sh-7: 0 7px 0 var(--ct-ink); --ct-sh-9: 0 9px 0 var(--ct-ink); --ct-sh-10: 0 10px 0 var(--ct-ink); --ct-sh-12: 0 12px 0 var(--ct-ink); /* radii */ --ct-r-chip: 999px; --ct-r-xs: 8px; --ct-r-sm: 12px; --ct-r-btn-sm: 15px; --ct-r-btn: 18px; --ct-r-btn-lg: 20px; --ct-r-card-sm: 15px; --ct-r-card: 18px; --ct-r-card-lg: 22px; --ct-r-panel: 24px; --ct-r-panel-lg: 26px; --ct-r-canvas: 22px; --ct-r-canvas-lg: 28px; --ct-r-sheet: 28px; --ct-r-screen: 34px; /* type */ --ct-font: 'General Sans', 'Helvetica Neue', sans-serif; --ct-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; /* motion */ --ct-ease-pop: cubic-bezier(.2, 1.4, .4, 1); --ct-ease-fly: cubic-bezier(.22, .8, .24, 1); --ct-press-drop: 4px; /* pressable: shadow collapses, drops 4px */ } /* ---------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ .ct-app, .ct-app * , .ct-app *::before, .ct-app *::after { box-sizing: border-box; } /* Scaffold reset: kill the default UA margin. Without this the 8px top + 8px bottom body margin pushes the 100dvh app shell 16px past the viewport, so the global footer never quite fits on a page-arch screen (the landing must fit header + content + FULL footer in one viewport). Minimal + global. */ html, body { margin: 0; } .ct-app { min-height: 100vh; min-height: 100dvh; margin: 0; display: flex; flex-direction: column; background: var(--ct-paper); color: var(--ct-text); font-family: var(--ct-font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* screen mount point fills the shell so the global footer sticks to the bottom */ #ct-screen-root { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; } #ct-screen-root > .ct-screen { flex: 1 0 auto; } /* viewport-filling paper dot-grid behind app-like (stage) screens (desktop) */ .ct-app[data-arch="stage"]::before, .ct-app[data-arch="page"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--ct-ink) 1.3px, transparent 1.3px); background-size: 24px 24px; opacity: .045; } .ct-app[data-arch] > * { position: relative; z-index: 1; } .ct-app button { font-family: var(--ct-font); } .ct-app a { color: inherit; text-decoration: none; } .ct-app a:hover { color: var(--ct-blue); } .ct-app :focus-visible { outline: 3px solid var(--ct-blue); outline-offset: 2px; border-radius: 6px; } .ct-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------------- 3. KEYFRAMES (exact timings from design doc) -------------------------------------------------------------------------- */ @keyframes ct-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes ct-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } } @keyframes ct-march { to { stroke-dashoffset: -12; } } @keyframes ct-wiggle { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } } @keyframes ct-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes ct-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes ct-spin { to { transform: rotate(360deg); } } @keyframes ct-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* animation helper classes */ .ct-anim-pulse { animation: ct-pulse 2.4s infinite; } .ct-anim-blink { animation: ct-blink 1.4s infinite; } .ct-anim-march { animation: ct-march 1.4s linear infinite; } .ct-anim-wiggle { animation: ct-wiggle 2.4s ease-in-out infinite; } .ct-anim-bob { animation: ct-bob 3s ease-in-out infinite; } .ct-anim-pop { animation: ct-pop .5s var(--ct-ease-pop); } .ct-anim-spin { animation: ct-spin 16s linear infinite; } .ct-anim-spin--slow { animation-duration: 70s; } .ct-anim-shake { animation: ct-shake .4s linear infinite; } /* ---------------------------------------------------------------------------- 4. UTILITIES -------------------------------------------------------------------------- */ /* dot-grid texture — light on cream/white, inverted on blue/dark */ .ct-dots { position: relative; isolation: isolate; } .ct-dots::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--ct-ink) 1.3px, transparent 1.3px); background-size: 22px 22px; opacity: .05; } .ct-dots--canvas::before { background-size: 20px 20px; opacity: .07; background-image: radial-gradient(var(--ct-ink) 1.2px, transparent 1.2px); } .ct-dots--blue::before { background-image: radial-gradient(rgba(255,255,255,.5) 1.3px, transparent 1.3px); opacity: .2; } .ct-dots--dark::before { background-image: radial-gradient(rgba(246,244,239,.5) 1.3px, transparent 1.3px); opacity: .14; } /* sticker rotations (design uses -4…+6deg) */ .ct-rot-n4 { transform: rotate(-4deg); } .ct-rot-n3 { transform: rotate(-3deg); } .ct-rot-n2 { transform: rotate(-2deg); } .ct-rot-n15 { transform: rotate(-1.5deg); } .ct-rot-n1 { transform: rotate(-1deg); } .ct-rot-nh { transform: rotate(-.5deg); } .ct-rot-ph { transform: rotate(.5deg); } .ct-rot-p1 { transform: rotate(1deg); } .ct-rot-p15 { transform: rotate(1.5deg); } .ct-rot-p2 { transform: rotate(2deg); } .ct-rot-p3 { transform: rotate(3deg); } .ct-rot-p4 { transform: rotate(4deg); } .ct-rot-p5 { transform: rotate(5deg); } .ct-rot-p6 { transform: rotate(6deg); } /* ---------------------------------------------------------------------------- 5. BUTTONS — pressable, 3 tiers (2p inventory) press = shadow collapses, button drops 4px -------------------------------------------------------------------------- */ .ct-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border: var(--ct-bw) solid var(--ct-ink); border-radius: 17px; background: var(--ct-white); color: var(--ct-ink); font: 700 15px var(--ct-font); box-shadow: var(--ct-sh-5); cursor: pointer; user-select: none; text-align: center; transition: transform .06s ease, box-shadow .06s ease; } .ct-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--ct-ink); } .ct-btn:active { transform: translateY(var(--ct-press-drop)); box-shadow: 0 1px 0 var(--ct-ink); } .ct-btn:disabled { opacity: .45; pointer-events: none; } .ct-btn--primary { background: var(--ct-blue); color: var(--ct-white); } .ct-btn--accent { background: var(--ct-yellow); color: var(--ct-ink); } .ct-btn--danger { background: var(--ct-red); color: var(--ct-white); } .ct-btn--dark { background: var(--ct-dark); color: var(--ct-dark-text); } /* size tiers (heights straight from artboards) */ .ct-btn--hero { height: 64px; border-radius: var(--ct-r-btn-lg); font-size: 20px; box-shadow: var(--ct-sh-6); letter-spacing: .01em; } .ct-btn--lg { height: 60px; border-radius: var(--ct-r-btn-lg); font-size: 18px; box-shadow: var(--ct-sh-6); } .ct-btn--md { height: 54px; border-radius: var(--ct-r-btn); font-size: 15.5px; } .ct-btn--sm { height: 48px; border-radius: 16px; font-size: 14px; box-shadow: var(--ct-sh-4); } .ct-btn--block { display: flex; width: 100%; } /* square icon button (undo / clear / sound / back) */ .ct-btn--icon { width: 46px; height: 46px; padding: 0; border-radius: 14px; box-shadow: var(--ct-sh-4); display: grid; place-items: center; } /* canvas tool buttons — mobile 62px, desktop 72px */ .ct-btn--tool { width: 62px; height: 62px; padding: 0; border-radius: 20px; box-shadow: var(--ct-sh-5); display: grid; place-items: center; } /* "Hold to finish" — round yellow pill with hold-progress dot */ .ct-btn--hold { height: 62px; padding: 0 26px; border-radius: 31px; background: var(--ct-yellow); font-size: 16.5px; } .ct-hold-dot { width: 20px; height: 20px; flex: none; border: var(--ct-bw) solid var(--ct-ink); border-radius: 50%; background: conic-gradient(var(--ct-ink) 0 calc(var(--ct-hold, 0) * 1%), transparent calc(var(--ct-hold, 0) * 1%) 100%); } /* text-only link buttons ("Cancel", "Skip", "Log out") */ .ct-btn--ghost { border: 0; background: transparent; box-shadow: none; height: auto; padding: 8px 10px; color: var(--ct-text-2); } .ct-btn--ghost:hover, .ct-btn--ghost:active { transform: none; box-shadow: none; color: var(--ct-ink); } .ct-btn--ghost.ct-btn--danger-text { color: var(--ct-red); font: 600 12.5px var(--ct-font); } /* ---------------------------------------------------------------------------- 6. CHIPS — sticker pills -------------------------------------------------------------------------- */ .ct-chip { display: inline-flex; align-items: center; gap: 6px; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-white); box-shadow: var(--ct-sh-3); padding: 6px 13px; font: 700 12px var(--ct-font); color: var(--ct-ink); white-space: nowrap; } .ct-chip--yellow { background: var(--ct-yellow); } .ct-chip--coral { background: var(--ct-coral); color: var(--ct-white); } .ct-chip--mint { background: var(--ct-mint); } .ct-chip--blue { background: var(--ct-blue); color: var(--ct-white); } .ct-chip--red { background: var(--ct-red); color: var(--ct-white); } .ct-chip--muted { color: var(--ct-text-3); } .ct-chip--flat { box-shadow: none; } /* e.g. "won +12" inside cards */ /* stat chips (landing/profile header row) — bigger, fatter */ .ct-chip--stat { border-width: var(--ct-bw); box-shadow: var(--ct-sh-4); padding: 9px 15px; font-size: 14px; } /* sticker chip — the rotated "no sign-up needed" seal (design 2a) + proof chips */ .ct-chip--sticker { border-width: var(--ct-bw); box-shadow: var(--ct-sh-4); padding: 9px 16px; font-size: 13px; } .ct-chip--sticker.ct-rot-n2 { transform: rotate(-2deg); } /* guest-mode dashed chip — no shadow, faint */ .ct-chip--guest { border: var(--ct-bw) dashed var(--ct-text-4); box-shadow: none; color: var(--ct-text-3); } /* corner badge — rotated sticker sitting on a card edge ("gone!", "full!", "oops") */ .ct-badge { position: absolute; top: -14px; left: 18px; display: inline-flex; border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-white); box-shadow: var(--ct-sh-3); padding: 5px 13px; font: 700 12.5px var(--ct-font); transform: rotate(-4deg); white-space: nowrap; } .ct-badge--right { left: auto; right: 18px; transform: rotate(4deg); } .ct-badge--yellow { background: var(--ct-yellow); } .ct-badge--coral { background: var(--ct-coral); color: var(--ct-white); } .ct-badge--red { background: var(--ct-red); color: var(--ct-white); } .ct-badge--muted { color: var(--ct-text-4); } /* "by Countly" stamp chip */ .ct-stamp { display: inline-flex; align-items: center; gap: 4px; border: var(--ct-bw-hair) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-white); box-shadow: var(--ct-sh-2); padding: 3px 8px; font: 700 9.5px var(--ct-font); white-space: nowrap; transform: rotate(-2deg); } .ct-stamp img, .ct-stamp .ct-stamp__mark { width: 10px; height: 10px; } /* ---------------------------------------------------------------------------- 7. FLAG COINS -------------------------------------------------------------------------- */ .ct-coin { display: grid; place-items: center; width: 46px; height: 46px; border: var(--ct-bw) solid var(--ct-ink); border-radius: 50%; background: var(--ct-white); box-shadow: var(--ct-sh-4); font-size: 22px; flex: none; } .ct-coin--sm { width: 34px; height: 34px; border-width: var(--ct-bw-thin); box-shadow: none; font-size: 17px; } .ct-coin--md { width: 74px; height: 74px; font-size: 30px; } .ct-coin--lg { width: 88px; height: 88px; border-width: var(--ct-bw-fat); box-shadow: var(--ct-sh-5); font-size: 38px; } .ct-coin--xl { width: 110px; height: 110px; border-width: var(--ct-bw-fat); box-shadow: var(--ct-sh-6); font-size: 44px; } .ct-coin--xxl { width: 150px; height: 150px; border-width: var(--ct-bw-fat); box-shadow: 0 8px 0 var(--ct-ink); font-size: 58px; } .ct-coin--hero { width: 168px; height: 168px; border-width: var(--ct-bw-fat); box-shadow: 0 8px 0 var(--ct-ink); font-size: 64px; } /* unknown opponent */ .ct-coin--unknown { border-style: dashed; border-color: var(--ct-text-4); box-shadow: none; color: var(--ct-text-4); font: 700 40px var(--ct-font); } /* VS-intro colored coins on dark */ .ct-coin--vs { width: 132px; height: 132px; border: var(--ct-bw-fat) solid var(--ct-dark-text); box-shadow: 0 7px 0 var(--ct-cream-shadow); font-size: 52px; } .ct-coin--vs-blue { background: var(--ct-blue); } .ct-coin--vs-coral { background: var(--ct-coral); } .ct-coin--vs-green { background: var(--ct-green); } /* ---------------------------------------------------------------------------- 8. SCORE BURST — the one trophy shape (12-point star, svg #burst12) markup: .ct-burst > svg.ct-burst__star + .ct-burst__num -------------------------------------------------------------------------- */ .ct-burst { position: relative; width: 84px; height: 84px; flex: none; } .ct-burst__star { position: absolute; inset: 0; width: 100%; height: 100%; } .ct-burst__star--spin { animation: ct-spin 16s linear infinite; } .ct-burst__num { position: absolute; inset: 0; display: grid; place-items: center; font: 700 32px var(--ct-font); letter-spacing: -.03em; } /* fills are set on the svg : yellow = winner / your score; white = other */ .ct-burst--loser .ct-burst__num { color: var(--ct-text-4); } .ct-burst--xs { width: 44px; height: 44px; } .ct-burst--xs .ct-burst__num { font-size: 11px; } .ct-burst--sm { width: 56px; height: 56px; } .ct-burst--sm .ct-burst__num { font-size: 22px; } .ct-burst--md { width: 78px; height: 78px; } .ct-burst--md .ct-burst__num { font-size: 30px; } .ct-burst--lg { width: 130px; height: 130px; } .ct-burst--lg .ct-burst__num { font-size: 48px; } .ct-burst--xl { width: 136px; height: 136px; } .ct-burst--xl .ct-burst__num { font-size: 54px; letter-spacing: -.04em; } /* ---------------------------------------------------------------------------- 9. STICKER CARDS + PANELS -------------------------------------------------------------------------- */ .ct-card { position: relative; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card); box-shadow: var(--ct-sh-5); padding: 14px 16px; } .ct-card--flat { box-shadow: var(--ct-sh-4); } .ct-card--lg { border-radius: var(--ct-r-card-lg); box-shadow: var(--ct-sh-6); padding: 18px; } /* cream panel (dialog / system-state card) */ .ct-panel { position: relative; background: var(--ct-cream); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-panel); box-shadow: var(--ct-sh-7); padding: 22px; } /* hero card with offset ink plate behind (landing live-match card) */ .ct-card--plate { border-radius: var(--ct-r-btn-lg); box-shadow: none; } .ct-plate { position: relative; } .ct-plate::before { content: ""; position: absolute; inset: 10px -6px -8px 8px; background: var(--ct-ink); border-radius: var(--ct-r-btn-lg); } .ct-plate > .ct-card--plate { position: relative; } /* drawing result card (player drawing + name + score) */ .ct-draw-card { width: 156px; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card); box-shadow: var(--ct-sh-5); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; } .ct-draw-card__name { font: 700 13px var(--ct-font); } .ct-draw-card__score { font: 700 32px/1 var(--ct-font); } .ct-draw-card__score--loser { color: var(--ct-text-4); } .ct-draw-card--winner-badge { position: absolute; top: -12px; right: -8px; } /* ---------------------------------------------------------------------------- 10. TIMER -------------------------------------------------------------------------- */ /* plain coin countdown */ .ct-timer { display: grid; place-items: center; width: 58px; height: 58px; border: var(--ct-bw) solid var(--ct-ink); border-radius: 50%; background: var(--ct-white); box-shadow: var(--ct-sh-4); font: 700 20px var(--ct-font); flex: none; } /* last 5 s: fills red, grows, pulses, number gains "!" (set in JS) */ .ct-timer--urgent { width: 66px; height: 66px; border-width: var(--ct-bw-fat); background: var(--ct-red); color: var(--ct-white); font-size: 24px; animation: ct-pulse 1s infinite; } /* in-canvas urgent variant (2f last-5s artboard: 76px, floats over canvas) */ .ct-timer--canvas-urgent { position: absolute; top: 10px; right: 10px; width: 76px; height: 76px; box-shadow: var(--ct-sh-5); font-size: 30px; } /* ring timer (drawing screen) — svg ring + number well */ .ct-timer-ring { position: absolute; top: 10px; right: 10px; width: 64px; height: 64px; } .ct-timer-ring__svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ct-timer-ring__num { position: absolute; inset: 6px; border-radius: 50%; display: grid; place-items: center; font: 700 19px var(--ct-font); } /* stroke colors for the ring: track #E5E0D2 w12, fill #2741E6 w12 round-cap */ .ct-timer-ring__track { stroke: var(--ct-skeleton); } .ct-timer-ring__fill { stroke: var(--ct-blue); } /* ---------------------------------------------------------------------------- 11. CANVAS FRAME + DRAWING SCREEN PARTS -------------------------------------------------------------------------- */ .ct-canvas { position: relative; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-canvas); box-shadow: var(--ct-sh-6); overflow: hidden; touch-action: none; /* pointer capture while drawing */ } .ct-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; } .ct-canvas__hint { position: absolute; bottom: 12px; right: 16px; font: 600 12px var(--ct-font); color: var(--ct-text-4); transform: rotate(-1deg); pointer-events: none; } /* locked-in banner (done early) */ .ct-canvas__locked { position: absolute; top: 14px; left: 50%; transform: translateX(-50%) rotate(-3deg); display: inline-flex; border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-blue); color: var(--ct-white); box-shadow: var(--ct-sh-4); padding: 8px 18px; font: 700 14px var(--ct-font); } /* one-time empty-canvas nudge at ~10 s */ .ct-canvas__nudge { position: absolute; left: 50%; top: 40%; transform: translateX(-50%) rotate(-1.5deg); display: flex; align-items: center; gap: 12px; background: var(--ct-yellow); border: var(--ct-bw) solid var(--ct-ink); border-radius: 16px; box-shadow: var(--ct-sh-4); padding: 12px 16px; font: 700 14.5px var(--ct-font); width: max-content; max-width: 88%; pointer-events: none; } /* ---------------------------------------------------------------------------- 12. STATUS CHIPS (rival presence) -------------------------------------------------------------------------- */ .ct-status { display: inline-flex; align-items: center; gap: 7px; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-white); box-shadow: var(--ct-sh-3); padding: 6px 12px; font: 600 12px var(--ct-font); color: var(--ct-text-2); white-space: nowrap; } .ct-status__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; border: var(--ct-bw-hair) solid var(--ct-ink); background: var(--ct-green); } .ct-status--drawing .ct-status__dot { animation: ct-blink 1.4s infinite; } .ct-status--done { background: var(--ct-mint); font-weight: 700; color: var(--ct-ink); } .ct-status--reconnecting { background: var(--ct-yellow); font-weight: 700; color: var(--ct-ink); } .ct-status--reconnecting .ct-status__dot { background: var(--ct-amber); animation: none; } .ct-status--left { background: var(--ct-coral); color: var(--ct-white); font-weight: 700; } /* thinking dots trio (waiting states) */ .ct-dots-trio { display: flex; gap: 7px; align-items: center; } .ct-dots-trio i { width: 10px; height: 10px; border-radius: 50%; border: var(--ct-bw-thin) solid var(--ct-ink); animation: ct-blink 1.2s infinite; } .ct-dots-trio i:nth-child(1) { background: var(--ct-blue); } .ct-dots-trio i:nth-child(2) { background: var(--ct-yellow); animation-delay: .2s; } .ct-dots-trio i:nth-child(3) { background: var(--ct-coral); animation-delay: .4s; } /* ---------------------------------------------------------------------------- 13. REVEAL LEGEND — pattern + marker + label, never color alone -------------------------------------------------------------------------- */ .ct-legend { display: flex; justify-content: center; gap: 14px; font: 700 11px var(--ct-font); color: var(--ct-text-2); } .ct-legend__item { display: flex; align-items: center; gap: 5px; } .ct-legend__close { width: 16px; height: 4px; background: var(--ct-blue); border-radius: 2px; } .ct-legend__off { width: 16px; height: 0; border-top: 2.5px dashed var(--ct-ink); } .ct-legend__miss { width: 16px; height: 0; border-top: 2.5px dotted var(--ct-red); } /* bar variant pinned to reveal panel bottom */ .ct-legend--bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 0; background: var(--ct-white); border-top: var(--ct-bw-thin) solid var(--ct-ink); } /* ---------------------------------------------------------------------------- 14. TABS (leaderboard week/all-time, share 1:1/9:16) -------------------------------------------------------------------------- */ .ct-tabs { display: inline-flex; border: var(--ct-bw) solid var(--ct-ink); border-radius: 16px; padding: 4px; background: var(--ct-white); box-shadow: var(--ct-sh-4); } .ct-tabs__tab { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 8px 22px; border-radius: 11px; font: 700 14px var(--ct-font); color: var(--ct-text-2); } .ct-tabs__tab[aria-selected="true"], .ct-tabs__tab.is-active { background: var(--ct-blue); color: var(--ct-white); } .ct-tabs--sm { border-radius: 14px; padding: 3px; } .ct-tabs--sm .ct-tabs__tab { padding: 6px 13px; font-size: 12.5px; border-radius: 10px; } /* ---------------------------------------------------------------------------- 15. INPUTS + VALIDATION -------------------------------------------------------------------------- */ .ct-field { display: block; } .ct-field__label { font: 700 13.5px var(--ct-font); margin-bottom: 8px; display: block; } .ct-input { display: flex; align-items: center; width: 100%; height: 56px; border: var(--ct-bw) solid var(--ct-ink); border-radius: 17px; background: var(--ct-white); box-shadow: var(--ct-sh-3); padding: 0 16px; font: 600 15.5px var(--ct-font); color: var(--ct-ink); } .ct-input::placeholder { color: var(--ct-text-4); font-weight: 500; } .ct-input:focus, .ct-input.is-focus { outline: none; border-color: var(--ct-blue); box-shadow: 0 4px 0 var(--ct-blue); } .ct-input--sm { height: 50px; border-radius: var(--ct-r-btn-sm); font-size: 15px; } .ct-input.is-error { border-color: var(--ct-red); box-shadow: 0 3px 0 var(--ct-red); } .ct-input.is-success { border-color: var(--ct-green); box-shadow: 0 3px 0 var(--ct-green); } .ct-field__msg { font: 600 12px var(--ct-font); margin-top: 5px; } .ct-field__msg--error { color: var(--ct-red); } .ct-field__msg--success { color: var(--ct-green); } .ct-field__hint { font: 600 11px var(--ct-font); color: var(--ct-text-4); } /* OTP code cells */ .ct-code { display: flex; gap: 7px; justify-content: center; } .ct-code__cell { width: 44px; height: 54px; display: grid; place-items: center; border: var(--ct-bw-thin) solid var(--ct-disabled); border-radius: var(--ct-r-sm); background: var(--ct-white); font: 700 24px var(--ct-font); text-align: center; } .ct-code__cell.is-filled { border: var(--ct-bw) solid var(--ct-ink); background: var(--ct-yellow); box-shadow: var(--ct-sh-3); } .ct-code__cell.is-active { border: var(--ct-bw) solid var(--ct-blue); box-shadow: 0 3px 0 var(--ct-blue); } .ct-caret { width: 2.5px; height: 22px; background: var(--ct-blue); animation: ct-blink 1.1s infinite; } /* inline error/notice rows (login code & link errors) */ .ct-notice { padding: 11px 14px; background: var(--ct-white); border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 14px; box-shadow: var(--ct-sh-3); font: 500 12.5px/1.45 var(--ct-font); color: var(--ct-text-2); } .ct-notice b { font: 700 13px var(--ct-font); color: var(--ct-ink); } .ct-notice--error { border-color: var(--ct-red); box-shadow: 0 3px 0 var(--ct-red); } .ct-notice--error b { color: var(--ct-red); } /* checkbox row (marketing opt-in, delete confirm) */ .ct-check { display: flex; align-items: center; gap: 10px; cursor: pointer; } .ct-check__box { width: 22px; height: 22px; flex: none; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 7px; background: var(--ct-white); display: grid; place-items: center; } .ct-check__box--danger { border-color: var(--ct-red); } .ct-check input:checked + .ct-check__box { background: var(--ct-yellow); } .ct-check__label { font: 600 13px var(--ct-font); color: var(--ct-text-2); } /* ---------------------------------------------------------------------------- 16. TOASTS + BANNERS -------------------------------------------------------------------------- */ .ct-toast { display: inline-flex; align-items: center; gap: 8px; width: fit-content; background: var(--ct-dark); color: var(--ct-dark-text); border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ct-dark-shadow); padding: 9px 16px; font: 600 13px var(--ct-font); } .ct-toast svg { color: var(--ct-dark-check); } /* yellow nudge banner (guest points / sign-in) */ .ct-banner { display: flex; align-items: center; gap: 12px; background: var(--ct-yellow); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card); box-shadow: var(--ct-sh-5); padding: 13px 16px; font: 600 12.5px/1.4 var(--ct-font); } .ct-banner__body { flex: 1; } /* offline banner — sticky under header, dark */ .ct-offline { display: flex; align-items: center; gap: 10px; background: var(--ct-dark); color: var(--ct-dark-text); border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: var(--ct-r-card-sm); box-shadow: 0 3px 0 rgba(23, 22, 18, .4); padding: 12px 14px; font: 600 12.5px var(--ct-font); } .ct-offline__body { flex: 1; } .ct-offline__retry { font: 700 12px var(--ct-font); color: var(--ct-yellow); cursor: pointer; } .ct-offline svg { color: var(--ct-yellow); } /* reconnect card (in-match, ≤10 s) */ .ct-reconnect { background: var(--ct-cream); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-panel); box-shadow: var(--ct-sh-7); padding: 20px; } .ct-reconnect__row { display: flex; gap: 12px; align-items: center; } .ct-reconnect__icon { width: 44px; height: 44px; flex: none; border: var(--ct-bw) dashed var(--ct-ink); border-radius: 50%; display: grid; place-items: center; background: var(--ct-yellow); animation: ct-wiggle 1.6s ease-in-out infinite; } .ct-reconnect__title { font: 700 16.5px var(--ct-font); } .ct-reconnect__sub { font: 500 12.5px var(--ct-font); color: var(--ct-text-2); margin-top: 2px; } .ct-progress { height: 10px; margin-top: 14px; border: var(--ct-bw-thin) solid var(--ct-ink); background: var(--ct-white); border-radius: 6px; position: relative; overflow: hidden; } .ct-progress__fill { position: absolute; inset: 0 auto 0 0; width: var(--ct-progress, 55%); background: var(--ct-yellow); } /* small horizontal meter used in desktop leaderboard rows */ .ct-meter { height: 12px; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 7px; background: var(--ct-white); position: relative; overflow: hidden; } .ct-meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--ct-meter, 50%); background: var(--ct-yellow); } /* consent (cookie) card — contained sticker anchored bottom-left, never a full-bleed bar. Mobile spans the column; desktop caps its width so it reads as a card, not a banner. */ .ct-consent { position: fixed; left: 14px; right: 14px; bottom: 20px; z-index: 60; transform: rotate(.8deg); background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card); padding: 13px 15px; box-shadow: var(--ct-sh-5); } /* the page-archetype centering (.ct-screen--page > *) sets width:100% + max-width on every direct child; the fixed consent card must escape it — scope wins. */ .ct-screen--page > .ct-consent { width: auto; max-width: calc(100vw - 28px); margin: 0; } @media (min-width: 768px) { .ct-consent, .ct-screen--page > .ct-consent { left: 24px; right: auto; bottom: 24px; width: 340px; max-width: calc(100vw - 48px); } } .ct-consent__text { font: 500 12.5px/1.45 var(--ct-font); color: var(--ct-text-2); } .ct-consent__text a { text-decoration: underline; text-underline-offset: 2px; color: var(--ct-ink); font-weight: 600; } .ct-consent__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .ct-consent__decline { border: 0; background: transparent; font: 700 13px var(--ct-font); color: var(--ct-text-2); padding: 8px 10px; cursor: pointer; } .ct-consent__accept { border: var(--ct-bw-thin) solid var(--ct-ink); background: var(--ct-blue); color: var(--ct-white); font: 700 13px var(--ct-font); border-radius: 11px; padding: 8px 16px; box-shadow: var(--ct-sh-3); cursor: pointer; } /* ---------------------------------------------------------------------------- 17. MODAL / BOTTOM SHEET -------------------------------------------------------------------------- */ .ct-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--ct-scrim); } .ct-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ct-cream); border-top: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-sheet) var(--ct-r-sheet) 0 0; padding: 16px 20px calc(42px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 0 rgba(23, 22, 18, .25); } .ct-sheet__handle { width: 44px; height: 6px; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 4px; background: var(--ct-white); margin: 0 auto; } /* centered modal dialog = cream panel */ .ct-modal { position: fixed; z-index: 90; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(390px, calc(100vw - 32px)); } /* ---------------------------------------------------------------------------- 18. LEADERBOARD — rows, podium, pinned self row -------------------------------------------------------------------------- */ .ct-lb-row { display: flex; align-items: center; gap: 11px; min-height: 52px; border-bottom: var(--ct-bw-thin) solid var(--ct-hairline); font: 600 15px var(--ct-font); } .ct-lb-row:last-child { border-bottom: 0; } .ct-lb-row__rank { width: 26px; font: 700 14px var(--ct-font); text-align: right; color: var(--ct-text-3); } .ct-lb-row__flag { font-size: 21px; } .ct-lb-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-lb-row__pts { font: 700 15px var(--ct-font); } .ct-lb-row--top .ct-lb-row__rank { color: var(--ct-ink); } .ct-lb-row--top .ct-lb-row__name { font-weight: 700; } .ct-lb-row--dim { opacity: .45; } /* pinned self row — cobalt sticker */ .ct-lb-self { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 0 15px; background: var(--ct-blue); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card); box-shadow: var(--ct-sh-5); transform: rotate(-.6deg); color: var(--ct-white); font: 700 15px var(--ct-font); } .ct-lb-self__rank { font: 700 14px var(--ct-font); } .ct-lb-self__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-lb-self__pts { font: 700 16px var(--ct-font); color: var(--ct-yellow); } /* guest variant — nameless dashed row */ .ct-lb-self--guest { background: var(--ct-white); border: var(--ct-bw) dashed var(--ct-text-4); box-shadow: none; transform: none; color: var(--ct-text-2); font-weight: 600; } .ct-lb-self--guest .ct-lb-self__rank, .ct-lb-self--guest .ct-lb-self__pts { color: var(--ct-text-3); } /* podium */ .ct-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; } .ct-podium__slot { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; } .ct-podium__name { font: 700 13px var(--ct-font); } .ct-podium__base { width: 92px; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-bottom: 0; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ct-podium__base b { font: 700 19px var(--ct-font); } .ct-podium__base span { font: 600 11px var(--ct-font); color: var(--ct-text-3); } .ct-podium__slot--1 .ct-podium__name { font-size: 14px; } .ct-podium__slot--1 .ct-podium__base { width: 100px; height: 78px; background: var(--ct-yellow); } .ct-podium__slot--1 .ct-podium__base b { font-size: 24px; } .ct-podium__slot--1 .ct-podium__base span { font-weight: 700; font-size: 12px; color: var(--ct-ink); } .ct-podium__slot--2 .ct-podium__base { height: 56px; } .ct-podium__slot--3 .ct-podium__base { height: 44px; } .ct-podium__crown { position: absolute; top: -30px; transform: rotate(8deg); } /* loading skeleton */ .ct-skel { background: var(--ct-skeleton); border-radius: 5px; animation: ct-blink 1.4s infinite; } .ct-skel--circle { border-radius: 50%; } /* ---------------------------------------------------------------------------- 19. VERDICT LOCKUPS (italic display + hard text-shadow) requires the 701 italic cut of General Sans -------------------------------------------------------------------------- */ .ct-verdict { display: inline-block; font: 700 44px var(--ct-font); font-style: italic; letter-spacing: -.02em; transform: rotate(-4deg); text-shadow: 3px 3px 0 var(--ct-yellow); } .ct-verdict--loss { font-size: 34px; color: var(--ct-text-2); transform: rotate(2deg); text-shadow: 2.5px 2.5px 0 var(--ct-skeleton); } .ct-verdict--draw { font-size: 36px; transform: rotate(-2deg); text-shadow: 2.5px 2.5px 0 var(--ct-yellow); } .ct-verdict--on-burst { text-shadow: 3px 3px 0 var(--ct-white); } /* confetti bits (result / verdict backdrops) */ .ct-confetti { position: absolute; border: var(--ct-bw-hair) solid var(--ct-ink); pointer-events: none; } .ct-confetti--bar { width: 13px; height: 5px; border-radius: 3px; } .ct-confetti--dot { width: 9px; height: 9px; border-radius: 50%; } .ct-confetti--blue { background: var(--ct-blue); } .ct-confetti--coral { background: var(--ct-coral); } .ct-confetti--yellow { background: var(--ct-yellow); } .ct-confetti--mint { background: var(--ct-mint); } /* ---------------------------------------------------------------------------- 20. LOGO + HEADER + FOOTER -------------------------------------------------------------------------- */ .ct-logo { display: inline-flex; align-items: center; gap: 8px; background: var(--ct-blue); border: var(--ct-bw) solid var(--ct-ink); border-radius: 13px; box-shadow: var(--ct-sh-4); padding: 8px 14px; transform: rotate(-2deg); } .ct-logo__name { font: 700 17px/1 var(--ct-font); color: var(--ct-white); } .ct-logo__mark { width: 21px; height: 21px; } /* Italy outline, white stroke */ .ct-logo--sm { border-radius: 11px; padding: 5px 10px; box-shadow: var(--ct-sh-3); } .ct-logo--sm .ct-logo__name { font-size: 12.5px; } .ct-logo--sm .ct-logo__mark { width: 16px; height: 16px; } /* logo + "by Countly" stamp hanging under it */ .ct-logo-lockup { position: relative; display: inline-block; } .ct-logo-lockup .ct-stamp { position: absolute; left: 10px; bottom: -12px; } .ct-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 18px 0; position: relative; } .ct-header__actions { display: flex; gap: 9px; align-items: center; } /* — global brand header (page-like screens). Mobile: compact (logo + Sign in); Leaderboard / How-to-play collapse away (they live in the landing links row + the footer). Desktop: full-width bar with 46px nav pills, per reference 2a. */ .ct-header--page { align-items: center; gap: 16px; padding: 14px 18px 0; } .ct-header--page .ct-header__actions { margin-left: auto; gap: 10px; } .ct-header__brand { display: inline-block; cursor: pointer; } .ct-nav__link { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border: var(--ct-bw) solid var(--ct-ink); border-radius: 14px; background: var(--ct-white); color: var(--ct-ink); box-shadow: var(--ct-sh-3); font: 700 14px var(--ct-font); white-space: nowrap; transition: transform .06s ease, box-shadow .06s ease; } .ct-nav__link:hover { transform: translateY(-1px); box-shadow: var(--ct-sh-4); color: var(--ct-ink); } .ct-nav__link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ct-ink); } .ct-nav__link--cta { background: var(--ct-yellow); box-shadow: var(--ct-sh-4); } .ct-nav__link--icon { width: 44px; padding: 0; justify-content: center; } /* collapsible nav items — hidden on mobile, shown from tablet up */ .ct-nav__link--collapse { display: none; } @media (min-width: 768px) { .ct-header--page { padding: 20px 32px 0; } .ct-nav__link--collapse { display: inline-flex; } .ct-nav__link { height: 46px; padding: 0 16px; } } /* — global brand footer (rendered once by app.js, shown only on page arch). — */ #ct-site-footer { display: none; flex: none; } .ct-app[data-arch="page"] #ct-site-footer { display: block; } .ct-site-footer { border-top: var(--ct-bw) solid var(--ct-ink); background: var(--ct-white); padding: 15px 20px calc(15px + env(safe-area-inset-bottom, 0px)); } .ct-site-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font: 500 13.5px var(--ct-font); color: var(--ct-text-2); } .ct-site-footer__inner b { color: var(--ct-ink); } .ct-site-footer__mark { width: 20px; height: 20px; flex: none; } .ct-site-footer__lede { flex: 1 1 auto; min-width: 200px; } .ct-site-footer__cta { font: 700 13px var(--ct-font); color: var(--ct-blue); white-space: nowrap; } .ct-site-footer__ticker { flex: 1 0 100%; order: 3; font: 500 11px var(--ct-mono); letter-spacing: .14em; color: var(--ct-text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 768px) { .ct-site-footer { padding-left: 32px; padding-right: 32px; } .ct-site-footer__lede { flex: 0 1 auto; } .ct-site-footer__ticker { flex: 0 0 auto; order: 0; margin-left: auto; } } /* — owl mascot (authored, #ct-owl). Fixed bottom-right on page-like desktop; a playful peeker. Decorative + pointer-events:none so it never eats a click. Hidden on mobile/tablet and on stage screens. — */ #ct-mascot-root { display: none; } .ct-mascot { position: fixed; right: 26px; bottom: 74px; z-index: 3; width: 132px; pointer-events: none; filter: drop-shadow(0 6px 0 rgba(23, 22, 18, .16)); animation: ct-bob 4.5s ease-in-out infinite; } .ct-mascot svg { display: block; width: 100%; height: auto; } @media (min-width: 1024px) { .ct-app[data-arch="page"][data-owl="1"] #ct-mascot-root { display: block; } } /* page-title header (leaderboard / profile / login / how-to) */ .ct-pagehead { display: flex; align-items: center; gap: 12px; padding: 10px 18px 0; } .ct-pagehead__back { font: 700 17px var(--ct-font); background: none; border: 0; cursor: pointer; padding: 4px 8px; } .ct-pagehead__title { font: 700 24px var(--ct-font); letter-spacing: -.02em; } /* footer bar (desktop landing / permalink) */ .ct-footer { display: flex; align-items: center; gap: 14px; border-top: var(--ct-bw) solid var(--ct-ink); background: var(--ct-white); padding: 16px 32px; font: 500 13.5px var(--ct-font); color: var(--ct-text-2); } .ct-footer b { color: var(--ct-ink); } .ct-footer__cta { font: 700 13px var(--ct-font); color: var(--ct-blue); white-space: nowrap; } .ct-footer__baseline { margin-left: auto; font: 500 11px var(--ct-mono); letter-spacing: .14em; color: var(--ct-text-4); white-space: nowrap; } .ct-footer img, .ct-footer__mark { width: 20px; height: 20px; } /* footer text links row (How to play · Leaderboard · Privacy) */ .ct-links { display: flex; justify-content: center; gap: 20px; font: 600 13px var(--ct-font); color: var(--ct-text-2); } .ct-links a { cursor: pointer; } .ct-links .ct-links--faint, .ct-links a.ct-links--faint { color: var(--ct-text-4); } /* Countly promo sticker (footer nudge / every-3rd-result card) */ .ct-promo { display: flex; align-items: center; gap: 10px; background: var(--ct-white); border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 16px; box-shadow: var(--ct-sh-4); padding: 11px 13px; font: 500 11.5px/1.4 var(--ct-font); color: var(--ct-text-2); } .ct-promo img { width: 22px; height: 22px; flex: none; } .ct-promo__body { flex: 1; } .ct-promo__body b { color: var(--ct-ink); } .ct-promo__cta { font: 700 12px var(--ct-font); color: var(--ct-blue); white-space: nowrap; cursor: pointer; } .ct-promo__close { font: 600 12px var(--ct-font); color: var(--ct-text-4); cursor: pointer; padding: 4px; } /* pill-shaped promo (landing bottom / permalink "What's Countly?") */ .ct-promo--pill { display: inline-flex; width: auto; border-radius: var(--ct-r-chip); box-shadow: var(--ct-sh-3); padding: 7px 14px; font: 600 11.5px var(--ct-font); transform: rotate(-.6deg); } .ct-promo--pill img { width: 13px; height: 13px; } /* ---------------------------------------------------------------------------- 21. ONBOARDING PIPS -------------------------------------------------------------------------- */ .ct-pips { display: flex; gap: 7px; } .ct-pips i { width: 14px; height: 9px; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 5px; background: var(--ct-white); } .ct-pips i.is-active { width: 26px; background: var(--ct-yellow); } .ct-pips i.is-done { background: var(--ct-disabled); } /* ---------------------------------------------------------------------------- 22. SHARE SHEET PARTS -------------------------------------------------------------------------- */ .ct-share-title { font: 700 19px var(--ct-font); letter-spacing: -.01em; } .ct-share-icons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .ct-share-icons__item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; } .ct-share-icons__tile { width: 50px; height: 50px; border: var(--ct-bw) solid var(--ct-ink); border-radius: 15px; background: var(--ct-white); box-shadow: var(--ct-sh-4); display: grid; place-items: center; transition: transform .06s ease, box-shadow .06s ease; } .ct-share-icons__item:active .ct-share-icons__tile { transform: translateY(3px); box-shadow: 0 1px 0 var(--ct-ink); } .ct-share-icons__tile--primary { background: var(--ct-blue); } .ct-share-icons__tile--primary svg { stroke: var(--ct-white); } .ct-share-icons__label { font: 600 10px var(--ct-font); color: var(--ct-text-2); } .ct-share-icons__label--primary { font-weight: 700; color: var(--ct-blue); } /* live card preview inside the sheet (rendered by cards.js, shown scaled) */ .ct-share-preview { margin: 16px auto 0; width: 274px; transform: rotate(-1.2deg); } .ct-share-preview img, .ct-share-preview canvas { display: block; width: 100%; height: auto; border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card); box-shadow: var(--ct-sh-5); background: var(--ct-white); } /* ---------------------------------------------------------------------------- 23. SCREEN SHELL + PER-SCREEN LAYOUTS (2a–2o) Mobile-first: single column, max 430px. Desktop variants at ≥920px where the design ships one (landing, drawing, result, leaderboard, permalink). -------------------------------------------------------------------------- */ .ct-screen { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; width: 100%; max-width: 430px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ct-cream); overflow-x: clip; } /* full-bleed color moments */ .ct-screen--blue { background: var(--ct-blue); color: var(--ct-white); } .ct-screen--dark { background: var(--ct-dark); color: var(--ct-dark-text); } .ct-screen--wide { max-width: none; } /* legacy: screens with a JS desktop layout */ /* --------------------------------------------------------------------------- SCREEN ARCHETYPES (Wave-1 responsive system — see docs/CONTOURLY_CLASS_CONTRACT.md) Breakpoints: mobile <768 · tablet 768–1023 · desktop ≥1024. Two archetypes a screen opts into on its .ct-screen root: .ct-screen--page page-like (landing, leaderboard, profile, how-to): full- width chrome (brand header + global footer + owl mascot), multi-column on desktop. App.js sets data-arch="page". .ct-screen--stage app-like (queue, vs, draw, reveal, result, share, login, system): a comfortably-sized centered stage on the paper dot-grid — never a stretched full-width, never a 500px phone. Both are transparent so the app-shell dot-grid shows through; both stay mobile- first and ADD desktop rules below. -------------------------------------------------------------------------- */ .ct-screen--page, .ct-screen--stage { max-width: none; width: 100%; margin: 0; /* the app shell (.ct-app) owns the 100dvh min-height + sticky global footer; the screen just fills #ct-screen-root (flex:1) so it must not re-assert it */ min-height: 0; background: transparent; } /* colour-moment stages (announce, onboarding step 1, VS intro) combine --stage with --blue/--dark. The single-class --stage transparent above would otherwise win by source order and kill the colour; these two-class rules restore it. */ .ct-screen--stage.ct-screen--blue { background: var(--ct-blue); color: var(--ct-white); } .ct-screen--stage.ct-screen--dark { background: var(--ct-dark); color: var(--ct-dark-text); } /* page-like: a centered content column that widens with the viewport. Header and footer inside the screen may break out to full width via their own rules. */ .ct-screen--page { --ct-page-max: 1200px; align-items: stretch; } .ct-screen--page > * { width: 100%; max-width: var(--ct-page-max); margin-left: auto; margin-right: auto; } /* stage: vertically-centered card stage with a sensible max-width */ .ct-screen--stage { --ct-stage-max: 480px; align-items: center; justify-content: flex-start; } .ct-screen--stage > * { width: 100%; max-width: var(--ct-stage-max); margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .ct-screen--stage { --ct-stage-max: 560px; justify-content: center; } .ct-screen--stage.ct-screen--stage-wide { --ct-stage-max: 720px; } } @media (min-width: 1024px) { .ct-screen--stage { padding-top: 24px; padding-bottom: 24px; } } /* generic vertically-centered stage (queue, room, vs, announce, onboarding) */ .ct-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 28px; position: relative; text-align: center; } .ct-stage__title { font: 700 30px/1.1 var(--ct-font); letter-spacing: -.02em; } .ct-stage__title--lg { font-size: 34px; line-height: 1.05; } .ct-stage__sub { font: 500 14px/1.5 var(--ct-font); color: var(--ct-text-2); margin-top: 7px; } .ct-screen--blue .ct-stage__sub, .ct-screen--dark .ct-stage__sub { color: inherit; opacity: .85; } /* bottom action stack */ .ct-actions { display: flex; flex-direction: column; gap: 12px; padding: 0 24px 40px; } .ct-actions__row { display: flex; gap: 11px; } .ct-actions__row > * { flex: 1; } .ct-actions__note { font: 600 12px var(--ct-font); color: var(--ct-text-3); text-align: center; } /* ---- 2a · Landing / hub → migrated to css/screens/landing.css (Wave-1 exemplar) */ /* ---- 2b · Onboarding + How to play -------------------------------------- */ .ct-onboard__skip { display: flex; justify-content: flex-end; padding: 8px 20px 0; } .ct-onboard__skip button { background: none; border: 0; font: 700 14px var(--ct-font); color: var(--ct-text-3); cursor: pointer; padding: 6px; } .ct-screen--blue .ct-onboard__skip button { color: var(--ct-white); opacity: .8; } .ct-onboard__foot { padding: 0 24px 40px; display: flex; flex-direction: column; gap: 14px; align-items: center; } .ct-onboard__foot .ct-btn { width: 100%; } .ct-howto__list { padding: 16px 18px 0; display: flex; flex-direction: column; gap: 11px; } .ct-howto__step { display: flex; gap: 14px; align-items: center; padding: 14px 16px; } .ct-howto__step-title { font: 700 15.5px var(--ct-font); } .ct-howto__step-sub { font: 500 12.5px/1.45 var(--ct-font); color: var(--ct-text-2); margin-top: 2px; } .ct-howto__foot { margin-top: auto; padding: 16px 22px 38px; } /* ---- 2c · Matchmaking queue --------------------------------------------- */ .ct-queue__topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 0; } .ct-queue__cancel { background: none; border: 0; font: 700 14px var(--ct-font); color: var(--ct-text-2); cursor: pointer; } .ct-queue__spinner { position: relative; width: 210px; height: 210px; } .ct-queue__spinner-ring { position: absolute; inset: 0; animation: ct-spin 8s linear infinite; } .ct-queue__spinner-face { position: absolute; inset: 22px; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: 50%; box-shadow: var(--ct-sh-6); display: grid; place-items: center; } .ct-queue__spinner-q { position: absolute; top: -6px; right: -4px; width: 58px; height: 58px; border: var(--ct-bw) solid var(--ct-ink); border-radius: 50%; background: var(--ct-yellow); box-shadow: var(--ct-sh-4); display: grid; place-items: center; font: 700 26px var(--ct-font); transform: rotate(8deg); } .ct-queue__tip { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; transform: rotate(-.8deg); padding: 13px 16px; } .ct-queue__tip-text { font: 500 13px/1.5 var(--ct-font); color: var(--ct-text-2); } .ct-queue__tip-text b { color: var(--ct-ink); } .ct-queue__found { position: relative; animation: ct-pop .5s var(--ct-ease-pop); } .ct-queue__found-burst { position: absolute; inset: -40px; animation: ct-spin 20s linear infinite; } .ct-queue__found-name { position: absolute; bottom: -8px; right: -26px; transform: rotate(-6deg); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-blue); color: var(--ct-white); box-shadow: var(--ct-sh-4); padding: 7px 16px; font: 700 15px var(--ct-font); } /* ---- 2d · Private room --------------------------------------------------- */ .ct-room__pair { display: flex; align-items: center; gap: 16px; } .ct-room__vs { position: relative; width: 56px; height: 56px; flex: none; } .ct-room__vs .ct-burst__num { font: 700 18px var(--ct-font); font-style: italic; } .ct-room__link { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card); box-shadow: var(--ct-sh-5); padding: 10px 10px 10px 16px; } .ct-room__link-url { flex: 1; font: 700 15px var(--ct-font); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-room__copy { border: var(--ct-bw-thin) solid var(--ct-ink); background: var(--ct-yellow); font: 700 13.5px var(--ct-font); border-radius: var(--ct-r-sm); padding: 10px 16px; box-shadow: var(--ct-sh-3); cursor: pointer; } .ct-room__host-tag { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-yellow); box-shadow: var(--ct-sh-4); padding: 6px 16px; font: 700 15px var(--ct-font); color: var(--ct-ink); } /* ---- 2e · VS intro (~3 s, dark) ------------------------------------------ */ .ct-vs__stack { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 28px; position: relative; } .ct-vs__side { display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; z-index: 3; } .ct-vs__side--you { transform: rotate(-2deg) translateX(-52px); } .ct-vs__side--rival { transform: rotate(2deg) translateX(52px); } .ct-vs__nametag { display: inline-flex; border: var(--ct-bw-thin) solid var(--ct-dark-text); border-radius: var(--ct-r-chip); background: var(--ct-dark); padding: 5px 14px; font: 700 14px var(--ct-font); color: var(--ct-dark-text); } .ct-vs__burst { position: relative; width: 120px; height: 120px; margin: -30px 0; z-index: 2; animation: ct-pulse 1.6s infinite; } .ct-vs__burst .ct-burst__num { font: 700 34px var(--ct-font); font-style: italic; color: var(--ct-ink); } .ct-vs__foot { padding: 0 28px 46px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; } .ct-vs__rule { font: 600 14px var(--ct-font); color: var(--ct-dark-text-2); } .ct-vs__count { display: flex; align-items: baseline; gap: 14px; } .ct-vs__digit { font: 700 20px var(--ct-font); color: var(--ct-dark-text-3); } .ct-vs__digit.is-active { font-size: 58px; line-height: 1; color: var(--ct-yellow); animation: ct-pulse 1s infinite; } .ct-vs__friendly-chip { transform: rotate(-3deg); box-shadow: 0 4px 0 var(--ct-cream-shadow); border-width: var(--ct-bw); padding: 8px 18px; font-size: 14px; } .ct-vs__friendly-note { font: 500 13.5px/1.5 var(--ct-font); color: var(--ct-dark-text-2); text-align: center; } /* ---- 2f · Announce + drawing --------------------------------------------- */ .ct-announce__eyebrow { font: 700 17px var(--ct-font); color: var(--ct-white); opacity: .85; } .ct-announce__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--ct-white); border: var(--ct-bw-fat) solid var(--ct-ink); border-radius: var(--ct-r-panel-lg); box-shadow: var(--ct-sh-9); padding: 26px 40px; transform: rotate(-2deg); color: var(--ct-ink); animation: ct-pop .55s var(--ct-ease-pop); } .ct-announce__flag { font-size: 64px; line-height: 1; } .ct-announce__name { font: 700 48px/1 var(--ct-font); letter-spacing: -.02em; } .ct-announce__halo { position: absolute; inset: -60px; animation: ct-spin 24s linear infinite; opacity: .5; } .ct-announce__note { font: 600 14px var(--ct-font); color: var(--ct-white); opacity: .75; } .ct-draw__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 10px; } .ct-draw__country { display: inline-flex; align-items: center; gap: 8px; border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-chip); background: var(--ct-white); box-shadow: var(--ct-sh-4); padding: 8px 15px; font: 700 16px var(--ct-font); transform: rotate(-1.5deg); } .ct-draw__country-flag { font-size: 20px; } .ct-draw__canvas-wrap { margin: 0 12px; flex: 1; display: flex; min-height: 0; } .ct-draw__canvas-wrap .ct-canvas { flex: 1; } .ct-draw__toolbar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 36px; } .ct-draw__wait { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 24px 40px; } .ct-draw__wait-note { font: 600 14px var(--ct-font); color: var(--ct-text-2); text-align: center; } .ct-draw__wait-note b { color: var(--ct-ink); } /* ---- 2g · Reveal ---------------------------------------------------------- */ .ct-reveal__top { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; gap: 8px; } .ct-reveal__phase { font: 700 11.5px var(--ct-font); color: var(--ct-text-2); } .ct-reveal__intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 28px; } .ct-reveal__intro-title { font: 700 28px var(--ct-font); letter-spacing: -.02em; } .ct-reveal__player { display: flex; align-items: center; gap: 9px; padding: 4px 18px 8px; } .ct-reveal__player-flag { font-size: 19px; } .ct-reveal__player-name { font: 700 15px var(--ct-font); } .ct-reveal__player-note { font: 600 12px var(--ct-font); color: var(--ct-text-3); margin-left: auto; } .ct-reveal__panel { position: relative; margin: 0 12px; flex: 1; min-height: 0; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-canvas); box-shadow: var(--ct-sh-6); overflow: hidden; } .ct-reveal__stage { position: absolute; inset: 20px 20px 44px; } /* leaves room for legend bar */ .ct-reveal__miss-chip { position: absolute; left: 12px; top: 44%; transform: rotate(-4deg); } .ct-reveal__score { position: absolute; right: 6px; bottom: 2px; animation: ct-pop .5s var(--ct-ease-pop); } .ct-reveal__foot { margin-top: auto; display: flex; justify-content: center; gap: 10px; padding: 14px 24px 36px; } .ct-reveal__skip { height: 48px; padding: 0 22px; border-radius: 24px; font-size: 14px; box-shadow: var(--ct-sh-4); } /* verdict phase */ .ct-reveal__verdict { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; position: relative; } .ct-reveal__verdict-burst { position: relative; animation: ct-pop .5s var(--ct-ease-pop); } .ct-reveal__verdict-halo { position: absolute; inset: -52px; animation: ct-spin 18s linear infinite; } .ct-reveal__duo { display: flex; gap: 14px; margin-top: 8px; justify-content: center; } .ct-reveal__duo .ct-draw-card { width: 146px; } .ct-reveal__duo .ct-draw-card:first-child { transform: rotate(-2deg); } .ct-reveal__duo .ct-draw-card:last-child { transform: rotate(2deg); } /* blank-drawing state inside a panel */ .ct-reveal__blank { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .ct-reveal__blank-title { font: 700 17px var(--ct-font); color: var(--ct-text-2); } .ct-reveal__blank-sub { font: 500 12.5px var(--ct-font); color: var(--ct-text-4); margin-top: 3px; } .ct-reveal__blank-chip { position: absolute; top: 10px; right: 12px; transform: rotate(6deg); color: var(--ct-text-4); } /* svg stroke roles inside the reveal stage (canvas renderer mirrors these) */ .ct-reveal__ink { stroke: var(--ct-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; } .ct-reveal__outline { stroke: var(--ct-blue); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linejoin: round; fill: none; } .ct-reveal__hit { stroke: var(--ct-blue); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; fill: none; } .ct-reveal__off { stroke: var(--ct-ink); stroke-width: 2; stroke-dasharray: 3 3.4; stroke-linecap: round; fill: none; } .ct-reveal__miss { stroke: var(--ct-red); stroke-width: 2; stroke-dasharray: 1.6 2.6; stroke-linejoin: round; fill: none; } /* ---- 2h · Match result ---------------------------------------------------- */ .ct-result__head { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 24px 0; text-align: center; } .ct-result__meta { display: flex; align-items: center; gap: 8px; margin-top: 20px; font: 700 14px var(--ct-font); } .ct-result__meta-flag { font-size: 18px; } .ct-result__duo { display: flex; gap: 13px; justify-content: center; padding: 16px 24px 0; } .ct-result__duo--dim { opacity: .4; } .ct-result__actions { padding: 20px 22px 0; display: flex; flex-direction: column; gap: 11px; } .ct-result__foot-note { margin-top: auto; padding: 14px 24px 36px; font: 600 12px var(--ct-font); color: var(--ct-text-4); text-align: center; } .ct-result__guest-banner { margin: 14px 20px 0; transform: rotate(-.5deg); box-shadow: var(--ct-sh-4); background: var(--ct-white); border-radius: 16px; padding: 12px 15px; } .ct-result__promo { position: absolute; left: 16px; right: 16px; bottom: 26px; transform: rotate(.6deg); } /* rematch pending card */ .ct-result__pending { margin: 16px 20px 0; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-btn-lg); box-shadow: var(--ct-sh-6); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 11px; transform: rotate(-.6deg); text-align: center; } .ct-result__pending-title { font: 700 17px var(--ct-font); } .ct-result__pending-cancel { font: 700 13px var(--ct-font); color: var(--ct-text-4); cursor: pointer; } /* ---- 2i handled by §17 + §22 (sheet, tabs, icons, toast) ------------------ */ /* ---- 2j · Share cards are canvas-rendered (cards.js). Preview shells only. */ .ct-cardprev { position: relative; overflow: hidden; border: var(--ct-bw) solid var(--ct-ink); border-radius: 10px; box-shadow: var(--ct-sh-7); background: var(--ct-cream); } .ct-cardprev--story { background: var(--ct-dark); } /* ---- 2k · Permalink -------------------------------------------------------- */ .ct-perma__head { text-align: center; padding: 16px 24px 0; } .ct-perma__round-chip { transform: rotate(-1deg); } .ct-perma__title { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 8px; font: 700 28px var(--ct-font); letter-spacing: -.02em; } .ct-perma__title em { font-style: italic; color: var(--ct-blue); } .ct-perma__title-flag { font-size: 24px; } .ct-perma__duo { display: flex; gap: 13px; justify-content: center; padding: 16px 24px 0; } .ct-perma__duo .ct-draw-card:first-child { transform: rotate(-1.5deg); } .ct-perma__duo .ct-draw-card:last-child { transform: rotate(1.5deg); } .ct-perma__cta { padding: 20px 22px 0; } .ct-perma__promo { margin: 14px 20px 0; display: flex; justify-content: center; } .ct-perma__foot { margin-top: auto; padding: 14px 24px 34px; text-align: center; font: 600 11.5px var(--ct-font); color: var(--ct-text-4); } /* ---- 2l · Leaderboard ------------------------------------------------------ */ .ct-lb__head { display: flex; align-items: center; gap: 12px; padding: 10px 18px 0; } .ct-lb__reset-chip { margin-left: auto; transform: rotate(2deg); font-size: 11px; padding: 5px 11px; } .ct-lb__tabs { display: flex; justify-content: center; padding: 14px 18px 0; } .ct-lb__podium { padding: 22px 20px 0; } .ct-lb__list { flex: 1; border-top: var(--ct-bw) solid var(--ct-ink); padding: 8px 16px 0; background: var(--ct-white); position: relative; overflow: hidden auto; } .ct-lb__list--card { border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-btn-lg); box-shadow: var(--ct-sh-5); margin: 16px 16px 0; padding: 6px 14px 0; } .ct-lb__self-wrap { padding: 10px 14px 30px; background: var(--ct-white); } .ct-lb__self-wrap--float { background: transparent; } .ct-lb__empty { text-align: center; } .ct-lb__loading-note { font: 600 12px var(--ct-font); color: var(--ct-text-4); text-align: center; margin-top: 10px; } /* ---- 2m · Profile ---------------------------------------------------------- */ .ct-profile__id { display: flex; align-items: center; gap: 16px; padding: 16px 20px 0; } .ct-profile__avatar { position: relative; width: 84px; height: 84px; flex: none; } .ct-profile__avatar-coin { position: absolute; inset: 0; border: var(--ct-bw-fat) solid var(--ct-ink); border-radius: 50%; background: var(--ct-yellow); box-shadow: var(--ct-sh-5); display: grid; place-items: center; font-size: 38px; } .ct-profile__avatar-edit { position: absolute; bottom: -4px; right: -6px; width: 28px; height: 28px; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 50%; background: var(--ct-white); box-shadow: var(--ct-sh-2); display: grid; place-items: center; cursor: pointer; } .ct-profile__avatar--guest { border: var(--ct-bw-fat) dashed var(--ct-text-4); border-radius: 50%; display: grid; place-items: center; font: 700 34px var(--ct-font); color: var(--ct-text-4); } .ct-profile__name { font: 700 28px var(--ct-font); letter-spacing: -.02em; } .ct-profile__name--guest { font-size: 26px; color: var(--ct-text-2); } .ct-profile__meta { font: 500 12.5px var(--ct-font); color: var(--ct-text-3); } .ct-profile__chips { display: flex; gap: 9px; padding: 16px 18px 0; flex-wrap: wrap; } .ct-profile__section-title { padding: 20px 20px 8px; font: 700 16px var(--ct-font); } .ct-profile__matches { padding: 0 16px; display: flex; flex-direction: column; gap: 9px; } .ct-matchrow { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 13px; background: var(--ct-white); border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: var(--ct-r-card-sm); box-shadow: var(--ct-sh-3); font: 600 14px var(--ct-font); } .ct-matchrow__flag { font-size: 19px; } .ct-matchrow__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-matchrow__score { font: 700 14px var(--ct-font); } .ct-matchrow__score--lost { color: var(--ct-text-3); } .ct-profile__optin { margin: 16px 16px 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ct-white); border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: var(--ct-r-card-sm); } .ct-profile__foot { margin-top: auto; padding: 18px 20px 36px; display: flex; flex-direction: column; gap: 6px; text-align: center; } .ct-profile__guest-card { margin: 20px 18px 0; transform: rotate(-.6deg); border-radius: var(--ct-r-card-lg); box-shadow: var(--ct-sh-6); padding: 20px; } .ct-profile__guest-title { font: 700 18px/1.25 var(--ct-font); } .ct-profile__guest-sub { font: 500 13px/1.5 var(--ct-font); color: var(--ct-text-2); margin: 7px 0 0; } /* flag picker (first-time setup / avatar edit) */ .ct-flagpick { display: flex; gap: 7px; } .ct-flagpick__item { width: 44px; height: 44px; border: var(--ct-bw-thin) solid var(--ct-ink); border-radius: 13px; background: var(--ct-white); display: grid; place-items: center; font-size: 22px; cursor: pointer; } .ct-flagpick__item.is-selected { border: var(--ct-bw) solid var(--ct-blue); box-shadow: 0 3px 0 var(--ct-blue); } /* ---- 2n · Login ------------------------------------------------------------ */ .ct-login__body { padding: 14px 22px 0; } .ct-login__lede { font: 500 14px/1.5 var(--ct-font); color: var(--ct-text-2); margin: 0; } .ct-login__lede b { color: var(--ct-ink); } .ct-login__lede .ct-login__wrong { color: var(--ct-text-4); } .ct-login__field { margin-top: 20px; } .ct-login__submit { margin-top: 16px; } .ct-login__ratelimit { margin-top: 16px; transform: rotate(-.6deg); box-shadow: var(--ct-sh-4); border-radius: 16px; padding: 12px 15px; align-items: flex-start; gap: 10px; font: 600 12.5px/1.45 var(--ct-font); } .ct-login__foot { margin-top: auto; padding: 0 24px 40px; font: 600 12px/1.5 var(--ct-font); color: var(--ct-text-3); text-align: center; } .ct-login__inbox-card { margin-top: 16px; background: var(--ct-white); border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-btn-lg); box-shadow: var(--ct-sh-5); padding: 18px; } .ct-login__inbox-title { font: 700 15px var(--ct-font); } .ct-login__divider { display: flex; align-items: center; gap: 10px; margin: 13px 0; font: 600 11.5px var(--ct-font); color: var(--ct-text-4); } .ct-login__divider::before, .ct-login__divider::after { content: ""; flex: 1; height: 2px; background: var(--ct-hairline); } .ct-login__resend { display: flex; justify-content: center; margin-top: 16px; } /* ---- 2o · System states ---------------------------------------------------- */ .ct-sys { position: relative; } /* = .ct-panel + .ct-badge inside */ .ct-sys__title { font: 700 18px var(--ct-font); margin-top: 4px; } .ct-sys__body { font: 500 13px/1.5 var(--ct-font); color: var(--ct-text-2); margin: 6px 0 0; } .ct-sys__body b { color: var(--ct-ink); } .ct-sys__actions { display: flex; gap: 10px; margin-top: 14px; } .ct-sys__actions > * { flex: 1; } .ct-sys--center { text-align: center; } /* full-screen blocking wrap (force update, unsupported browser) */ .ct-sys-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--ct-paper); } .ct-sys-screen .ct-panel { width: min(390px, 100%); } /* ---------------------------------------------------------------------------- 24. DESKTOP VARIANTS (≥920px) — landing, drawing, result, leaderboard, permalink. Mirrors the 1000–1200px artboards. -------------------------------------------------------------------------- */ @media (min-width: 920px) { .ct-screen--wide { max-width: 1200px; margin: 0 auto; } /* landing desktop → migrated to css/screens/landing.css (Wave-1 exemplar) */ /* — drawing desktop: tools | canvas | timer rails — */ .ct-draw--desktop .ct-draw__grid { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px 30px 0; } .ct-draw--desktop .ct-draw__rail { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-self: center; } .ct-draw--desktop .ct-draw__rail--right { gap: 20px; } .ct-draw--desktop .ct-btn--tool { width: 72px; height: 72px; border-radius: 22px; } .ct-draw--desktop .ct-canvas { width: min(620px, calc(100vh - 200px)); height: min(620px, calc(100vh - 200px)); border-radius: var(--ct-r-canvas-lg); box-shadow: 0 8px 0 var(--ct-ink); } .ct-draw--desktop .ct-timer-ring { position: static; width: 124px; height: 124px; } .ct-draw--desktop .ct-timer-ring__num { inset: 11px; border: var(--ct-bw) solid var(--ct-ink); background: var(--ct-white); box-shadow: var(--ct-sh-4); font-size: 30px; } .ct-draw--desktop .ct-btn--hold { height: 64px; border-radius: 32px; padding: 0 28px; } .ct-draw--desktop .ct-draw__facts { display: flex; justify-content: center; gap: 10px; padding: 0 0 20px; } .ct-draw__rail-note { font: 600 12px/1.4 var(--ct-font); color: var(--ct-text-4); text-align: center; } /* — result desktop: card | verdict column | card — */ .ct-result--desktop .ct-result__layout { display: flex; align-items: center; justify-content: center; gap: 44px; padding: 52px 40px 46px; position: relative; } .ct-result--desktop .ct-draw-card { width: 300px; border-radius: var(--ct-r-card-lg); box-shadow: var(--ct-sh-7); padding: 18px; } .ct-result--desktop .ct-draw-card__name { font-size: 15px; } .ct-result--desktop .ct-draw-card__score { font-size: 44px; } .ct-result--desktop .ct-draw-card:first-child { transform: rotate(-2deg); } .ct-result--desktop .ct-draw-card:last-child { transform: rotate(2deg); } .ct-result--desktop .ct-result__center { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 360px; } .ct-result--desktop .ct-verdict { font-size: 56px; text-shadow: 4px 4px 0 var(--ct-white); } /* — leaderboard desktop: header row, larger podium, table rows with meter — */ .ct-lb--desktop .ct-lb__head { padding: 26px 36px 0; gap: 20px; } .ct-lb--desktop .ct-pagehead__title { font-size: 32px; } .ct-lb--desktop .ct-lb__podium { padding: 26px 20px 0; gap: 16px; } .ct-lb--desktop .ct-podium__base { width: 110px; } .ct-lb--desktop .ct-podium__slot--1 .ct-podium__base { width: 124px; height: 86px; } .ct-lb--desktop .ct-podium__slot--2 .ct-podium__base { height: 62px; } .ct-lb--desktop .ct-podium__slot--3 .ct-podium__base { height: 48px; } .ct-lb--desktop .ct-lb__list { padding: 6px 36px 0; } .ct-lb--desktop .ct-lb-row, .ct-lb--desktop .ct-lb-self { display: grid; grid-template-columns: 44px 40px 1fr 90px 190px; gap: 14px; min-height: 58px; } .ct-lb--desktop .ct-lb-row__rank { width: auto; } .ct-lb--desktop .ct-lb-row__flag { font-size: 22px; } .ct-lb--desktop .ct-lb-row__name { font-size: 16px; } .ct-lb--desktop .ct-lb-row__pts { font-size: 16px; } .ct-lb--desktop .ct-lb-self { padding: 0 6px; transform: rotate(-.4deg); } .ct-lb--desktop .ct-lb__self-wrap { padding: 12px 30px 26px; } /* — permalink desktop: side-by-side duo with vs burst — */ .ct-perma--desktop .ct-perma__title { font-size: 40px; } .ct-perma--desktop .ct-perma__duo { gap: 30px; padding: 24px 40px 30px; align-items: center; } .ct-perma--desktop .ct-draw-card { width: 310px; border-radius: var(--ct-r-card-lg); box-shadow: var(--ct-sh-7); padding: 18px; } .ct-perma--desktop .ct-draw-card__score { font-size: 42px; } .ct-perma--desktop .ct-perma__vs { position: relative; width: 72px; height: 72px; flex: none; } .ct-perma--desktop .ct-perma__cta { display: flex; justify-content: center; padding: 0 0 30px; } } /* ---------------------------------------------------------------------------- 25. REDUCED MOTION — same info, no flight Reveal phases render instantly as stacked cards; count-up becomes a number. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ct-app *, .ct-app *::before, .ct-app *::after { animation: none !important; transition: none !important; } .ct-btn:hover { transform: none; box-shadow: var(--ct-sh-5); } .ct-btn:active { transform: none; box-shadow: var(--ct-sh-3); } } /* ---------------------------------------------------------------------------- 26. APPENDIX — post-E2E polish additions (2026-07-19) New classes added after the design agent's pass. Keep additions here, using the same tokens as the sections above. -------------------------------------------------------------------------- */ /* Reconnect (design 2f, self side) rendered as a TOP BANNER over the canvas rather than a center card — and pointer-events:none so it can never swallow a stroke. The player keeps drawing locally while the socket recovers; strokes sync/submit when it returns. Slimmer padding than the full .ct-reconnect card. */ .ct-reconnect--banner { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 5; pointer-events: none; padding: 12px 14px; } .ct-reconnect--banner .ct-progress { margin-top: 10px; }