/* Curated CSS artwork: the fill remains the actual pool percentage. */
[data-odds-theme="salt-shakers"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    align-items: center;
    padding: 20px 4px 9px;
    border: 1px solid #b7cad780;
    border-radius: 13px 13px 9px 9px;
    background:
        linear-gradient(90deg, #eaf8ff3d 0 8%, transparent 20% 70%, #dff6ff26 83% 91%, transparent),
        radial-gradient(ellipse at 50% 5%, #d7effb18, transparent 45%),
        linear-gradient(90deg, #172633, #07131c 43% 62%, #1b2d39);
    box-shadow: inset 3px 0 4px #ffffff35, inset -3px 0 5px #0009, inset 0 0 10px #7fc7e522, 0 3px 9px #0008;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
[data-odds-theme="salt-shakers"] .wager-bar-track::before {
    display: none;
}
[data-odds-theme="salt-shakers"] .wager-bar-fill {
    position: relative;
    z-index: 1;
    flex: none;
    width: calc(100% - 2px);
    overflow: hidden;
    border-radius: 48% 60% 0 0 / 7px 5px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.25' d='M0 0h120v180H0z'/%3E%3C/svg%3E"), linear-gradient(90deg, #b5bdc5, #eee9da 20%, #fff9eb 48%, #e1ddcf 77%, #9aa8b5);
    background-size: 83px 137px, 100% 100%;
    animation: none;
    clip-path: none;
    transition: height .9s ease-in-out;
    box-shadow: inset 0 2px 1px #fff9, inset 3px 0 6px #ffffff40, inset -3px 0 6px #1d344b33, 0 -1px 3px #f7f1df75;
}
[data-odds-theme="salt-shakers"] .wager-fill-left { border-left: 2px solid #71b4e9; }
[data-odds-theme="salt-shakers"] .wager-fill-right { border-right: 2px solid #e99095; }
[data-odds-theme="salt-shakers"] .wager-bubbles,
[data-odds-theme="salt-shakers"] .wager-bar-fill::before,
[data-odds-theme="salt-shakers"] .wager-bar-fill::after { display: none; }
[data-odds-theme="salt-shakers"] .wager-bar-track::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: calc(50% - 4px);
    width: 8px;
    opacity: 0;
    background: radial-gradient(ellipse, #fff8e9 0 .6px, transparent 1px) 1px 0 / 3px 7px, radial-gradient(ellipse, #f1e6cf 0 .7px, transparent 1px) 0 3px / 5px 11px;
    z-index: 2;
}
.salt-shaker-shell { display: none; }
[data-odds-theme="salt-shakers"] .salt-shaker-shell {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, #fff8 0 4%, transparent 12% 76%, #c8e8f34a 85% 90%, transparent 96%),
        linear-gradient(105deg, transparent 0 34%, #ffffff16 42%, transparent 50% 100%);
    box-shadow: inset 0 0 0 1px #e3f5ff20;
}
[data-odds-theme="salt-shakers"] .salt-shaker-shell::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto;
    height: 20px;
    border: 1px solid #525d66;
    border-bottom-color: #303a42;
    border-radius: 13px 13px 5px 5px;
    background:
        radial-gradient(circle, #172028 0 1.6px, #c7ced2 1.9px 2.5px, transparent 2.8px) 2px 4px / 9px 8px,
        linear-gradient(90deg, #68737b, #e7ecef 18%, #929ca3 45%, #d7dde0 68%, #59656d);
    box-shadow: inset 0 1px #fff9, inset 0 -3px 4px #26303866, 0 2px 3px #0008;
}
[data-odds-theme="salt-shakers"] .salt-shaker-shell::after {
    content: '';
    position: absolute;
    inset: auto -1px -1px;
    height: 10px;
    border: 1px solid #48535b;
    border-radius: 3px 3px 8px 8px;
    background: linear-gradient(90deg, #4f5a62, #d5dde1 18%, #7e8990 48%, #c4cdd2 72%, #414c54);
    box-shadow: inset 0 1px #ffffffa3, inset 0 -2px 3px #1f2931aa, 0 -1px 3px #0007;
}
[data-odds-theme="salt-shakers"] .salt-pouring::after {
    top: 0;
    bottom: 0;
    z-index: 0;
    opacity: 1;
    animation: salt-fall .2s linear infinite;
}
[data-odds-theme="salt-shakers"] .salt-draining::after {
    display: none;
}
[data-odds-theme="salt-shakers"] .salt-draining .wager-bar-fill::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto;
    z-index: 2;
    display: block;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 44% 50%, #70664d99 0 12%, #b9ad9070 22%, transparent 48%);
    box-shadow: inset 0 2px 2px #4c443688;
    pointer-events: none;
}
[data-odds-theme="salt-shakers"] .salt-draining .wager-bar-fill::after {
    --drain-grain-a: 44%;
    --drain-grain-b: 51%;
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    opacity: .9;
    pointer-events: none;
    background:
        radial-gradient(ellipse, #fff8e9 0 .7px, transparent 1.1px) var(--drain-grain-a) 0 / 4px 8px,
        radial-gradient(ellipse, #d9ccb0 0 .7px, transparent 1.2px) var(--drain-grain-b) 3px / 5px 11px,
        linear-gradient(90deg, transparent 0 24%, #756b5438 38% 63%, transparent 77%);
    clip-path: polygon(25% 0, 75% 0, 68% 24%, 79% 49%, 63% 73%, 60% 100%, 39% 100%, 34% 76%, 23% 54%, 38% 27%);
    animation: salt-drain-column .22s linear infinite;
}
[data-odds-theme="salt-shakers"] .salt-draining .wager-fill-right::before {
    background: radial-gradient(ellipse at 57% 50%, #70664d99 0 12%, #b9ad9070 22%, transparent 48%);
}
[data-odds-theme="salt-shakers"] .salt-draining .wager-fill-right::after {
    --drain-grain-a: 48%;
    --drain-grain-b: 57%;
    clip-path: polygon(25% 0, 75% 0, 62% 27%, 77% 54%, 66% 76%, 61% 100%, 40% 100%, 37% 73%, 21% 49%, 32% 24%);
}
@keyframes salt-fall { to { background-position: 1px 21px, 0 36px; } }
@keyframes salt-drain-column {
    to { background-position: var(--drain-grain-a) 24px, var(--drain-grain-b) 36px, 0 0; }
}
.odds-theme-preview { display: flex; flex-direction: column; gap: 12px; }
.odds-preview-pair { display: flex; justify-content: center; gap: 32px; width: 100%; }
.odds-preview-pair .wager-bar-track { width: 45px; height: 150px; flex: none; }
@media (prefers-reduced-motion: reduce) {
    [data-odds-theme="salt-shakers"] .wager-bar-track::after { display: none; }
    [data-odds-theme="salt-shakers"] .wager-bar-fill { transition: none; }
}

/* The free default gets a real preview even on the standalone Collections page. */
.odds-preview-pair .wager-bar-track { position: relative; overflow: hidden; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-end; background: #101f2d; border: 1px solid #728398; }
.odds-preview-pair .wager-bar-fill { flex: none; width: 100%; transition: height .9s ease-in-out; }
.odds-theme-preview[data-odds-theme=""] .wager-fill-left { background: linear-gradient(0deg, #075ac8, #78bdff); }
.odds-theme-preview[data-odds-theme=""] .wager-fill-right { background: linear-gradient(0deg, #b62b48, #ff9aa9); }
@media (prefers-reduced-motion: reduce) { .odds-preview-pair .wager-bar-fill { transition: none; } }

[data-odds-theme="arcade"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 3px solid #475075;
    border-radius: 2px;
    background: repeating-linear-gradient(0deg, #0b0b19 0 3px, #20213b 3px 12px);
    box-shadow: 0 0 0 1px #0a0915, inset 0 0 8px #000;
}
[data-odds-theme="arcade"] .wager-bar-fill {
    flex: none;
    width: 100%;
    border-radius: 0;
    animation: none;
    clip-path: none;
    transition: height .6s ease-out;
    box-shadow: inset 3px 0 #ffffff30, inset -3px 0 #0003;
}
[data-odds-theme="arcade"] .wager-fill-left { background: linear-gradient(90deg, #1464d8, #60dcff 50%, #167fe7); }
[data-odds-theme="arcade"] .wager-fill-right { background: linear-gradient(90deg, #c32753, #ff8292 50%, #e03959); }
[data-odds-theme="arcade"] .wager-bubbles,
[data-odds-theme="arcade"] .wager-bar-fill::before,
[data-odds-theme="arcade"] .wager-bar-fill::after { display: none; }
[data-odds-theme="arcade"] .wager-bar-track::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, #0b0b19 0 3px, transparent 3px 12px);
}
[data-odds-theme="arcade"] .arcade-gaining .wager-bar-fill { animation: arcade-power .3s ease-out 3; }
[data-odds-theme="arcade"] .arcade-losing .wager-bar-fill { animation: arcade-down .3s ease-out 3; }
@keyframes arcade-power { 40% { filter: brightness(1.6); } }
@keyframes arcade-down { 40% { filter: brightness(.65); } }
@media (prefers-reduced-motion: reduce) {
    [data-odds-theme="arcade"] .wager-bar-fill { animation: none; transition: none; }
}

[data-odds-theme="cosmic"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #8d88b6;
    border-radius: 14px;
    background: linear-gradient(90deg, #18162d, #070b1c 50%, #201a38);
    box-shadow: inset 0 0 12px #000a, 0 0 7px #7e72ce25;
}
[data-odds-theme="cosmic"] .wager-bar-fill {
    position: relative;
    flex: none;
    width: 100%;
    border-radius: 45% 45% 0 0 / 5px 5px 0 0;
    clip-path: none;
    animation: none;
    transition: height .9s ease-in-out;
    background: radial-gradient(ellipse at 30% 25%, #66d6edbb, transparent 55%),
        radial-gradient(ellipse at 80% 70%, #ad5ff1cc, transparent 55%),
        linear-gradient(120deg, #123570, #34295a 50%, #09517b);
    box-shadow: inset 0 2px 2px #e0d7ffb0, inset 0 0 10px #180e50;
}
[data-odds-theme="cosmic"] .wager-fill-right {
    background: radial-gradient(ellipse at 30% 25%, #ffb8cab0, transparent 55%),
        radial-gradient(ellipse at 80% 70%, #9564dfcc, transparent 55%),
        linear-gradient(120deg, #62265f, #582449 50%, #803764);
}
[data-odds-theme="cosmic"] .wager-bubbles { display: none; }
[data-odds-theme="cosmic"] .wager-bar-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    height: auto;
    pointer-events: none;
    background: radial-gradient(circle, #fff 0 .7px, transparent 1.3px) 4px 8px / 23px 37px,
        radial-gradient(circle, #daf8ff 0 .5px, transparent 1px) 11px 19px / 31px 53px,
        radial-gradient(circle, #fff8 0 .5px, transparent 1px) 0 5px / 17px 29px;
}
[data-odds-theme="cosmic"] .wager-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 25%, #e8cfff55 50%, transparent 75%);
    opacity: 0;
}
[data-odds-theme="cosmic"] .cosmic-gaining .wager-bar-fill::after { animation: cosmic-surge .9s ease-out; }
[data-odds-theme="cosmic"] .cosmic-losing .wager-bar-fill { animation: cosmic-fade .9s ease-out; }
@keyframes cosmic-surge { 0% { transform: translateY(100%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } }
@keyframes cosmic-fade { 40% { filter: brightness(.75) saturate(.8); } }
@media (prefers-reduced-motion: reduce) {
    [data-odds-theme="cosmic"] .wager-bar-fill { animation: none; transition: none; }
    [data-odds-theme="cosmic"] .wager-bar-fill::after { animation: none; }
}

[data-odds-theme="high-roller"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #ba9955;
    border-bottom: 5px solid #ba9955;
    border-radius: 7px;
    background: linear-gradient(90deg, #171914, #08130f 50%, #25251a);
    box-shadow: inset 0 0 9px #000b, 0 0 0 2px #211b13;
}
#spectateModal .modal-fullscreen .spectate-wager-layout[data-odds-theme="high-roller"] .wager-bar-side {
    /* Fullscreen height makes the default spectator rail read like a column of
       edge-on wafers. Give casino chips enough horizontal mass to retain their
       familiar wide, flat silhouette without changing compact/store previews. */
    width: clamp(104px, 15dvh, 190px);
}
[data-odds-theme="high-roller"] .wager-bar-fill {
    --chip-color: #245597;
    position: relative;
    z-index: 2;
    flex: none;
    width: 100%;
    border-radius: 50% 50% 0 0 / 5px 5px 0 0;
    clip-path: none;
    animation: none;
    transition: height .9s ease-in-out;
    background: transparent;
    box-shadow: none;
}
[data-odds-theme="high-roller"] .wager-fill-right { --chip-color: #aa3546; }
[data-odds-theme="high-roller"] .high-roller-chip-stack {
    --chip-color: #245597;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    /* Start the chip walls below the moving top face so no side artwork can
       peek through the transparent corners of its ellipse. */
    clip-path: inset(calc(100% - var(--salt-level, 50%) + 5px) 0 0);
    background-color: var(--chip-color);
    /* Each SVG row is one complete chip. Keep the edge inlays near the actual
       outer rim; the old marks sat around the middle and visually collapsed a
       full-width stack into a skinny patterned column. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cpath d='M0 2Q50 11 100 2v8Q50 19 0 10z' fill='%23000' opacity='.22'/%3E%3Cpath d='M5 4l15 2v6L5 10zm75 2l15-2v6l-15 2z' fill='%23f3e7c9'/%3E%3Cpath d='M0 2Q50 11 100 2' fill='none' stroke='%23f7d98b' stroke-width='1.5' stroke-opacity='.78'/%3E%3Cpath d='M0 11Q50 19 100 11' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E"), linear-gradient(90deg, #0005, #ffffff22 45%, #0005);
    background-repeat: repeat-y, no-repeat;
    background-size: 100% 14px, 100% 100%;
    background-position: center bottom;
    box-shadow: inset 2px 0 3px #0006, inset -2px 0 3px #0006;
    transition: clip-path .9s ease-in-out;
    will-change: clip-path;
}
[data-odds-theme="high-roller"] .high-roller-chip-stack-right { --chip-color: #aa3546; }
.high-roller-chip-stack { display: none; }
[data-odds-theme="high-roller"] .wager-bubbles { display: none; }
[data-odds-theme="high-roller"] .wager-bar-fill::before {
    content: '';
    position: absolute;
    inset: 0 1px auto;
    height: 9px;
    border: 1px solid #e4c580;
    border-radius: 50%;
    background: radial-gradient(ellipse, #e4c580 0 12%, transparent 15% 40%, #e4c58088 44% 48%, transparent 52%), var(--chip-color);
    box-shadow: 0 1px 2px #0009;
    pointer-events: none;
}
[data-odds-theme="high-roller"] .wager-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, #ffeab899 50%, transparent 80%);
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-odds-theme="high-roller"] .wager-bar-fill { animation: none; transition: none; }
    [data-odds-theme="high-roller"] .wager-bar-fill::after { animation: none; }
}

[data-odds-theme="barbershop"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 3px solid #b9c1ca;
    border-top-color: #f4f6f8;
    border-bottom-color: #737d87;
    border-radius: 18px;
    background: linear-gradient(90deg, #b8c1c9, #f4f6f7 24%, #d8dde1 52%, #8b969f);
    box-shadow: inset 0 0 7px #0005, 0 0 0 1px #4d555d, 0 2px 7px #0006;
}
[data-odds-theme="barbershop"] .wager-bar-track::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff9 0 7%, transparent 18% 72%, #0004 100%);
}
[data-odds-theme="barbershop"] .wager-bar-fill {
    --barbershop-band-1: 9px;
    --barbershop-band-2: 18px;
    --barbershop-band-3: 27px;
    --barbershop-band-4: 36px;
    position: relative;
    z-index: 1;
    flex: none;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    clip-path: none;
    transition: height .9s ease-in-out;
    background-color: #f5f1e9;
    background-image: none;
    box-shadow: inset 3px 0 5px #fff7, inset -3px 0 5px #17253655;
    animation: none;
}
#spectateModal .modal-fullscreen [data-odds-theme="barbershop"] .wager-bar-fill {
    --barbershop-band-1: 18cqi;
    --barbershop-band-2: 36cqi;
    --barbershop-band-3: 54cqi;
    --barbershop-band-4: 72cqi;
}
[data-odds-theme="barbershop"] .wager-bar-fill::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    z-index: 2;
    background: linear-gradient(#fff, #9ba5ad);
    box-shadow: 0 1px 2px #0007;
    pointer-events: none;
}
[data-odds-theme="barbershop"] .wager-bar-fill::after {
    content: '';
    display: block;
    position: absolute;
    /* Paint one oversized, axis-aligned image and rotate the layer. Keeping its
       edges well outside the clipped fill prevents Chromium from introducing a
       visible background-tile boundary through the diagonal stripes. */
    /* Fullscreen bars can be far taller than they are wide. Give the rotated
       sheet enough horizontal overdraw to cover the tube's end caps even at
       100% fill; otherwise its corners cut triangular holes at the top/bottom. */
    inset: -100% -1000%;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg,
        #bd2f3e 0 var(--barbershop-band-1),
        #f8f4ec var(--barbershop-band-1) var(--barbershop-band-2),
        #285b9c var(--barbershop-band-2) var(--barbershop-band-3),
        #f8f4ec var(--barbershop-band-3) var(--barbershop-band-4));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: rotate(-45deg);
    transform-origin: center;
    animation: barbershop-spin 2.4s linear infinite;
    will-change: transform;
}
[data-odds-theme="barbershop"] .wager-bubbles { display: none; }
@keyframes barbershop-spin {
    from { transform: rotate(-45deg) translate3d(0, 0, 0); }
    to { transform: rotate(-45deg) translate3d(0, calc(-1 * var(--barbershop-band-4)), 0); }
}
@media (prefers-reduced-motion: reduce) {
    [data-odds-theme="barbershop"] .wager-bar-fill { animation: none; transition: none; }
    [data-odds-theme="barbershop"] .wager-bar-fill::after { animation: none; }
}

@property --toxic-level {
    syntax: '<percentage>';
    /* The stream is a pseudo-element, so it must inherit the track's live,
       registered level rather than falling back to the 0% initial value. */
    inherits: true;
    initial-value: 0%;
}

[data-odds-theme="toxic-sludge"] .wager-bar-track {
    --toxic-vat-top: 24px;
    --toxic-vat-side: 5px;
    --toxic-vat-bottom: 20px;
    --toxic-level: 0%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-style: solid;
    border-width: var(--toxic-vat-top) var(--toxic-vat-side) var(--toxic-vat-bottom);
    border-image: url('/img/toxic-vat-frame.svg') 24 5 20 5 fill /
        var(--toxic-vat-top) var(--toxic-vat-side) var(--toxic-vat-bottom) stretch;
    border-radius: 7px;
    background:
        radial-gradient(ellipse at 35% 3%, #a8ff2c38 0 7px, transparent 16px),
        radial-gradient(ellipse at 68% 7%, #6acc1730 0 5px, transparent 15px),
        linear-gradient(90deg, #17232c, #07121a 36% 68%, #1b2830);
    box-shadow: inset 0 0 12px #000c, 0 3px 8px #0008;
    transition: --toxic-level .9s ease-in-out;
}
#spectateModal .modal-fullscreen [data-odds-theme="toxic-sludge"] .wager-bar-track {
    --toxic-vat-top: 53.333cqi;
    --toxic-vat-side: 11.111cqi;
    --toxic-vat-bottom: 44.444cqi;
}
[data-odds-theme="toxic-sludge"] .wager-bar-track::before {
    content: '';
    position: absolute;
    /* The compact artwork already places its padding edge at the nozzle. */
    top: -2px;
    bottom: var(--toxic-level);
    left: calc(50% - 4px);
    width: 8px;
    z-index: 0;
    pointer-events: none;
    border-radius: 2px 2px 55% 45%;
    background: linear-gradient(90deg, #579908, #d8ff35 38%, #a9ec17 65%, #4c8707);
    box-shadow: inset 2px 0 2px #efff8e66, inset -2px 0 2px #315b05aa, 0 0 4px #9cf31a99;
    transform-origin: top center;
    /* Keep the stream and its oversized fullscreen glow inside the glass.
       Negative inline insets retain the sideways bloom without allowing it
       to bleed upward through the metal housing or below the goo surface. */
    clip-path: inset(0 -300% 0 -300%);
    opacity: 0;
}
#spectateModal .modal-fullscreen [data-odds-theme="toxic-sludge"] .wager-bar-track::before {
    /* The stretched fullscreen frame's nozzle sits one top-slice below the
       padding edge, so anchor the stream to that rendered opening. */
    top: var(--toxic-vat-top);
    left: calc(50% - 8.889cqi);
    width: 17.778cqi;
    border-radius: 4.444cqi 4.444cqi 55% 45%;
    box-shadow: inset 4.444cqi 0 4.444cqi #efff8e66,
                inset -4.444cqi 0 4.444cqi #315b05aa,
                0 0 8.889cqi #9cf31a99;
}
[data-odds-theme="toxic-sludge"] .wager-bar-track::after {
    display: none;
}
[data-odds-theme="toxic-sludge"] .wager-bar-fill {
    position: relative;
    z-index: 1;
    flex: none;
    width: 100%;
    overflow: visible;
    border-radius: 0;
    -webkit-mask: url('/img/toxic-sludge-surface.svg') top / 100% 14px no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - 8px) no-repeat;
    mask: url('/img/toxic-sludge-surface.svg') top / 100% 14px no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - 8px) no-repeat;
    transition: height .9s ease-in-out;
    background:
        radial-gradient(ellipse at 30% 25%, #e9ff7a88 0 5%, transparent 18%),
        radial-gradient(ellipse at 72% 58%, #477d0780 0 10%, transparent 28%),
        radial-gradient(ellipse at 43% 83%, #d1ff3a55 0 9%, transparent 25%),
        linear-gradient(90deg, #4b9207, #a9ed12 42%, #ceff2c 62%, #5ba008);
    background-size: 34px 53px, 43px 67px, 51px 71px, 100% 100%;
    box-shadow: inset 4px 0 8px #e9ff7566, inset -5px 0 8px #23440399, 0 -2px 8px #aaff22aa;
    animation: toxic-sludge-current 7s ease-in-out infinite alternate;
}
[data-odds-theme="toxic-sludge"] .wager-bar-fill::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 14px;
    background: url('/img/toxic-sludge-surface.svg') center / 100% 100% no-repeat;
    filter: drop-shadow(0 1px 2px #315b04) drop-shadow(0 -1px 3px #c6ff28);
    pointer-events: none;
}
[data-odds-theme="toxic-sludge"] .wager-bar-fill::after { display: none; }
[data-odds-theme="toxic-sludge"] .wager-bubbles { display: block; }
[data-odds-theme="toxic-sludge"] .wager-bubbles i {
    border: 1px solid #efff9dcc;
    background: radial-gradient(circle at 32% 28%, #fff 0 8%, #dfff6a99 12% 28%, #4c910b88 60%, #315f0688 100%);
    box-shadow: inset -1px -2px 3px #315f06aa, 0 0 5px #baff31aa;
    animation-name: toxic-bubble-rise;
}
[data-odds-theme="toxic-sludge"] .toxic-sludge-gaining::before { animation: toxic-stream-pour .9s ease-in-out; }
[data-odds-theme="toxic-sludge"] .toxic-sludge-gaining .wager-bar-fill::before { animation: toxic-surface-impact .9s ease-out; }
[data-odds-theme="toxic-sludge"] .toxic-sludge-losing .wager-bar-fill { animation: toxic-sludge-current 7s ease-in-out infinite alternate, toxic-sludge-recede .9s ease-out; }
@keyframes toxic-stream-pour {
    0% { transform: scaleX(.55); opacity: 0; }
    14% { transform: scaleX(.8); opacity: 1; }
    72% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(.72); opacity: 0; }
}
@keyframes toxic-surface-impact {
    0%, 100% { transform: scaleY(1); filter: brightness(1); }
    42% { transform: scaleY(1.2); filter: brightness(1.35); }
}
@keyframes toxic-sludge-current {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 6px 13px, -8px 19px, 5px -11px, 0 0; }
}
@keyframes toxic-bubble-rise {
    0% { bottom: -9px; opacity: 0; transform: translateX(0) scale(.45); }
    15% { opacity: .92; }
    72% { opacity: .8; transform: translateX(3px) scale(1); }
    100% { bottom: 101%; opacity: 0; transform: translateX(-2px) scale(1.12); }
}

/* Scale liquid bubbles with the spectator bar when the fullscreen overlay widens. */
#spectateModal .modal-fullscreen .wager-bubbles i {
    width: 11.364cqi;
    height: 11.364cqi;
    border-width: 2.273cqi;
    box-shadow: 0 0 11.364cqi #ffffff30;
    animation-name: wager-bubble-fullscreen;
}

#spectateModal .modal-fullscreen .wager-bubbles i:nth-child(2) {
    width: 18.182cqi;
    height: 18.182cqi;
}

#spectateModal .modal-fullscreen .wager-bubbles i:nth-child(3) {
    width: 6.818cqi;
    height: 6.818cqi;
}

#spectateModal .modal-fullscreen .wager-bubbles i:nth-child(5) {
    width: 15.909cqi;
    height: 15.909cqi;
}

@keyframes wager-bubble-fullscreen {
    0% { bottom: -22.727cqi; opacity: 0; transform: translateX(0); }
    12% { opacity: .7; }
    70% { opacity: .55; transform: translateX(11.364cqi); }
    100% { bottom: 105%; opacity: 0; transform: translateX(-9.091cqi); }
}

#spectateModal .modal-fullscreen [data-odds-theme="toxic-sludge"] .wager-bubbles i {
    border-width: 2.273cqi;
    box-shadow: inset -2.273cqi -4.545cqi 6.818cqi #315f06aa,
                0 0 11.364cqi #baff31aa;
    animation-name: toxic-bubble-rise-fullscreen;
}

@keyframes toxic-bubble-rise-fullscreen {
    0% { bottom: -20.455cqi; opacity: 0; transform: translateX(0) scale(.45); }
    15% { opacity: .92; }
    72% { opacity: .8; transform: translateX(6.818cqi) scale(1); }
    100% { bottom: 101%; opacity: 0; transform: translateX(-4.545cqi) scale(1.12); }
}
@keyframes toxic-sludge-recede { 42% { filter: brightness(.68) saturate(.75); } }
@media (prefers-reduced-motion: reduce) {
    [data-odds-theme="toxic-sludge"] .wager-bar-track::before,
    [data-odds-theme="toxic-sludge"] .wager-bar-track::after,
    [data-odds-theme="toxic-sludge"] .wager-bar-fill,
    [data-odds-theme="toxic-sludge"] .wager-bubbles i { animation: none; }
    [data-odds-theme="toxic-sludge"] .wager-bar-fill { transition: none; }
}

/* Register the palette as colors so the mercury can interpolate with its height. */
@property --temperature-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #63dcff;
}
@property --temperature-highlight {
    syntax: '<color>';
    inherits: true;
    initial-value: #d8f7ff;
}
@property --temperature-shadow {
    syntax: '<color>';
    inherits: true;
    initial-value: #147bb7;
}
@property --temperature-glow {
    syntax: '<color>';
    inherits: true;
    initial-value: #4ccfff88;
}

/* A real temperature meter: its material and ambient motion follow the odds level. */
[data-odds-theme="thermometer"] .wager-bar-track {
    --temperature-color: #63dcff;
    --temperature-highlight: #d8f7ff;
    --temperature-shadow: #147bb7;
    --temperature-glow: #4ccfff88;
    --thermometer-frost-opacity: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px 7px 20px;
    border: 2px solid #71808c;
    border-top-color: #c4ccd2;
    border-bottom-color: #444f58;
    border-radius: 18px 18px 21px 21px;
    background: linear-gradient(90deg, #071018, #19242c 23%, #09131a 52%, #25313a 76%, #091119);
    box-shadow: inset 0 0 9px #000c, inset 2px 0 2px #ffffff20, 0 3px 8px #0008;
    transition:
        --temperature-color .9s ease-in-out,
        --temperature-highlight .9s ease-in-out,
        --temperature-shadow .9s ease-in-out,
        --temperature-glow .9s ease-in-out,
        box-shadow .9s ease-in-out,
        border-color .9s ease-in-out;
}
[data-odds-theme="thermometer"] .wager-bar-track::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 11px 4px 25px auto;
    width: 7px;
    pointer-events: none;
    opacity: .65;
    background: repeating-linear-gradient(to bottom, #cbd3d9 0 1px, transparent 1px 12px);
    -webkit-mask: linear-gradient(90deg, #000 0 55%, transparent 55%);
    mask: linear-gradient(90deg, #000 0 55%, transparent 55%);
}
[data-odds-theme="thermometer"] .wager-bar-track::after {
    content: '';
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 4px;
    width: 22px;
    height: 22px;
    border: 2px solid #ccd3d7;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 35% 27%, var(--temperature-highlight) 0 8%, var(--temperature-color) 22% 58%, var(--temperature-shadow) 82%);
    box-shadow: inset -3px -4px 5px #0005, 0 0 7px var(--temperature-glow), 0 2px 4px #0009;
    transform: translateX(-50%);
    transition: background .55s ease, box-shadow .55s ease;
}
[data-odds-theme="thermometer"] .wager-bar-fill {
    position: relative;
    z-index: 2;
    flex: none;
    width: 11px;
    min-height: 3px;
    overflow: visible;
    border: 1px solid var(--temperature-highlight);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    clip-path: none;
    animation: none;
    background: linear-gradient(90deg, var(--temperature-shadow), var(--temperature-color) 42% 68%, var(--temperature-highlight));
    box-shadow: inset 2px 0 2px #ffffff55, 0 0 6px var(--temperature-glow);
    transition: height .9s ease-in-out, background .55s ease, border-color .55s ease, box-shadow .55s ease;
}
[data-odds-theme="thermometer"] .wager-bar-fill::before {
    display: none;
}
[data-odds-theme="thermometer"] .wager-bar-fill::after {
    display: none;
}
#spectateModal .modal-fullscreen [data-odds-theme="thermometer"] .wager-bar-track {
    padding: 18cqi 16cqi 45cqi;
    border-width: 4.5cqi;
    border-radius: 41cqi 41cqi 48cqi 48cqi;
}
#spectateModal .modal-fullscreen [data-odds-theme="thermometer"] .wager-bar-track::before {
    inset: 25cqi 9cqi 57cqi auto;
    width: 16cqi;
    background: repeating-linear-gradient(to bottom, #cbd3d9 0 2.25cqi, transparent 2.25cqi 27cqi);
}
#spectateModal .modal-fullscreen [data-odds-theme="thermometer"] .wager-bar-track::after {
    bottom: 9cqi;
    width: 50cqi;
    height: 50cqi;
    border-width: 4.5cqi;
}
#spectateModal .modal-fullscreen [data-odds-theme="thermometer"] .wager-bar-fill {
    width: 25cqi;
    min-height: 7cqi;
    border-width: 2.25cqi;
    border-bottom-width: 0;
    border-radius: 9cqi 9cqi 0 0;
}
[data-odds-theme="thermometer"] .wager-bubbles { display: none; }
.thermometer-glass-effects { display: none; }
[data-odds-theme="thermometer"] .thermometer-glass-effects {
    position: absolute;
    inset: 2px;
    z-index: 4;
    display: block;
    overflow: hidden;
    border-radius: 15px 15px 18px 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease, background .7s ease;
}
[data-odds-theme="thermometer"] .thermometer-glass-effects::before,
[data-odds-theme="thermometer"] .thermometer-glass-effects::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
[data-odds-theme="thermometer"] .thermometer-glass-effects::before {
    inset: 0;
    opacity: var(--thermometer-frost-opacity);
    border: 1px solid #effdff99;
    border-radius: 13px 13px 16px 16px;
    background:
        linear-gradient(48deg, transparent 45%, #e8fbff 47% 49%, transparent 51%) 0 2px / 15px 17px,
        linear-gradient(-43deg, transparent 45%, #c9f4ff 47% 49%, transparent 51%) 5px 0 / 19px 23px,
        radial-gradient(ellipse at 0 8%, #e9fcffcc 0 2px, transparent 8px),
        radial-gradient(ellipse at 100% 31%, #d9f8ffb8 0 3px, transparent 10px),
        radial-gradient(ellipse at 4% 67%, #f4fdffb8 0 2px, transparent 9px),
        linear-gradient(90deg, #c9f4ff66, transparent 28% 72%, #dffaff72);
    box-shadow: inset 3px 0 6px #e5fbff9c, inset -3px 0 7px #d3f7ff8c, inset 0 2px 4px #fff9;
    transition: opacity .9s ease-in-out;
}
#spectateModal .modal-fullscreen [data-odds-theme="thermometer"] .thermometer-glass-effects {
    inset: 4.545cqi;
    border-radius: 34.091cqi 34.091cqi 40.909cqi 40.909cqi;
}
#spectateModal .modal-fullscreen [data-odds-theme="thermometer"] .thermometer-glass-effects::before {
    border-width: 2.273cqi;
    border-radius: 29.545cqi 29.545cqi 36.364cqi 36.364cqi;
    background:
        linear-gradient(48deg, transparent 45%, #e8fbff 47% 49%, transparent 51%) 0 4.545cqi / 34.091cqi 38.636cqi,
        linear-gradient(-43deg, transparent 45%, #c9f4ff 47% 49%, transparent 51%) 11.364cqi 0 / 43.182cqi 52.273cqi,
        radial-gradient(ellipse at 0 8%, #e9fcffcc 0 4.545cqi, transparent 18.182cqi),
        radial-gradient(ellipse at 100% 31%, #d9f8ffb8 0 6.818cqi, transparent 22.727cqi),
        radial-gradient(ellipse at 4% 67%, #f4fdffb8 0 4.545cqi, transparent 20.455cqi),
        linear-gradient(90deg, #c9f4ff66, transparent 28% 72%, #dffaff72);
    box-shadow: inset 6.818cqi 0 13.636cqi #e5fbff9c,
                inset -6.818cqi 0 15.909cqi #d3f7ff8c,
                inset 0 4.545cqi 9.091cqi #fff9;
}
[data-odds-theme="thermometer"] .thermometer-glass-effects i { position: absolute; opacity: 0; }

[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="cold"] {
    --temperature-color: #4ecfff;
    --temperature-highlight: #e4fbff;
    --temperature-shadow: #1263b3;
    --temperature-glow: #3ebfffa8;
    border-color: #9cc9dc;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="cool"] {
    --temperature-color: #59e1d0;
    --temperature-highlight: #dffff9;
    --temperature-shadow: #147f91;
    --temperature-glow: #49dac47d;
    border-color: #83a9ab;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="warm"] {
    --temperature-color: #ffbd38;
    --temperature-highlight: #fff2aa;
    --temperature-shadow: #cf5c16;
    --temperature-glow: #ffad347f;
    border-color: #9b806c;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] {
    --temperature-color: #ff493e;
    --temperature-highlight: #fff0a3;
    --temperature-shadow: #a91021;
    --temperature-glow: #ff342bbd;
    border-color: #c16b60;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="cold"] .thermometer-glass-effects {
    opacity: 1;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="cool"] .thermometer-glass-effects {
    opacity: .35;
    background: linear-gradient(90deg, #b9f7f044, transparent 25% 78%, #b9f7f052);
    box-shadow: inset 2px 0 4px #dffff966, inset -2px 0 4px #b8fff255;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] .thermometer-glass-effects {
    opacity: 1;
    background: linear-gradient(90deg, #ffb56514, transparent 24% 76%, #ff77441f);
    box-shadow: inset 2px 0 6px #ffb26a38, inset -2px 0 6px #ff704838;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] .thermometer-glass-effects::after {
    inset: 5px 3px;
    background: repeating-linear-gradient(100deg, transparent 0 6px, #ffd8b01f 8px, transparent 11px 17px);
    filter: blur(2px);
    animation: thermometer-heat-haze 1.4s ease-in-out infinite alternate;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] .thermometer-glass-effects i {
    bottom: -28px;
    width: 9px;
    height: 38px;
    border-radius: 50%;
    border-left: 2px solid #fff0dc78;
    filter: blur(1.7px);
    animation: thermometer-steam 3.1s ease-out infinite;
}
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] .thermometer-glass-effects i:nth-child(1) { left: 8%; animation-delay: -2.5s; }
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] .thermometer-glass-effects i:nth-child(2) { left: 34%; animation-delay: -1.2s; animation-duration: 3.7s; }
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] .thermometer-glass-effects i:nth-child(3) { left: 62%; animation-delay: -2s; animation-duration: 2.8s; }
[data-odds-theme="thermometer"] .wager-bar-track[data-temperature-band="hot"] .thermometer-glass-effects i:nth-child(4) { left: 82%; animation-delay: -.4s; animation-duration: 3.4s; }
@keyframes thermometer-heat-haze { from { transform: translateX(-2px) skewX(-1deg); opacity: .35; } to { transform: translateX(2px) skewX(2deg); opacity: .8; } }
@keyframes thermometer-steam {
    0% { opacity: 0; transform: translate(0, 8px) scale(.65); }
    20% { opacity: .62; }
    65% { opacity: .34; }
    100% { bottom: 96%; opacity: 0; transform: translate(5px, -7px) scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
    [data-odds-theme="thermometer"] .wager-bar-track,
    [data-odds-theme="thermometer"] .wager-bar-fill,
    [data-odds-theme="thermometer"] .thermometer-glass-effects::before,
    [data-odds-theme="thermometer"] .wager-bar-fill::after,
    [data-odds-theme="thermometer"] .thermometer-glass-effects::after,
    [data-odds-theme="thermometer"] .thermometer-glass-effects i { animation: none; }
    [data-odds-theme="thermometer"] .wager-bar-track,
    [data-odds-theme="thermometer"] .thermometer-glass-effects::before,
    [data-odds-theme="thermometer"] .wager-bar-fill { transition: none; }
}

/* Lava Lamps: the canvas owns the stationary glass/metal shell and continuously deforming wax. */
[data-odds-theme="lava-lamps"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
[data-odds-theme="lava-lamps"] .wager-bar-fill {
    position: absolute;
    inset: auto 0 0;
    visibility: hidden;
    pointer-events: none;
}
[data-odds-theme="lava-lamps"] .lava-lamp-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
[data-odds-theme="lava-lamps"] .wager-bubbles,
[data-odds-theme="lava-lamps"] .high-roller-chip-stack,
[data-odds-theme="lava-lamps"] .thermometer-glass-effects,
[data-odds-theme="lava-lamps"] .salt-shaker-shell { display: none; }

/* Plasma Reactor: branching energy scales continuously with the odds inside a fixed containment chamber. */
[data-odds-theme="plasma-reactor"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
[data-odds-theme="plasma-reactor"] .wager-bar-fill {
    position: absolute;
    inset: auto 0 0;
    visibility: hidden;
    pointer-events: none;
}
[data-odds-theme="plasma-reactor"] .plasma-reactor-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
[data-odds-theme="plasma-reactor"] .wager-bubbles,
[data-odds-theme="plasma-reactor"] .high-roller-chip-stack,
[data-odds-theme="plasma-reactor"] .thermometer-glass-effects,
[data-odds-theme="plasma-reactor"] .salt-shaker-shell { display: none; }

/* Critter Climb: odds map to each climber's position while the ladder remains fixed. */
[data-odds-theme="critter-climb"] .wager-bar-track {
    position: relative;
    isolation: isolate;
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
[data-odds-theme="critter-climb"] .wager-bar-fill {
    position: absolute;
    inset: auto 0 0;
    visibility: hidden;
    pointer-events: none;
}
[data-odds-theme="critter-climb"] .critter-climb-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 3px 2px #0008);
}
[data-odds-theme="critter-climb"] .wager-bubbles,
[data-odds-theme="critter-climb"] .high-roller-chip-stack,
[data-odds-theme="critter-climb"] .thermometer-glass-effects,
[data-odds-theme="critter-climb"] .salt-shaker-shell { display: none; }