/* Riot Alley (/casino/riot): the graffiti back alley at night, the 5x5 reels in a neon-wrapped steel frame, Bandit and
   Grimm either side, the Riot's value plates over the reels and the strikes sign beside them, and everything that plays
   over it (js/casino/riot.js). Art lives in /casino/slots/riot/. Outlines on the display font are drop-shadows, never
   -webkit-text-stroke (Inter Tight is a variable font: the stroke draws the overlaps inside its letters). */

.sl-riot { --f1: #1a2a05; --f2: #b6ff2e; --f3: #e9ffb0; --ra-lime: #b6ff2e; --ra-pink: #ff3d9a; --ra-cyan: #5ff2ff; --ra-ink: #0a0410;
  --ra-outline: drop-shadow(1.2px 0 0 var(--ra-ink)) drop-shadow(-1.2px 0 0 var(--ra-ink)) drop-shadow(0 1.2px 0 var(--ra-ink)) drop-shadow(0 -1.2px 0 var(--ra-ink)); }

/* ----- the stage: a landscape scene that breaks out of the page column on a wide screen, so the alley and the crew
   fill the sides instead of empty margins */
.sl-riot .sl-stage { height: clamp(600px, calc(100vh - 220px), 980px); }
@media (min-width: 1100px) {
  .sl.sl-riot { width: min(calc(100vw - 64px), 1800px); margin-left: calc(50% - min(calc(50vw - 32px), 900px)); }
}
.sl-riot .sl-bg { inset: 0; animation: none; background-size: cover; background-position: center 45%; background-color: #0a0b0d; transition: filter .8s; transform-origin: 50% 40%; }
.sl-riot .sl-bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .55)), radial-gradient(60% 70% at 50% 52%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 70%); }
.sl-riot .sl-stage.bonus .sl-bg { filter: saturate(1.1) brightness(1.02); }
.sl-riot .sl-stage.ra-epic .sl-bg { filter: saturate(1.5) brightness(1.35) hue-rotate(-24deg); transition: filter .1s; }
.sl-riot .sl-meter { display: none; }
.sl-riot .sl-logo { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 16px rgba(182, 255, 46, .3)); }
/* room above the frame for the value plates and the frame's top, and under it for the hunt ribbon */
.sl-riot .sl-board { position: relative; z-index: 3; padding: clamp(74px, 11vh, 112px) 16px clamp(34px, 5vh, 52px); }
/* the reels: dark wet concrete with the tiles set edge to edge, a hair of black between them */
.sl-riot .sl-frame { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.sl-riot .sl-reels { border-radius: 3px; overflow: hidden; background: #07080a; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95), inset 0 0 0 1px #000; }
.sl-riot .sl-reel { background: none; }
.sl-riot .sl-reel + .sl-reel { box-shadow: none; }
.sl-riot .sl-cell { box-shadow: none; }
.sl-riot .sl-cell::after { display: none; }
.sl-riot .sl-sym { width: 96%; height: 96%; border-radius: 5%; object-fit: cover; filter: none; }
.sl-riot .sl-cell.smear .sl-sym { border-radius: 0; }
.sl-riot .sl-tag, .sl-riot .sl-mult { display: none; }
.ra-gframe { position: absolute; z-index: 2; pointer-events: none; max-width: none; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .65)); }

