/* ============================================================
Chronos.Pit.Slot - slot machine UI module styles (v3)
- 5 reels × 3 visible rows (CloverPit layout)
- Static gold/violet bevel (no spinning conic, that read as "ugly")
- Outcome-tied symbol arrangement (server-built grid)
- No payline highlight line - naturally the middle row is where the
reveal lives, but it isn't visually marked (user feedback)
============================================================ */
.pit-frame {
--pit-violet: #7C3AED;
--pit-violet-deep: #4C1D95;
--pit-violet-soft: rgba(124, 58, 237, 0.18);
--pit-violet-ink: #1A0F35;
--pit-gold: #FFD700;
--pit-gold-soft: #FFF1A8;
--pit-gold-dim: #B8860B;
--pit-gold-deep: #8B6914;
--pit-velvet: #1A0E2E;
--pit-velvet-deep: #0B0617;
--pit-text: #F5F3FF;
--pit-text-dim: #C8BFE0;
/* Per-type symbol palette. The six reel glyphs used to all be the same gold,
which strobed against the black reels. Each type now owns a hue - grouped
loosely (cool = time/gem, warm = premium/fire, green = luck) so the grid
reads as variety, not noise. Painted via CSS mask (see .pit-symbol-icon). */
--sym-clock: #7FB3FF; /* time - cornflower */
--sym-hourglass: #B98CFF; /* time - amethyst */
--sym-diamond: #4BD6DE; /* gem - turquoise */
--sym-clover: #5FD689; /* luck - emerald */
--sym-star: #FFC94A; /* prime - warm gold */
--sym-flame: #FF7E54; /* fire - coral */
/* Fluid geometry: sizes track the frame's OWN width via container-query
units (see container-type below), so the machine scales smoothly with the
space it is given - single mode (viewport-driven width) AND the Pro 5x grid
(column-driven width) both fall out of this one formula, no per-mode px.
JS reads the live cell offsetHeight per spin, so the landing math stays
correct at any resolved size. clamp() floors keep symbols legible; ceilings
match the old 27"+ breakpoint sizes. */
--pit-row-h: clamp(32px, 12.2cqw, 120px); /* one cell of a reel */
--pit-reel-h: calc(var(--pit-row-h) * 3); /* always exactly 3 cells */
--pit-symbol-size: clamp(22px, 8.9cqw, 92px);
--pit-radius: 24px;
position: relative;
/* Query container: the cqw geometry above resolves against THIS frame's
width, not the viewport - so single mode and the Pro 5x grid share one
sizing formula. */
container-type: inline-size;
/* Fluid width: grows with the viewport up to a cap, shrinks on small screens.
Compact (Pro 5x) overrides this to 100% of its grid column below. */
width: clamp(600px, 50vw, 1000px);
max-width: 100%;
margin: 0 auto;
padding: 0;
/* Background: clean deep-velvet gradient + a single soft violet halo at
top. No yellow radial - that's what bled through and washed text out. */
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124, 58, 237, 0.28), transparent 60%),
linear-gradient(180deg, var(--pit-velvet) 0%, var(--pit-velvet-deep) 100%);
border-radius: var(--pit-radius);
/* Static gold bevel via layered box-shadows - no animations. The outer
layers fake the gold rim, inner layers give depth. */
box-shadow:
/* Inner-most highlight (top edge of gold rim) */
inset 0 2px 0 rgba(255, 241, 168, 0.5),
/* Inner shadow that pushes content back (velvet inset) */
inset 0 0 60px rgba(0, 0, 0, 0.55),
/* Subtle violet halo behind the frame */
0 0 0 1px rgba(255, 215, 0, 0.55),
0 0 0 2px var(--pit-gold-dim),
0 0 0 3px rgba(76, 29, 149, 0.6),
/* Drop shadow under the whole machine */
0 30px 80px rgba(0, 0, 0, 0.7),
/* Soft violet glow outline */
0 0 60px rgba(124, 58, 237, 0.25);
/* Inherit the host's theme font when present; fall back to Inter so the
module still looks right when used standalone (playground). */
font-family: var(--chronos-font-sans, 'Inter', system-ui, sans-serif);
color: var(--pit-text);
/* v0.9.7.1: visible, not hidden - the concept art hangs the corner horns
OFF the cabinet edge, so the frame can no longer clip its children.
Every full-bleed layer that used to lean on this clip now carries its
own border-radius (.pit-overlay, .pit-odds, .pit-lottie-overlay,
.pit-coin-shower). */
overflow: visible;
}
/* No spinning conic anymore - keep ::before for the static gold rim
reinforcement (two-tone metallic gradient that doesn't move). */
.pit-frame::before {
content: '';
position: absolute;
inset: 4px;
border-radius: calc(var(--pit-radius) - 4px);
pointer-events: none;
background: linear-gradient(180deg,
rgba(255, 215, 0, 0.18) 0%,
transparent 12%,
transparent 88%,
rgba(255, 215, 0, 0.12) 100%);
z-index: 0;
}
/* ----------------------------------------------------------------
v0.9.7.2: horn mounts placed BY THE OWNER in the local drag editor
and fetched as coordinates - the numbers below are that placement
converted to cqw, not anyone's eyeballing. Six mounts, three exact
mirrored pairs: shofars bursting out of the top corners, and a
two-piece cluster in each bottom corner (viking standing inside,
engraved tucked underneath poking past the edge). The drinking horn
still arrives as the cornucopia the FX engine tips over the reels
during a coin shower (.pit-cornucopia + pit-horns.ts); the confetti
fountains (pit-confetti.ts) fire from every mounted horn.
Fitting the house style: all five arts are the same flat drawn family,
and the filter below re-lights them for the velvet - shadows sink into
the cabinet, a faint gold rim ties them to the bevel. All geometry is
cqw against the frame (the container). Static transforms live on the
WRAPPER; every animation (recoil, shake) runs on the inner ![]()
, so
the two never fight over one transform.
Stacking: the LAYER carries no z-index so each horn picks its own plane -
the top and edge pairs sit at z2 (over the marquee bg / reel-box rim),
the bottom pair at z1 BEHIND the controls/rail (same z, earlier in DOM),
so a corner horn can never sit on the ODDS button. */
.pit-horns {
position: absolute;
inset: 0;
pointer-events: none;
}
.pit-horn {
position: absolute;
display: block;
filter:
saturate(0.82) brightness(0.92)
drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 10px rgba(255, 215, 0, 0.18));
}
.pit-horn img {
display: block;
width: 100%;
height: auto;
}
/* All six mounts below are the owner's own drag-and-drop placement,
fetched from the local horn editor (640x625 reference; px / 6.4 = cqw).
Do not re-style these by eye - re-run the editor and re-fetch instead. */
/* Top corners: shofars BURSTING out of the corners - rot -158deg, roughly
two thirds of the art outside the outline (editor: x -57.6, y -43.4,
w 71 at 640). */
.pit-horn-tl,
.pit-horn-tr {
top: -6.8cqw;
width: clamp(36px, 11.1cqw, 112px);
z-index: 2;
}
.pit-horn-tl {
left: -9cqw;
transform: scaleX(-1) rotate(-158deg);
}
.pit-horn-tr {
right: -9cqw;
transform: rotate(-158deg);
}
/* Bottom-corner clusters, outer piece: engraved horns tucked under the
vikings, poking past the bottom edge (editor: right x 598.7, y 573.8,
rot 20). Rendered BEFORE the vikings in DOM so they sit underneath. */
.pit-horn-bl2,
.pit-horn-br2 {
bottom: -2cqw;
width: clamp(30px, 10cqw, 100px);
opacity: 0.95;
z-index: 2;
}
.pit-horn-bl2 {
left: -3.4cqw;
transform: scaleX(-1) rotate(20deg);
}
.pit-horn-br2 {
right: -3.4cqw;
transform: rotate(20deg);
}
/* Bottom-corner clusters, inner piece: viking horns standing in the
corners (editor: right x 566, y 556.5, rot -100). */
.pit-horn-bl,
.pit-horn-br {
bottom: 0.7cqw;
width: clamp(30px, 10cqw, 100px);
opacity: 0.95;
z-index: 2;
}
.pit-horn-bl {
left: 1.56cqw;
transform: scaleX(-1) rotate(-100deg);
}
.pit-horn-br {
right: 1.56cqw;
transform: rotate(-100deg);
}
/* Per-art palette corrections (see docs/UiUxDesign comparison): kept for
the two NEW arts even while they sit on the bench (img/horn-viking.png,
img/horn-engraved.png) - remounting one is a markup-only change. Warm
the grey-violet viking toward the terracotta family, pull the
near-white engraved down so it glows with the trio instead of over it.
On the img, so the wrapper's shared re-light stays untouched. */
.pit-horn-viking img {
filter: sepia(0.22) hue-rotate(-8deg) saturate(1.1);
}
.pit-horn-engraved img {
filter: brightness(0.9) saturate(1.08);
}
/* Idle glint: a gold sheen sweeping INSIDE the horn silhouette - the overlay
is masked by the same art, so the light never spills past the outline. The
FX engine (pit-horns.ts) arms .pit-horn-glint on one horn at a time. */
.pit-horn::after {
content: '';
position: absolute;
inset: 0;
opacity: 0;
background: linear-gradient(115deg,
transparent 32%,
rgba(255, 241, 168, 0.9) 50%,
transparent 68%);
background-size: 260% 100%;
background-position: 130% 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.pit-horn-shofar::after {
-webkit-mask-image: url(img/horn-shofar.png);
mask-image: url(img/horn-shofar.png);
}
.pit-horn-powder::after {
-webkit-mask-image: url(img/horn-powder.png);
mask-image: url(img/horn-powder.png);
}
.pit-horn-drink::after {
-webkit-mask-image: url(img/horn-drink.png);
mask-image: url(img/horn-drink.png);
}
.pit-horn-viking::after {
-webkit-mask-image: url(img/horn-viking.png);
mask-image: url(img/horn-viking.png);
}
.pit-horn-engraved::after {
-webkit-mask-image: url(img/horn-engraved.png);
mask-image: url(img/horn-engraved.png);
}
/* The mirrored mounts flip the wrapper, and the ::after rides the wrapper,
so the glint sweep direction flips with the art - correct for free. */
.pit-horn-glint::after {
animation: pit-horn-glint 0.8s ease-out 1;
}
@keyframes pit-horn-glint {
0% { opacity: 0; background-position: 130% 0; }
25% { opacity: 0.85; }
100% { opacity: 0; background-position: -30% 0; }
}
/* Spin recoil: the whole rack flinches once when the reels take off. */
.pit-horns-kick .pit-horn img {
animation: pit-horn-kick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes pit-horn-kick {
0% { transform: none; }
30% { transform: rotate(6deg) scale(0.96); }
100% { transform: none; }
}
/* Celebration: horns rattle and warm up while the coins fall. */
.pit-horns-celebrate .pit-horn {
filter:
saturate(1) brightness(1.05)
drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 16px rgba(255, 215, 0, 0.55));
}
.pit-horns-celebrate .pit-horn img {
animation: pit-horn-shake 0.5s ease-in-out 3;
}
@keyframes pit-horn-shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* The cornucopia: the FX engine drops the open drinking horn over the reels,
tipped so the mouth pours with the coin shower, then it fades with it. */
.pit-cornucopia {
position: absolute;
top: 4%;
left: 50%;
width: clamp(70px, 13cqw, 128px);
transform-origin: 62% 38%;
filter:
saturate(0.9)
drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 18px rgba(255, 215, 0, 0.45));
animation: pit-cornucopia 2.4s ease-in-out 1 both;
}
.pit-cornucopia-big {
width: clamp(90px, 17cqw, 164px);
}
@keyframes pit-cornucopia {
0% { opacity: 0; transform: translate(-50%, -46%) rotate(96deg) scale(0.8); }
16% { opacity: 1; transform: translate(-50%, 0) rotate(128deg) scale(1); }
30% { transform: translate(-50%, 0) rotate(118deg); }
44% { transform: translate(-50%, 0) rotate(130deg); }
58% { transform: translate(-50%, 0) rotate(120deg); }
72% { transform: translate(-50%, 0) rotate(128deg); }
100% { opacity: 0; transform: translate(-50%, -30%) rotate(100deg) scale(0.9); }
}
/* Tight machines: corner horns are the cabinet's centerpiece now (owner
ask), so phones KEEP them - the ~480px media bucket resizes them to trim
weight instead of hiding them. Only ultra-narrow layouts (split-screen,
~300px phones) drop the decoration: below 350px of frame there is no
corner left to decorate. Compact (x5) machines still carry no horns at
all - five decorated cabinets in one row is noise. */
/* Narrow frames step the horns down by CONTAINER width (the machine's own
size is the honest signal - the same 375px phone hands the playground
327px and the real /pit page 296px). The outward overhang is CAPPED in px
here: the /pit page wears an overflow belt, and a proportional -9cqw
overhang would push past the page padding and get sliced. Only genuinely
tiny frames drop the decoration entirely. */
@container (max-width: 470px) {
.pit-horn-tl, .pit-horn-tr { width: 42px; top: -14px; }
.pit-horn-tl { left: -18px; }
.pit-horn-tr { right: -18px; }
.pit-horn-bl2, .pit-horn-br2 { width: 38px; bottom: -8px; }
.pit-horn-bl2 { left: -8px; }
.pit-horn-br2 { right: -8px; }
.pit-horn-bl, .pit-horn-br { width: 38px; }
}
@container (max-width: 330px) {
.pit-horn-tl, .pit-horn-tr { width: 36px; top: -11px; }
.pit-horn-tl { left: -13px; }
.pit-horn-tr { right: -13px; }
.pit-horn-bl2, .pit-horn-br2 { width: 32px; }
.pit-horn-bl, .pit-horn-br { width: 32px; }
}
@container (max-width: 280px) {
.pit-horn { display: none; }
}
.pit-frame-compact .pit-horns { display: none; }
/* ----------------------------------------------------------------
Top marquee - casino sign with LED bulb chain and gold foil text.
Smaller LED-strip animation (shorter cycle, not flashy).
---------------------------------------------------------------- */
.pit-sign {
position: relative;
height: 96px;
margin: 0;
padding: 26px 24px 14px;
text-align: center;
background:
radial-gradient(ellipse at center 110%, rgba(255, 215, 0, 0.22), transparent 65%),
linear-gradient(180deg, rgba(76, 29, 149, 0.85) 0%, rgba(26, 14, 46, 0.95) 100%);
border-bottom: 1px solid rgba(255, 215, 0, 0.45);
border-radius: var(--pit-radius) var(--pit-radius) 0 0;
overflow: hidden;
z-index: 1;
}
/* LED bulb chain along the top edge of the marquee. Repeating linear-
gradient creates the bulbs; chase animation shifts the bright phase. */
.pit-sign::before {
content: '';
position: absolute;
top: 10px;
left: 16px;
right: 16px;
height: 10px;
border-radius: 5px;
background:
repeating-linear-gradient(
90deg,
var(--pit-gold) 0px, var(--pit-gold) 6px,
var(--pit-gold-deep) 6px, var(--pit-gold-deep) 24px
);
box-shadow:
0 0 14px rgba(255, 215, 0, 0.6),
inset 0 1px 0 rgba(255, 247, 194, 0.5),
0 2px 4px rgba(0, 0, 0, 0.5);
background-size: 24px 100%;
animation: pit-led-chase 1.8s linear infinite;
}
@keyframes pit-led-chase {
from { background-position: 0 0; }
to { background-position: 48px 0; }
}
/* Bottom edge gold shimmer line - subtle, not distracting */
.pit-sign::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--pit-gold-dim) 20%,
var(--pit-gold-soft) 50%,
var(--pit-gold-dim) 80%,
transparent 100%);
background-size: 200% 100%;
animation: pit-shimmer 5s linear infinite;
}
@keyframes pit-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.pit-sign-text {
display: inline-block;
margin-top: 14px;
font-size: 30px;
font-weight: 900;
letter-spacing: 0.45em;
background: linear-gradient(180deg,
var(--pit-gold-soft) 0%,
var(--pit-gold) 35%,
var(--pit-gold-dim) 70%,
var(--pit-gold) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 0 30px rgba(255, 215, 0, 0.55),
0 2px 0 rgba(0, 0, 0, 0.5);
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}
/* ----------------------------------------------------------------
Reels area - five glass reels in a deep velvet inset.
3 visible rows per reel. No payline highlight line.
---------------------------------------------------------------- */
/* v0.9.7.0: reels and the drop rail share one body row - reels keep the
left, the per-spin chips stand as the second column on the right. The
rail column is fixed-width (cqw-tracked), so a reveal never reflows the
reels; the body owns the outer margin the reels used to carry. */
.pit-body {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(88px, 17.5cqw, 156px);
gap: clamp(8px, 1.3cqw, 14px);
margin: 28px 28px 16px;
align-items: stretch;
z-index: 1;
}
.pit-reels {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin: 0;
padding: 14px;
/* Deep velvet, not pure black - keeps contrast with the symbols from
vibrating. --pit-velvet -> --pit-velvet-deep instead of the old ~#060310. */
background: linear-gradient(180deg, var(--pit-velvet) 0%, var(--pit-velvet-deep) 100%);
border-radius: 18px;
border: 1px solid rgba(255, 215, 0, 0.25);
box-shadow:
inset 0 10px 28px rgba(11, 6, 23, 0.75),
inset 0 -6px 14px rgba(124, 58, 237, 0.22),
inset 0 2px 0 rgba(255, 215, 0, 0.12),
0 6px 22px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.pit-reel {
position: relative;
height: var(--pit-reel-h);
background:
/* Top/bottom vignette still gives the "behind glass" depth, but tinted to
velvet-deep and lightened so the symbol backdrop reads as deep purple,
not black - the high-contrast black is what made the grid vibrate. */
linear-gradient(180deg,
rgba(11, 6, 23, 0.72) 0%,
rgba(11, 6, 23, 0.18) 15%,
rgba(11, 6, 23, 0) 50%,
rgba(11, 6, 23, 0.18) 85%,
rgba(11, 6, 23, 0.72) 100%),
linear-gradient(180deg, #241640 0%, var(--pit-velvet) 100%);
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 215, 0, 0.18);
box-shadow:
inset 0 0 26px rgba(11, 6, 23, 0.55),
inset 0 1px 0 rgba(255, 215, 0, 0.15);
/* The reel is a sealed box: nothing inside it can affect layout or paint
outside it. On the x5 grid that is 25 boxes, and without this an
invalidation in one of them walks the whole page's paint tree. */
contain: layout paint;
}
.pit-reel-strip {
display: flex;
flex-direction: column;
align-items: center;
/* translate3d, not translateY: the z component keeps the strip on its own
compositor layer, which is the whole reason the spin can run on the GPU
while a Blazor render batch is busy on the main thread. */
transform: translate3d(0, 0, 0);
will-change: transform;
backface-visibility: hidden;
}
.pit-symbol {
height: var(--pit-row-h);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Each glyph is a single-path silhouette painted via CSS mask: the element's
background is the per-type colour token, the mask is the glyph shape. This
replaces six identical gold ![]()
s (which strobed on black) with six hues,
and drops the yellow drop-shadow that was 80% of the shimmer. A faint neutral
shadow stays for legibility on the velvet. */
.pit-symbol-icon {
width: var(--pit-symbol-size);
height: var(--pit-symbol-size);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
background-color: var(--pit-gold-soft); /* fallback before a per-type rule wins */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
pointer-events: none;
user-select: none;
}
/* Per-type mask + hue. mask url() resolves against THIS stylesheet's location
(/_content/Chronos.Pit.Slot/), so a plain relative path is route-safe. */
.pit-symbol[data-symbol="Clock"] .pit-symbol-icon { -webkit-mask-image: url(icons/clock.svg); mask-image: url(icons/clock.svg); background-color: var(--sym-clock); }
.pit-symbol[data-symbol="Hourglass"] .pit-symbol-icon { -webkit-mask-image: url(icons/hourglass.svg); mask-image: url(icons/hourglass.svg); background-color: var(--sym-hourglass); }
.pit-symbol[data-symbol="Diamond"] .pit-symbol-icon { -webkit-mask-image: url(icons/diamond.svg); mask-image: url(icons/diamond.svg); background-color: var(--sym-diamond); }
.pit-symbol[data-symbol="Clover"] .pit-symbol-icon { -webkit-mask-image: url(icons/clover.svg); mask-image: url(icons/clover.svg); background-color: var(--sym-clover); }
.pit-symbol[data-symbol="Star"] .pit-symbol-icon { -webkit-mask-image: url(icons/star.svg); mask-image: url(icons/star.svg); background-color: var(--sym-star); }
.pit-symbol[data-symbol="Flame"] .pit-symbol-icon { -webkit-mask-image: url(icons/flame.svg); mask-image: url(icons/flame.svg); background-color: var(--sym-flame); }
/* During spin: keep symbols CRISP. A subtle brightness/saturation lift conveys
"live" without the old gold glow that smeared across the reels. */
.pit-reel.spinning .pit-symbol-icon {
filter: brightness(1.12) saturate(1.08);
}
/* ----------------------------------------------------------------
v0.9.6.1: per-column life cycle (owner ask - each column expressive).
The motion engine walks every reel through its own beats:
.spinning while the reel flies -> violet energy aura + edge streaks
.landing its roll-out began -> aura hands over to a warm gold ramp
.landed it just seated (600ms) -> one gold impact flash
The CSS fallback path only ever uses .spinning, so with the engine gone the
reels keep the aura for the whole flight and skip the per-column beats -
quieter, never broken.
---------------------------------------------------------------- */
.pit-reel.spinning {
border-color: rgba(124, 58, 237, 0.55);
animation: pit-reel-aura 0.9s ease-in-out infinite;
}
@keyframes pit-reel-aura {
0%, 100% {
box-shadow:
inset 0 0 26px rgba(11, 6, 23, 0.55),
inset 0 0 18px rgba(124, 58, 237, 0.20),
0 0 10px rgba(124, 58, 237, 0.22);
}
50% {
box-shadow:
inset 0 0 26px rgba(11, 6, 23, 0.55),
inset 0 0 30px rgba(124, 58, 237, 0.38),
0 0 22px rgba(124, 58, 237, 0.45);
}
}
/* Speed streaks: the top and bottom edges deepen and stretch while the reel
flies, like glass catching a blur. Pure overlays - no layout, no reflow. */
.pit-reel::before,
.pit-reel::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 26%;
pointer-events: none;
opacity: 0;
transition: opacity 0.18s ease;
z-index: 2;
}
.pit-reel::before {
top: 0;
background: linear-gradient(180deg,
rgba(88, 40, 200, 0.42) 0%,
rgba(124, 58, 237, 0.14) 55%,
rgba(124, 58, 237, 0) 100%);
}
.pit-reel::after {
bottom: 0;
background: linear-gradient(0deg,
rgba(88, 40, 200, 0.42) 0%,
rgba(124, 58, 237, 0.14) 55%,
rgba(124, 58, 237, 0) 100%);
}
/* The streaks BREATHE with the flight - full glare at cruise, gone by the seat.
v0.9.7.6: driven by a keyframe, not by JS. The engine used to write a live
--pit-speed on the reel every frame; a custom property write invalidates
style for the reel AND its 31 symbol children, which on the x5 grid meant
~800 elements recalculated per frame for an opacity ramp. Now the engine
writes --pit-dur ONCE per spin (the reel's own duration) and this animation
rides it, composited, at zero main-thread cost. The percentages track the
profile: pull-back, cruise, roll-out, seat.
The CSS fallback path never sets --pit-dur, so the 2s default carries it. */
.pit-reel.spinning::before,
.pit-reel.spinning::after {
animation: pit-reel-streak var(--pit-dur, 2s) linear both;
}
@keyframes pit-reel-streak {
0% { opacity: 0; }
10% { opacity: 0.85; }
55% { opacity: 1; }
84% { opacity: 0.3; }
100% { opacity: 0; }
}
/* Roll-out: the aura cools into a warm gold ramp - "this one is about to
stop" - and the streaks fade so the landing symbols read crisp. */
.pit-reel.landing {
border-color: rgba(255, 215, 0, 0.45);
animation: pit-reel-landing 0.7s ease-in-out infinite;
}
@keyframes pit-reel-landing {
0%, 100% {
box-shadow:
inset 0 0 26px rgba(11, 6, 23, 0.55),
inset 0 0 16px rgba(255, 215, 0, 0.12),
0 0 10px rgba(255, 215, 0, 0.18);
}
50% {
box-shadow:
inset 0 0 26px rgba(11, 6, 23, 0.55),
inset 0 0 24px rgba(255, 215, 0, 0.22),
0 0 16px rgba(255, 215, 0, 0.30);
}
}
/* The seat: one bright gold impact that decays fast. An animation, so it
overrides the resting box-shadow for exactly its own lifetime and the reel
returns to normal without a second rule. */
.pit-reel.landed {
animation: pit-reel-landed 0.55s cubic-bezier(0.16, 0.9, 0.3, 1) 1;
}
@keyframes pit-reel-landed {
0% {
border-color: var(--pit-gold);
box-shadow:
inset 0 0 34px rgba(255, 215, 0, 0.38),
inset 0 1px 0 rgba(255, 241, 168, 0.5),
0 0 26px rgba(255, 215, 0, 0.55);
}
100% {
border-color: rgba(255, 215, 0, 0.18);
box-shadow:
inset 0 0 26px rgba(11, 6, 23, 0.55),
inset 0 1px 0 rgba(255, 215, 0, 0.15),
0 0 0 rgba(255, 215, 0, 0);
}
}
/* Win: 5-of-5 match on middle row. Symbols pop with bright golden glow. */
.pit-reel.win {
border-color: var(--pit-gold);
box-shadow:
inset 0 0 36px rgba(255, 215, 0, 0.4),
inset 0 1px 0 rgba(255, 241, 168, 0.55),
0 0 32px rgba(255, 215, 0, 0.7);
}
.pit-reel.win .pit-symbol:nth-child(n) .pit-symbol-icon {
/* All visible symbols pulse on win - only the middle is the "real" win,
but lighting up all 3 visible reads as celebratory. */
animation: pit-symbol-pop 0.7s ease-out 2;
}
@keyframes pit-symbol-pop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* Near-miss: amber-shift, no scaling */
.pit-reel.near-miss {
border-color: rgba(255, 165, 0, 0.55);
box-shadow:
inset 0 0 26px rgba(255, 165, 0, 0.22),
0 0 18px rgba(255, 165, 0, 0.3);
}
.pit-reel.near-miss .pit-symbol-icon {
animation: pit-near-miss 1.2s ease-in-out;
}
@keyframes pit-near-miss {
/* Rests at the neutral legibility shadow; flashes amber at the peak so the
"so close" beat still reads without a persistent yellow glow. */
0%, 100% { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
50% { filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.8)); }
}
/* ----------------------------------------------------------------
Per-spin drop rail - the second column right of the reels (v0.9.7.0,
owner ask: the drops moved off the bottom). One fixed card slot per
spin the service sells, so a reveal never grows the machine or moves
a control - empty slots are drawn as dashed sockets with the spin
number. Reveal ENTRY is TS-driven (pit-tactile.ts flags the rail with
.pit-rail-js and springs each card in from the reels); the keyframe
below is the no-JS / reduced-motion fallback.
---------------------------------------------------------------- */
/* The rail wears the cabinet's own chrome (owner ask): the same velvet
window and gold rim as the reel box, with a little DROPS plaque on top -
reels and drops read as two windows of one machine. */
.pit-chip-rail {
display: grid;
grid-template-rows: auto repeat(3, 1fr);
gap: 10px;
padding: 10px 10px 12px;
min-width: 0;
background: linear-gradient(180deg, var(--pit-velvet) 0%, var(--pit-velvet-deep) 100%);
border-radius: 18px;
border: 1px solid rgba(255, 215, 0, 0.25);
box-shadow:
inset 0 10px 28px rgba(11, 6, 23, 0.75),
inset 0 -6px 14px rgba(124, 58, 237, 0.22),
inset 0 2px 0 rgba(255, 215, 0, 0.12),
0 6px 22px rgba(0, 0, 0, 0.4);
}
.pit-chip-rail-title {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.32em;
text-align: center;
padding-top: 2px;
color: var(--pit-gold);
opacity: 0.85;
text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}
.pit-chip,
.pit-chip-empty {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
border-radius: 14px;
overflow: hidden;
}
.pit-chip {
gap: 6px;
padding: 6px 8px;
font-size: clamp(11px, 2.2cqw, 15px);
font-weight: 800;
letter-spacing: 0.04em;
text-align: center;
background: linear-gradient(135deg,
rgba(76, 29, 149, 0.7) 0%,
rgba(124, 58, 237, 0.5) 100%);
border: 1px solid rgba(255, 215, 0, 0.55);
color: var(--pit-gold-soft);
box-shadow:
inset 0 1px 0 rgba(255, 215, 0, 0.22),
0 4px 12px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translateX(-10px) scale(0.92);
animation: pit-chip-pop 0.45s cubic-bezier(0.18, 0.7, 0.25, 1) forwards;
}
/* TS took over: the engine positions and springs the card itself. */
.pit-rail-js .pit-chip {
animation: none;
opacity: 1;
transform: none;
}
@keyframes pit-chip-pop {
to { opacity: 1; transform: translateX(0) scale(1); }
}
/* One bright beat as a revealed card seats - paint only, armed by TS. */
.pit-chip.pit-chip-lit {
box-shadow:
inset 0 1px 0 rgba(255, 241, 168, 0.6),
0 0 26px rgba(255, 215, 0, 0.6),
0 4px 12px rgba(0, 0, 0, 0.5);
}
.pit-chip.tier-jackpot {
background: linear-gradient(135deg, var(--pit-gold) 0%, var(--pit-gold-dim) 100%);
color: var(--pit-velvet-deep);
border-color: var(--pit-gold-soft);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 0 24px rgba(255, 215, 0, 0.85),
0 4px 12px rgba(0, 0, 0, 0.5);
}
.pit-chip.tier-rare {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.55) 0%, rgba(184, 134, 11, 0.55) 100%);
color: var(--pit-gold-soft);
border-color: var(--pit-gold);
}
.pit-chip.tier-xp-big {
background: linear-gradient(135deg, rgba(192, 132, 252, 0.55) 0%, rgba(124, 58, 237, 0.75) 100%);
border-color: rgba(255, 215, 0, 0.65);
}
/* Empty socket: a waiting slot, not an invisible spacer - the round's
three beats stay countable before and during the spin. */
.pit-chip-empty {
border: 1px dashed rgba(255, 215, 0, 0.18);
background: rgba(11, 6, 23, 0.35);
}
.pit-chip-slot-num {
font-size: 12px;
font-weight: 800;
color: rgba(200, 191, 224, 0.32);
font-feature-settings: 'tnum' 1;
}
/* ----------------------------------------------------------------
Controls row - big SPIN chip (carrying the token readout, v0.9.7.0)
and the odds button. The standalone balance block is gone: the number
lives inside the button, abbreviated by the host from 10k up.
---------------------------------------------------------------- */
.pit-controls {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 8px 32px 24px;
gap: 16px;
z-index: 1;
position: relative;
}
.pit-spin-btn {
grid-column: 2;
width: clamp(108px, 23cqw, 208px);
height: clamp(108px, 23cqw, 208px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
border-radius: 50%;
border: 4px solid var(--pit-gold-dim);
background: radial-gradient(circle at 35% 30%, var(--pit-violet) 0%, var(--pit-violet-deep) 70%);
color: var(--pit-gold-soft);
font-weight: 900;
letter-spacing: 0.18em;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease-out, box-shadow 0.2s ease-out, filter 0.15s ease-out;
position: relative;
box-shadow:
inset 0 4px 0 rgba(255, 241, 168, 0.4),
inset 0 -6px 0 rgba(0, 0, 0, 0.45),
0 12px 24px rgba(124, 58, 237, 0.5),
0 0 0 1px rgba(255, 215, 0, 0.35),
0 0 28px rgba(124, 58, 237, 0.5);
}
.pit-spin-btn::before {
content: '';
position: absolute;
inset: 8px;
border-radius: 50%;
border: 1px dashed rgba(255, 215, 0, 0.4);
pointer-events: none;
}
.pit-spin-btn:hover:not(:disabled) {
transform: translateY(-2px) scale(1.02);
filter: brightness(1.1);
box-shadow:
inset 0 4px 0 rgba(255, 241, 168, 0.5),
inset 0 -6px 0 rgba(0, 0, 0, 0.5),
0 16px 32px rgba(124, 58, 237, 0.65),
0 0 0 1px var(--pit-gold),
0 0 40px rgba(255, 215, 0, 0.45);
}
.pit-spin-btn:active:not(:disabled) {
transform: translateY(2px) scale(0.97);
box-shadow:
inset 0 -4px 0 rgba(255, 241, 168, 0.3),
inset 0 6px 12px rgba(0, 0, 0, 0.5),
0 4px 10px rgba(124, 58, 237, 0.4);
}
/* TS press engine (pit-tactile.ts) owns the transform once mounted - the
CSS :hover/:active transforms above stand down so the spring and the
transition never fight over one property. Shadows/filter stay CSS: they
are paint, keyed by the classes the engine arms. */
.pit-spin-btn.pit-tactile-js,
.pit-spin-btn.pit-tactile-js:hover:not(:disabled),
.pit-spin-btn.pit-tactile-js:active:not(:disabled) {
transition: box-shadow 0.12s ease-out, filter 0.12s ease-out;
transform: none;
}
/* Held down: the face sinks, the rim light drops - unmistakably PRESSED. */
.pit-spin-btn.is-pressed:not(:disabled) {
filter: brightness(0.94);
box-shadow:
inset 0 -3px 0 rgba(255, 241, 168, 0.25),
inset 0 8px 16px rgba(0, 0, 0, 0.55),
0 3px 8px rgba(124, 58, 237, 0.35),
0 0 14px rgba(124, 58, 237, 0.35);
}
/* Release beat: one bright ring as the spring pops back over 1.0. */
.pit-spin-btn.is-popped:not(:disabled) {
filter: brightness(1.16);
box-shadow:
inset 0 4px 0 rgba(255, 241, 168, 0.55),
inset 0 -6px 0 rgba(0, 0, 0, 0.45),
0 14px 30px rgba(124, 58, 237, 0.6),
0 0 0 2px var(--pit-gold),
0 0 48px rgba(255, 215, 0, 0.55);
}
.pit-spin-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: grayscale(0.3) brightness(0.9);
}
.pit-spin-label {
font-size: clamp(16px, 4cqw, 34px);
color: var(--pit-gold-soft);
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
.pit-spin-cost {
font-size: clamp(8px, 1.5cqw, 11px);
color: var(--pit-gold);
letter-spacing: 0.24em;
opacity: 0.92;
}
/* The compact token readout riding inside the button. Tight pill, gold
digits, no ceremony - the exact number lives in the button's title. */
.pit-spin-tokens {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 3px;
padding: 3px 10px;
max-width: 82%;
border-radius: 999px;
background: rgba(11, 6, 23, 0.55);
border: 1px solid rgba(255, 215, 0, 0.35);
letter-spacing: 0.02em;
}
.pit-spin-tokens-coin {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, var(--pit-gold-soft), var(--pit-gold-dim));
box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), inset 0 0 0 1px rgba(139, 105, 20, 0.8);
}
.pit-spin-tokens-value {
font-size: clamp(11px, 2.4cqw, 17px);
font-weight: 900;
line-height: 1.2;
color: var(--pit-gold);
text-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
font-feature-settings: 'tnum' 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pit-odds-btn {
grid-column: 3; /* the balance block is gone; column 1 stays an empty counterweight */
justify-self: end;
padding: 13px 20px;
border-radius: 10px;
border: 1px solid rgba(255, 215, 0, 0.35);
background: transparent;
color: var(--pit-text-dim);
font-size: 11px;
letter-spacing: 0.28em;
cursor: pointer;
font-weight: 700;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pit-odds-btn:hover {
background: rgba(255, 215, 0, 0.08);
color: var(--pit-gold);
border-color: rgba(255, 215, 0, 0.65);
}
/* ----------------------------------------------------------------
Result overlay - appears at end of round (jackpot / big win only).
---------------------------------------------------------------- */
.pit-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(11, 6, 23, 0.9);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
animation: pit-fade-in 0.3s ease-out;
z-index: 10;
/* The frame stopped clipping (corner horns hang outside) - round our own
corners so the veil doesn't poke square past the cabinet radius. */
border-radius: var(--pit-radius);
overflow: hidden;
}
@keyframes pit-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pit-overlay-card {
position: relative;
max-width: 380px;
padding: 36px 32px 28px;
text-align: center;
background:
radial-gradient(circle at top, rgba(255, 215, 0, 0.2), transparent 70%),
linear-gradient(155deg, var(--pit-velvet) 0%, var(--pit-velvet-deep) 100%);
border: 2px solid var(--pit-gold);
border-radius: 16px;
box-shadow:
0 0 80px rgba(255, 215, 0, 0.45),
inset 0 0 40px rgba(124, 58, 237, 0.3);
}
.pit-overlay-title {
font-size: 30px;
font-weight: 900;
letter-spacing: 0.2em;
background: linear-gradient(180deg, var(--pit-gold-soft) 0%, var(--pit-gold) 50%, var(--pit-gold-dim) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 12px;
}
.pit-overlay-sub {
color: var(--pit-text-dim);
font-size: 13px;
margin-bottom: 22px;
}
.pit-overlay-summary {
list-style: none;
padding: 0;
margin: 0 0 22px 0;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--pit-text);
font-size: 14px;
text-align: left;
}
.pit-overlay-summary li {
padding: 10px 14px;
background: rgba(124, 58, 237, 0.25);
border-radius: 8px;
border-left: 3px solid var(--pit-gold);
}
.pit-overlay-close {
padding: 12px 32px;
background: linear-gradient(135deg, var(--pit-violet) 0%, var(--pit-violet-deep) 100%);
border: 1px solid var(--pit-gold);
border-radius: 10px;
color: var(--pit-gold-soft);
font-weight: 800;
letter-spacing: 0.14em;
cursor: pointer;
transition: background 0.15s, transform 0.12s;
}
.pit-overlay-close:hover {
background: linear-gradient(135deg, var(--pit-violet-deep) 0%, var(--pit-violet) 100%);
transform: translateY(-1px);
}
.pit-overlay-jackpot {
background: radial-gradient(circle at center,
rgba(255, 215, 0, 0.55) 0%,
rgba(11, 6, 23, 0.95) 65%);
}
.pit-overlay-jackpot .pit-overlay-card {
border-color: var(--pit-gold-soft);
border-width: 3px;
box-shadow:
0 0 160px rgba(255, 215, 0, 0.95),
inset 0 0 60px rgba(255, 215, 0, 0.45);
animation: pit-jackpot-pulse 1.6s ease-in-out infinite alternate;
}
@keyframes pit-jackpot-pulse {
from { box-shadow: 0 0 100px rgba(255, 215, 0, 0.6), inset 0 0 40px rgba(255, 215, 0, 0.3); }
to { box-shadow: 0 0 180px rgba(255, 215, 0, 1.0), inset 0 0 80px rgba(255, 215, 0, 0.6); }
}
.pit-jackpot {
font-size: 42px;
letter-spacing: 0.08em;
white-space: nowrap;
/* background-clip:text + letter-spacing clips the trailing glyph's spacing;
a hair of right padding keeps the final "T!" fully inside the gradient box. */
padding-right: 0.12em;
}
/* Give the jackpot card a touch more room than the standard overlay so the
word fits comfortably at any zoom. */
.pit-overlay-jackpot .pit-overlay-card { max-width: 440px; }
.pit-overlay-burst {
position: absolute;
inset: -40%;
pointer-events: none;
background:
radial-gradient(circle at 18% 28%, rgba(255, 215, 0, 0.45) 0, transparent 12%),
radial-gradient(circle at 82% 22%, rgba(192, 132, 252, 0.55) 0, transparent 14%),
radial-gradient(circle at 28% 82%, rgba(255, 215, 0, 0.4) 0, transparent 10%),
radial-gradient(circle at 78% 76%, rgba(255, 215, 0, 0.42) 0, transparent 12%),
radial-gradient(circle at 50% 50%, rgba(255, 247, 194, 0.25) 0, transparent 8%);
animation: pit-burst-rotate 6s linear infinite;
z-index: -1;
}
@keyframes pit-burst-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.pit-overlay-big .pit-overlay-card {
border-color: var(--pit-gold);
box-shadow: 0 0 100px rgba(255, 215, 0, 0.6);
}
.pit-big-win { font-size: 38px; }
/* ----------------------------------------------------------------
Odds disclosure panel (ADR §4.6 - mandatory disclosure)
---------------------------------------------------------------- */
.pit-odds {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(11, 6, 23, 0.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
animation: pit-fade-in 0.25s ease-out;
z-index: 11;
/* Same reason as .pit-overlay - the frame no longer clips for us. */
border-radius: var(--pit-radius);
overflow: hidden;
}
.pit-odds-card {
width: 340px;
padding: 26px;
background: linear-gradient(155deg, var(--pit-velvet) 0%, var(--pit-velvet-deep) 100%);
border: 1px solid rgba(255, 215, 0, 0.45);
border-radius: 14px;
box-shadow: 0 0 40px rgba(124, 58, 237, 0.3);
}
.pit-odds-title {
text-align: center;
font-weight: 900;
letter-spacing: 0.32em;
margin-bottom: 16px;
color: var(--pit-gold);
font-size: 14px;
}
.pit-odds-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.pit-odds-table th {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid rgba(255, 215, 0, 0.28);
color: var(--pit-text-dim);
font-size: 10px;
letter-spacing: 0.22em;
font-weight: 700;
}
.pit-odds-table td {
padding: 8px 10px;
border-bottom: 1px solid rgba(124, 58, 237, 0.18);
}
.pit-odds-table tbody tr:hover td { background: rgba(124, 58, 237, 0.15); }
.pit-odds-sub {
margin: 14px 0 18px 0;
font-size: 10px;
color: var(--pit-text-dim);
text-align: center;
letter-spacing: 0.06em;
}
.pit-odds .pit-overlay-close { display: block; margin: 0 auto; }
/* ----------------------------------------------------------------
Lottie overlay - polish v2 celebration animations.
The lottie-web player injects SVG into .pit-lottie-overlay; we
position it absolute over the frame, fade out at the end.
---------------------------------------------------------------- */
.pit-lottie-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 12; /* above coin shower (9) and overlays (10/11) */
opacity: 1;
transition: opacity 0.5s ease-out;
/* Same reason as .pit-overlay - the frame no longer clips for us. */
border-radius: var(--pit-radius);
overflow: hidden;
}
.pit-lottie-overlay svg {
width: 100% !important;
height: 100% !important;
}
.pit-lottie-overlay.pit-lottie-out {
opacity: 0;
}
/* Variant tints. Same confetti JSON, different colour mood per outcome. */
.pit-lottie-big-win svg {
filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.55))
saturate(1.2);
}
.pit-lottie-jackpot svg {
/* Push the entire animation toward gold via sepia + hue-rotate trick. */
filter: sepia(0.7) hue-rotate(-10deg) saturate(2)
drop-shadow(0 0 24px rgba(255, 215, 0, 0.65));
transform: scale(1.15);
}
/* ----------------------------------------------------------------
Corner-horn confetti fountains (v0.9.7.0). The canvas is created,
driven and destroyed by Scripts/pit-confetti.ts - this class only
stacks it: above the coin shower and the result overlay, same plane
as the Lottie polish, never catching a pointer.
---------------------------------------------------------------- */
/* Stacking + a static geometry FALLBACK that mirrors the engine's
EDGE_PAD=96 (pit-confetti.ts sets the same numbers inline every resize).
The fallback exists for the one transient window where a client holds a
heuristically-cached older pit-confetti.js against this fresh CSS - the
canvas still lands in the right place instead of laying out unstyled.
Keep the two 96s in sync with EDGE_PAD. */
.pit-confetti {
position: absolute;
inset: -96px;
width: calc(100% + 192px);
height: calc(100% + 192px);
pointer-events: none;
z-index: 12;
}
/* ----------------------------------------------------------------
Coin shower (jackpot / big-win FX)
---------------------------------------------------------------- */
.pit-coin-shower {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 9;
/* Same reason as .pit-overlay - the frame no longer clips for us. */
border-radius: var(--pit-radius);
}
.pit-coin {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, var(--pit-gold-soft), var(--pit-gold-dim));
box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
animation: pit-coin-fall 1.5s linear forwards;
}
@keyframes pit-coin-fall {
from { transform: translateY(-20px) rotate(0deg); opacity: 1; }
to { transform: translateY(640px) rotate(720deg); opacity: 0.2; }
}
/* ----------------------------------------------------------------
Compact variant - used in the Pro 5x multi-spin grid.
Strategy: GENUINELY shrink the machine by overriding its size vars
and widths (no transform:scale - that left a full-size layout box
that overflowed the row). The JS measures the real cell height at
spin time, so the smaller --pit-row-h lands correctly. The frame
fills its grid column (width:100%) and sizes to content height.
---------------------------------------------------------------- */
.pit-frame-compact {
width: 100%;
--pit-radius: 14px;
/* The .pit-frame defaults (12.2cqw row / 8.9cqw symbol) bottom out at their
clamp() floors in a ~250px Pro-5x column, so each machine rendered as a
thumbnail (32px cells, 22px symbols). Override with a steeper compact ramp:
~20cqw cells and ~14.5cqw symbols make the 5-up machines read full-size
(≈50px cells, ≈36px symbols at a 251px column) while still tracking the
column width so nothing overflows. JS measures the live cell height per
spin (see pit-slot.js), so the landing math follows the new size for free. */
--pit-row-h: clamp(42px, 20cqw, 104px);
--pit-symbol-size: clamp(24px, 14.5cqw, 78px);
/* Lighter bevel/shadow - the full machine's 30px/80px drop is too heavy here. */
box-shadow:
inset 0 1px 0 rgba(255, 241, 168, 0.4),
inset 0 0 26px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 215, 0, 0.5),
0 0 0 2px var(--pit-gold-dim),
0 10px 26px rgba(0, 0, 0, 0.55),
0 0 20px rgba(124, 58, 237, 0.22);
}
/* Compact machines drop their own "CHRONOS PIT" marquee entirely - the Pro 5x
grid shows ONE shared sign above the whole row (.pit-multi-marquee in
17-pit-page.css). Five stacked marquees, each with its own LED chase, were
pure visual noise. Killing them also removes five infinite animations. */
.pit-frame-compact .pit-sign { display: none; }
.pit-frame-compact .pit-body {
grid-template-columns: 1fr;
gap: 0;
margin: 10px 6px 10px;
}
.pit-frame-compact .pit-reels {
padding: 6px;
gap: 3px;
border-radius: 10px;
}
.pit-frame-compact .pit-reel { border-radius: 5px; }
/* The per-spin drop rail is redundant in 5x - the right-hand panel is the result log. */
.pit-frame-compact .pit-chip-rail { display: none; }
/* ----------------------------------------------------------------
v0.9.7.6: the x5 decoration budget (owner report - "х5 крутилка лагает").
Every per-reel effect below is priced PER REEL, and x5 mounts 25 of them
against the single machine's 5. Each of these was a five-fold cost for
something the eye cannot resolve on a 50px cell:
- the aura and the landing ramp animate box-shadow, which is not a
compositable property: 25 reels repainting a 30px inset blur plus a
22px outer blur, every frame, for 2.5s. The border colour carries the
same two states for free;
- the edge streaks are two more painted overlays per reel, 50 in total,
on gradients 26% of a cell tall;
- .pit-symbol-icon's drop-shadow puts every glyph on its own filter
render surface - 775 of them across the grid - and the .spinning
brightness override re-rasterises all 25 strip layers twice per spin.
At 36px on velvet the shadow is not visible anyway.
.landed stays: it is one short flash at the payoff, and the payoff is the
product. The motion itself is untouched - it runs on the compositor.
---------------------------------------------------------------- */
.pit-frame-compact .pit-reel.spinning,
.pit-frame-compact .pit-reel.landing { animation: none; }
.pit-frame-compact .pit-reel::before,
.pit-frame-compact .pit-reel::after { content: none; }
.pit-frame-compact .pit-symbol-icon,
.pit-frame-compact .pit-reel.spinning .pit-symbol-icon { filter: none; }
/* Lite devices - phones and small-CPU boxes. Same reasoning as the x5 grid: the
reels themselves keep moving (pit-slot.js hands them the pre-v0.9.6 CSS
transition there), the decoration that is priced per reel per frame does not.
The glyph drop-shadow SURVIVES here: a phone runs one machine at 88px cells,
where the shadow is what keeps a symbol legible against the velvet. */
.pit-lite .pit-reel.spinning,
.pit-lite .pit-reel.landing { animation: none; }
.pit-lite .pit-reel::before,
.pit-lite .pit-reel::after { content: none; }
.pit-lite .pit-reel.spinning .pit-symbol-icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
/* ----------------------------------------------------------------
Responsive
---------------------------------------------------------------- */
@media (max-width: 720px) {
.pit-sign { height: 80px; padding: 20px 16px 12px; }
.pit-sign-text { font-size: 22px; letter-spacing: 0.32em; }
.pit-body { margin: 20px 16px 12px; }
.pit-reels { padding: 10px; gap: 6px; }
.pit-chip { font-size: 11px; padding: 5px 6px; }
.pit-controls { padding: 6px 16px 20px; gap: 12px; }
.pit-spin-btn { border-width: 3px; }
.pit-overlay-jackpot .pit-overlay-card { max-width: 92vw; }
.pit-jackpot { font-size: 32px; letter-spacing: 0.06em; }
.pit-big-win { font-size: 28px; }
}
@media (max-width: 480px) {
.pit-sign { height: 64px; padding: 14px 10px 8px; }
.pit-sign-text { font-size: 14px; letter-spacing: 0.18em; margin-top: 6px; }
.pit-body { margin: 12px 10px 8px; gap: 6px; grid-template-columns: minmax(0, 1fr) 82px; }
.pit-reels { padding: 8px; gap: 4px; }
.pit-chip-rail { padding: 6px 6px 8px; gap: 6px; border-radius: 12px; }
.pit-chip-rail-title { font-size: 8px; letter-spacing: 0.22em; }
.pit-chip { font-size: 10px; padding: 4px 5px; border-radius: 10px; }
.pit-chip-empty { border-radius: 10px; }
.pit-chip-slot-num { font-size: 10px; }
/* Corner horn sizes live in the @container buckets above - the machine's
own width decides, not the viewport. */
.pit-controls { padding: 6px 10px 16px; gap: 8px; }
.pit-controls > :last-child { min-width: 0; }
.pit-spin-btn { border-width: 2px; }
.pit-odds-btn { padding: 8px 10px; font-size: 9px; letter-spacing: 0.14em; }
.pit-overlay-card { width: min(92vw, 380px); max-width: 92vw; padding: 22px 16px 18px; }
.pit-overlay-title { font-size: 22px; }
.pit-overlay-jackpot .pit-overlay-card { max-width: 92vw; width: min(92vw, 380px); }
.pit-jackpot { font-size: 22px; }
.pit-big-win { font-size: 20px; }
.pit-odds-card { width: min(92vw, 340px); max-width: 92vw; }
}
@media (max-width: 380px) {
.pit-body { margin: 10px 6px 6px; grid-template-columns: minmax(0, 1fr) 72px; }
.pit-reels { gap: 3px; padding: 6px; }
.pit-controls { padding: 4px 6px 14px; gap: 4px; }
}
/* Ultra-narrow phones (down to ~300px, e.g. 300x800 or split-screen). Shrink the
machine further so 5 reels + the SPIN button + bet controls fit with no scroll.
The corner horns are gone by here (the 350px container query above). */
@media (max-width: 340px) {
.pit-body { margin: 8px 5px 5px; grid-template-columns: minmax(0, 1fr) 64px; }
.pit-reels { gap: 2px; padding: 5px; }
.pit-sign { height: 54px; }
.pit-sign-text { font-size: 12px; letter-spacing: 0.12em; }
.pit-chip { font-size: 9px; padding: 3px 4px; }
.pit-controls { padding: 4px 4px 12px; gap: 3px; }
}
/* ============================================================
v0.4.47.1: reduced-motion. The slot is the most motion-heavy
surface and had NO guard - kill the infinite/celebratory
animations (LED chase, marquee shimmer, jackpot pulse, burst
spin, falling coins, symbol pops) for users who asked the OS
to reduce motion. WCAG 2.3.3 / vestibular safety.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.pit-sign::before,
.pit-sign::after,
.pit-overlay-jackpot .pit-overlay-card,
.pit-overlay-burst,
.pit-coin,
.pit-reel.win .pit-symbol-icon,
.pit-reel.near-miss .pit-symbol-icon,
/* v0.9.6.1 column beats: no pulsing aura, no landing ramp, no impact flash.
(The rAF engine already refuses to run under reduced motion - these cover
the .spinning look the CSS fallback path still applies.) */
.pit-reel.spinning,
.pit-reel.landing,
.pit-reel.landed,
/* v0.9.6.2 horns: statically mounted is the reduced look. The FX engine
refuses to run by itself; these cover a class left behind by a race. */
.pit-horn::after,
.pit-horns-kick .pit-horn img,
.pit-horns-celebrate .pit-horn img,
.pit-cornucopia,
/* v0.9.7.0: drop-rail cards appear seated, no fly-in (the TS engine
refuses on its own; this covers the CSS fallback keyframe). */
.pit-chip {
animation: none !important;
}
.pit-chip { opacity: 1; transform: none; }
.pit-reel::before,
.pit-reel::after {
display: none;
}
/* A cornucopia with no entry animation would just hang mid-air at 0%. */
.pit-cornucopia { display: none; }
/* v0.9.7.0 confetti: the TS engine refuses to run by itself; this covers a
canvas left behind by a preference change mid-celebration. */
.pit-confetti { display: none; }
}
/* ============================================================
Large desktop monitors (27"+). Previously scaled up via fixed per-breakpoint
px; now the fluid clamp(...cqw...) geometry plus the clamp() width on
.pit-frame grow the whole machine smoothly up to their ceilings, so no
breakpoints are needed here.
============================================================ */