/* Olympus Divided's own look over the cascade kit (kits/cascade/client/cascade.css): the realm behind the game,
   the gold-and-marble frame, the logo, and the effects js/olympus.js plays. Decoration only: nothing here moves a
   control, a readout or the board (transforms and opacity only, no layout changes), and the reduced-motion
   variants (html.cs-reduced, set by the kit from the device or the setting) hold still or fade. */
:root { --od-gold: #e9c870; --od-gold2: #b8892f; --od-sea: #5fd2cf; --od-zeus: #bfe9ff; --od-hades: #3be08a; --od-ink-dark: #2a1a05; }

/* ------------------------------------------------------------------ the realm (idle ambience) */
html { background: #0b1a22; }
body { background: transparent; } /* the realm (z-index -1) paints over the root background, under the body */
.od-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.od-bg { position: absolute; inset: -3%; background: #0b1a22 url('../assets/bg.webp') center / cover no-repeat; transform-origin: 50% 60%;
  animation: od-breathe-bg 38s ease-in-out infinite alternate; will-change: transform; }
@media (orientation: portrait) { .od-bg { background-image: url('../assets/bg-portrait.webp'); } }
@keyframes od-breathe-bg { to { transform: scale(1.06) translateY(-1%); } }
/* readability: the HUD and header sit on a soft dark band, the board on a dimmed centre */
.od-scene::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #06121acc 0, #06121a55 18%, #06121a33 45%, #06121a66 70%, #06121add 100%); }
/* the free spins light the realm (teal and gold) */
.od-scene::before { content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .8s;
  background: radial-gradient(90% 60% at 50% 30%, #5fd2cf33, transparent 70%), radial-gradient(70% 50% at 50% 100%, #e9c87033, transparent 70%); }
body.cs-free .od-scene::before { opacity: 1; }
.od-rays { position: absolute; left: 50%; top: -30vmax; width: 160vmax; height: 160vmax; margin-left: -80vmax; opacity: .38; transform-origin: 50% 50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #fff2c41f 0 4deg, transparent 4deg 13deg);
  -webkit-mask: radial-gradient(closest-side, #000 0, #0008 40%, transparent 72%); mask: radial-gradient(closest-side, #000 0, #0008 40%, transparent 72%);
  animation: od-rays 90s linear infinite; will-change: transform; }
@keyframes od-rays { to { transform: rotate(360deg); } }
body.cs-free .od-rays { opacity: .6; }
.od-cloud { position: absolute; width: 90vmax; height: 34vmax; border-radius: 50%; opacity: .32; will-change: transform;
  background: radial-gradient(closest-side, #dfe9ee55, #dfe9ee22 55%, transparent); }
.od-cloud.c1 { top: 4%; left: -60vmax; animation: od-drift 70s linear infinite; }
.od-cloud.c2 { top: 26%; left: -70vmax; opacity: .22; animation: od-drift 95s linear -40s infinite; }
.od-cloud.c3 { bottom: 10%; left: -65vmax; opacity: .18; background: radial-gradient(closest-side, #ffb27a44, transparent); animation: od-drift 120s linear -80s infinite; }
@keyframes od-drift { to { transform: translateX(calc(100vw + 140vmax)); } }
.od-embers i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffcf7a; box-shadow: 0 0 6px #ff9b3a; opacity: 0;
  animation: od-ember 11s linear infinite; will-change: transform, opacity; }
.od-embers i:nth-child(1) { left: 8%; animation-delay: -1s; } .od-embers i:nth-child(2) { left: 19%; animation-delay: -6s; animation-duration: 13s; }
.od-embers i:nth-child(3) { left: 31%; animation-delay: -3s; } .od-embers i:nth-child(4) { left: 44%; animation-delay: -9s; animation-duration: 14s; }
.od-embers i:nth-child(5) { left: 57%; animation-delay: -4.5s; } .od-embers i:nth-child(6) { left: 66%; animation-delay: -8s; animation-duration: 12s; }
.od-embers i:nth-child(7) { left: 74%; animation-delay: -2s; } .od-embers i:nth-child(8) { left: 83%; animation-delay: -7s; animation-duration: 15s; }
.od-embers i:nth-child(9) { left: 91%; animation-delay: -5s; } .od-embers i:nth-child(10) { left: 50%; animation-delay: -10s; animation-duration: 16s; }
@keyframes od-ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .6; } 100% { transform: translate(30px, -95vh); opacity: 0; } }
/* lightning lights the sky, an urn bursts: one flash behind the game */
.od-flash { position: absolute; inset: 0; z-index: 2; background: radial-gradient(80% 60% at 50% 30%, #eaf7ff, #bfe9ff88 40%, transparent 75%); opacity: 0; }
/* a scatter tease dims the realm and warms the board */
html:has(.cs-board.tease) .od-scene::after { background: linear-gradient(180deg, #06121aee, #06121aaa 50%, #06121aee); transition: background .3s; }

/* ------------------------------------------------------------------ the three realms (js/gods.js sets data-realm)
   Hades' volcanic realm is .od-bg; Zeus' storm and Poseidon's sea fade in over it when their power acts. Their art
   loads once the page is idle (js/gods.js sets the --od-* urls). Each realm has its own idle life: lava seams and
   embers for Hades, rolling cloud and far lightning for Zeus, light shafts and bubbles under the sea. */
/* an idle realm is hidden, not only transparent, so it costs no compositing; only the shown one breathes */
.od-realm, .od-lava, .od-shafts, .od-flicker { visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.od-realm { position: absolute; inset: -3%; background: #0b1a22 center / cover no-repeat; opacity: 0; }
.od-realm.storm { background-image: var(--od-storm-l, none); }
.od-realm.sea { background-image: var(--od-sea-l, none); }
@media (orientation: portrait) { .od-realm.storm { background-image: var(--od-storm-p, none); } .od-realm.sea { background-image: var(--od-sea-p, none); } }
.od-scene[data-realm="storm"] .od-realm.storm, .od-scene[data-realm="sea"] .od-realm.sea { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.od-scene[data-realm="hades"] .od-lava, .od-scene[data-realm="storm"] .od-flicker, .od-scene[data-realm="sea"] .od-shafts { visibility: visible; transition: opacity .7s ease, visibility 0s; }
.od-scene[data-realm="storm"] .od-realm.storm { animation: od-breathe-bg 30s ease-in-out infinite alternate; }
.od-scene[data-realm="sea"] .od-realm.sea { animation: od-breathe-bg 24s ease-in-out -6s infinite alternate; }
/* Hades: the lava seams pulse along the foot of the realm */
.od-lava { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 26% at 22% 100%, #ff5a1f55, transparent 70%), radial-gradient(55% 22% at 80% 100%, #ff7a2a4d, transparent 70%); }
.od-scene[data-realm="hades"] .od-lava { opacity: 1; animation: od-lava 4.6s ease-in-out infinite alternate; }
@keyframes od-lava { from { opacity: .45; } to { opacity: 1; } }
/* Zeus: far lightning lights the storm now and then */
.od-flicker { position: absolute; inset: 0; opacity: 0; background: radial-gradient(70% 45% at 62% 22%, #d9ecffcc, #9cc4ff44 45%, transparent 75%); }
.od-scene[data-realm="storm"] .od-flicker { animation: od-flicker 7.3s linear infinite; }
@keyframes od-flicker { 0%, 90% { opacity: 0; } 91% { opacity: .55; } 92% { opacity: .05; } 93.5% { opacity: .4; } 96%, 100% { opacity: 0; } }
.od-scene[data-realm="storm"] .od-cloud { opacity: .5; background: radial-gradient(closest-side, #c9d6ee66, #7d8fb833 55%, transparent); }
.od-scene[data-realm="storm"] .od-cloud.c1 { animation-duration: 36s; }
.od-scene[data-realm="storm"] .od-cloud.c2 { animation-duration: 48s; }
.od-scene[data-realm="storm"] .od-embers { opacity: 0; }
/* Poseidon: light shafts sway down from the surface; the embers rise as bubbles */
.od-shafts { position: absolute; left: -20%; right: -20%; top: -10%; height: 90%; opacity: 0; transform-origin: 50% 0;
  background: repeating-linear-gradient(100deg, transparent 0 5vmax, #c8fbff1c 5vmax 8vmax, transparent 8vmax 14vmax, #c8fbff12 14vmax 15.5vmax, transparent 15.5vmax 21vmax);
  -webkit-mask: linear-gradient(#000, #0008 45%, transparent); mask: linear-gradient(#000, #0008 45%, transparent); }
.od-scene[data-realm="sea"] .od-shafts { opacity: 1; animation: od-sway 9s ease-in-out infinite alternate; }
@keyframes od-sway { from { transform: skewX(-4deg) translateX(-2%); } to { transform: skewX(4deg) translateX(2%); } }
.od-embers { transition: opacity .7s; }
.od-scene[data-realm="sea"] .od-embers i { width: 7px; height: 7px; background: radial-gradient(circle at 35% 35%, #ffffffcc, #bff6ff33 60%, transparent 70%); box-shadow: 0 0 0 1px #bff6ff66; }
.od-scene[data-realm="sea"] .od-rays, .od-scene[data-realm="storm"] .od-rays { opacity: .18; }
/* the urn bursts: the three realms collide behind the grid for a moment. The storm rolls in from the upper left and the
   sea from the lower left, each fading softly into the other and into Hades' volcano, which stays on the right behind
   him; a flash where they meet. Masks, so the seams are soft blends, not lines. */
.od-scene.od-collide .od-realm { visibility: visible; transition: none; animation: od-collide-in 1.6s ease-in-out both; }
.od-scene.od-collide .od-realm.storm { -webkit-mask: linear-gradient(150deg, #000 0 22%, #0009 38%, transparent 58%); mask: linear-gradient(150deg, #000 0 22%, #0009 38%, transparent 58%); --od-from: -10% -6%; }
.od-scene.od-collide .od-realm.sea { -webkit-mask: linear-gradient(30deg, #000 0 22%, #0009 38%, transparent 58%); mask: linear-gradient(30deg, #000 0 22%, #0009 38%, transparent 58%); --od-from: -10% 6%; animation-delay: .1s; }
.od-scene.od-collide::before { opacity: 1; background: radial-gradient(28% 34% at 40% 50%, #fff6dcaa, #9fe8ff44 45%, #3be08a22 70%, transparent 80%); animation: od-collide-flash 1.6s ease-out both; }
@keyframes od-collide-in { 0% { opacity: 0; translate: var(--od-from); } 35%, 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes od-collide-flash { 0%, 25% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
/* the free spins intro: the camera flies through the three realms, each pushed in, behind the intro screen (js/gods.js) */
.od-scene.od-fly .od-bg { animation: od-fly-0 var(--od-fly, 6s) ease-in-out both; }
.od-scene.od-fly .od-realm { visibility: visible; transition: none; -webkit-mask: none; mask: none; }
.od-scene.od-fly .od-realm.storm { animation: od-fly-1 var(--od-fly, 6s) ease-in-out both; }
.od-scene.od-fly .od-realm.sea { animation: od-fly-2 var(--od-fly, 6s) ease-in-out both; }
@keyframes od-fly-0 { 0% { transform: scale(1); } 30% { transform: scale(1.35) translate(-3%, 2%); } 100% { transform: scale(1.35); } }
@keyframes od-fly-1 { 0%, 24% { opacity: 0; transform: scale(1.4) translate(4%, 0); } 34% { opacity: 1; } 58% { opacity: 1; transform: scale(1.05) translate(-3%, -2%); } 68%, 100% { opacity: 0; transform: scale(1); } }
@keyframes od-fly-2 { 0%, 58% { opacity: 0; transform: scale(1.4) translate(-4%, 0); } 68% { opacity: 1; } 96% { opacity: 1; transform: scale(1.02); } 100% { opacity: .9; transform: scale(1); } }
body:has(#cs-intro.show) .od-scene.od-fly ~ .od-god { opacity: 0; transition: opacity .4s; }
html:has(.od-scene.od-fly) #cs-intro.show { background: radial-gradient(60% 50% at 50% 45%, #040b10cc, #040b1033 75%); }

/* ------------------------------------------------------------------ the active god (js/gods.js places the box) */
.od-god { position: fixed; left: 100%; top: 0; width: 0; height: 0; z-index: -1; pointer-events: none; contain: strict; }
.od-g { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.od-g.on { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.od-g > img, .od-g > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.od-g > img { filter: drop-shadow(0 6px 18px #000a); transform-origin: 50% 100%; }
.od-g > video { opacity: 0; transition: opacity .25s; }
/* the idle loop takes over from the still once it plays; the act clip from the loop while he acts */
.od-g.od-live > video.idle { opacity: 1; }
.od-g.od-live > img { opacity: 0; transition: opacity .25s .1s; }
.od-g.od-acting[data-clip="act"] > video.act, .od-g.od-acting[data-clip="win"] > video.win { opacity: 1; transition-duration: .12s; }
.od-g.od-acting > video.idle, .od-g.od-acting > img { opacity: 0; }
/* the still breathes until the loop is there */
.od-g.on:not(.od-live) > img { animation: od-god-breathe 4.8s ease-in-out infinite alternate; }
@keyframes od-god-breathe { to { transform: scale(1.012, 1.018); } }
/* without his act clip: a surge of light in his colour */
.od-g[data-god="hades"] { --od-god: #3be08a; } .od-g[data-god="zeus"] { --od-god: #bfe9ff; } .od-g[data-god="poseidon"] { --od-god: #5fd2cf; }
.od-g.od-glow > img { animation: od-god-act 1.1s ease-out; }
@keyframes od-god-act { 0% { filter: drop-shadow(0 6px 18px #000a); transform: none; }
  30% { filter: drop-shadow(0 0 22px var(--od-god)) drop-shadow(0 0 8px var(--od-god)) brightness(1.25); transform: scale(1.03); }
  100% { filter: drop-shadow(0 6px 18px #000a); transform: none; } }
.od-g.od-glow-calm > img { animation: none; filter: drop-shadow(0 0 16px var(--od-god)) drop-shadow(0 6px 18px #000a); transition: filter .3s; }
/* upright he stands behind the stage, so the stage's own panels keep their readouts clear */
.od-god[data-mode="behind"] .od-g > img, .od-god[data-mode="behind"] .od-g > video { object-position: 50% 0; }
html.cs-reduced .od-g { transition-duration: .2s; }
html.cs-reduced .od-g > video { display: none; }

/* ------------------------------------------------------------------ header and logo */
.cs-head .od-logo { height: 46px; width: auto; max-width: 42vw; aspect-ratio: 1000 / 366; object-fit: contain; filter: drop-shadow(0 2px 6px #000a); }
.cs-head .cs-title, .od-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.asgf-short .cs-head .od-logo { height: 32px; width: auto; }
.cs-chip { background: #06121a99; border-color: #e9c87044; }
.od-loader-logo { width: min(78vw, 420px); height: auto; aspect-ratio: 1000 / 366; filter: drop-shadow(0 4px 18px #000c); }
.cs-loader { background: #0b1a22 url('../assets/bg-portrait.webp') center / cover no-repeat; }
@media (orientation: landscape) { .cs-loader { background-image: url('../assets/bg.webp'); } }
.cs-loader::before { content: ''; position: absolute; inset: 0; background: #06121a99; z-index: -1; }
.cs-loader { isolation: isolate; }
.cs-loader .bar i, .cs-loader .start { background: linear-gradient(135deg, #f3dc8e, var(--od-gold2)); color: var(--od-ink-dark); }

/* ------------------------------------------------------------------ panels, multiplier and the Urn of Lots */
.cs-meter-box { background: linear-gradient(180deg, #1c3440e6, #0c1c24ee); border-color: #e9c87055; box-shadow: inset 0 1px 0 #fff2c422; position: relative; }
.cs-meter-box .k { color: #d9c9a0; }
.cs-meter-box.mult.on { border-color: var(--od-gold); box-shadow: 0 0 14px #e9c87066, inset 0 1px 0 #fff2c433; }
.cs-meter-box.mult.on .v { color: var(--od-gold); }
/* the multiplier climbs with a flare: a ring of light and a slam of the figure (js/olympus.js adds .od-flare) */
.cs-meter-box.mult::after, .cs-charge::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  pointer-events: none; opacity: 0; background: radial-gradient(closest-side, #fff6d0, #e9c870aa 35%, transparent 70%); }
.cs-meter-box.mult.od-flare::after { animation: od-flare .6s ease-out; }
.cs-meter-box.mult.od-flare .v { animation: od-slam .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes od-flare { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes od-slam { 0% { transform: scale(1.8); color: #fff; text-shadow: 0 0 16px #fff; } 100% { transform: scale(1); } }
/* the urn fills with light: a gold bar whose glow grows with the charge, a glint on every charge, a burst when full */
.cs-charge .track { background: #0008; box-shadow: inset 0 0 0 1px #e9c87033; }
.cs-charge .track i { background: linear-gradient(90deg, #7a5420, var(--od-gold) 70%, #fff2c4); box-shadow: 0 0 calc(4px + 10px * var(--od-fill, 0)) #e9c870; }
.cs-charge.shimmer .track i { background-image: linear-gradient(100deg, #7a5420 0 40%, #fff6d0 50%, var(--od-gold) 60% 100%); }
.cs-charge.od-charge .track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, #fff8dccc, transparent);
  animation: od-glint .45s ease-out; }
@keyframes od-glint { to { transform: translateX(350%); } }
.cs-charge.full { border-color: var(--od-gold); box-shadow: 0 0 18px var(--od-gold); }
.cs-charge::after { left: 0; width: 100%; height: 140px; margin: -70px 0 0 0; border-radius: 40%; /* inside the box sideways: the page never scrolls */
  background: radial-gradient(closest-side, #fff8dc, #e9c870aa 30%, transparent 68%), repeating-conic-gradient(#fff2c455 0 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.cs-charge.od-burst::after { animation: od-burst .8s ease-out; }
@keyframes od-burst { 0% { opacity: 0; transform: scale(.2) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(40deg); } }
.cs-fs > div { background: #0f2a33ee; border-color: #5fd2cf55; }
.cs-fs .k { color: #bfe9e6; }

/* ------------------------------------------------------------------ the board: marble glass in a gold frame */
.cs-board { background: radial-gradient(120% 80% at 50% 0%, #1d3e48d9, #08161ee6); box-shadow: inset 0 0 0 1px #e9c87040, inset 0 0 40px #000a, 0 12px 36px #000c; }
.cs-board::before { opacity: .7; }
.od-frame { position: absolute; inset: -3px; border-radius: 15px; padding: 3px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.od-frame i { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; opacity: .75;
  background: conic-gradient(from 0deg, var(--od-gold2), #fff2c4 8%, var(--od-gold) 16%, var(--od-gold2) 30%, #6e4e1c 50%, var(--od-gold2) 66%, #fff2c4 74%, var(--od-gold) 82%, var(--od-gold2));
  animation: od-spin 14s linear infinite; will-change: transform; }
@keyframes od-spin { to { transform: rotate(360deg); } }
/* scatter anticipation: the frame races and burns, the scatters on the board throb */
.cs-board.tease { box-shadow: inset 0 0 0 1px #fff2c4, inset 0 0 50px #e9c87055, 0 0 34px #e9c870aa; }
.cs-board-wrap:has(.cs-board.tease) .od-frame i { animation-duration: 1.1s; opacity: 1; }
.cs-board-wrap:has(.cs-board.tease) .od-frame { inset: -4px; padding: 4px; }
.cs-board.tease .cs-scatter .cs-face { animation: od-throb .55s ease-in-out infinite alternate; }
@keyframes od-throb { to { transform: scale(1.1); filter: drop-shadow(0 0 12px #ffe39a); } }
body.cs-free .cs-board { box-shadow: inset 0 0 0 2px #5fd2cf99, inset 0 0 40px #000a, 0 12px 36px #000c; }
body.cs-free .od-frame i { background: conic-gradient(from 0deg, #2a8f8c, #d8fffd 8%, var(--od-sea) 16%, var(--od-gold) 40%, #fff2c4 50%, var(--od-sea) 66%, #d8fffd 80%, #2a8f8c); }

/* tiles: weight on landing (a light trail as they fall), wins glow from behind */
.cs-tile .cs-face-img { filter: drop-shadow(0 3px 3px #0009); }
.cs-wild .cs-face-img, .cs-scatter .cs-face-img { filter: drop-shadow(0 0 7px var(--od-gold)) drop-shadow(0 3px 3px #0009); }
.cs-tile.od-fall::before { content: ''; position: absolute; left: 28%; right: 28%; bottom: 55%; height: 110%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: linear-gradient(to top, #fff2c466, #e9c87022 50%, transparent); animation: od-trail .5s ease-out forwards; }
@keyframes od-trail { 0% { opacity: .9; } 100% { opacity: 0; transform: scaleY(.3); transform-origin: 50% 100%; } }
.cs-tile.win:not(.plain)::before { content: ''; position: absolute; inset: 4%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fff2c4cc, #e9c87066 45%, transparent 72%); animation: od-halo .55s ease-in-out infinite alternate; }
@keyframes od-halo { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: scale(1.12); } }
.cs-tile.win::after { border-color: var(--od-gold); border-radius: 12px; box-shadow: 0 0 10px #e9c87088; }
.cs-tile.win.plain::after { box-shadow: none; }
.cs-line { stroke: #fff2c4; filter: drop-shadow(0 0 5px var(--od-gold)); }
.cs-tile.purge::after { border-color: var(--od-sea); box-shadow: 0 0 10px #5fd2cf88; }
.cs-tile.trigger::after { border-color: var(--od-gold); box-shadow: 0 0 16px var(--od-gold); }

/* the god powers' banner, in each brother's colour */
.kind-placeWilds { --kind: var(--od-zeus); } .kind-removeTypes { --kind: var(--od-sea); } .kind-transformType { --kind: var(--od-hades); }
.cs-power { background: #06121aee; }
.cs-power.show { animation: od-banner .42s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes od-banner { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.cs-power .cs-power-icon { width: 54px; height: 54px; border-color: var(--kind); box-shadow: 0 0 14px var(--kind); }

/* ------------------------------------------------------------------ the effects layer over the board (js/olympus.js) */
.od-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 12px; overflow: visible; }
.od-fx canvas { position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
.od-fx > .od-clip { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; z-index: 2; } /* the wave over the target rings */
.od-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; } /* never past the board: the readouts stay clear */
.od-veil { position: absolute; inset: 0; opacity: 0; }
.od-ring { position: absolute; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; border: 3px solid var(--od-gold); box-shadow: 0 0 18px var(--od-gold), inset 0 0 12px var(--od-gold); opacity: 0; }
.od-glow { position: absolute; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, #fffbe8, #e9c870aa 35%, transparent 70%); }
.od-wave { position: absolute; top: -8%; bottom: -4%; left: 0; width: 170%; display: flex; }
/* the front is the wave art at full height (aspect 0.633); the body behind it is a sheet of sea water over the tiles */
.od-wave-front { flex: none; height: 100%; aspect-ratio: .633; margin-left: -12%; background: url('../assets/fx/wave.webp') right center / contain no-repeat;
  filter: drop-shadow(10px 0 14px #00262e88); }
.od-wave-body { flex: 1; background: linear-gradient(90deg, #0d4f5c00, #0e5f6c66 35%, #10808cbb 80%, #1a9aa2d0);
  -webkit-mask: linear-gradient(#000 4%, #000 96%, transparent); mask: linear-gradient(#000 4%, #000 96%, transparent); }

/* ------------------------------------------------------------------ the spin button breathes between rounds */
.cs-spin { background: linear-gradient(135deg, #f6e19a, var(--od-gold) 45%, var(--od-gold2)); color: var(--od-ink-dark); box-shadow: 0 4px 20px #e9c87066; position: relative; }
.cs-spin::after { content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; box-shadow: 0 0 22px 4px #ffe39a; opacity: 0; animation: od-breathe 2.6s ease-in-out infinite; }
.cs-spin.busy::after, .cs-spin:disabled::after { animation: none; opacity: 0; }
@keyframes od-breathe { 50% { opacity: .7; } }
.cs-tool.on { background: var(--od-gold); color: var(--od-ink-dark); }
.cs-round, .cs-tool { background: #142a33e6; border-color: #e9c87040; }

/* ------------------------------------------------------------------ feature and big-win screens */
.cs-overlay { background: #040b10d9; overflow: hidden; }
.cs-overlay::before { content: ''; position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; z-index: -1; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(#ffe7a01c 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 52%); mask: radial-gradient(closest-side, #000 8%, transparent 52%); }
.cs-overlay { isolation: isolate; }
.cs-overlay.show:not(.plain)::before { opacity: 1; animation: od-rays 26s linear infinite; }
#cs-intro.show::before { background: repeating-conic-gradient(#9ff2ee22 0 7deg, transparent 7deg 18deg); }
.cs-feat-title { color: var(--od-gold); text-shadow: 0 0 18px #e9c87088, 0 3px 0 #5a3a10; }
.cs-overlay.show .cs-feat-title, .cs-overlay.show .cs-tier { animation: od-title .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.cs-overlay.show .cs-feat-big, .cs-overlay.show .cs-big-amount { animation: od-rise .5s .15s ease-out both; }
@keyframes od-title { from { transform: scale(2.2); opacity: 0; letter-spacing: .3em; } to { transform: scale(1); opacity: 1; } }
@keyframes od-rise { from { transform: translateY(18px); opacity: 0; } }
.od-intro-urn { width: min(34vw, 170px); max-height: 22vh; height: auto; object-fit: contain; filter: drop-shadow(0 0 22px #e9c870); }
#cs-intro.show .od-intro-urn { animation: od-urn 1s cubic-bezier(.2, 1.3, .4, 1) both, od-float 3s 1s ease-in-out infinite alternate; }
@keyframes od-urn { from { transform: translateY(-60vh) rotate(-20deg); } 70% { transform: translateY(0) rotate(4deg); } to { transform: none; } }
@keyframes od-float { to { transform: translateY(-8px); } }
.cs-tier { color: var(--od-gold); text-shadow: 0 0 26px #e9c870aa, 0 4px 0 #5a3a10; }
.cs-tier.mega { color: #ffd38a; text-shadow: 0 0 30px #ff9e3aaa, 0 4px 0 #5a2a10; }
.cs-tier.epic { color: #fff2c4; text-shadow: 0 0 34px #a77cffcc, 0 0 12px #5fd2cf, 0 4px 0 #3a1a50; }
.cs-big-amount { color: #fff; text-shadow: 0 2px 10px #000, 0 0 18px #e9c87066; }
.cs-bigwin.mega::before { animation-duration: 14s !important; }
.cs-bigwin.epic::before { animation-duration: 8s !important; background: repeating-conic-gradient(#fff0b02e 0 6deg, #a77cff14 6deg 9deg, transparent 9deg 16deg); }
.cs-bigwin.show .cs-tier { animation: od-title .55s cubic-bezier(.2, 1.5, .4, 1) both, od-pulse 1.2s .6s ease-in-out infinite alternate; }
@keyframes od-pulse { to { transform: scale(1.07); } }

/* ------------------------------------------------------------------ reduced motion: nothing drifts, nothing flies */
html.cs-reduced .od-scene *, html.cs-reduced .od-frame i, html.cs-reduced .cs-spin::after, html.cs-reduced .cs-overlay::before,
html.cs-reduced .cs-board.tease .cs-scatter .cs-face, html.cs-reduced .od-intro-urn { animation: none !important; }
html.cs-reduced .od-embers, html.cs-reduced .od-cloud { display: none; }
html.cs-reduced .cs-tile.od-fall::before { display: none; }
html.cs-reduced .cs-tile.win:not(.plain)::before { animation: none; opacity: .8; }

/* short landscape (the kit's side columns): the logo fits its column */
@media (min-aspect-ratio: 20/21) and (max-height: 540px) {
  .cs-head .od-logo { height: auto; width: min(100%, 170px); max-width: none; }
  .od-intro-urn { max-height: 18vh; }
}

/* ================================================================== the board's screen (10 Nov 2026, round 2)
   A skin over the kit's HUD, not a new one: every control and readout stays the kit's own element with its id and
   behaviour; this only places and dresses them as the approved board draws them: the gold-and-marble frame with
   pillars and a Greek key round the grid, the marble control bar with a round green spin button, the multiplier as
   gold pips and the meter as the Urn of Lots on the left, the logo large at the top right with the god under it. On
   the RGS the menu panel owns the HUD (html.asgf-menu): the kit hides the HUD there and nothing here shows it. */
:root { --od-fw: clamp(10px, 2.9vmin, 30px); --od-ink-marble: #2c2116; }

/* ------------------------------------------------------------------ the grid frame: 9-slice marble and gold */
.cs-board-wrap { margin: var(--od-fw); }
.od-marble { position: absolute; inset: calc(-1 * var(--od-fw)); pointer-events: none; z-index: 5;
  border: var(--od-fw) solid transparent; border-image: url('../assets/ui/frame.webp') 11% / var(--od-fw) / 0 stretch;
  filter: drop-shadow(0 8px 18px #000c); }
.od-frame { opacity: .55; }
/* the frame takes room on each side: an upright board gives the width back (the height is already in --chrome-fit,
   which the kit measures with the wrap's margin) */
html.asgf-board-fit .cs-board, html.asgf-board-fit body.cs-free .cs-board {
  width: min(calc(100vw - 24px - 2 * var(--od-fw)), calc((var(--vh) - var(--chrome-fit)) * var(--cols, 5) / var(--rows, 5)), 600px); }

/* ------------------------------------------------------------------ the multiplier: gold pips, the value on the middle one */
.cs-meter-box.mult { background: url('../assets/ui/pip.webp') left calc(50% - 47px) bottom 10px / 22px no-repeat, url('../assets/ui/pip.webp') left calc(50% + 47px) bottom 10px / 22px no-repeat;
  border: 0; box-shadow: none; padding: 0 30px 2px; }
.cs-meter-box.mult .k { color: #f3dc8e; text-shadow: 0 1px 2px #000; }
.cs-meter-box.mult .v { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; padding-top: 2px; font-size: 15px; color: #3a2408;
  text-shadow: 0 1px 0 #fff6d0; background: url('../assets/ui/pip.webp') center / contain no-repeat; filter: drop-shadow(0 2px 4px #000b); }
.cs-meter-box.mult.on .v { color: #2a1404; filter: drop-shadow(0 0 10px #ffe39a) drop-shadow(0 2px 4px #000b); }
html.asgf-short .cs-meter-box.mult .v { width: 34px; height: 34px; font-size: 13px; }

/* ------------------------------------------------------------------ the Urn of Lots: three chambers, light, water and green fire
   --od-fill (0 to 1) follows the kit's own meter bar (read by js/gods.js); the first chamber fills first. */
.cs-charge .track { display: none; }
.od-urn { position: relative; display: flex; gap: 3px; height: 12px; margin: 4px 0 2px; }
.od-urn i { position: relative; flex: 1; border-radius: 6px; overflow: hidden; background: #0009; box-shadow: inset 0 0 0 1px #e9c87055; }
.od-urn b { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform .35s ease-out; }
.od-urn .c1 b { background: linear-gradient(90deg, #b8892f, #ffe9a8); transform: scaleX(clamp(0, calc(var(--od-fill, 0) * 3), 1)); }
.od-urn .c2 b { background: linear-gradient(90deg, #12707c, #5fd2cf, #d8fffd); transform: scaleX(clamp(0, calc(var(--od-fill, 0) * 3 - 1), 1)); }
.od-urn .c3 b { background: linear-gradient(90deg, #0b5a32, #3be08a, #c8ffe0); transform: scaleX(clamp(0, calc(var(--od-fill, 0) * 3 - 2), 1)); }
.cs-charge.full .od-urn b { filter: brightness(1.5); }

/* ------------------------------------------------------------------ the control bar: marble, with the round green spin button */
/* the slices meet the enamel panel's gold rim (measured on bar.webp: blue from x 394 to 1251, y 256 to 449 of 1600×682), so
   the marble and the rim are the border and every readout and button sits inside the blue; the border widths keep
   the art's proportions (--od-bs: the scale) */
.cs-hud { --od-bs: .07; position: relative; isolation: isolate; padding: 2px 8px;
  border-style: solid; border-color: transparent; border-width: calc(256px * var(--od-bs)) calc(348px * var(--od-bs)) calc(232px * var(--od-bs)) calc(394px * var(--od-bs));
  border-image: url('../assets/ui/bar.webp') 256 348 232 394 fill / calc(256px * var(--od-bs)) calc(348px * var(--od-bs)) calc(232px * var(--od-bs)) calc(394px * var(--od-bs)) / 0 stretch; }
.cs-hud .k { color: #f3dc8e; font-weight: 700; text-shadow: 0 1px 2px #000; }
.cs-hud .v { color: #fff; text-shadow: 0 1px 3px #000; }
.cs-hud .cs-round { background: linear-gradient(#1e4e9c, #0f2e66); color: #f3dc8e; border-color: #e9c870aa; }
.cs-msg { background: url('../assets/ui/panel.webp') center / 100% 100% no-repeat; border-radius: 10px; min-height: 34px; padding: 4px 18px; max-width: 560px; }
.cs-msg span { color: #f4ebe3; text-shadow: 0 1px 3px #000; }
.cs-msg.win span { color: #ffe39a; }
.cs-spin { transform: none; border-radius: 50%; background: url('../assets/ui/spin.webp') center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 4px 10px #000a); }
.cs-spin::after { border-radius: 50%; box-shadow: 0 0 22px 4px #3be08a; }
.cs-spin svg { display: none; }
.cs-spin::before { content: ''; width: 46%; height: 46%; background: center / contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M38 18A15 15 0 0 0 10.6 15'/%3E%3Cpath d='M10 30a15 15 0 0 0 27.4 3'/%3E%3C/g%3E%3Cpath fill='%23fff' d='M4 9l12 1-6 10zM44 39l-12-1 6-10z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 2px #0a3a1a); }
.cs-spin.busy::before { animation: od-spin-icon .9s linear infinite; }
@keyframes od-spin-icon { to { transform: rotate(360deg); } }
html.cs-reduced .cs-spin.busy::before { animation: none; }

/* ------------------------------------------------------------------ desktop and tall landscape: the board's layout
   urn and pips in the left column, the grid in its frame, the logo large at the top right with the god under it; the
   message and the control bar under the left column and the grid, the tools under the urn */
@media (min-aspect-ratio: 20/21) and (min-height: 541px) {
  :root { --chrome: 236px; --od-fw: clamp(16px, 3vh, 32px); }
  html.cs-topbar { --chrome: 276px; } /* the demo badge or replay bar on top */
  .cs-stage { display: grid; max-width: 1500px; width: 100%; column-gap: 18px; row-gap: 8px; align-content: start; justify-items: center;
    grid-template-columns: minmax(170px, 230px) auto minmax(280px, 1fr); grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "meters board head" "fs board ." "tools board ." "msg msg ." "hud hud ."; }
  .cs-head { grid-area: head; flex-direction: column; align-items: center; justify-self: stretch; min-height: 0; align-self: start; }
  .cs-head .od-logo { height: auto; width: min(100%, 360px); max-width: none; }
  .cs-head > div:nth-child(2) { flex: none; }
  .cs-meters { grid-area: meters; grid-template-columns: 1fr; width: min(100%, 210px); align-content: start; }
  .cs-meter-box.mult { order: -1; }
  .cs-fs { grid-area: fs; flex-direction: column; width: min(100%, 210px); }
  .cs-board-wrap { grid-area: board; }
  /* the message and the bar sit in the grid's own column, centred under it */
  .cs-stage { grid-template-areas: "meters board head" "fs board ." "tools board ." ". msg ." ". hud ."; }
  .cs-msg { grid-area: msg; width: 100%; }
  .cs-hud { grid-area: hud; width: max-content; max-width: none; grid-template-columns: auto auto auto auto; grid-template-areas: "bal bet spin win"; gap: 2px 16px; --od-bs: .085; padding: 4px 16px; }
  .cs-hud-l { min-width: 96px; } .cs-hud-r { min-width: 96px; }
  .cs-tools { grid-area: tools; flex-wrap: nowrap; gap: 6px; width: min(100%, 230px); align-self: end; }
  .cs-tools > * { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: 12px; letter-spacing: .02em; }
  .cs-spin { width: 84px; height: 84px; }
  /* the meter is the urn, standing in the left column */
  .cs-charge { display: grid; justify-items: center; background: none; border: 0; box-shadow: none; padding: 0; }
  .cs-charge .k, .cs-charge .v { color: #f3dc8e; text-shadow: 0 1px 2px #000; }
  .cs-charge .od-urn { --h: clamp(150px, 26vh, 340px); height: var(--h); width: calc(var(--h) * 0.17); margin: 6px 0; display: block;
    background: url('../assets/ui/urn.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 6px 14px #000b); }
  .cs-charge .od-urn i { position: absolute; left: 13%; right: 13%; border-radius: 40% 40% 14% 14% / 18% 18% 8% 8%; background: none; box-shadow: none; }
  .cs-charge .od-urn .c3 { top: 9.5%; height: 9.5%; } .cs-charge .od-urn .c2 { top: 21%; height: 14.5%; } .cs-charge .od-urn .c1 { top: 37.3%; height: 12%; }
  .cs-charge .od-urn b { transform-origin: 50% 100%; opacity: .9; }
  .cs-charge .od-urn .c1 b { background: radial-gradient(70% 55% at 50% 70%, #fffbe8, #ffd76a 45%, #b8892f); transform: scaleY(clamp(0, calc(var(--od-fill, 0) * 3), 1)); }
  .cs-charge .od-urn .c2 b { background: linear-gradient(#d8fffd, #5fd2cf 35%, #0d4f5c); transform: scaleY(clamp(0, calc(var(--od-fill, 0) * 3 - 1), 1)); }
  .cs-charge .od-urn .c3 b { background: radial-gradient(70% 70% at 50% 85%, #e8fff0, #3be08a 45%, #0b5a32); transform: scaleY(clamp(0, calc(var(--od-fill, 0) * 3 - 2), 1)); }
  .cs-charge::after { display: none; }
  .cs-charge.od-burst .od-urn { animation: od-urn-burst .8s ease-out; }
}
@keyframes od-urn-burst { 30% { filter: drop-shadow(0 0 24px #fff2c4) drop-shadow(0 0 40px #3be08a) brightness(1.3); transform: scale(1.04); } }

/* short landscape (a phone on its side): the kit's columns, with the tools moved under the meters, so the right-hand
   column holds only the logo and the god, and the control bar under the left column and the grid */
@media (min-aspect-ratio: 20/21) and (max-height: 540px) {
  :root { --od-fw: clamp(8px, 2.6vh, 14px); }
  .cs-stage { grid-template-areas: "meters board head" "fs board ." "tools board ." "msg msg ." "hud hud ."; }
  .cs-tools { grid-area: tools; flex-wrap: nowrap; gap: 4px; }
  .cs-tools > * { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 12px; }
  .cs-meters { row-gap: 4px; }
  .cs-meter-box.mult .v { width: 32px; height: 32px; font-size: 12px; }
  .cs-meter-box.mult { background-size: 18px, 18px; background-position: left calc(50% - 34px) bottom 7px, left calc(50% + 34px) bottom 7px; }
  .cs-fs { grid-area: fs; }
  .cs-hud { --od-bs: .045; padding: 0 12px; grid-template-columns: 1fr auto auto 1fr; gap: 0 10px; }
  .cs-hud-r { padding-right: 4px; }
  .cs-spin { width: 50px; height: 50px; }
  .cs-head .od-logo { width: min(100%, 190px); }
  /* the frame lies in the wrap's margin: the message line starts under it */
  .cs-msg { margin-top: calc(var(--od-fw) + 2px); }
}

/* the bet: the label over the amount, between the − and + buttons (frees the bar's width for balance and win) */
.cs-hud-bet { display: grid; grid-template-columns: 44px auto 44px; grid-template-areas: "dn k up" "dn v up"; column-gap: 6px; row-gap: 0; align-items: center; }
#cs-bet-down { grid-area: dn; } #cs-bet-up { grid-area: up; }
.cs-hud-bet .k { grid-area: k; text-align: center; line-height: 1.1; }
.cs-hud-bet .v { grid-area: v; min-width: 60px; line-height: 1.15; }

/* upright phones: a thin bar and frame, so the grid keeps its room */
@media (max-aspect-ratio: 20/21) {
  :root { --od-fw: 8px; }
  /* a compact two-row bar: balance, spin, win; then the bet, its − and + seated inside the marble, not on its edge */
  .cs-hud { --od-bs: .05; padding: 2px 12px 4px; row-gap: 2px; }
  .cs-hud .cs-spin { width: 60px; height: 60px; }
  .cs-hud-bet { grid-template-columns: 44px auto 44px; grid-template-areas: "dn k up" "dn v up"; }
  .cs-msg { min-height: 22px; padding: 0 12px; }
  .cs-stage { gap: 6px; }
}
/* tall upright phones (height to spare): a taller header band, so the god shows his head and shoulders beside the logo */
@media (max-aspect-ratio: 20/21) and (min-height: 800px) {
  .cs-head { min-height: 118px; align-items: flex-end; padding-bottom: 4px; }
}
@media (max-aspect-ratio: 20/21) and (min-height: 700px) and (max-height: 799px) {
  .cs-head { min-height: 92px; align-items: flex-end; padding-bottom: 4px; }
}
/* short upright phones: compact meters, a narrower bar and no frame margin, so the grid gets the room */
@media (max-aspect-ratio: 20/21) and (max-height: 699px) {
  .cs-stage { gap: 5px; }
  .cs-head { min-height: 36px; }
  .cs-head .od-logo { height: 40px; }
  .cs-board-wrap { margin: 0; }
  .od-marble { inset: 0; border-width: 6px; border-image-width: 6px; }
  html.asgf-board-fit .cs-board, html.asgf-board-fit body.cs-free .cs-board {
    width: min(calc(100vw - 24px), calc((var(--vh) - var(--chrome-fit)) * var(--cols, 5) / var(--rows, 5)), 600px); }
  .cs-meter-box { padding: 0 6px; }
  .cs-meter-box .v { font-size: 14px; min-height: 18px; }
  .cs-meter-box.mult .v { width: 30px; height: 30px; font-size: 12px; }
  .cs-meter-box.mult { background-size: 16px, 16px; background-position: left calc(50% - 30px) bottom 7px, left calc(50% + 30px) bottom 7px; }
  .od-urn { margin: 2px 0 0; height: 8px; }
  .cs-hud { --od-bs: .04; max-width: 300px; border-width: 0; padding: 2px 10px;
    border-image-outset: calc(256px * var(--od-bs)) calc(348px * var(--od-bs)) calc(232px * var(--od-bs)) calc(394px * var(--od-bs)); }
  .cs-hud .cs-spin { width: 50px; height: 50px; }
  .cs-msg { min-height: 22px; padding: 0 12px; }
  .cs-msg span { font-size: 13px; }
}
/* 640 to 699 px tall: the bust band too (head and shoulders beside the logo), the rest stays compact */
@media (max-aspect-ratio: 20/21) and (min-height: 640px) and (max-height: 699px) {
  .cs-head { min-height: 84px; align-items: flex-end; padding-bottom: 4px; }
}

/* Power impacts (Thunderstrike's Wilds, Soul Claim's morphs): a flash of light OVER the symbol, never a blown-out tile.
   The kit flips a struck tile with brightness(2.2) and flashes its face at 2.4 to 2.6, which together turn an opaque
   card into a cream square; here the tile keeps its own colours (an !important declaration outranks the animation)
   and the face gets a glow and a radial flash behind it, the symbol always readable. */
.cs-board .cs-tile { filter: none !important; }
.cs-tile.morph .cs-face { animation: od-impact .55s ease-out; }
.cs-tile.wildmade .cs-face { animation: od-impact-wild .65s ease-out; }
.cs-tile.morph::before, .cs-tile.wildmade::before { content: ''; position: absolute; inset: -6%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fffbe8ee, #e9c87088 40%, transparent 72%); animation: od-impact-halo .6s ease-out forwards; }
.cs-tile.morph.sym-hades::before, .od-scene[data-realm="hades"] ~ #cs-stage .cs-tile.morph::before { background: radial-gradient(closest-side, #e8fff0ee, #3be08a88 40%, transparent 72%); }
@keyframes od-impact { 0% { filter: brightness(1.25) drop-shadow(0 0 14px #fff6d0) drop-shadow(0 0 4px #ffffff); transform: scale(1.08); } 100% { filter: none; transform: none; } }
@keyframes od-impact-wild { 0% { filter: brightness(1.2) drop-shadow(0 0 16px #e6f8ff) drop-shadow(0 0 5px #ffffff); transform: scale(1.12); } 100% { filter: drop-shadow(0 0 7px var(--od-gold)) drop-shadow(0 3px 3px #0009); transform: none; } }
@keyframes od-impact-halo { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.25); } }
html.cs-reduced .cs-tile.morph::before, html.cs-reduced .cs-tile.wildmade::before { display: none; }

/* Hades fades into smoke at the feet: soft drifting smoke under him, in every mode but reduced motion's stills */
.od-g[data-god="hades"]::after { content: ''; position: absolute; left: 14%; right: 6%; bottom: 0; height: 26%; pointer-events: none;
  background: radial-gradient(45% 55% at 35% 70%, #3c3f44aa, transparent 70%), radial-gradient(40% 50% at 68% 75%, #2e3136aa, transparent 70%),
    radial-gradient(60% 40% at 50% 95%, #1c1e22cc, transparent 75%);
  filter: blur(6px); animation: od-smoke 7s ease-in-out infinite alternate; }
@keyframes od-smoke { from { transform: translateX(-3%) scaleY(.94); opacity: .8; } to { transform: translateX(3%) scaleY(1.06); opacity: 1; } }
html.cs-reduced .od-g[data-god="hades"]::after { animation: none; }