/* R-018.10-018.13/R-018.16: sky, sun, cloud/hill recolour, warning chip and vignette for the three overflow-warning levels (calm/rising/critical), driven by the `data-warn` attribute main.js/ui/warnView.js sets on #app and (mirrored, for the body-level sky) on . Rail/glow/gauge/ring and board shake amplitude are canvas/JS (render.js, railArt.js, warnArt.js, warnView.js) — this file is the DOM/CSS half of spec 018. Colour only via the --c- custom properties (R-008.10/A-008.9); --warn-fade-ms/ --warn-pulse-ms/--warn-shake-px are set at boot from config (WARN_FADE_MS/ WARN_PULSE_MS/WARN_SHAKE_PX) by ui/warnView.js, never hard-coded here. */ html, body, #play-area, .cloud, .hill, .hill-light, .sun, .sun-halo, .warn-chip { transition: background var(--warn-fade-ms, 600ms) ease, background-color var(--warn-fade-ms, 600ms) ease, opacity var(--warn-fade-ms, 600ms) ease; } /* ---- R-018.10: sky gradient behind the app (mirrored data-warn on so this applies even though #play-area/body sit outside #app's subtree for some rules). ---- */ html[data-warn="rising"] body, html[data-warn="rising"] #play-area { background: linear-gradient(180deg, var(--c-skyRising), var(--c-skyRisingLow)); } html[data-warn="critical"] body, html[data-warn="critical"] #play-area { background: linear-gradient(180deg, var(--c-skyCritical), var(--c-skyCriticalLow)); } /* ---- R-018.10: sun (rising only), behind the next bubble's corner. ---- */ .sun, .sun-halo { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; } .sun { right: 4%; top: 0; width: 30%; height: 56%; background: var(--c-sun); border: 3px solid var(--c-warnLip); } .sun-halo--big { right: -8%; top: -14%; width: 48%; height: 86%; background: var(--c-sun); } .sun-halo--small { right: 0; top: -2%; width: 38%; height: 64%; background: var(--c-sun); } #app[data-warn="rising"] .sun { opacity: 1; } #app[data-warn="rising"] .sun-halo--big { opacity: 0.2; } #app[data-warn="rising"] .sun-halo--small { opacity: 0.45; } /* ---- R-018.10: clouds/hill recolour per level. ---- */ #app[data-warn="rising"] .cloud { background: var(--c-cloudRising); } #app[data-warn="critical"] .cloud { background: var(--c-cloudCritical); } #app[data-warn="rising"] .hill { background: var(--c-hillRising); } #app[data-warn="rising"] .hill-light { background: var(--c-hillLightRising); } #app[data-warn="critical"] .hill { background: var(--c-hillCritical); } #app[data-warn="critical"] .hill-light { background: var(--c-hillLightCritical); } /* ---- R-018.13: warning chip, after the combo badge; icon-only fallback keeps the string only as its aria-label when the row is too narrow. ---- */ .warn-chip { display: flex; align-items: center; gap: 5px; padding: 3px 12px 3px 8px; border-radius: 999px; font-family: 'Lilita One', sans-serif; font-size: 13px; pointer-events: none; } .warn-chip[hidden] { display: none; } .warn-chip.icon-only { padding: 3px 8px; } .warn-chip.icon-only .warn-chip-text { display: none; } .warn-chip[data-level="rising"] { background: var(--c-warn); border: 3px solid var(--c-text); box-shadow: 0 3px 0 var(--c-text); color: var(--c-text); } .warn-chip[data-level="critical"] { background: var(--c-danger); border: 3px solid var(--c-text); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-danger) 35%, transparent); color: var(--c-surface); transform: rotate(-2deg); text-shadow: 0 1px 0 var(--c-text), 1px 0 0 var(--c-text), -1px 0 0 var(--c-text), 0 -1px 0 var(--c-text); } /* ---- R-018.11: critical-only radial vignette, pointer-events none, below popups (z-index 35) and above the board. `#app[data-warn] ~ #vignette` works because #vignette is #app's next sibling in index.html. ---- */ #vignette { position: fixed; inset: 0; z-index: 25; opacity: 0; pointer-events: none; background: radial-gradient(circle, transparent 40%, color-mix(in srgb, var(--c-danger) 38%, transparent) 100%); } #app[data-warn="critical"] ~ #vignette { opacity: 1; animation: warn-vignette-pulse var(--warn-pulse-ms, 1000ms) ease-in-out infinite; } @keyframes warn-vignette-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ---- R-018.12: board shake while critical (JS toggles this class every WARN_SHAKE_MS, ui/warnView.js); amplitude from --warn-shake-px. ---- */ @keyframes warn-board-shake { 0% { transform: translateX(0); } 25% { transform: translateX(calc(-1 * var(--warn-shake-px, 2px))); } 50% { transform: translateX(var(--warn-shake-px, 2px)); } 75% { transform: translateX(calc(-1 * var(--warn-shake-px, 2px))); } 100% { transform: translateX(0); } } #board.warn-shake { animation: warn-board-shake 120ms linear; } /* ---- R-018.16: reduced motion — no shake, no bunting sway (railArt.js checks prefersReducedMotion() itself), tape glow/vignette stop pulsing (stay at full); colour crossfades are untouched (still transition above), every level still looks visually different. ---- */ @media (prefers-reduced-motion: reduce) { #board.warn-shake { animation: none; } #app[data-warn="critical"] ~ #vignette { animation: none; opacity: 1; } }