/* the sprayed numbers on the crew's tiles and on Bandit's wild */
.sl-riot .sl-stamp { position: absolute; left: 50%; bottom: 6%; z-index: 2; transform: translateX(-50%) rotate(-4deg); font: 900 calc(var(--cell) * .3)/1 var(--font-display); letter-spacing: -.03em; color: #fff; padding: .12em .08em; margin: -.12em -.08em; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; filter: var(--ra-outline) drop-shadow(0 2px 2px rgba(0, 0, 0, .85)) drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.sl-riot .sl-stamp.q { color: #fff; font-size: calc(var(--cell) * .3); }
.sl-riot .sl-stamp.shown, .sl-riot .sl-stamp.times { color: var(--ra-lime); filter: var(--ra-outline) drop-shadow(0 2px 2px rgba(0, 0, 0, .85)) drop-shadow(0 0 10px rgba(182, 255, 46, .7)); }
.sl-riot .sl-stamp.plus { color: var(--ra-pink); filter: var(--ra-outline) drop-shadow(0 2px 2px rgba(0, 0, 0, .85)) drop-shadow(0 0 10px rgba(255, 61, 154, .75)); }
.sl-riot .sl-stamp.hot { font-size: calc(var(--cell) * .36); color: #fff; }
.sl-riot .sl-stamp.plus.hot { filter: var(--ra-outline) drop-shadow(0 2px 2px rgba(0, 0, 0, .85)) drop-shadow(0 0 14px var(--ra-pink)) drop-shadow(0 0 4px var(--ra-pink)); }
.sl-riot .sl-stamp.times.hot, .sl-riot .sl-stamp.shown.hot { filter: var(--ra-outline) drop-shadow(0 2px 2px rgba(0, 0, 0, .85)) drop-shadow(0 0 14px var(--ra-lime)) drop-shadow(0 0 4px var(--ra-lime)); }
.sl-riot .sl-cell.ra-hot .sl-sym { filter: brightness(1.12) drop-shadow(0 0 calc(var(--cell) * .08) rgba(182, 255, 46, .8)); }
.sl-riot .sl-cell.ra-landed .sl-sym { animation: ra-landed .6s ease-out; }
.sl-riot .sl-cell.ra-landed-epic .sl-sym { animation: ra-landed-epic 1.1s ease-in-out infinite alternate; }
.sl-riot .sl-cell.ra-acting { z-index: 3; }
.sl-riot .sl-cell.ra-acting .sl-sym { animation: ra-acting .5s ease-in-out infinite alternate; }
@keyframes ra-landed { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
@keyframes ra-landed-epic { from { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 64, 64, 0)); } to { filter: brightness(1.25) drop-shadow(0 0 calc(var(--cell) * .12) rgba(255, 64, 64, .95)); } }
@keyframes ra-acting { from { transform: scale(1.02) rotate(-1.5deg); filter: brightness(1.2); } to { transform: scale(1.08) rotate(1.5deg); filter: brightness(1.5); } }

/* wins: a neon frame round each winning tile, the rest dims; the lines are lime (pink where a multiplier is in) */
.sl-riot .sl-cell.hit::before, .sl-riot .sl-cell.hit2::before { inset: 2%; z-index: 1; border-radius: 7%; background: none; box-shadow: inset 0 0 0 calc(var(--cell) * .03) var(--ra-lime), inset 0 0 calc(var(--cell) * .12) rgba(182, 255, 46, .45), 0 0 calc(var(--cell) * .16) rgba(182, 255, 46, .8); animation: none; }
.sl-riot .sl-cell.hit2::before { box-shadow: inset 0 0 0 calc(var(--cell) * .03) var(--ra-pink), inset 0 0 calc(var(--cell) * .12) rgba(255, 61, 154, .45), 0 0 calc(var(--cell) * .18) rgba(255, 61, 154, .85); }
.sl-riot .sl-cell.hit .sl-sym, .sl-riot .sl-cell.hit2 .sl-sym { position: relative; z-index: 0; filter: brightness(1.1); }
.sl-riot .sl-reels.dim .sl-cell:not(.hit):not(.hit2) { filter: brightness(.36) saturate(.5); }
.sl-riot .sl-lines { inset: 0; width: 100%; height: 100%; z-index: 3; }
.sl-riot .sl-lines polyline { stroke: var(--ra-lime); stroke-width: 6; opacity: .95; filter: drop-shadow(0 0 6px var(--ra-lime)) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.sl-riot .sl-lines polyline.mult { stroke: var(--ra-pink); filter: drop-shadow(0 0 7px var(--ra-pink)) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
/* two RIOT signs down: the next reel buzzes pink */
.sl-riot .sl-reel.tease { background: linear-gradient(180deg, rgba(255, 61, 154, .4), rgba(255, 61, 154, .08) 32%, rgba(255, 61, 154, .08) 68%, rgba(255, 61, 154, .4)); box-shadow: inset 0 0 0 2px rgba(255, 120, 190, .95), inset 0 0 calc(var(--cell) * .45) rgba(255, 61, 154, .6); animation: ra-tease-glow .4s ease-in-out infinite alternate; }
.sl-riot .sl-reel.tease::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(255, 220, 240, 0) 0%, rgba(255, 220, 240, 0) 36%, rgba(255, 220, 240, .5) 50%, rgba(255, 220, 240, 0) 64%, rgba(255, 220, 240, 0) 100%); background-size: 100% 260%; mix-blend-mode: screen; animation: ra-tease-sweep .7s linear infinite; }
@keyframes ra-tease-sweep { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes ra-tease-glow { to { box-shadow: inset 0 0 0 2px #ffd6ea, inset 0 0 calc(var(--cell) * .7) rgba(255, 61, 154, .85); } }

/* ----- the crew either side of the frame: they breathe, and change pose (acting, cheering) with a crossfade */
.ra-crew { position: absolute; bottom: 0; z-index: 2; aspect-ratio: 1 / 1.62; pointer-events: none; transform-origin: 50% 100%; }
.ra-crew.left { left: 0; }
.ra-crew.right { right: 0; }
.ra-p { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .55)); }
.ra-p.on { opacity: 1; }
.ra-p-idle.on { animation: ra-breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.ra-crew.right .ra-p-idle.on { animation-delay: -2s; }
@keyframes ra-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.012, 1.02) rotate(.4deg); } }
.ra-glow { position: absolute; left: 8%; right: 8%; top: 6%; height: 50%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(182, 255, 46, .4), rgba(182, 255, 46, 0) 70%); filter: blur(12px); opacity: .5; animation: ra-glow 3.2s ease-in-out infinite alternate; }
.ra-crew.right .ra-glow { background: radial-gradient(circle, rgba(255, 61, 154, .45), rgba(255, 61, 154, 0) 70%); }
.ra-crew[data-pose="act"] .ra-glow, .ra-crew[data-pose="cheer"] .ra-glow { opacity: 1; animation-duration: .8s; }
@keyframes ra-glow { to { opacity: .85; transform: scale(1.08); } }

