/* ═══════════════════════════════════════════════════════════════════════════ LUMENARC · THE LIGHT GALLERY A midway prize gallery: a painted plywood backboard with a dark alcove cut into it, and the beam you fire lives inside the alcove. So the app is BONE, printed and die-cut, and the game is the one black hole in it. That is the whole idea, and every rule below serves it. · SURFACE. The board is painted bone. Everything on it is silkscreened in one black ink. The only dark rectangles in the app are the two places light actually happens: the score reels and the alcove. · GEOMETRY. Badge shaped, always: 4px across the top where a panel bolts on, deeply rounded at the bottom. Chips and tracks are 999px. There is no plain rectangle anywhere. · KEYLINE. 3px of black ink, never a hairline. A gallery board is cut and printed, not drawn. · ELEVATION. One shadow: 3px 3px 0 var(--print). Hard, no blur. On bone it reads as die-cut board standing off the wall. Anything pressable collapses it to nothing and travels 3px down and right, so the object physically depresses under the thumb. · TYPE. Alfa Slab One is the display face, fairground wood type, used LARGE and only for figures and printed words. Hanken Grotesk carries every small thing. Captions are 11px caps at 0.18em. · COLOUR. Three printed inks on bone: black for structure, VERMILLION for everything you push, GOLD for anything lit. Moss green appears once, on a target that has been claimed. · RHYTHM. 16px and multiples of it. Loose, big targets, few objects. · MOTION. 180ms with an overshoot. Figures roll up out of the reel window when they change. The ten tokens under brand.js are NOT the board: they are the alcove, and game.js reads them off every resize. Keeping the two vocabularies apart is what lets the board be bone while the light stays in the dark. ═══════════════════════════════════════════════════════════════════════════ */ :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; /* The alcove, duplicated from brand.js so the splash and the canvas frame paint correctly on frame one, before shell.js stamps the palette. */ --bg: #140B04; --surface: #1F1108; --tint: #2C190B; --tint-2: #3E230F; --line: #64381A; --ink: #FFF4E4; --ink-2: #C5A583; --ink-3: #927A5D; --accent: #FF5A1F; --accent-d: #FF9256; --good: #6FBF4A; --warn: #6E9FC4; /* The board. Chrome only: game.js never reads these names. */ --board: #EFE2C6; /* painted bone plywood */ --board-2: #E0CFA9; /* the shaded panel, one coat deeper */ --board-3: #CFB88C; /* wells, tracks, anything recessed */ --print: #16100A; /* the one black ink: keylines, type, every shadow */ --print-2: #4A3A26; /* secondary printed text */ --print-3: #6B5A3E; /* captions and small print, 4.9:1 on bone */ --red: #BC2F16; /* vermillion: every control you push */ --red-d: #8E200C; /* its deep state */ --gold: #E8A317; /* the bulb ink: lit, held, in progress */ --moss: #1E6A47; /* claimed, and nothing else */ --f-display: "Alfa Slab One", Rockwell, "Courier Bold", Georgia, serif; --f-text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --u: 16px; /* the whole spacing scale */ /* Badge shapes: flat where the panel bolts on, deep at the bottom edge. */ --r-panel: 4px 4px 24px 24px; --r-key: 4px 4px 16px 16px; --r-sq: 4px 4px 12px 12px; --r-well: 4px 4px 12px 12px; --cut: 3px solid var(--print); /* the keyline */ --hard: 3px 3px 0 var(--print); /* the only shadow */ --e: cubic-bezier(.2, 1.5, .36, 1); --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(--board); overscroll-behavior: none; -webkit-overflow-scrolling: touch; } body { font-family: var(--f-text); font-weight: 500; color: var(--print); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } 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 they tick. */ .reel-n, .bez-n, .pane-n, .tally b, .mark-v, .pay-n, .rw-pos, .rw-sc, .tick span { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* The blockout sheet the marks are cut from never renders. */ .blockout { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── marks: solid cut shapes, no strokes, deliberately a size up ─────────── */ .ico { display: block; flex: none; width: 26px; height: 26px; fill: currentColor; stroke: none; } .ico-s { width: 19px; height: 19px; } /* ── printed small type ─────────────────────────────────────────────────── */ .stencil { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--print-3); } .legal { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.55; color: var(--print-3); } /* The only 999px objects on the board, alongside the wells. */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 2px solid var(--print); background: var(--board-3); color: var(--print); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .chip .ico { width: 14px; height: 14px; } .chip--red { background: var(--red); color: var(--board); border-color: var(--print); } .chip--gold { background: var(--gold); color: var(--print); } .chip--bone { background: var(--board); color: var(--print); } .chip--moss { background: var(--moss); color: var(--board); } /* ── the press: every control on this board is a physical key ────────────── */ .push { box-shadow: var(--hard); transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); } .push:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--print); } /* ── keys ────────────────────────────────────────────────────────────────── */ .key { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 16px; border: var(--cut); border-radius: var(--r-key); background: var(--board-2); color: var(--print); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .key--red { background: var(--red); color: var(--board); } .key--gold { background: var(--gold); color: var(--print); } .key--sm { width: auto; padding: 9px 13px; font-size: 10.5px; } .keysq { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: var(--cut); border-radius: var(--r-sq); background: var(--board-2); color: var(--print); } /* ── wells: every track, bar and gauge on the board ──────────────────────── */ .well { height: 18px; border: var(--cut); border-radius: 999px; background: var(--board-3); overflow: hidden; } .well i { display: block; height: 100%; border-radius: 999px; background: var(--gold); transition: width 200ms var(--e), background var(--t); } .well i.is-low { background: var(--red); } /* ═══════════════════════ splash: the board, lit ═════════════════════════ */ #splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--board); transition: opacity 300ms ease, transform 300ms ease; } #splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; } .boot-mark { display: grid; place-items: center; width: 84px; height: 84px; border: var(--cut); border-radius: var(--r-panel); background: var(--red); color: var(--board); box-shadow: var(--hard); animation: stamp 320ms var(--e) both; } .boot-mark .ico { width: 46px; height: 46px; } .boot-word { font-family: var(--f-display); font-weight: 400; font-size: 34px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--print); animation: stamp 320ms var(--e) 70ms both; } .boot-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); animation: stamp 320ms var(--e) 130ms both; } @keyframes stamp { from { transform: translateY(-12px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } /* ═══════════════════════ the frame ══════════════════════════════════════ */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--board); } main { flex: 1; min-height: 0; position: relative; } /* No standing brand bar. A gallery board carries its name once, painted on the sign, and each face carries the fullscreen top inset itself. */ .face { position: absolute; inset: 0; display: none; flex-direction: column; gap: var(--u); overflow-y: auto; scrollbar-width: none; padding: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 14px) 14px 22px; } .face::-webkit-scrollbar { display: none; } .face.is-active { display: flex; } .face--play { overflow: hidden; gap: 10px; padding: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 10px) 12px 10px; } /* The footnote sits on the bottom edge of the board, not under the last item. */ .face[data-screen="home"] .legal, .face[data-screen="rank"] .legal, .face[data-screen="more"] .legal { margin-top: auto; padding-top: 4px; } /* ── the counter: four keys along the bottom of the stall ────────────────── */ .counter { flex: none; display: flex; gap: 8px; padding: 9px 10px; padding-bottom: calc(9px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); background: var(--board-2); border-top: 4px solid var(--print); } .ckey { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border: 2px solid transparent; border-radius: var(--r-sq); color: var(--print-2); font-size: 9.5px; font-weight: 700; 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); } .ckey .ico { width: 23px; height: 23px; } .ckey.is-on { background: var(--red); border-color: var(--print); color: var(--board); box-shadow: var(--hard); } .ckey.is-on:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--print); } /* Play is the alcove and nothing else. */ html[data-screen="play"] .counter { display: none; } /* ═══════════════════════ HOME ═══════════════════════════════════════════ Read like a stall front: the painted sign, the reels behind their window, the card that tells you what a shot is worth, then one red key. */ /* ── the sign ────────────────────────────────────────────────────────────── */ .sign { flex: none; position: relative; overflow: hidden; padding: 13px 16px 12px; border: var(--cut); border-radius: var(--r-panel); background: var(--red); box-shadow: var(--hard); } /* Target rings printed into the paint, off to one side, half worn away. */ .sign::after { content: ""; position: absolute; top: 50%; right: -34px; width: 190px; height: 190px; transform: translateY(-50%); background: repeating-radial-gradient(circle, rgba(239, 226, 198, .17) 0 5px, rgba(0, 0, 0, 0) 5px 14px); pointer-events: none; } .sign-word { position: relative; display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(29px, 8.8vw, 38px); line-height: 1; letter-spacing: 0.015em; text-transform: uppercase; color: var(--board); } .sign-tag { position: relative; display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(239, 226, 198, .82); } /* ── the reels: the score, behind glass, and the biggest object here ─────── */ .reel { flex: none; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 15px 13px; border: var(--cut); border-radius: var(--r-panel); background: var(--bg); box-shadow: var(--hard); } /* the drum banding you see through the reel window */ .reel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 244, 228, .05) 0 1px, rgba(0, 0, 0, 0) 1px 7px); pointer-events: none; } .reel > * { position: relative; } .reel .stencil { color: var(--ink-2); } .reel-win { align-self: stretch; overflow: hidden; margin: 5px 0 1px; } .reel-n { display: block; font-family: var(--f-display); font-weight: 400; line-height: 0.92; letter-spacing: -0.02em; white-space: nowrap; color: var(--board); /* Alfa Slab sets a wide digit, so a five figure score would run off the window. The second declaration divides the track by the glyph count the inline script stamps on --len; a browser that rejects dividing by a var keeps the plain clamp above. */ font-size: clamp(44px, 15.5vw, 66px); font-size: min(clamp(44px, 15.5vw, 66px), calc((100vw - 90px) / var(--len, 3))); } .reel-u { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .reel-tag { margin-top: 10px; } /* ── THE AWARD CARD ─────────────────────────────────────────────────────── The module this game earns and no other game in the set could use. Every shot in Lumenarc is a trade: a bare tap fires a hairline beam worth five, and every extra moment of hold widens the cone, forgives a worse line and takes a lumen off the award. The card is that trade, printed the way a prize gallery prints its awards, with the beam drawn beside each row so the width and the price sit on the same line. Nothing to tap, nothing to animate: it is the whole strategy of the game, silkscreened. */ .award { flex: none; overflow: hidden; border: var(--cut); border-radius: var(--r-panel); background: var(--board-2); box-shadow: var(--hard); } .award-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: var(--print); color: var(--board); } .award-head b { font-family: var(--f-display); font-weight: 400; font-size: 15px; letter-spacing: 0.01em; text-transform: uppercase; } .pay { list-style: none; margin: 0; padding: 4px 14px 0; } .pay-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 2px dashed rgba(22, 16, 10, .28); } .pay-row:last-child { border-bottom: 0; } /* The beam itself, cut from a solid: apex at the lamp, opening upward. Five widths, five awards, in the order the hold actually opens them. */ .wedge { --hw: 8%; display: block; width: 32px; height: 26px; background: var(--red); clip-path: polygon(50% 100%, calc(50% - var(--hw)) 0, calc(50% + var(--hw)) 0); } .wedge--2 { --hw: 17%; } .wedge--3 { --hw: 27%; } .wedge--4 { --hw: 38%; } .wedge--5 { --hw: 50%; background: var(--red-d); } .pay-tx { min-width: 0; display: flex; flex-direction: column; } .pay-tx b { font-size: 13.5px; font-weight: 700; } .pay-tx i { font-style: normal; font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--print-3); } .pay-n { font-family: var(--f-display); font-weight: 400; font-size: 25px; line-height: 1; color: var(--print); } .pay-row:last-child .pay-n { color: var(--print-3); } .award-foot { margin: 0; padding: 9px 14px 11px; border-top: var(--cut); font-size: 11.5px; line-height: 1.5; font-weight: 500; color: var(--print-2); } .award-foot b { color: var(--red); font-weight: 700; } /* ── the key that starts a round ─────────────────────────────────────────── */ .fire { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 16px 18px; border: var(--cut); border-radius: var(--r-key); background: var(--red); color: var(--board); text-align: left; } .fire b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 27px; line-height: 1; letter-spacing: 0.02em; } .fire i { display: block; margin-top: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239, 226, 198, .84); } .fire .ico { width: 30px; height: 30px; } /* ── the daily mark ──────────────────────────────────────────────────────── */ .mark { flex: none; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 13px 14px; border: var(--cut); border-radius: var(--r-panel); background: var(--board-2); box-shadow: var(--hard); } .mark > .stencil { color: var(--print); } .mark-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mark-state.is-done { background: var(--moss); color: var(--board); } .mark-v { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--print-3); } /* ── the tally: bookkeeping, printed small along the bottom rail ─────────── */ .tally { flex: none; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); border: var(--cut); border-radius: var(--r-well); background: var(--board-2); } .tally span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 3px 8px; border-right: 3px solid var(--print); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--print-3); text-align: center; } .tally span:last-child { border-right: 0; } .tally b { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1; color: var(--print); } /* ── the one ad surface on this face, hidden with no block id ────────────── */ .offer { flex: none; display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: var(--cut); border-radius: var(--r-panel); background: var(--board-2); box-shadow: var(--hard); } .offer > .ico { width: 28px; height: 28px; color: var(--red); } .offer-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .offer-tx b { font-size: 13.5px; font-weight: 700; } .offer-tx i { font-style: normal; font-size: 11px; color: var(--print-3); } /* ═══════════════════════ PLAY ═══════════════════════════════════════════ Two keys where the thumb already is, the count printed large beside them, the collector gauge under it, and the alcove taking everything left. */ .bez { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: var(--cut); border-radius: var(--r-key); background: var(--board-2); box-shadow: var(--hard); } .bez-sc { margin-left: auto; display: flex; align-items: baseline; gap: 7px; } .bez-n { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: var(--print); } .bez-sc i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--print-3); } .combo { display: inline-flex; align-items: center; padding: 5px 11px; border: 2px solid var(--print); border-radius: 999px; background: var(--gold); color: var(--print); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; opacity: 0; transform: scale(.68); transition: opacity var(--t), transform var(--t); } .combo.is-on { opacity: 1; transform: none; } .spare { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 2px solid var(--print); border-radius: 999px; background: var(--moss); color: var(--board); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .gauge { flex: none; display: flex; flex-direction: column; gap: 6px; } .gauge .stencil { color: var(--print-2); font-size: 10px; } /* ── the alcove: the hole cut in the board, and the only dark on Play ────── */ .alcove { flex: 1; min-height: 0; position: relative; overflow: hidden; border: 4px solid var(--print); border-radius: var(--r-panel); background: var(--bg); } #stage { display: block; width: 100%; height: 100%; } /* ── the attract card, over the alcove until the first shot ──────────────── */ .attract { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(20, 11, 4, .84); } .attract-in { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 15px; border: var(--cut); border-radius: var(--r-panel); background: var(--board); box-shadow: 4px 4px 0 var(--print); animation: stamp 220ms var(--e) both; } .attract-t { font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--print); } .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .step { display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start; } /* The numeral hangs in the margin in wood type, the way a stall board counts its rules off. No disc, no badge: it is printed straight onto the bone. */ .step-n { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: .82; color: var(--red); } .step-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .step-tx b { font-size: 13.5px; font-weight: 700; } .step-tx i { font-style: normal; font-size: 12px; line-height: 1.45; color: var(--print-3); } /* ═══════════════════════ RANK ═══════════════════════════════════════════ */ .seg { flex: none; display: flex; gap: 10px; } .seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; border: var(--cut); border-radius: var(--r-key); background: var(--board-2); color: var(--print); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .seg-btn.is-on { background: var(--red); color: var(--board); } .plaque { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0 8px; border-bottom: 4px solid var(--print); } .plaque b { font-family: var(--f-display); font-weight: 400; font-size: 16px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--print); } .board { flex: none; display: flex; flex-direction: column; gap: 8px; } .rw { display: grid; grid-template-columns: 26px 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: var(--cut); border-radius: var(--r-well); background: var(--board-2); } .rw--top { background: var(--gold); } .rw--me { background: var(--red); color: var(--board); box-shadow: var(--hard); } .rw-pos { font-family: var(--f-display); font-weight: 400; font-size: 17px; line-height: 1; color: var(--print-3); } .rw--top .rw-pos { color: var(--print); } .rw--me .rw-pos, .rw--me .rw-sc { color: var(--board); } .rw-av { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--print); border-radius: 999px; /* The hue is shell-supplied, but the ink is not: held to one saturation and one value, the discs read as a printed set rather than a colour wheel. */ background: hsl(var(--h), 32%, 32%); color: var(--board); font-size: 13px; font-weight: 700; } .rw-nm { min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rw-sc { font-family: var(--f-display); font-weight: 400; font-size: 16px; line-height: 1; color: var(--print); } /* ═══════════════════════ MORE ═══════════════════════════════════════════ */ .rows { flex: none; display: flex; flex-direction: column; gap: 8px; } .row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: var(--cut); border-radius: var(--r-well); background: var(--board-2); color: var(--print); font-size: 14px; font-weight: 600; text-align: left; } .row > span { flex: 1; min-width: 0; } .row > .ico { color: var(--red); } .row .chev { width: 20px; height: 20px; color: var(--print-3); } .sw { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 30px; margin: 0; border: var(--cut); border-radius: 999px; background: var(--board-3); transition: background var(--t); } .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: var(--print); transition: transform var(--t); } .sw:checked { background: var(--gold); } .sw:checked::after { transform: translateX(22px); } /* ═══════════════════════ overlays ═══════════════════════════════════════ */ .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(20, 11, 4, .68); } .sheet { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); display: flex; flex-direction: column; max-height: calc(100dvh - max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 26px); overflow: hidden; border: var(--cut); border-radius: 4px 4px 26px 26px; background: var(--board); box-shadow: 4px 4px 0 var(--print); animation: slide-up 220ms var(--e) both; } .sheet-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--print); color: var(--board); } .sheet-head b { flex: 1; min-width: 0; font-family: var(--f-display); font-weight: 400; font-size: 16px; letter-spacing: 0.01em; text-transform: uppercase; } .sheet-head .keysq { background: var(--board); } .sheet-body { flex: 1; min-height: 0; padding: 14px; overflow-y: auto; font-size: 13.5px; line-height: 1.6; color: var(--print-2); } .sheet-body p { margin: 0 0 11px; } .sheet-body b { color: var(--print); } .sheet-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .sheet-body li { padding-left: 16px; position: relative; } .sheet-body li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--red); } .sheet-foot { flex: none; padding: 0 14px 14px; } @keyframes slide-up { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } } .modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 11, 4, .74); } .pane { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 20px 18px 18px; border: var(--cut); border-radius: 4px 4px 28px 28px; background: var(--board); box-shadow: 5px 5px 0 var(--print); text-align: center; animation: stamp 220ms var(--e) both; } .pane-t { font-family: var(--f-display); font-weight: 400; font-size: 21px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--print); } .pane-win { align-self: stretch; overflow: hidden; } .pane-n { display: block; font-family: var(--f-display); font-weight: 400; font-size: min(60px, calc((100vw - 130px) / var(--len, 3))); line-height: 1; color: var(--red); } .pane .stencil { color: var(--print-3); } .pane-keys { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pane .key { margin-top: 2px; } .adkey { text-align: left; justify-content: flex-start; } .adkey span { display: flex; flex-direction: column; gap: 2px; text-transform: none; letter-spacing: 0; } .adkey b { font-size: 12.5px; font-weight: 700; } .adkey i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--print-3); } .adkey i:empty { display: none; } /* the three count on a revive: one big printed numeral, stamped each second */ .tick { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(20, 11, 4, .8); pointer-events: none; } .tick span { display: grid; place-items: center; width: 132px; height: 132px; border: 4px solid var(--print); border-radius: var(--r-panel); background: var(--red); color: var(--board); box-shadow: 5px 5px 0 var(--print); font-family: var(--f-display); font-weight: 400; font-size: 72px; line-height: 1; animation: tick-in 700ms var(--e) both; } @keyframes tick-in { 0% { transform: scale(.6); opacity: 0; } 30% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .toast { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(96px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); max-width: calc(100vw - 40px); padding: 11px 16px; border: var(--cut); border-radius: 999px; background: var(--print); color: var(--board); box-shadow: var(--hard); font-size: 12.5px; font-weight: 600; text-align: center; animation: slide-up 200ms var(--e) both; } /* ═══════════════════════ motion ═════════════════════════════════════════ Figures do not fade. They come up out of the reel window the way a count wheel turns over, overshoot by a hair, and settle. */ @keyframes roll-up { 0% { transform: translateY(52%); opacity: 0; } 62% { transform: translateY(-7%); opacity: 1; } 100% { transform: none; opacity: 1; } } .roll.rolling { animation: roll-up 180ms var(--e) both; } /* Each face deals itself onto the board, top item first. */ .face.is-active:not(.face--play) > * { animation: deal 260ms var(--e) both; } .face.is-active:not(.face--play) > *:nth-child(2) { animation-delay: 40ms; } .face.is-active:not(.face--play) > *:nth-child(3) { animation-delay: 75ms; } .face.is-active:not(.face--play) > *:nth-child(4) { animation-delay: 105ms; } .face.is-active:not(.face--play) > *:nth-child(5) { animation-delay: 130ms; } .face.is-active:not(.face--play) > *:nth-child(n+6) { animation-delay: 150ms; } @keyframes deal { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* Reduced motion: nothing travels, nothing overshoots. The press still depresses, because that is feedback rather than decoration. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; } } html[data-reduce-motion="1"] *, html[data-reduce-motion="1"] *::before, html[data-reduce-motion="1"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }