/* ═══════════════════════════════════════════════════════════════════════════ RIMEFALL — FROZEN · LIT FROM BELOW A violet-black cavern. Flat panels sit on it, separated by a 1px frost line rather than by shadow, and one magenta light does all the work: it pools at the bottom of the app, rings every icon chip like a jewel, and tints the one shadow in the sheet. Rules this sheet keeps, without exception: · Radius is 12 (buttons, chips, rows), 18 (cards, sheets, the stage) or 999 (pills). Nothing else, and never 0. · ONE shadow, --sh, magenta-tinted, used everywhere and never varied. · Magenta is a fill, a ring or a large glyph. Small magenta TEXT is --accent-d (12:1 on the ground). On a magenta FILL, text is --bg. · Motion is 190ms cubic-bezier(.22,.9,.28,1); press is scale(.97). · Display type is condensed (Antonio): tall, sharp, icicle-shaped. ═══════════════════════════════════════════════════════════════════════════ */ :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: #160A18; --surface: #221228; --tint: #2E1436; --tint-2: #3E1B49; --line: #4C2559; --ink: #F7EDFB; --ink-2: #BCA6C8; --ink-3: #93789F; --accent: #E879F9; --accent-d: #F5B7FC; --good: #7DD3FC; --warn: #FB7185; --f-display: "Antonio", "Avenir Next Condensed", "Haettenschweiler", sans-serif; --f-text: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --r: 12px; /* buttons, chips, rows */ --r-lg: 18px; /* cards, sheets, the stage */ --edge: 1px solid var(--line); --sh: 0 1px 2px rgba(7, 2, 9, .60), 0 18px 34px -20px rgba(232, 121, 249, .45); /* The jewel: a thin accent ring plus a bloom held inside the shape. */ --ring: inset 0 0 0 1px rgba(232, 121, 249, .26), inset 0 0 18px -8px rgba(232, 121, 249, .90); --t: 190ms cubic-bezier(.22, .9, .28, 1); } *, *::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-text); font-weight: 500; color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } button, input { font: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; } /* 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; } /* The accent medallion: dark base, thin magenta ring, bloom inside, lit glyph. This is the only place the accent is allowed to glow in the chrome. */ .chip { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--tint); border-radius: var(--r); box-shadow: var(--ring); color: var(--accent-d); } .chip--sm { width: 32px; height: 32px; border-radius: 10px; } .chip--lg { width: 54px; height: 54px; border-radius: 16px; } .chip--lg .ic { width: 28px; height: 28px; } /* ── type ────────────────────────────────────────────────────────────────── */ .lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); font-style: normal; } .bignum { font-family: var(--f-display); font-size: 84px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 0.92; margin: 10px 0 2px; color: var(--accent-d); } .bignum--mid { font-size: 72px; } .lede { margin: 2px 2px 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } .sub { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); } .footnote { margin: 4px 4px 6px; font-size: 11.5px; line-height: 1.55; color: var(--ink-3); } /* Home ends on the footnote, so it sits on the floor of the screen and the space above it is the lit pool, not a gap where content ran out. */ .screen[data-screen="home"] .footnote { margin-top: auto; padding-top: 24px; } /* ── 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; white-space: nowrap; } .pill--big { font-size: 12.5px; padding: 6px 14px; margin-top: 10px; } .pill.is-done { background: rgba(125, 211, 252, .12); color: var(--good); } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border-radius: var(--r); padding: 14px 16px; font-size: 14px; font-weight: 700; letter-spacing: -0.005em; text-align: left; } /* Ground-dark type on the magenta fill clears 7.9:1; off-white would wash out. The inset white line along the top edge is light catching an ice edge. */ .btn--accent { background: var(--accent); color: var(--bg); box-shadow: var(--sh), inset 0 1px 0 rgba(255, 255, 255, .38); } .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(.97); } .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: 13.5px; 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); } /* Squared small button, the "interface" variant. */ .btn--sq { width: auto; flex: none; border-radius: 10px; padding: 9px 13px; font-size: 12.5px; gap: 6px; } /* ── splash ──────────────────────────────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity 220ms cubic-bezier(.22, .9, .28, 1); } #splash.out { opacity: 0; } /* The one looping element in the whole app, and it lives for half a second: a cold bloom breathing behind the mark. */ .sp-mark { position: relative; width: 78px; height: 78px; display: grid; place-items: center; background: var(--tint); border-radius: 20px; box-shadow: var(--ring), var(--sh); color: var(--accent-d); margin-bottom: 18px; } .sp-mark::after { content: ""; position: absolute; inset: -26px; border-radius: 999px; background: radial-gradient(circle, rgba(232, 121, 249, .34), rgba(232, 121, 249, 0) 68%); animation: breathe 2.6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } } .sp-mark .ic { width: 38px; height: 38px; position: relative; } .sp-name { font-family: var(--f-display); font-size: 42px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; } .sp-sub { font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.22em; text-transform: uppercase; } /* ── frame ───────────────────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); isolation: isolate; } /* The light in the cavern comes from below. One large soft pool at the bottom of the app, behind everything, so the chrome sits in the same lit room as the canvas. Not a gradient on a surface: a light source in the space. */ #app::before { content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; bottom: -22%; height: 62%; background: radial-gradient(60% 100% at 50% 100%, rgba(232, 121, 249, .20), rgba(232, 121, 249, .06) 46%, rgba(232, 121, 249, 0) 74%); pointer-events: none; } /* The top element carries the fullscreen top inset, 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)); } [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: 10px; padding: 11px 16px 9px; } .mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--tint); border-radius: 9px; box-shadow: var(--ring); color: var(--accent-d); } .mark .ic { width: 18px; height: 18px; } .wordmark { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .brand-rank { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-d); font-size: 11.5px; font-weight: 700; } /* ── bottom nav: the four tabs, standard mobile position ─────────────────── */ .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.08em; text-transform: uppercase; transition: color var(--t), background var(--t); } .navtab .ic { width: 22px; height: 22px; } .navtab.is-on { color: var(--accent-d); background: var(--tint); } /* Play is the game and nothing else, so both bars step aside. */ [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 10px 8px; } /* ── home ────────────────────────────────────────────────────────────────── */ .rule { height: 1px; background: var(--line); margin: 16px 2px; } .hero { margin: 6px 2px 0; display: flex; align-items: flex-end; gap: 14px; } .hero-num { font-family: var(--f-display); font-size: 92px; font-weight: 600; letter-spacing: 0; line-height: 0.84; font-variant-numeric: tabular-nums; color: var(--accent-d); /* the ice reading of a number: a cold bloom sitting behind the glyph */ text-shadow: 0 0 30px rgba(232, 121, 249, .30); } .hero-meta { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; } .rankline { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-d); font-size: 12px; font-weight: 700; } .figrow { display: flex; margin: 0 2px; } .fig { flex: 1; position: relative; display: flex; flex-direction: column; gap: 2px; 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: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .fig span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; } .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.12em; 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-2); border-radius: 999px; overflow: hidden; } .daily-bar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 12px rgba(232, 121, 249, .8); transition: width var(--t); } .daily-v { flex: none; font-family: var(--f-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .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: 13.5px; 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; } /* Primary action: an in-content button, never a fixed bar that could collide with the nav. Magenta fill, ice-edge highlight, its own coloured lift. */ .playcta { display: flex; align-items: center; gap: 12px; width: 100%; margin: 18px 2px 0; background: var(--accent); color: var(--bg); padding: 14px 18px; border-radius: var(--r); box-shadow: var(--sh), inset 0 1px 0 rgba(255, 255, 255, .38); } .playcta-tx { display: flex; flex-direction: column; margin-right: auto; text-align: left; } .playcta-tx b { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; } .playcta-tx i { font-style: normal; font-size: 11px; font-weight: 700; opacity: .78; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } .playcta-ar { width: 24px; height: 24px; opacity: .75; } /* ── play ────────────────────────────────────────────────────────────────── */ .hud { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 4px 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: 46px; font-weight: 600; line-height: .9; font-variant-numeric: tabular-nums; color: var(--ink); } .hud-score .lbl { margin-top: 4px; } /* Three shards of ice. One goes dark for every icicle that reaches the floor, so the cost of a miss is legible without a word of text. */ .strikes { display: flex; gap: 6px; margin-right: 2px; } .strikes i { width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(232, 121, 249, .75); transition: background var(--t), box-shadow var(--t), opacity var(--t); } .strikes i.is-out { background: none; box-shadow: inset 0 0 0 1px var(--line); opacity: .8; } .hud .iconbtn { background: var(--tint-2); box-shadow: var(--ring); border-color: transparent; color: var(--accent-d); } .pill--combo { opacity: 0; transition: opacity var(--t), transform var(--t); transform: scale(.9); background: var(--accent); color: var(--bg); font-family: var(--f-display); font-size: 19px; font-weight: 600; padding: 2px 12px 1px; box-shadow: 0 0 20px -4px rgba(232, 121, 249, .9); } .pill--combo.is-on { opacity: 1; transform: scale(1); } .pill--shield { background: var(--tint); border: var(--edge); } .stagewrap { flex: 1; min-height: 0; position: relative; border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--sh); background: var(--bg); overflow: hidden; margin: 10px 0 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: 32px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 18px; } .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: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--bg); font-family: var(--f-display); font-size: 15px; font-weight: 600; } .step-tx { display: flex; flex-direction: column; min-width: 0; } .step-tx b { font-size: 13.5px; font-weight: 700; } .step-tx i { font-style: normal; font-size: 12px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; } /* ── 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: 12.5px; font-weight: 700; color: var(--ink-2); transition: background var(--t), color var(--t); } .seg-btn.is-on { background: var(--surface); color: var(--accent-d); box-shadow: var(--sh); } .board { display: flex; flex-direction: column; margin-top: 2px; } .rw { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-radius: var(--r); } /* A pseudo-element divider, 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-family: var(--f-display); font-size: 16px; font-weight: 600; 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: 10px; /* shell.js hands each name a hue; keep it cold and quiet so the magenta stays the one loud colour on the screen. */ background: hsl(var(--h) 24% 20%); color: hsl(var(--h) 42% 76%); font-size: 13px; font-weight: 700; } .rw-nm { flex: 1; font-size: 14px; font-weight: 600; } .rw-sc { font-family: var(--f-display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } .rw--top .rw-pos { color: var(--accent-d); } .rw--me { background: var(--tint); padding-left: 8px; padding-right: 8px; margin: 4px 0; } .rw--me .rw-nm { font-weight: 700; } .rw--me .rw-sc { color: var(--accent-d); } /* ── more ────────────────────────────────────────────────────────────────── */ .rows { margin-top: 6px; } .row { position: relative; display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px 2px; font-size: 14px; 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); } .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); } .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(7, 2, 9, .5); transition: transform var(--t); } .sw:checked { background: var(--accent); } .sw:checked::after { transform: translateX(19px); } .sect-h { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 4px 2px 8px; } .screen[data-screen="more"] .sect-h:not(:first-child) { margin-top: 4px; } /* ── overlays ────────────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(10, 3, 12, .72); } .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. */ } .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: 24px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 4px; font-size: 13.5px; line-height: 1.6; 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: 7px; width: 7px; height: 7px; background: var(--accent); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 8px rgba(232, 121, 249, .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(12px) 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: 30px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; 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: 13px; 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-radius: 999px; box-shadow: var(--ring), var(--sh); font-family: var(--f-display); font-size: 86px; font-weight: 600; color: var(--accent-d); 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; } } /* Short phones: the display type gives first, the stage keeps its height. */ @media (max-height: 690px) { .hero-num { font-size: 86px; } .bignum--mid { font-size: 60px; } .playcta-tx b { font-size: 26px; } .hud-score b { font-size: 38px; } .lede { margin-bottom: 10px; } .step { padding: 8px 10px; } .start-t { font-size: 26px; margin-bottom: 12px; } }