/* ----- the Riot's scoreboard: a value plate over each reel, "+" between them; the strikes sign and the running
   total on a panel right of the frame */
.ra-board { position: absolute; z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.ra-plate { position: relative; justify-self: center; width: 86%; aspect-ratio: 3 / 2; display: grid; place-items: center; }
.ra-plate img, .ra-plate-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .75)); }
.ra-plate b { position: relative; font: 900 calc(var(--cell) * .34)/1 var(--font-display); letter-spacing: -.03em; color: #fff; padding: .12em .08em; margin: -.12em -.08em; white-space: nowrap; font-variant-numeric: tabular-nums; filter: var(--ra-outline) drop-shadow(0 0 8px rgba(182, 255, 46, .55)); transition: color .25s; }
.ra-plate[data-big="1"] b { font-size: calc(var(--cell) * .26); }
.ra-plate.lime b { color: var(--ra-lime); filter: var(--ra-outline) drop-shadow(0 0 14px var(--ra-lime)); }
.ra-plate.pink b { color: var(--ra-pink); filter: var(--ra-outline) drop-shadow(0 0 14px var(--ra-pink)); }
.ra-op { position: absolute; right: -9%; top: 50%; transform: translate(50%, -50%) rotate(-6deg); font: 900 calc(var(--cell) * .28)/1 var(--font-display); color: var(--ra-pink); filter: var(--ra-outline) drop-shadow(0 0 8px rgba(255, 61, 154, .8)); }
.ra-side { position: absolute; z-index: 4; width: calc(var(--cell) * 1.45); display: grid; align-content: start; gap: calc(var(--cell) * .28); pointer-events: none; }
.ra-strikes, .ra-sum { position: relative; aspect-ratio: 3 / 2.1; display: grid; place-items: center; align-content: center; gap: 2px; }
.ra-strikes img.ra-plate-img, .ra-sum > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .75)); }
.ra-lamps { position: relative; display: flex; gap: 5%; width: 74%; justify-content: center; }
.ra-lamps i { position: relative; width: 30%; aspect-ratio: 1; }
.ra-lamps i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.ra-lamps i .lit { opacity: 0; filter: drop-shadow(0 0 6px var(--ra-pink)); }
.ra-lamps i.on .lit { opacity: 1; animation: ra-lamp 1.4s ease-in-out infinite alternate; }
.ra-lamps i.on .dark { opacity: 0; }
@keyframes ra-lamp { to { filter: drop-shadow(0 0 12px var(--ra-pink)) brightness(1.2); } }
.ra-strikes small, .ra-sum span { position: relative; font: 800 max(9px, calc(var(--cell) * .11))/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px #000; }
.ra-sum b { position: relative; font: 900 calc(var(--cell) * .3)/1 var(--font-display); letter-spacing: -.03em; color: #fff; padding: .12em .08em; margin: -.12em -.08em; font-variant-numeric: tabular-nums; filter: var(--ra-outline) drop-shadow(0 0 10px rgba(182, 255, 46, .6)); }
.ra-sum em { position: relative; font: 700 max(9px, calc(var(--cell) * .1))/1 var(--font-display); color: rgba(255, 255, 255, .7); font-style: normal; text-shadow: 0 1px 2px #000; }
@media (max-width: 720px) {
  .ra-side { display: flex; width: auto !important; height: auto !important; left: 0 !important; right: 0; top: auto !important; bottom: calc(var(--cell) * -1.25); justify-content: center; gap: 12px; }
  .ra-strikes, .ra-sum { width: calc(var(--cell) * 1.6); }
  .sl-riot .sl-board { padding-bottom: calc(var(--cell) * 1.3); }
}

/* ----- the hunt mode's ribbon under the frame */
.ra-mode { position: absolute; left: 50%; bottom: calc(var(--cell) * -.6); z-index: 5; transform: translate(-50%, 0); display: grid; justify-items: center; gap: 2px; padding: 7px 22px 8px; border-radius: 4px; background: linear-gradient(180deg, #1a1d22, #0a0c0f); box-shadow: inset 0 0 0 1.5px var(--ra-pink), 0 8px 20px -8px rgba(0, 0, 0, .9), 0 0 24px -6px rgba(255, 61, 154, .8); white-space: nowrap; pointer-events: none; }
.ra-mode b { font: 900 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #ffd6ea; }
.ra-mode span { font: 700 11px/1 var(--font-display); color: rgba(255, 255, 255, .75); }

/* ----- effects over the stage */
.sl-riot .cv-fxc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.sl-riot .cv-fxl { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.sl-riot .cv-fxl > * { position: absolute; left: 0; top: 0; }
.ra-num { font: 900 var(--fs, 26px)/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; color: #fff; padding: .12em .08em; margin: -.12em -.08em; filter: var(--ra-outline) drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 12px rgba(255, 255, 255, .5)); will-change: transform; transform-origin: 50% 50%; font-variant-numeric: tabular-nums; }
.ra-num.t-lime { color: var(--ra-lime); filter: var(--ra-outline) drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 14px rgba(182, 255, 46, .8)); }
.ra-num.t-pink { color: var(--ra-pink); filter: var(--ra-outline) drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 14px rgba(255, 61, 154, .85)); }
.ra-num.t-white { color: #fff; }
/* a small win's total over the grid */
.ra-winbanner { display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.ra-winbanner span { font: 900 calc(var(--fs) * .3)/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px rgba(182, 255, 46, .9), 0 2px 0 #000; }
.ra-winbanner b { font: 900 var(--fs)/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; color: var(--ra-lime); padding: .12em .08em; margin: -.12em -.08em; filter: var(--ra-outline) drop-shadow(0 4px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 22px rgba(182, 255, 46, .7)); font-variant-numeric: tabular-nums; }
.ra-slam { width: 100%; top: 44%; display: grid; justify-items: center; gap: 6px; transform: translateY(-50%); text-align: center; }
.ra-slam b { font: 900 clamp(46px, 8vw, 118px)/.9 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--ra-lime); padding: .12em .08em; margin: -.12em -.08em; filter: var(--ra-outline) drop-shadow(0 5px 0 #0a0410) drop-shadow(0 16px 26px rgba(0, 0, 0, .7)); }
.ra-slam span { font: 800 clamp(13px, 1.6vw, 19px)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
/* the wall of paint that covers the stage while the scene changes */
.ra-splash { left: 50% !important; top: 50% !important; width: 70%; max-width: none; height: auto; transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 0 30px rgba(0, 0, 0, .5)); }

/* ----- the bonus intro: the crew charging, the bonus's name sprayed on */
.sl-over.ra-intro-over { background: #0a0b0d; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
.ra-intro { position: absolute; inset: 0; display: grid; align-items: center; }
.ra-intro-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.ra-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 4, 10, .78), rgba(6, 4, 10, .3) 42%, rgba(6, 4, 10, 0) 62%); }
.ra-intro-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 6px; max-width: min(520px, 46%); margin-left: clamp(24px, 6vw, 110px); text-align: left; }
.ra-kick { font: 800 14px/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--ra-pink); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.ra-title { font: 900 clamp(48px, 7.4vw, 112px)/.92 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--ra-lime); padding: .12em .08em; margin: -.12em -.08em; filter: var(--ra-outline) drop-shadow(0 5px 0 #0a0410) drop-shadow(0 14px 24px rgba(0, 0, 0, .6)); }
.ra-won { font: 900 clamp(22px, 2.6vw, 34px)/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(255, 61, 154, .9), 0 3px 0 #0a0410; }
.ra-intro-copy p { max-width: 40ch; margin-top: 4px; color: #f3f3f6; font-size: 15px; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, .95); }
.ra-intro-copy .sl-hint { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.ra-intro[data-kind="full"] .ra-intro-art { filter: saturate(1.2) contrast(1.08) hue-rotate(-14deg); }
.ra-intro[data-kind="full"] .ra-title { color: var(--ra-pink); }

/* ----- the total: the sign plate, its number sprayed on, paint and sparks firing out of both sides */
/* the overlay is the size box: the plaque is measured against the stage, never the viewport, so the top rung (1.04 x the 7% grow overshoot) still fits */
.sl-over.ra-tot { container-type: size; background: radial-gradient(70% 70% at 50% 50%, rgba(10, 6, 14, .45), rgba(4, 3, 6, .92)); }
.ra-total { position: relative; width: min(760px, 92cqw, calc(168cqh - 225px)); display: grid; justify-items: center; gap: 2px; transform-origin: 50% 46%; }
.ra-total .ra-rays { position: absolute; left: 50%; top: 52%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(182, 255, 46, .2) 0deg 6deg, rgba(182, 255, 46, 0) 6deg 15deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); animation: ra-spin 14s linear infinite; pointer-events: none; }
@keyframes ra-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ra-total[data-tier="2"] .ra-rays { animation-duration: 10s; }
.ra-total[data-tier="3"] .ra-rays { animation-duration: 7s; filter: brightness(1.35) hue-rotate(-60deg); }
.ra-total[data-tier="4"] .ra-rays { animation-duration: 5s; filter: brightness(1.6) hue-rotate(-120deg); }
.ra-total[data-tier="5"] .ra-rays, .ra-total[data-tier="6"] .ra-rays { animation-duration: 3.6s; filter: brightness(1.9) hue-rotate(-200deg); }
.ra-tkick { position: relative; font: 900 clamp(15px, 2vw, 26px)/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(255, 61, 154, .8), 0 3px 0 #0a0410; }
.ra-plq { position: relative; width: 100%; aspect-ratio: 1200 / 640; margin-top: -1%; }
.ra-plq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .8)); }
.ra-glass { position: absolute; left: 12%; right: 12%; top: 22%; bottom: 22%; display: grid; place-items: center; }
.ra-glass b { font: 900 clamp(34px, 6.6vw, 92px)/1 var(--font-display); letter-spacing: -.03em; color: var(--ra-lime); padding: .12em .08em; margin: -.12em -.08em; filter: var(--ra-outline) drop-shadow(0 4px 0 #0a0410) drop-shadow(0 0 22px rgba(182, 255, 46, .55)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ra-tier { position: relative; margin-top: -2%; font: 900 clamp(28px, 4.4vw, 60px)/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; padding: .12em .08em; margin: -.12em -.08em; filter: var(--ra-outline) drop-shadow(0 4px 0 #0a0410) drop-shadow(0 0 20px rgba(255, 255, 255, .5)); }
.ra-total[data-tier="2"] .ra-tier { color: var(--ra-lime); }
.ra-total[data-tier="3"] .ra-tier { color: var(--ra-cyan); }
.ra-total[data-tier="4"] .ra-tier { color: var(--ra-pink); }
.ra-total[data-tier="5"] .ra-tier, .ra-total[data-tier="6"] .ra-tier { color: #ffe14a; filter: var(--ra-outline) drop-shadow(0 4px 0 #0a0410) drop-shadow(0 0 24px rgba(255, 225, 74, .9)); }
.ra-x { position: relative; font: 700 15px/1 var(--font-display); color: rgba(255, 255, 255, .82); }

/* ----- the paytable's specials */
.ra-pt-special { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.ra-pt-special > div { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ra-pt-special img { grid-row: 1 / 3; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.ra-pt-special b { font-size: 13px; }
.ra-pt-special small { color: var(--sl-dim); font-size: 12px; line-height: 1.35; }

/* ----- the bar: black steel, lime; the Buy Bonus button a spray-can lid */
.sl-riot .sl-bar { background: linear-gradient(180deg, #15181c, #0a0c0f); border-top: 1px solid rgba(182, 255, 46, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.sl-riot .sl-spin { width: 76px; height: 76px; color: #0b1403; background: radial-gradient(circle at 50% 30%, #f0ffc8, #b6ff2e 45%, #6aa50c 80%, #3c6305); box-shadow: 0 0 0 4px #1a2208, 0 0 0 6px rgba(182, 255, 46, .5), 0 12px 26px -8px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(40, 70, 0, .35); }
.sl-riot .sl-round { border-color: rgba(182, 255, 46, .3); background: linear-gradient(180deg, #23272d, #15181c); color: rgba(233, 255, 176, .85); }
.sl-riot .sl-round.on { background: var(--ra-lime); color: #0b1403; }
.sl-riot .sl-buy { position: relative; width: 92px; height: 92px; margin: -26px 0 -10px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: url(/casino/slots/riot/buybtn.webp) center / contain no-repeat; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(255, 61, 154, .5)); animation: ra-buy 2.4s ease-in-out infinite; transition: transform .18s var(--spring), filter .2s; }
@keyframes ra-buy { 50% { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px rgba(255, 61, 154, .95)); } }
.sl-riot .sl-buy svg { display: none; }
.sl-riot .sl-buy span { display: grid; justify-items: center; gap: 1px; text-align: center; font: 900 10px/1 var(--font-display); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.sl-riot .sl-buy span b { font: 900 15px/1 var(--font-display); letter-spacing: .06em; color: #fff; text-shadow: 0 0 10px rgba(255, 61, 154, .9), 0 1px 2px rgba(0, 0, 0, .9); }
.sl-riot .sl-buy:hover:not(:disabled) { transform: scale(1.06); background-color: transparent; }
.sl-riot .sl-buy:active:not(:disabled) { transform: scale(.96); }
.sl-riot .sl-buy:disabled { opacity: .55; animation: none; }