/* Cash Convoy (/casino/convoy): the reels set into the side of an armored truck, the Run in its cargo hold, and the
   effects that play over both (js/casino/convoy.js and convoy-fx.js). Art lives in /casino/slots/convoy/. */

.sl-convoy { --cv-amber: #ffb347; --cv-gold: #ffd45c; }

/* ----- the stage: the truck picture is lined up behind the reels (slots.js alignTruck), the logo rides on its roof */
.sl-convoy .sl-stage { height: clamp(540px, calc(100vh - 330px), 900px); }
/* on a wide screen the game breaks out of the page column into a landscape stage, centred on the page: the rest of the
   truck (its doors, the cab) and the street around it fill the sides */
@media (min-width: 1100px) {
  .sl.sl-convoy { width: min(calc(100vw - 64px), 1800px); margin-left: calc(50% - min(calc(50vw - 32px), 900px)); }
}
.sl-convoy .sl-bg { inset: 0; animation: none; background-repeat: no-repeat; background-color: #07090c; }
.sl-convoy .sl-stage.cv-run .sl-bg { background-size: cover; background-position: center 40%; animation: cv-sway 3.4s ease-in-out infinite; }
@keyframes cv-sway { 0%, 100% { transform: scale(1.04) translate(0, 0) rotate(0); } 25% { transform: scale(1.04) translate(-3px, 1.5px) rotate(-.12deg); } 50% { transform: scale(1.04) translate(1px, -1px) rotate(.06deg); } 75% { transform: scale(1.04) translate(3px, 1.5px) rotate(.12deg); } }
.sl-convoy .sl-stage.cv-run .sl-amb { opacity: 0; transition: opacity .4s; }
.sl-convoy .sl-bg::after { background: radial-gradient(130% 100% at 50% 45%, rgba(4, 6, 9, 0) 40%, rgba(4, 6, 9, .55)), linear-gradient(180deg, rgba(4, 6, 9, .35), rgba(4, 6, 9, 0) 18%, rgba(4, 6, 9, 0) 78%, rgba(4, 6, 9, .75)); }
.sl-convoy .sl-meter { display: none; }
.sl-convoy .sl-top { position: absolute; z-index: 2; left: 50%; top: 10px; bottom: auto; transform: translateX(-50%); padding: 0; min-height: 0; width: auto; flex-direction: row; }
.sl-convoy .sl-logo { height: clamp(54px, 10vh, 96px); max-width: 360px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .75)); }
.sl-convoy .sl-board { padding: clamp(70px, 11vh, 108px) 16px 2px; }
.sl-convoy .sl-stage:not(.cv-run) .sl-frame { padding: 8px; border-width: 3px; background: linear-gradient(180deg, rgba(8, 10, 13, .9), rgba(4, 5, 7, .92)) padding-box, linear-gradient(160deg, #3b4048, #9aa3ae 25%, #2d3238 50%, #8a929c 75%, #30353c) border-box; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 18px rgba(0, 0, 0, .8), 0 18px 40px -14px rgba(0, 0, 0, .9); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ----- the base reels: every symbol is a whole square tile (tools/convoy_tiles.py) set in a dark window with thin
   gaps between them. Standard symbols are flat tiles (suits on brushed steel, the crew on their own colors); the
   specials (the getaway wild, the vault, cash) sit on their own frames and glow. */
.sl-convoy .sl-stage:not(.cv-run) .sl-reels { background: #050608; }
.sl-convoy .sl-stage:not(.cv-run) .sl-reel { background: #050608; }
.sl-convoy .sl-stage:not(.cv-run) .sl-reel + .sl-reel { box-shadow: none; }
.sl-convoy .sl-stage:not(.cv-run) .sl-sym { width: 95%; height: 95%; object-fit: cover; border-radius: 6%; transform: none; filter: drop-shadow(0 calc(var(--cell) * .02) calc(var(--cell) * .03) rgba(0, 0, 0, .8)); }
.sl-convoy .sl-stage:not(.cv-run) .sl-cell.smear .sl-sym { transform: scaleY(1.06); }
.sl-convoy .sl-stage:not(.cv-run) .sl-cell.wild::after, .sl-convoy .sl-stage:not(.cv-run) .sl-cell.scatter::after, .sl-convoy .sl-stage:not(.cv-run) .sl-cell.valued::after { content: ""; position: absolute; inset: 3%; z-index: -1; border-radius: 8%; animation: cv-halo 1.8s ease-in-out infinite alternate; }
.sl-convoy .sl-stage:not(.cv-run) .sl-cell.wild::after { box-shadow: 0 0 calc(var(--cell) * .16) calc(var(--cell) * .02) rgba(255, 170, 40, .75); }
.sl-convoy .sl-stage:not(.cv-run) .sl-cell.scatter::after { box-shadow: 0 0 calc(var(--cell) * .16) calc(var(--cell) * .02) rgba(110, 200, 255, .8); }
.sl-convoy .sl-stage:not(.cv-run) .sl-cell.valued:not(.scatter)::after { box-shadow: 0 0 calc(var(--cell) * .12) rgba(255, 210, 110, .6); }
@keyframes cv-halo { from { opacity: .45; } to { opacity: 1; } }
/* a winning tile gets a gold frame (instead of the shared machine's glow over the symbol) */
.sl-convoy .sl-stage:not(.cv-run) .sl-cell.hit::before, .sl-convoy .sl-stage:not(.cv-run) .sl-cell.hit2::before { inset: 2.5%; z-index: 1; border-radius: 7%; background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 40%); box-shadow: inset 0 0 0 calc(var(--cell) * .03) #ffd45c, inset 0 0 calc(var(--cell) * .1) rgba(255, 190, 60, .55), 0 0 calc(var(--cell) * .14) rgba(255, 190, 60, .8); }
.sl-convoy .sl-stage:not(.cv-run) .sl-cell.hit .sl-sym, .sl-convoy .sl-stage:not(.cv-run) .sl-cell.hit2 .sl-sym { animation: none; filter: brightness(1.12) drop-shadow(0 calc(var(--cell) * .02) calc(var(--cell) * .03) rgba(0, 0, 0, .8)); }
.sl-convoy .sl-shine { inset: 2.5%; border-radius: 7%; -webkit-mask: none; mask: none; }
.sl-convoy .sl-cell.valued .cv-v { bottom: 8%; z-index: 2; }
.sl-convoy .sl-cell.blank .sl-sym { filter: brightness(.85); }
.sl-convoy .sl-cell.wild .sl-tag { z-index: 2; bottom: 7%; background: linear-gradient(180deg, #ffe08a, #f5a524 55%, #b8650b); color: #2a1300; box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.sl-convoy .sl-cell .cv-v { position: absolute; inset: auto; left: 50%; bottom: 6%; transform: translateX(-50%); display: block; padding: .26em .5em .28em; border-radius: 999px; background: linear-gradient(180deg, rgba(22, 16, 4, .92), rgba(8, 6, 2, .92)); box-shadow: inset 0 0 0 1px rgba(255, 200, 90, .55), 0 2px 6px rgba(0, 0, 0, .5); font: 800 max(10px, calc(var(--cell) * .17))/1 var(--font-display); letter-spacing: -.02em; color: #ffd45c; text-shadow: none; white-space: nowrap; }
/* a paying line pulses with energy */
.sl-convoy .sl-lines polyline { stroke: #ffcf6a; stroke-dasharray: 16 9; animation: cv-dash .45s linear infinite; filter: drop-shadow(0 0 6px #ffb347) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
@keyframes cv-dash { to { stroke-dashoffset: -25; } }
/* a reel that could still finish the trigger crackles */
.sl-convoy .sl-reel.tease { background: linear-gradient(180deg, rgba(120, 220, 255, .16), transparent 35%, transparent 65%, rgba(120, 220, 255, .16)); box-shadow: inset 0 0 0 2px rgba(150, 235, 255, .9), inset 0 0 30px rgba(120, 220, 255, .45); animation: cv-crackle .16s steps(2) infinite; }
@keyframes cv-crackle { 50% { box-shadow: inset 0 0 0 2px rgba(220, 250, 255, 1), inset 0 0 44px rgba(150, 235, 255, .7); } }

/* ----- the Run: the cargo hold's board, sunk into a riveted steel panel */
.sl-stage.cv-run .sl-frame { padding: 10px; border-width: 3px; background: radial-gradient(circle at 10px 10px, rgba(255, 255, 255, .22) 0 2px, transparent 2.6px) 0 0 / 34px 34px, linear-gradient(180deg, #2b3038, #1a1d22 60%, #22262c) padding-box, linear-gradient(160deg, var(--f1), var(--f2) 22%, var(--f3) 46%, var(--f2) 70%, var(--f1)) border-box; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 6px rgba(201, 138, 43, .12), 0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 60px -18px var(--accent); }
.sl-stage.cv-run .sl-reels { background: #0b0d10; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .8); }
.sl-stage.cv-run .sl-reel + .sl-reel { box-shadow: none; }
.sl-stage.cv-run .sl-cell { overflow: hidden; }
.sl-stage.cv-run .sl-cell.void { background: url(/casino/slots/convoy/socket.webp) center / 94% no-repeat; }
.sl-stage.cv-run .sl-cell.void::after { content: none; }
/* a spot spinning: blurred symbols run down it like a little reel, shaded top and bottom */
.cv-rolling { filter: none; }
.cv-rolling::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(4, 6, 9, .8), rgba(4, 6, 9, 0) 32%, rgba(4, 6, 9, 0) 68%, rgba(4, 6, 9, .8)); }
.cv-roll { position: absolute; left: 0; right: 0; top: 0; height: 1000%; display: flex; flex-direction: column; filter: blur(1.3px) brightness(.85) saturate(.85); will-change: transform; }
.cv-roll img { width: 100%; height: 10%; object-fit: contain; padding: 9%; opacity: .85; transform: scaleY(1.12); }
/* a locked row: a rolling steel shutter over the socket */
.cv-lock .cv-shutter { position: absolute; inset: 2%; z-index: 1; background: url(/casino/slots/convoy/shutter.webp) center / 100% 100% no-repeat; box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }

/* a cash token: the brass ring with its value glowing in the amber glass */
.cv-tok { display: grid; place-items: center; }
.cv-tok .cv-ti { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 calc(var(--cell) * .04) calc(var(--cell) * .05) rgba(0, 0, 0, .65)); }
.cv-tv { position: absolute; inset: 0; display: grid; place-items: center; font: 900 calc(var(--cell) * var(--fs, .24))/1 var(--font-display); letter-spacing: -.04em; color: #fffaf0; white-space: nowrap; text-shadow: 0 0 calc(var(--cell) * .08) rgba(255, 150, 30, .95), 0 calc(var(--cell) * .015) 0 #5a2c00, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.cv-tok.spent { filter: brightness(.38) saturate(.4); transition: filter .25s; }

/* a crew card: the gunmetal and brass frame (frame.webp), the face behind its glass, tinted in the crew's color, the
   value over the face and the name engraved on the brass plate */
.cv-card { --tint: #ffb347; }
.cv-cbox { position: absolute; inset: 3%; }
.cv-cfr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--cell, 80px) * .045) calc(var(--cell, 80px) * .06) rgba(0, 0, 0, .7)); }
.cv-cwin { position: absolute; left: 11%; right: 11%; top: 11%; bottom: 16%; border-radius: 9%; overflow: hidden; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--tint) 60%, #000), #050607 80%); }
.cv-cwin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.cv-cwin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 34%), linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(4, 6, 9, .85) 96%); box-shadow: inset 0 0 calc(var(--cell, 80px) * .08) rgba(0, 0, 0, .8); }
.cv-cname { position: absolute; left: 19%; right: 19%; top: 85.4%; height: 10.6%; z-index: 1; display: grid; place-items: center; overflow: hidden; white-space: nowrap; font: 900 calc(var(--cell, 80px) * .082)/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: #2b1a04; text-shadow: 0 1px 0 rgba(255, 236, 180, .55), 0 -1px 0 rgba(0, 0, 0, .25); }
.cv-cval { position: absolute; left: 11%; right: 11%; top: 58%; z-index: 1; text-align: center; font: 900 calc(var(--cell, 80px) * var(--fs, .21))/1 var(--font-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 0 calc(var(--cell, 80px) * .07) var(--tint), 0 2px 0 rgba(0, 0, 0, .85); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-card.armored .cv-cbox { filter: drop-shadow(0 0 calc(var(--cell) * .07) rgba(255, 212, 92, .95)); }
.cv-card .cv-armor { position: absolute; top: 3%; left: 50%; z-index: 2; transform: translateX(-50%); padding: .22em .55em; border-radius: .3em; font: 900 max(7px, calc(var(--cell) * .075))/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #2a1500; background: linear-gradient(110deg, #c9902c 0%, #fff1c2 35%, #e9a53a 50%, #fff1c2 65%, #c9902c 100%) 0 0 / 300% 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, .6); animation: cv-sheen 2.4s linear infinite; }
@keyframes cv-sheen { to { background-position: -300% 0; } }
.cv-card.spent .cv-cbox { filter: brightness(.38) saturate(.4); transition: filter .25s; }

/* ----- the effects layers over the stage */
.cv-fxc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.cv-fxl { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.cv-fxl > * { position: absolute; left: 0; top: 0; }

/* a crew member bursting out of their card to act: light rays behind, the face big, the name and value */
.cv-reveal { --tint: #ffb347; width: var(--s); height: var(--s); transform: translate(-50%, -50%); }
.cv-rays { position: absolute; left: 50%; top: 50%; width: 270%; height: 270%; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tint) 60%, transparent) 0deg 7deg, transparent 7deg 19deg); -webkit-mask: radial-gradient(circle, #000 16%, transparent 64%); mask: radial-gradient(circle, #000 16%, transparent 64%); animation: cv-spin 7s linear infinite; mix-blend-mode: screen; }
.cv-glow { position: absolute; left: 50%; top: 50%; width: 190%; height: 190%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tint) 55%, transparent), transparent 62%); mix-blend-mode: screen; }
@keyframes cv-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cv-reveal .cv-cbox { inset: 0; --cell: var(--s); }
.cv-reveal .cv-cfr { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .8)) drop-shadow(0 0 26px color-mix(in srgb, var(--tint) 80%, transparent)); }
.cv-reveal .cv-cwin img { will-change: transform; }
.cv-reveal .cv-cval { --fs: .17; top: 60%; }
.cv-badge { position: absolute; right: -10%; top: -10%; z-index: 3; min-width: 38%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font: 900 calc(var(--s) * .15)/1 var(--font-display); color: #fff; background: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--tint) 60%, #fff), var(--tint) 55%, color-mix(in srgb, var(--tint) 50%, #000)); box-shadow: 0 0 0 3px #1b1f24, 0 0 0 5px #d4d9e0, 0 0 30px var(--tint); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.cv-reveal.armored .cv-cfr { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .8)) drop-shadow(0 0 30px rgba(255, 212, 92, .95)); }
.cv-reveal .cv-armor { position: absolute; left: 50%; top: -7%; z-index: 3; transform: translateX(-50%); padding: .3em .8em; border-radius: .35em; font: 900 calc(var(--s) * .075)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #2a1500; background: linear-gradient(110deg, #c9902c 0%, #fff1c2 35%, #e9a53a 50%, #fff1c2 65%, #c9902c 100%) 0 0 / 300% 100%; box-shadow: 0 0 0 2px #1b1f24, 0 3px 8px rgba(0, 0, 0, .6); animation: cv-sheen 1.6s linear infinite; }

/* numbers in flight and numbers that pop off a spot */
.cv-fnum { font: 900 var(--fs, 24px)/1 var(--font-display); letter-spacing: -.03em; color: #fff4d4; white-space: nowrap; text-shadow: 0 0 12px rgba(255, 170, 40, .95), 0 0 2px #000, 0 2px 0 rgba(60, 30, 0, .8); will-change: transform; transform-origin: 50% 50%; }
.cv-fnum.c-green { color: #e6fff2; text-shadow: 0 0 12px rgba(70, 230, 150, .95), 0 0 2px #000, 0 2px 0 rgba(0, 50, 20, .8); }
.cv-fnum.c-red { color: #fff0f0; text-shadow: 0 0 12px rgba(255, 70, 90, .95), 0 0 2px #000, 0 2px 0 rgba(60, 0, 10, .8); }
.cv-fnum.c-pink { color: #fff0f6; text-shadow: 0 0 14px rgba(255, 60, 140, .95), 0 0 2px #000, 0 2px 0 rgba(60, 0, 30, .8); }
.cv-fnum.big { --fs: 44px; }
/* targeting brackets and the sniper's reticle */
.cv-brk { width: var(--w); height: var(--w); transform: translate(-50%, -50%); --c: #ff3d7f; }
.cv-brk i { position: absolute; width: 30%; height: 30%; border: 0 solid var(--c); filter: drop-shadow(0 0 6px var(--c)); }
.cv-brk i:nth-child(1) { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 6px; }
.cv-brk i:nth-child(2) { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 6px; }
.cv-brk i:nth-child(3) { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 6px; }
.cv-brk i:nth-child(4) { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 6px; }
.cv-ret { width: var(--w); height: var(--w); transform: translate(-50%, -50%); }
.cv-ret svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #ff4a3d; stroke-width: 2.4; filter: drop-shadow(0 0 5px #ff4a3d); }
/* a big title slamming onto the screen */
.cv-slam { width: 100%; top: 44%; display: grid; justify-items: center; gap: 6px; transform: translateY(-50%); text-align: center; }
.cv-slam b { font: 900 clamp(46px, 8.5vw, 124px)/.9 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; background: linear-gradient(180deg, #fffbe6 0%, #ffe08a 30%, #f5a524 58%, #a35400 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #2a1400; filter: drop-shadow(0 5px 0 #2a1400) drop-shadow(0 16px 26px rgba(0, 0, 0, .75)); }
.cv-slam span { font: 800 clamp(13px, 1.6vw, 19px)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #ffe2a8; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
/* a light sweeping across a row that just opened */
.cv-sweep { height: var(--h); background: linear-gradient(90deg, rgba(255, 230, 170, 0), rgba(255, 240, 200, .75) 45%, rgba(255, 255, 255, .95) 50%, rgba(255, 240, 200, .75) 55%, rgba(255, 230, 170, 0)) 0 0 / 40% 100% no-repeat; mix-blend-mode: screen; }
/* the truck driving a row, a flying item */
.cv-drive, .cv-item { object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 16px rgba(255, 179, 71, .55)); will-change: transform; }
.cv-carry { font: 900 18px/1 var(--font-display); color: #fff4d4; padding: .3em .6em; border-radius: .4em; background: rgba(8, 10, 13, .85); box-shadow: inset 0 0 0 1.5px #ffb347, 0 0 14px rgba(255, 179, 71, .6); white-space: nowrap; transform: translate(-50%, -100%); }

/* the total's plaque */
.cv-plq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .8)); }
.cv-glass { position: absolute; left: 16.4%; right: 16.7%; top: 23.4%; bottom: 30.1%; display: grid; place-items: center; align-content: center; gap: 2px; }
.cv-glass span { font: 800 clamp(9px, 1vw, 13px)/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 210, 140, .85); }
.cv-glass b { font: 900 clamp(24px, 4.4vw, 56px)/1 var(--font-display); letter-spacing: -.03em; color: #ffe9b0; text-shadow: 0 0 18px rgba(255, 160, 40, .95), 0 0 3px #000; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the total win: the armored plaque, its number in heavy gold, cash firing out of both sides */
.sl-over.cv-tot { background: radial-gradient(70% 70% at 50% 50%, rgba(10, 12, 18, .55), rgba(3, 5, 8, .92)); }
.cv-total { position: relative; width: min(820px, 94%, calc(46vh * 1.78)); display: grid; justify-items: center; gap: 4px; transform-origin: 50% 46%; }
.cv-total .cv-trays { position: absolute; left: 50%; top: 48%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 200, 90, .2) 0deg 6deg, rgba(255, 200, 90, 0) 6deg 16deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); animation: cv-spin 14s linear infinite; pointer-events: none; }
.cv-total .cv-kick { position: relative; font: 900 clamp(16px, 2.2vw, 28px)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #ffe2a8; text-shadow: 0 0 18px rgba(255, 170, 60, .8), 0 3px 0 #2a1400; }
.cv-plq { position: relative; width: 100%; aspect-ratio: 900 / 505; }
.cv-plq .cv-glass b { font-size: clamp(36px, 7.4vw, 100px); background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%) 160% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fffbe6 0%, #ffe08a 32%, #f5a524 60%, #a35400 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #3a1d00; text-shadow: none; filter: drop-shadow(0 4px 0 #2a1400) drop-shadow(0 0 22px rgba(255, 170, 40, .65)); animation: cv-shine 2.4s ease-in-out infinite; }
@keyframes cv-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.cv-plq .cv-lamp { position: absolute; width: 4.2%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff2c4, #ff9a1a 45%, rgba(255, 120, 0, 0) 70%); animation: cv-blink .5s steps(2) infinite; mix-blend-mode: screen; }
.cv-plq .cv-lamp:nth-of-type(2n) { animation-delay: .25s; }
@keyframes cv-blink { 50% { opacity: .15; } }
.cv-total .cv-tier { position: relative; margin-top: -2%; font: 900 clamp(28px, 4.6vw, 62px)/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #ffffff, #ffd45c 50%, #e07a00); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #2a1400; filter: drop-shadow(0 4px 0 #2a1400) drop-shadow(0 0 20px rgba(255, 170, 40, .6)); }
.cv-total .cv-x { position: relative; font: 700 15px/1 var(--font-display); color: rgba(255, 226, 168, .8); }
/* each rung of the win ladder has its own colour, and the light behind the plaque turns faster and brighter */
.cv-total[data-tier="2"] .cv-tier { background-image: linear-gradient(180deg, #fff6e0, #ffb347 48%, #e0560a); }
.cv-total[data-tier="3"] .cv-tier { background-image: linear-gradient(180deg, #ffe9e0, #ff6a4a 48%, #b3120a); }
.cv-total[data-tier="4"] .cv-tier { background-image: linear-gradient(180deg, #ffffff, #7fe3ff 48%, #1478c8); }
.cv-total[data-tier="5"] .cv-tier, .cv-total[data-tier="6"] .cv-tier { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ffffff, #ffe08a 40%, #ffb000 62%, #8a4a00); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: cv-shine 1.6s ease-in-out infinite; }
.cv-total[data-tier="2"] .cv-trays { animation-duration: 10s; }
.cv-total[data-tier="3"] .cv-trays { animation-duration: 7s; filter: brightness(1.35); }
.cv-total[data-tier="4"] .cv-trays { animation-duration: 5s; filter: brightness(1.6); }
.cv-total[data-tier="5"] .cv-trays, .cv-total[data-tier="6"] .cv-trays { animation-duration: 3.6s; filter: brightness(1.9); }

/* ----- blast doors that slam shut over the reels between the road and the Run */
.cv-doors { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cv-door { position: absolute; top: 0; bottom: 0; width: 50.4%; transform: translateX(-102%); background: url(/casino/slots/convoy/doors.webp) 0 50% / 200% 100% no-repeat, #2a2e35; box-shadow: inset 0 0 40px rgba(0, 0, 0, .55); }
.cv-door.l { left: 0; }
.cv-door.r { right: 0; transform: translateX(102%); background-position: 100% 50%; }
.cv-wheel { position: absolute; left: 50%; top: 50%; width: min(36%, 210px); aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%) scale(0); background: url(/casino/slots/convoy/vault.webp) center / contain no-repeat; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .8)) drop-shadow(0 0 20px rgba(255, 179, 71, .55)); }

/* the white-hot flare the cut between the road and the Run passes through (convoy.js crossCut) */
.cv-veil { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: radial-gradient(55% 60% at 50% 48%, #fffaf0 0%, #ffe3a3 30%, rgba(255, 176, 64, .92) 62%, rgba(60, 28, 6, .96) 100%); }

/* ----- the hold's dashboard: the speedometer and the haul on the left of the truck, respins and rows on the right */
.cv-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cv-side { position: absolute; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; width: 190px; }
.cv-side.l { right: calc(100% + 18px); }
.cv-side.r { left: calc(100% + 18px); }
.cv-gauge { position: relative; width: 100%; aspect-ratio: 1217 / 1229; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .75)); }
.cv-gauge .cv-dial, .cv-gauge .cv-hub, .cv-gauge .cv-ndl { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-gauge .cv-ndl { overflow: visible; }
.cv-needle { transform-origin: 50px 49.8px; transform: rotate(-131deg); transition: transform .9s cubic-bezier(.3, 1.6, .45, 1); }
.cv-nglow { fill: rgba(255, 90, 40, .55); filter: blur(1.2px); }
/* the dial's own chrome hub cap, restacked above the needle (the picture clipped to the cap) */
.cv-gauge .cv-hub { -webkit-mask: radial-gradient(circle at 50% 49.8%, #000 4.3%, transparent 4.8%); mask: radial-gradient(circle at 50% 49.8%, #000 4.3%, transparent 4.8%); }
/* the reading, in the dial's little window */
.cv-gread { position: absolute; left: 50%; top: 76.3%; transform: translate(-50%, -50%); font: 900 clamp(13px, 1.5vw, 22px)/1 var(--font-display); letter-spacing: .02em; color: #ffb347; text-shadow: 0 0 8px rgba(255, 140, 30, .95), 0 0 2px #000; font-variant-numeric: tabular-nums; }
/* the panels: the generated display housing, its glass window holds the reading */
.cv-panel.cv-hot { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(255, 170, 50, .65)); }
.cv-panel { position: relative; width: 100%; aspect-ratio: 900 / 466; background: url(/casino/slots/convoy/panel.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)); }
.cv-pg { position: absolute; left: 8.4%; right: 10.8%; top: 23.2%; bottom: 26.6%; display: grid; place-items: center; align-content: center; gap: 3px; }
.cv-pg span { font: 800 9.5px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 210, 140, .8); }
.cv-pg b { display: flex; align-items: center; gap: 6px; font: 900 21px/1 var(--font-display); letter-spacing: -.02em; color: #ffe9b0; text-shadow: 0 0 12px rgba(255, 160, 40, .9); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-pg b .coin { width: 16px; height: 16px; }
.cv-pg b i { font-style: normal; }
.cv-lamps { display: flex; gap: 9px; }
.cv-lamps i { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a2a10, #1c1006); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .2s, box-shadow .2s; }
.cv-lamps i.on { background: radial-gradient(circle at 40% 35%, #fff2c4, #ffb347 45%, #c2560e); box-shadow: 0 0 12px rgba(255, 179, 71, .95); }
.cv-rowbar { display: flex; gap: 4px; }
.cv-rowbar i { width: 12px; height: 7px; border-radius: 2px; background: #2b2216; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .3s, box-shadow .3s; }
.cv-rowbar i.on { background: linear-gradient(180deg, #ffe08a, #e08a12); box-shadow: 0 0 8px rgba(255, 179, 71, .9); }

/* ----- the Run's intro: the crew lined up */
.sl-over.cv-intro-over { background: radial-gradient(70% 70% at 50% 45%, rgba(8, 10, 14, .55), rgba(3, 5, 8, .9)); }
.cv-intro { display: grid; justify-items: center; gap: 4px; width: min(860px, 94%); padding: 18px 12px; }
.cv-intro .sl-huge { font: 900 clamp(48px, 7.5vw, 104px)/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #fffbe6 0%, #ffe08a 30%, #f5a524 58%, #a35400 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #2a1400; filter: drop-shadow(0 5px 0 #2a1400) drop-shadow(0 14px 22px rgba(0, 0, 0, .7)); }
.cv-intro .sl-kick { color: #ffd27a; letter-spacing: .2em; }
.cv-intro .cv-perks { font: 700 14px/1.4 var(--font-display); color: rgba(255, 226, 168, .9); letter-spacing: .02em; }
.cv-crew { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 14px 0 8px; }
.cv-crew > div { --tint: #ffb347; display: grid; justify-items: center; gap: 6px; text-align: center; animation: cv-cardin .5s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--n) * 90ms + 250ms); }
@keyframes cv-cardin { from { opacity: 0; transform: translateY(26px) scale(.8) rotate(-4deg); } }
.cv-crew .cv-cface { position: relative; width: 100%; aspect-ratio: 1; --cell: min(12vw, 110px); }
.cv-crew .cv-cface .cv-cbox { inset: 0; }
.cv-crew small { font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .66); }
/* the paytable's crew */
.cv-pt-crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 6px; text-align: left; }
.cv-pt-crew > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2, rgba(127, 127, 127, .08)); box-shadow: inset 0 0 0 1px var(--line); }
.cv-pt-crew img { grid-row: span 2; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; object-position: 50% 12%; }
.cv-pt-crew b { font: 800 13px/1.1 var(--font-display); color: var(--text); }
.cv-pt-crew small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* ----- the bar under the truck: heavier metal, a bigger spin button, the mode switch and Double chance */
.sl-convoy .sl-bar { background: linear-gradient(180deg, #1a1d22, #0a0c0f); border-top: 1px solid rgba(201, 138, 43, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.sl-convoy .sl-spin { width: 74px; height: 74px; color: #1a0e00; background: radial-gradient(circle at 50% 30%, #ffe3a1, #f5a524 50%, #a35f0b); box-shadow: 0 0 0 4px #23272d, 0 0 0 6px rgba(201, 138, 43, .55), 0 12px 26px -8px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .25); }
.sl-convoy .sl-round { border-color: rgba(201, 138, 43, .3); background: linear-gradient(180deg, #23272d, #14171b); }
.sl-convoy .sl-buy { background: linear-gradient(180deg, #2a2216, #17120b); }
.sl-ante { height: 48px; padding: 0 14px 0 12px; border-radius: 13px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--sl-line); background: #0c1016; color: #fff; text-align: left; white-space: nowrap; transition: border-color .2s, background .2s; }
.sl-ante i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .2s; flex: none; }
.sl-ante i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--spring); }
.sl-ante span { display: grid; gap: 2px; }
.sl-ante b { font-size: 13px; font-weight: 700; }
.sl-ante small { font-size: 11px; color: var(--sl-dim); }
.sl-ante.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, #0c1016); }
.sl-ante.on i { background: var(--accent); }
.sl-ante.on i::after { transform: translateX(12px); }
.sl-ante:disabled { opacity: .55; }
.sl-mode { display: inline-flex; padding: 3px; border-radius: 12px; border: 1px solid var(--sl-line); background: #0c1016; }
.sl-mode button { height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--sl-dim); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; transition: background .2s, color .2s; }
.sl-mode button.on { background: linear-gradient(180deg, #3a2c16, #22190c); color: #ffd45c; box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .55); }
.sl-mode button[data-mode="armored"].on { background: linear-gradient(180deg, #4a3a1c, #2a1f0c); color: #fff2c4; }
.sl-mode button:disabled { opacity: .6; }

@media (max-width: 1100px) {
  .sl-convoy .sl-top { position: relative; left: auto; top: auto; transform: none; padding: 10px 0 0; }
  .sl-convoy .sl-board { padding: 4px 10px 2px; }
  .sl-convoy .sl-stage.cv-run .sl-board { padding-top: 78px; }
  .cv-side { top: auto; bottom: calc(100% + 8px); transform: none; width: auto; display: flex; align-items: stretch; gap: 6px; }
  .cv-side.l { right: auto; left: 0; }
  .cv-side.r { left: auto; right: 0; }
  .cv-gauge { width: 74px; flex: none; }
  .cv-gread { font-size: 11px; }
  .cv-panel { width: 132px; }
  .cv-pg b { font-size: 15px; }
  .cv-pg span { font-size: 8px; }
  .cv-panel.rows { display: none; }
  .cv-crew { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sl-ante { grid-area: buy; justify-self: start; margin-left: 112px; height: 44px; padding: 0 10px; }
  .sl-ante small { display: none; }
  .sl-mode { grid-area: buy; justify-self: end; }
  .sl-mode button { height: 36px; padding: 0 9px; font-size: 11.5px; }
  .cv-panel { width: 104px; }
  .cv-pg b { font-size: 12px; }
  .cv-lamps i { width: 10px; height: 10px; }
  .cv-crew { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cv-crew small { display: none; }
  .cv-pt-crew { grid-template-columns: 1fr; }
}