/* NUNITO, self-hosted. The latin subset Google serves is a single VARIABLE woff2 covering the whole 200-1000 weight axis in 39 KB, so all three weights this design uses (700/800/900) come from one file — cheaper than three static cuts would have been. Self-hosted rather than CDN-linked because the ship artifact is one self-contained file; build.mjs turns this url() into a base64 data URI like any other asset. `font-display: block` on purpose, not `swap`: game.js MEASURES every tile word on a canvas to size it, so a flash of the fallback would be a flash of text sized for a different typeface. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: block; src: url('assets/fonts/nunito-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =========================================================================== DESIGN PASS 2026-08-02 — play screen. Tokens from design_handoff_level_screen. The map screen and the modals are deliberately NOT restyled yet (Matan: play screen first), so they still wear the old look and will clash until that pass happens. =========================================================================== */ /* REGISTERED SO JAVASCRIPT CAN READ IT AS A NUMBER. An ordinary custom property is substituted, not computed, so getPropertyValue() hands back the literal string "clamp(10px, 4dvh, 16px)" and fitPillFont() cannot cap itself to it. Registering gives it a type, so it resolves - and the initial value is portrait's own 16px, which is what PILL_FONT_MAX already was. Must be at top level: @property inside a media query is invalid. */ @property --lsc-pill-f { syntax: ""; inherits: true; initial-value: 16px; } :root { /* See the matching in index.html for the why. The game is dark-by-design, so this is simply the truth - and stating it is what stops Samsung Internet / Chrome Android force-dark inverting the white tile face and the near-black tile ink. Side effect, and a wanted one: UA widgets (the settings sheet's checkboxes, scrollbars) render dark too. */ color-scheme: dark; /* THE PLAY BOARD, 2026-08-17. One token, because three other things are derived from it: the tile frame, the tile wall, and the glass scrim. Change this and they follow. WHY IT WENT DARK. Measured off Tripledot: their tile FACE is 7.74:1 against their board and their outline is 1.07:1 — the face carries the signal and the outline is only a seam. On the old mint #a8e7c5 ours was inverted: face 1.41:1, frame 8.60:1, so the frame was doing the board's job and read as a hard cage. No frame colour can fix that, because cream on mint is 1.18:1 whatever the frame does. Pine puts the face at 7.86:1 — within a hair of theirs. */ /* 2026-08-21: #1a2c25 -> #27775a, THE LIGHTER PINE. Chosen by Matan off mockups/themes.html after the very dark board plus white tiles plus green rims was rejected as too close to the competitor. L* 44.7, white face at 5.42:1 — still comfortably the loudest thing on screen, which is the whole constraint. This is as far as the family goes: every step lighter spends some of the face's signal, and past about here the frame has to start doing the board's job again, which is precisely the inversion the dark pass fixed. ⚠️ THE MASK COUPLING NO LONGER APPLIES, AND KNOWING WHY MATTERS BEFORE ANYONE PUTS IT BACK. Between 2026-08-19 and 2026-08-21 the background photo was an ellipse-MASKED surround, and a masked photo pins --board to the image's own centre-band mean exactly: inside the hole you see --board, outside it you see op*image + (1-op)*board, and unless those are equal the mask draws a visible closed contour across the middle of the screen. The opacity does not enter into it, so a visible edge can never be fixed by moving the opacity. --bg-mask is now `none` and the photo is a flat wash, so the board colour is free — but restore the mask and the lock comes straight back, and --board must then be re-derived from whatever --bg-image points at: python -c "from PIL import Image,ImageStat; im=Image.open('assets/.jpg').convert('RGB'); w,h=im.size; print(ImageStat.Stat(im.crop((int(w*.25),int(h*.30),int(w*.75),int(h*.62)))).mean)" Everything downstream follows --board on purpose: the glass scrim, the tile frame, the tray. */ /* #165a43, Matan's call 2026-08-25, replacing pine lighter #27775a. Measured (python tools/theme-measure.py "new=#165a43"): L* 33.7 · white tile face 8.15:1 · 25.4 dE from the old board 18 of 18 pill-pool colours still clear the >=25 dE camouflage floor THE GENEROUS FACE RATIO IS NOW LOAD-BEARING, not spare. The porcelain tile that landed the same day has no frame and no coloured wall, so BRIGHTNESS is the only thing separating a tile from the board. 5.42:1 was sized for a tile that carried its own dark ring; without one, 8.15:1 is the cue. */ /* #3b3a8a, THE RIVERSIDE AT DUSK, Matan's decision 2026-09-23: the look he approved on his phone at ?theme=dusk is now the default for every ordinary level ("relaxing, yet more vibrant", the white tiles still the brightest thing, the picture clearly visible). Was #165a43 (the garden green, kept whole in themes/garden-default.css). Measured (python tools/theme-measure.py "dusk=#3b3a8a"): L* 28.9 · white tile face 9.73:1 · 59.4 dE from #165a43 18 of 18 pill-pool colours clear the >=25 dE camouflage floor The face ratio went UP, not down, so the porcelain tile's only cue (brightness) got stronger. --bg-mask is still `none`, so this is free. */ /* BACK TO THE GARDEN, Matan's decision 2026-09-27: "Poki was the only place the dusk look was meant for." :root is the green garden again, exactly as it was until 2026-09-23, and every value on this sheet that the dusk look moved is back at its garden value. The riverside at dusk lives on as a CLASS, html.look-dusk (search "THE RIVERSIDE AT DUSK, AS A LOOK"), which the Poki build carries and a `look` A/B test can hand any player. */ --board: #165a43; /* ⚠️ BOTH OF THESE ARE DEAD as of the porcelain tile (2026-08-25). Nothing reads them: --tile-edge* no longer draws a ring or a wall, and --back-edge was rebuilt to match. Kept only so a themes/ file that still sets them does not look like it is doing something. Do not re-point a rule at them expecting the slab back - that is a whole look, not a colour. */ --tile-frame: #1b4d3a; --tile-wall: #2d7f61; --green-deep: #0f5238; /* primary — tile text, tray track, pill default */ /* RE-TONED FOR THE DARK BOARD, 2026-08-18. These were authored against mint #a8e7c5 and measured against Pine they had all but vanished: the button fill sat at 1.23:1 against the board and its drop wall at 1.19:1, so a header button was a shape you could only find by knowing where it was. The new values put the fill at 2.45:1 and the rim at 4.37:1 — the same JOB the old ones did on mint, at the contrast the dark board needs. */ /* RE-TONED OFF THE GREEN, 2026-09-23 (Matan's dusk decision), with the values themes/dusk.css carried when he approved it. The names stay "green" because a dozen rules and every themes/ file read them. Were #47a075 / #72d4a6 / #123f2e. Back at #47a075 / #72d4a6 / #123f2e since 2026-09-27; the violets are in html.look-dusk. */ --green-mid: #47a075; /* round buttons. Was also the tray's top border, until that border was deleted on 2026-08-21. */ --green-edge: #72d4a6; --green-shade: #123f2e; /* THE LEVEL TITLE'S OUTLINE, 2026-09-23. It was --green-deep (#0f5238), which reads 1.06:1 against the dusk board, so "Level 1" wore a green rim with no job. Its own token now, so the title can follow the board without moving --green-deep, which also inks the popups. The same deep violet as --green-shade; white on it is 14.2:1. On the garden (the default again since 2026-09-27) it is --green-deep's own #0f5238, which is what the title wore before the token existed; the violet is in html.look-dusk. */ --title-stroke: #0f5238; --gold: #ffb702; --gold-rim: #ffdea9; --gold-shade: #7d5800; --gold-ink: #6b4b00; /* ========================================================================= THEME SURFACE TOKENS - added 2026-08-19. Every value below is the literal that used to sit inline in the rule it now feeds. Promoting them changed NOTHING on screen, and that was the acceptance test: computed styles were diffed on a live board before and after. WHY THEY EXIST. A file in themes/ overrides these and nothing else, so an alternative look is a short stylesheet rather than a copy of the game. Load one with ?theme=; no param is this default. See themes/README.md. THE COUPLING TO WATCH. While --bg-mask is a mask, --board must equal the mean of the centre band of whatever --bg-image points at, or the mask draws a visible closed contour across the middle of the screen - see the --board note above, which carries the derivation one-liner. The default is exempt TODAY only because --bg-mask is `none`; set a mask and the lock is live. ========================================================================= */ /* -- the board surface -------------------------------------------------- */ --board-hi-top: rgba(255,255,255,0.10); /* top-right radial highlight */ /* bottom-left shade re-toned with the dusk board, 2026-09-23 (Matan). Was rgba(8,40,28,0.14), a green shade. The top-right highlight did not move. Green again since 2026-09-27 (the garden is the default; dusk's shade is in html.look-dusk). */ --board-hi-bot: rgba(8,40,28,0.14); /* bottom-left radial shade */ /* 2026-08-21: back to the original garden photo, carried as a FLAT WASH at 0.22 with `overlay` blend rather than as a masked surround. The masked night-garden treatment was authored for the near-black board and pins the board colour to the photo (see --board); the lighter pine board is the decision, so the photo gives up the mask instead. */ /* 2026-08-25, Matan: the night-arch photograph, on the new #165a43 board. THREE THINGS MOVED TOGETHER AND ONLY ONE OF THEM IS THE FILENAME. - blend `overlay` is OUT. Overlay pushes light areas lighter and dark areas darker AGAINST THE BACKDROP, so a dark photograph over a dark board compounds into near-black and the picture disappears into the corners. The old garden photo was a bright mint scene, which is what made overlay read as a wash rather than as a crush. `normal` is what the masked treatment used with this same file on 2026-08-19, for this same reason. - 0.22 -> 0.34. At `normal` the opacity is doing all the work, where before the blend mode was doing half of it. - `--bg-mask` STAYS `none`, and that is what keeps `--board` free. A masked surround pins the board colour to the image's own centre-band mean exactly - here 26,44,37 - or the mask draws a visible closed contour across the middle of the screen. #165a43 is 22,90,67, so restoring the mask WOULD relight that trap. See the --board note above. */ /* 2026-09-23, Matan's decision: THE RIVERSIDE AT DUSK, drawn by Codex from icons-pipeline/PROMPT-dusk-background.md, approved on his phone at ?theme=dusk. Was the night-arch picture (assets/background-night-arch-light-portrait.jpg) at 0.34. 0.72 because he asked for the picture to be CLEARLY VISIBLE; at 0.34 the old one was the "no background image, i mean" of the open list. Blend stays normal and the mask stays `none`, so --board stays free. The sideways file is set in the landscape :root block further down (search "LANDSCAPE GETS ITS OWN"). 2026-09-27, Matan: the garden is the default again, so this is the night-arch picture at 0.34 once more; the dusk picture at 0.72 is in html.look-dusk. */ --bg-image: url('assets/background-night-arch-light-portrait.jpg'); --bg-opacity: 0.34; --bg-blend: normal; --bg-mask: none; /* 0.7 -> 0.40 (2026-08-21) -> 0.25 (2026-08-26, Matan: "more transparent to see more of the pic behind them"). THE NUMBER A PLAYER SEES IS NOT THIS ONE: game.js multiplies it by 0.55, the plateau the old keyframe used to carry, so the effective alpha is 0.138 - down from 0.24. RE-MEASURED AGAINST THE CURRENT BOARD, which is the half that had gone stale. The old note here said 1.45:1, measured against the retired #27775a. The board went #165a43 on 2026-08-25 and nobody re-measured the petals, so they had quietly become MORE prominent, not less: against the real composited backdrop (the photo at 0.34 over the board, mean 24/73/56) the shipped petal read 1.98:1. At 0.138 it reads 1.48:1, which sits under the background photo's own bright features at 2.42:1 - so the petals are no longer the brightest thing on screen, which is what was actually wrong. Petals are BEHIND the board (#petals is z-index 1, everything else in #game is 2), so they never veil a tile; what they paint over is the photograph. */ --petal: rgba(255, 218, 214, 0.25); --body-bg: #165a43; /* side rails above 720px + iOS overscroll. Followed the dusk board 2026-09-23 to 2026-09-27; the garden green again since. */ /* -- the tile: front face ----------------------------------------------- */ --tile-face: #ffffff; --tile-ink: #17211f; /* PORCELAIN, promoted from themes/tile-porcelain.css on 2026-08-25 (Matan: "it looks good, fits the tile-tap sound, and does not look like a copy of TripleDot's"). The slab is gone: no --tile-frame ring, no --tile-wall drop, no warm bottom bevel. The tile is a smooth glazed chit and gets its solidity from ROUNDNESS plus one soft ambient shadow. ⚠️ 14px IS NOT A FREE KNOB. It is a genuinely rounded corner on a 108x72 tile - which is the whole identity - but it eats into the corners of the centred word box. Nothing clips at the sizes this game draws; push past about 16 and that stops being true and the text gate has to be re-run. ⚠️ AND THE TRAY FOLLOWS IT. The seat, the socket and the stand all carry radii DERIVED from this one (x0.42, the seat/tile scale) - see the note on .seat. Move this and move all three, or a tapped tile changes shape as it lands. */ --tile-radius: 14px; --tile-border: transparent; /* THE GLAZE: one very soft highlight along the top, never a gradient sweep. A strong sweep is exactly what turns white into glossy plastic. */ --tile-bevel: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 34%, rgba(150,158,152,0) 74%, rgba(150,158,152,0.20) 100%); /* THE EDGE IS A WHOLE BOX-SHADOW LIST PER STATE, not a handful of colours. A theme wanting a different KIND of edge - a flat card, a ring, a die-cut keyline - redefines these four and does not touch a single rule. */ --tile-edge: inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -2px 3px rgba(120,132,126,0.30), 0 4px 9px rgba(4, 20, 14, 0.42); --tile-edge-open: inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -2px 3px rgba(120,132,126,0.24), 0 7px 14px rgba(4, 20, 14, 0.48); --tile-edge-press: inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -1px 2px rgba(120,132,126,0.30), 0 2px 4px rgba(4, 20, 14, 0.36); --tile-edge-glass: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -2px 3px rgba(120,132,126,0.34), 0 3px 6px rgba(4, 20, 14, 0.34); /* -- the tile: back face (FACEDOWN) -------------------------------------- */ --back-face: #2b6f6d; --back-image: url('assets/tile-back.jpg'); --back-wall: #1f5250; --back-border: transparent; --back-mark: rgba(0, 0, 0, 0.20); /* the two debossed bars */ --back-edge: inset 0 1px 2px rgba(230, 255, 246, 0.30), inset 0 -2px 3px rgba(16, 52, 48, 0.34), 0 4px 9px rgba(4, 20, 14, 0.44); /* Two full rgba values rather than one tint plus a per-class alpha: relative colour syntax - rgb(from ...) - is not safe on the older Android browsers this ships to, and a dropped declaration here would flatten the pile. */ /* The board colour at the same two alphas, re-toned with the dusk board 2026-09-23 (Matan). Were rgba(22, 90, 67, 0.15 / 0.22), and are again since 2026-09-27 (the garden is the default; dusk's are in html.look-dusk). */ --depth-near: rgba(22, 90, 67, 0.15); --depth-far: rgba(22, 90, 67, 0.22); /* -- the tray ------------------------------------------------------------ */ /* Lightened with the board (2026-08-21). This frost was authored against #1a2c25; over a board this light the old value read as a hole. */ /* Violet frost for the dusk board, 2026-09-23 (Matan). Was rgba(12, 52, 38, 0.24), the green frost, and is again since 2026-09-27. */ --tray-panel: rgba(12, 52, 38, 0.24); /* Unused by the default build since the tray frame went on 2026-08-25. Kept because themes/ files still set it and may want a rim back. */ --tray-panel-rim: rgba(255, 255, 255, 0.14); /* THE STANDS, THE PLINTH AND THE LIP, OFF THE MINT, 2026-09-23 (Matan's dusk decision: they were the last green on the dusk board). Colours only; every size and shape is the rules' own. Each tone keeps the contrast its mint original had against #165a43, measured against #3b3a8a instead, so the tray keeps the same weight on screen and only its hue moves: lilac for the stands and the lip, mauve for the plinth. stands #a9cbb6 #89ad98 #6b917d -> #b6aed2 #9b91b5 #82769a (4.62 3.30 2.32:1) plinth #6f947f #537a66 -> #91759a #795b80 (2.41 1.69:1) lip #b6d4c1 #8fb2a0 -> #bfb8d7 #a096b8 (5.11 3.51:1) The sockets (--slit-*) take themes/dusk.css's values; were #24513f #2f5c49 #457058. 2026-09-27: the mint originals are back here (the garden is the default); the lilac and mauve above moved, unchanged, into html.look-dusk. */ --deck-1: #a9cbb6; --deck-2: #89ad98; --deck-3: #6b917d; --deck-front-1: #6f947f; --deck-front-2: #537a66; --slit-1: #24513f; --slit-2: #2f5c49; --slit-3: #457058; --lip-1: #b6d4c1; --lip-2: #8fb2a0; /* The tray SEAT is the same object as a board tile and must carry the same material, so it gets its own tokens rather than inheriting - a theme can make a board tile and a tray tile diverge on purpose (they do not today). */ --seat-face: #ffffff; --seat-ink: #17211f; --seat-edge: inset 0 1px 1px rgba(255,255,255,0.95), 0 5px 9px rgba(4, 20, 14, 0.42); } /* ============================================================================= THE END CARDS' THEME: the tray-full card and the level win card (calm cards, version 10; Matan, 2026-10-08, off mockups/calm-cards-4.html: brightness A, tiles 2 and 4 rotating, title layout 1, the smaller gold button, confetti on the win card). Version 9 was the same card one step darker with the sighing tile beside the title. EVERY COLOUR, SHADOW, RIM AND PICTURE THE TWO CARDS WEAR IS HERE AND NOWHERE ELSE, named by the job it does and never by the colour it happens to be. The rules further down (search "THE CALM END CARDS") only say WHERE things go; a new look for these cards replaces this one block, or a file in themes/ overrides these names, and touches no rule. His words: "all the green here should be in separate design classes, or files... as part of a theme, so that we can later change that theme." See docs/look-and-motion.md. The pictures are files, so swapping one is one file or one value: --card-picture the painted pond behind both cards --card-lose-tile-1, -2 the sad tile standing on the tray-full card --card-win-tile-1, -2 the happy tile standing on the win card Each showing picks tile 1 or 2 at random (showEnd() in game.js). They are pairs 2 and 4 of mockups/calm-cards-4.html, drawn by tools/make-card-tiles.py. A look with no pond sets --card-picture: none and the card is --card-face under --card-shade. ========================================================================== */ :root { /* the dim over the play screen while a card is up: a plain dim, no blur. Brightness A: a little darker than version 9's 0.40, so the card comes forward without the card itself turning pale. */ --card-scrim: rgba(4, 20, 14, 0.50); --card-scrim-filter: none; /* the card itself, brightness A: one step lighter than version 9 */ --card-face: #1d4a3a; --card-picture: url('assets/card-calm-pond.jpg'); --card-picture-at: 70% 0; --card-shade: linear-gradient(180deg, rgba(46, 104, 82, 0.16) 0%, rgba(34, 84, 66, 0.42) 45%, rgba(30, 76, 60, 0.62) 100%); --card-rim: inset 0 0 0 1px rgba(226, 242, 232, 0.22); --card-top-light: inset 0 1px 0 rgba(255, 255, 255, 0.10); --card-shadow: 0 22px 44px -6px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.30); --card-radius: 26px; /* words */ --card-text: #eef5ef; --card-text-soft: #bfd4c8; --card-pay-text: #f3d98f; /* the title, warm, with a soft glow; and the glow behind the tile */ --card-title: #fff6e3; --card-title-glow: 0 2px 0 rgba(4, 20, 14, 0.35), 0 0 22px rgba(255, 214, 140, 0.22); --card-halo: radial-gradient(closest-side, rgba(255, 214, 140, 0.30), rgba(255, 214, 140, 0.10) 55%, rgba(255, 214, 140, 0) 100%); /* "17 tiles to go", a small chip with a little tile in it */ --card-chip: rgba(4, 20, 14, 0.28); --card-chip-tile: #ffffff; --card-chip-tile-edge: inset 0 -1.5px 1.5px rgba(120, 132, 126, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); /* the one button that keeps the player going */ --card-primary: #f0c75e; --card-primary-text: #3f2e00; /* the outlined buttons beside it (Start over, Back to map) */ --card-quiet: rgba(238, 245, 239, 0.09); --card-quiet-text: #e6efe9; --card-quiet-rim: inset 0 0 0 1.5px rgba(238, 245, 239, 0.20); /* the plain lines: How did it happen?, Back to map on the win card */ --card-link-text: #b4cbbf; /* the video offer, a link: the card's own text colour, never green (Poki) */ --card-video-text: #e6efe9; --card-video-line: rgba(230, 239, 233, 0.45); /* the tiles standing on the cards' top edge, two of each, one per showing */ --card-lose-tile-1: url('assets/card-tile-2-sad.svg'); --card-lose-tile-2: url('assets/card-tile-4-sad.svg'); --card-win-tile-1: url('assets/card-tile-2-happy.svg'); --card-win-tile-2: url('assets/card-tile-4-happy.svg'); /* the win card's confetti, eight colours the pieces are dealt from */ --card-confetti-1: #f0c75e; --card-confetti-2: #ffd978; --card-confetti-3: #f4a29b; --card-confetti-4: #f7c1b5; --card-confetti-5: #8fd6b4; --card-confetti-6: #c9b6f2; --card-confetti-7: #9cc9f0; --card-confetti-8: #fff3d1; } /* ============================================================================= EVERY OTHER POPUP'S THEME (popups in the calm look, 2026-10-15, off mockups/popups-calm.html). The booster cards, the cooking cards, Settings, Not enough coins, How to play, Privacy, Restart?, the advert question and the level banner all wear the end cards' surface: the same --card-* tokens above for the card, its text, its gold button and its quiet button. Only what the end cards never needed is here, named by job. The rules are at the end of this file ("THE CALM POPUPS"). ========================================================================== */ :root { /* a long card (Settings, How to play): the pond keeps its own size at the top and the shade melts into the plain face under it */ --card-shade-long: linear-gradient(180deg, rgba(46, 104, 82, 0.16) 0px, rgba(34, 84, 66, 0.55) 150px, var(--card-face) 300px); --card-picture-long: 100% auto; /* the rows of Settings and the coins sheet */ --card-row: rgba(238, 245, 239, 0.07); --card-row-rim: inset 0 0 0 1px rgba(238, 245, 239, 0.12); --card-row-ico: #a9d3bd; --card-row-sub: #9fbcae; --card-row-danger-ico: #f4a29b; /* the on and off switches */ --card-switch-off: rgba(238, 245, 239, 0.20); --card-switch-on: #f0c75e; --card-switch-knob: #ffffff; /* the round close button at the top corner */ --card-close: rgba(238, 245, 239, 0.12); --card-close-ink: #e6efe9; /* section heads on How to play and Privacy, and the line between parts */ --card-heading: #f3d98f; --card-line: rgba(238, 245, 239, 0.14); --card-scroll: rgba(238, 245, 239, 0.30); /* the banner before a level */ --card-pill: rgba(24, 62, 48, 0.96); --card-pill-shadow: 0 10px 26px rgba(0, 0, 0, 0.40); } /* ============================================================================= THE HARD LEVEL MARK'S THEME (option B of mockups/hard-level-marks.html, Matan approved 2026-10-13): a violet ring round a hard level's bead on the lobby dial and round the big circle when it is the level you are on, a violet HARD LEVEL label in that circle, and a short violet Hard pill beside Level X inside the level. Violet is used nowhere else on the dial, so it cannot be read as a warning or as the gold of the current level. Every colour the mark wears is here and nowhere else, like the end cards' block above; the rules (search "THE HARD LEVEL MARK") only say where it goes. ========================================================================== */ :root { --hard-mark: #8b5cf6; /* the ring, the label, the pill */ --hard-mark-dk: #5b2fb8; /* the label's and pill's drop edge */ --hard-mark-rim: rgba(196, 181, 253, 0.55); /* the pill's thin light rim */ --hard-mark-glow: rgba(139, 92, 246, 0.55); /* the soft glow round a ring */ --hard-mark-halo: rgba(139, 92, 246, 0.35); /* the big circle's outer halo */ --hard-mark-text: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* The board colour, not the old mint (2026-08-19). #game covers the whole viewport on a phone so this is never the main surface — but it IS what shows as side rails above 720px wide, and what iOS paints during a rubber-band overscroll. Left at mint it flashed the pre-dark-board colour. */ background: var(--body-bg); color: #2a3549; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } /* Screens: only one of map/play is active at a time; modals overlay both. */ .screen { display: none; height: 100%; } .screen.active { display: flex; } /* The map keeps the old dark board until its own pass. */ #map-screen { background: #2a6349 url('assets/background.jpg') center / cover no-repeat; } #game { flex-direction: column; max-width: 720px; margin: 0 auto; /* TIGHTENED 2026-08-04. Matan plays at a 375x685 viewport — mobile browser chrome eats 127px more than the 812 this screen was tuned against — and at 685 the board was getting 349px, i.e. 51% of the screen, with 336px of chrome around it. Level 17 rendered its words at 6.1px. Every px reclaimed here is board scale, so the padding and the gaps go first. */ padding: 6px 3px 8px; /* horizontal 14 -> 3 (Matan 2026-08-04): board width is the lever on tile size, and every px of side padding is a px the board never gets. */ gap: 5px; width: 100%; position: relative; /* Verdant Oasis wash (Stitch brief, 2026-08-06). Flat mint base with two radial highlights — no vertical shading underneath, that's the delta from the old wash. */ /* Highlights dialled back from 0.3 to 0.10/0.14: they were authored to read ON MINT, and at full strength over Pine they wash the corners out to a milky green. */ background-color: var(--board); background-image: radial-gradient(circle at top right, var(--board-hi-top) 0%, transparent 42%), radial-gradient(circle at bottom left, var(--board-hi-bot) 0%, transparent 60%); } /* THE GARDEN IS A SURROUND, NOT A WASH — reworked 2026-08-19 (Matan). EDITABLE: assets/background-night-arch-light-portrait.jpg. Kept as its own layer so opacity and mask can be retuned without touching the gradient underneath. What this replaces and why. It used to be assets/background.jpg — a bright illustrated sunset garden — held at 0.18 with mix-blend-mode: overlay. At that strength it read as neither a place nor a texture, just noise on the glass, and it left the question "what am I looking at?" unanswered: the tiles have a slab wall and a cast shadow, so they are objects lying on a SURFACE, and a surface is not a sunset. Now the dark board is the surface and the garden is the room it stands in. The old file is still on disk and is not used by anything. THE MASK IS THE POINT. The image's own centre is deliberately empty (we generated it that way), so the mask only has to hold the flowered rim off the board. Ellipse radii are pinned at 50% 50% so the gradient's 100% ray lands on the frame edge — the 62%/90% stops then read as percentages of the distance from centre to screen edge. Sizing the ellipse larger pushes that stop off-screen and the mask quietly stops biting. `mix-blend-mode` is NORMAL now, not overlay: overlay lifts mid-tones, which is what forced the old photo down to 0.18 in the first place. Do not change the image without re-deriving --board from it — see the note up at the palette. The two are locked, and the failure mode is a visible ellipse in the middle of the screen. */ #bg-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--bg-image) center / cover no-repeat; opacity: var(--bg-opacity); mix-blend-mode: var(--bg-blend); -webkit-mask-image: var(--bg-mask); mask-image: var(--bg-mask); } /* ====================================================================== COOKING MODE'S OWN ROOM (Matan, 2026-08-28). `html.cooking` is set by showScreen() while a cooking board is up and cleared the moment it is not, so this whole block is scoped to that one screen and cannot leak into a numbered level. THE WASH IS #7a3a2c, and it was measured rather than picked. It has to sit where the green board sits or every tile, scrim and pill shifts under it: L* 32.6 against the green board's 33.7, a white tile face at 8.51:1 against its 8.15, and - the reason this exact hue and not a darker or lighter red - ALL 18 pill-pool colours clear the 25 dE camouflage floor against it. The three candidates either side of it (#5c2620, #6b2f24, #8a3f2e) each lose one pill to the board. Re-derive with: python tools/theme-measure.py "cook=#7a3a2c" --board IS NOT ONLY THE BACKGROUND. The glass-tile scrim and the tray's recessed track both read from it, deliberately, so the shading follows the board. Going red therefore tints every glass tile on a cooking board warm - Matan's call, and it is the intended look, not a leak. THE MASK STAYS `none`, which is what keeps --board free to be anything. A masked photo pins the board colour to the image's own centre-band mean; see the --board note up at the palette before restoring one here. */ /* ========================================================================= THEME LOOKS LIVE HERE. `html.theme-` is set by applyTheme() in game.js from the `themes` block in config.json - a level number band, or a cuisine. A theme is a BUNDLE: this class is its look, and the same config entry names its sound scene in ambience.js. WHY THE LOOK IS CSS AND NOT CONFIG DATA. The one thing a theme must carry is --bg-image, and that differs by ORIENTATION (see the two rules below). A flat string in config.json cannot express a media query, so config names the class and the class carries the look. Adding a theme is three edits: one entry in config.json, one scene in ambience.js, one block here. ⚠️ TODAY theme-kitchen HAS NO BLOCK, AND THAT IS NOT AN OVERSIGHT. The kitchen look is still carried by `html.cooking` immediately below, which predates themes and is a MODE class rather than a theme class. The two coincide because there is exactly one cooking theme; the moment a second cuisine theme is added, the look moves out of html.cooking and into a theme-* block, and html.cooking keeps only what is genuinely about MODE (the petals, the dish rules). Do not merge them before then - see the note above applyTheme() in game.js for why mode and theme are separate axes. ========================================================================= */ html.cooking { --board: #7a3a2c; /* TWO FILES, ONE PER ORIENTATION (Matan, 2026-08-28), because #bg-photo is `cover` and the two layouts leave the room visible in different places: portrait everything stacks down the middle, so the art is busy on the LEFT AND RIGHT EDGES and calm through a central column - the same logic as the night-arch portrait it replaces. landscape the board is a tall block RIGHT OF CENTRE (x 39.8-81.8% measured at 832x384), the panels take the far left and the tray sits at x 87.7-96.4% - so the calm column shifts right with the board. Brief for both: icons-pipeline/PROMPT-cooking-background.md. NEITHER FILE IS ON DISK YET - Matan is producing them. Until they land the url() simply fails to load and the measured #7a3a2c wash carries the screen on its own, which is why that colour was measured rather than eyeballed. */ --bg-image: url('assets/background-cooking-portrait.jpg'); --bg-opacity: 0.34; --bg-blend: normal; --bg-mask: none; } @media (orientation: landscape) { html.cooking { --bg-image: url('assets/background-cooking-landscape.jpg'); } } /* COOKING KEEPS THE LOOK IT HAD, 2026-09-23. The block above only ever set the board and the pictures; everything else on a cooking board (the round buttons, the tray, the depth tint, the rails, the title outline) came from :root. When the riverside at dusk became :root's default those would all have turned violet on the terracotta board, so they are pinned here to the values they had until that day. Delete this rule to let Cooking follow the dusk tray and buttons instead - a design call, not a fix. 2026-09-27: :root is the garden again and html.look-dusk skips Cooking (:not(.cooking)), so these now repeat :root's values. Kept on purpose: it is what keeps Cooking's tray and buttons green whatever :root does next. */ html.cooking { --body-bg: #165a43; --board-hi-bot: rgba(8,40,28,0.14); --green-mid: #47a075; --green-edge: #72d4a6; --green-shade: #123f2e; --title-stroke: #0f5238; --depth-near: rgba(22, 90, 67, 0.15); --depth-far: rgba(22, 90, 67, 0.22); --tray-panel: rgba(12, 52, 38, 0.24); --deck-1: #a9cbb6; --deck-2: #89ad98; --deck-3: #6b917d; --deck-front-1: #6f947f; --deck-front-2: #537a66; --slit-1: #24513f; --slit-2: #2f5c49; --slit-3: #457058; --lip-1: #b6d4c1; --lip-2: #8fb2a0; } /* NO PETALS IN THE KITCHEN. Belt and braces on purpose: this hides the canvas, and petalsShouldRun() in game.js also refuses to start the loop, so the rAF integrator is not merely invisible - it is not running. Hiding alone would leave a wind field integrating every frame behind an opaque element. */ html.cooking #petals { display: none; } /* ====================================================================== THE RIVERSIDE AT DUSK, AS A LOOK THE GAME CAN GIVE A PLAYER (2026-09-27). History: dusk was :root's default from 2026-09-23 (for Poki's last fit test) and the green garden a class, html.look-garden, for the Google Play app. On 2026-09-27 Matan brought the garden back as the default of every build except Poki ("Poki was the only place the dusk look was meant for"), so the two swapped places: :root is the garden, exactly as it was until 2026-09-23, and dusk is this class. WHO GETS IT. game.js puts `look-dusk` on (applyAbToPage()) when the player's look is dusk: from PLATFORM.defaultLook, which only the Poki backend sets to 'dusk', or from a `look` A/B assignment, or from the dev force ?ab=look:dusk. The Poki bundle also carries the class in its index.html from the first byte (tools/build-bundle.mjs reads it off the backend), so the loading screen and the first frame are dusk there too. `look-garden` is still put on for a garden player, as a marker the checks read; no rule styles it, because the garden is :root. EVERY VALUE IS THE ONE :root CARRIED FROM 2026-09-23 TO 2026-09-27, the look Matan approved on his phone; themes/dusk.css carries the same set for ?theme=dusk. Change one, change both. NOT ON A COOKING BOARD: html.cooking keeps its own room, and :not(.cooking) is what stops this block, which outranks html.cooking, from painting over it. */ html.look-dusk:not(.cooking) { --board: #3b3a8a; --body-bg: #3b3a8a; --bg-image: url('assets/background-dusk-portrait.jpg'); --bg-opacity: 0.72; --bg-blend: normal; --bg-mask: none; --board-hi-top: rgba(255,255,255,0.10); --board-hi-bot: rgba(20,14,60,0.16); --green-mid: #7a6fd0; --green-edge: #b9b0ff; --green-shade: #26235e; --depth-near: rgba(59, 58, 138, 0.15); --depth-far: rgba(59, 58, 138, 0.22); --tray-panel: rgba(24, 20, 78, 0.28); --slit-1: #34327a; --slit-2: #413f8c; --slit-3: #55529f; --deck-1: #b6aed2; --deck-2: #9b91b5; --deck-3: #82769a; --deck-front-1: #91759a; --deck-front-2: #795b80; --lip-1: #bfb8d7; --lip-2: #a096b8; --title-stroke: #26235e; } @media (orientation: landscape) { html.look-dusk:not(.cooking) { --bg-image: url('assets/background-dusk-landscape.jpg'); } } /* ====================================================================== THE `boosters` A/B TEST, variant "locked" (2026-09-26). Since 2026-09-14 a booster the player has not reached is hidden (.booster.locked below keeps its space, visibility hidden). This variant shows it again the way the game did before that day: in place, greyed, wearing its unlock level, and not pressable (the button's own onclick refuses a locked booster). The class is put on by applyAbToPage() in game.js. A filter on a BOOSTER BUTTON, never on a tile face. */ html.ab-boosters-locked .booster.locked { visibility: visible; cursor: not-allowed; filter: saturate(0.30) brightness(0.72); } #petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } /* ONE CANVAS, not twenty animated elements (2026-08-26). The petals are a wind field now - see the block above buildPetals() in game.js for why that could not stay in CSS: keyframes have no integrator, so they can carry a fall and a sine but never a vortex, and a vortex is the whole point. --petal is still the colour token, but the ALPHA in it is no longer what you see: game.js multiplies it by the old keyframe plateau (0.55) and paints the result, so PETAL_ALPHA there is the number that matters. */ #petals canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Ambience is never worth a motion-sickness trigger. Belt and braces: this hides it, and petalsShouldRun() in game.js also refuses to start the loop, so a reduced-motion user does not pay for a canvas nobody can see. */ @media (prefers-reduced-motion: reduce) { #petals { display: none; } } /* Everything above the two background layers. */ /* .guide-float: the first-time guide's hand, caption, Skip and cheer, which are placed in viewport pixels and carry their own position and layer. #fly-layer: the overlay the loose copies travel on, same reason - it is placed in viewport pixels and carries its own layer. See the block after the tray. */ #game > *:not(#bg-photo):not(#petals):not(.rail-panel):not(.guide-float):not(#fly-layer) { position: relative; z-index: 2; } .btn { background: white; border: none; border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 650; color: #2a3549; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform 0.08s ease; font-family: inherit; white-space: nowrap; } .btn:active { transform: scale(0.95); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* THE COIN INSIDE A BUTTON LABEL (2026-09-03). setBtnLabel() in game.js swaps the 🪙 in a label for this span; see the note there for why the flat silhouette and not the full-colour stack. `currentColor` is the whole point: the coin is painted in the button's own ink, so it is exactly as readable as the words either side of it whatever colour that button is. Sized in `em` so it tracks the label through every landscape compaction instead of needing a row of its own in each one. */ .btn-coin { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; color: currentColor; } .btn-coin svg { width: 100%; height: 100%; display: block; } /* THE LOSE CARD'S COIN IS THE COIN PILL'S OWN PICTURE (Matan, 2026-09-27). `full` is set only by the lose card (see setBtnLabel()); it draws UI_ICONS.coinStack, the art in .coin-badge .cb-ico, at the pill's own proportion to its text (17px on 14px there, 1.21em here). THE SHADOW IS THE WIN CARD'S COIN SHADOW (.end-coin), not the pill's: the pill draws its coin with no filter, on slate. Gold on the gold button needs the seat, and this is the one this coin already wears elsewhere. */ .btn-coin.full { width: 1.21em; height: 1.21em; vertical-align: -0.24em; margin-left: 0.1em; } .btn-coin.full svg { filter: drop-shadow(0 1px 0 #a6720a); } .btn-primary { background: #4a90e2; color: white; } .btn-ghost { background: rgba(0,0,0,0.06); } /* ---- THE REWARDED OFFER IS A LINK, NOT A SLAB (Matan, 2026-09-02) ---- Every "watch a video" in the game wears this. It is still a