/* ═══════════════════════════════════════════════════════════════════════════ GLACIERUN, ARCADE CABINET A machine that measures one thing: where a sled stops. The whole app is built from marquee badges, hard silkscreen shadows and one descent tape, and the rules below are kept without exception. · GEOMETRY. Every panel, key and plate is a marquee badge: 4px top corners, a deeply rounded bottom. Chips are 999px. There is no plain rectangle in this app. Small keys use a shallower bottom, never a square one. · KEYLINE. 2px. A cabinet is silkscreened, not hairlined. · ELEVATION. One shadow: 3px 3px 0 var(--sh), hard, no blur. Anything pressable collapses it and moves 3px down and right, so the object physically depresses under the thumb. · TYPE. Archivo at width 125 / weight 800 is the display face and is only ever used LARGE, for figures and marquee text. Manrope carries every small thing: 10.5px, uppercase, 0.16em tracked. · COLOUR. Ice cyan is the machine. Orange is the brake, and it is only ever printed on things that stop something. Text on a fill is --bg. · RHYTHM. 16px and multiples of it. Loose, big targets, few objects. · MOTION. 180ms with an overshoot. Figures roll up when their panel comes into view, which is exactly when they have changed. ═══════════════════════════════════════════════════════════════════════════ */ :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; --top-in: max(var(--tg-safe-top), env(safe-area-inset-top, 0px)); --bot-in: max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)); /* Duplicated from brand.js so the splash paints correctly on frame one, before shell.js has stamped the palette onto . */ --bg: #06121C; --surface: #0E2233; --tint: #16334A; --tint-2: #1E4463; --line: #2C5E85; --ink: #F0FAFF; --ink-2: #A6C6DC; --ink-3: #7194AE; --accent: #2FD4F2; --accent-d: #86E9FF; --good: #3BE39A; --warn: #FF5347; /* Chrome only. game.js never reads these, so they are free to exist. */ --brake: #FF8A2B; /* the second silkscreen pass: braking, and nothing else */ --sh: #01070C; /* the ink every hard shadow is printed in */ --sky: #CBE0F6; /* the daylight the canvas paints in, so the glass never flashes dark before the first frame */ --f-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif; --f-text: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --u: 16px; /* the whole spacing scale */ --badge: 4px 4px 30px 30px; /* the marquee shape, on everything */ --badge-s: 4px 4px 16px 16px; /* the same shape at key size */ --key: 2px solid var(--line); --hard: 3px 3px 0 var(--sh); --e: cubic-bezier(.2, 1.5, .35, 1); /* the overshoot */ --t: 180ms var(--e); } *, *::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: 600; 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 symbol library itself never renders. */ .defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── type roles ────────────────────────────────────────────────────────────── Two jobs, two faces, no overlap. Archivo only ever sets figures and marquee text; Manrope only ever sets small text. */ .dnum { display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 0.88; animation: roll 180ms var(--e) both; } .marq { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; } .tag { display: block; font-family: var(--f-text); font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-style: normal; } .fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); } /* With no ad surfaces in this build every screen ends early, so the closing line drops to the foot of the column instead of floating in a void. */ .bay > .fine:last-child { margin-top: auto; padding-top: var(--u); } /* ── icons: solid shapes, no strokes, deliberately a size up ─────────────── */ .gly { display: block; flex: none; width: 26px; height: 26px; fill: currentColor; } .gly--s { width: 19px; height: 19px; } /* The only 999px objects in the app. */ .tok { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--tint-2); color: var(--accent-d); padding: 6px 13px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .tok--brake { background: var(--brake); color: var(--bg); } .tok.is-done { background: var(--good); color: var(--bg); } .tok--ic { padding: 0; width: 46px; height: 46px; justify-content: center; } .tok--ic .gly { width: 24px; height: 24px; } /* ── the press: every interactive object is a key on a machine ───────────── */ .hit { box-shadow: var(--hard); transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); } .hit:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--sh); } /* ── keys ────────────────────────────────────────────────────────────────── */ .key { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: var(--key); border-radius: var(--badge-s); padding: 14px var(--u); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--tint); color: var(--ink); } .key--go { background: var(--accent); border-color: var(--accent); color: var(--bg); } .key--sub { background: var(--tint); border-color: var(--line); color: var(--accent-d); } .key--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); } .key:disabled { opacity: .5; } /* A square-ish key: back, pause, close. Big target, same physics, and still a badge, because nothing in this app is a plain rectangle. */ .key--sq { width: 44px; height: 44px; flex: none; padding: 0; gap: 0; border-radius: 3px 3px 14px 14px; } /* The ad key, which only ever appears when a block id exists. */ .key--ad { flex-direction: row; align-items: flex-start; text-align: left; margin-top: 12px; } .ad-tx { display: flex; flex-direction: column; gap: 4px; margin-right: auto; } .ad-tx b { font-size: 13px; letter-spacing: 0.06em; } .ad-tx i { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .ad-tx i:empty { display: none; } /* ── splash: the marquee lighting up ─────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity 220ms var(--e); } #splash.out { opacity: 0; } .sp-plate { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 30px 26px; background: var(--surface); border: var(--key); border-radius: var(--badge); box-shadow: var(--hard); color: var(--accent); } .sp-plate .gly { width: 44px; height: 44px; } .sp-name { font-size: 30px; color: var(--ink); } .sp-sub { color: var(--ink-3); } /* ── frame ───────────────────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); } main { flex: 1; min-height: 0; position: relative; } /* No persistent top bar. A cabinet prints its name on the marquee, not on a strip of chrome above every screen, so each screen carries the top inset itself and Home spends the room on the machine head. */ .bay { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: calc(var(--top-in) + 14px) var(--u) 22px; } .bay.is-active { display: flex; } [data-fullscreen="1"] .bay { padding-top: calc(var(--top-in) + 6px); } .bay--play { overflow: hidden; padding: calc(var(--top-in) + 10px) 12px 10px; gap: 12px; } /* ── the control panel: four keys along the bottom ───────────────────────── */ .ctrl { flex: none; display: flex; gap: 8px; padding: 10px 12px; padding-bottom: calc(10px + var(--bot-in)); background: var(--surface); border-top: var(--key); } .ctrl-k { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px 8px; border: 2px solid transparent; border-radius: 3px 3px 14px 14px; background: var(--tint); color: var(--ink-3); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t); } .ctrl-k .gly { width: 22px; height: 22px; } .ctrl-k:active { transform: translate(2px, 2px); } .ctrl-k.is-on { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: var(--hard); } /* Play is the machine and nothing else. */ [data-screen="play"] .ctrl { display: none; } /* ═══════════════════════ HOME ══════════════════════════════════════════════ The screen is one descent. A ticked tape runs down the left gutter from the drop-in block to the flag at the foot, and every panel is hung off it at a depth. Nothing is centred; the run is what orders the page. ═══════════════════════════════════════════════════════════════════════════ */ .desc { position: relative; display: grid; grid-template-columns: 18px 1fr; column-gap: 14px; row-gap: var(--u); align-content: start; } .desc > *:not(.tape) { grid-column: 2; } /* The tape: a spine with a hard tick every 22px, a block where the sled is let go and a solid flag where it has to stop. Taken out of flow on purpose: `grid-row: 1 / -1` resolves against the EXPLICIT grid, and this grid has no explicit rows, so it would collapse to a single row and the run would stop under the first panel. */ .tape { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: repeating-linear-gradient(to bottom, var(--line) 0 2px, transparent 2px 22px) center / 14px 100% no-repeat, linear-gradient(var(--tint-2), var(--tint-2)) center / 4px 100% no-repeat; } .tape::before, .tape::after { content: ""; position: absolute; left: 0; width: 18px; } .tape::before { top: 0; height: 14px; background: var(--brake); border-radius: 2px 2px 8px 8px; } .tape::after { bottom: 0; height: 20px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); } /* ── the machine head: marquee and record in one object ──────────────────── */ .head { background: var(--surface); border: var(--key); border-radius: var(--badge); box-shadow: var(--hard); overflow: hidden; } .head-rail { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--accent); color: var(--bg); } .head-rail .gly { width: 26px; height: 26px; } .head-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .head-name { font-size: 20px; } .head-strap { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: .74; } .head-body { padding: 18px 16px var(--u); } .head-num { font-size: clamp(46px, 17.5vw, 74px); color: var(--ink); } .head-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .head-foot .tag { margin-right: auto; } /* ── the one very large key ──────────────────────────────────────────────── */ .drop { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 18px 20px; background: var(--brake); border: 2px solid var(--brake); border-radius: var(--badge); color: var(--bg); text-align: left; } .drop .gly { width: 34px; height: 34px; margin-left: auto; } .drop-tx { display: flex; flex-direction: column; gap: 4px; } .drop-t { font-size: 27px; } .drop-s { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: .78; } /* ── THE STOPPING CHART ────────────────────────────────────────────────────── The module this game earns and no other one in the set does. Braking here is not an event, it is a distance: the ice takes about a third of a second to bite and over half a second to let go, so most of a stop happens after the thumb is already up. The chart prints that as one lane, in proportion, with the gate at the end of it, and the three figures under it are the real constants from game.js. A stacking game has nothing to put here. ─────────────────────────────────────────────────────────────────────────── */ .chart { padding: 14px 16px 16px; background: var(--surface); border: var(--key); border-radius: var(--badge); box-shadow: var(--hard); } .chart > .tag { margin-bottom: 12px; } .lane { display: flex; align-items: stretch; height: 22px; border: 2px solid var(--line); border-radius: 3px 3px 10px 10px; overflow: hidden; } .lane i { display: block; } .lane-hold { flex: 1.1; background: var(--tint-2); } .lane-bite { flex: 1.4; background: var(--brake); } /* The drift is the part nobody expects: it is drawn hatched because it is distance the player has already stopped steering. */ .lane-drift { flex: 2.6; background: repeating-linear-gradient(112deg, var(--brake) 0 3px, var(--tint) 3px 9px); } .lane-gate { flex: 1; background: var(--accent); } .lane-key { display: flex; margin-top: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .lane-key span { flex: 1.1; } .lane-key span + span { flex: 1.4; } .lane-key span + span + span { flex: 2.6; } .lane-key span + span + span + span { flex: 1; text-align: right; color: var(--accent); } .stops { display: flex; gap: 10px; margin-top: 16px; } .stop { flex: 1; padding: 10px 10px 11px; background: var(--tint); border-radius: 3px 3px 12px 12px; } .stop b { display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: -0.02em; color: var(--brake); } .stop:last-child b { color: var(--accent); } .stop span { display: block; margin-top: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .chart-note { margin: 14px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink-2); } /* ── counters ────────────────────────────────────────────────────────────── */ /* Two by two, not four across: at 375 a four-up row breaks every label onto a second line, and this language does not do small crowded things. */ .counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cnt { display: flex; align-items: baseline; gap: 9px; padding: 12px 14px 13px; background: var(--surface); border: var(--key); border-radius: 3px 3px 16px 16px; } .cnt b { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .cnt span { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } /* ── the daily target: a gate the fill has to reach ──────────────────────── */ .goal { padding: 14px 16px 16px; background: var(--surface); border: var(--key); border-radius: var(--badge); box-shadow: var(--hard); } .goal-top { display: flex; align-items: center; gap: 10px; } .goal-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .goal-lane { position: relative; height: 16px; margin-top: 12px; background: var(--tint); border: 2px solid var(--line); border-radius: 3px 3px 8px 8px; overflow: hidden; } .goal-lane i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t); } .goal-v { display: block; margin-top: 10px; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink-2); } /* ── the optional offer, one element so it vanishes whole ────────────────── */ .slot { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--surface); border: var(--key); border-radius: var(--badge-s); } .slot-tx { display: flex; flex-direction: column; gap: 3px; margin-right: auto; min-width: 0; } .slot-tx b { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .slot-tx i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .slot-tx i span:empty { display: none; } .slot .key { width: auto; flex: none; padding: 10px 12px; font-size: 10px; gap: 6px; } /* ═══════════════════════ PLAY ══════════════════════════════════════════════ The score is the hero here too, so it is set at display size in the top deck. The approach rail is welded to the top of the bezel with no label of its own: the canvas already prints METRES TO THE FLAGS at display size, and a second labelled module saying the same thing is chrome. ═══════════════════════════════════════════════════════════════════════════ */ .deck { flex: none; display: flex; align-items: center; gap: 8px; } .deck-sc { margin-right: auto; } .deck-sc .dnum { font-size: 40px; } .deck-sc .tag { margin-top: 6px; } .tok--combo { background: var(--brake); color: var(--bg); font-family: var(--f-display); font-stretch: 125%; font-size: 15px; letter-spacing: 0; opacity: 0; transition: opacity var(--t); } .tok--combo.is-on { opacity: 1; } .tok--shield { width: 40px; height: 40px; background: var(--tint); color: var(--accent-d); } .deck .key--sq { background: var(--tint); border-color: var(--line); color: var(--accent); } /* The cabinet: a bezel with the approach rail across its head and the glass below it. */ .cab { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: var(--key); border-radius: var(--badge); box-shadow: var(--hard); } .rail { flex: none; height: 8px; margin-bottom: 6px; background: var(--tint); border-radius: 2px; overflow: hidden; } .rail i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width 140ms linear, background var(--t); } /* The run counts DOWN to the flags. The last quarter is the moment the brake has to already be on, so the rail turns brake orange there. */ .rail i.is-low { background: var(--brake); } .glass { flex: 1; min-height: 0; position: relative; background: var(--sky); border-radius: 2px 2px 24px 24px; overflow: hidden; } #stage { display: block; width: 100%; height: 100%; touch-action: none; } /* Attract mode: the whole panel is the start target. */ .attract { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px 16px; background: var(--bg); border-radius: 2px 2px 24px 24px; overflow-y: auto; } .att { width: 100%; max-width: 320px; } .att-t { display: block; font-size: 30px; color: var(--accent); } .att-s { margin: 8px 0 18px; } .att-list { list-style: none; margin: 0 0 20px; padding: 0; } .att-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--tint); } .att-list li:first-child { border-top: 2px solid var(--tint); } .att-list .tok--ic { width: 38px; height: 38px; flex: none; background: var(--tint); } .att-list .tok--ic .gly { width: 20px; height: 20px; } .att-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .att-tx b { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .att-tx i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.4; } /* ═══════════════════════ RANK ══════════════════════════════════════════════ */ .tabs2 { display: flex; gap: 10px; margin-bottom: var(--u); } .seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; background: var(--tint); border: var(--key); border-radius: 3px 3px 14px 14px; color: var(--ink-3); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t); } .seg-btn:active { transform: translate(2px, 2px); } .seg-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: var(--hard); } .plate-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; } .plate-h .tag { color: var(--ink-2); } .plate-h em { font-style: normal; margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .hiscore { display: flex; flex-direction: column; gap: 8px; } /* Rows are built by shell.js, so these class names are fixed by contract. */ .rw { display: flex; align-items: center; gap: 12px; padding: 9px 12px 10px; background: var(--surface); border: 2px solid var(--tint); border-radius: 3px 3px 16px 16px; } .rw-pos { min-width: 26px; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 20px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink-3); } .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 cyan stays the one loud colour on the screen. */ background: hsl(var(--h) 42% 24%); color: hsl(var(--h) 62% 78%); font-size: 13px; font-weight: 800; } .rw-nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; } .rw-sc { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 20px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .rw--top { border-color: var(--line); } .rw--top .rw-pos { color: var(--accent); } .rw--me { background: var(--accent); border-color: var(--accent); box-shadow: var(--hard); } .rw--me .rw-pos, .rw--me .rw-nm, .rw--me .rw-sc { color: var(--bg); } .rw--me .rw-av { background: rgba(6, 18, 28, .22); color: var(--bg); } /* ═══════════════════════ MORE ══════════════════════════════════════════════ */ .opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--u); } .opt { display: flex; width: 100%; align-items: center; gap: 13px; padding: 13px 14px; background: var(--surface); border: 2px solid var(--tint); border-radius: 3px 3px 16px 16px; font-size: 14px; font-weight: 700; text-align: left; color: var(--ink); } .opt > span { flex: 1; min-width: 0; } .opt > .gly { color: var(--accent); } .opt .chev { width: 18px; height: 18px; color: var(--ink-3); } .optbtn { transition: transform var(--t), border-color var(--t); } .optbtn:active { transform: translate(2px, 2px); border-color: var(--line); } /* Badge switch: this machine has no round parts except chips. */ .sw { appearance: none; -webkit-appearance: none; width: 52px; height: 28px; flex: none; margin: 0; position: relative; background: var(--tint-2); border: 2px solid var(--line); border-radius: 3px 3px 11px 11px; transition: background var(--t), border-color var(--t); } .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--ink-3); border-radius: 2px 2px 8px 8px; transition: transform var(--t), background var(--t); } .sw:checked { background: var(--accent); border-color: var(--accent); } .sw:checked::after { background: var(--bg); transform: translateX(24px); } /* ═══════════════════════ OVERLAYS ══════════════════════════════════════════ */ .veil { position: fixed; inset: 0; z-index: 40; background: rgba(1, 7, 12, .8); } .card { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + var(--bot-in)); display: flex; flex-direction: column; background: var(--surface); border: var(--key); border-radius: var(--badge); box-shadow: var(--hard); max-height: calc(100dvh - var(--top-in) - 28px); /* Deliberately NOT animated. A sheet that slides in from below sits, for the length of the animation, with its own Close key under the fold. */ } .card-h { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--accent); color: var(--bg); border-radius: 2px 2px 0 0; } .card-h b { flex: 1; min-width: 0; font-size: 17px; } .card-h .key--sq { width: 38px; height: 38px; background: rgba(1, 7, 12, .18); border-color: transparent; color: var(--bg); box-shadow: none; } .card-h .key--sq:active { transform: translate(2px, 2px); } .card-b { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 6px; font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--ink-2); } .card-b p { margin: 0 0 12px; } .card-b ul { margin: 0 0 12px; padding-left: 0; list-style: none; } .card-b li { position: relative; padding-left: 22px; margin-bottom: 11px; } .card-b li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; background: var(--accent); border-radius: 2px 2px 5px 5px; } .card-b b { font-weight: 800; color: var(--ink); } .card-f { flex: none; padding: 12px 16px 16px; } .pop { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; } .pop-c { pointer-events: auto; width: 100%; max-width: 330px; padding: 22px 18px 18px; background: var(--surface); border: var(--key); border-radius: var(--badge); box-shadow: var(--hard); text-align: center; animation: slam 180ms var(--e); } @keyframes slam { from { transform: scale(.9) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } .pop-c .tok--ic { margin: 0 auto 14px; background: var(--tint); color: var(--accent); } .pop-t { display: block; font-size: 24px; margin-bottom: 8px; } .pop-num { font-size: 62px; margin: 14px 0 10px; } .pop-sub { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-2); } .pop-c .tag + .pop-sub { margin-top: 6px; } .pop-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .pop-btns .key { padding: 13px 8px; font-size: 11px; gap: 7px; } .pop-btns .gly { width: 20px; height: 20px; } /* Direct children only: inside .pop-btns the keys are grid tracks and must stay the same height as each other. */ .pop-c > .key + .key { margin-top: 10px; } .count3 { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; } .count3 span { display: grid; place-items: center; width: 132px; height: 132px; background: var(--surface); border: var(--key); border-radius: 6px 6px 44px 44px; box-shadow: var(--hard); font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 70px; color: var(--accent); animation: slam 180ms var(--e); } .snack { position: fixed; z-index: 70; left: var(--u); right: var(--u); bottom: calc(104px + var(--bot-in)); padding: 13px 16px; background: var(--accent); color: var(--bg); border-radius: var(--badge-s); box-shadow: var(--hard); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; } /* ── figures roll up when their panel comes into view ────────────────────── */ @keyframes roll { from { transform: translateY(0.3em); opacity: 0; } 70% { transform: translateY(-0.05em); opacity: 1; } to { transform: none; opacity: 1; } } /* ── 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; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Short phones: the display figures give first, nothing else moves. */ @media (max-height: 700px) { .head-num { font-size: clamp(42px, 15vw, 60px); } .head-body { padding: 14px 16px 14px; } .drop { padding: 15px 18px 17px; } .drop-t { font-size: 24px; } .att-t { font-size: 25px; } .att-list li { padding: 9px 0; } .pop-num { font-size: 52px; } }