/* ========================================================================== worlds.css — art that belongs to one island -------------------------------------------------------------------------- Everything in css/tokens.css is global and never changes. Everything in THIS file is per-world and gets swapped when the player travels. HOW A WORLD IS BUILT -------------------- A world is a block of custom properties on [data-world="..."]. js/game.js sets that attribute on #app. Nothing else in the codebase needs to know which island is on screen. To add a world later: 1. Put its background layers in assets/art/worlds// 2. Copy a block below, rename it, point the layer variables at the new files, pick its accent colour 3. Add the files to CORE_FILES in service-worker.js and bump the version No component, panel or button is touched. THE FIVE LOCATIONS OF WORLD 1 ----------------------------- Each stage in js/stages.js names one of these with its worldKey. The accent colours are the ones approved in the Phase 5A Visual Bible, and each is the single colour that location contributes to the interface. shore #4FB8A8 water and tide pools forest #7BC98F carved marks, moss light cave #7FD8F0 crystal light mountain #E0BE96 sunlit stone ruins #E3B23C gold veins, the beacon The gradients below are LIGHTING, not scenery. They deliberately do not attempt to draw a forest or a cave: faking illustration in CSS would fight the real artwork when it arrives. Each one answers a single question --- "where is the light coming from in this place?" --- and nothing else. THE FIVE LAYERS --------------- 1 sky the gradient, sun or moon no parallax 2 far distant mountains, haze slow parallax 3 mid sea, ruins, the ancient arch medium parallax 4 near vegetation framing the edges fast parallax 5 vignette foreground darkening no parallax Author each at 2560x1600 keeping everything important inside the centre 1400x1400 square, because the outer band gets cropped on extreme screen shapes. See the Phase 3A specification for the full asset contract. ========================================================================== */ /* -------------------------------------------------------------------------- THE MYSTERIOUS SHORE — stage 1 -------------------------------------------------------------------------- */ [data-world="shore"] { /* The one colour this world contributes to the interface. */ --world-accent: #4FB8A8; /* ------------------------------------------------------------------------ PLACEHOLDER SKY This gradient is a stand-in built from colours sampled directly out of the approved reference art: deep indigo at the top, violet through the middle, a warm rose sunset band low on the horizon. It is atmosphere only — it deliberately does not attempt to draw the island, the ruins or the mountains, because faking illustration in CSS would fight the real artwork when it arrives. ------------------------------------------------------------------------ */ --layer-sky-fallback: radial-gradient(120% 78% at 50% 96%, rgba(223, 158, 138, 0.30) 0%, rgba(196, 117, 134, 0.22) 18%, rgba(114, 98, 148, 0.14) 42%, rgba(0, 0, 0, 0) 68%), linear-gradient(180deg, #0C0D18 0%, #191634 34%, #2C2148 58%, #4A3560 78%, #6E4A63 100%); /* ------------------------------------------------------------------------ PRODUCTION LAYERS — COMPLETE The Shore is built like the Cave: one opaque base plate on the MID layer, with the gradient above showing through nowhere, because the plate covers the frame. The near and vignette layers landed in v0.6.3 and are the last Shore artwork; sky and far stay retired and must not be produced. ------------------------------------------------------------------------ */ /* NO SKY PLATE, AND NONE IS WANTED. The gradient above is the Shore's sky. The delivered coastal-ruins painting is opaque and full-frame, so any image placed behind it would be invisible. Do not generate a shore sky unless the mid plate is first re-cut with transparency in its sky band. */ --layer-sky: none; /* RETIRED, not missing. The mid plate already contains its own distant sea stacks and horizon; a far layer over it would draw a second one. */ --layer-far: none; /* The approved coastal-ruins plate. It carries the whole scene — sky band, sea, arch and foreground — so it sits on MID, at parallax depth 10, and moves like every other location's scenery. It was briefly wired as --layer-sky, which is depth 0 and therefore never moved at all. */ --layer-mid: url("../assets/art/worlds/shore/shore-layer-3-mid.webp"); /* Foreground rocks and vegetation framing the edges. A true cut-out: 64% of it is fully transparent, so the plate beneath still reads. Depth 18, so it moves furthest of anything on screen. */ --layer-near: url("../assets/art/worlds/shore/shore-layer-4-near.webp"); /* Foreground darkening. 73% transparent, no parallax (depth 0), and it stacks on top of the inset shadow main.css already draws. */ --layer-vignette: url("../assets/art/worlds/shore/shore-layer-5-vignette.webp"); /* Where the middle of the picture should sit. Portrait favours the sky and horizon; landscape sits lower. Overridden in main.css per orientation. */ --layer-focus-x: 50%; --layer-focus-y: 40%; } /* -------------------------------------------------------------------------- THE ENCHANTED FOREST — stage 2 Low sun coming through pale trunks from the left in long horizontal shafts. -------------------------------------------------------------------------- */ [data-world="forest"] { --world-accent: #7BC98F; --layer-sky-fallback: radial-gradient(90% 60% at 8% 72%, rgba(223, 158, 138, 0.26) 0%, rgba(196, 117, 134, 0.15) 30%, rgba(0, 0, 0, 0) 66%), radial-gradient(70% 50% at 62% 34%, rgba(123, 201, 143, 0.10) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #0C0D18 0%, #16142A 30%, #211B33 56%, #2E2740 80%, #3B3348 100%); /* Three layers: an enclosed scene gains nothing from deep parallax. */ --layer-sky: url("../assets/art/worlds/forest/forest-layer-1-sky.webp"); --layer-far: none; --layer-mid: url("../assets/art/worlds/forest/forest-layer-3-mid.webp"); --layer-near: url("../assets/art/worlds/forest/forest-layer-4-near.webp"); --layer-vignette: none; --layer-focus-x: 50%; --layer-focus-y: 45%; } /* -------------------------------------------------------------------------- THE CRYSTAL CAVE — stage 3 The one place with no sun. The crystals are the key light and they light from below, so this gradient is inverted: dark above, light near the floor. -------------------------------------------------------------------------- */ [data-world="cave"] { --world-accent: #7FD8F0; --layer-sky-fallback: radial-gradient(85% 55% at 50% 96%, rgba(127, 216, 240, 0.22) 0%, rgba(127, 216, 240, 0.09) 34%, rgba(0, 0, 0, 0) 72%), radial-gradient(60% 40% at 22% 78%, rgba(79, 184, 168, 0.12) 0%, rgba(0, 0, 0, 0) 68%), linear-gradient(180deg, #07080F 0%, #0C0D18 34%, #14162B 62%, #1B2440 86%, #22304F 100%); /* No sky plate, and none is needed: the mid layer below is opaque and fills the frame. The gradient above is the cave's light. The file once planned here was delivered as an ocean sunset, so it ships as the MOUNTAIN's sky instead. Do not regenerate it as a cave sky. */ --layer-sky: none; --layer-far: none; --layer-mid: url("../assets/art/worlds/cave/cave-layer-3-mid.webp"); --layer-near: url("../assets/art/worlds/cave/cave-layer-4-near.webp"); --layer-vignette: none; --layer-focus-x: 50%; --layer-focus-y: 52%; } /* -------------------------------------------------------------------------- THE FORGOTTEN MOUNTAIN — stage 4 Thin cold air and the most sky in the game. The horizon sits low, so the gradient carries further and the rose band is higher and cooler. -------------------------------------------------------------------------- */ [data-world="mountain"] { --world-accent: #E0BE96; --layer-sky-fallback: radial-gradient(120% 62% at 50% 88%, rgba(224, 190, 150, 0.20) 0%, rgba(196, 117, 134, 0.16) 26%, rgba(0, 0, 0, 0) 64%), radial-gradient(90% 46% at 50% 4%, rgba(81, 65, 99, 0.34) 0%, rgba(0, 0, 0, 0) 66%), linear-gradient(180deg, #0A0B16 0%, #151830 32%, #2A2749 60%, #4A3A5E 82%, #6B5068 100%); --layer-sky: url("../assets/art/worlds/mountain/mountain-layer-1-sky.webp"); --layer-far: none; --layer-mid: url("../assets/art/worlds/mountain/mountain-layer-3-mid.webp"); --layer-near: url("../assets/art/worlds/mountain/mountain-layer-4-near.webp"); --layer-vignette: none; --layer-focus-x: 50%; --layer-focus-y: 36%; } /* -------------------------------------------------------------------------- THE ANCIENT RUINS — stage 5 Warm honey stone after the cold mountain, the first stars overhead, and the beacon's light gathering low in the centre of the frame. -------------------------------------------------------------------------- */ [data-world="ruins"] { --world-accent: #E3B23C; --layer-sky-fallback: radial-gradient(70% 48% at 50% 92%, rgba(227, 178, 60, 0.24) 0%, rgba(223, 158, 138, 0.14) 32%, rgba(0, 0, 0, 0) 70%), radial-gradient(100% 55% at 50% 0%, rgba(12, 13, 24, 0.70) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #080912 0%, #131228 34%, #241C3D 62%, #3E2E4A 84%, #57404C 100%); --layer-sky: url("../assets/art/worlds/ruins/ruins-layer-1-sky.webp"); --layer-far: none; --layer-mid: url("../assets/art/worlds/ruins/ruins-layer-3-mid.webp"); --layer-near: url("../assets/art/worlds/ruins/ruins-layer-4-near.webp"); --layer-vignette: none; --layer-focus-x: 50%; --layer-focus-y: 42%; } /* -------------------------------------------------------------------------- THE TITLE SCREEN The menu is not on an island, so it gets its own quieter sky — the same twilight, further from the sunset. -------------------------------------------------------------------------- */ [data-world="realm"] { --world-accent: var(--color-gold); --layer-sky-fallback: radial-gradient(100% 62% at 50% 108%, rgba(196, 117, 134, 0.20) 0%, rgba(114, 98, 148, 0.12) 38%, rgba(0, 0, 0, 0) 70%), radial-gradient(80% 55% at 50% -8%, rgba(81, 65, 99, 0.45) 0%, rgba(0, 0, 0, 0) 62%), linear-gradient(180deg, #0C0D18 0%, #16142A 40%, #241C3D 74%, #3A2A4E 100%); --layer-sky: none; --layer-far: none; --layer-mid: none; --layer-near: none; --layer-vignette: none; --layer-focus-x: 50%; --layer-focus-y: 50%; }