/* ═══════════════════════════════════════════════════════════════════════════ LUMENARC — ONE LAMP IN A DARK ROOM A near-black ground warmed by the light it holds, panels that are only just inside the light, and a single yellow accent that behaves like a source rather than like paint. Rules this sheet keeps, without exception: · Radius is 10 (buttons, chips, tiles), 16 (cards, sheets, the stage) or 999 (pills). Nothing else, and never 0. Optics are machined, not soft. · ONE shadow, --sh, for weight. ONE glow, --glow, and it is spent ONLY on things that are meant to be emitting: the play button, the accent fill, the meter, the lit tab, the lamp on the splash. Nothing else glows. · Yellow is light. It is a fill or a large glyph; small yellow TEXT is --accent-d. On a yellow FILL, text is --bg, never white. · Motion is 190ms cubic-bezier(.22,.9,.28,1); press is scale(.96). · Exactly one looping animation is ever on screen at a time: the lamp breathing on the splash, then the slow sheen on the play button. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Written from JS by applySafeArea(). 0 outside Telegram fullscreen, so every utility that reads them collapses on its own. */ --tg-safe-top: 0px; --tg-safe-bottom: 0px; /* Duplicated from brand.js so the splash paints correctly on frame one, before shell.js has stamped the palette onto . */ --bg: #141204; --surface: #1F1B08; --tint: #2B2409; --tint-2: #3B3210; --line: #4E4217; --ink: #F8F3DE; --ink-2: #B5AC85; --ink-3: #8B8460; --accent: #FDE047; --accent-d: #FEF08A; --good: #A3E635; --warn: #F4704F; --f-display: "Unbounded", "Avenir Next", "Segoe UI", sans-serif; --f-text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --r: 10px; /* buttons, chips, tiles */ --r-lg: 16px; /* cards, sheets, the stage */ --edge: 1px solid var(--line); --sh: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 34px -20px #000; --glow: 0 8px 30px -10px rgba(253, 224, 71, .45); --t: 190ms cubic-bezier(.22, .9, .28, 1); --nav-h: 60px; } *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Overlays set their own display, which outranks the UA rule for [hidden]. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } html { background: var(--bg); } /* The room: the lamp is above and off screen, so its spill sits at the top of the page and falls off downward. This is the ONLY decorative gradient in the app — everything else is a flat surface that the light either reaches or does not. */ body { font-family: var(--f-text); font-weight: 500; color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; background: radial-gradient(118% 52% at 50% -6%, rgba(253, 224, 71, .10), rgba(253, 224, 71, 0) 62%), var(--bg); } button, input { font: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; } /* Anything that counts gets tabular figures, or the digits jitter as it ticks. */ [data-best], [data-hud-score], [data-go-score], .fig b, .rw-sc, .daily-v { font-variant-numeric: tabular-nums; } /* The icon sprite itself never renders. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── icons ───────────────────────────────────────────────────────────────── */ .ic { display: block; flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ic-s { width: 18px; height: 18px; stroke-width: 1.85; } /* 40px chip: a dark plate with a hairline the light catches, and the glyph itself lit. The plate is not the light — the glyph is. */ .chip { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--tint); border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(253, 224, 71, .13); color: var(--accent-d); } .chip--sm { width: 32px; height: 32px; border-radius: 8px; } .chip--lg { width: 52px; height: 52px; } .chip--lg .ic { width: 28px; height: 28px; } /* ── containers: four roles, no new shapes ───────────────────────────────── */ .card { background: var(--surface); border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 16px; margin-bottom: 12px; } .card.is-feature { background: var(--tint); box-shadow: none; } .card.is-outline { background: none; box-shadow: none; } .cardhead { display: flex; align-items: center; gap: 12px; } .ht { display: flex; flex-direction: column; min-width: 0; margin-right: auto; } .h-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .h-s { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-top: 1px; } /* ── type ────────────────────────────────────────────────────────────────── */ .lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); font-style: normal; } .bignum { font-family: var(--f-display); font-size: clamp(44px, 15vw, 58px); font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 1; margin: 12px 0 2px; } .bignum--mid { font-size: 46px; margin: 8px 0 4px; } .lede { margin: 2px 2px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .note { margin: 12px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .sub { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); } .footnote { margin: 4px 4px 6px; font-size: 12px; line-height: 1.5; color: var(--ink-3); } /* On a tall phone the console runs out before the screen does. The legal line takes the slack and pins to the bottom, so the empty space reads as spacing rather than as a page that stopped early. */ .screen[data-screen="home"] .footnote { margin-top: auto; padding-top: 22px; } /* ── pills ───────────────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; background: var(--tint-2); color: var(--accent-d); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .pill--rank { background: var(--surface); border: var(--edge); } .pill--quiet { background: none; color: var(--ink-2); padding: 5px 0; } .pill--quiet:empty { display: none; } .pill--big { font-size: 12.5px; padding: 6px 14px; margin-top: 10px; } .pill.is-done { background: rgba(163, 230, 53, .14); color: var(--good); } /* ── progress track ──────────────────────────────────────────────────────── */ .track { height: 8px; background: var(--tint); border-radius: 999px; overflow: hidden; margin-top: 14px; } /* The meter is a strip of the same light the game is made of: it emits. */ .track .fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px -1px rgba(253, 224, 71, .7); transition: width 260ms cubic-bezier(.22, .9, .28, 1), background var(--t); } .track .fill.is-low { background: var(--warn); box-shadow: 0 0 12px -1px rgba(244, 112, 79, .7); } .prog { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; } .prog-n { display: flex; flex-direction: column; } .prog-n--end { text-align: right; } .prog-n b { font-family: var(--f-display); font-size: 19px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; } .prog-n i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border-radius: var(--r); padding: 14px 16px; font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; text-align: left; } /* Dark ground-colour type on the yellow fill: --bg on --accent clears ~14:1. The fill is the brightest thing in the app, so its text is the darkest. */ .btn--accent { background: var(--accent); color: var(--bg); box-shadow: var(--glow); } .btn--soft { background: var(--tint); color: var(--accent-d); border: var(--edge); } .btn--outline { background: var(--surface); color: var(--ink); border: var(--edge); } .btn:disabled { opacity: .5; } .press { transition: transform var(--t), box-shadow var(--t), background var(--t); } .press:active { transform: scale(.96); } .btn--ad { align-items: flex-start; text-align: left; margin-top: 10px; } .ad-tx { display: flex; flex-direction: column; gap: 3px; } .ad-tx b { font-size: 14px; font-weight: 700; } .ad-tx i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .ad-tx i:empty { display: none; } .iconbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--surface); border: var(--edge); border-radius: var(--r); color: var(--ink); } /* ── splash ──────────────────────────────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: opacity 200ms cubic-bezier(.22, .9, .28, 1); } #splash.out { opacity: 0; } /* The lamp, warming up: a blurred halo behind the plate, breathing. The one looping element on this screen, and the screen only lives for a moment. */ .sp-mark { position: relative; width: 74px; height: 74px; display: grid; place-items: center; background: var(--tint); border: var(--edge); border-radius: var(--r-lg); color: var(--accent); margin-bottom: 18px; } .sp-mark::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 224, 71, .34), rgba(253, 224, 71, 0) 68%); animation: breathe 2600ms ease-in-out infinite; } .sp-mark .ic { position: relative; width: 36px; height: 36px; } @keyframes breathe { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.06); } } .sp-name { font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; } .sp-sub { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; } /* ── frame ───────────────────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; } /* The top element carries the fullscreen top inset — the whole chrome band is reserved here so the brand line clears Telegram's floating Close / ⋯ row. */ .topbar { flex: none; padding-top: max(var(--tg-safe-top), env(safe-area-inset-top, 0px)); } /* Fullscreen already reserves the chrome inset; trim a cosmetic sliver so the brand line does not read as a gap, floored at the inset itself. */ [data-fullscreen="1"] .topbar { padding-top: max(var(--tg-safe-top), calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 1.4vh)); } .brandline { display: flex; align-items: center; gap: 9px; padding: 11px 16px 9px; } .mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--tint); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(253, 224, 71, .14); color: var(--accent); } .mark .ic { width: 18px; height: 18px; } .wordmark { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } /* Rank badge on the right of the brand bar. shell.js writes every [data-rank-badge], so this stays in sync with the home hero. */ .brand-rank { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-d); font-size: 12px; font-weight: 700; } /* ── bottom nav bar: the four tabs, standard mobile position ────────────────── A flex-column child of #app, so it pins to the bottom of the fixed viewport above the scrolling content (no overlap, no content padding needed). The top edge carries a hairline of the lamp's light. */ .navbar { flex: none; display: flex; padding: 6px 8px; padding-bottom: calc(6px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); border-top: 1px solid var(--line); background: var(--surface); } .navtab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: var(--r); color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; transition: color var(--t), background var(--t); } .navtab .ic { width: 22px; height: 22px; } .navtab.is-on { color: var(--accent); background: var(--tint); } /* The lit tab keeps a filament along its top edge — the same seam the nav has. */ .navtab.is-on::after { content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 2px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 10px rgba(253, 224, 71, .8); } /* Play is the game and nothing else — the top brand bar and bottom nav both step aside so the game owns the screen. */ [data-screen="play"] .topbar, [data-screen="play"] .navbar { display: none; } main { flex: 1; min-height: 0; position: relative; } .screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; padding: 8px 14px 20px; } .screen.is-active { display: flex; } .screen.play { overflow: hidden; padding: 4px 12px 8px; } /* One orchestrated entrance per screen: the content comes up in sequence, the way a row of lamps comes on. Never on Play — the game must be instant. */ .screen.is-active:not(.play) > * { animation: riseIn 420ms cubic-bezier(.22, .9, .28, 1) both; } .screen.is-active:not(.play) > *:nth-child(2) { animation-delay: 40ms; } .screen.is-active:not(.play) > *:nth-child(3) { animation-delay: 80ms; } .screen.is-active:not(.play) > *:nth-child(4) { animation-delay: 115ms; } .screen.is-active:not(.play) > *:nth-child(5) { animation-delay: 145ms; } .screen.is-active:not(.play) > *:nth-child(6) { animation-delay: 170ms; } .screen.is-active:not(.play) > *:nth-child(n+7) { animation-delay: 190ms; } @keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } /* ── home (HUD) ────────────────────────────────────────────────────────────── */ /* Thin hairline rule between console sections — no filled cards. */ .rule { height: 1px; background: var(--line); margin: 16px 2px; } /* Bare hero: the record as a raw number, not wrapped in a card. */ .hero { margin: 8px 2px 0; } .hero-num { font-family: var(--f-display); font-size: clamp(46px, 16vw, 68px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; } .hero-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .hero-meta .lbl { margin-right: auto; } .rankline { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-d); font-size: 12.5px; font-weight: 700; } /* Stats as one inline row, thin vertical dividers between figures. */ .figrow { display: flex; margin: 0 2px; } .fig { flex: 1; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 12px; } .fig:first-child { padding-left: 0; } .fig:last-child { padding-right: 0; } .fig + .fig::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: var(--line); } .fig b { font-family: var(--f-display); font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .fig span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } /* Daily challenge: one slim strip — label + state + inline bar + value. */ .daily { display: flex; align-items: center; gap: 10px; margin: 0 2px; } .daily-l { min-width: 0; flex-shrink: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .daily-state { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .daily-state.is-done { color: var(--good); } .daily-bar { flex: 1; min-width: 40px; height: 5px; background: var(--tint); border-radius: 999px; overflow: hidden; } .daily-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t), background var(--t); } .daily-v { flex: none; font-family: var(--f-display); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Boost offer: a slim inline strip, not a padded card. */ .offer-row { display: flex; align-items: center; gap: 11px; margin: 0 2px; } .offer-tx { display: flex; flex-direction: column; margin-right: auto; min-width: 0; } .offer-tx b { font-size: 14px; font-weight: 700; } .offer-tx i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .offer-tx i span:empty { display: none; } /* ── play ────────────────────────────────────────────────────────────────── */ .hud { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 2px 0; padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 8px); } .hud-score { display: flex; flex-direction: column; margin-right: auto; line-height: 1; } .hud-score b { font-family: var(--f-display); font-size: 32px; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .hud-score .lbl { margin-top: 5px; } /* The in-game pause control: the player's only way out of a round, so it is a lit icon button, never blended into the dark HUD. */ .hud .iconbtn { background: var(--tint-2); border-color: rgba(253, 224, 71, .34); color: var(--accent); } .pill--combo { opacity: 0; transition: opacity var(--t); background: var(--accent); color: var(--bg); font-size: 14px; box-shadow: var(--glow); } .pill--combo.is-on { opacity: 1; } .pill--shield { background: var(--tint); border: var(--edge); } .meter { flex: none; margin: 12px 2px 10px; } .meter .track { margin-top: 6px; } /* The stage is the room: darker than the page, with a hairline of light along its top lip and the dark closing in at the corners. */ .stagewrap { flex: 1; min-height: 0; position: relative; border: var(--edge); border-top-color: rgba(253, 224, 71, .3); border-radius: var(--r-lg); box-shadow: var(--sh), inset 0 1px 0 rgba(253, 224, 71, .1); background: #0E0C02; overflow: hidden; margin-bottom: 6px; } #stage { display: block; width: 100%; height: 100%; touch-action: none; } .startover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: var(--r-lg); padding: 18px; overflow-y: auto; } .start-in { width: 100%; max-width: 320px; text-align: left; } .start-in .chip--lg { margin: 0 auto 12px; } .start-t { display: block; text-align: center; font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 16px; } .steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .step { display: flex; align-items: center; gap: 10px; border: var(--edge); border-radius: var(--r); padding: 10px 12px; } .step-n { width: 21px; height: 21px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 11.5px; font-weight: 700; } .step-tx { display: flex; flex-direction: column; min-width: 0; } .step-tx b { font-size: 14px; font-weight: 700; } .step-tx i { font-style: normal; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; margin-top: 1px; } /* ── rank ────────────────────────────────────────────────────────────────── */ .seg { display: flex; gap: 4px; background: var(--tint); border-radius: 999px; padding: 4px; margin: 4px 0 14px; } .seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); transition: background var(--t), color var(--t), box-shadow var(--t); } .seg-btn.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--sh); } .board { display: flex; flex-direction: column; margin-top: 6px; } .rw { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-radius: var(--r); } /* The divider is a pseudo-element, not a border-top: a 1px border on a rounded box curves up at both ends and reads as a wobble. */ .rw + .rw::before, .row + .row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); } .rw--me::before, .rw--me + .rw::before { display: none; } .rw-pos { min-width: 22px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); text-align: center; } .rw-av { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 999px; /* shell.js hands each name a hue; keep it quiet so the lamp stays the one loud colour on the screen. Dark plate, lit glyph. */ background: hsl(var(--h) 24% 18%); color: hsl(var(--h) 44% 70%); font-size: 13px; font-weight: 700; } .rw-nm { flex: 1; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; } .rw-sc { font-family: var(--f-display); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; } .rw--top .rw-pos { color: var(--accent); } .rw--me { background: var(--tint); padding-left: 8px; padding-right: 8px; margin: 4px 0; } .rw--me + .rw, .rw--me { border-top-color: transparent; } .rw--me .rw-nm { font-weight: 700; } .rw--me .rw-sc { color: var(--accent); } /* ── more ────────────────────────────────────────────────────────────────── */ .rows { margin-top: 6px; } .card > .rows:first-child { margin-top: 0; } .card.is-outline { padding: 6px 16px; } .row { position: relative; display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px 2px; font-size: 14.5px; font-weight: 600; text-align: left; color: var(--ink); border-radius: var(--r); } .row > span { flex: 1; min-width: 0; } .row > .ic { color: var(--accent-d); } .rowbtn { transition: background var(--t); } .rowbtn:active { background: var(--tint); } .chev { width: 18px; height: 18px; color: var(--ink-3); } .row.is-danger, .row.is-danger > .ic, .row.is-danger .chev { color: var(--warn); } .sw { appearance: none; -webkit-appearance: none; width: 46px; height: 27px; flex: none; background: var(--tint-2); border-radius: 999px; position: relative; margin: 0; transition: background var(--t), box-shadow var(--t); } .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; background: var(--ink); border-radius: 999px; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); transition: transform var(--t); } .sw:checked { background: var(--accent); box-shadow: 0 0 14px -3px rgba(253, 224, 71, .8); } .sw:checked::after { transform: translateX(19px); background: var(--bg); } /* ── section header (rank / more, HUD-style hairline sections) ────────────── */ .sect-h { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); margin: 4px 2px 8px; } .screen[data-screen="more"] .sect-h:not(:first-child) { margin-top: 4px; } .board { margin-top: 2px; } /* Squared small-radius button — the "interface" variant. */ .btn--sq { width: auto; flex: none; border-radius: 8px; padding: 9px 13px; font-size: 12.5px; gap: 6px; } /* ── primary action: in-content Play button ─────────────────────────────────── A normal button in the Home flow (not a fixed bar), so it never collides with the bottom nav. The one lit surface on the screen, with a slow sheen travelling across it — the app's single looping element once the splash is gone. */ .playcta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; margin: 16px 2px 0; background: var(--accent); color: var(--bg); padding: 15px 18px; border-radius: var(--r); box-shadow: var(--glow); } .playcta::after { content: ""; position: absolute; top: -60%; bottom: -60%; width: 42px; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); transform: skewX(-16deg); animation: sheen 4600ms cubic-bezier(.5, 0, .5, 1) infinite; } @keyframes sheen { 0% { left: -22%; } 38%, 100%{ left: 118%; } } .playcta-tx { display: flex; flex-direction: column; margin-right: auto; text-align: left; line-height: 1.15; } .playcta-tx b { font-family: var(--f-display); font-size: 17px; font-weight: 700; letter-spacing: -0.03em; } .playcta-tx i { font-style: normal; font-size: 12px; font-weight: 600; opacity: .78; margin-top: 2px; } .playcta-ar { width: 24px; height: 24px; opacity: .8; } /* ── overlays ────────────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(6, 5, 1, .74); } .sheet { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); background: var(--surface); border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--sh); display: flex; flex-direction: column; max-height: calc(100dvh - max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 24px); /* Deliberately NOT animated. A sheet that slides in from below sits, for the length of the animation, with its own Close button under the fold — and if a client throttles animations it stays there. The sheet just appears. */ } .sheet-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); } .sheet-head b { flex: 1; min-width: 0; font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -0.03em; } .sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 4px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } .sheet-body p { margin: 0 0 12px; } .sheet-body ul { margin: 0 0 12px; padding-left: 0; list-style: none; } .sheet-body li { position: relative; padding-left: 20px; margin-bottom: 10px; } .sheet-body li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 7px; height: 7px; background: var(--accent); border-radius: 999px; box-shadow: 0 0 8px rgba(253, 224, 71, .8); } .sheet-body b { font-weight: 700; color: var(--ink); } .sheet-foot { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--line); } .modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; } .modal-card { pointer-events: auto; width: 100%; max-width: 330px; background: var(--surface); border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 20px 18px; text-align: center; animation: rise 220ms cubic-bezier(.22, .9, .28, 1); } @keyframes rise { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .modal-card .chip--lg { margin: 0 auto 4px; } .modal-card .btn { justify-content: center; } .modal-t { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: -0.03em; margin-top: 10px; } .modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .modal-btns .btn { padding: 13px 10px; font-size: 13.5px; gap: 7px; } .modal-btns .ic { width: 19px; height: 19px; } .revive { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; } .revive span { display: grid; place-items: center; width: 132px; height: 132px; background: var(--tint); border: var(--edge); border-radius: 999px; box-shadow: var(--glow); font-family: var(--f-display); font-size: 56px; font-weight: 700; color: var(--accent); animation: pop 220ms cubic-bezier(.22, .9, .28, 1); } @keyframes pop { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } } .toast { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: calc(96px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); background: var(--surface); border: var(--edge); border-radius: 999px; box-shadow: var(--sh); padding: 13px 18px; font-size: 13.5px; font-weight: 600; text-align: center; } /* ── reduce motion: kill all of it ───────────────────────────────────────── */ [data-reduce-motion="1"] *, [data-reduce-motion="1"] *::before, [data-reduce-motion="1"] *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .playcta::after, .sp-mark::before { display: none; } } /* Short phones: the big number and the Play block give first. */ @media (max-height: 690px) { .bignum { font-size: 42px; } .hero-num { font-size: clamp(42px, 14vw, 56px); } .playcta-tx b { font-size: 16px; } .lede { margin-bottom: 10px; } .step { padding: 8px 10px; } }