/* ═══════════════════════════════════════════════════════════════════════════ FLYWHEEL NINE — SOFT DEPTH A cushioned console. Nothing in this app floats on nothing: every element is a soft slab resting on the slab beneath it, and the only hard edge in the whole product is the needle inside the canvas. The rules this sheet keeps, without exception: · Radius is 20 on slabs, 16 on the tiles inside them, 999 on every single control. There is not one square corner in the chrome. · No borders. Depth is carried by a three-stop shadow underneath and a one-pixel light lip along the top face. Recesses invert both. · Type is rounded geometric sans only, two faces, no mono. Contrast comes from weight: 400 for prose, 800 for legends, Fredoka for every numeral. · Rhythm is 12. Padding, gaps and margins are 12 or a multiple of it. · Motion is a 300ms spring, and press is scale, never colour. Slabs you can tap RISE when touched, because a cushion you press moves. ═══════════════════════════════════════════════════════════════════════════ */ :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: #171620; --surface: #232231; --tint: #2E2C3E; --tint-2: #3B3850; --line: #46425C; --ink: #F5F2F8; --ink-2: #B8B2C8; --ink-3: #8C86A2; --accent: #FFB27A; --accent-d: #FFCEA6; --good: #6FE3B4; --warn: #FF8FA3; --f-display: "Fredoka", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --f-ui: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --r-slab: 20px; --r-tile: 16px; --r-pill: 999px; --gap: 12px; /* The cushion. Three stops so the falloff is long and soft instead of the single hard drop a one-stop shadow gives. */ --lift: 0 2px 4px rgba(0, 0, 0, .26), 0 8px 18px rgba(0, 0, 0, .24), 0 20px 40px rgba(0, 0, 0, .30); --lift-sm: 0 1px 2px rgba(0, 0, 0, .26), 0 4px 10px rgba(0, 0, 0, .22); --lift-hi: 0 4px 8px rgba(0, 0, 0, .28), 0 14px 28px rgba(0, 0, 0, .30), 0 30px 56px rgba(0, 0, 0, .34); /* the lit top face of a cushion */ --lip: inset 0 1px 0 rgba(255, 255, 255, .07); /* a recess: the light comes from above, so the shadow is at the TOP inside */ --well: inset 0 3px 7px rgba(0, 0, 0, .52), inset 0 -1px 0 rgba(255, 255, 255, .05); --spring: 300ms cubic-bezier(.34, 1.42, .5, 1); --calm: 300ms cubic-bezier(.3, .8, .3, 1); --dock-h: 68px; } *, *::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%; background: var(--bg); overscroll-behavior: none; -webkit-overflow-scrolling: touch; } body { font-family: var(--f-ui); font-weight: 400; color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } button, input { font: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; } /* The glyph sheet itself never renders. */ .iconset { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── glyphs ────────────────────────────────────────────────────────────────── One family: 2px strokes, round caps, round joins, and every corner of every shape carries a real radius. Nothing in the set has a point on it. */ .gl { display: block; flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gl--s { width: 18px; height: 18px; } .gl--lg { width: 30px; height: 30px; } .gl .fl { fill: currentColor; stroke: none; } /* A glyph sitting in its own soft pad. Cards on cards, all the way down. */ .pad { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--tint); box-shadow: var(--lift-sm), var(--lip); color: var(--accent-d); } .pad--sm { width: 34px; height: 34px; } .pad--sm .gl { width: 19px; height: 19px; } .pad--lg { width: 60px; height: 60px; } .pad--lg .gl { width: 30px; height: 30px; } /* ── type roles ──────────────────────────────────────────────────────────── */ /* The small bold legend. Weight does the work, not tracking or a rule. */ .eyebrow { display: block; font-family: var(--f-ui); font-size: 11px; font-weight: 800; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-3); font-style: normal; } .readout { font-family: var(--f-display); font-size: clamp(54px, 19vw, 70px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; margin: 10px 0 2px; } .readout--mid { font-size: 52px; margin: 8px 0 2px; } .view-h { font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 0 4px 12px; } .lead-h { font-family: var(--f-display); font-size: 27px; font-weight: 600; line-height: 1.18; letter-spacing: -.015em; margin: 16px 0 8px; } .say { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); } .say--tight { display: block; font-size: 13px; color: var(--ink-3); } .crumb { margin: 4px 6px 6px; font-size: 12px; line-height: 1.55; color: var(--ink-3); } /* ── slabs: the whole layout vocabulary ──────────────────────────────────── */ .slab { position: relative; background: var(--surface); border-radius: var(--r-slab); box-shadow: var(--lift), var(--lip); padding: 16px; margin-bottom: var(--gap); } .slab-hd { display: flex; align-items: center; gap: var(--gap); margin-bottom: 12px; } .slab-hd .eyebrow { margin-right: auto; } /* The lead slab sits highest in the stack and says so. */ .slab--lead { padding: 16px 16px 18px; box-shadow: var(--lift-hi), var(--lip); } .slab--record { padding-bottom: 18px; } .tile { background: var(--tint); border-radius: var(--r-tile); box-shadow: var(--lift-sm), var(--lip); padding: 12px; } /* ── home: the identity line, inside the lead slab, not a chrome bar ─────── */ .idline { display: flex; align-items: center; gap: var(--gap); } .idmark { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--tint-2); color: var(--accent); box-shadow: var(--lift-sm), inset 0 1px 0 rgba(255, 255, 255, .12); } .idtx { display: flex; flex-direction: column; min-width: 0; } .idtx b { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; } .idtx i { font-style: normal; font-size: 12.5px; color: var(--ink-3); } /* ── the release window figure ─────────────────────────────────────────────── The module only a hold game earns. Every other game in this set is judged on the instant you touch the glass; this one is judged long after you stop touching it, and that is not something a sentence lands. So it is drawn: the part of the sweep you drive, the part the wheel does alone, where the needle has to stop, and the bumper waiting past it. Static, no script. */ .win { margin: 16px 0 0; padding: 0; } .win-dwg { display: block; width: 100%; height: auto; border-radius: var(--r-tile); background: var(--tint); box-shadow: var(--well); padding: 4px 0; } .win-track { fill: rgba(0, 0, 0, .34); } .win-hold { fill: var(--accent); } .win-coast { fill: var(--accent); opacity: .38; } .win-red { fill: var(--warn); opacity: .5; } .win-shade { fill: rgba(0, 0, 0, .5); } .win-base { fill: var(--surface); } .win-band { fill: var(--good); opacity: .26; } .win-core { fill: var(--good); } .win-stop { fill: var(--warn); } .win-knob { fill: var(--surface); } .win-eye { fill: var(--accent); } .win-rule { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; opacity: .5; } .win-t { font-family: var(--f-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; fill: var(--ink-2); } .win-t--dim { fill: var(--ink-3); } .win-t--good { fill: var(--good); } .win-t--warn { fill: var(--warn); } .win-t--acc { fill: var(--accent-d); } .win-cap { margin: 12px 2px 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); } /* ── tags: every one a pill ──────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); color: var(--ink-2); border-radius: var(--r-pill); padding: 7px 13px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: var(--lift-sm), var(--lip); } .tag--rank { color: var(--accent-d); } .tag--big { font-size: 13px; padding: 8px 16px; margin-top: 10px; } .tag.is-done { background: rgba(111, 227, 180, .16); color: var(--good); box-shadow: none; } /* ── gauges: fat, round-ended, sunk into their slab ──────────────────────── */ .gauge { height: 12px; border-radius: var(--r-pill); background: var(--bg); box-shadow: var(--well); overflow: hidden; } .gauge > i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); transition: width var(--calm), background var(--calm); } .gauge > i.is-low { background: var(--warn); } /* ── buttons: pill, filled, no border, lit along the top ─────────────────── */ .pb { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border-radius: var(--r-pill); padding: 15px 20px; font-family: var(--f-display); font-size: 16px; font-weight: 500; letter-spacing: -.005em; } .pb--go { background: var(--accent); color: var(--bg); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 26px -10px rgba(255, 178, 122, .6), inset 0 1px 0 rgba(255, 255, 255, .5); } .pb--soft { background: var(--tint); color: var(--ink); box-shadow: var(--lift-sm), var(--lip); } .pb--quiet { background: var(--tint-2); color: var(--ink-2); box-shadow: var(--lip); } .pb--sm { width: auto; flex: none; padding: 10px 16px; font-size: 13.5px; gap: 7px; } .pb:disabled { opacity: .5; } /* The ad button carries stacked copy, so it centres its column not its line. */ .pb--tall { align-items: center; text-align: left; margin-top: 10px; padding: 14px 18px; } .pb-stack { display: flex; flex-direction: column; gap: 2px; } .pb-stack b { font-family: var(--f-ui); font-size: 14px; font-weight: 700; } .pb-stack i { font-style: normal; font-family: var(--f-ui); font-size: 12px; font-weight: 400; opacity: .78; } .pb-stack i:empty { display: none; } .knob { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--tint); color: var(--ink); box-shadow: var(--lift-sm), var(--lip); } /* Press is a squeeze. Slabs you can tap rise first, then squeeze. */ .tap { transition: transform var(--spring), box-shadow var(--spring), background var(--calm); } .tap:active { transform: scale(.96); } .slab.tap:active, .rowbtn:active { transform: translateY(-2px) scale(.995); box-shadow: var(--lift-hi), var(--lip); } /* ── splash ──────────────────────────────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 90; background: radial-gradient(120% 50% at 50% 32%, rgba(255, 178, 122, .10), rgba(255, 178, 122, 0) 66%), var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 220ms cubic-bezier(.3, .8, .3, 1); } #splash.out { opacity: 0; } .sp-mark { width: 96px; height: 96px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface); color: var(--accent); box-shadow: var(--lift-hi), inset 0 2px 0 rgba(255, 255, 255, .10); margin-bottom: 24px; animation: cushion 620ms cubic-bezier(.34, 1.42, .5, 1); } .sp-mark .gl { width: 46px; height: 46px; } @keyframes cushion { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } } .sp-name { font-family: var(--f-display); font-size: 30px; font-weight: 600; letter-spacing: -.015em; } .sp-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; } /* ── frame ───────────────────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; /* one warm lamp above the console, and nothing else on the ground */ background: radial-gradient(140% 42% at 50% -6%, rgba(255, 178, 122, .09), rgba(255, 178, 122, 0) 64%), var(--bg); } main { flex: 1; min-height: 0; position: relative; } /* There is no chrome bar. Each view carries the fullscreen top inset itself, so the content is the first thing on the screen on every tab. */ /* Plain block flow, deliberately. Only Play needs a flex column (the stage has to eat whatever height the HUD leaves); the three scrolling views are a stack of slabs and nothing more, and a block scroll container can never quietly compress its own children the way a flex one can. */ .view { position: absolute; inset: 0; display: none; overflow-y: auto; padding: 12px 12px 24px; padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 12px); } .view.is-active { display: block; } /* Fullscreen already reserves the chrome inset; trim a cosmetic sliver so the first slab does not read as a gap, floored at the inset itself. */ [data-fullscreen="1"] .view { padding-top: max(var(--tg-safe-top), calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 1.2vh)); } /* Home clears the floating Play pill. */ .view--home { padding-bottom: 96px; } .view--play { overflow: hidden; padding: 8px 12px 10px; } .view--play.is-active { display: flex; flex-direction: column; } /* ── bottom dock: the four tabs, standard mobile position ──────────────────── A flex-column child of #app, so it pins to the bottom of the fixed viewport under the scrolling views. The active tab is a filled pill that lifts out of the dock; the rest sit flat in it. */ .dock { flex: none; display: flex; align-items: center; gap: 4px; height: calc(var(--dock-h) + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); padding: 8px 10px; padding-bottom: calc(8px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); background: var(--surface); border-radius: var(--r-slab) var(--r-slab) 0 0; box-shadow: 0 -2px 6px rgba(0, 0, 0, .24), 0 -14px 34px rgba(0, 0, 0, .28), var(--lip); } .dock-tab { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-pill); color: var(--ink-3); font-size: 10.5px; font-weight: 700; transition: color var(--calm), background var(--calm), box-shadow var(--calm); } .dock-tab .gl { width: 22px; height: 22px; } .dock-tab.is-on { color: var(--accent-d); background: var(--tint); box-shadow: var(--lift-sm), var(--lip); } /* Play is the game and nothing else: the dock and the floating pill both step aside so the instrument owns the screen. */ [data-screen="play"] .dock { display: none; } /* ── the floating Play pill ────────────────────────────────────────────────── It belongs to Home, so it only exists on Home. Fixed above the dock, lifted further off the ground than anything else in the stack. */ .startpill { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(var(--dock-h) + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)) + 12px); display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--bg); box-shadow: 0 3px 6px rgba(0, 0, 0, .3), 0 14px 30px -8px rgba(255, 178, 122, .55), 0 26px 56px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5); } [data-screen="play"] .startpill, [data-screen="rank"] .startpill, [data-screen="more"] .startpill { display: none; } .startpill-gl { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: rgba(23, 22, 32, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); } .startpill-tx { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; } .startpill-tx b { font-family: var(--f-display); font-size: 19px; font-weight: 600; } .startpill-tx i { font-style: normal; font-size: 12px; font-weight: 600; opacity: .72; } .startpill-ch { opacity: .6; } /* ── home: the counters ──────────────────────────────────────────────────── */ .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .tiles .tile { display: flex; flex-direction: column; gap: 1px; } .tiles b { font-family: var(--f-display); font-size: 24px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; } .tiles span { font-size: 11.5px; font-weight: 700; color: var(--ink-3); } /* ── home: record ────────────────────────────────────────────────────────── */ .rec-hd { display: flex; align-items: center; gap: var(--gap); } .rec-hd .eyebrow { margin-right: auto; } /* ── home: today's target ────────────────────────────────────────────────── */ .daily-g { margin: 0 0 12px; font-size: 15px; font-weight: 700; } .daily-v { display: block; margin-top: 10px; font-family: var(--f-display); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); } /* ── home: the optional offer strip ──────────────────────────────────────── */ .offer-row { display: flex; align-items: center; gap: var(--gap); } .offer-tx { display: flex; flex-direction: column; margin-right: auto; min-width: 0; } .offer-tx b { font-size: 14.5px; font-weight: 700; } .offer-tx i { font-style: normal; font-size: 12px; color: var(--ink-3); } .offer-tx i span:empty { display: none; } /* ── play ────────────────────────────────────────────────────────────────── */ .hud { flex: none; display: flex; align-items: center; gap: 8px; padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 4px); } .hud-score { display: flex; flex-direction: column; margin-right: auto; line-height: 1; padding-left: 6px; } .hud-score b { font-family: var(--f-display); font-size: 36px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hud-score .eyebrow { margin-top: 6px; } /* Pause is the player's only way out of a run mid-hold, so it is the one lit control on the screen. */ .hud .knob[data-action="pause"] { background: var(--tint-2); color: var(--accent-d); } .tag--combo { opacity: 0; transition: opacity var(--calm), transform var(--spring); transform: scale(.8); background: var(--accent); color: var(--bg); font-family: var(--f-display); font-size: 15px; font-weight: 600; padding: 6px 14px; box-shadow: 0 6px 16px -6px rgba(255, 178, 122, .7), inset 0 1px 0 rgba(255, 255, 255, .5); } .tag--combo.is-on { opacity: 1; transform: scale(1); } .tag--shield { color: var(--good); } .bandmeter { flex: none; margin: 14px 4px 12px; } .bandmeter .gauge { margin-top: 8px; } /* The stage is sunk into the console, and the console is the page. */ .pit { flex: 1; min-height: 0; position: relative; border-radius: var(--r-slab); background: var(--bg); box-shadow: var(--well), 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; } #stage { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* a HOLD game cannot afford the iOS callout */ } /* The opener: three cushioned steps, and the whole panel is the start target. */ .opener { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: var(--r-slab); padding: 18px 16px; overflow-y: auto; } .opener-in { width: 100%; max-width: 330px; } .opener-in .pad--lg { margin: 0 auto 12px; } .opener-t { display: block; text-align: center; font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 16px; } .steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: var(--gap); } .step { display: flex; align-items: center; gap: var(--gap); background: var(--tint); border-radius: var(--r-tile); box-shadow: var(--lift-sm), var(--lip); padding: 12px; } .step-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--bg); font-family: var(--f-display); font-size: 14px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); } .step-tx { display: flex; flex-direction: column; min-width: 0; } .step-tx b { font-size: 14.5px; font-weight: 700; } .step-tx i { font-style: normal; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; } /* ── rank ────────────────────────────────────────────────────────────────── */ /* Two pills in a sunk track. */ .seg { display: flex; gap: 6px; background: var(--bg); border-radius: var(--r-pill); padding: 6px; margin-bottom: var(--gap); box-shadow: var(--well); } .seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; color: var(--ink-3); transition: color var(--calm), background var(--calm), box-shadow var(--calm); } .seg-btn.is-on { background: var(--tint); color: var(--accent-d); box-shadow: var(--lift-sm), var(--lip); } /* Every row is its own cushion. The board is a stack, not a table. */ .roster { display: flex; flex-direction: column; gap: 8px; margin-top: var(--gap); } .rw { display: flex; align-items: center; gap: var(--gap); background: var(--surface); border-radius: var(--r-tile); box-shadow: var(--lift-sm), var(--lip); padding: 10px 14px 10px 10px; } .rw-pos { min-width: 26px; font-family: var(--f-display); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-3); text-align: center; } .rw-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); /* shell.js hands each name a hue; keep it low so the amber stays the one loud colour on the screen. */ background: hsl(var(--h) 26% 26%); color: hsl(var(--h) 60% 80%); box-shadow: var(--lip); font-family: var(--f-display); font-size: 15px; font-weight: 500; } .rw-nm { flex: 1; font-size: 14.5px; font-weight: 600; } .rw-sc { font-family: var(--f-display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .rw--top .rw-pos { color: var(--accent-d); font-weight: 600; } .rw--me { background: var(--tint-2); box-shadow: var(--lift), var(--lip); } .rw--me .rw-sc { color: var(--accent-d); } /* ── more ────────────────────────────────────────────────────────────────── */ .row { position: relative; display: flex; width: 100%; align-items: center; gap: var(--gap); padding: 8px 0; font-size: 15px; font-weight: 600; text-align: left; color: var(--ink); border-radius: var(--r-tile); } .row + .row { margin-top: 4px; } .rowgl { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--tint); color: var(--accent-d); box-shadow: var(--lift-sm), var(--lip); } .rowgl .gl { width: 20px; height: 20px; } .row > .rowtx { flex: 1; min-width: 0; } .rowbtn { transition: transform var(--spring); } .chev { width: 18px; height: 18px; color: var(--ink-3); } /* A soft rocker. Round travel, round knob, sunk track. */ .sw { appearance: none; -webkit-appearance: none; width: 52px; height: 30px; flex: none; background: var(--bg); border: 0; border-radius: var(--r-pill); position: relative; margin: 0; box-shadow: var(--well); transition: background var(--calm); } .sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; background: #EDE8F2; border-radius: var(--r-pill); box-shadow: 0 2px 5px rgba(0, 0, 0, .45); transition: transform var(--spring); } .sw:checked { background: var(--accent); } .sw:checked::after { transform: translateX(22px); } /* ── overlays ────────────────────────────────────────────────────────────── */ .veil { position: fixed; inset: 0; z-index: 40; background: rgba(9, 8, 14, .72); } .tray { 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-radius: 26px; box-shadow: var(--lift-hi), var(--lip); display: flex; flex-direction: column; max-height: calc(100dvh - max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 24px); /* Deliberately NOT animated in. A tray that slides up 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 tray just appears. */ } .tray-hd { flex: none; display: flex; align-items: center; gap: var(--gap); padding: 14px 14px 12px; } .tray-hd b { flex: 1; min-width: 0; font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .tray-bd { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 18px 4px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); } .tray-bd p { margin: 0 0 12px; } .tray-bd ul { margin: 0 0 12px; padding-left: 0; list-style: none; } .tray-bd li { position: relative; padding-left: 20px; margin-bottom: 10px; } .tray-bd li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; background: var(--accent); border-radius: var(--r-pill); } .tray-bd b { font-weight: 700; color: var(--ink); } .tray-ft { flex: none; padding: 12px 16px 16px; } .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: 336px; background: var(--surface); border-radius: 26px; box-shadow: var(--lift-hi), var(--lip); padding: 22px 18px; text-align: center; animation: cushion 320ms cubic-bezier(.34, 1.42, .5, 1); } .modal-card .pad--lg { margin: 0 auto 6px; } .modal-t { display: block; font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-top: 10px; } .modal-card .say { margin-top: 6px; } .modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .modal-btns .pb { padding: 13px 10px; font-size: 14.5px; gap: 8px; } .modal-btns .gl { width: 19px; height: 19px; } /* The continue countdown: one soft disc, springing in on every number. */ .countdown { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; } .countdown span { display: grid; place-items: center; width: 132px; height: 132px; border-radius: var(--r-pill); background: var(--surface); color: var(--accent); box-shadow: var(--lift-hi), inset 0 2px 0 rgba(255, 255, 255, .10); font-family: var(--f-display); font-size: 62px; font-weight: 600; font-variant-numeric: tabular-nums; animation: cushion 300ms cubic-bezier(.34, 1.42, .5, 1); } .toast { position: fixed; z-index: 70; left: 20px; right: 20px; bottom: calc(var(--dock-h) + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)) + 84px); background: var(--tint); border-radius: var(--r-pill); box-shadow: var(--lift-hi), var(--lip); padding: 14px 20px; font-size: 14px; 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; } } /* Short phones: the display type and the opener give first, the padding never does, because the cushion IS the design. */ @media (max-height: 690px) { .lead-h { font-size: 23px; margin-top: 14px; } .readout { font-size: 50px; } .readout--mid { font-size: 44px; } .hud-score b { font-size: 31px; } .step { padding: 10px; } .opener-t { margin-bottom: 12px; } .opener-in .pad--lg { width: 48px; height: 48px; margin-bottom: 10px; } .opener-in .pad--lg .gl { width: 24px; height: 24px; } }