/* ═══════════════════════════════════════════════════════════════════════ RWF FIGMA TEST APP — screen styles (fx-*) Every screen is built from Ben's Figma frames (figma/assets/file.json — exact bboxes, fills, type). Colours come from tokens.css only; the gold theme is default ([data-theme="gold"] on ), lime via the toggle. Phone-first: 393×852 target, bottom nav 84px with 64px LOG, ≥44px targets, safe-area insets honoured. ═══════════════════════════════════════════════════════════════════════ */ .fx-app, .fx-app * { box-sizing: border-box; } .fx-app { max-width: 393px; min-height: 100dvh; margin: 0 auto; background: var(--bg); color: var(--text); font-family: var(--font-body); position: relative; display: flex; flex-direction: column; } /* ── faux status bar (the Figma frames carry 9:41 — keep the fidelity) ── */ .fx-status { height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px 0; font: 600 14px/1 var(--font-body); color: var(--text); } .fx-status__tools { display: flex; gap: 8px; align-items: center; } .fx-tool { height: 28px; min-width: 28px; padding: 0 8px; border-radius: var(--pill); border: 1px solid var(--line-bright); background: var(--surface); color: var(--muted); font: 600 10px/1 var(--font-body); letter-spacing: 0.06em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .fx-tool[aria-pressed="true"] { background: var(--lime); color: var(--bg); border-color: var(--lime); } /* ── top bar (his Top Bar component, 56px) ─────────────────────────── */ .fx-topbar { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--bg); } .fx-topbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; } .fx-topbar__title { font: 700 17px/1.2 var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-topbar__back { background: none; border: 0; padding: 6px; margin: -6px; cursor: pointer; color: var(--text); display: flex; } .fx-topbar__logo { width: 81px; height: 34px; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; gap: 3px; font: 400 15px/1 var(--font-display); text-transform: uppercase; color: var(--lime); letter-spacing: 0.04em; } .fx-topbar__logo i { font-style: normal; color: var(--text); } .fx-topbar__right { display: flex; align-items: center; gap: 16px; } .fx-topbar__bell { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--muted); display: flex; } /* ── content scroll region ─────────────────────────────────────────── */ .fx-content { flex: 1; padding: 0 16px 24px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; scrollbar-width: none; } .fx-content::-webkit-scrollbar { display: none; } .fx-content--center { justify-content: flex-start; } /* headings — Anton uppercase per his type scale */ .fx-h1 { font: 400 28px/1.5 var(--font-display); text-transform: uppercase; color: var(--text); margin: 0; } .fx-h1--30 { font-size: 30px; } .fx-h1--32 { font-size: 32px; } .fx-h1--36 { font-size: 36px; } .fx-h1--26 { font-size: 26px; } .fx-h1--24 { font-size: 24px; } .fx-h1--22 { font-size: 22px; } .fx-h1--42 { font-size: 42px; line-height: 1.2; } .fx-h1--38 { font-size: 38px; line-height: 1.3; } .fx-h1--34 { font-size: 34px; } .fx-h1--gold { color: var(--lime); } .fx-sub { font: 400 14px/1.45 var(--font-body); color: var(--faint); margin: 8px 0 0; } .fx-sub--15 { font-size: 15px; color: var(--muted); } .fx-sub--16 { font-size: 16px; color: var(--muted); } .fx-sub--13 { font-size: 13px; color: var(--muted); } .fx-sub--12 { font-size: 12px; color: var(--faint); } .fx-overline { font: 700 11px/1.2 var(--font-body); letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; margin: 0; } .fx-note { font: 400 12px/1.5 var(--font-body); color: var(--faint-deco); margin: 12px 0 0; } .fx-note--11 { font-size: 11px; } .fx-block { margin-top: 24px; display: flex; flex-direction: column; } .fx-gap8 { height: 8px; } .fx-gap12 { height: 12px; } .fx-gap16 { height: 16px; } .fx-gap24 { height: 24px; } .fx-gap48 { height: 48px; } .fx-gap96 { height: 96px; } .fx-gap110 { height: 110px; } /* ── buttons (his Btn set: 345×48 pills) ───────────────────────────── */ .fx-btn { height: 48px; border-radius: var(--pill); font: 600 15px/1 var(--font-body); letter-spacing: 0.01em; cursor: pointer; border: 0; display: flex; align-items: center; justify-content: center; text-align: center; transition: transform var(--ease), background var(--ease); } .fx-btn:active { transform: scale(0.98); } .fx-btn--primary { background: var(--lime); color: var(--on-gold, var(--bg)); } .fx-btn--ghost { background: none; color: var(--lime); } .fx-btn--dark { background: var(--surface-2); border: 1px solid var(--ink-line-strong, var(--line-bright)); color: var(--text); } .fx-btn--danger { background: var(--danger); color: var(--text); } .fx-btn--black { background: #000; border: 1px solid var(--text); color: var(--text); } .fx-btn--purple { background: var(--energy); color: var(--text); } .fx-btn--51 { height: 51px; font-size: 16px; } .fx-btn--43 { height: 43px; font-size: 14px; } .fx-btn--sm { height: 41px; font-size: 14px; padding: 0 24px; align-self: center; } .fx-btn--full { width: 100%; } /* ── step progress (onboarding) ────────────────────────────────────── */ .fx-steps { display: flex; gap: 14px; margin: 16px 0 24px; } .fx-steps i { display: block; height: 4px; border-radius: 2px; background: var(--ink-line-strong, var(--line-bright)); flex: 1; max-width: 28px; } .fx-steps i.on { background: var(--lime); } /* ── inputs ────────────────────────────────────────────────────────── */ .fx-field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .fx-field__label { font: 500 13px/1.2 var(--font-body); color: var(--muted); } .fx-field__box { height: 47px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ink-line-strong, var(--line-bright)); display: flex; align-items: center; padding: 0 16px; font: 400 16px/1.2 var(--font-body); color: var(--text); } .fx-field__box--ph { color: var(--faint-deco); } .fx-code { display: flex; gap: 10px; margin-top: 16px; justify-content: center; } .fx-code i { width: 48px; height: 56px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ink-line-strong, var(--line-bright)); display: flex; align-items: center; justify-content: center; font: 700 22px/1 var(--font-body); color: var(--text); font-style: normal; } .fx-code i--active { border-color: var(--lime); } /* ── option cards (select rows, 345×71 r16) ────────────────────────── */ .fx-option { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: 14px 18px; margin-top: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 44px; transition: background var(--dur-setup), border-color var(--dur-setup); } .fx-option__title { font: 700 16px/1.2 var(--font-body); color: var(--text); } .fx-option__sub { font: 400 13px/1.35 var(--font-body); color: var(--faint); } .fx-option--sel { background: var(--energy-tint); border-color: var(--lime); } .fx-option--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .fx-check { width: 22px; height: 22px; border-radius: 6px; flex: none; background: var(--lime); display: inline-flex; align-items: center; justify-content: center; color: var(--on-gold, var(--bg)); } .fx-check--off { background: var(--line); } .fx-check svg { width: 14px; height: 14px; } /* big checkbox rows (terms) */ .fx-checkrow { display: flex; align-items: center; gap: 12px; margin-top: 20px; cursor: pointer; } .fx-checkrow__box { width: 24px; height: 24px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--lime); color: var(--on-gold, var(--bg)); } .fx-checkrow__box--off { background: var(--surface); border: 1px solid var(--ink-line-bright, var(--line-bright)); color: transparent; } .fx-checkrow__box svg { width: 14px; height: 14px; } .fx-checkrow__label { font: 400 14px/1.2 var(--font-body); color: var(--text); } /* ── chips (exercise prefs, days, targets) ─────────────────────────── */ .fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .fx-chip { height: 37px; padding: 0 16px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--ink-line-strong, var(--line-bright)); color: var(--text); font: 600 14px/1 var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--ease), color var(--ease); } .fx-chip--on { background: var(--lime); border-color: var(--lime); color: var(--on-gold, var(--bg)); } .fx-chip--day { width: 42px; height: 42px; padding: 0; font: 700 15px/1 var(--font-body); } .fx-chip--target { height: 36px; font-size: 12px; padding: 0 12px; } .fx-chip--time { height: 42px; font-size: 15px; } /* ── rule rows (review / invite) ───────────────────────────────────── */ .fx-rule { border-radius: 12px; background: var(--surface); display: flex; gap: 12px; padding: 11px 16px; margin-top: 8px; } .fx-rule__k { width: 90px; flex: none; font: 500 13px/1.3 var(--font-body); color: var(--faint); } .fx-rule__v { font: 600 13px/1.3 var(--font-body); color: var(--text); } /* ── hero (battle main) ────────────────────────────────────────────── */ .fx-hero { margin-top: 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--energy) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--energy-tint) 55%, transparent) 0%, transparent 70%); padding: 18px 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .fx-hero--dz3 { border-color: color-mix(in srgb, var(--danger) 80%, transparent); background: linear-gradient(180deg, var(--dz-hero) 0%, transparent 75%); } .fx-hero__ring { position: relative; width: 150px; height: 150px; } .fx-hero__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .fx-hero__ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .fx-hero__num { font: 400 44px/1.15 var(--font-display); color: var(--text); } .fx-hero__of { font: 500 13px/1.2 var(--font-body); color: var(--faint); } .fx-hero__line { font: 400 17px/1.5 var(--font-display); text-transform: uppercase; text-align: center; color: var(--lime); } .fx-hero__line--danger { color: var(--danger); } .fx-hero__aside { font: 500 13px/1.2 var(--font-body); color: var(--muted); text-align: center; margin: 0; } .fx-hero--split { flex-direction: row; align-items: center; gap: 20px; padding: 18px; } .fx-hero--split .fx-hero__ring { width: 120px; height: 120px; flex: none; } .fx-hero--split .fx-hero__num { font-size: 44px; } /* ── crew-now row ──────────────────────────────────────────────────── */ .fx-crewnow { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .fx-crewnow__text { font: 500 13px/1.2 var(--font-body); color: var(--success); } /* ── status row (badge + countdown) ────────────────────────────────── */ .fx-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ── leaderboard list ──────────────────────────────────────────────── */ .fx-board { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } /* ── seg control / tabs ────────────────────────────────────────────── */ .fx-seg { margin-top: 16px; height: 45px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); display: flex; padding: 4px; gap: 4px; } .fx-seg__item { flex: 1; border-radius: var(--pill); border: 0; background: none; cursor: pointer; font: 600 14px/1 var(--font-body); color: var(--faint); } .fx-seg__item--on { background: var(--lime); color: var(--on-gold, var(--bg)); } .fx-seg--32 { height: 42px; padding: 4px; } .fx-seg--32 .fx-seg__item { font-size: 13px; } /* ── cards: generic surface card ───────────────────────────────────── */ .fx-card { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: 16px 18px; margin-top: 14px; } .fx-card--sel { background: var(--energy-tint); border-color: var(--lime); } .fx-card--r12 { border-radius: 12px; } .fx-card--r14 { border-radius: 14px; } .fx-card__t { font: 700 16px/1.2 var(--font-body); color: var(--text); } .fx-card__s { font: 400 13px/1.4 var(--font-body); color: var(--faint); margin-top: 4px; } .fx-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* info note (navy) */ .fx-info { border-radius: 12px; background: var(--ink-navy); padding: 12px 16px; margin-top: 14px; display: flex; gap: 12px; align-items: flex-start; font: 400 12px/1.5 var(--font-body); color: var(--muted); } .fx-info__ic { color: var(--sky); font: 700 14px/1.2 var(--font-body); flex: none; } /* ── bottom nav (his: 84px, LOG 64 raised) ─────────────────────────── */ .fx-nav { flex: none; height: calc(84px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; padding-left: 24px; padding-right: 24px; } .fx-nav__tab { background: none; border: 0; padding: 22px 0 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--faint-deco); font: 500 10px/1.2 var(--font-body); min-width: 44px; } .fx-nav__tab .fg-icon { width: 24px; height: 24px; } .fx-nav__tab[aria-current="page"] { color: var(--lime); font-weight: 600; } .fx-nav__log { width: 64px; height: 64px; margin-top: -10px; border-radius: var(--pill); border: 0; cursor: pointer; background: var(--lime); color: var(--on-gold, var(--bg)); display: flex; align-items: center; justify-content: center; box-shadow: 0 -6px 24px var(--lime-glow); transition: transform var(--ease); } .fx-nav__log:active { transform: scale(0.94); } .fx-nav__log .fg-icon { width: 28px; height: 28px; } /* ── overlays: sheets + dialogs ────────────────────────────────────── */ .fx-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.72); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; animation: fx-fade var(--dur-setup) ease-out; } .fx-scrim--center { justify-content: center; padding: 24px; } .fx-sheet { width: 100%; max-width: 393px; background: var(--surface); border-radius: 28px 28px 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; animation: fx-sheet var(--dur-sheet) cubic-bezier(0.2, 0.7, 0.2, 1); } .fx-sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-line-strong, var(--line-bright)); margin: 0 auto; } .fx-sheet__h { font: 400 22px/1.5 var(--font-display); text-transform: uppercase; color: var(--text); text-align: center; margin: 2px 0 0; } .fx-sheet__h--20 { font-size: 20px; } .fx-sheet__rows { display: flex; flex-direction: column; gap: 8px; } @keyframes fx-sheet { from { transform: translateY(60px); opacity: 0.6; } to { transform: none; opacity: 1; } } @keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } } .fx-dialog { width: 100%; max-width: 329px; background: var(--surface-2); border: 1px solid var(--ink-line-strong, var(--line-bright)); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; text-align: center; animation: fx-pop var(--dur-setup) ease-out; } @keyframes fx-pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } } /* countdown inner stack (time over sub) */ .fg-count__wrap { display: flex; flex-direction: column; gap: 1px; } /* ── feed / notif rows ─────────────────────────────────────────────── */ .fx-feedlist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } /* quick react bar */ .fx-react { margin-top: 16px; height: 38px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 4px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; } .fx-react::-webkit-scrollbar { display: none; } .fx-react span { font-size: 18px; padding: 0 4px; flex: none; } .fx-react b { font: 600 13px/1 var(--font-body); color: var(--lime); margin-left: auto; flex: none; } /* ── power-up grid ─────────────────────────────────────────────────── */ .fx-pwrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; } .fx-pwrgrid .fg-pwr { width: 100%; align-items: flex-start; text-align: left; } .fx-pwrgrid .fg-pwr__art, .fx-pwrgrid .fg-pwr__name { align-self: center; } /* daily drop banner */ .fx-drop { margin-top: 14px; border-radius: 14px; background: var(--energy-tint); border: 1px solid var(--energy); display: flex; align-items: center; gap: 12px; padding: 12px 16px; font: 600 13px/1.2 var(--font-body); color: var(--text); cursor: pointer; } /* ── store rows ────────────────────────────────────────────────────── */ .fx-storerow { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 12px; } .fx-storerow__ic { width: 28px; height: 28px; color: var(--energy); display: flex; flex: none; } .fx-storerow__t { font: 600 15px/1.2 var(--font-body); color: var(--text); } .fx-storerow__s { font: 400 12px/1.2 var(--font-body); color: var(--faint); margin-top: 2px; } .fx-storerow__price { margin-left: auto; flex: none; height: 32px; padding: 0 14px; border-radius: var(--pill); background: var(--lime); color: var(--on-gold, var(--bg)); font: 700 13px/1 var(--font-body); display: flex; align-items: center; } /* active power-up banner (his ActiveBanner — solid gold, dark text) */ .fx-activebanner { margin-top: 0; border-radius: 16px; background: var(--lime); color: var(--on-gold, var(--bg)); display: flex; align-items: center; gap: 16px; padding: 24px 16px; } .fx-activebanner__t { font: 400 18px/1.5 var(--font-display); text-transform: uppercase; } .fx-activebanner__s { font: 600 12px/1.2 var(--font-body); margin-top: 4px; } /* ── loot chest screen ─────────────────────────────────────────────── */ .fx-chestwrap { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; } .fx-chest { width: 160px; height: 160px; border-radius: var(--pill); background: color-mix(in srgb, var(--energy) 15%, transparent); border: 1px solid var(--energy); display: flex; align-items: center; justify-content: center; color: var(--energy-light); cursor: pointer; animation: fx-breathe 2.4s ease-in-out infinite; } .fx-chest .fg-icon { width: 64px; height: 64px; } @keyframes fx-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .fx-tap-open { font: 700 14px/1.2 var(--font-body); color: var(--energy-light); letter-spacing: 0.08em; } /* ── winner / final (purple bg + confetti) ─────────────────────────── */ .fx-app--tint { background: var(--ink-brand-tint); } .fx-app--dz { background: var(--dz-bg); } .fx-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .fx-confetti i { position: absolute; display: block; border-radius: 2px; /* burst-in then REST scattered (his frames show the settled moment) */ animation: fx-burst var(--dur-winner) cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } @keyframes fx-burst { from { transform: translateY(-60px) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 0.95; } } .fx-trophy { width: 120px; height: 120px; border-radius: var(--pill); background: color-mix(in srgb, var(--lime) 15%, transparent); border: 1px solid var(--lime); color: var(--lime); display: flex; align-items: center; justify-content: center; margin: 16px auto 0; } .fx-trophy .fg-icon { width: 56px; height: 56px; } /* podium (final result) */ .fx-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 24px; } .fx-podium__col { width: 90px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .fx-podium__name { font: 600 13px/1.2 var(--font-body); color: var(--text); } .fx-podium__bar { width: 90px; border-radius: 8px; } .fx-podium__rank { font: 700 12px/1.2 var(--font-body); } /* stat chips (daily loss) */ .fx-stats { display: flex; gap: 10px; justify-content: center; margin-top: 16px; } .fx-stat { border-radius: 14px; background: var(--surface); padding: 10px 14px; text-align: center; } .fx-stat__v { font: 700 16px/1.2 var(--font-body); color: var(--text); } .fx-stat__k { font: 400 11px/1.2 var(--font-body); color: var(--faint); margin-top: 4px; } /* profile stats grid */ .fx-pstats { display: flex; gap: 8px; justify-content: center; margin-top: 16px; } .fx-pstat { border-radius: 14px; background: var(--surface); padding: 10px 12px; text-align: center; flex: 1; } .fx-pstat__v { font: 400 22px/1.4 var(--font-display); color: var(--lime); } .fx-pstat__k { font: 400 10px/1.2 var(--font-body); color: var(--faint); } /* menu rows (profile / settings) */ .fx-menu { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .fx-menurow { border-radius: 12px; background: var(--surface); min-height: 47px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--text); font: 600 14px/1.2 var(--font-body); cursor: pointer; } .fx-menurow__group { font: 700 11px/1.2 var(--font-body); letter-spacing: 0.08em; color: var(--faint); margin: 18px 0 0 16px; text-transform: uppercase; } .fx-menurow__chev { color: var(--faint-deco); display: flex; } .fx-menurow--danger { color: var(--danger); } .fx-menurow__val { margin-left: auto; color: var(--lime); font: 500 13px/1.2 var(--font-body); padding-right: 10px; } /* toggles */ .fx-toggle { width: 44px; height: 26px; border-radius: 13px; flex: none; background: var(--lime); border: 0; cursor: pointer; position: relative; transition: background var(--ease); } .fx-toggle::after { content: ""; position: absolute; top: 3px; left: 24px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); transition: left var(--ease); } .fx-toggle--off { background: var(--ink-line-strong, var(--line-bright)); } .fx-toggle--off::after { left: 3px; background: var(--muted); } /* ── team battle ───────────────────────────────────────────────────── */ .fx-vs { display: flex; gap: 12px; margin-top: 16px; } .fx-team { flex: 1; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--lime) 80%, transparent); padding: 14px; text-align: center; } .fx-team--b { border-color: color-mix(in srgb, var(--energy) 40%, transparent); } .fx-team__name { font: 700 12px/1.2 var(--font-body); color: var(--lime); } .fx-team--b .fx-team__name { color: var(--energy); } .fx-team__score { font: 400 40px/1.5 var(--font-display); color: var(--text); } .fx-team__sub { font: 400 11px/1.2 var(--font-body); color: var(--faint); } .fx-floor { margin-top: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; } .fx-floor__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 400 12px/1.2 var(--font-body); color: var(--faint); } .fx-floor__row b { font: 600 13px/1.2 var(--font-body); color: var(--text); font-weight: 600; } .fx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } /* ── waiting room ──────────────────────────────────────────────────── */ .fx-sharecard { margin-top: 16px; border-radius: 16px; background: var(--energy-tint); border: 1px solid var(--energy); padding: 18px; text-align: center; } .fx-sharecard__link { font: 700 17px/1.2 var(--font-body); color: var(--text); } .fx-sharecard__sub { font: 400 12px/1.2 var(--font-body); color: var(--muted); margin-top: 8px; } .fx-sharecard__btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; } .fx-sharecard__btns button { height: 31px; padding: 0 14px; border-radius: var(--pill); background: var(--surface-2); border: 0; color: var(--text); font: 600 12px/1 var(--font-body); cursor: pointer; } .fx-member { border-radius: 12px; background: var(--surface); display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-top: 8px; } .fx-member__t { font: 600 14px/1.2 var(--font-body); color: var(--text); } .fx-member__s { font: 400 11px/1.2 var(--font-body); color: var(--faint); margin-top: 3px; } /* ── log history rows ──────────────────────────────────────────────── */ .fx-logrow { border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; padding: 12px 16px; margin-top: 8px; gap: 8px; } .fx-logrow__t { font: 600 14px/1.2 var(--font-body); color: var(--text); } .fx-logrow__s { font: 400 11px/1.2 var(--font-body); color: var(--faint); margin-top: 3px; } .fx-logrow__acts { margin-left: auto; display: flex; gap: 12px; flex: none; } .fx-logrow__edit { font: 600 13px/1.2 var(--font-body); color: var(--lime); } .fx-logrow__del { font: 600 13px/1.2 var(--font-body); color: var(--danger); } .fx-logrow__lock { margin-left: auto; color: var(--faint-deco); } /* toast */ .fx-toast { border-radius: 12px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--success) 60%, transparent); display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-top: 12px; font: 500 14px/1.2 var(--font-body); color: var(--text); } .fx-toast .fg-icon { color: var(--success); } .fx-toast--muted { border-color: color-mix(in srgb, var(--faint) 60%, transparent); } .fx-toast--muted .fg-icon { color: var(--faint); } /* ── system state (empty/offline) ──────────────────────────────────── */ .fx-statewrap { margin-top: 24px; } /* ── pro paywall ───────────────────────────────────────────────────── */ .fx-plans { display: flex; gap: 8px; margin-top: 16px; } .fx-plan { flex: 1; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); padding: 12px 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 3px; align-items: center; } .fx-plan__flag { font: 700 8px/1.2 var(--font-body); color: var(--urgency); letter-spacing: 0.04em; } .fx-plan__name { font: 600 13px/1.2 var(--font-body); color: var(--text); } .fx-plan__price { font: 700 16px/1.2 var(--font-body); color: var(--muted); } .fx-plan--sel { background: var(--energy-tint); border: 2px solid var(--lime); } .fx-plan--sel .fx-plan__price { color: var(--lime); } /* ── share card ────────────────────────────────────────────────────── */ .fx-sharewin { margin: 16px auto 0; width: 300px; border-radius: 20px; border: 1px solid var(--lime); background: linear-gradient(180deg, var(--energy-tint) 0%, var(--bg) 90%); padding: 28px; text-align: center; } .fx-sharewin__logo { width: 140px; height: 58px; margin: 0 auto; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font: 400 22px/1 var(--font-display); text-transform: uppercase; color: var(--lime); } .fx-sharewin__title { font: 400 34px/1.5 var(--font-display); text-transform: uppercase; color: var(--text); margin: 18px 0 0; white-space: pre-line; } .fx-sharewin__sub { font: 500 12px/1.2 var(--font-body); color: var(--muted); margin-top: 14px; } .fx-sharewin__cta { font: 400 11px/1.2 var(--font-body); color: var(--faint); margin-top: 6px; } .fx-dests { display: flex; gap: 8px; margin-top: 16px; justify-content: center; flex-wrap: wrap; } .fx-dests button { height: 36px; padding: 0 16px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--ink-line-strong, var(--line-bright)); color: var(--text); font: 600 13px/1 var(--font-body); cursor: pointer; } /* ── friends ───────────────────────────────────────────────────────── */ .fx-search { margin-top: 12px; height: 39px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--ink-line-strong, var(--line-bright)); display: flex; align-items: center; padding: 0 14px; gap: 8px; color: var(--faint-deco); font: 400 14px/1.2 var(--font-body); } .fx-friend { border-radius: 12px; background: var(--surface); display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-top: 8px; } .fx-friend--pending { border: 1px solid color-mix(in srgb, var(--urgency) 40%, transparent); } .fx-friend__t { font: 600 14px/1.2 var(--font-body); color: var(--text); } .fx-friend__s { font: 400 11px/1.2 var(--font-body); color: var(--faint); margin-top: 3px; } .fx-friend__act { margin-left: auto; font: 700 13px/1.2 var(--font-body); color: var(--lime); display: flex; gap: 12px; align-items: center; flex: none; } .fx-friend__x { color: var(--faint-deco); font: 400 14px/1 var(--font-body); } /* ── dispute timeline ──────────────────────────────────────────────── */ .fx-tl { border-radius: 12px; background: var(--surface); display: flex; gap: 12px; padding: 13px 16px; margin-top: 8px; align-items: center; } .fx-tl--warn { border: 1px solid var(--urgency); } .fx-tl__t { font: 600 14px/1.2 var(--font-body); color: var(--text); } .fx-tl__s { font: 400 11px/1.2 var(--font-body); color: var(--faint); margin-top: 3px; } /* ── wager summary rows ────────────────────────────────────────────── */ .fx-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font: 400 13px/1.2 var(--font-body); } .fx-kv__k { color: var(--faint); } .fx-kv__v { color: var(--text); font-weight: 600; text-align: right; } /* ── index (screen gallery) ────────────────────────────────────────── */ .fx-index { padding: 8px 16px 32px; } .fx-index__hero { padding: 20px 8px 8px; } .fx-index__title { font: 400 30px/1.3 var(--font-display); text-transform: uppercase; color: var(--text); margin: 0; } .fx-index__sub { font: 400 13px/1.5 var(--font-body); color: var(--faint); margin: 8px 0 0; } .fx-index__group { font: 700 11px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); margin: 24px 0 4px 8px; } .fx-index__list { display: flex; flex-direction: column; gap: 6px; } .fx-index__item { border-radius: 12px; background: var(--surface); display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border: 1px solid transparent; color: var(--text); text-align: left; font-family: var(--font-body); } .fx-index__item:active { border-color: var(--lime); } .fx-index__id { font: 600 10px/1.2 var(--font-body); color: var(--faint); letter-spacing: 0.04em; width: 92px; flex: none; } .fx-index__name { font: 600 14px/1.2 var(--font-body); color: var(--text); } .fx-index__chev { margin-left: auto; color: var(--faint-deco); display: flex; } /* ── misc ──────────────────────────────────────────────────────────── */ .fx-wordmark { width: 320px; height: 134px; margin: 276px auto 0; border-radius: 13px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; gap: 4px; font: 400 34px/1 var(--font-display); text-transform: uppercase; color: var(--lime); } .fx-wordmark i { font-style: normal; color: var(--text); } .fx-wordmark--sm { width: 170px; height: 71px; border-radius: 8px; font-size: 18px; margin: 0; } .fx-loading { display: flex; gap: 16px; justify-content: center; margin-top: 120px; } .fx-loading i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-line-strong, var(--line-bright)); } .fx-loading i:first-child { background: var(--lime); } .fx-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; } .fx-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-line-strong, var(--line-bright)); } .fx-dots i.on { width: 20px; background: var(--lime); } .fx-divider { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--faint-deco); font: 400 13px/1 var(--font-body); } .fx-divider::before, .fx-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); } .fx-quiet { display: flex; gap: 12px; margin-top: 10px; } .fx-quiet__box { height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ink-line-strong, var(--line-bright)); display: flex; align-items: center; padding: 0 18px; font: 600 15px/1.2 var(--font-body); color: var(--text); } .fx-avatarpick { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; } .fx-avatarpick__add { font: 500 13px/1.2 var(--font-body); color: var(--lime); background: none; border: 0; cursor: pointer; padding: 8px; } .fx-timednum { font: 400 72px/1.3 var(--font-display); color: var(--lime); text-align: center; margin: 8px 0 0; } .fx-timedsub { font: 500 14px/1.2 var(--font-body); color: var(--faint); text-align: center; } .fx-gyminputs { display: flex; gap: 12px; justify-content: center; } .fx-gyminput { border-radius: 12px; background: var(--bg); border: 1px solid var(--ink-line-strong, var(--line-bright)); padding: 10px 16px; text-align: center; min-width: 60px; } .fx-gyminput__k { font: 400 11px/1.2 var(--font-body); color: var(--faint); } .fx-gyminput__v { font: 700 20px/1.2 var(--font-body); color: var(--text); margin-top: 4px; } .fx-moments { border-radius: 14px; background: var(--surface); padding: 14px 16px; margin-top: 12px; } .fx-moments__row { font: 400 13px/1.5 var(--font-body); color: var(--muted); margin-top: 8px; } .fx-nextday { font: 700 13px/1.2 var(--font-body); color: var(--lime); margin-top: 16px; letter-spacing: 0.02em; } .fx-pot { border-radius: 20px; border: 1px solid var(--success); padding: 20px; text-align: center; margin-top: 16px; background: color-mix(in srgb, var(--success) 6%, transparent); } .fx-pot__k { font: 700 12px/1.2 var(--font-body); color: var(--success); letter-spacing: 0.08em; } .fx-pot__v { font: 400 48px/1.5 var(--font-display); color: var(--text); } .fx-pot__s { font: 400 12px/1.2 var(--font-body); color: var(--faint); } .fx-payrow { border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-top: 8px; } .fx-corprow { border-radius: 14px; background: var(--surface); padding: 12px 16px; margin-top: 8px; } .fx-corprow--you { border: 1px solid color-mix(in srgb, var(--lime) 70%, transparent); } .fx-corprow__t { font: 700 13px/1.2 var(--font-body); color: var(--text); } .fx-corprow--you .fx-corprow__t { color: var(--lime); } .fx-corprow__v { font: 600 13px/1.2 var(--font-body); color: var(--muted); } .fx-corprow__bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 10px; overflow: hidden; } .fx-corprow__bar i { display: block; height: 100%; border-radius: 3px; background: var(--energy); } .fx-corprow--you .fx-corprow__bar i { background: var(--lime); } /* reduced motion: kill confetti/breathe/heartbeat globally (tokens floor) */ @media (prefers-reduced-motion: reduce) { .fx-confetti i, .fx-chest { animation: none !important; } } /* ═══ REAL-GAME ADDITIONS (engine wiring — same tokens, Ben's language) ═══ */ /* DEMO chip — honest labelling of still-mock screens */ .fx-demochip { position: fixed; top: 14px; right: 12px; z-index: 60; font: 700 10px/1 var(--font-body); letter-spacing: 0.1em; color: var(--faint); border: 1px solid var(--ink-line-strong, var(--line-bright)); border-radius: var(--pill); padding: 5px 9px; background: color-mix(in srgb, var(--surface) 85%, transparent); pointer-events: none; } /* real text input styled as Ben's field box */ .fx-input { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--ink-line-strong, var(--line-bright)); background: var(--surface); color: var(--text); font: 600 15px/1.2 var(--font-body); padding: 14px 16px; outline: none; } .fx-input:focus { border-color: var(--lime); } /* comeback ×1.2 tag on a leaderboard row */ .fx-cb { font: 700 9px/1 var(--font-body); color: var(--on-gold, var(--bg)); background: var(--energy); border-radius: var(--pill); padding: 3px 6px; margin-left: 8px; vertical-align: 2px; letter-spacing: 0.06em; } /* comeback banner (battle screen) */ .fx-cbbanner { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font: 700 11px/1.3 var(--font-body); letter-spacing: 0.05em; color: var(--energy-light); background: color-mix(in srgb, var(--energy) 14%, transparent); border: 1px solid color-mix(in srgb, var(--energy) 45%, transparent); } .fx-cbbanner svg { width: 14px; height: 14px; flex: none; } /* simulate-mates helper (demo crew) */ .fx-simbtn { margin-top: 14px; align-self: center; background: none; border: 0; cursor: pointer; font: 600 11px/1.2 var(--font-body); letter-spacing: 0.06em; color: var(--faint); padding: 8px; } .fx-simbtn span { color: var(--faint-deco); font-weight: 400; } /* ── FLOW-05 power-ups ────────────────────────────────────────────────── */ /* ×3 lightning tag on a leaderboard row (mirrors .fx-cb, gold axis) */ .fx-lt { font: 700 9px/1 var(--font-body); color: var(--bg); background: var(--gold, var(--lime)); border-radius: var(--pill); padding: 3px 6px; margin-left: 6px; vertical-align: 2px; letter-spacing: 0.06em; animation: fx-lt-pop 0.18s ease-out; } @keyframes fx-lt-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fx-lt { animation: none; } } /* shield-armed tag on a row */ .fx-sh { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: 2px; color: var(--sky); border-radius: var(--pill); padding: 2px 5px; background: color-mix(in srgb, var(--sky) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sky) 45%, transparent); } .fx-sh svg { width: 10px; height: 10px; } /* steal flash — both touched rows pulse once (cheap CSS, reduced-motion safe) */ .fg-lbrow--gain { animation: fx-pwr-gain 0.9s ease-out; } .fg-lbrow--hit { animation: fx-pwr-hit 0.9s ease-out; } @keyframes fx-pwr-gain { 0% { background: color-mix(in srgb, var(--lime) 30%, transparent); } 100% { background: transparent; } } @keyframes fx-pwr-hit { 0% { background: color-mix(in srgb, var(--danger) 30%, transparent); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .fg-lbrow--gain, .fg-lbrow--hit { animation: none; } } /* POWER-UPS button on the battle screen (purple axis — Ben's power-up colour) */ .fx-pwrbtn { margin-top: 14px; align-self: stretch; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: var(--pill); border: 1.5px solid color-mix(in srgb, var(--energy) 60%, transparent); background: color-mix(in srgb, var(--energy) 16%, transparent); font: 700 13px/1.2 var(--font-body); letter-spacing: 0.06em; color: var(--energy-light, var(--text)); } .fx-pwrbtn span { color: var(--faint); font-weight: 600; } .fx-pwrbtn:active { transform: scale(0.98); background: color-mix(in srgb, var(--energy) 26%, transparent); } /* lightning live clock inside the active banner (text-ticker, light inline) */ .fx-ltclock .fg-count__time { font: 700 12px/1.2 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; } /* status line above the card list in the power-up sheet */ .fx-ltline { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; font: 700 11px/1.3 var(--font-body); letter-spacing: 0.04em; color: var(--gold, var(--lime)); background: color-mix(in srgb, var(--gold, var(--lime)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold, var(--lime)) 40%, transparent); } .fx-ltline svg { width: 13px; height: 13px; flex: none; } .fx-ltline--shield { color: var(--sky); background: color-mix(in srgb, var(--sky) 12%, transparent); border-color: color-mix(in srgb, var(--sky) 40%, transparent); } .fx-ltline--target { color: var(--energy-light, var(--text)); background: color-mix(in srgb, var(--energy) 12%, transparent); border-color: color-mix(in srgb, var(--energy) 40%, transparent); } /* inventory card list (sheet + rows with an action) */ .fx-pwrlist { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .fx-pwrcard { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 12px; text-align: left; cursor: default; } .fx-pwrcard__body { min-width: 0; } .fx-pwrcard .fg-pwr__name { font-size: 14px; } .fx-pwrcard .fg-pwr__desc { font-size: 10.5px; } .fx-pwrcard .fg-pwr__art { width: 38px; height: 38px; } .fx-pwrcard .fg-pwr__art .fg-icon { width: 20px; height: 20px; } .fx-pwrcard .fx-btn { flex: none; } .fx-pwrstate { font: 700 9px/1.2 var(--font-body); letter-spacing: 0.05em; color: var(--faint); text-align: center; max-width: 64px; } .fx-pwrstate--on { color: var(--success); } .fx-pwrstate svg { width: 11px; height: 11px; vertical-align: -1px; } /* tappable real cards on the arsenal screen */ .fx-pwrgrid .fg-pwr[data-pwrsel]:active { transform: scale(0.97); } .fx-simbtn:hover { color: var(--muted); } /* season ladder rows */ .fx-ladderow { display: flex; align-items: center; gap: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); padding: 10px 14px; } .fx-ladderow--you { border-color: color-mix(in srgb, var(--lime) 70%, transparent); } .fx-ladderow__rank { width: 26px; text-align: center; font: 400 18px/1 var(--font-display); color: var(--muted); flex: none; } .fx-ladderow__rank svg { width: 18px; height: 18px; color: var(--lime); } .fx-ladderow__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .fx-ladderow__name { font: 700 14px/1.2 var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-ladderow__sub { font: 400 11px/1.2 var(--font-body); color: var(--faint); } .fx-ladderow__pts { font: 400 24px/1 var(--font-display); color: var(--text); display: flex; align-items: baseline; gap: 4px; flex: none; } .fx-ladderow__pts i { font: 700 9px/1 var(--font-body); font-style: normal; color: var(--faint); letter-spacing: 0.08em; } /* charity pot picker (result screen) */ .fx-pot__total { font: 400 30px/1.4 var(--font-display); color: var(--text); margin-top: 4px; } .fx-pot__row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } .fx-pot__chip { border-radius: var(--pill); border: 1px solid var(--success); background: none; cursor: pointer; font: 700 13px/1 var(--font-body); color: var(--success); padding: 10px 16px; } .fx-pot__chip:active { transform: scale(0.97); } .fx-pot__charity { border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: 600 12px/1.2 var(--font-body); color: var(--muted); padding: 10px 14px; } .fx-pot__charity--on { border-color: var(--success); color: var(--success); } .fx-pot__charity:disabled { opacity: 0.45; cursor: not-allowed; } /* camera-verify button in the log sheet */ .fx-cambtn { margin-top: 10px; width: 100%; min-height: 44px; border-radius: var(--pill); border: 1px dashed var(--ink-line-strong, var(--line-bright)); background: none; cursor: pointer; font: 600 12px/1.2 var(--font-body); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; } .fx-cambtn svg { width: 15px; height: 15px; } .fx-cambtn span { color: var(--faint); font-weight: 400; font-size: 11px; } /* crew-code grammar chip */ .fx-codegram { font: 700 12px/1.2 ui-monospace, monospace; color: var(--lime); background: color-mix(in srgb, var(--lime) 10%, transparent); border-radius: 6px; padding: 2px 6px; } .fx-sharecard__a { font: 600 12px/1 var(--font-body); color: var(--lime); text-decoration: none; border: 0; background: none; padding: 8px 12px; cursor: pointer; align-self: center; } /* live toast */ .fx-toast--live { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 80; max-width: 86%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; animation: fx-toast-in 0.18s ease-out; } .fx-toast--live svg { width: 14px; height: 14px; flex: none; } @keyframes fx-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* camera note overlay */ .fx-camnote__sheet { max-width: 340px; } .fx-camnote__stage { position: relative; margin-top: 12px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #000; border: 1px solid var(--line); } .fx-camnote__video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); } .fx-camnote__tag { position: absolute; top: 8px; left: 8px; font: 700 9px/1 var(--font-body); letter-spacing: 0.1em; color: #fff; background: rgba(0,0,0,0.55); border-radius: var(--pill); padding: 5px 8px; } .fx-camnote__off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 700 12px/1.6 var(--font-body); color: var(--faint); letter-spacing: 0.06em; } .fx-camnote__body { font: 400 12px/1.55 var(--font-body); color: var(--muted); margin: 12px 0 0; text-align: center; } .fx-camnote__body code { font: 600 11px/1 ui-monospace, monospace; color: var(--lime); } .fx-camnote__link { display: block; text-align: center; margin-top: 10px; font: 700 13px/1.2 var(--font-body); color: var(--lime); text-decoration: none; }