diff --git a/client/assets/symbols/HOURGLASS.png b/client/assets/symbols/HourGlass.png similarity index 100% rename from client/assets/symbols/HOURGLASS.png rename to client/assets/symbols/HourGlass.png diff --git a/client/assets/symbols/RING.png b/client/assets/symbols/Ring.png similarity index 100% rename from client/assets/symbols/RING.png rename to client/assets/symbols/Ring.png diff --git a/client/assets/symbols/SCATTER.png b/client/assets/symbols/Scatter.png similarity index 100% rename from client/assets/symbols/SCATTER.png rename to client/assets/symbols/Scatter.png diff --git a/client/engine/ambiance.js b/client/engine/ambiance.js index 9ef8d12..9aa42cc 100644 --- a/client/engine/ambiance.js +++ b/client/engine/ambiance.js @@ -23,7 +23,7 @@ // Optional real-character art. Leave null to use the CSS idol. const MASCOT_IMG = null; // e.g. "assets/mascot/zeus.png" - const CROWN_IMG = "assets/symbols/TOP_CROWN-removebg-preview.png"; + const CROWN_IMG = "assets/symbols/Crown.png"; const reduceMotion = root.matchMedia && root.matchMedia("(prefers-reduced-motion: reduce)").matches; @@ -114,7 +114,7 @@ function buildAltarDeco(stage) { const deco = el("fx-deco", stage); if (reduceMotion) return; - const gems = ["RED_GEM", "BLUE_DIAMOND", "YELLOW_HEX", "PURPLE_TRIANGLE", "GREEN_TRIANGLE", "CHALICE", "RING", "TOP_CROWN"]; + const gems = ["RedGem", "BlueGem", "YellowGem", "PurpleGem", "GreenGem", "Chaile", "Ring", "Crown"]; const orbColors = ["#9be7ff", "#ffd86f", "#ff7fa8", "#b58bff", "#77f1d0"]; const n = root.innerWidth < 620 ? 8 : 14; for (let i = 0; i < n; i++) { @@ -139,7 +139,7 @@ node.style.setProperty("--delay", `${-Math.random() * 16}s`); node.style.setProperty("--spin", `${Math.random() < 0.5 ? -1 : 1}`); if (useImg) { - node.src = `assets/symbols/${gems[i % gems.length]}-removebg-preview.png`; + node.src = `assets/symbols/${gems[i % gems.length]}.png`; node.alt = ""; node.classList.add("fx-deco-gem"); } else { diff --git a/client/index.html b/client/index.html index cb9abd0..58699a6 100644 --- a/client/index.html +++ b/client/index.html @@ -19,7 +19,7 @@ })(); - +
diff --git a/client/styles.css b/client/styles.css index 3e05ea4..1085a5b 100644 --- a/client/styles.css +++ b/client/styles.css @@ -2747,10 +2747,17 @@ pre { body { font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + /* Drowned sun-temple scene is the whole-GAME backdrop: one fixed, viewport- + covering image sits behind everything so the temple fills the full view (not + just the reel panel). A soft blue top-glow + dark scrim over the image keep the + UI readable and blend it with the underwater theme; the reel table floats on top. */ background: radial-gradient(1200px 560px at 12% -8%, rgba(130, 176, 255, 0.22), transparent 60%), radial-gradient(1100px 520px at 92% -12%, rgba(116, 232, 255, 0.15), transparent 58%), + linear-gradient(180deg, rgba(5, 10, 20, 0.55) 0%, rgba(8, 15, 31, 0.62) 42%, rgba(13, 23, 48, 0.7) 100%), + url("assets/symbols/Background.png") center / cover no-repeat fixed, linear-gradient(180deg, #050a14 0%, #080f1f 42%, #0d1730 100%); + background-color: #050a14; } body::before { @@ -2768,7 +2775,12 @@ body::after { .altar { border-radius: 20px; border-color: rgba(171, 207, 255, 0.26); - background: linear-gradient(180deg, rgba(14, 23, 42, 0.74), rgba(7, 13, 28, 0.74)); + /* The temple scene is painted on the panel itself too (under a translucent tint + for readability), so the altar carries the backdrop directly rather than only + letting the image show through. `cover` fills the panel responsively. */ + background: + linear-gradient(180deg, rgba(14, 23, 42, 0.38), rgba(7, 13, 28, 0.44)), + url("assets/symbols/Background.png") center / cover no-repeat; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }