:root {
  --real-vh: 100vh;
  --side-width: 23.25rem;
  --bet-dock-height: 16.0625rem;
  --bet-layout-collapse: 0rem;
  --bet-dock-collapse: 0rem;
  --compact-actions-opacity: 0;
  --compact-actions-y: -2rem;
  --compact-h-scale: 1;
  --stage-fit-scale: 1;
  --round-winners-fit-scale: 1;
  --bet-panel-opacity: 1;

  --rest-ty: 0;
  --rest-scale: 1;
  --rest-opacity: 1;
  --fly-x: 0;
  --fly-y: 0;

  --bp-mobile-portrait: 22.5rem;
  --bp-tablet: 48rem;
  --bp-mobile-landscape: 50rem;
  --bp-desktop-s: 64rem;
  --bp-desktop-m: 80rem;
  --bp-desktop-l: 96rem;

  --Text-Icons-Primary: #FFFFFF;
  --Text-Icons-Secondary: rgba(255, 255, 255, 0.64);
  --Text-Icons-Tertiary: rgba(255, 255, 255, 0.44);
  --Text-Icons-Placeholder: rgba(255, 255, 255, 0.32);
  --Text-Icons-Disable: rgba(255, 255, 255, 0.24);
  --background-components-Default: rgba(255, 255, 255, 0.10);
  --background-components-Hover: rgba(255, 255, 255, 0.16);
  --background-components-Press: rgba(255, 255, 255, 0.20);
  --background-components-Selected: rgba(255, 255, 255, 0.10);
  --background-components-Disable: rgba(255, 255, 255, 0.05);
  --background-components-Op-50: rgba(0, 0, 0, 0.50);
  --background-layout-Pure: #1B1A1A;
  --background-layout-Surface-1: #252424;
  --Primary-Primary-dark: #CAB10E;
  --Primary-Primary-base: #FCDD12;
  --Primary-Primary-light: #FDE441;
  --Primary-Primary-op-15: rgba(252, 221, 18, 0.15);
  --Primary-Primary-op-10: rgba(252, 221, 18, 0.10);
  --Primary-Primary-op-5: rgba(252, 221, 18, 0.05);
  --Green-Green-dark: #35A043;
  --Green-Green-base: #42C854;
  --Green-Green-light: #68D376;
  --Green-Green-op-50: rgba(66, 200, 84, 0.5);
  --Green-Green-op-15: rgba(66, 200, 84, 0.4);
  --Green-Green-op-10: rgba(66, 200, 84, 0.10);
  --Green-Green-op-5: rgba(66, 200, 84, 0.05);
  --Red-Red-dark: #E81633;
  --Red-base: #FC2A47;
  --Red-Red-light: #FF3E5B;
  --Red-Red-op-15: rgba(252, 42, 71, 0.15);
  --Red-Red-op-10: rgba(252, 42, 71, 0.10);
  --Red-Red-op-5: rgba(252, 42, 71, 0.05);
  --Purple-Purple-dark: #7667CC;
  --Purple-Purple-base: #9481FF;
  --Purple-Purple-light: #A99AFF;
  --Purple-Purple-op-15: rgba(148, 129, 255, 0.15);
  --Purple-Purple-op-10: rgba(148, 129, 255, 0.10);
  --Purple-Purple-op-5: rgba(148, 129, 255, 0.05);
  --Blue-Blue-dark: #5588CB;
  --Blue-Blue-base: #6AAAFE;
  --Blue-Blue-light: #88BBFE;
  --Blue-Blue-op-15: rgba(106, 170, 254, 0.15);
  --Blue-Blue-op-10: rgba(106, 170, 254, 0.10);
  --Blue-Blue-op-5: rgba(106, 170, 254, 0.05);
  --Base-Base-black: #000000;
  --Base-Base-black-50: rgba(0, 0, 0, 0.50);
  --Base-Base-black-25: rgba(0, 0, 0, 0.25);
  --Base-Base-black-15: rgba(0, 0, 0, 0.15);
  --Base-Base-black-10: rgba(0, 0, 0, 0.10);
  --Base-Base-black-5: rgba(0, 0, 0, 0.05);
  --Base-Base-white: #FFFFFF;
  --Base-Base-white-50: rgba(255, 255, 255, 0.50);
  --Base-Base-white-15: rgba(255, 255, 255, 0.15);
  --Base-Base-white-10: rgba(255, 255, 255, 0.10);
  --Base-Base-white-5: rgba(255, 255, 255, 0.05);
  --Outline-gradient: rgba(255, 255, 255, 0.10);
  --Gradient: rgba(255, 255, 255, 0.10);
  --Additional-Overlay: rgba(0, 0, 0, 0.60);

  --Primary-Primary-gradient-dark: linear-gradient(180deg, #EBD339 0.0%, #DEBF00 100.0%);
  --Primary-Primary-gradient-base: linear-gradient(180deg, #FFE74D 0.0%, #F2D30D 100.0%);
  --Primary-Primary-gradient-light: linear-gradient(180deg, #FFFB61 0.0%, #FFE721 100.0%);
  --Green-Green-gradient-dark: linear-gradient(180deg, #35A043 0.0%, #35A043 100.0%);
  --Green-Green-gradient-base: linear-gradient(180deg, #00CD4E 0.0%, #00A13B 100.0%);
  --Green-Green-gradient-light: linear-gradient(180deg, #00D651 0.0%, #00AF40 100.0%);
  --Red-Red-gradient-dark: linear-gradient(180deg, #D53248 0.0%, #CC0924 100.0%);
  --Red-Red-gradient-base: linear-gradient(180deg, #DD3B51 0.0%, #E20A28 100.0%);
  --Red-Red-gradient-light: linear-gradient(180deg, #FF526A 0.0%, #F42241 100.0%);
  --Purple-Purple-gradient-dark: linear-gradient(180deg, #FFFFFF 0.0%, #7667CC 100.0%);
  --Purple-Purple-gradient-base: linear-gradient(180deg, #FFFFFF 0.0%, #9481FF 100.0%);
  --Purple-Purple-gradient-light: linear-gradient(180deg, #FFFFFF 0.0%, #A99AFF 100.0%);
  --Blue-Blue-gradient-dark: linear-gradient(180deg, #FFFFFF 0.0%, #5588CB 100.0%);
  --Blue-Blue-gradient-base: linear-gradient(180deg, #FFFFFF 0.0%, #6AAAFE 100.0%);
  --Blue-Blue-gradient-light: linear-gradient(180deg, #FFFFFF 0.0%, #88BBFE 100.0%);
  --Multiplication-1-2: linear-gradient(180deg, #FFFFFF 0.0%, #DCDCDC 100.0%);
  --Multiplication-2-10: linear-gradient(180deg, #00D651 0.0%, #00AF40 100.0%);
  --Multiplication-10-plus: linear-gradient(180deg, #FFFB61 0.0%, #FFE721 100.0%);
  --Multiplication-max: linear-gradient(0deg, #FCDD12, #FCDD12), linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  --Additional-Primary: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 50.0%, rgba(255, 255, 255, 0.00) 100.0%), rgba(255, 255, 255, 0.80);
  --Additional-Overlay-gradient-up: linear-gradient(180deg, rgba(0, 0, 0, 1.00) 0.0%, rgba(0, 0, 0, 0.60) 59.5%, rgba(0, 0, 0, 0.00) 100.0%);
  --Additional-Overlay-gradient-down: linear-gradient(180deg, rgba(0, 0, 0, 1.00) 0.0%, rgba(0, 0, 0, 0.60) 59.5%, rgba(0, 0, 0, 0.00) 100.0%);
  --Additional-Timer-overlay: radial-gradient(circle, rgba(255, 110, 110, 0.00) 0.0%, rgba(255, 110, 110, 1.00) 100.0%);
  --Additional-Green-gradient: linear-gradient(180deg, rgba(66, 200, 84, 0.00) 0.0%, rgba(66, 200, 84, 1.00) 100.0%);

  --font-family: 'Inter';
  --font-family-number: 'Roboto';
  --font-size-text-xxs: 0.5rem;
  --font-size-text-xs: 0.625rem;
  --font-size-text-sm: 0.75rem;
  --font-size-text-base: 0.875rem;
  --font-size-text-lg: 1rem;
  --font-size-text-xl: 1.125rem;
  --font-size-text-2xl: 1.25rem;
  --font-size-text-3xl: 1.5rem;
  --font-size-text-4xl: 2rem;
  --font-size-text-5xl: 2.5rem;
  --font-size-text-6xl: 3rem;
  --font-size-text-7xl: 3.5rem;

  --line-height-text-xxs: 0.7rem;
  --line-height-text-xs: 0.875rem;
  --line-height-text-sm: 1rem;
  --line-height-text-base: 1.125rem;
  --line-height-text-lg: 1.25rem;
  --line-height-text-xl: 1.375rem;
  --line-height-text-2xl: 1.5rem;
  --line-height-text-3xl: 1.875rem;
  --line-height-text-4xl: 2.5rem;
  --line-height-text-5xl: 3rem;
  --line-height-text-6xl: 3.5rem;
  --line-height-text-7xl: 4rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;

  --letter-spacing-normal: 0;
  --letter-spacing-caps: 0.02em;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-l: 1rem;
  --radius-xl: 1.25rem;
  --radius-xxl: 1.5rem;
  --radius-max: 625rem;

  --shadow-xs: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.16);
  --shadow-s: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.16);
  --shadow-m: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
  --shadow-l: 0 0.75rem 1.25rem 0 rgba(0, 0, 0, 0.16);
  --shadow-Timer-overlay: inset 0 0 8.75rem 0 rgba(254, 94, 97, 0.32);
  --shadow-Bet-button: 0 0 0 1px rgba(255, 255, 255, 0.30) inset, 0 3px 7px 0 rgba(0, 0, 0, 0.40), 0 -1px 2px 0 rgba(0, 0, 0, 0.16) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.48) inset;
  --shadow-Default-button: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.12);
  --blur-Primary: 2rem;
  --blur-Additional: 4rem;
  --blur-Default-button: 1rem;

  --gradient-border-width: 1px;
  --additional-gradient: linear-gradient(98deg, rgba(255, 255, 255, 0.16) 5.04%, rgba(204, 204, 204, 0.00) 53.7%, rgba(255, 255, 255, 0.16) 101.87%);
  --background-layout-canvas: radial-gradient(64.12% 25.5% at 50% 0.61%, rgba(255, 255, 255, 0.16) 0%, rgba(27, 26, 26, 0.16) 100%), #191924;

}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-family), sans-serif;
  margin: 0;
  background-color: var(--background-layout-Pure);
  color: var(--Text-Icons-Primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

button {
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
}

label {
  cursor: pointer;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.none {
  display: none !important;
}

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2rem;
  height: 1.25rem;
  cursor: pointer;
  user-select: none;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-components-Default);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  left: 0.125rem;
  top: 0.0625rem;
  background-color: var(--Text-Icons-Secondary);
  border-radius: var(--radius-max);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.toggle-input:checked+.toggle-slider {
  background-color: var(--Green-Green-op-15);
  border-color: rgba(255, 255, 255, 0.16);
}

.toggle-input:checked+.toggle-slider::before {
  transform: translateX(0.75rem);
  background-color: var(--Text-Icons-Primary);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-max);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-weight-bold);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.btn-primary {
  background-color: var(--Primary-Primary-base);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: var(--shadow-Default-button);
  color: var(--Base-Base-black);
}

.btn-primary:hover {
  background-color: var(--Primary-Primary-dark);
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--Primary-Primary-light);
}

.btn-secondary {
  background-color: var(--background-components-Default);
  border-color: transparent;
  box-shadow: var(--shadow-Default-button);
  /* backdrop-filter: blur(var(--blur-Default-button)); */
  color: var(--Text-Icons-Primary);
  overflow: hidden;
  background-clip: padding-box;
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover {
    background-color: var(--background-components-Hover);
  }
}

.btn-secondary:active,
.btn-secondary.active {
  background-color: var(--background-components-Press);
}

.btn-tertiary {
  background-color: transparent;
  color: var(--Text-Icons-Primary);
}

.btn-tertiary:hover {
  background-color: var(--background-components-Default);
}

.btn-tertiary:active,
.btn-tertiary.active {
  background-color: var(--background-components-Hover);
}

.btn-sm {
  height: 1.5rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
}

.btn-sm svg.icon {
  width: 1rem;
  height: 1rem;
}

.btn-md {
  height: 2rem;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-text-base);
  line-height: var(--line-height-text-base);
}

.btn-md svg.icon {
  width: 1.25rem;
  height: 1.25rem;
}

.btn-lg {
  height: 3rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}

.btn-lg svg.icon {
  width: 1.25rem;
  height: 1.25rem;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.btn-primary:disabled {
  background-color: var(--background-components-Default);
  background-image: none;
  box-shadow: none;
}

.btn-secondary:disabled {
  background-color: var(--background-components-Disable);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  backdrop-filter: none;
}

.btn-secondary:disabled::after {
  background: rgba(255, 255, 255, 0.05);
}

.btn-tertiary:disabled {
  background-color: transparent;
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-max);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.btn-icon-primary {
  background-color: var(--Primary-Primary-base);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: var(--shadow-Default-button);
  color: var(--Base-Base-black);
}

.btn-icon-primary:hover {
  background-color: var(--Primary-Primary-dark);
}

.btn-icon-primary:active,
.btn-icon-primary.active {
  background-color: var(--Primary-Primary-light);
}

.btn-icon-primary:disabled {
  background-color: var(--background-components-Default);
  background-image: none;
  box-shadow: none;
}

.btn-icon-secondary {
  background-color: var(--background-components-Default);
  border-color: transparent;
  box-shadow: var(--shadow-Default-button);
  /* backdrop-filter: blur(var(--blur-Default-button)); */
  color: var(--Text-Icons-Primary);
  background-clip: padding-box;
}

@media (hover: hover) and (pointer: fine) {
  .btn-icon-secondary:hover {
    background-color: var(--background-components-Hover);
  }
}

.btn-icon-secondary:active,
.btn-icon-secondary.active {
  background-color: var(--background-components-Press);
}

.btn-icon-secondary:disabled {
  background-color: var(--background-components-Disable);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  backdrop-filter: none;
}

.btn-icon-secondary:disabled::after {
  background: rgba(255, 255, 255, 0.05);
}

.btn-icon-tertiary {
  background-color: transparent;
  color: var(--Text-Icons-Primary);
}

.btn-icon-tertiary:hover {
  background-color: var(--background-components-Default);
}

.btn-icon-tertiary:active,
.btn-icon-tertiary.active {
  background-color: var(--background-components-Hover);
}

.btn-icon-tertiary:disabled {
  background-color: transparent;
}

.btn-icon svg.icon {
  position: relative;
  z-index: 1;
  display: block;
  fill: currentColor;
  flex: 0 0 auto;
  overflow: hidden;
}

.btn-icon-sm {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.1875rem;
  box-sizing: border-box;
  line-height: 0;
}

.btn-icon-sm svg.icon {
  width: 100%;
  height: 100%;
  margin: auto;
  flex: none;
  overflow: hidden;
}

.btn-icon-sm[aria-controls="multipliers-list"] {
  padding: 0;
}

.btn-icon-sm[aria-controls="multipliers-list"] svg.icon {
  width: 1rem;
  height: 1rem;
  margin: 0;
  overflow: visible;
  transition: transform 0.2s ease;
}

.btn-icon-sm[aria-controls="multipliers-list"][aria-expanded="true"] svg.icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.btn-icon-md {
  width: 2rem;
  height: 2rem;
}

.btn-icon-md svg.icon {
  width: 1.25rem;
  height: 1.25rem;
}

.btn-icon-md[aria-controls="side"] svg.icon {
  transition: transform 0.2s ease;
}

.is-side-closed .btn-icon-md[aria-controls="side"] svg.icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

[data-menu-toggle] .menu-new-dot {
  position: absolute;
  top: -2px;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(252, 42, 71, 1);
  pointer-events: none;
  z-index: 2;
  transform-origin: center;
}

[data-menu-toggle] .menu-new-dot[hidden] {
  display: none;
}

[data-menu-toggle].is-ac-spotlight-target .menu-new-dot {
  display: none;
}

[data-menu-toggle] .menu-new-dot.is-leaving {
  animation: four-mode-new-exit 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mode-new-badge {
  position: absolute;
  right: 0px;
  top: -9px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 0.25rem;
  border: none;
  border-radius: var(--radius-max);
  background: rgba(252, 42, 71, 1);
  color: var(--Base-Base-white);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: center;
}

.mode-new-badge[hidden] {
  display: none;
}

.mode-new-badge.is-leaving {
  animation: four-mode-new-exit 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes four-mode-new-exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-menu-toggle] .menu-new-dot.is-leaving,
  .mode-new-badge.is-leaving {
    animation-duration: 0.01ms;
  }
}

[data-menu-toggle] .icon-menu,
[data-menu-toggle] .icon-close {
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-menu-toggle] .icon-close {
  position: absolute !important;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.6);
}

[data-menu-toggle][aria-expanded="true"] .icon-menu {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

[data-menu-toggle][aria-expanded="true"] .icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-menu-toggle] .icon-menu,
  [data-menu-toggle] .icon-close {
    transition: none;
  }
}

.btn-icon-lg {
  width: 3rem;
  height: 3rem;
}

.btn-icon-lg svg.icon {
  width: 1.25rem;
  height: 1.25rem;
}

.btn-icon:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.btn-bet {
  --btn-bet-y: 0;
  --btn-bet-scale: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 11.0625rem;
  border-radius: var(--radius-l);
  border: none;
  position: relative;
  box-shadow: var(--shadow-Bet-button);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transform: translateY(var(--btn-bet-y)) scale(var(--btn-bet-scale));
  transform-origin: center;
  backface-visibility: hidden;
  transition:
          background-color 0.1s ease,
          box-shadow 0.1s ease,
          transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  background: var(--Primary-Primary-gradient-base);
}

.btn-bet:focus {
  opacity: 1 !important;
}

.btn-bet.btn-bet--loading {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.btn-bet.btn-bet--loading .place-bet-div,
.btn-bet.btn-bet--loading .cancel-bet-div,
.btn-bet.btn-bet--loading .cash-out-div,
.btn-bet.btn-bet--loading .disable-div {
  visibility: hidden;
  opacity: 0 !important;
}

.btn-bet.btn-bet--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='10' y1='2' x2='10' y2='5.5'/%3E%3Cline x1='15.66' y1='4.34' x2='13.18' y2='6.82' opacity='.875'/%3E%3Cline x1='18' y1='10' x2='14.5' y2='10' opacity='.75'/%3E%3Cline x1='15.66' y1='15.66' x2='13.18' y2='13.18' opacity='.625'/%3E%3Cline x1='10' y1='18' x2='10' y2='14.5' opacity='.5'/%3E%3Cline x1='4.34' y1='15.66' x2='6.82' y2='13.18' opacity='.375'/%3E%3Cline x1='2' y1='10' x2='5.5' y2='10' opacity='.25'/%3E%3Cline x1='4.34' y1='4.34' x2='6.82' y2='6.82' opacity='.125'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='10' y1='2' x2='10' y2='5.5'/%3E%3Cline x1='15.66' y1='4.34' x2='13.18' y2='6.82' opacity='.875'/%3E%3Cline x1='18' y1='10' x2='14.5' y2='10' opacity='.75'/%3E%3Cline x1='15.66' y1='15.66' x2='13.18' y2='13.18' opacity='.625'/%3E%3Cline x1='10' y1='18' x2='10' y2='14.5' opacity='.5'/%3E%3Cline x1='4.34' y1='15.66' x2='6.82' y2='13.18' opacity='.375'/%3E%3Cline x1='2' y1='10' x2='5.5' y2='10' opacity='.25'/%3E%3Cline x1='4.34' y1='4.34' x2='6.82' y2='6.82' opacity='.125'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: btn-bet-spin 0.8s steps(8) infinite;
}

.btn-bet.place-bet.btn-bet--loading::after {
  background-color: rgba(0, 0, 0, 0.72);
}

@keyframes btn-bet-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-bet-md {
  height: 4rem;
  padding: 0.6875rem 0.5rem;
}

.btn-bet-lg {
  height: 4.5rem;
  padding: 0.6875rem 0.5rem;
}

.btn-bet.place-bet {
  background: var(--Primary-Primary-gradient-base);
  transition: none;
}

.btn-bet.place-bet:hover {
  background: var(--Primary-Primary-gradient-dark);
  transition: none;
}

.btn-bet.place-bet:active,
.btn-bet.place-bet.active {
  background: var(--Primary-Primary-gradient-light);
  transition: none;
}

.btn-bet.place-bet.disabled,
.btn-bet.place-bet:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  pointer-events: none;
}

.btn-bet.place-bet.disabled:hover,
.btn-bet.place-bet:disabled:hover {
  background: var(--Primary-Primary-gradient-base);
  transition: none;
}

.btn-bet.cash-out {
  background: var(--Green-Green-gradient-base);
  transition: none;
}

.btn-bet.cash-out:hover {
  background: var(--Green-Green-gradient-dark);
  transition: none;
}

.btn-bet.cash-out:active,
.btn-bet.cash-out.active {
  background: var(--Green-Green-gradient-light);
  transition: none;
}

.btn-bet.cancel-bet {
  background: var(--Red-Red-gradient-base);
  transition: none;
}

.btn-bet.cancel-bet:hover {
  background: var(--Red-Red-gradient-dark);
  transition: none;
}

.btn-bet.cancel-bet:active,
.btn-bet.cancel-bet.active {
  background: var(--Red-Red-gradient-light);
  transition: none;
}

.btn-bet.disable {
  cursor: default;
  opacity: 0.5 !important;
  background: var(--Green-Green-base, #42C854);
  transition: none;
}

.btn-bet.disable:hover {
  opacity: 0.5 !important;
  background: var(--Green-Green-base, #42C854);
  transition: none;
}

.btn-bet.disable:active,
.btn-bet.disable.active {
  opacity: 0.5 !important;
  background: var(--Green-Green-base, #42C854);
  transition: none;
}

.btn-bet > span {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: inherit;
  box-sizing: border-box;
  gap: 0.125rem;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0.25rem, 0);
  visibility: hidden;
  transition:
          opacity 0.14s ease,
          transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
          visibility 0s linear 0.18s;
}

.btn-bet.place-bet .place-bet-div,
.btn-bet.cancel-bet .cancel-bet-div,
.btn-bet.cash-out .cash-out-div,
.btn-bet.disable .disable-div {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition-delay: 0s;
}

.btn-bet__value {
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-xl);
  color: var(--Base-Base-black);
  z-index: 3;
  pointer-events: none;
  text-shadow: none;
  transition: color 0.2s ease;
}

.btn-bet__label {
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-base);
  color: var(--Base-Base-black-50);
  z-index: 3;
  pointer-events: none;
  text-shadow: none;
  transition: color 0.2s ease;
}


.btn-bet.cash-out .btn-bet__value,
.btn-bet.cancel-bet .btn-bet__value,
.btn-bet.disable .btn-bet__value {
  color: var(--Base-Base-white);
}

.btn-bet.cash-out .btn-bet__value {
  font-variant-numeric: tabular-nums;
}

.btn-bet.cash-out .btn-bet__label,
.btn-bet.cancel-bet .btn-bet__label,
.btn-bet.disable .btn-bet__label {
  color: var(--Base-Base-white-50);
}

.bet-card.disabled .toggle,
.bet-card.disabled .auto-text:not(.autoplay-text),
.bet-card.disabled .toggle-input,
.bet-card.disabled .bet-input-btn,
.bet-card.disabled .bet-input-field,
.bet-card.disabled .chip,
.bet-card.disabled .collect-field {
  pointer-events: none;
}

.bet-card.disabled .auto-text:not(.autoplay-text) {
  color: var(--Text-Icons-Disable);
}

.bet-card.disabled .toggle-input+.toggle-slider {
  background-color: var(--background-components-Disable);
  cursor: not-allowed;
}

.bet-card.disabled .toggle-input+.toggle-slider::before {
  background-color: var(--Text-Icons-Disable);
}

.bet-card.disabled .toggle-input:checked+.toggle-slider {
  background-color: var(--Green-Green-op-5);
  cursor: not-allowed;
}

.bet-card.disabled .toggle-input:checked+.toggle-slider::before {
  background-color: var(--Text-Icons-Secondary);
}

.bet-input.disabled,
.collect-input.disabled,
.bet-card.disabled .bet-input,
.bet-card.disabled .collect-input,
.chat-input.disabled {
  background-color: var(--background-components-Disable);
  border-color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
}

.collect-input.disabled:has(.collect-value),
.bet-card.disabled .collect-input:has(.collect-value) {
  background-color: transparent;
  box-shadow: none;
}

.collect-input.disabled .collect-value,
.bet-card.disabled .collect-input .collect-value {
  background-color: var(--background-components-Disable);
  box-shadow: none;
}

.bet-input.disabled .bet-input-field,
.collect-input.disabled .collect-field,
.bet-card.disabled .bet-input .bet-input-field,
.bet-card.disabled .collect-input .collect-field,
.chat-input.disabled .chat-input-field {
  cursor: not-allowed;
  color: var(--Text-Icons-Disable);
}

.bet-input.disabled .bet-input-btn,
.bet-card.disabled .bet-input .bet-input-btn,
.collect-input.disabled .bet-input-btn,
.bet-card.disabled .collect-input .bet-input-btn,
.bet-input-btn.disabled {
  color: var(--Text-Icons-Disable);
  pointer-events: none;
}

/* Allow max-bet plus clicks so we can show the limit toast */
.bet-input:not(.disabled) .bet-input-btn.plus.disabled {
  pointer-events: auto;
}

.bet-card.disabled .chip {
  background-color: var(--background-components-Disable);
  border-color: transparent;
  color: var(--Text-Icons-Disable);
  pointer-events: none;
  cursor: not-allowed;
}

.bet-card.disabled .chip span {
  background: none;
  -webkit-text-fill-color: var(--Text-Icons-Disable);
  color: var(--Text-Icons-Disable);
}

.bet-card.disabled .collect-input .collect-label,
.bet-card.disabled .collect-input .collect-suffix {
  color: var(--Text-Icons-Disable);
}

.bet-card.disabled .collect-input .collect-fill {

}


.btn-autoplay {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  min-width: 1.25rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  height: 1.25rem;
  box-sizing: border-box;
  color: var(--Text-Icons-Secondary);
  overflow: visible;
  transform-origin: center;
  transition:
          width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
          flex-basis 0.22s cubic-bezier(0.4, 0, 0.2, 1),
          color 0.2s ease;
  user-select: none;
}

.btn-autoplay:hover {
  color: var(--Text-Icons-Primary);
}

.btn-autoplay-active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 2.375rem;
  width: 2.375rem;
  min-width: 2.375rem;
  height: 1.25rem;
  padding: 0 0.125rem 0 0;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  color: var(--Text-Icons-Secondary);
}

.btn-autoplay-state-exit {
  justify-content: flex-start;
  padding: 0 0.125rem 0 0;
  border-radius: var(--radius-sm);
}

.btn-autoplay-active:hover {}

.btn-autoplay svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  fill: currentColor;
  display: block;
  /* Avoid idle transform-box — iOS Safari recalculates fill-box on sibling reflow (collect toggle) */
  transform-origin: center;
}

.btn-autoplay-state-enter svg.icon,
.btn-autoplay-state-exit svg.icon {
  transform-box: fill-box;
}

.btn-autoplay svg.icon-arrow {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.autoplay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-max);
  background-color: var(--Primary-Primary-base);
  color: var(--Base-Base-black);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
  box-sizing: border-box;
}

.autoplay-badge svg.icon {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

.btn-autoplay-active .autoplay-badge,
.btn-autoplay-state-exit .autoplay-badge {
  position: absolute;
  left: 11px; /*8*/
  top: -11px; /*-11*/
  width: auto;
  min-width: 16px;
  height: 16px;
  z-index: 10;
  border: none;
}

.btn-autoplay-state-enter {
  animation: autoplay-state-enter 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-autoplay-state-exit {
  animation: autoplay-state-exit 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-autoplay-state-enter svg.icon {
  animation: autoplay-icon-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-autoplay-state-exit svg.icon {
  animation: autoplay-icon-exit 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-autoplay-state-enter .autoplay-badge {
  animation: autoplay-badge-enter 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-autoplay-state-exit .autoplay-badge {
  animation: autoplay-badge-exit 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.btn-autoplay-state-enter svg.icon-arrow {
  animation: autoplay-arrow-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-autoplay-state-exit svg.icon-arrow {
  animation: autoplay-arrow-exit 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes autoplay-state-enter {
  0% {
    transform: scale(0.92);
  }

  68% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes autoplay-state-exit {
  0% {
    transform: scale(1);
  }

  58% {
    transform: scale(0.94);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes autoplay-icon-enter {
  0% {
    opacity: 0.35;
    transform: scale(0.72) rotate(-180deg);
  }

  72% {
    opacity: 1;
    transform: scale(1.08) rotate(18deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes autoplay-icon-exit {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0.55;
    transform: scale(0.82) rotate(180deg);
  }
}

@keyframes autoplay-badge-enter {
  0% {
    opacity: 0;
    transform: scale(0.32) translateY(0.25rem);
  }

  72% {
    opacity: 1;
    transform: scale(1.12) translateY(-0.0625rem);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes autoplay-badge-exit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.4) translateY(0.25rem);
  }
}

@keyframes autoplay-arrow-enter {
  0% {
    opacity: 0;
    transform: translateX(-0.25rem) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes autoplay-arrow-exit {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-0.25rem) scale(0.7);
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-max);
  box-shadow: var(--shadow-s);
  box-sizing: border-box;
}

.badge-num {
  height: 1rem;
  max-width: fit-content;
  padding: 0 0.25rem;
  color: var(--Base-Base-black);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
}

.badge-dot {
  width: 0.375rem;
  height: 0.375rem;
}

.badge-primary {
  background-color: var(--Primary-Primary-base);
}

.badge-green {
  background-color: var(--Green-Green-base);
}

.badge-red {
  background-color: var(--Red-base);
}

.badge-purple {
  background-color: var(--Purple-Purple-base);
}

.badge-blue {
  background-color: var(--Blue-Blue-base);
}

.bet-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 10.28125rem;
  height: 2rem;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  box-sizing: border-box;
  padding: 0 0.5rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bet-input:hover {
  background-color: var(--background-components-Hover);
}

.bet-input:focus-within {
  background-color: var(--background-components-Press);
  border-color: rgba(255, 255, 255, 0.24);
}

.bet-input-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--Text-Icons-Primary);
  transition: color 0.2s ease;
  z-index: 2;
  position: relative;
}

.bet-input-btn:not(.disabled):hover {
  color: var(--Text-Icons-Secondary);
}

.bet-input-btn svg.icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.bet-input-field {
  flex: 1;
  width: 0;
  border: none;
  background: transparent;
  text-align: center;
  outline: none;
  padding: 0;
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
}

.bet-input-field--base {
  font-size: var(--font-size-text-base);
  line-height: var(--line-height-text-base);
}

.bet-input-field--lg {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}

.collect-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 11.5rem;
  height: 2rem;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  border: none;
  box-shadow: var(--shadow-xs);
  box-sizing: border-box;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.collect-input:hover {
  background-color: var(--background-components-Hover);
}

.collect-input:focus-within {
  background-color: var(--background-components-Press);
}

.collect-input:has(.collect-value) {
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.collect-input:has(.collect-value):hover,
.collect-input:has(.collect-value):focus-within {
  background-color: transparent;
}

.collect-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(66, 200, 84, 0) 0%, rgba(66, 200, 84, 0.32) 100%);
  transition: width 0.2s ease;
  z-index: 1;
}

.collect-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 0.75rem;
  gap: 0.5rem;
  box-sizing: border-box;
  cursor: text;
}

.collect-field {
  flex: 1;
  width: 0;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  text-align: right;
  padding: 0;
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-base);
}

.collect-input:focus,
.collect-input:focus-visible,
.collect-content:focus,
.collect-content:focus-visible,
.collect-field:focus,
.collect-field:focus-visible {
  outline: none;
  box-shadow: none;
}

.collect-input:has(.collect-value) .collect-content {
  padding: 0;
  gap: 0;
  cursor: default;
}

.collect-input:has(.collect-value) .collect-label {
  flex: 1 1 45%;
  width: 45%;
  min-width: 0;
  display: block;
  align-self: center;
  padding: 0 0.4rem 0 0.5rem;
  cursor: default;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}

.collect-value {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 55%;
  width: 55%;
  min-width: 0;
  height: 100%;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  box-shadow: var(--shadow-xs);
  box-sizing: border-box;
  overflow: hidden;
  transform-origin: right center;
}

.collect-input:has(.collect-value):hover .collect-value,
.collect-input:has(.collect-value):focus-within .collect-value {
  background-color: var(--background-components-Default);
}

.collect-value .collect-fill {
  pointer-events: none;
}

.collect-value .collect-field,
.collect-value .collect-suffix {
  position: relative;
  z-index: 2;
}

.collect-value-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  gap: 0.12em;
  padding: 0 0.1rem;
  box-sizing: border-box;
  overflow: hidden;
  cursor: text;
  white-space: nowrap;
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-base);
  color: var(--Text-Icons-Primary);
}

.collect-value-amount .collect-field {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  field-sizing: content;
  text-align: right;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  padding: 0 0 0 0;
  box-sizing: content-box;
  overflow: visible;
}

.collect-value-amount .collect-suffix {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
}

.collect-value .bet-input-btn {
  flex: 0 0 auto;
  width: 1rem;
  min-width: 1rem;
  height: 100%;
  padding: 0;
  margin: 0.4rem;
}

.collect-value .bet-input-btn.plus {
  margin-left: 0;
}


.collect-value .bet-input-btn.minus {
  margin-right: 0;
}

.collect-value .bet-input-btn svg.icon {
  width: 1rem;
  height: 1rem;
}

.collect-label {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
}

.collect-suffix {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-base);
  margin-left: -5px;
  pointer-events: none;
}

.collect-input--inactive .collect-field,
.collect-input--inactive .collect-suffix,
.collect-placeholder {
  color: var(--Text-Icons-Placeholder);
  -webkit-text-fill-color: var(--Text-Icons-Placeholder);
  opacity: 1;
}

.collect-input.disabled .collect-value-amount .collect-field,
.collect-input.disabled .collect-value-amount .collect-suffix,
.bet-card.disabled .collect-value-amount .collect-field,
.bet-card.disabled .collect-value-amount .collect-suffix {
  color: var(--Text-Icons-Disable);
  -webkit-text-fill-color: var(--Text-Icons-Disable);
  opacity: 1;
}

.chat-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 20rem;
  height: 2.25rem;
  gap: 0.5rem;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  border: 1px solid transparent;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.chat-input:hover {
  background-color: var(--background-components-Hover);
}

.chat-input:focus-within {
  background-color: var(--background-components-Press);
  border-color: rgba(255, 255, 255, 0.24);
}

.chat-input-field {
  flex: 1;
  width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-base);
}

.chat-input-field::placeholder {
  color: var(--Text-Icons-Tertiary);
}

.chat-input-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-max);
  color: var(--Text-Icons-Secondary);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.chat-input-send.timer svg.icon {
  display: none;
}

.chat-input-send span {
  display: none;
}

.chat-input-send.timer span {
  display: flex;
  font-variant-numeric: tabular-nums;
}

.chat-input-send-active {
  color: var(--Primary-Primary-base);
}

@media (hover: hover) and (pointer: fine) {
  .chat-input-send:hover {
    color: var(--Text-Icons-Primary);
    background-color: var(--background-components-Hover);
  }
}

.chat-input-send:active {
  background-color: var(--background-components-Press);
}

.chat-input-send svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.chat-input.disabled {
  background-color: var(--background-components-Disable);
  border-color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
}

.chat-input.disabled .chat-input-field {
  cursor: not-allowed;
  color: var(--Text-Icons-Disable);
}


.keyboard {
  display: inline-flex;
  flex-direction: column;
  width: 20.5rem;
  max-width: 100%;
  gap: 0.5rem;
  box-sizing: border-box;
}

.keyboard-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.keyboard-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xl);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.keyboard-key:hover,
.keyboard-key--hover {
  background-color: var(--background-components-Hover);
}

.keyboard-key:active,
.keyboard-key--press {
  background-color: var(--background-components-Press);
}

.keyboard-key:disabled,
.keyboard-key--disabled {
  background-color: var(--background-components-Disable);
  color: var(--Text-Icons-Disable);
  cursor: not-allowed;
  pointer-events: none;
}

.keyboard-key svg.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.autobet-selector {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0.75rem;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.autobet-selector:hover,
.autobet-selector--hover {
  background-color: var(--background-components-Hover);
}

.autobet-selector:active,
.autobet-selector--press {
  background-color: var(--background-components-Press);
}

.autobet-selector--selected {
  border-color: var(--Primary-Primary-base);
  background-color: var(--Primary-Primary-op-10);
}

.autobet-selector__value {
  color: var(--Text-Icons-Primary);
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem;
}

.autobet-selector__value svg.icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

.autobet-selector__label {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
}


.mode-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 8.1875rem;
  height: 3rem;
  padding: 0.25rem;
  gap: 0.5rem;
  border: 1px solid var(--Base-Base-white-10);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--Text-Icons-Primary);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mode-card:hover,
.mode-card--hover {
  background-color: var(--background-components-Hover);
}

.mode-card:active,
.mode-card--press {
  background-color: var(--background-components-Press);
}

.mode-card--active {
  border-color: var(--Primary-Primary-base);
  background-color: var(--Primary-Primary-op-5);
}

.mode-card--disabled,
.mode-card:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

.mode-card--disabled.mode-card--bet-locked,
.mode-card--disabled.mode-card--gift-locked {
  pointer-events: auto;
}

.mode-card-wrap {
  position: relative;
  min-width: 0;
}

.mode-grid .mode-card-wrap .mode-card {
  width: 100%;
}

.mode-switch-warning {
  position: absolute;
  z-index: 2;
  left: calc(50% - (27 / 86) * 13.75rem);
  bottom: calc(100% + 0.375rem);
  width: 13.75rem;
  height: 5.25rem;
  pointer-events: none;
  box-sizing: border-box;
}

.gifts-popup__use-wrap .mode-switch-warning {
  left: calc(50% - (27 / 54) * 13.75rem);
}

.mode-switch-warning.is-visible {
  pointer-events: auto;
  animation: mode-switch-warning-in 0.2s ease-out both;
}

.mode-switch-warning--leaving {
  animation: mode-switch-warning-out 0.24s ease-in both;
}

.mode-switch-warning__blur {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 84' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M22 1H198C209.598 1 219 10.402 219 22V54C219 65.598 209.598 75 198 75H41.9268C37.1735 75 32.7728 77.5075 30.3496 81.5967C29.5749 82.9035 27.6828 82.9036 26.9082 81.5967L23.5097 75.8603C23.1938 75.327 22.6199 75 22 75C10.402 75 1 65.598 1 54V22C1 10.402 10.402 1 22 1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 84' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M22 1H198C209.598 1 219 10.402 219 22V54C219 65.598 209.598 75 198 75H41.9268C37.1735 75 32.7728 77.5075 30.3496 81.5967C29.5749 82.9035 27.6828 82.9036 26.9082 81.5967L23.5097 75.8603C23.1938 75.327 22.6199 75 22 75C10.402 75 1 65.598 1 54V22C1 10.402 10.402 1 22 1Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.mode-switch-warning.is-visible .mode-switch-warning__blur {
  animation: mode-switch-warning-blur-in 0.2s ease-out both;
}

.mode-switch-warning__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.mode-switch-warning__shape path {
  fill: var(--background-components-Op-50, rgba(0, 0, 0, 0.50));
}

.mode-switch-warning__text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.75rem 1rem 1.375rem;
  color: var(--Primary-Primary-base, #fcdd12);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.mode-switch-warning.is-visible .mode-switch-warning__text,
.mode-switch-warning.is-visible .mode-switch-warning__shape {
  animation: mode-switch-warning-fade-in 0.2s ease-out both;
}

.mode-switch-warning--leaving .mode-switch-warning__text,
.mode-switch-warning--leaving .mode-switch-warning__shape,
.mode-switch-warning--leaving .mode-switch-warning__blur {
  animation: mode-switch-warning-fade-out 0.24s ease-in both;
}

@keyframes mode-switch-warning-in {
  from {
    transform: translateY(0.375rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mode-switch-warning-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.375rem);
  }
}

@keyframes mode-switch-warning-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mode-switch-warning-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mode-switch-warning-blur-in {
  from {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  to {
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
  }
}

.mode-switch-warning--below {
  top: calc(100% + 0.375rem);
  bottom: auto;
  left: 0;
}

.mode-switch-warning--below .mode-switch-warning__blur,
.mode-switch-warning--below .mode-switch-warning__shape {
  transform: scaleY(-1);
}

.mode-switch-warning--below .mode-switch-warning__text {
  padding: 1.375rem 1rem 0.75rem;
}

.mode-switch-warning--below.is-visible {
  animation: mode-switch-warning-in-below 0.2s ease-out both;
}

.mode-switch-warning--below.mode-switch-warning--leaving {
  animation: mode-switch-warning-out-below 0.24s ease-in both;
}

@keyframes mode-switch-warning-in-below {
  from {
    transform: translateY(-0.375rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mode-switch-warning-out-below {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(0.375rem);
  }
}

.ac-spotlight {
  --ac-spot-top: 0px;
  --ac-spot-left: 0px;
  --ac-spot-width: 0px;
  --ac-spot-height: 0px;
  --ac-spot-pad: 4px;
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.ac-spotlight[hidden] {
  display: none;
}

.ac-spotlight.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .ac-spotlight {
    transition: none;
  }
}

.ac-spotlight__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  clip-path: polygon(
    evenodd,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    var(--ac-spot-left) var(--ac-spot-top),
    calc(var(--ac-spot-left) + var(--ac-spot-width)) var(--ac-spot-top),
    calc(var(--ac-spot-left) + var(--ac-spot-width)) calc(var(--ac-spot-top) + var(--ac-spot-height)),
    var(--ac-spot-left) calc(var(--ac-spot-top) + var(--ac-spot-height))
  );
}

.ac-spotlight:not(.is-visible) .ac-spotlight__backdrop,
.ac-spotlight:not(.is-visible) .ac-spotlight__hint {
  pointer-events: none;
}

.ac-spotlight__highlight {
  position: absolute;
  top: calc(var(--ac-spot-top) - var(--ac-spot-pad));
  left: calc(var(--ac-spot-left) - var(--ac-spot-pad));
  width: calc(var(--ac-spot-width) + var(--ac-spot-pad) * 2);
  height: calc(var(--ac-spot-height) + var(--ac-spot-pad) * 2);
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid var(--Primary-Primary-base, #FCDD12);
  border-radius: var(--radius-max);
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.collect-input.is-ac-spotlight-target,
.collect-input.is-ac-spotlight-target:has(.collect-value) {
  overflow: hidden;
  border-radius: var(--radius-max);
}

.ac-spotlight.is-ac-settings-spot {
  --ac-spot-pad: 0.375rem;
}

.btn-ac-settings.is-ac-spotlight-target,
[data-menu-toggle].is-ac-spotlight-target {
  border-radius: var(--radius-max);
}

.ac-spotlight.is-ac-menu-spot {
  --ac-spot-pad: 0.1875rem;
}

.ac-spotlight.is-ac-menu-spot .ac-spotlight__highlight {
  border-color: transparent;
}

.ac-spotlight.is-ac-menu-spot .ac-spotlight__hint {
  top: calc(100% + 0.1875rem);
  bottom: auto;
  width: min(15.3125rem, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
}

.ac-spotlight.is-ac-menu-spot .ac-spotlight__hint-body {
  padding: 1rem 0.5rem 0.5rem 0.75rem;
}

.ac-spotlight.is-ac-menu-spot .ac-spotlight__hint .mode-switch-warning__blur {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 53' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M50.2861 50.999C49.8858 51.5086 49.1142 51.5086 48.7139 50.999L46.4023 48.0572C44.8856 46.127 42.5667 45 40.1119 45H23C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1H222C234.15 1 244 10.8497 244 23C244 35.1503 234.15 45 222 45H58.8881C56.4333 45 54.1144 46.127 52.5977 48.0572L50.2861 50.999Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 53' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M50.2861 50.999C49.8858 51.5086 49.1142 51.5086 48.7139 50.999L46.4023 48.0572C44.8856 46.127 42.5667 45 40.1119 45H23C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1H222C234.15 1 244 10.8497 244 23C244 35.1503 234.15 45 222 45H58.8881C56.4333 45 54.1144 46.127 52.5977 48.0572L50.2861 50.999Z'/%3E%3C/svg%3E");
}

.ac-spotlight.is-ac-menu-spot .ac-spotlight__highlight.is-tail-end .ac-spotlight__hint .mode-switch-warning__blur {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 53' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M30.2861 50.999C29.8858 51.5086 29.1142 51.5086 28.7139 50.999L26.4023 48.0572C24.8856 46.127 22.5667 45 20.1119 45H23C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1H222C234.15 1 244 10.8497 244 23C244 35.1503 234.15 45 222 45H38.8881C36.4333 45 34.1144 46.127 32.5977 48.0572L30.2861 50.999Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 53' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M30.2861 50.999C29.8858 51.5086 29.1142 51.5086 28.7139 50.999L26.4023 48.0572C24.8856 46.127 22.5667 45 20.1119 45H23C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1H222C234.15 1 244 10.8497 244 23C244 35.1503 234.15 45 222 45H38.8881C36.4333 45 34.1144 46.127 32.5977 48.0572L30.2861 50.999Z'/%3E%3C/svg%3E");
}

.ac-spotlight.is-ac-menu-spot .mode-switch-warning__blur,
.ac-spotlight.is-ac-menu-spot .mode-switch-warning__shape {
  transform: scaleY(-1);
}

.ac-spotlight.is-ac-menu-spot .ac-spotlight__highlight.is-tail-end .mode-switch-warning__blur,
.ac-spotlight.is-ac-menu-spot .ac-spotlight__highlight.is-tail-end .mode-switch-warning__shape {
  transform: scale(-1, -1);
}

.ac-spotlight.is-ac-menu-spot .mode-switch-warning.is-visible {
  animation-name: ac-spotlight-hint-below-in;
}

.ac-spotlight.is-ac-menu-spot .mode-switch-warning--leaving {
  animation-name: ac-spotlight-hint-below-out;
}

@keyframes ac-spotlight-hint-below-in {
  from {
    transform: translateY(-0.375rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ac-spotlight-hint-below-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(0.375rem);
  }
}

@media (orientation: landscape) and (max-width: 63.9375rem) and (max-height: 30rem) {
  .ac-spotlight.is-ac-settings-spot .ac-spotlight__hint {
    top: calc(100% + 0.375rem);
    bottom: auto;
  }

  .ac-spotlight.is-ac-settings-spot .ac-spotlight__hint-body {
    padding: 1rem 0.5rem 0.5rem 0.75rem;
  }

  .ac-spotlight.is-ac-settings-spot .mode-switch-warning__blur,
  .ac-spotlight.is-ac-settings-spot .mode-switch-warning__shape {
    transform: scaleY(-1);
  }

  .ac-spotlight.is-ac-settings-spot .mode-switch-warning.is-visible {
    animation-name: ac-spotlight-hint-below-in;
  }

  .ac-spotlight.is-ac-settings-spot .mode-switch-warning--leaving {
    animation-name: ac-spotlight-hint-below-out;
  }
}

.ac-spotlight__hint {
  z-index: 10;
  width: 15.3125rem;
  min-height: 3.3125rem;
  height: auto;
  left: var(--ac-spot-pad);
}

.ac-spotlight__hint .mode-switch-warning__blur {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 53' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M40.2861 50.999C39.8858 51.5086 39.1142 51.5086 38.7139 50.999L36.4023 48.0572C34.8856 46.127 32.5667 45 30.1119 45H23C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1H222C234.15 1 244 10.8497 244 23C244 35.1503 234.15 45 222 45H48.8881C46.4333 45 44.1144 46.127 42.5977 48.0572L40.2861 50.999Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 53' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M40.2861 50.999C39.8858 51.5086 39.1142 51.5086 38.7139 50.999L36.4023 48.0572C34.8856 46.127 32.5667 45 30.1119 45H23C10.8497 45 1 35.1503 1 23C1 10.8497 10.8497 1 23 1H222C234.15 1 244 10.8497 244 23C244 35.1503 234.15 45 222 45H48.8881C46.4333 45 44.1144 46.127 42.5977 48.0572L40.2861 50.999Z'/%3E%3C/svg%3E");
}

.ac-spotlight__hint-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.5rem 1rem 0.75rem;
  box-sizing: border-box;
}

.ac-spotlight__hint .mode-switch-warning__text {
  z-index: 2;
  justify-content: flex-start;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ac-spotlight__hint .mode-switch-warning__close {
  position: static;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-max);
  background: transparent;
  color: var(--Base-Base-white);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.ac-spotlight__hint .mode-switch-warning__close .icon,
.ac-spotlight__hint .mode-switch-warning__close .icon use {
  width: 1rem;
  height: 1rem;
  color: var(--Base-Base-white);
  fill: var(--Base-Base-white);
  stroke: none;
}

.mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: var(--radius-sm);
  color: var(--Text-Icons-Primary);
  overflow: hidden;
  transition: color 0.2s ease;
}

.mode-svg {
  --mode-icon-bg-opacity: 0.05;
  --mode-icon-fill-opacity: 0.16;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}

.mode-card--active .mode-icon {
  color: var(--Primary-Primary-base);
}

.mode-card--active .mode-svg {
  --mode-icon-fill-opacity: 1;
}

.mode-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.mode-title {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
}

.mode-subtitle {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-xs);
  white-space: nowrap;
}


.copyable-value {
  display: inline-flex;
  align-items: center;
  width: 23.125rem;
  max-width: 100%;
  min-height: 3.375rem;
  padding: 0.5rem 0.75rem;
  gap: 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.copyable-value:hover,
.copyable-value--hover {
  background-color: var(--background-components-Hover);
}

.copyable-value:active,
.copyable-value--press {
  background-color: var(--background-components-Press);
}

.copyable-value__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.copyable-value__label {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
}

.copyable-value__text {
  overflow: hidden;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copyable-value__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  color: var(--Text-Icons-Secondary);
  fill: currentColor;
}


.summary-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23.125rem;
  max-width: 100%;
  min-height: 4rem;
  padding: 0.5rem 0.25rem;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  background-color: var(--background-components-Default);
  box-sizing: border-box;
}

.summary-card__item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
}

.summary-card__label {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
  text-align: center;
}

.summary-card__value {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-base);
  text-align: center;
}


.conn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--Text-Icons-Tertiary);
  font-family: inherit;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xs);
  white-space: nowrap;
  cursor: default;
}

#ms {
  width: 2.2rem;
}

.status-connection--bad {
  color: var(--Primary-Primary-base);
}

.conn--critical {
  color: var(--Red-base);
}

.conn svg.icon,
.status svg.icon {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 0.75rem;
  fill: currentColor;
}

.status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: var(--status-w, min(51.4375rem, 100%));
  max-width: 100%;
  min-height: 0.875rem;
  padding: 0 var(--status-px, 0.75rem);
  color: var(--Text-Icons-Tertiary);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xs);
  box-sizing: border-box;
}

.status-info,
.status-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.status-dot {
  width: 0.125rem;
  height: 0.125rem;
  border-radius: var(--radius-max);
  background-color: var(--Base-Base-white-15);
}

.segments.bet-tabs {
  display: none;
  width: 10.4375rem;
  height: 2rem;
  flex: 0 0 2rem;
}

.bet-tabs .segment {
  padding: 0 1rem;
}

.has-gifts .bet-tabs--status {
  display: inline-flex;
  flex-basis: 10.4375rem;
}

.bet-tabs--dock {
  display: none;
}

.has-gifts .status {
  /* min-height: 2rem; */
}

.gift-summary {
  display: none;
  align-items: center;
  width: 100%;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  border-radius: var(--radius-l);
  background: var(--Base-Base-black-10);
  overflow: hidden;
  box-sizing: border-box;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.gift-summary__item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
}

.gift-summary__item span {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-medium);
}

.gift-summary__item strong {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  font-weight: var(--font-weight-bold);
}

.gift-summary__item strong span {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.gift-summary__item.is-win strong {
  background: var(--Green-Green-gradient-base);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gift-summary__item strong .gift-summary__total {
  color: var(--Base-Base-white-50);
}

.gift-summary__divider {
  width: 0.0625rem;
  height: 2.5rem;
  flex: 0 0 0.0625rem;
  background: var(--Base-Base-white-10);
}

.gift-dock-body {
  display: none;
  flex-direction: column;
  width: calc(100% - 2rem);
  margin-left: 1rem;
  margin-right: 1rem;
  box-sizing: border-box;
  min-height: 0;
}

.has-gifts.is-gift-mode .gift-dock-body {
  display: flex;
}

.has-gifts.is-gift-mode .gift-summary {
  display: flex;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.game-modal__header.gift-dock-header {
  display: none;
  width: 100%;
  margin: 0;
  flex: 0 0 4rem;
  align-self: stretch;
  border-radius: var(--radius-xxl) var(--radius-xxl) 0 0;
}

.gift-dock-header-title {
  font-size: var(--font-size-text-lg) !important;
  line-height: var(--line-height-text-lg) !important;
  min-width: 0;
  flex: 1 1 auto;
}

.has-gifts.is-gift-mode .game-modal__header.gift-dock-header {
  display: flex;
  overflow: visible;
}

.gift-dock-close-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  z-index: 5;
}

.gift-dock-close-wrap[hidden] {
  display: none !important;
}

.gift-dock-close-wrap .mode-switch-warning[hidden] {
  display: none !important;
}

.gift-dock-close-wrap .mode-switch-warning {
  z-index: 8;
  /* Same orientation as menu toast: above trigger, tip at bottom pointing down */
  top: auto;
  bottom: calc(100% + 0.375rem);
  /* Tip mirrored to the right side of the bubble */
  left: calc(50% - ((220 - 27) / 220) * 13.75rem);
}

.ac-spotlight__highlight.is-tail-end .ac-spotlight__hint {
  left: auto;
  right: var(--ac-spot-pad);
}

.gift-dock-close-wrap .mode-switch-warning__blur,
.gift-dock-close-wrap .mode-switch-warning__shape,
.ac-spotlight__highlight.is-tail-end .mode-switch-warning__blur,
.ac-spotlight__highlight.is-tail-end .mode-switch-warning__shape {
  transform: scaleX(-1);
}

@media (orientation: landscape) and (max-width: 63.9375rem) and (max-height: 30rem) {
  .ac-spotlight.is-ac-settings-spot .ac-spotlight__highlight.is-tail-end .mode-switch-warning__blur,
  .ac-spotlight.is-ac-settings-spot .ac-spotlight__highlight.is-tail-end .mode-switch-warning__shape {
    transform: scale(-1, -1);
  }
}

/* Keep close visible + clickable when locked so wrap can show the toast */
.gift-dock-close-wrap .game-modal__icon-button.is-disabled,
.gift-dock-close-wrap .game-modal__icon-button[aria-disabled="true"] {
  pointer-events: auto;
  opacity: 0.4;
}

.has-gifts.is-gift-mode .bet-dock.has-gift-close-warning,
.has-gifts.is-gift-mode .bet-dock-wrap.has-gift-close-warning {
  overflow: visible !important;
}

/* Sit above .play-bets (z-index 5–6) while the close toast is open */
.has-gifts.is-gift-mode .bet-dock-wrap.has-gift-close-warning {
  z-index: 7;
}

.gift-bet-buttons {
  display: none;
  width: 100%;
  gap: 8px;
  opacity: 1;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding: 8px;
  background: var(--Base-Base-white-5);
  box-sizing: border-box;
}

.has-gifts.is-gift-mode .gift-bet-buttons {
  display: flex;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.gift-bet-button {
  width: 100%;
  height: 4rem;
  flex: 1 1 0;
}

.has-gifts.is-gift-mode.mode-classic .gift-dock-body {
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
}

.has-gifts.is-gift-mode.mode-1 .gift-dock-body {
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 0;
  /* 4.5rem button + 8px padding on top and bottom (same as left/right) */
  height: calc(4.5rem + 16px);
}

.has-gifts.is-gift-mode.mode-classic .gift-summary {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
  border-radius: var(--radius-l);
}

.has-gifts.is-gift-mode.mode-1 .gift-summary {
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
  border-radius: var(--radius-l);
}

.has-gifts.is-gift-mode.mode-classic .gift-summary__item {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
}

.has-gifts.is-gift-mode.mode-classic .gift-summary__divider {
  width: calc(100% - 2rem);
  height: 0.0625rem;
  flex: 0 0 0.0625rem;
  align-self: center;
}

.has-gifts.is-gift-mode.mode-classic .gift-bet-buttons {
  flex-direction: column;
  height: auto;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-l);
}

.has-gifts.is-gift-mode.mode-1 .gift-bet-buttons {
  flex-direction: column;
  height: 100%;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-l);
}

.has-gifts.is-gift-mode.mode-classic .gift-bet-button {
  height: auto;
  min-height: 3.25rem;
  flex: 1 1 0;
}

/* One-bet gift: Freespin Left + progress on top, Win inline below, single Bet */
.has-gifts.is-gift-mode.mode-1 .gift-summary__divider {
  display: none;
}

.has-gifts.is-gift-mode.mode-1 .gift-summary__item {
  justify-content: center;
  text-align: center;
}

.has-gifts.is-gift-mode.mode-1 .gift-summary__item:last-child {
  order: 1;
  flex: 1 1 auto;
}

.has-gifts.is-gift-mode.mode-1 .gift-summary__item:first-child {
  order: 2;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem;
  padding-top: 0;
}

.has-gifts.is-gift-mode.mode-1 .gift-summary__item:first-child span::after {
  content: '';
}

.has-gifts.is-gift-mode.mode-1 .gift-summary__item:first-child strong {
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-bold);
}

.has-gifts.is-gift-mode.mode-1 .gift-bet-button {
  /* Fills content box; 8px padding on all sides from .gift-bet-buttons */
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.has-gifts.is-gift-mode.mode-1 #bet-5 {
  display: none;
}

.avatar {
  background: url(../ImagesNew/WebP/avatar.webp) no-repeat;
  background-size: 500% 500%;
}

.avatar-0 {
  background-position: 0 0;
}

.avatar-1 {
  background-position: 25% 0;
}

.avatar-2 {
  background-position: 50% 0;
}

.avatar-3 {
  background-position: 75% 0;
}

.avatar-4 {
  background-position: 100% 0;
}

.avatar-5 {
  background-position: 0 25%;
}

.avatar-6 {
  background-position: 25% 25%;
}

.avatar-7 {
  background-position: 50% 25%;
}

.avatar-8 {
  background-position: 75% 25%;
}

.avatar-9 {
  background-position: 100% 25%;
}

.avatar-10 {
  background-position: 0 50%;
}

.avatar-11 {
  background-position: 25% 50%;
}

.avatar-12 {
  background-position: 50% 50%;
}

.avatar-13 {
  background-position: 75% 50%;
}

.avatar-14 {
  background-position: 100% 50%;
}

.avatar-15 {
  background-position: 0 75%;
}

.avatar-16 {
  background-position: 25% 75%;
}

.avatar-17 {
  background-position: 50% 75%;
}

.avatar-18 {
  background-position: 75% 75%;
}

.avatar-19 {
  background-position: 100% 75%;
}

.avatar-20 {
  background-position: 0 100%;
}

.avatar-21 {
  background-position: 25% 100%;
}

.avatar-22 {
  background-position: 50% 100%;
}

.avatar-23 {
  background-position: 75% 100%;
}

.avatar-24 {
  background-position: 100% 100%;
}

.round-card {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  min-height: 3.5rem;
  padding: 0.25rem 1rem 0.25rem 0.75rem;
  gap: 0.5rem;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  box-sizing: border-box;
}

.round-main {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 0.75rem;
}

.round-avatars {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.round-avatars .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-max);
  box-sizing: border-box;
  margin-right: -10px;
}

.round-avatars .avatar + .round-avatars .avatar {
  margin-left: -0.75rem;
}

.round-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.125rem;
  margin-left: 10px;
}

.round-main > .round-stat {
  overflow: hidden;
}

.round-stat--end {
  align-items: stretch;
  text-align: right;
  flex: 1 1 3rem;
  min-width: 0;
  margin-left: 0;
}

.round-value {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-base);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.round-value.text-fit {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.round-value.text-fit .no-currency-symbol {
  /* Keep xs/base ratio (0.625 / 0.875) so fitText can shrink currency + amount together */
  font-size: 0.714em;
}

.round-label {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
}

.win-toast-stack {
  position: absolute;
  top: 3.8rem;
  left: 50%;
  transform: translateX(-50%);
  /* Below #menu-pop (8); above .stage-hud Flew Away (via .topbar stacking) */
  z-index: 7;
  pointer-events: none;
}

.win-toast-slot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(var(--rest-ty, 0)) scale(var(--rest-scale, 1));
  transform-origin: 50% 100%;
  opacity: var(--rest-opacity, 1);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
  pointer-events: none;
}

.win-toast {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 14.5rem;
  max-width: 100%;
  height: 3.625rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-max);
  isolation: isolate;
  background:
    linear-gradient(180deg, #24ac55 10%, #11844a 91%) padding-box,
    linear-gradient(180deg, #66e48f 0%, #1da336 75%, #24aa46 100%) border-box;
  box-sizing: border-box;
  /* 0.2s delay = WIN_ANIM_LEAD_MS: win.webp advances while toast stays at enter 0% (opacity 0). */
  animation: win-toast-enter 0.5s ease-out 0.2s both;
  will-change: transform, opacity;
  /* Don't capture clicks — otherwise rapid cashout on another bet waits for the toast. */
  pointer-events: none;
}

.win-toast--big { 
  background:
    linear-gradient(180deg, #0fbc4a 10%, #0b8546 91%) padding-box,
    linear-gradient(180deg, #65e38e 0%, #1fa739 75%, #24aa46 100%) border-box;
  box-shadow: 0 0 1.125rem 0 rgba(83, 255, 134, 0.6);
}

.win-toast--max-win {
  background:
    linear-gradient(180deg, #ffe63b 10%, #ffdf10 91%) padding-box,
    linear-gradient(180deg, #fffca1 0%, #ffea5a 75%, #ffed80 100%) border-box;
  box-shadow: 0 0 1.125rem 0 rgba(255, 218, 62, 0.6);
}

.win-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  border-radius: inherit;
  clip-path: inset(0 round var(--radius-max));
  pointer-events: none;
}

.win-toast--max-win .win-video {
  filter: invert(1);
  mix-blend-mode: multiply;
}

.win-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  animation: win-copy-in 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.win-label {
  color: rgba(17, 58, 39, 0.8);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xs);
  text-align: center;
  white-space: nowrap;
}

.win-toast--max-win .win-label {
  color: rgba(2, 2, 2, 0.7);
}

.win-amount {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
  text-align: center;
  white-space: nowrap;
}

.win-toast--max-win .win-amount {
  color: transparent;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: var(--font-size-text-2xl);
}

.win-toast--leaving {
  animation: win-toast-leave 0.5s ease-in both;
}

.win-toast--fly {
  pointer-events: none;
  animation: win-toast-fly 0.55s cubic-bezier(0.55, 0, 0.85, 0.25) both;
}

@keyframes win-toast-enter {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  55% {
    opacity: 1;
    transform: scale(1.07);
  }
  78% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes win-copy-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes win-toast-leave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  22% {
    transform: scale(0.98);
  }
  45% {
    opacity: 1;
    transform: scale(1.07);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

@keyframes win-toast-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fly-x, 0px), var(--fly-y, 0px)) scale(0.18);
  }
}

#userBalance.balance-bump {
  --balance-bump-rgb: 66, 200, 84;
  --balance-bump-a: 0.55;
  animation: balance-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Collect value / x bump animation disabled.
.collect-value.collect-value-bump {
  animation: collect-value-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.collect-input:has(.collect-value-bump) {
  overflow: visible;
}

.collect-value.collect-value-bump {
  overflow: visible;
}

@keyframes collect-value-bump {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  55% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
*/

/* Win tint — same green/timing for amount + currency (.currency has its own color otherwise). */
#userBalance.balance-win,
#userBalance.balance-win > span {
  color: var(--Green-Green-base, #42C854);
}

/* Max win — same yellow as .stage-hud__coeff.is-max-win */
#userBalance.balance-win--max {
  --balance-bump-rgb: 255, 227, 35;
  --balance-bump-a: 0.8;
}

#userBalance.balance-win.balance-win--max,
#userBalance.balance-win.balance-win--max > span {
  color: #FFE229;
  text-shadow: 0 0 12px rgba(255, 227, 35, 0.8);
}

@keyframes balance-bump {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--balance-bump-rgb), 0);
  }
  30% {
    transform: scale(1.14);
    box-shadow: 0 0 0.9rem 0 rgba(var(--balance-bump-rgb), var(--balance-bump-a));
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--balance-bump-rgb), 0);
  }
}

.cashout-glow {
  --cashout-glow-rgb: 66, 200, 84;
  --cashout-glow-shadow-a: 0.32;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: var(--side-width, 0);
  /* Pin to play cell — avoid auto-placement creating tracks that shift landscape HUD */
  grid-column: 1;
  grid-row: 1;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(106.23% 50% at 50% 50%, rgba(var(--cashout-glow-rgb), 0.00) 0%, rgba(var(--cashout-glow-rgb), 0.05) 100%);
  box-shadow: 0 0 140px 0 rgba(var(--cashout-glow-rgb), var(--cashout-glow-shadow-a)) inset;
  opacity: 0;
  pointer-events: none;
  animation: cashout-glow 2.4s ease-in-out both;
}

.cashout-glow--warning {
  --cashout-glow-rgb: 254, 94, 97;
  --cashout-glow-shadow-a: 0.32;
  animation: cashout-glow-warning 3s linear both;
}

.cashout-glow--max-win {
  --cashout-glow-rgb: 255, 218, 62;
  --cashout-glow-shadow-a: 0.6;
}

.cashout-glow.cashout-glow--leaving {
  animation: cashout-glow-leave 0.4s ease-out forwards !important;
}

@keyframes cashout-glow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cashout-glow-leave {
  to {
    opacity: 0;
  }
}

@keyframes cashout-glow-warning {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  56% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.btn-error-toast {
  position: fixed;
  /* Below #menu-pop (8); must live inside .app stacking context */
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--Red-Red-op-15);
  border-radius: 1.25rem;
  background: var(--Base-Base-black-50);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(2rem);
  color: var(--Red-Red-light);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(-50%, -100%);
  /* Capture clicks so plus/bet controls under the toast are not triggered. */
  pointer-events: auto;
  box-sizing: border-box;
  animation: btn-error-toast-in 0.18s ease-out both;
}

.btn-error-toast--max {
  border: 1px solid var(--Primary-Primary-op-15, rgba(252, 221, 18, 0.15));
  border-radius: 1.25rem;
  background: var(--background-components-Op-50, rgba(0, 0, 0, 0.50));
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  color: var(--Primary-Primary-base, #FCDD12);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 0.875rem;
  animation: btn-max-toast-in 0.18s ease-out both;
}

.btn-error-toast--max.btn-error-toast--leaving {
  animation: btn-max-toast-out 0.28s ease-in both;
}

.btn-error-toast--leaving {
  animation: btn-error-toast-out 0.18s ease-in both;
}

@keyframes btn-error-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(0.25rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}

@keyframes btn-error-toast-out {
  from {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(0.25rem);
  }
}

@keyframes btn-max-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(0.375rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}

@keyframes btn-max-toast-out {
  from {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-0.575rem);
  }
}

.game-modal__panel--auto-collect {
  max-height: calc(var(--real-vh) - 80px) !important;
}

.game-modal__body--auto-collect {
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.ac-risk-tabs {
  display: none;
}

.ac-risk {
  flex: 0 0 auto;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-max);
  background: var(--background-components-Default);
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ac-risk--active {
  background: var(--Primary-Primary-op-10);
  color: var(--Primary-Primary-base);
}

.ac-risk-tabs.is-locked {
  pointer-events: none;
  cursor: not-allowed;
}

.ac-risk-tabs.is-locked .ac-risk,
.ac-risk:disabled {
  color: var(--Text-Icons-Disable);
  cursor: not-allowed;
  background: var(--background-components-Disable);
}

.ac-risk-tabs.is-locked .ac-risk--active,
.ac-risk--active:disabled {
  background: var(--background-components-Disable);
  color: var(--Text-Icons-Disable);
}

.ac-bets {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ac-bet {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem;
  background: var(--Base-Base-white-5);
  box-sizing: border-box;
}

.ac-bet .toggle {
  flex: 0 0 auto;
}

.ac-bet:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.ac-bet:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.ac-bet-icon {
  display: grid;
  grid-template-columns: repeat(2, 0.75rem);
  gap: 0.125rem;
  place-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--Base-Base-white-5);
}

.ac-bet-icon span {
  width: 0.75rem;
  height: 0.375rem;
  border-radius: var(--radius-max);
  background: rgba(255, 255, 255, 0.16);
}

.ac-bet[data-ac-bet-row="0"] .ac-bet-icon span:nth-child(1),
.ac-bet[data-ac-bet-row="1"] .ac-bet-icon span:nth-child(2),
.ac-bet[data-ac-bet-row="2"] .ac-bet-icon span:nth-child(3),
.ac-bet[data-ac-bet-row="3"] .ac-bet-icon span:nth-child(4) {
  background: var(--Base-Base-white);
}

.ac-bet-label {
  flex: 0 0 auto;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-base);
  white-space: nowrap;
}

.ac-bet .ac-collect-input {
  flex: 1 1 11.5rem;
  width: auto;
  min-width: 0;
  max-width: 11.5rem;
  height: 2rem;
  margin-left: auto;
}

.ac-bet .collect-input--inactive {
  opacity: 0.32;
  cursor: pointer;
}

.ac-bet .collect-input--inactive * {
  pointer-events: none;
}

.ac-bet .collect-input--inactive:hover .collect-value {
  background-color: var(--background-components-Default);
}

.ac-bet.is-locked .collect-input--inactive {
  cursor: not-allowed;
  pointer-events: none;
}

.ac-bet.is-locked .toggle,
.ac-bet.is-locked .ac-bet-label,
.ac-bet.is-locked .toggle-input,
.ac-bet.is-locked .bet-input-btn,
.ac-bet.is-locked .collect-field {
  pointer-events: none;
  cursor: not-allowed;
}

.ac-bet.is-locked .ac-bet-label {
  color: var(--Text-Icons-Disable);
}

.ac-bet.is-locked .toggle-input+.toggle-slider {
  background-color: var(--background-components-Disable);
  cursor: not-allowed;
}

.ac-bet.is-locked .toggle-input+.toggle-slider::before {
  background-color: var(--Text-Icons-Disable);
}

.ac-bet.is-locked .toggle-input:checked+.toggle-slider {
  background-color: var(--Green-Green-op-5);
  cursor: not-allowed;
}

.ac-bet.is-locked .toggle-input:checked+.toggle-slider::before {
  background-color: var(--Text-Icons-Secondary);
}

.ac-bet.is-locked .collect-input.disabled {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

.ac-bet.is-locked .collect-input.disabled .collect-value {
  background-color: var(--background-components-Disable);
  box-shadow: none;
}

.ac-bet.is-locked .collect-input.disabled .collect-field,
.ac-bet.is-locked .collect-input.disabled .collect-label,
.ac-bet.is-locked .collect-input.disabled .collect-suffix,
.ac-bet.is-locked .collect-input.disabled .bet-input-btn {
  color: var(--Text-Icons-Disable);
  cursor: not-allowed;
}

.ac-actions {
  margin-top: 1rem;
}

.ac-start {
  width: 100%;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  border: none;
  color: var(--Text-Icons-Secondary);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-xs);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Shrink until content fits max width. Pair with fitText() / scheduleFitTextAll(). */
.text-fit {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* rem on .no-currency-symbol won't shrink with fitText — em scales with parent font-size */
.text-fit .no-currency-symbol {
  /* ≈ xs/sm (0.625 / 0.75); .round-value overrides for base parent */
  font-size: 0.833em;
}

.chip:hover {
  background-color: var(--background-components-Hover);
  color: var(--Text-Icons-Primary);
}

.chip:active,
.chip.active {
  background-color: var(--background-components-Press);
  color: var(--Text-Icons-Primary);
}

.chip-selected {
  background-color: var(--Primary-Primary-op-10);
  border: 1px solid var(--Primary-Primary-op-15);
  color: var(--Primary-Primary-base);
}

.chip-selected span {
  color: inherit;
  background: none;
  -webkit-text-fill-color: initial;
  display: inline-block;
}




.chat-input:disabled .chat-input-send,
.chat-input.disabled .chat-input-send,
.chat-input.disabled .chat-input-send:hover,
.chat-input.disabled .chat-input-send:active {
  color: var(--Text-Icons-Disable);
  background-color: transparent;
}

.segments {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  border-radius: var(--radius-max);
  background-color: var(--Base-Base-black-25);
  padding: 0.125rem;
  gap: 0.125rem;
  backdrop-filter: blur(var(--blur-Primary));
  box-sizing: border-box;
}

.segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 1.75rem;
  border-radius: var(--radius-max);
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--Text-Icons-Secondary);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.segment:hover {
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
}

.segment--active {
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
  backdrop-filter: blur(var(--blur-Primary));
}

.segments:disabled,
.segments.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

.segments:disabled .segment,
.segments.disabled .segment,
.segment:disabled,
.segment.disabled {
  color: var(--Text-Icons-Disable);
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
}

.segments:disabled .segment--active,
.segments.disabled .segment--active,
.segment--active:disabled,
.segment--active.disabled {
  background-color: var(--background-components-Disable);
  border-color: var(--background-components-Disable);
  backdrop-filter: none;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 15.375rem;
  height: 2.25rem;
  padding: 0.5rem;
  gap: 0.75rem;
  border-radius: 0.5rem;
  background-color: transparent;
  border: 1px solid transparent;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.menu-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--Text-Icons-Primary);
  transition: color 0.2s ease;
}

.menu-item-left svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.menu-item-text {
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-base);
  color: inherit;
}

.menu-item:hover {
  background-color: var(--background-components-Hover);
}

.menu-item:active,
.menu-item.active {
  background-color: var(--background-components-Press);
}

.menu-item:disabled,
.menu-item.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: transparent;
}

.menu-item:disabled .menu-item-left,
.menu-item.disabled .menu-item-left {
  color: var(--Text-Icons-Disable);
}

.menu-pop {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 18.875rem;
  max-width: 100%;
  height: auto;
  padding: 0 0 0.75rem;
  gap: 0.75rem;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--background-layout-canvas);
  /*backdrop-filter: blur(var(--blur-Additional));*/
  box-sizing: border-box;
  overflow: hidden;
}

.menu-pop[hidden] {
  display: none;
}

#menu-pop {
  position: absolute;
  top: 4rem;
  right: 1.25rem;
  z-index: 8;
  max-height: calc(var(--real-vh) - 5rem);
  transition: opacity 0.18s ease, visibility 0s linear 0s;
  will-change: opacity;
}

#menu-pop .menu-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

#menu-pop .avatar-toggle:checked ~ .menu-body,
#menu-pop .limits-toggle:checked ~ .menu-body {
  overflow: hidden;
}

#menu-pop[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  #menu-pop,
  #menu-pop[hidden] { transition: none; }
}

.profile-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 4rem;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
  background: var(--Base-Base-black-15);
  box-shadow: inset 0 -0.0625rem 0 var(--Base-Base-white-5);
  box-sizing: border-box;
  cursor: pointer;
}

.profile-avatar,
.avatar-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-max);
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
}

.profile-avatar {
  flex: 0 0 2.5rem;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.profile-name {
  overflow: hidden;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-action {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--Text-Icons-Secondary);
  cursor: inherit;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
  transition: color 0.2s ease;
}

.profile-action > span {
  line-height: 1;
}

.profile-action svg {
  display: block;
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
}

.profile-row:hover .profile-action {
  color: var(--Text-Icons-Primary);
}

.profile-arrow {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  color: var(--Text-Icons-Primary);
  fill: currentColor;
}

.profile-row:has([data-menu-exit].is-visible) .profile-arrow {
  display: none;
}

.menu-exit {
  display: none;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-exit.is-visible {
  display: inline-flex;
}

.menu-exit svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

.avatar-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.avatar-toggle:checked ~ .profile-row {
  display: none;
}

.avatar-panel {
  margin: -0.5rem 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem) scale(0.98);
  transform-origin: top center;
  transition: max-height 0.32s ease, margin-top 0.32s ease, opacity 0.24s ease, transform 0.32s ease;
}

.avatar-toggle:checked ~ .avatar-panel {
  margin: 0;
  max-height: 16.5rem;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.avatar-picker {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  gap: 1rem;
  box-sizing: border-box;
}

.avatar-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2rem;
}

.avatar-head-wrap {
  display: none;
  align-items: center;
  width: 100%;
  min-height: 4rem;
  padding: 0.75rem 1rem;
  gap: 0.625rem;
  background: var(--Base-Base-black-15);
  box-shadow: inset 0 -0.0625rem 0 var(--Base-Base-white-5);
  box-sizing: border-box;
}

.avatar-toggle:checked ~ .avatar-head-wrap {
  display: flex;
}

.avatar-head-divider {
  display: none;
  width: calc(100% - 2rem);
  margin: 0 1rem;
}

.avatar-toggle:checked ~ .avatar-head-divider {
  display: block;
}

.limits-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.limits-toggle:checked ~ .profile-row {
  display: none;
}

.limits-head-wrap {
  display: none;
  align-items: center;
  width: 100%;
  min-height: 4rem;
  padding: 0.75rem 1rem;
  gap: 0.625rem;
  background: var(--Base-Base-black-15);
  box-shadow: inset 0 -0.0625rem 0 var(--Base-Base-white-5);
  box-sizing: border-box;
}

.limits-toggle:checked ~ .limits-head-wrap {
  display: flex;
}

.limits-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 0;
  margin: -0.5rem 0;
  gap: 1rem;
  padding: 0 1rem;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem) scale(0.98);
  transform-origin: top center;
  transition: max-height 0.32s ease, margin-top 0.32s ease, opacity 0.24s ease, transform 0.32s ease;
  box-sizing: border-box;
}

.limits-toggle:checked ~ .limits-panel {
  max-height: 12rem;
  margin: 0;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.limits-toggle:checked ~ .menu-body {
  max-height: 0;
  margin-top: -0.75rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
}

.limits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--font-size-text-base);
  line-height: var(--line-height-text-base);
}

.limits-label {
  color: var(--Text-Icons-Secondary);
  font-weight: var(--font-weight-medium);
}

.limits-value {
  color: var(--Green-Green-base);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.avatar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--Base-Base-white-10);
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.avatar-back:hover {
  background-color: var(--background-components-Hover);
}

.avatar-back svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
}

.avatar-title {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
}

.avatar-divider {
  height: 0.0625rem;
  background-color: var(--Base-Base-white-5);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 2.75rem);
  gap: 0.625rem 0.75rem;
  width: 100%;
  padding: 0.0625rem 1rem;
  box-sizing: border-box;
}

.avatar-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-max);
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.avatar-choice:hover {
  transform: translateY(-0.0625rem);
}

.avatar-choice.active {
  border-color: var(--Primary-Primary-base);
  background-color: var(--Primary-Primary-op-5);
}

.avatar-img {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
}

.avatar-img--purple {
  background: linear-gradient(135deg, var(--Purple-Purple-base), var(--Blue-Blue-base));
}

.avatar-img--yellow {
  background: linear-gradient(135deg, var(--Primary-Primary-base), var(--Red-base));
}

.avatar-img--green {
  background: linear-gradient(135deg, var(--Green-Green-base), var(--Blue-Blue-base));
}

.avatar-img--red {
  background: linear-gradient(135deg, var(--Red-base), var(--Purple-Purple-base));
}

.avatar-img--blue {
  background: linear-gradient(135deg, var(--Blue-Blue-base), var(--Purple-Purple-light));
}

.avatar-img--gold {
  background: linear-gradient(135deg, var(--Primary-Primary-light), var(--Green-Green-base));
}

.avatar-img--rose {
  background: linear-gradient(135deg, var(--Red-Red-light), var(--Purple-Purple-base));
}

.avatar-img--cyan {
  background: linear-gradient(135deg, var(--Blue-Blue-light), var(--Green-Green-light));
}

.avatar-img--dark {
  background: linear-gradient(135deg, var(--background-components-Hover), var(--Base-Base-black-50));
}

.menu-divider {
  width: calc(100% - 2rem);
  height: 0.0625rem;
  margin: 0 1rem;
  background-color: var(--Base-Base-white-5);
}

.menu-title {
  padding: 0 1rem;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-xs);
  text-transform: uppercase;
}

/* <Version Switch */

.version-switch {
  display: none;
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
}

body.show-old-jetx-redirect .version-switch {
  display: inline-block;
}

html.is-mobile-landscape body.show-old-jetx-redirect .version-switch {
  display: none;
}

.version-switch button {
  appearance: none;
  -webkit-appearance: none;
}

.version-switch__label,
.version-switch__option {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
}

.version-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 58px;
  height: 24px;
  margin: 0;
  padding: 4px 2px 4px 6px;
  border: 0;
  border-radius: 10000px;
  background: rgba(252, 221, 18, 0.1);
  color: var(--Primary-Primary-base, #fcdd12);
  box-sizing: border-box;
  cursor: pointer;
  opacity: 1;
}

.version-switch__btn:hover {
  background: var(--Primary-Primary-op-15, rgba(252, 221, 18, 0.15));
}

.version-switch__label {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  line-height: 16px;
  white-space: nowrap;
}

.version-switch__arrow {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: currentColor;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.version-switch__option span {
  white-space: nowrap;
}

.version-switch.is-open .version-switch__arrow {
  transform: rotate(180deg);
}

.version-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-width: 149px;
  width: max-content;
  height: 78px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(37, 36, 36, 1);
  box-sizing: border-box;
  opacity: 1;
}

.version-switch.is-open .version-switch__menu {
  display: flex !important;
}

.version-switch__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--Text-Icons-Primary, #fff);
  line-height: 16px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.version-switch__option.is-active {
  color: var(--Primary-Primary-base, #fcdd12);
}

.version-switch__option:hover {
  color: var(--Primary-Primary-base, #fcdd12);
}

.version-switch__option.is-redirect-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.version-switch__option.is-redirect-locked:hover {
  color: var(--Text-Icons-Primary, #fff);
}

.version-switch__check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--Primary-Primary-base, #fcdd12);
  opacity: 0;
  pointer-events: none;
}

.version-switch__option.is-active .version-switch__check {
  opacity: 1;
}

.version-switch .mode-switch-warning {
  z-index: 9;
  left: 0;
}

body.is-assets-pending .version-switch {
  opacity: 0;
  pointer-events: none;
}

/* Version Switch /> */

.menu-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.menu-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 40rem;
  gap: 0.75rem;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.32s ease, margin-top 0.32s ease, opacity 0.2s ease, transform 0.32s ease;
}

.avatar-toggle:checked ~ .menu-body {
  max-height: 0;
  margin-top: -0.75rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
}

.menu-pop .menu-item {
  max-width: none;
  padding: 0.5rem;
  margin: 0 0.5rem;
  width: auto;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding: 0 1rem;
}

.mode-grid .mode-card {
  width: 100%;
}

.badge-multiplier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-max);
  border: 1px solid transparent;
  /*backdrop-filter: blur(var(--blur-Primary));*/
  box-sizing: border-box;
  /* font-family: var(--font-family), sans-serif; */
  font-family: Roboto, sans-serif;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.badge-multiplier--dimmed {
  opacity: 0.35;
  pointer-events: none;
}

.badge-multiplier--enter {
  overflow: visible;
  transform-origin: left center;
  max-width: var(--badge-enter-width, 8.5rem);
  animation:
    badge-multiplier-slot 1s cubic-bezier(0.22, 1, 0.36, 1) both,
    badge-multiplier-grow 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes badge-multiplier-slot {
  from {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
    border-right-width: 0;
  }
  to {
    max-width: var(--badge-enter-width, 8.5rem);
  }
}

@keyframes badge-multiplier-grow {
  0% {
    opacity: 0;
    transform: translateX(2rem) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.badge-multiplier span {
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.badge-multiplier-md {
  height: 1.5rem;
  padding: 0.125rem 0.5rem;
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
}

.badge-multiplier-sm {
  height: 1rem;
  padding: 0.125rem 0.375rem;
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
}

.badge-multiplier--l {
  padding-inline: 0.375rem;
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
  letter-spacing: -0.01em;
}

.badge-multiplier--xl {
  padding-inline: 0.275rem;
  font-size: var(--font-size-text-xxs);
  line-height: var(--line-height-text-xxs);
  letter-spacing: -0.01em;
}

.badge-multiplier.low {
  background-color: var(--background-components-Default);
  border-color: var(--Base-Base-white-5);
}

.badge-multiplier.low span {
  background: var(--Multiplication-1-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-multiplier.low:hover {
  background-color: var(--background-components-Hover);
  border-color: var(--Base-Base-white-10);
}

.badge-multiplier.low:active,
.badge-multiplier.low.active {
  background-color: var(--background-components-Press);
  border-color: var(--Base-Base-white-10);
}

.badge-multiplier.low:disabled,
.badge-multiplier.low.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: var(--background-components-Disable);
  border-color: transparent;
}

.badge-multiplier.low:disabled span,
.badge-multiplier.low.disabled span {
  background: none;
  -webkit-text-fill-color: var(--Text-Icons-Disable);
  color: var(--Text-Icons-Disable);
}

.badge-multiplier.medium {
  background-color: var(--Green-Green-op-5);
  border-color: var(--Green-Green-op-10);
}

.badge-multiplier.medium span {
  background: var(--Multiplication-2-10);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-multiplier.medium:hover {
  background-color: var(--Green-Green-op-10);
  border-color: var(--Green-Green-op-15);
}

.badge-multiplier.medium:active,
.badge-multiplier.medium.active {
  background-color: var(--Green-Green-op-15);
  border-color: var(--Green-Green-op-15);
}

.badge-multiplier.medium:disabled,
.badge-multiplier.medium.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: var(--background-components-Disable);
  border-color: transparent;
}

.badge-multiplier.medium:disabled span,
.badge-multiplier.medium.disabled span {
  background: none;
  -webkit-text-fill-color: var(--Text-Icons-Disable);
  color: var(--Text-Icons-Disable);
}

.badge-multiplier.high {
  background-color: var(--Primary-Primary-op-5);
  border-color: var(--Primary-Primary-op-10);
}

.badge-multiplier.high span {
  background: var(--Multiplication-10-plus);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-multiplier.high:hover {
  background-color: var(--Primary-Primary-op-10);
  border-color: var(--Primary-Primary-op-15);
}

.badge-multiplier.high:active,
.badge-multiplier.high.active {
  background-color: var(--Primary-Primary-op-15);
  border-color: var(--Primary-Primary-op-15);
}

.badge-multiplier.high:disabled,
.badge-multiplier.high.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: var(--background-components-Disable);
  border-color: transparent;
}

.badge-multiplier.high:disabled span,
.badge-multiplier.high.disabled span {
  background: none;
  -webkit-text-fill-color: var(--Text-Icons-Disable);
  color: var(--Text-Icons-Disable);
}

.badge-multiplier.max {
  font-weight: var(--font-weight-extrabold);
  font-size: 12px;
  line-height: var(--line-height-text-sm);
  background-color: var(--Primary-Primary-op-5);
  border-color: var(--Primary-Primary-op-10);
}

.badge-multiplier.max span {
  background: none;
  -webkit-text-fill-color: #FCDD12;
  color: #FCDD12;
  text-shadow: 0px 0px 10px rgba(252, 221, 18, 0.35);
}

.badge-multiplier.max:hover {
  background-color: var(--Primary-Primary-op-10);
  border-color: var(--Primary-Primary-op-15);
}

.badge-multiplier.max:active,
.badge-multiplier.max.active {
  background-color: var(--Primary-Primary-op-15);
  border-color: var(--Primary-Primary-op-15);
}

.badge-multiplier.max:disabled,
.badge-multiplier.max.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: var(--background-components-Disable);
  border-color: transparent;
}

.badge-multiplier.max:disabled span,
.badge-multiplier.max.disabled span {
  background: none;
  -webkit-text-fill-color: var(--Text-Icons-Disable);
  color: var(--Text-Icons-Disable);
  text-shadow: none;
}

.bets {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: 0.125rem;
  gap: 0.25rem;
  box-sizing: border-box;
}

.bets-head {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 0 0 auto;
  height: 1.5rem;
  padding: 0.25rem;
  gap: 0.5rem;
  align-items: center;
  border-radius: var(--radius-max);
  box-sizing: border-box;
}

.bets-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0.25rem;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bets-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 0 0 auto;
  min-height: 1.75rem;
  height: auto;
  padding: 0.25rem;
  gap: 0.5rem;
  align-items: center;
  border-radius: var(--radius-max);
  box-sizing: border-box;
  cursor: default;
  pointer-events: none;
  user-select: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.bets-row {
  background-color: var(--background-components-Disable);
}

.bets-row:hover,
.bets-row.bets-row--hover {
  background-color: var(--background-components-Hover);
}

.bets-row:active,
.bets-row.bets-row--active {
  background-color: var(--background-components-Press);
}

.bets-row.win {
  background-color: var(--Green-Green-op-5);
}

.bets-row.win:hover,
.bets-row.win.bets-row--hover {
  background-color: var(--Green-Green-op-10);
}

.bets-row.win:active,
.bets-row.win.bets-row--active {
  background-color: var(--Green-Green-op-15);
}

.bets-row.current {
  background-color: var(--Primary-Primary-op-5);
}

.bets-row.current * {
  color: var(--Primary-Primary-base) !important;
}

.bets-row.current.win {
  background-color: var(--Green-Green-op-15);
}

.bets-row.current.win * {
  color: var(--Green-Green-base) !important;
}

.bets-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 100%;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--Text-Icons-Primary);
  box-sizing: border-box;
}

.bets-head-cell {
  font-weight: var(--font-weight-normal);
  color: var(--Base-Base-white-50);
  justify-content: center;
}

.bets-cell--user {
  justify-content: flex-start;
  flex: 1.25 1 0;
  gap: 0.25rem;
}

.bets-cell--win {
  font-weight: var(--font-weight-medium);
  column-gap: 0.15em;
  text-align: center;
}

.bets-cell--win .bets-win,
.bets-cell .bets-amount {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.bets-win {
  font-weight: var(--font-weight-bold);
  color: var(--Text-Icons-Primary);
}

.bets-row.win .bets-win {
  color: var(--Green-Green-base);
}

.bets-cell .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.side-tabs {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.tab-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel--active {
  animation: side-tab-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tab-panel--players {
  gap: 1.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tab-panel--rounds,
.tab-panel--top {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.line-tabs {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  align-items: stretch;
  justify-content: start;
  width: 100%;
  height: 2rem;
  flex: 0 0 2rem;
  gap: 0.75rem 0;
  box-sizing: border-box;
  position: relative;
}

.line-tabs:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--Base-Base-white-10);
  height: 1px;
}

.line-tabs--top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto;
  gap: 0.25rem;
}

.line-tabs--top:after {
  grid-column: 1 / -2;
  right: 0;
}

.line-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 2rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--Text-Icons-Secondary);
  cursor: pointer;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
  transition: color 0.2s ease;
  box-sizing: border-box;
}

.line-tabs--top .line-tab {
  width: auto;
}

.line-tab:hover {
  color: var(--Text-Icons-Primary);
}

.line-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.line-tab--active {
  color: var(--Primary-Primary-base);
}

.line-tab--active::after {
  background-color: var(--Primary-Primary-base);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 5rem;
  height: 2rem;
  padding: 0 0.75rem;
  gap: 0.375rem;
  border: 0;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Secondary);
  cursor: pointer;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-pill:hover,
.filter-pill[aria-expanded="true"] {
  background-color: var(--background-components-Hover);
  color: var(--Text-Icons-Primary);
}

.filter-pill svg.icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.filter-pill[aria-expanded="true"] svg.icon {
  transform: rotate(180deg);
}

.filter-select {
  position: relative;
  display: inline-flex;
  justify-self: end;
  align-self: center;
}

.filter-menu {
  position: absolute;
  top: calc(100% + 0.05rem);
  right: 0;
  z-index: 6;
  display: flex;
  min-width: 100%;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  background: var(--background-layout-canvas);
  /*backdrop-filter: blur(var(--blur-Additional));*/
  box-shadow: inset 0 0 0 1px var(--Base-Base-white-10), var(--shadow-s);
  box-sizing: border-box;
}

.filter-menu[hidden] {
  display: none;
}

.filter-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 1.75rem;
  padding: 0 0.625rem;
  border: 0;
  border-radius: var(--radius-max);
  background: transparent;
  color: var(--Text-Icons-Secondary);
  cursor: pointer;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-option:hover,
.filter-option--active {
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
}

.round-summary {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 3.25rem;
  flex: 0 0 3.25rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.05);
}

.round-summary__item {
  display: flex;
  position: relative;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.5rem 0;
  overflow: hidden;
  box-sizing: border-box;
}

.round-summary__item::before,
.round-summary__item::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.round-summary__item::before {
  inset: 0;
}

.round-summary__item::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
}

.round-summary__item:nth-child(1)::before {
  background: linear-gradient(180deg, rgba(220, 220, 220, 0) 0%, rgba(220, 220, 220, 0.10) 100%);
}

.round-summary__item:nth-child(1)::after {
  background-color: rgb(220, 220, 220);
}

.round-summary__item:nth-child(2)::before {
  background: linear-gradient(180deg, rgba(66, 200, 84, 0) 0%, rgba(66, 200, 84, 0.10) 100%);
}

.round-summary__item:nth-child(2)::after {
  background-color: var(--Green-Green-base);
}

.round-summary__item:nth-child(3)::before {
  background: linear-gradient(180deg, rgba(252, 221, 18, 0) 0%, rgba(252, 221, 18, 0.10) 100%);
}

.round-summary__item:nth-child(3)::after {
  background-color: var(--Primary-Primary-base);
}

.round-summary__label {
  position: relative;
  z-index: 1;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
}

.round-summary__value {
  position: relative;
  z-index: 1;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-base);
}

.round-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 0.25rem;
  flex: 0 0 auto;
  overflow: visible;
  padding-bottom: 0.25rem;
}

.round-grid .badge-multiplier {
  width: 100%;
  min-width: 0;
}

.round-grid .badge-multiplier.low {
  background-color: var(--Base-Base-white-5);
}

.side .tab-panel .bets {
  height: auto;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.side .tab-panel.tab-panel--players .bets,
.side .tab-panel.tab-panel--top .bets {
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
  overflow: visible;
}

.side .tab-panel .bets-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.side .tab-panel.tab-panel--players .bets-body {
  gap: 0;
  display: block;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.side .tab-panel.tab-panel--top .bets-body {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.side .tab-panel.tab-panel--players .bets-body #playersCurrent {
  padding-bottom: 0.25rem;
}

.side .tab-panel.tab-panel--players .bets-body #playersCurrent,
.side .tab-panel.tab-panel--players .bets-body #playersActive,
.side .tab-panel.tab-panel--players .bets-body #playersCashOut {
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  box-sizing: border-box;
}

* {
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
}

::-webkit-scrollbar-track {
  border-radius: var(--radius-max);
  background: rgba(255, 255, 255, 0.06);
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
  opacity: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: var(--radius-max);
  background: rgba(255, 255, 255, 0.28);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

html,
body,
.page {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.bets--top .bets-row.win {
  background-color: var(--Green-Green-op-5);
}

.bets--top .bets-row.current,
.bets--top .bets-row.current.win {
  background-color: var(--Primary-Primary-op-5, rgba(252, 221, 18, 0.05));
}

.bets--top .bets-row.current *,
.bets--top .bets-row.current.win * {
  color: var(--Primary-Primary-base) !important;
}

@keyframes side-tab-enter {
  from {
    transform: translateY(0.5rem);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel--active {
    animation: none;
  }
}

.game-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.60);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
          opacity 180ms ease,
          visibility 180ms ease;
}

/* Above how-to-play / rules so the sound prompt is visible on load */
#popup-sound {
  z-index: 24;
}

#popup-how-to-play,
#popup-rules {
  z-index: 22;
}

#popup-how-to-play {
  background: rgba(0, 0, 0, 0.7);
}

.game-modal[hidden] {
  display: none;
}

.game-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.game-modal__panel {
  position: relative;
  display: flex;
  width: 25rem;
  flex-direction: column;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--background-layout-canvas);
  /*backdrop-filter: blur(var(--blur-Additional));*/
  box-sizing: border-box;
  color: var(--Text-Icons-Primary);
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transition:
          opacity 220ms ease,
          transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.game-modal.is-open .game-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.game-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(204, 204, 204, 0) 50.254%, rgba(255, 255, 255, 0.16) 100%);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.game-modal__panel--my-bets {
  height: 24.25rem;
}

.game-modal__panel--history {
  height: auto;
  gap: 1.25rem;
}

.game-modal__panel--system {
  align-items: center;
  gap: 0;
  padding: 2rem 0;
}

.game-modal__panel--system::before {
  background: var(--Base-Base-white-10);
}

.game-modal__panel--device {

}

.game-modal__panel--connection {
  width: 22.5rem;
}

.game-modal__panel--rules {
  height: 24.5625rem;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
}

.game-modal__panel--chat {
  height: 38rem;
}

.game-modal__panel--how-play {
  height: 30.75rem;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
}

.game-modal__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 4rem;
  flex: 0 0 4rem;
  padding: 1rem 1.25rem;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.game-modal__header--center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
}

.game-modal__title {
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-xl);
}

.game-modal__header--center .game-modal__title {

}

.game-modal--standalone-history .game-modal__header--center {
  display: flex;
  justify-content: space-between;
}

.game-modal--standalone-history .game-modal__header--center .game-modal__title {
  flex: 1 1 auto;
  text-align: left;
}

.game-modal--standalone-history [data-history-back] {
  display: none;
}

.game-modal__icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
  cursor: pointer;
  box-sizing: border-box;
}

.game-modal__icon-button:hover {
  background-color: var(--background-components-Hover);
}

.game-modal__icon-button:disabled,
.game-modal__icon-button.is-disabled,
.game-modal__icon-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

.game-modal__icon-button svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  stroke: currentColor;
}

.game-modal__body {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 0;
  flex-direction: column;
  box-sizing: border-box;
}

.game-modal__body--my-bets {
  height: 20.25rem;
  flex: 0 0 20.25rem;
  padding: 1.25rem;
}

.game-modal__body--history {
  height: auto;
  flex: 0 0 auto;
  gap: 1.25rem;
  padding: 1.25rem;
  overflow: hidden;
}

.game-modal__body--rules {
  height: 18.0625rem;
  flex: 0 0 18.0625rem;
  gap: 0.75rem;
  padding: 0 1.25rem;
  overflow: hidden;
}

.game-modal__body--chat {
  height: 34rem;
  flex: 0 0 34rem;
  gap: 0.75rem;
  padding: 1.25rem;
  overflow: hidden;
}

.game-modal__body--how-play {
  height: 24.25rem;
  flex: 0 0 24.25rem;
  gap: 1.25rem;
  padding: 0 1.25rem;
  overflow: hidden;
}

.game-modal__panel--autoplay {
  width: 25rem;
  height: 42.6875rem;
  max-height: calc(var(--real-vh) - 2rem);
  transition:
          opacity 220ms ease,
          transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
          height 260ms cubic-bezier(0.16, 1, 0.3, 1),
          max-height 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

#popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay {
  height: 26.6875rem;
}

#popup-autoplay.is-autoplay-shared .game-modal__panel--autoplay,
#popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay {
  height: auto;
  max-height: calc(var(--real-vh) - 2rem);
}

.game-modal__panel--autoplay::before {
  background: rgba(255, 255, 255, 0.10);
}

.game-modal__body--autoplay {
  height: 38.6875rem;
  flex: 0 1 38.6875rem;
  min-height: 0;
  padding: 1.25rem;
  overflow: hidden;
  transition:
          height 260ms cubic-bezier(0.16, 1, 0.3, 1),
          flex-basis 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

#popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__body--autoplay {
  height: 22.6875rem;
  flex-basis: 22.6875rem;
}

#popup-autoplay.is-autoplay-shared .game-modal__body--autoplay,
#popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__body--autoplay {
  height: auto;
  flex-basis: auto;
}

.autoplay-settings {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
  margin: 0;
}

.autoplay-settings__cards {
  display: flex;
  width: 100%;
  height: 32.1875rem;
  flex: 0 1 32.1875rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  gap: 0.5rem;
  transition:
          height 260ms cubic-bezier(0.16, 1, 0.3, 1),
          flex-basis 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

#popup-autoplay:not(.is-autoplay-advanced-open) .autoplay-settings__cards {
  height: 16.1875rem;
  flex-basis: 16.1875rem;
}

#popup-autoplay.is-autoplay-shared .autoplay-settings__cards,
#popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .autoplay-settings__cards {
  height: auto;
  flex-basis: auto;
  overflow: visible;
}

#popup-autoplay .autoplay-card--collect,
#popup-autoplay.is-autoplay-shared .autoplay-rounds-row,
#popup-autoplay.is-autoplay-shared .autoplay-divider,
#popup-autoplay.is-autoplay-shared .autoplay-card--advanced {
  display: none;
}

.autoplay-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  overflow: hidden;
}

.autoplay-card.autoplay-card--advanced {
  gap: 0;
}

.autoplay-card--rounds {
  height: 12.4375rem;
  flex: 0 0 12.4375rem;
}

#popup-autoplay.is-autoplay-shared .autoplay-card--rounds {
  height: auto;
  flex: 0 0 auto;
}

.autoplay-divider {
  width: 100%;
  height: 1px;
  flex: 0 0 1px;
  background: var(--Base-Base-white-5);
}

.autoplay-card .autoplay-card-title--rounds {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
}

.autoplay-card--collect {
  height: 3.25rem;
  flex: 0 0 3.25rem;
  justify-content: center;
}

.autoplay-collect-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem; /*0.75rem*/
}

.autoplay-collect-label {
  flex: 1 1 0;
  min-width: 0;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  cursor: pointer;
}

.autoplay-collect-row .collect-input {
  flex: 0 1 9.5rem;
  min-width: 10rem;
  width: auto;
  height: 2rem;
}

.autoplay-collect-row .collect-input .collect-content {
  padding: 0 0.68rem;
  gap: 0.5rem;
}

.autoplay-collect-row .collect-input--inactive {
  opacity: 0.32;
  pointer-events: none;
}

.autoplay-collect-row .collect-input--inactive:hover {
  background-color: var(--background-components-Default);
}

.autoplay-collect-row.is-locked .toggle,
.autoplay-collect-row.is-locked .autoplay-collect-label,
.autoplay-collect-row.is-locked .toggle-input,
.autoplay-collect-row.is-locked .collect-field {
  pointer-events: none;
  cursor: not-allowed;
}

.autoplay-collect-row.is-locked .autoplay-collect-label {
  color: var(--Text-Icons-Disable);
}

.autoplay-collect-row.is-locked .toggle-input+.toggle-slider {
  background-color: var(--background-components-Disable);
  cursor: not-allowed;
}

.autoplay-collect-row.is-locked .toggle-input+.toggle-slider::before {
  background-color: var(--Text-Icons-Disable);
}

.autoplay-collect-row.is-locked .toggle-input:checked+.toggle-slider {
  background-color: var(--Green-Green-op-5);
  cursor: not-allowed;
}

.autoplay-collect-row.is-locked .toggle-input:checked+.toggle-slider::before {
  background-color: var(--Text-Icons-Secondary);
}

.autoplay-collect-row.is-locked .collect-input.disabled {
  background-color: var(--background-components-Disable);
  border-color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

.autoplay-collect-row.is-locked .collect-input.disabled .collect-field,
.autoplay-collect-row.is-locked .collect-input.disabled .collect-label,
.autoplay-collect-row.is-locked .collect-input.disabled .collect-suffix {
  color: var(--Text-Icons-Disable);
  cursor: not-allowed;
}

.autoplay-card--advanced {
  height: 19.25rem;
  flex: 0 0 19.25rem;
  transition:
          height 260ms cubic-bezier(0.16, 1, 0.3, 1),
          flex-basis 260ms cubic-bezier(0.16, 1, 0.3, 1),
          gap 220ms ease;
}

#popup-autoplay:not(.is-autoplay-advanced-open) .autoplay-card--advanced {
  height: 3.25rem;
  flex-basis: 3.25rem;
  gap: 0;
}

.autoplay-rounds-row,
.autoplay-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2rem;
  flex: 0 0 2rem;
  gap: 1rem;
}

.autoplay-card-title {
  flex: 0 0 11rem;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-base);
}

.autoplay-input {
  width: 8.5rem;
  flex: 0 0 8.5rem;
}

.autoplay-rounds-row .autoplay-card-title {
  flex: 1 1 auto;
  min-width: 0;
}

.autoplay-rounds-row .autoplay-input {
  width: 12.125rem;
  flex: 0 0 12.125rem;
}

.autoplay-round-options {
  display: flex;
  width: 100%;
  height: 4.25rem;
  flex: 0 0 4.25rem;
  gap: 0.5rem;
}

.autoplay-settings .autobet-selector {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

.autoplay-advanced-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--Text-Icons-Secondary);
  cursor: pointer;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-base);
  text-align: left;
  margin-bottom: 0.5rem;
}

.autoplay-advanced-toggle svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.autoplay-advanced-toggle[aria-expanded="true"] svg.icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.autoplay-advanced-fields {
  margin-top: 0.5rem;
  display: flex;
  height: 15rem;
  flex: 0 0 15rem;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
          height 260ms cubic-bezier(0.16, 1, 0.3, 1),
          flex-basis 260ms cubic-bezier(0.16, 1, 0.3, 1),
          opacity 180ms ease,
          transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
          visibility 0s linear 0s;
}

#popup-autoplay:not(.is-autoplay-advanced-open) .autoplay-advanced-fields {
  height: 0;
  flex-basis: 0;
  opacity: 0;
  transform: translateY(-0.25rem);
  visibility: hidden;
  pointer-events: none;
  transition:
          height 240ms cubic-bezier(0.4, 0, 0.2, 1),
          flex-basis 240ms cubic-bezier(0.4, 0, 0.2, 1),
          opacity 120ms ease,
          transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
          visibility 0s linear 240ms;
}

.autoplay-advanced-row {
  display: grid;
  grid-template-columns: 2rem 1fr;
  grid-template-rows: 2rem 2rem;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  flex: 0 0 4.5rem;
  gap: 0.5rem 0.75rem;
}

.autoplay-advanced-row .autoplay-input {
  grid-column: 1 / -1;
  width: 100%;
  flex: none;
}

.autoplay-advanced-label {
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  cursor: default;
}

.autoplay-actions {
  display: flex;
  width: 100%;
  height: 3rem;
  flex: 0 0 3rem;
  gap: 1rem;
}

.autoplay-action {
  width: 50%;
}

.game-modal__panel--gifts {
  align-items: center;
  width: 25rem;
  height: auto;
  min-height: 21.75rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(var(--real-vh, 100vh) - 2rem);
  gap: 1.25rem;
  padding: 2rem 0 1.5rem;
  background: var(--background-layout-canvas);
  /*backdrop-filter: blur(var(--blur-Additional));*/
}

.gifts-popup__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
}

.game-modal__panel--gifts-result {
  height: 21.75rem;
  min-height: 21.75rem;
  max-height: 21.75rem;
}

.gifts-popup {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  box-sizing: border-box;
}

.gifts-popup--received {
  height: auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.gifts-popup__content {
  display: flex;
  width: 100%;
  height: 10.5rem;
  flex: 0 0 10.5rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  box-sizing: border-box;
  text-align: center;
}

.gifts-popup--received .gifts-popup__content {
  height: auto;
  flex: 0 0 auto;
  min-height: 0;
}

.gifts-popup__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  flex: 0 0 5rem;
  border-radius: var(--radius-max);
  background: var(--background-components-Default);
  color: var(--Text-Icons-Secondary);
}

.gifts-popup__icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}

.gifts-popup--received .gifts-popup__icon-wrap {
  width: auto;
  height: auto;
  background: transparent;
}

.gifts-popup--received .gifts-popup__icon {
  width: 7.95rem;
  height: 6.5rem;
}

.gifts-popup--received .gifts-popup__title {
  padding-bottom: 0.75rem;
}


.gifts-popup__copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.gifts-popup__title {
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-2xl);
  line-height: var(--line-height-text-2xl);
  font-weight: var(--font-weight-bold);
}

.gifts-popup__description,
.gifts-popup__eyebrow {
  margin: 0;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-base);
  line-height: var(--line-height-text-base);
  font-weight: var(--font-weight-normal);
}

.gifts-popup--received .gifts-popup__copy {
  min-width: 0;
}

.gifts-popup--received .gifts-popup__title,
.gifts-popup--received .gifts-popup__description {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gifts-popup--received .gifts-popup__description {
  width: 100%;
}

.gifts-popup__amount {
  color: var(--Green-Green-base);
  font-size: var(--font-size-text-3xl);
  line-height: var(--line-height-text-3xl);
  font-weight: var(--font-weight-bold);
}

.gifts-popup__actions {
  display: flex;
  width: 100%;
  height: 6.5rem;
  flex: 0 0 6.5rem;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.gifts-popup__actions--single {
  height: 3rem;
  flex-basis: 3rem;
}

.gifts-popup__use-wrap {
  position: relative;
  width: 100%;
  height: 3rem;
  flex: 0 0 3rem;
}

.gifts-popup__use-wrap .gifts-popup__button {
  flex: none;
}

.gifts-popup__use-wrap .mode-switch-warning {
  z-index: 4;
}

.gifts-popup__button {
  width: 100%;
  height: 3rem;
  flex: 0 0 3rem;
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}

.gifts-popup__button.is-autoplay-locked {
  cursor: not-allowed;
  opacity: 0.35;
  background-image: none;
  box-shadow: none;
}

.gifts-popup__button--later {
  flex-direction: column;
  gap: 0;
}

.gifts-popup__button--later small {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-medium);
}

.gifts-popup__button--later small.is-hidden {
  display: none;
}

.gifts-popup__button--later .gift-spin-exp {
  display: inline-block;
  margin-left: 0.25rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gifts-popup--result .gifts-popup__content {
  height: 13.25rem;
  flex-basis: 13.25rem;
}

.gifts-popup--result .gifts-popup__copy {
  gap: 0.25rem;
  min-width: 0;
}

.gifts-popup--result .gifts-popup__title,
.gifts-popup--result .gifts-popup__description,
.gifts-popup--result .gifts-popup__eyebrow,
.gifts-popup--result .gifts-popup__amount {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Zero-win result: same free-flight icon sizing as accrual (received) popup */
.gifts-popup--result.gifts-popup--zero-win .gifts-popup__icon-wrap {
  width: auto;
  height: auto;
  flex-basis: auto;
  background: transparent;
}

.gifts-popup--result.gifts-popup--zero-win .gifts-popup__icon {
  width: 7.95rem;
  height: 6.5rem;
}

.gifts-popup--result.gifts-popup--zero-win .gifts-popup__content {
  height: auto;
  flex-basis: auto;
  justify-content: center;
}

.gifts-popup--result.gifts-popup--zero-win .gifts-popup__copy {
  gap: 0.75rem;
}

.gifts-popup--result.gifts-popup--zero-win .gifts-popup__title {
  padding-bottom: 0.75rem;
}

.game-modal__panel--gifts-result:has(.gifts-popup--zero-win) {
  height: auto;
  min-height: 0;
  max-height: none;
}

.gifts-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.gifts-popup__content,
.gifts-popup__actions {
  position: relative;
  z-index: 2;
}

.gifts-confetti span {
  position: absolute;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.125rem;
  background: var(--Primary-Primary-base);
  opacity: 0.72;
}

.gifts-confetti span:nth-child(1) { left: 99.56%; top: 1.93rem; width: 0.4625rem; height: 0.43125rem; background: rgb(252, 221, 18); }
.gifts-confetti span:nth-child(2) { left: 97.69%; top: 8.9rem; width: 0.43125rem; height: 0.4625rem; background: rgb(66, 200, 84); }
.gifts-confetti span:nth-child(3) { left: 63.92%; top: 9.63125rem; width: 1.325rem; height: 0.7rem; background: rgb(104, 211, 118); }
.gifts-confetti span:nth-child(4) { left: 4.69%; top: 7.54375rem; width: 0.425rem; height: 0.91875rem; background: rgb(148, 129, 255); }
.gifts-confetti span:nth-child(5) { left: -7.47%; top: 5.13125rem; width: 0.61875rem; height: 1.05rem; background: rgb(255, 255, 255); }
.gifts-confetti span:nth-child(6) { left: 34.06%; top: 3.2375rem; width: 0.4875rem; height: 0.4625rem; background: rgb(66, 200, 84); }
.gifts-confetti span:nth-child(7) { left: 16.31%; top: 4.8125rem; width: 0.925rem; height: 0.78125rem; background: rgb(106, 170, 254); }
.gifts-confetti span:nth-child(8) { left: 74.31%; top: 0.725rem; width: 0.4125rem; height: 0.6rem; background: rgb(66, 200, 84); }
.gifts-confetti span:nth-child(9) { left: 22.78%; top: 9.7375rem; width: 0.65rem; height: 0.70625rem; background: rgb(255, 255, 255); }
.gifts-confetti span:nth-child(10) { left: 19.39%; top: 0.53125rem; width: 0.30625rem; height: 0.36875rem; background: rgb(255, 255, 255); }
.gifts-confetti span:nth-child(11) { left: 62.94%; top: 10.91875rem; width: 0.925rem; height: 0.9375rem; background: rgb(104, 211, 118); }
.gifts-confetti span:nth-child(12) { left: 84.81%; top: 9.13125rem; width: 0.35625rem; height: 0.3125rem; background: rgb(148, 129, 255); }
.gifts-confetti span:nth-child(13) { left: 45.86%; top: 4.39375rem; width: 1.1375rem; height: 1.0875rem; background: rgb(106, 170, 254); }
.gifts-confetti span:nth-child(14) { left: -8.03%; top: -0.50625rem; width: 1.3rem; height: 0.69375rem; background: rgb(255, 255, 255); }
.gifts-confetti span:nth-child(15) { left: 12.17%; top: 9.66875rem; width: 0.41875rem; height: 0.40625rem; background: rgb(252, 221, 18); }
.gifts-confetti span:nth-child(16) { left: 76.17%; top: 7.96875rem; width: 0.46875rem; height: 0.6875rem; background: rgb(252, 221, 18); }
.gifts-confetti span:nth-child(17) { left: 86.83%; top: 7.73125rem; width: 0.2275rem; height: 0.2275rem; background: rgb(106, 170, 254); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(18) { left: 63.78%; top: 3.05625rem; width: 0.41875rem; height: 0.41875rem; background: rgb(148, 129, 255); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(19) { left: 52.11%; top: 11.95625rem; width: 0.3875rem; height: 0.3875rem; background: rgb(104, 211, 118); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(20) { left: 55.81%; top: 7.25rem; width: 0.58125rem; height: 0.58125rem; background: rgb(252, 221, 18); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(21) { left: 1.06%; top: 0.88125rem; width: 0.195625rem; height: 0.195625rem; background: rgb(255, 255, 255); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(22) { left: 42.17%; top: 8.625rem; width: 0.29125rem; height: 0.29125rem; background: rgb(148, 129, 255); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(23) { left: 47.86%; top: 7.73125rem; width: 0.195625rem; height: 0.195625rem; background: rgb(66, 200, 84); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(24) { left: 16.28%; top: 10.225rem; width: 0.51875rem; height: 0.51875rem; background: rgb(106, 170, 254); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(25) { left: 99.61%; top: 2.325rem; width: 0.35625rem; height: 0.35625rem; background: rgb(106, 170, 254); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(26) { left: 25.53%; top: 10.9rem; width: 0.55rem; height: 0.55rem; background: rgb(106, 170, 254); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(27) { left: 68.89%; top: 4.7875rem; width: 0.195625rem; height: 0.195625rem; background: rgb(252, 221, 18); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(28) { left: 33.64%; top: 1.96875rem; width: 0.58125rem; height: 0.58125rem; background: rgb(255, 255, 255); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(29) { left: 37.19%; top: 4.5625rem; width: 0.51875rem; height: 0.51875rem; background: rgb(252, 221, 18); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(30) { left: 26.08%; top: 11.05625rem; width: 0.55rem; height: 0.55rem; background: rgb(104, 211, 118); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(31) { left: 59.22%; top: 10.675rem; width: 0.58125rem; height: 0.58125rem; background: rgb(148, 129, 255); border-radius: var(--radius-max); }
.gifts-confetti span:nth-child(32) { left: 102.17%; top: 7.7rem; width: 0.41875rem; height: 0.41875rem; background: rgb(252, 221, 18); border-radius: var(--radius-max); }

.system-alert {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.system-alert--device {
  height: 13.5rem;
  gap: 1.5rem;
  padding: 0 2rem;
}

.system-alert--connection {
  height: 10.5rem;
  gap: 1rem;
  padding: 0 2rem;
}

.system-alert__content {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.system-alert__content--device {
  height: 9rem;
  gap: 1rem;
}

.system-alert__content--connection {
  height: 10.5rem;
  gap: 1rem;
}

.system-alert__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  flex: 0 0 5rem;
  border-radius: var(--radius-max);
  box-sizing: border-box;
}

.system-alert__icon-wrap--device {
  background: var(--Primary-Primary-op-10);
  color: var(--Primary-Primary-base);
}

.system-alert__icon-wrap--connection {
  background: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
}

.system-alert__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

.system-alert__icon use {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}

.system-alert__copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.system-alert__copy--connection {
  height: 4.5rem;
}

.system-alert__title {
  width: 13.75rem;
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-2xl);
  text-align: center;
}

.system-alert__content--connection .system-alert__title {
  width: 100%;
  height: 1.5rem;
}

.system-alert__description {
  width: 13.625rem;
  margin: 0;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-base);
  text-align: center;
}

.system-alert__button {
  width: 21rem;
  flex: 0 0 3rem;
  padding: 0.5rem 1.25rem;
}

.system-alert--inactivity,
.system-alert--error,
.system-alert--timeout,
.system-alert--sound {
  gap: 1.5rem;
  padding: 0 1.25rem;
}

.system-alert__content--inactivity,
.system-alert__content--error,
.system-alert__content--timeout,
.system-alert__content--sound {
  gap: 1.5rem;
}

.system-alert__icon-wrap--inactivity,
.system-alert__icon-wrap--timeout,
.system-alert__icon-wrap--sound {
  background: var(--Primary-Primary-op-10);
  color: var(--Primary-Primary-base);
}

.system-alert__icon-wrap--sound .icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  color: currentColor;
  fill: currentColor;
}

.system-alert__icon-wrap--error {
  background: var(--Red-Red-op-10);
  color: var(--Red-base);
}

.system-alert--inactivity .system-alert__title,
.system-alert--error .system-alert__title,
.system-alert--timeout .system-alert__title,
.system-alert--sound .system-alert__title {
  width: 100%;
  font-size: var(--font-size-text-2xl);
  line-height: var(--line-height-text-2xl);
}

.system-alert__description--inactivity {
  width: 20rem;
  max-width: 100%;
}

.system-alert__actions {
  display: flex;
  width: 100%;
  gap: 1rem;
}

.system-alert__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  height: 3rem;
}

.my-bets-table {
  display: flex;
  width: 100%;
  height: 17.75rem;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.my-bets-head,
.my-bets-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.my-bets-head {
  height: 1.5rem;
  flex: 0 0 1.5rem;
  padding: 0.25rem 0.5rem;
  gap: 0.5rem;
  color: var(--Base-Base-white-50);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
}

.my-bets-list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0.25rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.my-bets-row {
  height: 1.75rem;
  flex: 0 0 1.75rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5625rem;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--radius-max);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--Text-Icons-Primary);
  cursor: default;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  text-align: left;
}

.my-bets-row.win {
  background-color: rgba(66, 200, 84, 0.05);
}

.my-bets-row strong,
.my-bets-head span {
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-bets-row span {
  min-width: 0;
  text-align: left;
}

.my-bets-row > span:nth-child(3),
.my-bets-head > span:nth-child(3) {
  text-align: center;
}

.my-bets-row .my-bets-win {
  color: var(--Text-Icons-Primary);
  font-weight: var(--font-weight-bold);
}

.my-bets-row.win .my-bets-win {
  color: var(--Green-Green-base);
}

.my-bets-row .crash {
  font-weight: var(--font-weight-bold);
}

.my-bets-row .crash.low {
  background: var(--Multiplication-1-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.my-bets-row .crash.medium {
  background: var(--Multiplication-2-10);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.my-bets-row .crash.high {
  background: var(--Multiplication-10-plus);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.my-bets-row .crash.max {
  font-weight: var(--font-weight-extrabold);
  font-size: 12px;
  background: none;
  -webkit-text-fill-color: #FCDD12;
  color: #FCDD12;
  /* text-shadow: 0px 0px 10px rgba(252, 221, 18, 0.35); */
  text-shadow: 0px 0px 3px rgba(252, 221, 18, 0.35);
}

.history-hero {
  position: relative;
  display: flex;
  width: 100%;
  height: 4.375rem;
  flex: 0 0 4.375rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.history-hero__main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 3rem;
  box-sizing: border-box;
}

.history-nav-button {
  position: absolute;
  top: 1.875rem;
  transform: translateY(-50%);
}

.history-nav-button[data-history-step="prev"] {
  left: 0.75rem;
}

.history-nav-button[data-history-step="next"] {
  right: 0.75rem;
}

.history-nav-button--hidden {
  display: none;
}

.history-hero strong {
  color: var(--Green-Green-base);
  background: var(--Multiplication-10-plus);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--font-size-text-6xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-6xl);
}

.history-hero strong.low {
  background: var(--Multiplication-1-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.history-hero strong.medium {
  background: var(--Multiplication-2-10);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.history-hero strong.high {
  background: var(--Multiplication-10-plus);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.history-hero strong.max {
  font-weight: var(--font-weight-extrabold);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #FCDD12;
  color: #FCDD12;
  text-shadow: 0px 0px 10px rgba(252, 221, 18, 0.35);
}

.history-hero span {
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-lg);
}

#history-multiplier {
  max-width: 100%;
}

.history-multipliers {
  display: none;
  width: 100%;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  gap: 0.25rem;
  overflow: hidden;
}

.history-multipliers .badge-multiplier {
  flex: 0 0 auto;
}

.history-multipliers .badge-multiplier:first-child {
  margin-left: -2.0625rem;
}

.game-modal .round-card {
  flex: 0 0 3.5rem;
  background: rgba(255, 255, 255, 0.10);
  display: none;
}

.history-divider {
  width: 100%;
  height: 1px;
  flex: 0 0 1px;
  background: rgba(255, 255, 255, 0.05);
}

.history-values {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.history-summary,
.history-copy-row {
  background: rgba(255, 255, 255, 0.10);
}

.history-summary {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  height: 4rem;
  flex: 0 0 4rem;
  padding: 0.5rem 0.25rem;
  gap: 0.5rem;
  box-sizing: border-box;
}

.history-summary div,
.history-copy-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.125rem;
}

.history-summary div {
  align-items: center;
}

.history-summary span,
.history-copy-row span {
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
}

.history-summary strong,
.history-copy-row strong {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-summary strong.history-win {
  color: var(--Green-Green-base);
}

.history-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 3.375rem;
  flex: 0 0 3.375rem;
  padding: 0.5rem 0.75rem;
  gap: 0.75rem;
  box-sizing: border-box;
}

.history-copy-row > div {
  flex: 1 1 auto;
}

.history-copy-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.64);
  cursor: pointer;
}

.history-copy-row svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.chat-messages {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  width: 100%;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.chat-avatar {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
}

.chat-message__bubble {
  width: fit-content;
  max-width: calc(100% - 2rem);
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem 0.75rem 0.75rem 0.125rem;
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.chat-message--system .chat-message__bubble,
.chat-message--own .chat-message__bubble {
  background: rgba(252, 221, 18, 0.05);
}

.chat-message__meta {
  display: flex;
  align-items: center;
  height: 0.875rem;
  gap: 0.25rem;
}

.chat-message__name,
.chat-message__time {
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
}

.chat-message__name {
  color: var(--Text-Icons-Secondary);
  font-weight: var(--font-weight-medium);
}

.chat-message--system .chat-message__name,
.chat-message--own .chat-message__name {
  color: rgba(252, 221, 18, 1);
}

.chat-message__time {
  color: var(--Text-Icons-Tertiary);
  font-weight: var(--font-weight-normal);
}

.chat-message__text {
  margin: 0.125rem 0 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
  overflow-wrap: anywhere;
}

.chat-composer {
  display: flex;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-composer .chat-input {
  width: 100%;
  flex: 0 0 2.25rem;
}

.chat-prompts {
  display: none;
  width: 100%;
  height: 2rem;
  flex: 0 0 2rem;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.chat-prompts .chip {
  flex: 0 0 auto;
}

.chat-prompt--mobile {
  display: none;
}

.rules-tabs {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 2rem;
  flex: 0 0 2rem;
  gap: 0.75rem;
  border-bottom: 1px solid var(--Base-Base-white-10);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-sizing: border-box;
}

.rules-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.rules-tab {
  position: relative;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.rules-tab--active {
  border-bottom-color: var(--Primary-Primary-base);
  color: var(--Primary-Primary-base);
}

.rules-tab--active:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--Primary-Primary-base);
}

.rules-content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.rules-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.rules-section {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.75rem;
  scroll-margin-top: 0;
}

.rules-section h3 {
  margin: 0;
  color: var(--Base-Base-white);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-base);
}

.rules-section p {
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
}

.rules-section p::first-line {
  font-size: var(--font-size-text-base); /* 14px */
}

.rules-divider {
  display: block;
  width: 100%;
  height: 1px;
  flex: 0 0 1px;
  background: var(--Base-Base-white-5);
}

.how-play-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 12.5rem;
  flex: 0 0 12.5rem;
  border-radius: var(--radius-l);
  background: var(--Base-Base-black-25);
  overflow: hidden;
  box-sizing: border-box;
}

.how-play-multiplier {
  background: url(../ImagesNew/WebP/how-play-multiplier.webp);
  background-size: cover;
  width: 100%;
  height: 100%;
  display: none;
  position: relative;
}

.how-play-multiplier div {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  color: var(--Base-Base-white);
  font-size: var(--font-size-text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-3xl);
}

.how-play-multiplier div svg {
  width: 14px;
  top: 13px;
  position: relative;
}

.how-play-preview.multiplier .how-play-multiplier {
  display: flex;
}

.how-play-preview.multiplier .how-play-mini {
  display: none;
}

.how-play-mini {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 95%;
  height: 8.875rem;
  box-sizing: border-box;
}

.how-play-mini :is(.toggle, .bet-input, .chip, .btn-bet, .btn-autoplay) {
  pointer-events: none;
}

.how-play-mini-card {
  display: flex;
  width: auto;
  height: 8.875rem;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  box-sizing: border-box;
}

.how-play-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 1rem;
  flex: 0 0 1rem;
}

.how-play-auto {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.25rem;
}

.how-play-mini .toggle {
  width: 1.25rem;
  height: 0.7890625rem;
  flex: 0 0 1.25rem;
}

.how-play-mini .toggle-slider {
  border-radius: var(--radius-max);
}

.how-play-mini .toggle-slider::before {
  width: 0.625rem;
  height: 0.625rem;
  top: 0.0625rem;
  left: 0.0625rem;
}

.how-play-mini .toggle-input:checked + .toggle-slider::before {
  transform: translateX(0.46875rem);
}

.how-play-mini .auto-text {
  font-size: 0.59125rem;
  line-height: 0.78875rem;
}

.how-play-mini .btn-autoplay {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: var(--Text-Icons-Secondary);
}

.how-play-mini .btn-autoplay svg.icon {
  width: 0.875rem;
  height: 0.875rem;
}

.how-play-bet-input.bet-input {
  width: 100%;
  height: 1.57625rem;
  flex: 0 0 1.57625rem;
  padding: 0 0.375rem;
  box-sizing: border-box;
}

.how-play-bet-input .bet-input-btn {
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 0.875rem;
}

.how-play-bet-input .bet-input-btn svg.icon {
  width: 0.75rem;
  height: 0.75rem;
}

.how-play-bet-input .bet-input-field {
  font-size: 0.78875rem;
  line-height: 0.985625rem;
}

.how-play-chips {
  width: 100%;
  height: 1.57625rem;
  flex: 0 0 1.57625rem;
}

.how-play-chips.bet-chips .chip {
  height: 1.57625rem;
  min-width: 0;
  flex: 1 1 0;
  padding: 0;
  font-size: var(--font-size-text-xxs);
  line-height: var(--line-height-text-xxs);
}

.how-play-bet-button.btn-bet {
  width: 100%;
  height: 3.125rem;
  flex: 0 0 3.125rem;
  border-radius: 0.75rem;
  box-sizing: border-box;
}

.how-play-bet-button.btn-bet .place-bet-div,
.how-play-bet-button.btn-bet .cash-out-div {
  pointer-events: none;
}

.how-play-bet-button .btn-bet__value {
  font-size: 0.78875rem;
  line-height: 0.985625rem;
}

.how-play-bet-button .btn-bet__label {
  font-size: 0.59125rem;
  line-height: 0.78875rem;
}

.how-play-sep {
  width: 1px;
  height: 8.875rem;
  flex: 0 0 1px;
  margin: 0 0.75rem;
  align-self: stretch;
  background: var(--Base-Base-white-10);
}

.how-play-copy {
  display: flex;
  align-items: center;
  width: 100%;
  height: 6.25rem;
  flex: 0 0 6.25rem;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  text-align: center;
}

.how-play-text {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.75rem;
}

.how-play-text h3 {
  margin: 0;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-2xl);
}

.how-play-text p {
  margin: 0;
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-base);
}

.how-play-dots {
  display: inline-flex;
  align-items: center;
  width: 1.625rem;
  height: 0.375rem;
  flex: 0 0 0.375rem;
  gap: 0.25rem;
}

.how-play-dot {
  width: 0.375rem;
  height: 0.375rem;
  display: block;
  flex: 0 0 0.375rem;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-max);
  background: var(--Text-Icons-Disable);
  cursor: pointer;
}

.how-play-dot--active {
  background: var(--Text-Icons-Primary);
}

.how-play-dot:focus-visible {
  outline: 0.125rem solid var(--Base-Base-white-50);
  outline-offset: 0.125rem;
}

.how-play-actions {
  width: 100%;
  height: 3rem;
  flex: 0 0 3rem;
}

.how-play-actions--stack {
  display: flex;
  flex-direction: column;
  height: auto;
  flex: 0 0 auto;
  gap: 0.75rem;
}

.how-play-next {
  width: 100%;
  height: 3rem;
  border-color: var(--Base-Base-white-15);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}

.how-play-next svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.how-play-next--final svg.icon {
  display: none;
}

.collect-mobile-modal {
  display: none;
}

.collect-mobile-modal[hidden],
.collect-mobile-sheet[hidden] {
  display: none;
}

body.collect-modal-open {
  overflow: hidden;
}

@media (max-width: 47.9375rem),
       (orientation: landscape) and (max-width: 63.9375rem) and (max-height: 30rem) {
  #AddScenario,
  #RemoveScenario,
  #HideScenario,
  #AddScenarios {
    display: none;
  }
  
  .collect-mobile-modal {
    position: fixed;
    inset: 0;
    z-index: 21;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--Additional-Overlay);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
            opacity 180ms ease,
            visibility 180ms ease;
  }

  .collect-mobile-modal[hidden] {
    display: none;
  }

  .collect-mobile-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .collect-mobile-sheet {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    background: var(--background-layout-canvas);
    /*backdrop-filter: blur(var(--blur-Additional));*/
    color: var(--Text-Icons-Primary);
    box-sizing: border-box;
    overflow: hidden;
    transform: translateY(calc(100% + 1.5rem));
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  .collect-mobile-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px 1px 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(204, 204, 204, 0) 50.254%, rgba(255, 255, 255, 0.16) 100%);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .collect-mobile-modal.is-open .collect-mobile-sheet {
    transform: translateY(0);
  }

  .collect-mobile-sheet--presets {
    padding: 1rem;
    width: 100%;
  }

  .collect-mobile-sheet--custom {
    padding-bottom: 1rem;
    width: 100%;
  }

  .collect-mobile-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2rem;
    flex: 0 0 2rem;
    gap: 1rem;
    box-sizing: border-box;
  }

  .collect-mobile-title {
    margin: 0;
    color: var(--Text-Icons-Primary);
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-text-lg);
  }

  .collect-mobile-title--center {
    flex: 1 1 auto;
    text-align: center;
  }

  .collect-mobile-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-max);
    background-color: var(--background-components-Default);
    color: var(--Text-Icons-Primary);
    box-shadow: var(--shadow-Default-button);
    cursor: pointer;
    box-sizing: border-box;
    backdrop-filter: blur(var(--blur-Primary));
  }

  .collect-mobile-icon-button svg.icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    stroke: currentColor;
  }

  .collect-mobile-divider {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 0.0625rem;
    flex: 0 0 0.0625rem;
    background: var(--Base-Base-white-5);
  }

  .collect-mobile-options {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 2rem;
    flex: 0 0 auto;
    gap: 0.4375rem;
    padding-bottom: 3.5rem;
  }

  .collect-mobile-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0.4375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-max);
    background: var(--background-components-Default);
    color: var(--Text-Icons-Primary);
    cursor: pointer;
    box-sizing: border-box;
    font-size: var(--font-size-text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-text-base);
    white-space: nowrap;
  }

  .collect-custom-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 4rem;
    flex: 0 0 4rem;
    padding: 1rem 1.25rem;
    background: var(--Base-Base-black-15);
    box-shadow: inset 0 -0.0625rem 0 var(--Base-Base-white-5);
    box-sizing: border-box;
  }

  .collect-custom-head__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2rem;
    gap: 1rem;
  }

  .collect-custom-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 20.5rem;
    flex: 0 0 20.5rem;
    padding: 0 1rem;
    gap: 1rem;
    box-sizing: border-box;
  }

  .collect-custom-display {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 20rem;
    max-width: 100%;
    height: 4rem;
    flex: 0 0 4rem;
    padding: 0.75rem 0;
    box-sizing: border-box;
    color: var(--Text-Icons-Primary);
    font-size: var(--font-size-text-4xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-text-4xl);
  }

  .collect-custom-value:empty {
    display: none;
  }

  .collect-custom-caret {
    color: var(--Primary-Primary-base);
    font-weight: var(--font-weight-normal);
    animation: collect-caret-blink 1s steps(1, end) infinite;
  }

  .collect-custom-value + .collect-custom-caret,
  .collect-custom-suffix {
    margin-left: -0.125rem;
  }

  .collect-custom-suffix {
    color: var(--Text-Icons-Secondary);
  }

  .collect-custom-keyboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: center;
    width: 20.5rem;
    max-width: 100%;
    height: 11.5rem;
    flex: 0 0 11.5rem;
    gap: 0.5rem;
  }

  .collect-custom-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.5rem;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--background-components-Default);
    color: var(--Text-Icons-Primary);
    cursor: pointer;
    box-sizing: border-box;
    font-size: var(--font-size-text-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-text-xl);
  }

  .collect-custom-key svg.icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
  }

  .collect-custom-set {
    align-self: center;
    width: 20rem;
    max-width: 100%;
    height: 3rem;
    flex: 0 0 3rem;
    font-size: var(--font-size-text-lg);
    line-height: var(--line-height-text-lg);
  }
}

@keyframes collect-caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* Welcome popup: full-bleed on every viewport, so it opts out of the shared
   panel sizing and the mobile bottom-sheet rules via id specificity. */
#popup-welcome {
  z-index: 25;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: #191924;
}

#popup-welcome .game-modal__panel--welcome {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  transform: none;
  background-color: #000000;
  background-image: url(../ImagesNew/Banner.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#popup-welcome .game-modal__panel--welcome::before {
  content: none;
}

.welcome-popup__brand {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: calc(3.5rem + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
  box-sizing: border-box;
}

.welcome-popup__logo {
  display: block;
  width: min(16.5rem, 72%);
  height: auto;
}

.welcome-popup__delivered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
  margin: 1.75rem 0 0;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-base);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--Text-Icons-Primary);
}

.welcome-popup__delivered-logo {
  display: block;
  width: auto;
  height: 1.625rem;
}

.welcome-popup {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  text-align: center;
}

.welcome-popup > * {
  width: 100%;
  max-width: 25rem;
}

.welcome-popup__close {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
}

.welcome-popup__title {
  width: 100%;
  margin: 0 0 0.75rem;
  font-family: 'Roboto', sans-serif;
  font-size: 2.75rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: break-word;
  color: #FFCC00;
}

.welcome-popup__title-logo {
  display: none;
  width: auto;
  height: 0.78em;
  /* margin-inline-start: 0.3em; */
  vertical-align: -0.06em;
}

body.en .welcome-popup__title-logo {
  display: inline-block;
}

.welcome-popup__description {
  margin: 0 0 1.5rem;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-base);
  color: var(--Text-Icons-Secondary);
}

.welcome-popup__button {
  width: 100%;
  margin: 0 0 0.75rem;
}

.welcome-popup__countdown {
  margin: 0;
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-text-sm);
  color: var(--Text-Icons-Secondary);
}

.welcome-popup__countdown-value {
  color: var(--Text-Icons-Primary);
  font-weight: var(--font-weight-bold);
}

@media (orientation: landscape) and (max-height: 30rem) {
  #popup-welcome .welcome-popup__brand {
    padding-top: calc(2.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.5rem;
  }

  #popup-welcome .welcome-popup__logo {
    width: min(12rem, 28vh);
  }

  #popup-welcome .welcome-popup {
    padding-bottom: 1rem;
  }

  #popup-welcome .welcome-popup__title {
    margin-bottom: 0.25rem;
    font-size: 2rem;
  }

  #popup-welcome .welcome-popup__description {
    margin-bottom: 0.75rem;
  }
}

/* Portrait: start narrowing at 800px, then harder from 640px so the logo clears the copy. */
@media (orientation: portrait) and (max-height: 50rem) {
  #popup-welcome .welcome-popup__logo {
    width: min(12rem, 58%);
  }
}

@media (orientation: portrait) and (max-height: 30rem) {
  #popup-welcome .welcome-popup__logo {
    width: min(7.5rem, 42%);
  }
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 47.9375rem) {
  .game-modal {
    align-items: flex-end;
  }

  .game-modal__panel {
    width: 100%;
    max-height: 66.666vh;
    max-height: 66.666dvh;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    transform: translateY(calc(100% + 1.5rem));
  }

  .game-modal.is-open .game-modal__panel {
    transform: translateY(0);
  }

  /* Sound + four-bet: centered cards on mobile, not bottom sheets. */
  #popup-sound,
  #popup-four-bet-info {
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  #popup-sound .game-modal__panel,
  #popup-sound .game-modal__panel--system,
  #popup-sound .game-modal__panel--sound,
  #popup-four-bet-info .game-modal__panel,
  #popup-four-bet-info .game-modal__panel--how-play,
  #popup-four-bet-info .game-modal__panel--four-bet-info {
    width: min(100%, 22.5rem);
    max-width: 22.5rem;
    height: auto;
    max-height: calc(var(--real-vh) - 1rem);
    border-radius: var(--radius-l);
    transform: translateY(0.75rem) scale(0.98);
  }

  #popup-sound.is-open .game-modal__panel,
  #popup-sound.is-open .game-modal__panel--system,
  #popup-four-bet-info.is-open .game-modal__panel,
  #popup-four-bet-info.is-open .game-modal__panel--how-play {
    transform: translateY(0) scale(1);
  }

  #popup-sound .game-modal__panel--system::before {
    padding: 1px;
    background: var(--Base-Base-white-10);
  }

  .game-modal__panel--my-bets {
    height: min(44.5rem, 66.666vh);
    height: min(44.5rem, 66.666dvh);
    gap: 0.5rem;
    padding-bottom: 0;
    width: 100%;
  }

  .game-modal__panel--history {
    gap: 1.25rem;
    padding-bottom: 0;
    width: 100%;
  }

  .game-modal__panel--system::before {
    padding: 1px 0 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(204, 204, 204, 0) 50.254%, rgba(255, 255, 255, 0.16) 100%);
  }

  .game-modal__panel--device {
    height: auto;
    max-height: 21.75rem;
    padding: 2rem 0;
  }

  .game-modal__panel--connection {
    width: 100%;
    height: auto;
    max-height: 20rem;
    padding: 2rem 0;
  }

  .game-modal__panel--rules {
    height: min(25.5625rem, calc(var(--real-vh) - 6rem));
    max-height: min(25.5625rem, calc(var(--real-vh) - 6rem));
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    width: 100%;
  }

  .game-modal__panel--chat {
    height: auto;
    max-height: min(44rem, calc(var(--real-vh) - 6rem));
    gap: 1.25rem;
    padding-bottom: 0;
    width: 100%;
  }

  .game-modal__panel--how-play {
    height: min(30.75rem, calc(var(--real-vh) - 6rem));
    max-height: min(30.75rem, calc(var(--real-vh) - 6rem));
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    width: 100%;
  }

  .game-modal__panel--four-bet-info {
    height: auto;
    max-height: calc(var(--real-vh) - 6rem);
    padding-bottom: 1rem;
  }

  .game-modal__panel--autoplay,
  #popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay {
    width: 100%;
    height: 26.1875rem;
    max-height: 26.1875rem;
    gap: 1rem;
    padding-bottom: 1rem;
  }

  #popup-autoplay.is-autoplay-shared .game-modal__panel--autoplay,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay {
    height: auto;
    max-height: calc(var(--real-vh) - 6rem);
  }

  .game-modal__panel--autoplay::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(204, 204, 204, 0) 50.254%, rgba(255, 255, 255, 0.16) 100%);
  }

  .game-modal__panel--gifts {
    width: 100%;
    height: auto;
    min-height: min(24.75rem, calc(var(--real-vh) - 6rem));
    max-height: calc(var(--real-vh) - 6rem);
    padding: 2rem 0 1.5rem;
  }

  .game-modal__panel--gifts-result {
    height: min(22rem, calc(var(--real-vh) - 6rem));
    min-height: min(22rem, calc(var(--real-vh) - 6rem));
    max-height: min(26rem, calc(var(--real-vh) - 6rem));
  }

  .gifts-popup {
    gap: 1.25rem;
  }

  .gifts-popup__content {
    height: 11.5rem;
    flex-basis: 11.5rem;
    padding: 0 2rem;
  }

  .gifts-popup--received .gifts-popup__content {
    height: auto;
    flex-basis: auto;
  }

  .gifts-popup--result .gifts-popup__content {
    height: 13.25rem;
    flex-basis: 13.25rem;
  }

  .gifts-popup--result.gifts-popup--zero-win .gifts-popup__content {
    height: auto;
    flex-basis: auto;
  }

  .game-modal__panel--gifts-result:has(.gifts-popup--zero-win) {
    height: auto;
    min-height: 0;
    max-height: calc(var(--real-vh) - 6rem);
  }

  .gifts-popup__actions {
    padding: 0 1.5rem;
  }

  .gifts-confetti {
    inset: 0;
  }

  .game-modal__body--my-bets {
    height: auto;
    flex: 1 1 auto;
    padding: 0 0.5rem 0.5rem;
  }

  .game-modal__body--history {
    height: auto;
    flex: 1 1 auto;
    padding: 0 1.25rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .game-modal__body--rules {
    height: auto;
    flex: 1 1 auto;
    padding: 0 1.25rem;
    overflow: hidden;
  }

  .game-modal__body--chat {
    flex: 1 1 auto;
    padding: 0 1.25rem 1.25rem;
  }

  .game-modal__body--how-play {
    height: auto;
    flex: 1 1 auto;
    padding: 0 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .game-modal__body--autoplay,
  #popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__body--autoplay {
    height: 20.1875rem;
    flex: 0 0 20.1875rem;
    padding: 0 1.25rem;
  }

  #popup-autoplay.is-autoplay-shared .game-modal__body--autoplay,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__body--autoplay {
    height: auto;
    flex: 0 1 auto;
  }

  #popup-autoplay.is-autoplay-advanced-open .game-modal__body--autoplay {
    /*height: 39.9375rem;*/
    /*flex-basis: 39.9375rem;*/
    height: 42.1875rem;
    max-height: min(42.1875rem, calc(var(--real-vh) - 2rem));
  }

  .autoplay-settings__cards,
  #popup-autoplay:not(.is-autoplay-advanced-open) .autoplay-settings__cards {
    height: 16.1875rem;
    flex-basis: 16.1875rem;
  }

  #popup-autoplay.is-autoplay-shared .autoplay-settings__cards,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .autoplay-settings__cards {
    height: auto;
    flex-basis: auto;
    overflow: visible;
  }

  #popup-autoplay.is-autoplay-advanced-open .autoplay-settings__cards {
    height: 32.1875rem;
    flex-basis: 32.1875rem;
  }

  .autoplay-card-title {
    flex-basis: 8.5rem;
  }

  #popup-autoplay.is-autoplay-advanced-open .autoplay-rounds-row .autoplay-card-title {
    flex-basis: 9.5rem;
  }

  #popup-autoplay.is-autoplay-advanced-open .autoplay-rounds-row .autoplay-input:not(.main) {
    width: 7.5rem;
    flex-basis: 7.5rem;
  }

  .autoplay-settings .autobet-selector {
    width: 4.125rem;
    flex-basis: 4.125rem;
  }

  .system-alert__button {
    width: 18.5rem;
  }

  .my-bets-table {
    height: auto;
    flex: 1 1 auto;
  }

  .chat-prompt--mobile {
    display: inline-flex;
  }
}

/* Mobile portrait: 20px safe space inside bottom sheets, in the sheet color. */
@media (max-width: 47.9375rem) and (orientation: portrait) {
  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome) .game-modal__panel,
  .collect-mobile-sheet {
    padding-bottom: 20px;
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome) .game-modal__panel--system,
  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome) .game-modal__panel--device,
  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome) .game-modal__panel--connection {
    padding-bottom: calc(2rem + 20px);
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome) .game-modal__panel--rules,
  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-how-to-play .game-modal__panel--how-play {
    padding-bottom: calc(1.25rem + 20px);
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-how-to-play .game-modal__panel--how-play {
    height: min(calc(30.75rem + 20px), calc(var(--real-vh) - 6rem + 20px));
    max-height: min(calc(30.75rem + 20px), calc(var(--real-vh) - 6rem + 20px));
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-how-to-play .game-modal__body--how-play {
    min-height: 0;
  }

  #popup-autoplay:not(.is-autoplay-shared) .game-modal__panel--autoplay {
    height: calc(26.1875rem + 20px);
    max-height: calc(26.1875rem + 20px);
    padding-bottom: calc(1rem + 20px);
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-autoplay.is-autoplay-shared .game-modal__panel--autoplay,
  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay {
    height: auto;
    max-height: calc(var(--real-vh) - 6rem);
    padding-bottom: calc(1rem + 20px);
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-gifts .game-modal__panel--gifts,
  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-gifts-result .game-modal__panel--gifts-result {
    padding-bottom: calc(1.5rem + 20px);
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-gifts-result .game-modal__panel--gifts-result {
    height: min(calc(22rem + 20px), calc(var(--real-vh) - 6rem + 20px));
    min-height: min(calc(22rem + 20px), calc(var(--real-vh) - 6rem + 20px));
    max-height: min(calc(26rem + 20px), calc(var(--real-vh) - 6rem + 20px));
  }

  .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-welcome)#popup-gifts-result .game-modal__panel--gifts-result:has(.gifts-popup--zero-win) {
    height: auto;
    min-height: 0;
    max-height: calc(var(--real-vh) - 6rem + 20px);
  }

  .collect-mobile-sheet--presets,
  .collect-mobile-sheet--custom {
    padding-bottom: calc(1rem + 20px);
  }
}

.bet-panel {
  position: relative;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 6.75rem;
  gap: 1.25rem;
}

[data-bet-panel="2"],
[data-bet-panel="3"] {
  display: none;
}

.mode-1 .bet-dock {
  width: min(var(--mode-1-dock-w, 30.5rem), 100%);
  height: 8.7rem;
  padding: 0.875rem 1rem;
  justify-content: flex-end;
  border-radius: var(--radius-xxl);
  border: 1px solid var(--Base-Base-white-10, rgba(255, 255, 255, 0.10));
  background:
    radial-gradient(73.68% 25.5% at 50% 0.61%, rgba(89, 92, 115, 0.26) 0%, rgba(39, 41, 57, 0.00) 100%),
    rgba(57, 57, 64, 0.60);
  box-shadow: var(--shadow-m);
}

.mode-1 .bet-panel {
  height: 6.75rem;
  gap: 0;
}

.mode-1 [data-bet-separator],
.mode-1 [data-bet-panel="1"],
.mode-1 [data-bet-panel="2"],
.mode-1 [data-bet-panel="3"] {
  display: none;
}

.mode-1 [data-bet-panel="0"] {
  width: 100%;
  flex: 1 1 100%;
  box-sizing: border-box;
  height: 6.75rem;
  padding: 0;
  gap: 0.875rem;
  background: transparent;
  border-radius: 1.25rem 1.25rem 0.25rem 0.25rem;
}

.mode-1 .bet-tools,
.mode-1 .bet-body .btn-bet {
  width: 13.8rem;
  flex-shrink: 0;
}

.bet-sep {
  background-color: var(--Base-Base-white-10);
  flex-shrink: 0;
  width: 1px;
  height: 100%;
}

.bet-sep--h {
  width: 100%;
  height: 1px;
}

.bet-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  height: 6.75rem;
}

.bet-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.auto-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.auto-text {
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  color: var(--Text-Icons-Secondary);
}

.bet-head .autoplay-row,
.bet-shared-head .autoplay-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.bet-head .autoplay-text,
.bet-shared-head .autoplay-text {
  cursor: pointer;
  white-space: nowrap;
}

/* Double (two-panel new): not enough room for the autoplay caption */
.mode-double .bet-head .autoplay-text,
.app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-head .autoplay-text,
.bet-head:has(.btn-autoplay.is-visual-hidden) .autoplay-text,
.bet-shared-head:has(.btn-autoplay.is-visual-hidden) .autoplay-text {
  display: none;
}

/* Classic on desktop: two side-by-side cards, same space constraint */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  .mode-classic .bet-head .autoplay-text {
    display: none;
  }
}

.bet-body {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  gap: 0.75rem;
  flex-direction: row;
}

.bet-tools {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
  width: calc((100% - 0.75rem) / 2);
}

.bet-chips {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  width: 100%;
}

.bet-chips .chip {
  flex: 1;
  padding: 0.5rem 0;
  justify-content: center;
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
}

.bet-tools .collect-input {
  display: none;
}

.bet-card:has(.auto-cash-out-input:checked) .bet-chips {
  display: none;
}

.bet-card:has(.auto-cash-out-input:checked) .collect-input {
  display: inline-flex;
}

.bet-tools .bet-input,
.bet-tools .collect-input {
  width: 100%;
}

.bet-body .btn-bet {
  width: calc((100% - 0.75rem) / 2);
  flex-shrink: 0;
}

.btn-secondary,
.btn-icon-secondary,
.segment--active,
.toggle-slider,
.bet-input,
.chat-input,
.game-modal__icon-button,
.collect-mobile-icon-button,
.collect-mobile-chip,
.gradient-border,
#bet-all-action {
  background-clip: padding-box;
}

.btn-secondary::before,
.btn-icon-secondary::before,
.segment--active::before,
.menu-pop::before,
.toggle-slider::after,
.bet-input::before,
.chat-input::before,
.game-modal__icon-button::before,
.collect-mobile-icon-button::before,
.collect-mobile-chip::before,
.gradient-border::before,
#bet-all-action::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--gradient-border-width, 1px);
  background: var(--additional-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.page {
  height: var(--real-vh);
  min-height: var(--real-vh);
  overflow: hidden;
  background: var(--background-layout-Pure);
}

.app {
  --status-w: min(51.4375rem, 100%);
  --status-px: 0.75rem;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23.25rem;
  height: var(--real-vh);
  min-height: var(--real-vh);
  overflow: hidden;
  background: rgba(43, 43, 50, 1);
  transition: grid-template-columns 0.24s ease;

  /* background-image: url(../ImagesNew/WebP/bg.webp); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 72% 72%;
}

html.is-keyboard-lift .app {
  transform: translate3d(0, calc(var(--keyboard-lift, 0px) * -1), 0);
}

.app.is-animation-off {
  background-image: none;
}

/* X Pattern: keep the old cover size (full .play), only re-center it
   in the stage gap between topbar and play-footer. */
.app.is-animation-off .play,
body:not(.is-assets-ready) .play,
body.is-assets-pending .play {
  container-type: size;
  container-name: play;
}

body:not(.is-assets-ready) .stage::before,
body.is-assets-pending .stage::before,
.app.is-animation-off .stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqw;
  height: 100cqh;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.5;
  background-image: url("../ImagesNew/X%20Pattern.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  pointer-events: none;
}

.app.is-animation-off .stage,
body:not(.is-assets-ready) .stage,
body.is-assets-pending .stage {
  min-height: 0;
}

.app.is-animation-off canvas {
  /* CSS X Pattern replaces canvas no-animation fill */
  opacity: 0;
  pointer-events: none;
}

.app canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
  image-rendering: auto;
}

.app.is-side-closed {
  --side-width: 0;
  grid-template-columns: minmax(0, 1fr) 0;
}

.app:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.00) 100%);
  height: calc(12.1875rem + var(--topbar-multipliers-offset, 0px));
}

.app:has(.topbar.is-multipliers-expanded)::before {
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.6) 59.54%, rgba(0, 0, 0, 0) 100%);
}

.app:has(.topbar.is-multipliers-expanded) .round-winners {
  display: none !important;
}

.app::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.30) 59.54%, rgba(0, 0, 0, 0.00) 100%);
  height: 25.625rem;
}

.play {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  height: var(--real-vh);
  min-height: 0;
}

.topbar {
  position: relative;
  /* Above .stage-hud / .play-bets (5–6) so .win-toast-stack covers Flew Away */
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 0.25rem;
  padding: 1.25rem 1.5rem 0.875rem;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 1rem;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  overflow: visible;
  color: var(--Text-Icons-Primary);
}

.brand:has(> .btn-icon.is-visible) {
  gap: 1.0625rem;
}

.logo {
  display: block;
  width: 4.625rem;
  height: 1.75rem;
  flex: 0 0 auto;
}

.brand > .btn-icon {
  display: none;
}

.brand > .btn-icon.is-visible {
  display: inline-flex;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

.brand > .btn-icon.is-visible:hover,
.brand > .btn-icon.is-visible:active,
.brand > .btn-icon.is-visible.active,
.brand > .btn-icon.is-visible:disabled {
  background: none;
  background-image: none;
  box-shadow: none;
}

.brand > .btn-icon.is-visible::before {
  content: none;
}

.brand > .btn-icon.is-visible svg.icon {
  width: 1.125rem;
  height: 1.125rem;
}

.brand > .btn-icon.is-visible::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 0.5rem);
  transform: translateY(-50%);
  width: 1px;
  height: 1.75rem;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.wallet {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

.wallet > .btn {
  order: 1;
}

.wallet > #netBalance {
  order: 1;
  display: inline-flex;
}

.wallet > #netBalance > span:first-child {
  background-color: transparent;
}

.wallet > .btn-icon[aria-label="Lobby"] {
  order: 2;
  display: none;
}

.wallet > .btn-icon[aria-label="Lobby"].is-visible {
  display: inline-flex;
}

.wallet > .btn-icon[aria-label="Gift"] {
  order: 2;
  display: none;
  position: relative;
}

.wallet > .btn-icon[aria-label="Gift"].is-visible {
  display: inline-flex;
}

.wallet > .btn-icon[aria-label="Gift"] [data-gifts-count] {
  position: absolute;
  top: -0.35rem;
  left: 0.75rem;
  width: auto;
  min-width: 1rem;
  pointer-events: none;
  z-index: 1;
}

.wallet > [data-menu-toggle] {
  order: 3;
}

.wallet > [data-sidebar-toggle] {
  order: 4;
}

.wallet .btn {
  padding: 0.5rem 0.75rem 0.5rem 0.375rem;
  justify-content: flex-start;
}

.wallet .btn.currency-symbol-right {
  padding: 0.5rem 0.5rem 0.5rem 0.6rem;
}

.wallet .btn.no-currency-symbol {
  padding: 0.5rem 0.75rem;
}

.wallet .btn > .currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  width: auto;
  height: 1.25rem;
  padding: 0 0.25rem;
  box-sizing: border-box;
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: var(--radius-max);
  background-color: var(--background-components-Default);
  color: var(--Text-Icons-Primary);
}

#userBalance {
  align-items: center;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  #userBalance.btn-secondary:hover {
    background-color: var(--background-components-Default);
  }
}

#userBalance.btn-secondary:active,
#userBalance.btn-secondary.active {
  background-color: var(--background-components-Default);
}

#userBalance > span:not(.currency) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--line-height-text-base);
  line-height: var(--line-height-text-base);
}

#userBalance.no-currency-symbol {
  gap: 0.25rem;
}

#userBalance.no-currency-symbol > .currency {
  height: var(--line-height-text-base);
  min-height: 0;
  min-width: 0;
  padding: 0;
  background-color: transparent;
  font-size: var(--font-size-text-xs);
  line-height: 1;
  /* Optical: uppercase code sits high next to digits, esp. on iOS */
  position: relative;
  top: 0.08em;
}

/* iOS Safari paints smaller caps higher — nudge a bit more */
@supports (-webkit-touch-callout: none) {
  #userBalance.no-currency-symbol > .currency {
    top: 0.14em;
  }
}

span.no-currency-symbol {
  font-size: var(--font-size-text-xs);
  line-height: 1;
  vertical-align: middle;
}

.wallet .btn.no-currency-symbol > .currency {
  background-color: transparent;
  height: auto;
  min-width: 0;
  padding: 0;
}

.multipliers {
  --multipliers-toggle-space: 0;
  --multipliers-gap: 0.25rem;
  --multipliers-toggle-col: 1.5rem;
  display: flex;
  align-items: center;
  gap: var(--multipliers-gap);
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  max-width: 100%;
  min-height: 1.5rem;
  max-height: 1.5rem;
  padding-right: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 88.0419%, transparent 100%);
  mask-image: linear-gradient(90deg, black 0%, black 88.0419%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: none;
}

.multipliers .badge-multiplier {
  flex: 0 0 auto;
}

#headerLast100Spins .badge-multiplier-md {
  padding: 0 0.5rem;
  line-height: 1;
}

#headerLast100Spins .badge-multiplier-md span {
  display: block;
  line-height: 1;
  /* text-box: trim-both cap alphabetic; */
  position: relative;
  top: 0.08em;
}

@supports (text-box-trim: trim-both) {
  #headerLast100Spins .badge-multiplier-md span {
    top: 0;
  }
}

.multipliers.is-multipliers-toggle-hidden {
  padding-right: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.topbar > .btn-icon[data-multipliers-toggle][hidden] {
  display: none;
}

.topbar.is-multipliers-expanded {
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.6) 59.54%, rgba(0, 0, 0, 0) 100%);
}

.topbar.is-multipliers-expanded .multipliers {
  align-self: start;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  max-height: 12rem;
  -webkit-mask-image: none;
  mask-image: none;
}

.multipliers-view-all {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
  padding: 0 0.75rem;
  line-height: 1;
}

.multipliers-view-all span {
  display: block;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  position: relative;
  top: 0.08em;
}

@supports (text-box-trim: trim-both) {
  .multipliers-view-all span {
    top: 0;
  }
}

@media (max-width: 47.9375rem),
       (orientation: landscape) and (max-width: 63.9375rem) and (max-height: 30rem) {
  .topbar .multipliers {
    min-height: 1.25rem;
    max-height: 1.25rem;
  }

  .topbar .badge-multiplier-md {
    height: 1.25rem;
    font-size: var(--font-size-text-xs);
    line-height: var(--line-height-text-xs);
    overflow: visible;
  }

  #headerLast100Spins .badge-multiplier-md span {
    text-box: unset;
    text-box-trim: none;
    /* top: 0.08em; */
  }

  .topbar .badge-multiplier--xl {
    font-size: var(--font-size-text-xxs);
    line-height: var(--line-height-text-xxs);
  }

  .topbar .multipliers-view-all {
    height: 1.25rem;
    padding: 0 0.5rem;
    font-size: var(--font-size-text-xs);
    line-height: var(--line-height-text-xs);
  }
}

.topbar > .btn-icon {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  box-sizing: border-box;
  line-height: 0;
}

.topbar > .btn-icon svg.icon {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: none;
}

.topbar.is-multipliers-expanded > .btn-icon {
  align-self: start;
}

.stage {
  position: relative;
  grid-row: 2;
  grid-column: 1;
  display: grid;
  place-items: center;
  min-height: 20rem;
  min-width: 0;
  padding: 1rem 1.5rem;
}

.max-multiplier-popup {
  grid-row: 2;
  grid-column: 1;
  /* Below #menu-pop (8); above .stage-hud / .play-bets (5–6) */
  z-index: 7;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  box-sizing: border-box;
}

.max-multiplier-popup[hidden] {
  display: none !important;
}

.max-multiplier-popup__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.5rem;
  height: 7.25rem;
  padding: 0.75rem 1.25rem 1rem;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 1.3125rem;
  box-sizing: border-box;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    linear-gradient(0deg, rgba(66, 200, 84, 0.05), rgba(66, 200, 84, 0.05)),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* -webkit-backdrop-filter: blur(114px); */
  /* backdrop-filter: blur(114px); */
  animation: max-multiplier-popup-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.max-multiplier-popup__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, #42C854 0%, #0A440B 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.max-multiplier-popup__win-video {
  z-index: 0;
  clip-path: inset(0 round 1.3125rem);
  border-radius: inherit;
  mix-blend-mode: saturation;
  filter: url(#win-video-key) invert(0.6);
}

@keyframes max-multiplier-popup-enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.max-multiplier-popup__glow {
  /* position: absolute;
  top: 50%;
  width: 6.1875rem;
  height: 16.0625rem;
  pointer-events: none;
  z-index: 0; */
}

.max-multiplier-popup__glow--left {
  left: -1.125rem;
}

.max-multiplier-popup__glow--right {
  right: -1.125rem;
}

.max-multiplier-popup__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.max-multiplier-popup__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  width: 100%;
  min-width: 0;
  max-width: 12rem;
  color: var(--Green-Green-base, #42C854);
}

.max-multiplier-popup__number {
  display: block;
  min-width: 0;
  max-width: calc(100% - 1.5rem);
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-family-number), Roboto, sans-serif;
  font-size: var(--font-size-text-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(0deg, #42C854, #42C854);
  -webkit-background-clip: text;
  background-clip: text;
}

.max-multiplier-popup__x {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.3125rem;
  color: var(--Green-Green-base, #42C854);
  filter: drop-shadow(0 -0.25rem 0.35rem rgba(255, 255, 255, 0.25));
}

.max-multiplier-popup__label {
  margin: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-family), Inter, sans-serif;
  font-size: var(--font-size-text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xs);
  text-align: center;
  white-space: nowrap;
  background: var(--Multiplication-max);
  -webkit-background-clip: text;
  background-clip: text;
}

/* HTML stand-in for canvas loader + multiplier — anchored like .play-bets from play-footer */
.stage-hud {
  position: absolute;
  left: calc(50% + var(--stage-hud-offset-x, 0px));
  top: calc(var(--stage-hud-offset-y, -8.4rem) - var(--four-bet-switch-lift, 0px));
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
}

.stage-hud[hidden],
.stage-hud__loader[hidden],
.stage-hud__coeff[hidden],
.stage-hud__flew[hidden] {
  display: none !important;
}

.stage-hud__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 0.75rem; */
}

.stage-hud__ring {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
}

.stage-hud__ring-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.stage-hud__ring-bg {
  fill: rgba(0, 0, 0, 0.15);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
}

.stage-hud__ring-fg {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 150.8;
  stroke-dashoffset: 0;
}

.stage-hud__ring.is-warning .stage-hud__ring-fg {
  stroke: #FF3E5B;
}

.stage-hud__counter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Inter, sans-serif;
  font-size: 24px; /* matches PIXI Loader */
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.stage-hud__ring.is-warning .stage-hud__counter {
  color: #FF3E5B;
}

.stage-hud__loader-text {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 32px; /* matches PIXI LoaderText */
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

.stage-hud__coeff {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: 17px;
}

.stage-hud__flew {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin: 0 0 0.5rem;
  width: max-content;
  max-width: none;
  transform: translateX(-50%);
  font-family: Inter, sans-serif;
  font-size: 40px; /* matches PIXI FlewAway */
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.stage-hud__multiplier-row {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.125em;
  min-height: 5rem;
  font-size: 5rem; /* single source of size — the X scales from it in em */
  color: #FFFFFF; /* solid white — matches canvas BitmapText / resetMultiplierPulseStyle */
  transform-origin: center center;
}

.stage-hud__multiplier {
  font-family: Roboto, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0; /* canvas MultiplierBMP has no letterSpacing */
  color: inherit;
}

.stage-hud__x {
  flex: none;
  width: 0.4875em;
  height: 0.475em;
  margin-bottom: 0.145em;
  color: inherit;
}

/* Boom / crash — same as canvas resetMultiplierPulseStyle(true) */
.stage-hud__coeff.is-boom .stage-hud__multiplier-row {
  color: #FF3E5B;
  filter: none;
}

/* Cashout pulse colors — match getMultiplierPulseStyle() */
.stage-hud__coeff.is-win .stage-hud__multiplier-row {
  color: #28D266;
  filter: none;
}

/* >= 10x — canvas shadow #69FF96 @ 0.6 + BlurFilter */
.stage-hud__coeff.is-big-win .stage-hud__multiplier-row {
  color: #32DE65;
  filter: drop-shadow(0 0 10px rgba(105, 255, 150, 0.6));
}

/* Max win — canvas shadow #FFE323 @ 0.8 + BlurFilter */
.stage-hud__coeff.is-max-win .stage-hud__multiplier-row {
  color: #FFE229;
  filter: drop-shadow(0 0 12px rgba(255, 227, 35, 0.8));
}

/* Canvas pulseMultiplier: peak 1.14 over 300ms (30% up / 70% down) */
.stage-hud__coeff.is-pulsing .stage-hud__multiplier-row {
  animation: stage-hud-coeff-pulse 300ms linear both;
}

@keyframes stage-hud-coeff-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* While assets load, keep solid fill (animation-off uses CSS X Pattern on .app) */
body:not(.is-assets-ready) .app,
body.is-assets-pending .app {
  background-image: none;
  background-color: rgba(43, 43, 50, 1);
}

body:not(.is-assets-ready) .app canvas,
body.is-assets-pending .app canvas {
  opacity: 0;
  z-index: 0;
}

/* Board skeleton: hide copy, keep layout, fill chrome with --skeleton */
body.is-assets-pending {
  --skeleton: rgba(255, 255, 255, 0.05);
  --skeleton-shimmer: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.04) 62%,
    transparent 100%
  );
}

body.is-assets-pending .app {
  pointer-events: none;
  cursor: wait;
}

body.is-assets-pending :is(#popup-sound, #popup-error).is-open {
  pointer-events: auto;
  cursor: auto;
}

/* Skeleton chrome opts back into hits via pointer-events: auto (bet labels,
   compact dock, play-bets, side). Block only those, not popups/modals. */
body.is-assets-pending :is(
  .topbar,
  .wallet,
  .brand,
  .multipliers,
  .play-bets,
  .stage-hud,
  .play-footer,
  .side
),
body.is-assets-pending :is(
  .topbar,
  .wallet,
  .brand,
  .multipliers,
  .play-bets,
  .stage-hud,
  .play-footer,
  .side
) * {
  pointer-events: none !important;
}

body.is-assets-pending :is(.play, .side),
body.is-assets-pending :is(.play, .side) * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  caret-color: transparent !important;
}

body.is-assets-pending :is(.play, .side) ::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0 !important;
}

body.is-assets-pending :is(.play, .side) img,
body.is-assets-pending :is(.play, .side) svg,
body.is-assets-pending :is(.play, .side) .icon,
body.is-assets-pending :is(.play, .side) .avatar,
body.is-assets-pending :is(.play, .side) .currency,
body.is-assets-pending :is(.play, .side) .badge,
body.is-assets-pending :is(.play, .side) .menu-new-dot,
body.is-assets-pending :is(.play, .side) .collect-fill,
body.is-assets-pending :is(.play, .side) .btn-bet__auto-collect-fill {
  opacity: 0 !important;
  background-image: none !important;
}

body.is-assets-pending .menu-pop,
body.is-assets-pending .round-winners,
body.is-assets-pending .win-toast-stack,
body.is-assets-pending .bet-status,
body.is-assets-pending .topbar > [data-multipliers-toggle] {
  visibility: hidden !important;
}

body.is-assets-pending .play-bets,
body.is-assets-pending .play-bets[hidden] {
  visibility: visible !important;
  display: inline-flex !important;
  background: var(--skeleton) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.is-assets-pending .play-bets > * {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.is-assets-pending .stage-hud,
body.is-assets-pending .stage-hud[hidden] {
  visibility: visible !important;
  display: flex !important;
  width: 14rem !important;
  min-width: 14rem !important;
  max-width: 14rem !important;
  height: 4.75rem !important;
  min-height: 4.75rem !important;
  max-height: 4.75rem !important;
  background: var(--skeleton);
  border-radius: var(--radius-max);
  overflow: hidden;
}

body.is-assets-pending .stage-hud > * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.is-assets-pending .status {
  visibility: visible;
  min-height: 8px;
  align-items: center;
}

body.is-assets-pending .status .conn {
  gap: 0;
  height: 8px;
  background: transparent;
}

body.is-assets-pending .status .conn svg,
body.is-assets-pending .status .conn .icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

body.is-assets-pending .status #ms,
body.is-assets-pending .status #time,
body.is-assets-pending .status-meta {
  display: inline-block;
  box-sizing: border-box;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  line-height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-max);
  flex-shrink: 0;
}

body.is-assets-pending .status #ms {
  width: 2.2rem;
}

body.is-assets-pending .status #time {
  min-width: 2rem;
}

body.is-assets-pending .status-meta > * {
  visibility: hidden;
  opacity: 0 !important;
}

body.is-assets-pending .status-dot {
  display: inline-block;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0;
  width: 0.125rem;
  height: 0.125rem;
  margin: 0 0.125rem;
  background-color: rgba(255, 255, 255, 0.35);
}

body.is-assets-pending .brand {
  position: relative;
}

body.is-assets-pending .brand .logo {
  opacity: 0 !important;
}

body.is-assets-pending .brand::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4.625rem;
  height: 1.75rem;
  border-radius: var(--radius-l);
  background: var(--skeleton);
  transform: translateY(-50%);
  pointer-events: none;
}

body.is-assets-pending .wallet .btn,
body.is-assets-pending .wallet .btn-icon {
  background: var(--skeleton) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

body.is-assets-pending .wallet .btn::before,
body.is-assets-pending .wallet .btn-icon::before {
  content: none !important;
  display: none !important;
}

body.is-assets-pending .multipliers,
body.is-assets-pending .multipliers.is-multipliers-toggle-hidden {
  --skeleton-pills-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 24'%3E%3Crect width='42' height='24' rx='12' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 0.75rem, #000 88.0419%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 0.75rem, #000 88.0419%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

body.is-assets-pending .multipliers .badge-multiplier {
  background: var(--skeleton) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.is-assets-pending .multipliers .badge-multiplier span {
  background: none !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body.is-assets-pending .multipliers .multipliers-view-all {
  visibility: hidden;
}

body.is-assets-pending .multipliers:not(:has(.badge-multiplier))::before {
  content: '';
  width: 100%;
  height: 1.5rem;
  flex: 0 0 auto;
  border-radius: 0;
  background-color: var(--skeleton);
  background-image: var(--skeleton-shimmer);
  background-size: 28vw 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: -30vw center;
  animation: skeleton-shimmer 2.6s linear infinite;
  box-shadow: none;
  -webkit-mask-image: var(--skeleton-pills-mask);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: 2.875rem 1.5rem;
  -webkit-mask-position: 0 0;
  mask-image: var(--skeleton-pills-mask);
  mask-repeat: repeat-x;
  mask-size: 2.875rem 1.5rem;
  mask-position: 0 0;
}

body.is-assets-pending .play-footer :is(
  .btn-bet,
  .btn-bet.place-bet,
  .btn-bet.cash-out,
  .btn-bet.cancel-bet,
  .btn-bet.disable,
  .bet-input,
  .chip,
  .collect-input,
  .collect-value,
  .auto-text,
  .toggle-slider,
  .btn-autoplay,
  .btn-ac-settings,
  .bet-mode-expand,
  #bet-all-action
),
body.is-assets-pending .play-footer :is(
  .btn-bet,
  .btn-bet.place-bet,
  .chip,
  .bet-input,
  .collect-value,
  .toggle-slider,
  .btn-autoplay,
  .bet-mode-expand,
  #bet-all-action
):is(:hover, :active, :focus, .active) {
  background: var(--skeleton) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
  opacity: 1 !important;
}

body.is-assets-pending .play-footer .btn-autoplay,
body.is-assets-pending .play-footer .btn-ac-settings,
body.is-assets-pending .play-footer .auto-text {
  border-radius: var(--radius-max);
}

body.is-assets-pending .play-footer .auto-text {
  display: inline-block;
  height: 1.25rem;
  min-width: 5.5rem;
  vertical-align: middle;
}

body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .autoplay-text {
  display: none !important;
  min-width: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
}

body.is-assets-pending .play-footer .toggle {
  visibility: visible;
  opacity: 1;
  overflow: hidden;
  background: var(--skeleton) !important;
  border-radius: var(--radius-md);
}

body.is-assets-pending .play-footer .toggle-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--skeleton) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body.is-assets-pending .play-footer .toggle-slider::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body.is-assets-pending .play-footer .toggle-slider::before {
  content: '' !important;
  display: block !important;
  z-index: 3;
  background: rgba(255, 255, 255, 0.12) !important;
  opacity: 1 !important;
}

body.is-assets-pending .play-footer :is(
  .btn-secondary,
  .btn-icon-secondary,
  .bet-input,
  .bet-mode-expand,
  #bet-all-action
)::before,
body.is-assets-pending .play-footer .bet-mode-expand::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.is-assets-pending .side :is(
  .segment,
  .segment--active,
  .round-card,
  .filter-pill,
  .line-tab,
  .line-tab--active,
  .chat-input,
  .chip
) {
  background: var(--skeleton) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

body.is-assets-pending .side .segment--active::before,
body.is-assets-pending .side .chat-input::before {
  content: none !important;
  display: none !important;
}

@keyframes skeleton-shimmer {
  0% { background-position: -30vw center; }
  100% { background-position: 130vw center; }
}

body.is-assets-pending :is(
  .wallet .btn,
  .wallet .btn-icon,
  .multipliers,
  .multipliers .badge-multiplier,
  .status #ms,
  .status #time,
  .status-meta,
  .play-footer .auto-text,
  .play-footer .toggle,
  .play-footer .btn-bet,
  .play-footer .bet-input,
  .play-footer .chip,
  .play-footer .collect-input,
  .play-footer .collect-value,
  .play-footer .btn-autoplay,
  .play-footer .btn-ac-settings,
  .play-footer .bet-mode-expand,
  .play-footer #bet-all-action,
  .side .segment,
  .side .round-card,
  .side .filter-pill,
  .side .line-tab,
  .side .chat-input,
  .side .chip
) {
  position: relative;
  overflow: hidden;
}

body.is-assets-pending :is(
  .wallet .btn,
  .wallet .btn-icon,
  .multipliers .badge-multiplier,
  .status #ms,
  .status #time,
  .status-meta,
  .play-footer .auto-text,
  .play-footer .toggle,
  .play-footer .btn-bet,
  .play-footer .bet-input,
  .play-footer .chip,
  .play-footer .collect-input,
  .play-footer .collect-value,
  .play-footer .btn-autoplay,
  .play-footer .btn-ac-settings,
  .play-footer .bet-mode-expand,
  .play-footer #bet-all-action,
  .side .segment,
  .side .round-card,
  .side .filter-pill,
  .side .line-tab,
  .side .chat-input,
  .side .chip
)::after,
body.is-assets-pending .multipliers:not(:has(.badge-multiplier))::after,
body.is-assets-pending .brand::after,
body.is-assets-pending .stage-hud::after,
body.is-assets-pending .play-bets::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--skeleton-shimmer);
  background-size: 28vw 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: -30vw center;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none;
  animation: skeleton-shimmer 2.6s linear infinite;
}

body.is-assets-pending .multipliers:not(:has(.badge-multiplier))::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
  animation: none !important;
}

body.is-assets-pending .brand::before {
  z-index: 0;
}

body.is-assets-pending .brand::after {
  top: 50%;
  bottom: auto;
  left: 0;
  right: auto;
  width: 4.625rem;
  height: 1.75rem;
  margin-top: -0.875rem;
  border-radius: var(--radius-l);
}

@media (prefers-reduced-motion: reduce) {
  body.is-assets-pending .brand::after,
  body.is-assets-pending .stage-hud::after,
  body.is-assets-pending .play-bets::after,
  body.is-assets-pending :is(
    .wallet .btn,
    .wallet .btn-icon,
    .multipliers .badge-multiplier,
    .status #ms,
    .status #time,
    .status-meta,
    .play-footer .auto-text,
    .play-footer .toggle,
    .play-footer .btn-bet,
    .play-footer .bet-input,
    .play-footer .chip,
    .play-footer .collect-input,
    .play-footer .collect-value,
    .play-footer .btn-autoplay,
    .play-footer .btn-ac-settings,
    .play-footer .bet-mode-expand,
    .play-footer #bet-all-action,
    .side .segment,
    .side .round-card,
    .side .filter-pill,
    .side .line-tab,
    .side .chat-input,
    .side .chip
  )::after,
  body.is-assets-pending .multipliers:not(:has(.badge-multiplier))::before,
  body.is-assets-pending .multipliers:not(:has(.badge-multiplier))::after {
    animation: none !important;
    background-image: none !important;
  }
}

/* Two-panel desktop below 1280px: 11rem stacked cards (double + classic HTML default). */
@media (min-width: 48rem) and (max-width: 79.9375rem) {
  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .bet-card {
    overflow: hidden;
    min-width: 0;
  }

  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .bet-head,
  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .auto-row {
    min-width: 0;
    flex-wrap: nowrap;
  }

  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .auto-text {
    display: block;
    flex: 1 1 0;
    min-width: 0 !important;
    width: auto;
    max-width: none;
    height: 1.25rem;
    overflow: hidden;
  }

  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .bet-tools,
  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .bet-input,
  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .bet-chips {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }

  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .bet-chips .chip {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0;
  }

  body.is-assets-pending .app:not(.mode-1):not(.mode-4) .play-footer .bet-body .btn-bet {
    width: 100%;
    height: 4rem;
    min-height: 4rem;
    max-height: 4rem;
  }
}

.play-bets {
  position: absolute;
  left: calc(50% + var(--play-bets-offset-x));
  top: calc(var(--play-bets-offset-y, -1.81rem) - var(--four-bet-switch-lift, 0px));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 5.125rem;
  height: 1.875rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-l);
  background: var(--Base-Base-white-10);
  color: var(--Base-Base-white);
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  transform: translateX(-50%);
  pointer-events: auto;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.play-bets__count {
  font-variant-numeric: tabular-nums;
}

.play-bets[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .play-bets:hover {
    background: var(--Base-Base-white-15);
    border-color: rgba(255, 255, 255, 0.35);
  }
}

.round-winners {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 2;
  width: min(21.25rem, calc(100% - 2rem));
  height: 2.8125rem;
  border-radius: var(--radius-max);
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid var(--Base-Base-white-10);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(calc(0.55 * var(--round-winners-fit-scale, 1)));
  transform-origin: center;
  will-change: opacity, transform;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.round-winners .win-video {
  mix-blend-mode: saturation;
  filter: url(#win-video-key) invert(0.6);
}

.round-winners.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(var(--round-winners-fit-scale, 1));
  transition-delay: 0s;
}

.round-winners.round-winners--closing {
  opacity: 0;
  transform: translateX(-50%) scale(calc(0.55 * var(--round-winners-fit-scale, 1)));
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.55, 0, 0.85, 0.25);
}

.rw-phase {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.rw-phase.is-active {
  opacity: 1;
  transform: scale(1);
}

.rw-line {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.rw-line--total {
  color: var(--Text-Icons-Secondary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  line-height: 1rem;
}

.rw-line--mine {
  font-size: 0.875rem;
  line-height: 1.125rem;
}

.rw-line--mine .rw-label {
  color: var(--Text-Icons-Primary);
  font-weight: var(--font-weight-bold);
}

.rw-amount {
  font-weight: var(--font-weight-bold);
}

.rw-amount--win {
  color: var(--Green-Green-base);
}

.round-winners--no-my-win .rw-line--mine {
  display: none;
}

.rw-winners {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0.25rem;
  box-sizing: border-box;
}

.rw-winner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 0.25rem;
  white-space: nowrap;
}

.rw-winner--center {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  height: 2.4375rem;
  padding: 0 0.875rem;
  border-radius: var(--radius-max);
  background: var(--Base-Base-white-10);
  border: 1px solid var(--Base-Base-white-10);
  box-sizing: border-box;
  overflow: hidden;
}

.rw-winner--empty {
  visibility: hidden;
}

.rw-phase--top.is-active .rw-winner {
  animation: rw-winner-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rw-winner-in {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.rw-winner__icon0,
.rw-winner__icon1,
.rw-winner__icon2 {
  background: url(../ImagesNew/WebP/top0.webp) no-repeat;
  background-size: cover;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
}

.rw-winner__icon1 {
  background: url(../ImagesNew/WebP/top1.webp) no-repeat;
  background-size: cover;
}

.rw-winner__icon2 {
  background: url(../ImagesNew/WebP/top2.webp) no-repeat;
  background-size: cover;
}

.rw-winner__copy {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.rw-winner--center .rw-winner__copy {
  flex: 1 1 0;
}

.rw-winner__user {
  color: var(--Text-Icons-Secondary);
  font-size: 0.625rem;
  font-weight: var(--font-weight-normal);
  line-height: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-winner__amount {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--Text-Icons-Primary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .round-winners,
  .rw-phase {
    transition: none;
  }
  .rw-phase--top.is-active .rw-winner {
    animation: none;
  }
}

.round-winners__title,
.round-winners__list,
.round-winners__item {
  position: relative;
  z-index: 1;
}

.round-winners__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1rem;
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-medium);
}

.round-winners__title strong {
  font-weight: var(--font-weight-bold);
}

.round-winners__list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.5rem;
  min-height: 3.5rem;
  gap: 1.5625rem;
}

.round-winners__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 0.25rem;
  color: var(--Text-Icons-Primary);
}

.round-winners__user {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.round-winners__amount {
  color: var(--Text-Icons-Primary);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.round-winners__divider {
  width: 0.0625rem;
  height: 3.5rem;
  flex: 0 0 0.0625rem;
  background: var(--Base-Base-white-5);
}

.round-winners .badge-multiplier {
  cursor: default;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.play-footer {
  --four-bet-switch-lift: 0px;
  --play-footer-gap: 0.75rem;
  --play-bets-offset-x: 0px;
  --play-bets-offset-y: -1.81rem; /* old canvas y: 170px from footer top */
  --stage-hud-offset-x: 0px;
  --stage-hud-offset-y: -8.4rem; /* tune with .stage-hud to match canvas */
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: var(--play-footer-gap);
  padding: 0 1.5rem 1.25rem;
}

/* Animation off: center in visible strip — except compact/collapsed dock (same as animation on) */
.app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud {
  transform: translate(-50%, -50%);
}

.app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets {
  transform: translateX(-50%);
}

/* Expanded coefficients: same footer anchor as animation on — don't recenter in the shorter strip. */
.app.is-animation-off:has(.topbar.is-multipliers-expanded):not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud {
  transform: translateX(-50%);
}

html:not(.is-mobile-landscape) .app.is-animation-off:has(.topbar.is-multipliers-expanded) .stage::before {
  top: calc(50% - var(--topbar-multipliers-offset, 0px) / 2);
}

/* Compact/collapsed dock: jet-aligned Y (own vars beat inherited inline centering offsets) */
.app.is-animation-off.is-bet-parallax-compact .play-footer .stage-hud,
.app.is-animation-off.is-bet-action-hitbox .play-footer .stage-hud {
  --stage-hud-offset-y: -8.4rem;
  transform: translateX(-50%);
}

.app.is-animation-off.is-bet-parallax-compact .play-footer .play-bets,
.app.is-animation-off.is-bet-action-hitbox .play-footer .play-bets {
  --play-bets-offset-y: -1.81rem;
  transform: translateX(-50%);
}

.bet-dock-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.app:not(.mode-4):not(.is-gift-mode):not(:has([data-bet-mode="four"].mode-card--visual-disabled)):has(.four-bet-switch:not([hidden])) .play-footer {
  --four-bet-switch-lift: 1.5rem;
}

/* Switch covers the status row; keep wifi / ms / clock / online from showing through it. */
.app:not(.mode-4):not(.is-gift-mode):not(:has([data-bet-mode="four"].mode-card--visual-disabled)):has(.four-bet-switch:not([hidden])) .status-info,
.app:not(.mode-4):not(.is-gift-mode):not(:has([data-bet-mode="four"].mode-card--visual-disabled)):has(.four-bet-switch:not([hidden])) .status-meta {
  visibility: hidden;
  pointer-events: none;
}

.four-bet-switch {
  position: absolute;
  left: 1%;
  bottom: calc(0.25rem - var(--play-footer-gap, 0.75rem));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 98%;
  max-width: 98%;
  height: 1.5rem;
  padding: 0 0.5rem 0 0.25rem;
  border: 0;
  border-radius: var(--radius-max);
  background: #3e381b;
  color: var(--Primary-Primary-base);
  font-family: var(--font-family), sans-serif;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.four-bet-switch[hidden] {
  display: none;
}

.four-bet-switch:hover {
  background: color-mix(in srgb, #3e381b 82%, #fff);
}

.four-bet-switch .icon {
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 0.875rem;
}

.four-bet-switch .mode-new-badge {
  position: static;
  top: auto;
  right: auto;
  flex: none;
  height: 1rem;
  pointer-events: none;
}

.mode-4 .four-bet-switch,
.is-gift-mode .four-bet-switch,
.app:has([data-bet-mode="four"].mode-card--visual-disabled) .four-bet-switch {
  display: none;
}

.bet-mode-expand {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(50% + (min(var(--mode-1-dock-w, 30.5rem), 100%) / 2) + 0.75rem);
  transform: translateY(-50%);
  z-index: 1;
  width: auto;
  height: auto;
  padding: 0.5rem;
  box-sizing: border-box;
  border-radius: var(--radius-max, 10000px);
  border: 1px solid transparent;
  background:
    radial-gradient(73.68% 25.5% at 50% 0.61%, rgba(89, 92, 115, 0.26) 0%, rgba(39, 41, 57, 0.00) 100%),
    rgba(57, 57, 64, 0.60);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(1rem);
  background-clip: padding-box;
}

.bet-mode-expand::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--gradient-border-width, 1px);
  background: var(--additional-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.bet-mode-expand svg.icon {
  width: 1.125rem;
  height: 1.125rem;
}

@media (min-width: 48rem) {
  .mode-1:not(.is-gift-mode) .bet-mode-expand {
    display: inline-flex;
  }
}

.bet-dock {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(51.4375rem, 100%);
  height: 8.7rem;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: var(--radius-xxl);
  background: var(--background-layout-canvas);
  box-shadow: inset 0 0 0 1px var(--Base-Base-white-10), 0 0.5rem 1rem rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  overflow: hidden;
}

.compact-bet-actions {
  display: none;
}

.has-gifts .bet-dock {
  gap: 0.75rem;
}

.has-gifts.is-gift-mode .bet-dock {
  justify-content: flex-start;
  height: 14.25rem;
  padding: 0 0 0.9rem;
}

.has-gifts.is-gift-mode.mode-classic .bet-dock {
  height: 16.0625rem;
}

.has-gifts.is-gift-mode.mode-1 .bet-dock {
  /* header + gap (same as space above body) + body + bottom padding */
  height: calc(4rem + 0.75rem + 4.5rem + 16px + 0.75rem);
  padding-bottom: 0.75rem;
}

.has-gifts.is-gift-mode .bet-panel {
  display: none;
}

.dock-handle {
  display: none;
}

.side {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 23.25rem;
  height: var(--real-vh);
  min-height: 0;
  padding: 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--background-layout-canvas);
  /*backdrop-filter: blur(var(--blur-Primary));*/
  box-shadow: inset 0 0 0 1px var(--Base-Base-white-10);
  box-sizing: border-box;
  overflow: hidden;
  transition: width 0.24s ease, padding 0.24s ease, margin 0.24s ease, opacity 0.2s ease;
}

.is-side-closed .side {
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

.side .segments {
  width: 100%;
  flex: 0 0 2rem;
}

.side .round-card {
  width: 100%;
  flex: 0 0 3.5rem;
}

.side .bets {
  width: 100%;
  height: 33.75rem;
  flex: 0 0 33.75rem;
}

.app [data-bet-panel="0"],
.app:not(.mode-1):not(.mode-4) [data-bet-panel="1"] {
  display: flex;
}

.mode-4 [data-bet-panel] {
  display: contents;
}

.mode-1 [data-bet-panel="1"],
.app:not(.mode-4) [data-bet-panel="2"],
.app:not(.mode-4) [data-bet-panel="3"] {
  display: none;
}

.bet-shared-head,
.bet-shared-foot {
  display: none;
}

.mode-4 {
  --mode4-dock-w: min(38rem, 100%);
  --mode4-dock-p: 1.25rem;
  --mode4-rows: 1.25rem auto auto auto;
  --status-w: min(38rem, 100%);
}

.mode-4 .bet-dock {
  width: var(--mode4-dock-w);
  padding: 0.6rem var(--mode4-dock-p);
  height: auto;
  justify-content: start;
}

.mode-4 .bet-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "shared-header shared-header"
    "bet-0 bet-1"
    "bet-2 bet-3"
    "shared-footer shared-footer";
  width: 100%;
  height: auto;
  gap: 0.25rem;
  justify-items: stretch;
  margin-inline: auto;
  transition:
          height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
          grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
          gap 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mode-4 .bet-panel::after {
  content: none;
  display: none;
}

.mode-4 .bet-shared-head {
  grid-area: shared-header;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px;
  box-sizing: border-box;
}

.ac-shared-divider {
  display: none;
  width: 1px;
  height: 1.25rem;
  flex: 0 0 1px;
  margin-inline: 0.125rem;
  background: var(--background-components-Default);
}

.btn-ac-settings {
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--Text-Icons-Secondary);
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.btn-ac-settings:hover {
  color: var(--Text-Icons-Primary);
}

.btn-ac-settings svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.bet-shared-head.is-ac-active .ac-shared-divider {
  display: block;
}

.bet-shared-head.is-ac-active .btn-ac-settings {
  display: inline-flex;
}

.bet-shared-head.is-ac-locked .auto-row .toggle,
.bet-shared-head.is-ac-locked .auto-row .auto-text,
.bet-shared-head.is-ac-locked .auto-row .toggle-input {
  pointer-events: none;
  cursor: not-allowed;
}

.bet-shared-head.is-ac-locked .auto-row .auto-text {
  color: var(--Text-Icons-Disable);
}

.bet-shared-head.is-ac-locked .auto-row .toggle-input+.toggle-slider {
  background-color: var(--background-components-Disable);
  cursor: not-allowed;
}

.bet-shared-head.is-ac-locked .auto-row .toggle-input+.toggle-slider::before {
  background-color: var(--Text-Icons-Disable);
}

.bet-shared-head.is-ac-locked .auto-row .toggle-input:checked+.toggle-slider {
  background-color: var(--Green-Green-op-5);
  cursor: not-allowed;
}

.bet-shared-head.is-ac-locked .auto-row .toggle-input:checked+.toggle-slider::before {
  background-color: var(--Text-Icons-Secondary);
}

.mode-4 .bet-shared-foot {
  grid-area: shared-footer;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0.5rem 0;
  box-sizing: border-box;
  height: 3rem;
}

.mode-4 [data-bet-separator] {
  display: none;
}

.mode-4:not(.is-bet-parallax-compact) .btn-bet.place-bet .btn-bet__label {
  color: var(--Base-Base-black);
}

.mode-4:not(.is-bet-parallax-compact) .btn-bet.cash-out .btn-bet__label,
.mode-4:not(.is-bet-parallax-compact) .btn-bet.cancel-bet .btn-bet__label,
.mode-4:not(.is-bet-parallax-compact) .btn-bet.disable .btn-bet__label {
  color: var(--Base-Base-white);
}

.mode-4 .bet-panel [data-bet-panel] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  background: var(--Base-Base-white-5);
  box-sizing: border-box;
}

.mode-4 .bet-panel [data-bet-panel].cancel-bet {
  background: var(--Red-Red-op-5);
}

.mode-4 .bet-panel [data-bet-panel].cash-out {
  background: var(--Green-Green-op-5);
}

.mode-4 .bet-panel .btn-bet__label {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}

.mode-4 .bet-panel [data-bet-panel] > .bet-head {
  display: none;
}

.mode-4 .bet-panel [data-bet-panel] .bet-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  gap: 0.75rem;
}

.mode-4 .bet-panel [data-bet-panel] .bet-tools {
  display: flex;
  width: 100%;
  height: 2rem;
  max-height: 2rem;
}

.mode-4 .bet-panel [data-bet-panel] .bet-tools .bet-input {
  width: 100%;
  height: 2rem;
}

.mode-4 .bet-panel [data-bet-panel] .bet-chips,
.mode-4 .bet-panel [data-bet-panel] .collect-input {
  display: none;
}

.mode-4 .bet-panel [data-bet-panel] .btn-bet {
  width: 100%;
  height: 2.5rem;
  min-height: 2.5rem;
  justify-self: stretch;
}

.mode-4 [data-bet-panel] .place-bet-div .btn-bet__value,
.mode-4 [data-bet-panel] .cancel-bet-div .btn-bet__label,
.mode-4 [data-bet-panel] .cash-out-div .cash-out1,
.mode-4 [data-bet-panel] .disable-div .btn-bet__label {
  display: none;
}

.btn-bet__auto-collect,
.btn-bet__auto-collect-fill {
  display: none;
}

.mode-4 [data-bet-panel] .cash-out-div .btn-bet__label {
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
  color: var(--Base-Base-white);
}

.mode-4 [data-bet-panel] .place-bet-div .btn-bet__auto-collect:not([hidden]),
.mode-4 [data-bet-panel] .cancel-bet-div .btn-bet__auto-collect:not([hidden]),
.mode-4 [data-bet-panel] .cash-out-div .btn-bet__auto-collect:not([hidden]),
.mode-4 [data-bet-panel] .disable-div .btn-bet__auto-collect:not([hidden]) {
  display: block;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-sm);
  color: var(--Base-Base-white-50);
}

.mode-4 [data-bet-panel] .place-bet-div .btn-bet__auto-collect:not([hidden]) {
  color: var(--Base-Base-black-50);
}

.mode-4 [data-bet-panel] .cash-out-div .btn-bet__auto-collect-fill {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 1.0625rem;
  background: var(--Base-Base-black-10);
}

.mode-4 .bet-input::before {
  content: none;
  display: none;
}

.mode-4 [data-bet-panel="0"] {
  grid-area: bet-0;
}

.mode-4 [data-bet-panel="1"] {
  grid-area: bet-1;
}

.mode-4 [data-bet-panel="2"] {
  grid-area: bet-2;
}

.mode-4 [data-bet-panel="3"] {
  grid-area: bet-3;
}

/*
 * Desktop default: all four bets in one horizontal row, bet-0 through bet-3.
 * Stretch the dock to the play width below 1500px, 80% above that.
 * Mobile and tablet keep the 2×2 order from the base .mode-4 grid.
 */
@media (min-width: 64rem) {
  .app.mode-4 .bet-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "shared-header shared-header shared-header shared-header"
      "bet-0 bet-1 bet-2 bet-3"
      "shared-footer shared-footer shared-footer shared-footer";
  }
}

@media (min-width: 64rem) and (max-width: 1500px) {
  .app.mode-4 {
    --mode4-dock-w: 100%;
    --status-w: 100%;
  }
}

@media (min-width: 1501px) {
  .app.mode-4 {
    --mode4-dock-w: 80%;
    --status-w: 80%;
  }
}

.bet-status {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 2rem;
  gap: 0.125rem;
  text-align: center;
}

.mode-4 .bet-card.cancel-bet .bet-status,
.mode-4 .bet-card.disable .bet-status,
.mode-4 .bet-card.cash-out .bet-status {
  display: flex;
}

.mode-4 .bet-card.cancel-bet .bet-tools,
.mode-4 .bet-card.disable .bet-tools,
.mode-4 .bet-card.cash-out .bet-tools {
  display: none;
}

.bet-status__label {
  color: var(--Text-Icons-Tertiary);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-text-xs);
  white-space: nowrap;
}

.bet-status__amount {
  color: var(--Text-Icons-Secondary);
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
  white-space: nowrap;
}

.bet-status__label--waiting,
.bet-status__label--placed,
.bet-status__label--winning,
.bet-status__amount--win {
  display: none;
}

.bet-card.cancel-bet .bet-status__label--waiting {
  display: inline;
}

.bet-card.disable .bet-status__label--placed {
  display: inline;
}

.bet-card.cash-out .bet-status__label--waiting,
.bet-card.cash-out .bet-status__amount--bet {
  display: none;
}

.bet-card.cash-out .bet-status__label--winning,
.bet-card.cash-out .bet-status__amount--win {
  display: inline;
}

.bet-status__amount--win {
  color: var(--Green-Green-light);
  font-variant-numeric: tabular-nums;
}

.bet-all-action {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: var(--radius-max);
  cursor: pointer;
  box-sizing: border-box;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text-lg);
  position: relative;
  margin: 0 0.625rem;
  transition: 0.2s;
}

.bet-all-action:hover {
  opacity: 0.8;
  transition: 0.2s;
}

.mode-4 .bet-shared-foot .bet-all-action:not([hidden]) {
  display: flex;
}

.bet-all-action__label {
  display: none;
  flex-direction: column;
  align-items: center;
  line-height: 1.25rem;
  pointer-events: none;
}

.bet-all-action--place {
  background: var(--Primary-Primary-op-10);
  color: var(--Primary-Primary-base);
}

.bet-all-action--place .bet-all-action__label--place {
  display: flex;
}

.bet-all-action--collect {
  background: var(--Green-Green-op-10);
  color: var(--Green-Green-base);
}

.bet-all-action--collect .bet-all-action__label--collect {
  display: flex;
}

.bet-all-action__label strong {
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-variant-numeric: tabular-nums;
}

.bet-all-action--cancel {
  background: var(--Red-Red-op-10);
  color: var(--Red-base);
}

.bet-all-action--cancel .bet-all-action__label--cancel {
  display: flex;
}

.bet-all-action--disable {
  background: var(--Green-Green-op-10);
  color: var(--Green-Green-base);
}

.bet-all-action--disable .bet-all-action__label--disable {
  display: flex;
  /*color: var(--Base-Base-white);*/
}

.bet-all-action:disabled {
  opacity: 0.7;
  cursor: default;
}

.mode-1 {
  --mode-1-dock-w: 30.5rem;
  --status-w: min(var(--mode-1-dock-w), 100%);
}


@media (max-width: 79.9375rem) {
  .app {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    --side-width: 17.5rem;
  }

  .side {
    width: 17.5rem;
    padding: 1.25rem;
  }

  .round-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .logo {
    width: 4.375rem;
    height: auto;
  }

  .bet-dock {
    width: min(51.4375rem, 100%);
    height: 8.7rem;
    padding: 0.875rem 1rem;
  }

}

@media (min-width: 80rem) and (max-width: 95.9375rem) {
  .app {
    grid-template-columns: minmax(0, 1fr) 23rem;
    --side-width: 23rem;
  }

  .side {
    width: 23rem;
  }
}

@media (min-width: 80rem) {

}

@media (max-width: 63.9375rem) {
  .page {
    overflow: auto;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
    min-height: var(--real-vh);
    overflow: visible;
    --side-width: 0;
  }

  .play {
    min-height: var(--real-vh);
  }

  .side {
    width: 100%;
    height: auto;
    min-height: auto;
    margin: 0;
    padding: 1.25rem;
    border: 0;
    border-radius: 0;
  }

  .topbar {
    padding-inline: 1rem;
  }

  .stage {
    min-height: 19rem;
  }

  .play-footer {
    padding-inline: 1rem;
  }

  .bet-dock {
    height: 9rem;
  }

  .bet-panel {
    flex-direction: row;
    align-items: stretch;
    height: 6.5rem;
    gap: 1.25rem;
    max-width: none;
  }

  .bet-panel .bet-sep {
    width: 1px;
    height: 100%;
  }

  .bet-panel .bet-tools,
  .bet-panel .bet-body .btn-bet {
    width: 50%;
  }

}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .page {
    overflow: hidden;
  }

  .app {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    overflow: hidden;
    --side-width: 17.5rem;
  }

  .side {
    width: 17.5rem;
    height: var(--real-vh);
    min-height: 0;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
  }

  .side .bets {
    height: 33.75rem;
    flex-basis: 33.75rem;
  }

  /*
   * Tablet portrait: players keep panel scroll (virtualized list needs #side-players
   * as the scrollport). Top scrolls inside .bets-body with a constrained .bets.
   */
  .side .tab-panel.tab-panel--players {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .side .tab-panel.tab-panel--players .bets {
    flex: 0 0 auto;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .side .tab-panel.tab-panel--players .bets-body {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  .side .tab-panel.tab-panel--top {
    overflow: hidden;
  }

  .side .tab-panel.tab-panel--top .bets {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .side .tab-panel.tab-panel--top .bets-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .bet-dock {
    width: min(26.125rem, 100%);
    height: 14rem;
    padding: 1.25rem;
  }

  .bet-panel {
    align-items: center;
    width: min(23.625rem, 100%);
    height: 11.5rem;
    gap: 0.75rem;
    margin-inline: auto;
  }

  .bet-panel .bet-card {
    width: 11.03125rem;
    height: 11.25rem;
    flex: 0 0 11.03125rem;
    gap: 0.75rem;
  }

  .bet-panel .bet-sep {
    width: 1px;
    height: 100%;
  }

  .bet-panel .bet-body {
    flex-direction: column;
    gap: 0.75rem;
    height: 9.25rem;
  }

  .bet-panel .bet-tools,
  .bet-panel .bet-body .btn-bet {
    width: 100%;
  }

  .bet-panel .bet-tools {
    height: 4.5rem;
    gap: 0.5rem;
  }

  .bet-panel .btn-bet {
    border-radius: var(--radius-l);
  }

  .mode-1 .bet-dock {
    width: min(var(--mode-1-dock-w), 100%);
    height: 14rem;
    padding: 1rem 1.25rem;
  }

  .mode-1 .bet-panel {
    width: min(23.625rem, 100%);
    height: 11.5rem;
  }

  .mode-1 .bet-panel .bet-card {
    width: 100%;
    height: 11.25rem;
    flex: 1 1 auto;
    padding: 0;
    gap: 1rem;
  }

  .mode-1 .bet-panel .bet-body {
    flex-direction: column;
    align-items: stretch;
    height: 9.25rem;
    gap: 0.75rem;
  }

  .mode-1 .bet-panel .bet-tools,
  .mode-1 .bet-panel .bet-body .btn-bet {
    width: 100%;
  }

  .mode-1 .bet-panel .bet-tools {
    height: 4.5rem;
    gap: 0.5rem;
  }

  .mode-1 .bet-panel .btn-bet {
    border-radius: var(--radius-l);
  }

  .mode-1 [data-bet-panel="0"] {
    width: 100%;
    flex-basis: 100%;
  }

  .app:not(.mode-1):not(.mode-4) {
    --status-w: min(26.125rem, 100%);
  }

  .mode-1 {
    --mode-1-dock-w: 26.125rem;
    --status-w: min(var(--mode-1-dock-w), 100%);
  }
}

@media (max-width: 47.9375rem) {
  .app {
    --mode4-dock-w: 100%;
    --mode4-dock-p: 5px;
    --mode4-rows: 1.25rem auto auto auto;
    --mobile-play-height: calc(max(0.85 * var(--real-vh), 620px) - 20px);
    --status-w: 100%;
    --status-px: 1rem;
    --side-width: 0;

    background-position: 50% 0;
  }

  .app.mode-4 {
    --mobile-play-height: calc(max(0.85 * var(--real-vh) + 44px, 640px));
    /*--mobile-play-height: var(--real-vh);*/
  }

  @supports (-webkit-touch-callout: none) {
    .app {
      --mobile-play-height: max(0.85 * var(--real-vh), 620px);
    }
  }


  :root {
    --blur-Primary: 1rem;
    --blur-Additional: 2rem;
    --blur-Default-button: 0.5rem;
  }

  .segment--active {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .topbar {
    position: sticky;
    top: 0;
    gap: 0.875rem 0.25rem;
    padding: 1rem 0.75rem 0.75rem;
  }

  .brand {
    gap: 0.5rem;
  }

  .brand:has(> .btn-icon.is-visible) {
    gap: 1.0625rem;
  }

  .brand > .btn-icon,
  .wallet > [data-sidebar-toggle] {
    display: none;
  }

  .logo {
    width: 4.625rem;
    height: 1.75rem;
  }

  .wallet {
    gap: 0.375rem;
  }

  .multipliers {
    --multipliers-toggle-space: 0;
    --multipliers-expanded-h: calc(3 * 1.25rem + 2 * 0.25rem);
    gap: var(--multipliers-gap);
    padding-right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .multipliers::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  html:not(.is-mobile-landscape) .topbar.is-multipliers-expanded .multipliers {
    grid-column: 1 / -1;
    display: block;
    font-size: 0;
    align-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    height: var(--multipliers-expanded-h);
    min-height: var(--multipliers-expanded-h);
    max-height: var(--multipliers-expanded-h);
  }

  html:not(.is-mobile-landscape) .topbar.is-multipliers-expanded .multipliers:not(.is-multipliers-toggle-hidden)::before {
    content: '';
    float: right;
    width: var(--multipliers-toggle-col);
    height: calc(1.25rem + var(--multipliers-gap));
  }

  html:not(.is-mobile-landscape) .topbar.is-multipliers-expanded .multipliers > * {
    display: inline-flex;
    vertical-align: top;
    margin-right: var(--multipliers-gap);
    margin-bottom: var(--multipliers-gap);
  }

  html:not(.is-mobile-landscape) .topbar.is-multipliers-expanded .multipliers > .multipliers-view-all {
    margin-right: 0;
  }

  html:not(.is-mobile-landscape) .topbar.is-multipliers-expanded > [data-multipliers-toggle] {
    z-index: 3;
  }

  .topbar > .btn-icon {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
  }

  #menu-pop {
    position: fixed;
    top: 4.25rem;
    right: 0.75rem;
    max-height: calc(var(--real-vh) - 5rem);
    overflow: hidden;
  }

  #menu-pop > * {
    flex-shrink: 0;
  }

  #menu-pop .menu-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }

  #menu-pop .avatar-toggle:checked ~ .menu-body,
  #menu-pop .limits-toggle:checked ~ .menu-body {
    overflow: hidden;
  }

  .play {
    align-content: start;
    align-self: start;
    height: calc(var(--mobile-play-height) - var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)));
    min-height: 0;
  }

  .stage {
    align-items: start;
    box-sizing: border-box;
    padding: 0;
  }

  .round-winners {
    top: 0;
    width: calc(100% - 1.6rem);
    max-width: none;
  }

  .app.is-bet-action-hitbox .round-winners,
  .app.is-bet-parallax-compact .round-winners {
    position: fixed;
    top: calc(var(--round-winners-compact-top, 5.375rem) + 0.25rem);
    z-index: 5;
  }

  .countdown {
    margin-top: 0;
    gap: 0.5rem;
  }

  .count-ring {
    width: 6.5rem;
    height: 6.5rem;
  }

  .count-ring span {
    font-size: var(--font-size-text-5xl);
    line-height: var(--line-height-text-5xl);
  }

  .countdown p {
    font-size: var(--font-size-text-xl);
    line-height: var(--line-height-text-xl);
  }

  .play-footer {
    --play-footer-gap: 0.5rem;
    gap: var(--play-footer-gap);
    align-self: end;
    padding: 0;
  }

  .has-gifts .status {
    --status-w: 100%;
    min-height: 0.875rem;
  }

  .has-gifts .bet-tabs--status {
    display: none;
  }

  .has-gifts .bet-tabs--dock {
    display: inline-flex;
    align-self: center;
  }

  .bet-dock {
    position: relative;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 0.75rem;
    border: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--background-layout-canvas);
    /*backdrop-filter: blur(var(--blur-Primary));*/
    /* No bottom inset edge — side continues the same surface */
    box-shadow:
      inset 1px 0 0 var(--Base-Base-white-10),
      inset -1px 0 0 var(--Base-Base-white-10),
      inset 0 1px 0 var(--Base-Base-white-10);
    overflow: visible;
  }

  .bet-mode-expand {
    display: none !important;
  }

  /* Full-width bridge so no dark gap leaks at the inset divider ends */
  .bet-dock::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #191924;
    pointer-events: none;
    z-index: 0;
  }

  .bet-dock::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    height: 1px;
    background: var(--Base-Base-white-10, rgba(255, 255, 255, 0.10));
    pointer-events: none;
    z-index: 1;
  }

  .mode-1 .bet-dock::after {
    left: 0.375rem;
    right: 0.375rem;
  }

  .mode-4 .bet-panel [data-bet-panel="0"] {
    border-radius: 1.5rem 0.5rem 0.5rem 0.5rem;
  }

  .mode-4 .bet-panel [data-bet-panel="1"] {
    border-radius: 0.5rem 1.5rem 0.5rem 0.5rem;
  }

  .mode-4 .bet-panel [data-bet-panel="2"] {
    border-radius: 0.5rem 0.5rem 0.5rem 1.5rem;
  }

  .mode-4 .bet-panel [data-bet-panel="3"] {
    border-radius: 0.5rem 0.5rem 1.5rem 0.5rem;
  }

  .app.is-bet-scrolling .bet-dock {
    background: var(--background-layout-canvas);
  }

  .app.is-bet-scrolling .bet-dock,
  .app.is-bet-scrolling .bet-dock *,
  .app.is-bet-scrolling .compact-bet-actions,
  .app.is-bet-scrolling .compact-bet-actions * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .has-gifts .bet-dock {
    width: 100%;
    gap: 0.75rem;
  }

  .has-gifts.is-gift-mode .bet-dock {
    height: calc(14.25rem - var(--bet-dock-collapse, 0rem)) !important;
    padding: 0 0 0.9rem;
    overflow: hidden;
  }

  .has-gifts.is-gift-mode.mode-classic .bet-dock {
    height: calc(16.0625rem - var(--bet-dock-collapse, 0rem)) !important;
  }

  .has-gifts.is-gift-mode.mode-1 .bet-dock {
    height: calc(4rem + 0.75rem + 4.5rem + 16px + 0.75rem - var(--bet-dock-collapse, 0rem)) !important;
    padding-bottom: 0.75rem;
  }

  .has-gifts.is-gift-mode .gift-dock-header,
  .has-gifts.is-gift-mode .gift-dock-body,
  .has-gifts.is-gift-mode .gift-summary,
  .has-gifts.is-gift-mode .gift-bet-buttons {
    opacity: var(--bet-panel-opacity, 1);
  }

  .has-gifts.is-gift-mode.is-bet-parallax-compact .gift-dock-header,
  .has-gifts.is-gift-mode.is-bet-parallax-compact .gift-dock-body,
  .has-gifts.is-gift-mode.is-bet-parallax-compact .gift-summary,
  .has-gifts.is-gift-mode.is-bet-parallax-compact .gift-bet-buttons {
    pointer-events: none;
  }

  .has-gifts.is-gift-mode .bet-panel {
    display: none;
  }

  .mode-1 .bet-dock {
    width: 100%;
    height: calc(8.5rem - var(--bet-dock-collapse, 0rem));
    padding: 0.25rem;
    overflow: hidden;
    border: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--background-layout-canvas);
    box-shadow:
      inset 1px 0 0 var(--Base-Base-white-10),
      inset -1px 0 0 var(--Base-Base-white-10),
      inset 0 1px 0 var(--Base-Base-white-10);
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-dock {
    height: calc(12.75rem - var(--bet-dock-collapse, 0rem));
    overflow: hidden;
  }

  .mode-4 .bet-dock {
    height: calc(20.04rem - var(--bet-dock-collapse, 0rem));
    overflow: hidden;
    padding: var(--mode4-dock-p);
  }

  .mode-4.visual-no-bet-all .bet-dock {
    height: calc(16rem - var(--bet-dock-collapse, 0rem));
  }

  .mode-4 .bet-shared-foot.is-visual-hidden {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .dock-handle {
    position: absolute;
    top: -1rem;
    left: 50%;
    display: none;
    width: 2.125rem;
    height: 0.25rem;
    border-radius: var(--radius-max);
    background-color: var(--Base-Base-white-15);
    transform: translateX(-50%);
  }

  .bet-panel {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 11.25rem;
    gap: 0.75rem;
    padding-top: 0;
    transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1), gap 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bet-panel .bet-card {
    gap: 0.75rem;
    height: 11.25rem;
    overflow: visible;
    transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1), gap 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bet-panel .bet-head {
    height: 1.25rem;
    max-height: 1.25rem;
  }

  .bet-panel .auto-text {
    display: inline;
  }

  .bet-panel .btn-autoplay {
    display: inline-flex;
  }

  .bet-panel .bet-sep {
    width: 1px;
    height: 11.25rem;
    transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bet-panel .bet-body {
    flex-direction: column;
    gap: 0.75rem;
    height: 9.25rem;
    transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1), gap 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bet-panel .bet-tools,
  .bet-panel .bet-body .btn-bet {
    width: 100%;
  }

  .bet-panel .bet-tools {
    height: 4.5rem;
    max-height: 4.5rem;
    gap: 0.5rem;
    transform-origin: center left;
  }

  .bet-panel .bet-head,
  .bet-panel .bet-tools,
  .mode-4 .bet-shared-head,
  .mode-4 .bet-shared-foot {
    min-height: 0;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    /* No transform transition here — iOS restarts it when collect toggle/:has() invalidates styles */
    transition:
            height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
            width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            flex-basis 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.16s ease,
            visibility 0s linear 0s;
  }

  .mode-4 .bet-shared-foot {
    margin: 0.54rem 0;
    max-height: 3.75rem;
  }

  .bet-panel .bet-tools {
    overflow: hidden;
  }

  .mode-4 .bet-panel {
    height: auto;
  }

  .bet-panel .bet-chips {
    display: flex;
  }

  .bet-panel .btn-bet {
    height: 4rem;
    border-radius: var(--radius-l);
    transition:
            background-color 0.2s ease,
            box-shadow 0.2s ease,
            height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
            width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .bet-panel .btn-bet__value {
    font-size: var(--font-size-text-xl);
    line-height: var(--line-height-text-xl);
  }

  .bet-panel .btn-bet__label {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
  }

  .mode-classic .bet-dock {
    height: calc(16.0625rem - var(--bet-dock-collapse, 0rem));
    padding: 0.75rem;
    overflow: hidden;
  }

  .mode-classic .bet-panel {
    z-index: 1;
    flex-direction: column;
    height: 14.5625rem;
    gap: 0.75rem;
    opacity: var(--bet-panel-opacity, 1);
    transform: none;
    transform-origin: top center;
    transition:
            height 0.32s cubic-bezier(0.22, 0.86, 0.22, 1),
            gap 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mode-1 .bet-panel,
  .mode-4 .bet-panel,
  .app:not(.mode-1):not(.mode-classic) .bet-panel {
    opacity: var(--bet-panel-opacity, 1);
  }

  .mode-classic .bet-panel .bet-card {
    width: 100%;
    height: 6.5rem;
    flex: 0 0 auto;
  }

  .mode-classic .bet-panel .bet-sep {
    width: 100%;
    height: 1px;
    margin: 0;
  }

  .mode-classic .bet-panel .bet-body {
    flex-direction: row;
    align-items: stretch;
    height: 4.5rem;
    gap: 0.75rem;
  }

  .mode-classic .bet-panel .bet-tools,
  .mode-classic .bet-panel .bet-body .btn-bet {
    width: calc((100% - 0.75rem) / 2);
  }

  .mode-classic .bet-panel .bet-tools {
    height: 4.5rem;
  }

  .mode-classic .bet-panel .bet-body .btn-bet {
    height: 4.5rem;
  }

  .mode-1 .bet-panel {
    flex-direction: column;
    height: 8.5rem;
    gap: 0;
  }

  .mode-1 .bet-panel .bet-card,
  .mode-1 [data-bet-panel="0"] {
    width: 100%;
    height: 7.5rem;
    flex: 0 0 auto;
    padding: 0.5rem;
    gap: 0.75rem;
    box-sizing: border-box;
    background: var(--Base-Base-white-5);
  }

  .mode-1 .bet-panel .bet-body {
    flex-direction: row;
    align-items: stretch;
    height: 4.5rem;
    gap: 0.75rem;
  }

  .mode-1 .bet-panel .bet-tools,
  .mode-1 .bet-panel .bet-body .btn-bet {
    width: calc((100% - 0.75rem) / 2);
  }

  .mode-1 .bet-panel .bet-tools {
    height: 4.5rem;
    gap: 0.5rem;
  }

  .mode-1 .bet-panel .bet-body .btn-bet {
    height: 4.5rem;
  }

  .app .compact-bet-actions {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 8;
    display: flex;
    gap: 0.75rem;
    height: 4.5rem;
    opacity: var(--compact-actions-opacity, 0);
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, var(--compact-actions-y, -2rem), 0);
    will-change: opacity, transform;
  }

  .app .compact-bet-actions .compact-bet-button--gift {
    display: none;
  }

  .app.is-gift-mode .compact-bet-actions .compact-bet-button:not(.compact-bet-button--gift) {
    display: none !important;
  }

  .app.is-gift-mode .compact-bet-actions .compact-bet-button--gift {
    display: inline-flex;
  }

  .app .compact-bet-actions .btn-bet {
    width: 100%;
    min-width: 0;
    height: 4.5rem;
    flex: 1 1 0;
  }

  .app.mode-4 .compact-bet-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
    height: auto;
  }

  .app.mode-4 .compact-bet-actions .btn-bet {
    flex: 1 1 calc(50% - 0.25rem);
    height: 2.5rem;
    min-height: 2.5rem;
  }

  .app.mode-4 .compact-bet-actions .btn-bet .btn-bet__value {
    font-size: var(--font-size-text-lg);
    line-height: var(--line-height-text-base);
  }

  .app.mode-4 .compact-bet-actions .btn-bet .btn-bet__label {
    display: none;
  }

  .app:not(.mode-4):not(.is-gift-mode) .compact-bet-actions .compact-bet-button:nth-child(n + 3) {
    display: none;
  }

  .mode-1:not(.is-gift-mode) .compact-bet-actions .compact-bet-button:nth-child(n + 2) {
    display: none;
  }

  .mode-1.is-gift-mode .compact-bet-actions .compact-bet-button--gift[data-button="5"] {
    display: none !important;
  }

  .is-bet-compact .bet-panel {
    height: 4rem;
  }

  .is-bet-compact .bet-panel .bet-card {
    height: 4rem;
    gap: 0;
  }

  .is-bet-compact .bet-panel .bet-head,
  .is-bet-compact .bet-panel .bet-tools,
  .is-bet-compact.mode-4 .bet-shared-head,
  .is-bet-compact.mode-4 .bet-shared-foot {
    height: 0;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
            height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
            width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            flex-basis 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.14s ease,
            visibility 0s linear 0.18s;
  }

  .is-bet-compact .bet-panel .bet-tools {
    width: 0;
    flex-basis: 0;
  }

  .is-bet-compact .bet-panel .bet-sep {
    height: 4rem;
  }

  .is-bet-compact .bet-panel .bet-body {
    height: 4rem;
    gap: 0;
  }

  .is-bet-compact .bet-panel .bet-body .btn-bet {
    width: 100%;
    height: 4rem;
  }

  .is-bet-compact .bet-panel .is-compact-bet {
    --btn-bet-scale: 1.01;
  }

  .is-bet-compact.mode-classic .bet-dock {
    height: calc(16.0625rem - var(--bet-dock-collapse, 0rem));
  }

  .is-bet-compact.mode-classic .bet-panel {
    flex-direction: column;
    height: 14.5625rem;
    gap: 0.75rem;
    opacity: var(--bet-panel-opacity, 1);
    pointer-events: auto;
    transform: none;
  }

  .is-bet-compact.mode-classic .bet-panel .bet-head {
    height: 1.25rem;
    max-height: 1.25rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .is-bet-compact.mode-classic .bet-panel .bet-tools {
    width: calc((100% - 0.75rem) / 2);
    flex-basis: auto;
    height: 4.5rem;
    max-height: 4.5rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .is-bet-compact.mode-classic .bet-panel .bet-card {
    width: 100%;
    height: 6.5rem;
    flex: 0 0 auto;
    gap: 0.75rem;
    overflow: visible;
  }

  .is-bet-compact.mode-classic .bet-panel .bet-sep {
    width: 100%;
    height: 1px;
    margin: 0;
  }

  .is-bet-compact.mode-classic .bet-panel .bet-body {
    flex-direction: row;
    height: 4.5rem;
    gap: 0.75rem;
  }

  .is-bet-compact.mode-classic .bet-panel .bet-body .btn-bet {
    width: calc((100% - 0.75rem) / 2);
    height: 4.5rem;
  }

  .is-bet-action-hitbox .compact-bet-actions,
  .is-bet-parallax-compact .compact-bet-actions {
    visibility: visible;
    pointer-events: auto;
  }

  .is-bet-action-hitbox .compact-bet-actions .compact-bet-button,
  .is-bet-parallax-compact .compact-bet-actions .compact-bet-button {
    pointer-events: auto;
  }

  .is-bet-parallax-compact .bet-panel,
  .is-bet-parallax-compact .bet-panel * {
    pointer-events: none;
  }

  .is-bet-compact.mode-4 .bet-panel {
    grid-template-rows: 0 auto auto 0;
    gap: 0.5rem;
    overflow: hidden;
  }

  .is-bet-compact.mode-4 [data-bet-panel] {
    padding: 0;
    gap: 0;
    background: transparent;
    border-radius: 0;
  }

  .is-bet-compact.mode-4 [data-bet-panel] > .bet-head,
  .is-bet-compact.mode-4 .bet-shared-head,
  .is-bet-compact.mode-4 [data-bet-panel] .bet-tools,
  .is-bet-compact.mode-4 [data-bet-panel] .bet-status,
  .is-bet-compact.mode-4 .bet-shared-foot {
    display: none;
  }

  .is-bet-compact.mode-4 [data-bet-panel] .place-bet-div .btn-bet__value {
    display: inline;
  }

  .is-bet-compact.mode-4 [data-bet-panel] .btn-bet {
    --btn-bet-y: 0;
    --btn-bet-scale: 1;
    height: 2.5rem;
    min-height: 2.5rem;
  }

  .is-bet-compact.mode-4 [data-bet-panel] .btn-bet .btn-bet__value {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  .is-bet-compact.mode-4 [data-bet-panel] .btn-bet .btn-bet__label {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .bet-panel,
    .bet-panel .bet-card,
    .bet-panel .bet-head,
    .bet-panel .bet-sep,
    .bet-panel .bet-body,
    .bet-panel .bet-tools,
    .bet-panel .btn-bet,
    .bet-panel .btn-bet > span,
    .is-bet-compact .bet-panel .is-compact-bet,
    .mode-4 .bet-shared-head,
    .mode-4 .bet-shared-foot {
      animation: none;
      transition: none;
    }
  }

  .side {
    width: 100%;
    height: calc(var(--real-vh) - 550px + var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)));
    min-height: auto;
    gap: 0.75rem;
    margin-top: -1px;
    padding: 0.75rem;
    border: 0;
    border-radius: 0;
    /* Solid canvas fill only — no radial restart (continuation of bet-dock) */
    background: #191924;
    box-shadow:
      inset 1px 0 0 var(--Base-Base-white-10),
      inset -1px 0 0 var(--Base-Base-white-10),
      inset 0 -1px 0 var(--Base-Base-white-10);
    transition: none;
  }

  .app.mode-4 .side {
    height: calc(var(--real-vh) - 660px + var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)));
  }

  @media (max-height: 48.75rem) {
    .app.mode-4 .side {
      height: calc(var(--real-vh) - 620px + var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)));
    }
  }

  /*
   * At 630px and below: fill the viewport with play (canvas grows, round-card peek is hidden
   * until compact scroll). Bet dock stays on screen.
   */
  @media (max-height: 630px) {
    .app,
    .app.mode-4 {
      --mobile-play-height: var(--real-vh);
      --mobile-play-max: var(--real-vh);
      --compact-scroll-runway: 50px;
      --stage-fit-scale: max(0.5, min(1, calc(0.5 + 0.5 * (var(--real-vh) - 450px) / 180px)));
      --round-winners-fit-scale: max(0.75, min(1, calc(0.75 + 0.25 * (var(--real-vh) - 450px) / 180px)));
    }

    .app.mode-4 {
      --stage-fit-scale: max(0.4, min(1, calc(0.4 + 0.6 * (var(--real-vh) - 500px) / 130px)));
      --round-winners-fit-scale: max(0.7, min(1, calc(0.7 + 0.3 * (var(--real-vh) - 500px) / 130px)));
    }

    /* Temporary: compact layout covers short 4-bet viewports.
    @media (max-height: 589px) {
      .app.mode-4 #top3Wins {
        display: none !important;
      }
    }
    */

    .round-winners {
      transform-origin: 50% 0;
    }

    .stage {
      min-height: 0;
    }

    .play {
      height: calc(min(var(--mobile-play-height), var(--mobile-play-max)) - var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)));
      max-height: var(--mobile-play-max);
    }

    .side,
    .app.mode-4 .side {
      height: calc(var(--compact-scroll-runway) + var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)));
    }

    /* Four-bet collapses 13.25rem of layout against the other modes' 8rem, which
       lifts the dock too far — keep play/side paired and spend only 80% of it. */
    .app.mode-4 .play {
      height: calc(min(var(--mobile-play-height), var(--mobile-play-max)) - var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)) * 0.8);
    }

    .app.mode-4 .side {
      height: calc(var(--compact-scroll-runway) + var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)) * 0.8);
    }

    .app .compact-bet-actions {
      top: 50%;
      left: calc(0.75rem * var(--compact-h-scale));
      right: calc(0.75rem * var(--compact-h-scale));
      gap: calc(0.75rem * var(--compact-h-scale));
      height: 3.25rem;
      transform: translate3d(0, calc(-50% + var(--compact-actions-y, 0rem)), 0);
    }

    /* Compact buttons match the full panel's button height, per mode. */
    .app .compact-bet-actions .btn-bet {
      height: 3.25rem;
    }

    .app .compact-bet-actions .btn-bet .btn-bet__value {
      font-size: calc(var(--font-size-text-xl) * var(--compact-h-scale));
      line-height: calc(var(--line-height-text-xl) * var(--compact-h-scale));
    }

    .app .compact-bet-actions .btn-bet .btn-bet__label {
      font-size: calc(var(--font-size-text-base) * var(--compact-h-scale));
      line-height: calc(var(--line-height-text-base) * var(--compact-h-scale));
    }

    .app .compact-bet-actions .btn-bet .cancel-bet-div .btn-bet__value {
      font-size: calc(var(--font-size-text-lg) * var(--compact-h-scale));
      line-height: calc(var(--line-height-text-lg) * var(--compact-h-scale));
    }

    .app .compact-bet-actions .btn-bet .cancel-bet-div .btn-bet__label {
      font-size: calc(var(--font-size-text-sm) * var(--compact-h-scale));
      line-height: calc(var(--line-height-text-sm) * var(--compact-h-scale));
    }

    .app.mode-4 .compact-bet-actions {
      row-gap: calc(0.5rem * var(--compact-h-scale));
      column-gap: calc(0.75rem * var(--compact-h-scale));
      /* Two rows. Dock floor below centers this box so top/bottom match the 0.75rem side inset. */
      height: calc(4.5rem + 0.5rem * var(--compact-h-scale));
    }

    .app.mode-4:not(.is-gift-mode) .compact-bet-actions::before,
    .app.mode-4:not(.is-gift-mode) .compact-bet-actions::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      height: 2.25rem;
      background: var(--Base-Base-white-10);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .app.mode-4:not(.is-gift-mode) .compact-bet-actions::before {
      top: 0;
    }

    .app.mode-4:not(.is-gift-mode) .compact-bet-actions::after {
      bottom: 0;
    }

    .app.mode-4 .compact-bet-actions .btn-bet {
      flex-basis: calc(50% - 0.375rem * var(--compact-h-scale));
      height: 2.25rem;
      min-height: 2.25rem;
    }

    .app.mode-4 .compact-bet-actions .btn-bet .btn-bet__value {
      font-size: calc(var(--font-size-text-lg) * var(--compact-h-scale));
      line-height: calc(var(--line-height-text-base) * var(--compact-h-scale));
    }

    .app.mode-4 .compact-bet-actions .btn-bet .cancel-bet-div .btn-bet__value {
      font-size: calc(var(--font-size-text-base) * var(--compact-h-scale));
      line-height: calc(var(--line-height-text-sm) * var(--compact-h-scale));
    }

    /* Topbar — fixed tokens; coefficient HUD uses --stage-fit-scale */
    .logo {
      width: calc(4.625rem * 20 / 28);
      height: 1.25rem;
      object-fit: contain;
      object-position: center;
    }

    .brand > .btn-icon.is-visible::after {
      height: 1.25rem;
    }

    .wallet {
      gap: 0.375rem;
    }

    .wallet .btn,
    #userBalance.btn-md {
      height: 1.5rem;
      padding: 0.125rem 0.2rem 0.125rem 0.25rem;
      font-size: var(--font-size-text-sm);
      line-height: var(--line-height-text-sm);
    }

    .wallet .btn.currency-symbol-right {
      padding: 0.125rem 0.375rem 0.125rem 0.5rem;
    }

    .wallet .btn.no-currency-symbol {
      padding: 0.125rem 0.5rem;
    }

    #userBalance > span:not(.currency) {
      height: var(--line-height-text-sm);
      line-height: var(--line-height-text-sm);
    }

    .wallet .btn > .currency {
      width: 1.1rem;
      min-width: 1.1rem;
      height: 1.1rem;
      padding: 0;
    }

    .wallet > .btn-icon.btn-icon-md {
      width: 1.5rem;
      height: 1.5rem;
      align-items: center;
      justify-content: center;
      padding: 0.1875rem;
      box-sizing: border-box;
    }

    .wallet > .btn-icon.btn-icon-md svg.icon {
      width: 100%;
      height: 100%;
      margin: auto;
      flex: none;
      overflow: hidden;
    }

    /* Close sits absolute, so 100% is the button box. Match the in-flow menu icon. */
    .wallet > .btn-icon.btn-icon-md[data-menu-toggle] .icon-close {
      width: calc(100% - 0.375rem);
      height: calc(100% - 0.375rem);
    }

    .wallet > .btn-icon[aria-label="Gift"] [data-gifts-count] {
      top: -0.25rem;
      left: 0.5625rem;
      font-size: 0.75rem;
      line-height: 1;
    }

    .topbar {
      gap: 0.5rem 0.25rem;
    }

    .topbar .multipliers,
    .topbar > .btn-icon {
      align-self: start;
    }

    .topbar .multipliers {
      --multipliers-expanded-h: calc((1.5rem - 1.25rem) / 2 + 3 * 1.25rem + 2 * 0.25rem);
      box-sizing: border-box;
      height: 1.5rem;
      min-height: 1.5rem;
      max-height: 1.5rem;
      align-items: flex-start;
      padding-top: calc((1.5rem - 1.25rem) / 2);
      overflow-x: auto;
      overflow-y: hidden;
      transition: none;
    }

    .topbar.is-multipliers-expanded .multipliers {
      height: var(--multipliers-expanded-h);
      min-height: var(--multipliers-expanded-h);
      max-height: var(--multipliers-expanded-h);
    }

    .topbar .badge-multiplier-md {
      height: 1.25rem;
      font-size: var(--font-size-text-xs);
      line-height: var(--line-height-text-xs);
    }

    /* Coefficient HUD only — play-bets stay discrete, not transform-scaled */
    .stage-hud {
      transform: translateX(-50%) scale(var(--stage-fit-scale, 1));
      transform-origin: 50% calc(var(--play-bets-offset-y, -1.81rem) + 1.875rem - var(--stage-hud-offset-y, -8.4rem));
    }

    .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud {
      transform: translate(-50%, -50%) scale(var(--stage-fit-scale, 1));
      transform-origin: 50% 50%;
    }

    .app.is-animation-off:has(.topbar.is-multipliers-expanded):not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud {
      transform: translateX(-50%) scale(var(--stage-fit-scale, 1));
      transform-origin: 50% calc(var(--play-bets-offset-y, -1.81rem) + 1.875rem - var(--stage-hud-offset-y, -8.4rem));
    }

    .app.is-animation-off.is-bet-parallax-compact .play-footer .stage-hud,
    .app.is-animation-off.is-bet-action-hitbox .play-footer .stage-hud {
      transform: translateX(-50%) scale(var(--stage-fit-scale, 1));
      transform-origin: 50% calc(var(--play-bets-offset-y, -1.81rem) + 1.875rem - var(--stage-hud-offset-y, -8.4rem));
    }

    .play-bets {
      min-width: 4.25rem;
      height: 1.5rem;
      padding: 0 0.5rem;
      font-size: 0.75rem;
    }

    /* Short stage: footer anchor for animation-on and the compact dock.
       The +1rem keeps the shorter button on the jet line. */
    .play-bets,
    .app.is-animation-off.is-bet-parallax-compact .play-footer .play-bets,
    .app.is-animation-off.is-bet-action-hitbox .play-footer .play-bets {
      top: calc(var(--play-bets-offset-y, -1.81rem) + 1rem - var(--four-bet-switch-lift, 0px));
    }

    /* Animation off: the coefficient is centered in the strip and scaled from
       its own center (translate -50% puts that center on --stage-hud-offset-y).
       Park play-bets just under the scaled box so they stay a pair. */
    .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets {
      top: calc(
        var(--stage-hud-offset-y, -8.4rem)
        + (17px + 5rem) * var(--stage-fit-scale, 1) / 2
        + 0.5rem
        - var(--four-bet-switch-lift, 0px)
      );
    }

    .app.is-animation-off:has(.topbar.is-multipliers-expanded):not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets {
      top: calc(var(--play-bets-offset-y, -1.81rem) + 1rem - var(--four-bet-switch-lift, 0px));
    }

    /* ≤440: animation-off HUD joins the same footer anchor as animation-on,
       so the coefficient and play-bets stay aligned. */
    @media (max-height: 440px) {
      .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud,
      .app.is-animation-off.is-bet-parallax-compact .play-footer .stage-hud,
      .app.is-animation-off.is-bet-action-hitbox .play-footer .stage-hud {
        top: calc(var(--stage-hud-offset-y, -8.4rem) - var(--four-bet-switch-lift, 0px));
        bottom: auto;
        transform: translateX(-50%) scale(var(--stage-fit-scale, 1));
        transform-origin: 50% calc(var(--play-bets-offset-y, -1.81rem) + 1.875rem - var(--stage-hud-offset-y, -8.4rem));
      }

      .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets {
        top: calc(var(--play-bets-offset-y, -1.81rem) + 1rem - var(--four-bet-switch-lift, 0px));
      }
    }

    /* Bet dock — full panel only.
       Lock body height so waiting/accepted labels don't retarget gap/height (those transition). */
    .app.mode-4 .bet-panel [data-bet-panel] .bet-body {
      height: 4.25rem;
      min-height: 4.25rem;
      max-height: 4.25rem;
      gap: 0.5rem;
      justify-content: space-between;
      overflow: hidden;
      transition: none;
    }
    
    .bet-panel .toggle {
      width: 1.5625rem;
      height: 1.08rem;
    }

    .bet-panel .toggle-slider::before {
      width: 0.8rem;
      height: 0.8rem;
      left: 0.1rem;
      top: 0.08rem;
    }

    .bet-panel .toggle-input:checked + .toggle-slider::before {
      transform: translateX(0.5625rem);
    }

    .bet-panel .btn-autoplay:not(.btn-autoplay-active) {
      flex-basis: 1rem;
      width: 1rem;
      min-width: 1rem;
      height: 1rem;
    }

    .bet-panel .btn-autoplay {
      align-items: center;
      justify-content: center;
    }

    .bet-panel .btn-autoplay svg.icon {
      width: 1rem;
      height: 1rem;
      flex-basis: 1rem;
      display: block;
      margin: auto;
    }

    .bet-panel .btn-autoplay-active {
      height: 1rem;
    }

    .bet-panel .bet-input,
    .bet-panel .collect-input {
      height: 1.5rem;
      align-items: center;
    }

    .bet-panel .bet-input-btn {
      width: 1.25rem;
      height: 1.25rem;
    }

    /* .bet-panel .bet-input-btn svg.icon {
      width: 0.75rem;
      height: 0.75rem;
      margin: auto;
      display: block;
    } */

    .bet-panel .collect-value .bet-input-btn {
      width: 0.75rem;
      min-width: 0.75rem;
      margin: 0.25rem;
    }

    .bet-panel .collect-value .bet-input-btn svg.icon {
      width: 0.75rem;
      height: 0.75rem;
    }

    .bet-panel .bet-input-field {
      font-size: var(--font-size-text-base);
      line-height: var(--line-height-text-base);
    }

    .bet-panel .chip,
    .bet-panel .bet-chips .chip {
      height: 1.5rem;
      padding: 0.25rem 0;
    }

    .app:not(.mode-4) .bet-panel .btn-bet {
      height: 3.25rem;
    }

    .app:not(.mode-4) .bet-panel .btn-bet__value {
      font-size: var(--font-size-text-lg);
      line-height: var(--line-height-text-lg);
    }

    .app:not(.mode-4) .bet-panel .cancel-bet-div .btn-bet__value {
      font-size: var(--font-size-text-base);
      line-height: var(--line-height-text-base);
    }

    .app:not(.mode-4) .bet-panel .cancel-bet-div .btn-bet__label {
      font-size: var(--font-size-text-sm);
      line-height: var(--line-height-text-sm);
    }

    .app:not(.mode-4) .bet-panel .bet-tools {
      height: 3.5rem;
      max-height: 3.5rem;
    }

    /* ui.js parks the collapsed dock at its own compact height; these floors are
       only a guard for very short viewports, where it scales the collapse past
       what the compact buttons need. */
    /* Head-to-body gap trimmed from 0.75rem; every height below drops by the same
       0.3rem (classic twice, for its two stacked cards) to keep the dock's bottom
       spacing. mode-1 and mode-4 set their own card gap and are unaffected. */
    .bet-panel .bet-card {
      gap: 0.45rem;
    }

    /* 10.5rem = the 9.2rem panel plus 0.65rem of dock padding top and bottom.
       The floor keeps the centered 3.25rem compact row at the same 0.75rem
       top and bottom inset as its side inset. */
    .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-dock {
      height: max(
        calc(3.25rem + 1.5rem * var(--compact-h-scale)),
        calc(10.5rem - var(--bet-dock-collapse, 0rem))
      );
      padding-block: 0.65rem;
    }

    .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel,
    .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-card {
      height: 9.2rem;
    }

    .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-sep {
      height: 9.2rem;
    }

    .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-body {
      height: 7.5rem;
    }

    /* 13.2rem holds the 11.9625rem panel with 0.6rem of dock padding each side.
       The floor keeps the centered 3.25rem compact row at the same 0.75rem
       top and bottom inset as its side inset. */
    .mode-classic .bet-dock {
      height: max(
        calc(3.25rem + 1.5rem * var(--compact-h-scale)),
        calc(13.2rem - var(--bet-dock-collapse, 0rem))
      );
      padding-block: 0.6rem;
    }

    .bet-dock {
      border-radius: 0.875rem 0.875rem 0 0;
    }

    .mode-classic .bet-panel {
      height: 11.9625rem;
    }

    .mode-classic .bet-panel .bet-card {
      height: 5.2rem;
    }

    .mode-classic .bet-panel .bet-body {
      align-items: center;
      height: 3.5rem;
    }

    .mode-classic .bet-panel .bet-tools {
      height: 3.5rem;
    }

    .mode-classic .bet-panel .bet-body .btn-bet {
      height: 3.25rem;
    }

    .mode-1 .bet-dock {
      height: max(3.75rem, calc(7.5rem - var(--bet-dock-collapse, 0rem)));
    }

    .mode-1 .bet-panel {
      height: 7.5rem;
    }

    .mode-1 .bet-panel .bet-card,
    .mode-1 [data-bet-panel="0"] {
      height: 6.5rem;
    }

    .mode-1 .bet-panel .bet-body {
      align-items: center;
      height: 3.5rem;
    }

    .mode-1 .bet-panel .bet-tools {
      height: 3.5rem;
    }

    .mode-1 .bet-panel .bet-body .btn-bet {
      height: 3.25rem;
    }

    /* Height is the panel's exact content box (15.42rem = 5px dock padding-top +
       237.64px panel + 4px padding-bottom), so the bet-all button clears the
       dock's bottom edge with no slack below it.
       The floor sizes the collapsed dock for the compact overlay. The overlay is
       centered, so 6.5rem (2 x 2.25rem rows + 0.5rem gap + 0.75rem inset x 2)
       gives the rows the same top and bottom inset as their 0.75rem side inset. */
    .mode-4 .bet-dock {
      height: max(
        calc(4.5rem + 2rem * var(--compact-h-scale)),
        calc(15.42rem - var(--bet-dock-collapse, 0rem))
      );
      padding-bottom: 4px;
    }

    .app.mode-4 .bet-panel [data-bet-panel] .bet-tools,
    .app.mode-4 .bet-panel [data-bet-panel] .bet-tools .bet-input {
      height: 1.5rem;
      max-height: 1.5rem;
    }

    .app.mode-4:not(.is-bet-compact) .bet-panel [data-bet-panel] .btn-bet {
      height: 2.25rem;
      min-height: 2.25rem;
    }

    .app.mode-4 .bet-panel [data-bet-panel] .btn-bet__value,
    .app.mode-4 .bet-panel [data-bet-panel] .bet-status__amount,
    .app.mode-4 .bet-shared-foot .bet-all-action__label {
      font-size: var(--font-size-text-base);
      line-height: var(--line-height-text-base);
    }

    .app.mode-4 .bet-panel [data-bet-panel] .cancel-bet-div .btn-bet__value {
      font-size: var(--font-size-text-sm);
      line-height: var(--line-height-text-sm);
    }

    /* .bet-status takes .bet-tools' place, but it is 2rem tall against the tools'
       1.5rem — drop the body gap in those states so 2rem + 2.25rem still fills the
       4.25rem body and the bet button never moves between states.
       The label's line box carries the status' own breathing room: 0.75rem label
       + 0.125rem gap + 1.125rem amount is exactly the 2rem box. */
    .app.mode-4 .bet-panel [data-bet-panel] .bet-status {
      gap: 0.125rem;
      /* Lifted into the cell's top padding — transform keeps the flex layout, so
         the bet button below it cannot move. */
      transform: translateY(-0.25rem);
    }

    .app.mode-4 .bet-panel [data-bet-panel] .bet-status__label {
      line-height: 0.75rem;
    }

    .app.mode-4 .bet-panel .bet-card.cancel-bet .bet-body,
    .app.mode-4 .bet-panel .bet-card.disable .bet-body,
    .app.mode-4 .bet-panel .bet-card.cash-out .bet-body {
      gap: 0;
      overflow: visible;
    }

    /* 10px from the shared head's content to the first row's bet input:
       0 head padding-bottom + 0.125rem row gap + 0.5rem cell padding. */
    .mode-4 .bet-shared-head {
      padding-bottom: 0;
    }

    .mode-4:not(.is-bet-compact) .bet-panel {
      row-gap: 0.125rem;
    }

    /* Flat bet cells split by hairlines. Dividers live inside the grid gaps so
       they cost no layout height. */
    .mode-4 .bet-panel [data-bet-panel],
    .mode-4 .bet-panel [data-bet-panel].cancel-bet,
    .mode-4 .bet-panel [data-bet-panel].cash-out {
      position: relative;
      background: none;
    }

    .mode-4 .bet-panel [data-bet-panel="0"]::after,
    .mode-4 .bet-panel [data-bet-panel="2"]::after,
    .mode-4 .bet-panel [data-bet-panel="2"]::before,
    .mode-4 .bet-shared-foot::before {
      content: "";
      position: absolute;
      background: var(--Base-Base-white-10);
      pointer-events: none;
    }

    /* Column divider — inset by the cell padding so it matches .bet-body height. */
    .mode-4 .bet-panel [data-bet-panel="0"]::after,
    .mode-4 .bet-panel [data-bet-panel="2"]::after {
      top: 0.5rem;
      bottom: 0.5rem;
      right: calc(-0.125rem - 0.5px);
      width: 1px;
    }

    /* Row divider — drawn from the left cell across both columns, inset by the
       cell padding so it ends where .bet-body does. */
    .mode-4 .bet-panel [data-bet-panel="2"]::before {
      top: calc(-0.0625rem - 0.5px);
      left: 0.5rem;
      width: calc(200% + 0.25rem - 1rem);
      height: 1px;
    }

    .mode-4 .bet-shared-foot {
      position: relative;
      margin-bottom: 0;
    }

    .app.mode-4 .bet-shared-foot,
    .app.mode-4 .bet-shared-foot .bet-all-action {
      height: 2rem;
    }

    /* Sits on the bottom cells' edge: 0.5rem below their bet buttons.
       -0.665rem = 0.125rem row gap + 0.54rem foot margin. */
    .mode-4 .bet-shared-foot::before {
      top: -0.665rem;
      left: 0;
      right: 0;
      height: 1px;
    }

    .is-bet-compact.mode-4 .bet-panel [data-bet-panel]::before,
    .is-bet-compact.mode-4 .bet-panel [data-bet-panel]::after {
      content: none;
    }
  }

  .side .bets {
    height: 17.75rem;
    flex-basis: 17.75rem;
  }

  .bets .bets-row:nth-of-type(n + 7) {
    display: flex;
  }

  .bet-all-action:hover {
    opacity: 1;
    transition: 0.2s;
  }
}

@media (orientation: landscape) and (max-width: 63.9375rem) and (max-height: 30rem) {
  .page {
    overflow: hidden;
    background: var(--background-layout-Pure);
  }

  .app,
  .app.is-side-closed {
    --status-w: 100%;
    --status-px: 0.75rem;
    --landscape-side-w: 360px;
    --side-width: var(--landscape-side-w);
    display: grid;
    grid-template-columns: calc(100% - var(--landscape-side-w)) var(--landscape-side-w);
    grid-template-rows: minmax(0, 1fr);
    max-width: 100vw;
    height: 100dvh;
    min-height: 0;
    margin-inline: auto;
    overflow: hidden;
    /* Side column is fixed in landscape — avoid animating track size on DOM inserts */
    transition: none;
  }

  .app::before {
    background-size: cover;
    background-position: 38% 50%;
    background-repeat: no-repeat;
  }

  /* .play is display:contents — no container. Cover the play column at old size. */
  body:not(.is-assets-ready) .stage::before,
  body.is-assets-pending .stage::before,
  .app.is-animation-off .stage::before {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    background-size: cover;
    background-position: center center;
  }

  .play {
    display: contents;
    height: auto;
    min-height: 0;
  }

  .topbar {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    gap: 1rem 0.25rem;
    padding: 0.75rem 0.75rem 0;
    background: linear-gradient(180deg, rgba(18, 14, 18, 0.78) 0%, rgba(18, 14, 18, 0.48) 56%, rgba(18, 14, 18, 0.00) 100%);
  }

  .topbar-row {
    gap: 0.75rem;
  }

  .brand {
    gap: 0.5rem;
  }

  .brand:has(> .btn-icon.is-visible) {
    gap: 1.0625rem;
  }

  .brand > .btn-icon,
  .wallet > [data-sidebar-toggle] {
    display: none;
  }

  .logo {
    width: 4.625rem;
    height: 1.75rem;
  }

  .wallet {
    gap: 0.5rem;
  }

  .wallet .btn {
    height: 2rem;
  }

  .multipliers {
    --multipliers-toggle-space: 0;
    gap: 0.25rem;
    min-height: 1.25rem;
    max-height: 1.25rem;
    padding-right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 88.0419%, transparent 100%);
    mask-image: linear-gradient(90deg, black 0%, black 88.0419%, transparent 100%);
  }

  .multipliers::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .topbar.is-multipliers-expanded .multipliers {
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    max-height: 5.2rem;
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .topbar > .btn-icon {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
  }

  #menu-pop {
    position: fixed;
    top: 3rem;
    right: calc((100vw - min(42.9375rem, 100vw)) / 2 + 20.0625rem + 2.6rem);
    width: 18.875rem;
    max-width: calc(100vw - 3.5rem);
    max-height: calc(var(--real-vh) - 4rem);
    overflow: hidden;
  }

  .menu-pop::before {
    display: none;
  }

  #menu-pop > * {
    flex-shrink: 0;
  }

  #menu-pop .menu-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }

  #menu-pop > .avatar-panel {
    flex-shrink: 1;
  }

  #menu-pop .avatar-toggle:checked ~ .avatar-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(var(--real-vh) - 8rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .stage {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: block;
    align-self: stretch;
    justify-self: stretch;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .max-multiplier-popup {
    grid-column: 1;
    grid-row: 1;
  }

  .round-winners,
  .app.is-bet-action-hitbox .round-winners,
  .app.is-bet-parallax-compact .round-winners {
    position: absolute;
    top: calc(var(--round-winners-compact-top, 5.25rem) + 0.25rem);
    left: 50%;
    z-index: 5;
    width: calc(100% - 1.6rem);
    max-width: none;
  }

  .play-footer {
    display: contents;
  }

  .play-footer .status {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    z-index: 5;
    width: min(100%, calc(100vw - var(--landscape-side-w)));
    max-width: calc(100% - 1.5rem);
    margin: 0 0 0.75rem;
    padding: 0 0.75rem;
    pointer-events: auto;
  }

  /* Absolute vs .app: center in play column (left edge ↔ sidebar), not full viewport */
  .play-footer .play-bets {
    grid-column: 1;
    grid-row: 1;
    position: absolute;
    left: calc((100% - var(--landscape-side-w)) / 2);
    top: auto;
    bottom: calc(2.5rem + var(--four-bet-switch-lift, 0px));
    margin-bottom: 0.5rem;
    transform: translateX(-50%);
    z-index: 6;
  }

  .play-footer .stage-hud {
    grid-column: 1;
    grid-row: 1;
    position: absolute;
    left: calc((100% - var(--landscape-side-w)) / 2);
    top: auto;
    bottom: calc(5.5rem + var(--four-bet-switch-lift, 0px));
    transform: translateX(-50%);
    z-index: 6;
    width: max-content;
    max-width: calc(100% - var(--landscape-side-w) - 2rem);
  }

  /* Landscape: same position as animation-on (portrait animation-off centers via higher-specificity transform) */
  .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud,
  .app.is-animation-off.mode-4:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud {
    top: auto;
    bottom: calc(5.5rem + var(--four-bet-switch-lift, 0px));
    margin-top: 0;
    transform: translateX(-50%);
  }

  /* Expanded row must not pick up the short-portrait fit scale (it drops the coeff onto the bets). */
  html.is-mobile-landscape .app.is-animation-off:has(.topbar.is-multipliers-expanded):not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud,
  html.is-mobile-landscape .app.is-animation-off.mode-4:has(.topbar.is-multipliers-expanded):not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud {
    top: auto;
    bottom: calc(5.5rem + var(--four-bet-switch-lift, 0px));
    margin-top: 0;
    transform: translateX(-50%);
    transform-origin: 50% 50%;
  }

  /* Landscape: keep bet totals where animation-on puts them */
  .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets,
  .app.is-animation-off.mode-4:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets {
    top: auto;
    bottom: calc(2.5rem + var(--four-bet-switch-lift, 0px));
    margin-top: 0;
    margin-bottom: 0.5rem;
    transform: translateX(-50%);
  }

  .play-footer .bet-dock-wrap {
    grid-column: 2;
    grid-row: 1;
    z-index: 4;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    touch-action: pan-y;
    will-change: transform;
    transition: none;
  }

  .bet-panel,
  .mode-4 .bet-panel,
  .mode-classic .bet-panel,
  .bet-panel .bet-card,
  .bet-panel .bet-head,
  .bet-panel .bet-sep,
  .bet-panel .bet-body,
  .bet-panel .bet-tools,
  .bet-panel .btn-bet {
    transition: none;
  }

  .play-footer .dock-handle,
  .play-footer .bet-tabs--dock {
    display: none;
  }

  .bet-dock,
  .mode-1 .bet-dock,
  .mode-classic .bet-dock {
    width: 100%;
    padding: 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }

  /* New/double — same side-by-side layout as portrait mobile */
  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-dock {
    height: 12.75rem;
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 11.25rem;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-card {
    width: auto;
    height: 11.25rem;
    flex: 1 1 0;
    gap: 0.75rem;
    overflow: visible;
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-sep {
    width: 1px;
    height: 11.25rem;
    flex: 0 0 1px;
    margin: 0;
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-body {
    flex-direction: column;
    align-items: stretch;
    height: 9.25rem;
    gap: 0.75rem;
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-tools,
  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-body .btn-bet {
    width: 100%;
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .bet-tools {
    height: 4.5rem;
    max-height: 4.5rem;
    flex-basis: auto;
    gap: 0.5rem;
  }

  .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-panel .btn-bet {
    height: 4rem;
    border-radius: var(--radius-l);
  }

  /* Classic — stacked cards */
  .mode-classic .bet-dock {
    height: 16.125rem;
  }

  .mode-classic .bet-panel {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 14.5625rem;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
  }

  .mode-classic .bet-panel .bet-card {
    width: 100%;
    height: 6.5rem;
    flex: 0 0 6.5rem;
    gap: 0.75rem;
    overflow: visible;
  }

  .mode-classic .bet-panel .bet-sep {
    width: 100%;
    height: 0.0625rem;
    flex: 0 0 0.0625rem;
    margin: 0;
  }

  .mode-classic .bet-panel .bet-body {
    flex-direction: row;
    align-items: stretch;
    height: 4.5rem;
    gap: 0.75rem;
  }

  .mode-classic .bet-panel .bet-tools,
  .mode-classic .bet-panel .bet-body .btn-bet {
    width: calc((100% - 0.75rem) / 2);
  }

  .mode-classic .bet-panel .bet-tools {
    height: 4.5rem;
    max-height: 4.5rem;
    flex-basis: auto;
    gap: 0.5rem;
  }

  .mode-classic .bet-panel .btn-bet {
    height: 4.5rem;
    border-radius: var(--radius-l);
  }

  .mode-1 .bet-dock {
    width: 100%;
    height: 8.5rem;
    padding: 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .app.is-bet-scrolling .bet-dock {
    background: transparent;
  }

  .mode-1 .side,
  .mode-1 .is-side-closed .side {
    padding: 0 0.75rem 0.75rem;
  }

  .mode-1 .bet-panel {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 7.5rem;
    gap: 0;
    padding: 0;
    margin: 0;
  }

  .mode-1 .bet-panel .bet-card,
  .mode-1 [data-bet-panel="0"] {
    width: 100%;
    height: 7.5rem;
    flex: 0 0 7.5rem;
    padding: 0.5rem;
    gap: 0.75rem;
    box-sizing: border-box;
    background: var(--Base-Base-white-5);
    border-radius: var(--radius-md);
  }

  .mode-1 .bet-panel .bet-body {
    flex-direction: row;
    align-items: stretch;
    height: 4.5rem;
    gap: 0.75rem;
  }

  .mode-1 .bet-panel .bet-tools,
  .mode-1 .bet-panel .bet-body .btn-bet,
  .mode-1 .bet-tools,
  .mode-1 .bet-body .btn-bet {
    width: calc((100% - 0.75rem) / 2);
    flex-shrink: 1;
    min-width: 0;
  }

  .mode-1 .bet-panel .bet-tools {
    height: 4.5rem;
    max-height: 4.5rem;
    gap: 0.5rem;
  }

  .mode-1 .bet-panel .bet-body .btn-bet,
  .mode-1 .bet-panel .btn-bet {
    height: 4.5rem;
    border-radius: var(--radius-l);
  }

  .mode-1 .bet-mode-expand {
    display: none;
  }

  .bet-panel .bet-head {
    height: 1.25rem;
    max-height: 1.25rem;
    min-height: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .bet-panel .auto-text {
    display: inline;
  }

  .bet-panel .btn-autoplay {
    display: inline-flex;
  }

  .bet-panel .bet-tools {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .mode-4 .bet-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "shared-header shared-header"
      "bet-0 bet-1"
      "bet-2 bet-3"
      "shared-footer shared-footer";
    height: auto;
    gap: 0.25rem;
  }

  .mode-4 .bet-shared-foot {
    display: flex;
    height: auto;
    max-height: 3.75rem;
  }

  /* Empty foot still kept height/margin (~80px) while #bet-all-action is hidden. */
  .mode-4 .bet-shared-foot:has(#bet-all-action[hidden]),
  .mode-4 .bet-shared-foot:not(:has(.bet-all-action:not([hidden]))) {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .mode-4.visual-no-bet-all .bet-shared-foot,
  .mode-4 .bet-shared-foot.is-visual-hidden {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
  }

  .mode-4 [data-bet-panel] .btn-bet {
    width: 100%;
    min-width: 100%;
    height: 2.5rem;
    justify-self: start;
    padding-inline: 0.25rem;
  }

  .ru .btn-bet__label {
    font-size: var(--font-size-text-sm);
  }

  /* Mode-4: hug the bet panel. Portrait calc(20.04rem) must not win here. */
  .app.mode-4 .bet-dock {
    height: auto;
    min-height: 0;
    padding: 0.75rem;
    overflow: hidden;
  }

  /* Keep non-panel dock chrome out of landscape layout/measure (except gift mode). */
  .app:not(.is-gift-mode) .play-footer .gift-dock-header,
  .app:not(.is-gift-mode) .play-footer .gift-dock-body,
  .play-footer .compact-bet-actions {
    display: none !important;
  }

  /* Gift close toast: below X, to the left, tip at top-right pointing up at X */
  .gift-dock-close-wrap .mode-switch-warning {
    top: calc(100% + 0.375rem);
    bottom: auto;
    left: auto;
    right: calc(50% - (27 / 220) * 13.75rem);
  }

  .gift-dock-close-wrap .mode-switch-warning__blur,
  .gift-dock-close-wrap .mode-switch-warning__shape {
    transform: scaleX(-1) scaleY(-1);
  }

  .gift-dock-close-wrap .mode-switch-warning__text {
    padding: 1.2rem 1rem 0.75rem;
  }

  .side,
  .is-side-closed .side {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    /* padding-top is set in JS to the exact bet-panel height */
    padding: 0 0.75rem 0.75rem;
    gap: 0.75rem;
    border: 0;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    scrollbar-width: none;
    box-sizing: border-box;
    background: #191924;
    transition: none;
  }

  /* Portrait mode-4 sets a calc() height that leaks into landscape — reset it. */
  .app.mode-4 .side,
  .app.mode-4 .is-side-closed .side {
    height: auto;
  }

  .side::-webkit-scrollbar {
    display: none;
    width: 0.25rem;
  }

  .side::-webkit-scrollbar-track {
    border-radius: var(--radius-max);
    background: rgba(255, 255, 255, 0.06);
  }

  .side::-webkit-scrollbar-thumb {
    border-radius: var(--radius-max);
    background: rgba(255, 255, 255, 0.28);
  }

  .side .segments {
    width: 100%;
    flex: 0 0 2rem;
  }

  .side .tab-panel--rounds .line-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .side .tab-panel--rounds .line-tab {
    width: auto;
    padding-inline: 0;
  }

  .side-tabs,
  .side .tab-panel {
    flex: 0 0 auto;
    overflow: visible;
  }

  .side .tab-panel.tab-panel--players .bets,
  .side .tab-panel.tab-panel--top .bets {
    height: 17.75rem;
    flex: 0 0 17.75rem;
    min-height: 0;
    overflow: hidden;
  }

  .side .tab-panel.tab-panel--players .bets-body,
  .side .tab-panel.tab-panel--top .bets-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .side .round-card {
    width: 100%;
    flex: 0 0 3.5rem;
  }

  .side .tab-panel .bets {
    height: 17.75rem;
    flex: 0 0 17.75rem;
  }

  .game-modal {
    align-items: flex-end;
    padding: 0;
  }

  .game-modal__panel {
    width: 100%;
    max-height: 100dvh;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    transform: translateY(calc(100% + 1.5rem));
  }

  .game-modal.is-open .game-modal__panel {
    transform: translateY(0);
  }

  .game-modal__panel,
  .game-modal__panel--my-bets,
  .game-modal__panel--history,
  .game-modal__panel--rules,
  .game-modal__panel--chat,
  .game-modal__panel--how-play,
  .game-modal__panel--autoplay,
  #popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay,
  #popup-autoplay.is-autoplay-advanced-open .game-modal__panel--autoplay,
  #popup-autoplay.is-autoplay-shared .game-modal__panel--autoplay,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay,
  .game-modal__panel--gifts,
  .game-modal__panel--gifts-result {
    width: 100%;
    height: auto;
    max-height: 100dvh;
    gap: 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    padding-bottom: 0;
  }

  #popup-gifts .game-modal__panel--gifts,
  #popup-gifts-result .game-modal__panel--gifts,
  #popup-gifts-result .game-modal__panel--gifts-result {
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
    padding: 2rem 0 1.5rem;
  }

  #popup-gifts .gifts-popup,
  #popup-gifts-result .gifts-popup,
  .gifts-popup--received,
  .gifts-popup--result {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  #popup-gifts .gifts-popup__content,
  #popup-gifts-result .gifts-popup__content,
  .gifts-popup--received .gifts-popup__content,
  .gifts-popup--result .gifts-popup__content,
  .gifts-popup--result.gifts-popup--zero-win .gifts-popup__content {
    height: auto;
    flex: 0 1 auto;
    flex-basis: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #popup-gifts .gifts-popup__actions,
  #popup-gifts-result .gifts-popup__actions,
  .gifts-popup__actions--single {
    flex-shrink: 0;
  }

  .game-modal__panel--system,
  .game-modal__panel--device,
  .game-modal__panel--connection {
    justify-content: center;
    height: auto;
    max-height: 100dvh;
    padding: 2rem 0;
  }

  .game-modal__body,
  .game-modal__body--my-bets,
  .game-modal__body--rules,
  .game-modal__body--chat,
  .game-modal__body--how-play,
  .game-modal__body--autoplay,
  #popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__body--autoplay,
  #popup-autoplay.is-autoplay-advanced-open .game-modal__body--autoplay,
  #popup-autoplay.is-autoplay-shared .game-modal__body--autoplay,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__body--autoplay {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #popup-history .game-modal__panel--history {
    height: var(--real-vh, 100dvh);
    max-height: var(--real-vh, 100dvh);
    overflow: hidden;
  }

  #popup-history .game-modal__body--history {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #popup-history .game-modal__body--history > * {
    flex-shrink: 0;
  }

  /* How to play / four-bet info: keep portrait-sized card (full-bleed sheet stretches bet buttons). */
  #popup-how-to-play,
  #popup-four-bet-info {
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  #popup-how-to-play .game-modal__panel,
  #popup-how-to-play .game-modal__panel--how-play {
    width: min(100%, 22.5rem);
    max-width: 22.5rem;
    height: auto;
    max-height: calc(100dvh - 1rem);
    gap: 0;
    border-radius: var(--radius-l);
    padding-bottom: 0.75rem;
    transform: translateY(0.75rem) scale(0.98);
  }

  #popup-four-bet-info .game-modal__panel--four-bet-info {
    padding-bottom: 0.75rem;
  }

  #popup-how-to-play.is-open .game-modal__panel,
  #popup-how-to-play.is-open .game-modal__panel--how-play,
  #popup-four-bet-info.is-open .game-modal__panel,
  #popup-four-bet-info.is-open .game-modal__panel--how-play {
    transform: translateY(0) scale(1);
  }

  #popup-how-to-play .game-modal__header {
    height: 3rem;
    flex-basis: 3rem;
    padding: 0.75rem 1rem;
  }

  #popup-how-to-play .game-modal__body--how-play {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: 0.75rem;
    padding: 0 1rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #popup-how-to-play .how-play-preview {
    width: 100%;
    height: 9.5rem;
    flex: 0 0 9.5rem;
  }

  #popup-how-to-play .how-play-mini {
    width: 95%;
    max-width: 20rem;
    height: 7.25rem;
  }

  #popup-how-to-play .how-play-mini-card {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    height: 7.25rem;
  }

  #popup-how-to-play .how-play-sep {
    height: 7.25rem;
  }

  #popup-how-to-play .how-play-bet-input.bet-input,
  #popup-how-to-play .how-play-chips {
    height: 1.25rem;
    flex-basis: 1.25rem;
  }

  #popup-how-to-play .how-play-chips.bet-chips .chip {
    height: 1.25rem;
  }

  #popup-how-to-play .how-play-bet-button.btn-bet {
    height: 2.5rem;
    flex-basis: 2.5rem;
  }

  #popup-how-to-play .how-play-copy {
    height: auto;
    flex: 0 0 auto;
    min-height: 0;
    gap: 0.5rem;
  }

  #popup-how-to-play .how-play-actions,
  #popup-how-to-play .how-play-next {
    height: 2.5rem;
    flex-basis: 2.5rem;
  }

  #popup-autoplay .game-modal__panel--autoplay,
  #popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay,
  #popup-autoplay.is-autoplay-advanced-open .game-modal__panel--autoplay,
  #popup-autoplay.is-autoplay-shared .game-modal__panel--autoplay,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__panel--autoplay {
    height: auto;
    max-height: 100dvh;
    overflow: hidden;
  }

  .game-modal__body--autoplay,
  #popup-autoplay:not(.is-autoplay-advanced-open) .game-modal__body--autoplay,
  #popup-autoplay.is-autoplay-advanced-open .game-modal__body--autoplay,
  #popup-autoplay.is-autoplay-shared .game-modal__body--autoplay,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .game-modal__body--autoplay {
    height: auto;
    flex: 1 1 auto;
    flex-basis: auto;
    min-height: 0;
    max-height: calc(100dvh - 4rem);
    overflow: hidden;
    padding: 1rem;
  }

  #popup-autoplay .autoplay-settings {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .autoplay-settings__cards,
  #popup-autoplay:not(.is-autoplay-advanced-open) .autoplay-settings__cards,
  #popup-autoplay.is-autoplay-advanced-open .autoplay-settings__cards,
  #popup-autoplay.is-autoplay-shared .autoplay-settings__cards,
  #popup-autoplay.is-autoplay-shared:not(.is-autoplay-advanced-open) .autoplay-settings__cards {
    height: auto;
    flex: 1 1 auto;
    flex-basis: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .autoplay-actions {
    flex: 0 0 3rem;
  }

  #popup-chat .game-modal__panel--chat,
  .game-modal__panel--chat {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  #popup-chat .game-modal__body--chat,
  .game-modal__body--chat {
    height: auto;
    flex: 1 1 auto;
    flex-basis: auto;
    min-height: 0;
    max-height: calc(100dvh - 4rem);
    overflow: hidden;
    padding: 0 1.25rem 1.25rem;
  }

  #popup-chat .chat-messages,
  .game-modal__body--chat .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #popup-chat .chat-composer,
  .game-modal__body--chat .chat-composer {
    flex-shrink: 0;
  }

  .collect-mobile-modal {
    position: fixed;
    inset: 0;
    z-index: 21;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--Additional-Overlay);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
            opacity 180ms ease,
            visibility 180ms ease;
  }

  .collect-mobile-modal[hidden],
  .collect-mobile-sheet[hidden] {
    display: none;
  }

  .collect-mobile-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .collect-mobile-sheet {
    position: relative;
    display: flex;
    width: 100%;
    max-height: 100dvh;
    flex-direction: column;
    gap: 1rem;
    background: var(--background-layout-canvas);
    color: var(--Text-Icons-Primary);
    box-sizing: border-box;
    overflow: hidden;
    /*backdrop-filter: blur(var(--blur-Additional));*/
    margin-top: 0;
    transform: translateY(calc(100% + 1.5rem));
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  .collect-mobile-modal.is-open .collect-mobile-sheet {
    transform: translateY(0);
  }

  .collect-mobile-sheet--presets {
    align-self: flex-end;
    height: auto;
    max-height: 100dvh;
    padding: 1rem;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }

  .collect-mobile-sheet--custom {
    height: auto;
    max-height: 100dvh;
    padding-bottom: 0;
  }

  .collect-mobile-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2rem;
    flex: 0 0 2rem;
    gap: 1rem;
    box-sizing: border-box;
  }

  .collect-mobile-title {
    margin: 0;
    color: var(--Text-Icons-Primary);
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-text-lg);
  }

  .collect-mobile-title--center {
    flex: 1 1 auto;
    text-align: center;
  }

  .collect-mobile-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-max);
    background-color: var(--background-components-Default);
    color: var(--Text-Icons-Primary);
    box-shadow: var(--shadow-Default-button);
    cursor: pointer;
    box-sizing: border-box;
    backdrop-filter: blur(var(--blur-Primary));
  }

  .collect-mobile-icon-button svg.icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    stroke: currentColor;
  }

  .collect-mobile-divider {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 0.0625rem;
    flex: 0 0 0.0625rem;
    background: var(--Base-Base-white-5);
  }

  .collect-mobile-options {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 2rem;
    flex: 0 0 auto;
    gap: 0.4375rem;
    padding-bottom: 3.5rem;
  }

  .collect-mobile-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0.4375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-max);
    background: var(--background-components-Default);
    color: var(--Text-Icons-Primary);
    cursor: pointer;
    box-sizing: border-box;
    font-size: var(--font-size-text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-text-base);
    white-space: nowrap;
  }

  .collect-custom-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 4rem;
    flex: 0 0 4rem;
    padding: 1rem 1.25rem;
    background: var(--Base-Base-black-15);
    box-shadow: inset 0 -0.0625rem 0 var(--Base-Base-white-5);
    box-sizing: border-box;
  }

  .collect-custom-head__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2rem;
    gap: 1rem;
  }

  .collect-custom-body {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 1rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .collect-custom-display,
  .collect-custom-keyboard,
  .collect-custom-set {
    flex-shrink: 0;
  }

  .four-bet-switch {
    left: 0;
    top: 50%;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    transform: translateY(-50%);
    z-index: 2;
  }

  /* Portrait phone whose viewport CSS calls landscape: keep the 20px inside the sheet. */
  html:not(.is-mobile-landscape) .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-how-to-play):not(#popup-welcome) .game-modal__panel,
  html:not(.is-mobile-landscape) .collect-mobile-sheet {
    padding-bottom: 20px;
  }

  html:not(.is-mobile-landscape) .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-how-to-play):not(#popup-welcome) .game-modal__panel--system,
  html:not(.is-mobile-landscape) .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-how-to-play):not(#popup-welcome) .game-modal__panel--device,
  html:not(.is-mobile-landscape) .game-modal:not(#popup-sound):not(#popup-four-bet-info):not(#popup-how-to-play):not(#popup-welcome) .game-modal__panel--connection {
    padding-bottom: calc(2rem + 20px);
  }

  html:not(.is-mobile-landscape) #popup-gifts .game-modal__panel--gifts,
  html:not(.is-mobile-landscape) #popup-gifts-result .game-modal__panel--gifts-result {
    padding-bottom: calc(1.5rem + 20px);
  }

  html:not(.is-mobile-landscape) .collect-mobile-sheet--presets {
    padding-bottom: calc(1rem + 20px);
  }

  html:not(.is-mobile-landscape) #popup-chat .game-modal__body--chat,
  html:not(.is-mobile-landscape) .game-modal__body--chat {
    max-height: calc(100dvh - 4rem - 20px);
  }
}

/* Short viewports: history sheet clips hash rows unless the body is the scrollport. */
@media (max-height: 500px) {
  #popup-history .game-modal__panel--history {
    height: auto;
    max-height: var(--real-vh, 100dvh);
    overflow: hidden;
  }

  #popup-history .game-modal__body--history {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(var(--real-vh, 100dvh) - 5.25rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #popup-history .game-modal__body--history > * {
    flex-shrink: 0;
  }
}

/*
 * iOS / casino iframe: focusing an input shrinks the viewport until width > height,
 * so the landscape block above matches while the phone is still portrait.
 * JS sets html.is-mobile-landscape only for a real device landscape; undo the
 * 2-column layout otherwise so portrait stacking wins.
 */
@media (orientation: landscape) and (max-width: 63.9375rem) and (max-height: 30rem) {
  html:not(.is-mobile-landscape) .page {
    overflow: auto;
  }

  html:not(.is-mobile-landscape) .app,
  html:not(.is-mobile-landscape) .app.is-side-closed {
    --landscape-side-w: 0px;
    --side-width: 0;
    --status-w: 100%;
    --status-px: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    max-width: none;
    height: var(--real-vh);
    min-height: var(--real-vh);
    margin-inline: 0;
    overflow: visible;
    transition: grid-template-columns 0.24s ease;
  }

  html:not(.is-mobile-landscape) .play {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: var(--real-vh);
    min-height: var(--real-vh);
  }

  html:not(.is-mobile-landscape) .topbar {
    position: sticky;
    top: 0;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    gap: 0.875rem 0.25rem;
    padding: 1rem 0.75rem 0.75rem;
    background: none;
  }

  html:not(.is-mobile-landscape) .topbar.is-multipliers-expanded {
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.6) 59.54%, rgba(0, 0, 0, 0) 100%);
  }

  html:not(.is-mobile-landscape) .topbar > .btn-icon {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
  }

  html:not(.is-mobile-landscape) .stage {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
    min-height: 19rem;
    overflow: visible;
  }

  html:not(.is-mobile-landscape) .app.is-animation-off:has(.topbar.is-multipliers-expanded) .stage::before {
    left: 50%;
    right: auto;
    bottom: auto;
    width: 100cqw;
    height: 100cqh;
    top: calc(50% - var(--topbar-multipliers-offset, 0px) / 2);
    transform: translate(-50%, -50%);
  }

  html:not(.is-mobile-landscape) .max-multiplier-popup {
    grid-column: auto;
    grid-row: auto;
  }

  html:not(.is-mobile-landscape) .play-footer {
    display: grid;
    position: relative;
    padding-inline: 1rem;
  }

  html:not(.is-mobile-landscape) .play-footer .status {
    display: inline-flex;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
    width: var(--status-w, min(51.4375rem, 100%));
    max-width: 100%;
    margin: 0;
    padding: 0 var(--status-px, 0.75rem);
  }

  html:not(.is-mobile-landscape) .play-footer .play-bets,
  html:not(.is-mobile-landscape) .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets,
  html:not(.is-mobile-landscape) .app.is-animation-off.mode-4:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .play-bets {
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    left: calc(50% + var(--play-bets-offset-x, 0px));
    top: calc(var(--play-bets-offset-y, -1.81rem) - var(--four-bet-switch-lift, 0px));
    bottom: auto;
    margin-bottom: 0;
    transform: translateX(-50%);
  }

  html:not(.is-mobile-landscape) .play-footer .stage-hud,
  html:not(.is-mobile-landscape) .app.is-animation-off:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud,
  html:not(.is-mobile-landscape) .app.is-animation-off.mode-4:not(.is-bet-parallax-compact):not(.is-bet-action-hitbox) .play-footer .stage-hud {
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    left: calc(50% + var(--stage-hud-offset-x, 0px));
    top: calc(var(--stage-hud-offset-y, -8.4rem) - var(--four-bet-switch-lift, 0px));
    bottom: auto;
    margin-top: 0;
    width: max-content;
    max-width: calc(100% - 2rem);
    transform: translateX(-50%);
  }

  html:not(.is-mobile-landscape) .play-footer .bet-dock-wrap {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
    width: 100%;
    touch-action: auto;
  }

  html:not(.is-mobile-landscape) .four-bet-switch {
    position: absolute;
    left: 0;
    top: auto;
    bottom: calc(0.25rem - var(--play-footer-gap, 0.75rem));
    width: 100%;
    max-width: 100%;
    transform: none;
    z-index: 2;
  }

  html:not(.is-mobile-landscape) .side,
  html:not(.is-mobile-landscape) .app.mode-4 .side {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: calc(var(--real-vh) - 550px + var(--bet-layout-collapse, var(--bet-dock-collapse, 0rem)));
    min-height: auto;
    padding: 0.75rem;
    overflow: hidden;
    background: var(--background-layout-canvas);
  }

  html:not(.is-mobile-landscape) .is-side-closed .side,
  html:not(.is-mobile-landscape) .app.mode-4 .is-side-closed .side {
    grid-column: auto;
    grid-row: auto;
  }

  html:not(.is-mobile-landscape) .app:not(.is-gift-mode) .play-footer .compact-bet-actions {
    display: flex !important;
  }

  html:not(.is-mobile-landscape) .bet-dock,
  html:not(.is-mobile-landscape) .mode-1 .bet-dock,
  html:not(.is-mobile-landscape) .mode-classic .bet-dock,
  html:not(.is-mobile-landscape) .app.mode-4 .bet-dock,
  html:not(.is-mobile-landscape) .app.is-bet-scrolling .bet-dock {
    position: relative;
    width: 100%;
    padding: 0.75rem;
    border: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--background-layout-canvas);
    box-shadow:
      inset 1px 0 0 var(--Base-Base-white-10),
      inset -1px 0 0 var(--Base-Base-white-10),
      inset 0 1px 0 var(--Base-Base-white-10);
    backdrop-filter: none;
    overflow: hidden;
  }

  html:not(.is-mobile-landscape) .app:not(.mode-1):not(.mode-classic):not(.mode-4) .bet-dock {
    height: calc(12.75rem - var(--bet-dock-collapse, 0rem));
  }

  html:not(.is-mobile-landscape) .mode-classic .bet-dock {
    height: calc(16.0625rem - var(--bet-dock-collapse, 0rem));
  }

  html:not(.is-mobile-landscape) .mode-1 .bet-dock {
    height: calc(8.5rem - var(--bet-dock-collapse, 0rem));
    padding: 0.25rem;
  }

  html:not(.is-mobile-landscape) .app.mode-4 .bet-dock {
    height: calc(20.04rem - var(--bet-dock-collapse, 0rem));
    padding: var(--mode4-dock-p, 5px);
  }

  html:not(.is-mobile-landscape) .bet-dock::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #191924;
    pointer-events: none;
    z-index: 0;
  }

  html:not(.is-mobile-landscape) .bet-dock::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    height: 1px;
    background: var(--Base-Base-white-10, rgba(255, 255, 255, 0.10));
    pointer-events: none;
    z-index: 1;
  }

  html:not(.is-mobile-landscape) .mode-1 .bet-dock::after {
    left: 0.375rem;
    right: 0.375rem;
  }

  html:not(.is-mobile-landscape) .mode-1 .bet-panel .bet-card,
  html:not(.is-mobile-landscape) .mode-1 [data-bet-panel="0"] {
    background: transparent;
  }
}

.mode-card[data-bet-mode="classic"] .mode-icon--desktop-new,
.mode-card[data-bet-mode="classic"] .mode-subtitle--desktop-new {
  display: none;
}

/* Any landscape: keep How to play at portrait card width (not full-bleed). */
@media (orientation: landscape) {
  #popup-how-to-play {
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  #popup-how-to-play .game-modal__panel,
  #popup-how-to-play .game-modal__panel--how-play {
    width: min(100%, 22.5rem);
    max-width: 22.5rem;
    border-radius: var(--radius-l);
  }

  .how-play-multiplier {
    background-position: bottom;
  }
}

@media (min-width: 48rem) {
  .mode-grid > .mode-card:nth-child(2) {
    display: none;
  }

  .mode-grid > .mode-card:last-child {
    grid-column: 1 / -1;
  }

  /* Desktop keeps classic bet layout, but labels it as New */
  .mode-card[data-bet-mode="classic"] .mode-icon--classic,
  .mode-card[data-bet-mode="classic"] .mode-subtitle--classic {
    display: none;
  }

  .mode-card[data-bet-mode="classic"] .mode-icon--desktop-new {
    display: inline-flex;
  }

  .mode-card[data-bet-mode="classic"] .mode-subtitle--desktop-new {
    display: block;
  }
}

/* Landscape phones are often ≥48rem wide — restore real New (double) + Classic labels/layout. */
@media (orientation: landscape) and (max-width: 63.9375rem) and (max-height: 30rem) {
  .mode-grid > .mode-card[data-bet-mode="double"] {
    display: inline-flex;
  }

  .mode-grid > .mode-card:last-child {
    grid-column: auto;
  }

  .mode-card[data-bet-mode="classic"] .mode-icon--classic {
    display: inline-flex;
  }

  .mode-card[data-bet-mode="classic"] .mode-subtitle--classic {
    display: block;
  }

  .mode-card[data-bet-mode="classic"] .mode-icon--desktop-new,
  .mode-card[data-bet-mode="classic"] .mode-subtitle--desktop-new {
    display: none !important;
  }
}

@media (max-width: 22.5rem) {
  .topbar-row {
    gap: 0.5rem;
  }

  .logo {
    width: 4.125rem;
    height: auto;
  }

  .bet-panel {
    gap: 0.375rem;
  }

  .bet-panel .bet-body {
    gap: 0.375rem;
  }
}

@media (hover: none), (pointer: coarse) {
  :where(a, button, input, textarea, select, label, summary, [role="button"], [tabindex]) {
    touch-action: manipulation;
  }

  .btn-primary:hover:not(:active):not(.active),
  .btn-icon-primary:hover:not(:active):not(.active),
  .btn-bet.place-bet:hover:not(:active):not(.active) {
    background: var(--Primary-Primary-base);
  }

  .keyboard-key:hover:not(:active):not(.keyboard-key--press),
  .autobet-selector:hover:not(:active):not(.autobet-selector--selected),
  .copyable-value:hover:not(:active):not(.copyable-value--press),
  .avatar-back:hover:not(:active),
  .game-modal__icon-button:hover:not(:active),
  .collect-mobile-icon-button:hover:not(:active),
  .collect-mobile-chip:hover:not(:active) {
    background: var(--background-components-Default);
  }

  .btn-tertiary:hover:not(:active):not(.active),
  .btn-icon-tertiary:hover:not(:active):not(.active),
  .menu-item:hover:not(:active):not(.active),
  .mode-card:hover:not(:active):not(.mode-card--active),
  .segment:hover:not(:active):not(.segment--active) {
    background-color: transparent;
  }

  .btn-bet.cash-out:hover:not(:active):not(.active) {
    background: var(--Green-Green-gradient-base);
    transition: none;
  }

  .btn-bet.cancel-bet:hover:not(:active):not(.active) {
    background: var(--Red-Red-gradient-base);
    transition: none;
  }

  /* Short mobile: Android keeps the cancel press layer white after tap. */
  @media (max-width: 47.9375rem) and (max-height: 630px) {
    .btn-bet.cancel-bet {
      -webkit-appearance: none;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
      will-change: auto;
      background-color: #E20A28;
    }

    .btn-bet.cancel-bet:active,
    .btn-bet.cancel-bet.active,
    .btn-bet.cancel-bet:focus {
      background: var(--Red-Red-gradient-base);
      background-color: #E20A28;
      -webkit-tap-highlight-color: transparent;
      transition: none;
    }
  }

  .btn-bet.disable:hover:not(:active):not(.active) {
    background: var(--Green-Green-base, #42C854);
    transition: none;
  }

  .btn-autoplay:hover:not(:active) {
    color: var(--Text-Icons-Secondary);
  }

  .bet-input:hover:not(:focus-within),
  .collect-input:hover:not(:focus-within),
  .chat-input:hover:not(:focus-within) {
    background-color: var(--background-components-Default);
  }

  .collect-input:has(.collect-value):hover:not(:focus-within) {
    background-color: transparent;
  }

  .collect-input:has(.collect-value):hover:not(:focus-within) .collect-value {
    background-color: var(--background-components-Default);
  }

  .bet-input:focus-within:not(:has(.bet-input-field:focus)) {
    background-color: var(--background-components-Default);
    border-color: transparent;
  }

  .bet-input-btn:not(.disabled):hover:not(:active) {
    color: var(--Text-Icons-Primary);
  }

  /* Firefox mobile can keep :hover/:active stuck after tap */
  .chat-input-send:hover,
  .chat-input-send:active {
    background-color: transparent;
  }

  .chat-input-send:hover:not(.chat-input-send-active),
  .chat-input-send:active:not(.chat-input-send-active) {
    color: var(--Text-Icons-Secondary);
  }

  .chat-input-send.chat-input-send-active:hover,
  .chat-input-send.chat-input-send-active:active {
    background-color: transparent;
    color: var(--Primary-Primary-base);
  }

  .chip:hover:not(:active):not(.active) {
    background-color: var(--background-components-Default);
    color: var(--Text-Icons-Secondary);
  }

  .segment:hover:not(:active):not(.segment--active),
  .line-tab:hover:not(.line-tab--active),
  .filter-option:hover:not(.filter-option--active) {
    color: var(--Text-Icons-Secondary);
  }

  .filter-option:hover:not(.filter-option--active) {
    background-color: transparent;
  }

  .profile-row:hover .profile-action {
    color: var(--Text-Icons-Secondary);
  }

  .avatar-choice:hover {
    transform: none;
  }

  .badge-multiplier.low:hover:not(:active):not(.active) {
    background-color: var(--background-components-Default);
    border-color: var(--Base-Base-white-5);
  }

  .badge-multiplier.medium:hover:not(:active):not(.active) {
    background-color: var(--Primary-Primary-op-5);
    border-color: var(--Primary-Primary-op-10);
  }

  .badge-multiplier.high:hover:not(:active):not(.active) {
    background-color: var(--Green-Green-op-5);
    border-color: var(--Green-Green-op-10);
  }

  .badge-multiplier.max:hover:not(:active):not(.active) {
    background-color: var(--Primary-Primary-op-5);
    border-color: var(--Primary-Primary-op-10);
  }

  .bets-row:hover:not(:active):not(.bets-row--active) {
    background-color: var(--background-components-Disable);
  }

  .bets-row.win:hover:not(:active):not(.bets-row--active) {
    background-color: var(--Green-Green-op-5);
  }

  .filter-pill:hover:not([aria-expanded="true"]) {
    background-color: var(--background-components-Default);
    color: var(--Text-Icons-Secondary);
  }
}

@media (max-width: 47.9375rem) {
  .menu-item:hover:not(:active):not(.active) {
    background-color: transparent;
  }

  .bet-input:has(.bet-input-btn:focus) {
    background-color: var(--background-components-Default);
    border-color: transparent;
  }
}

/* Visual preferences */
.is-visual-hidden {
  display: none !important;
}

.is-visual-hidden-space {
  visibility: hidden !important;
  pointer-events: none !important;
}

.mode-card.mode-card--visual-disabled {
  display: none !important;
}